/* unitcheck.net theme: precise, quiet, utilitarian, like a good measuring tool.
   Off-white paper, slate text, one blueprint-blue accent. Category colours appear only on small icons.
   Inter for text with tabular numerals; results and charts in JetBrains Mono. */
:root {
  --c-bg: #f6f5f1;
  --c-surface: #ffffff;
  --c-surface-2: #eceef1;
  --c-field: #ffffff;
  --c-text: #1e293b;
  --c-muted: #4d5b6e;
  --c-border: #d7dbe1;
  --c-border-strong: #9aa5b4;
  --c-primary: #1b4b9b;
  --c-primary-hover: #153b7c;
  --c-on-primary: #ffffff;
  --c-primary-soft: #e6edf8;
  --c-link: #1b4b9b;
  --c-focus: #2563eb;
  --c-ink: #1e293b;
  --c-result-bg: #eef3fa;
  --c-result-text: #10233f;
  --c-info: #1b4b9b;
  --c-info-bg: #e6edf8;

  --font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-num: var(--font-mono);
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgb(30 41 59 / 0.06);
  --h1-weight: 700;
  --h1-tracking: -0.022em;
}
body { font-variant-numeric: tabular-nums; font-feature-settings: "cv05", "cv08", "ss03"; }
h2 { letter-spacing: -0.012em; }

/* Header: a hairline of ruler ticks along the bottom edge */
.k-header { background-image: repeating-linear-gradient(90deg, var(--c-border-strong) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--c-border-strong) 0 1px, transparent 1px 50px); background-size: 100% 4px, 100% 8px; background-position: left bottom; background-repeat: no-repeat; }
.k-brand__mark { border-radius: 4px; }
.k-nav a { font-size: 0.93rem; padding: 0.5rem 0.55rem; }
/* Ten categories: below a wide desktop the menu gets its own scrolling row, as on phones. */
@media (max-width: 76rem) {
  .k-header__inner { padding-bottom: 0; }
  .k-nav { order: 3; flex-basis: 100%; margin: 0 calc(var(--gap) * -1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .k-nav::-webkit-scrollbar { display: none; }
  .k-nav ul { padding: 0 var(--gap); }
}
.k-search-btn { border-radius: var(--radius); }
.k-hero__search { border-radius: var(--radius); }
.k-trustline li::before { color: var(--c-primary); }
.k-tile { border-radius: var(--radius-lg); }
.k-tile:hover { transform: none; }
.k-tile__icon { width: 2.1rem; height: 2.1rem; border-radius: 4px; background: var(--c-surface-2); }
.k-tile__icon svg { width: 1.25rem; height: 1.25rem; }
.k-formula { border-left: 3px solid var(--c-primary); border-radius: 0 var(--radius) var(--radius) 0; background: var(--c-surface); font-size: 1.05rem; }
.k-result { border: 1px solid #c9d7ec; }
.k-result__value { font-family: var(--font-mono); font-weight: 650; font-size: clamp(1.45rem, 1.05rem + 2.3vw, 2.3rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.k-steps > li::before { border-radius: 3px; font-family: var(--font-mono); }
.k-prose table th[scope="row"] { font-weight: 600; }
.k-prose td, .uc-all-table td { font-family: var(--font-mono); font-size: 0.92em; }
.k-prose td.uc-src, .uc-common td:last-child { font-family: var(--font-sans); }

/* Category colours: icons only */
.uc-cat--length { color: #1b4b9b; }
.uc-cat--weight { color: #6d3fc4; }
.uc-cat--temperature { color: #c2362b; }
.uc-cat--volume { color: #0b7a94; }
.uc-cat--area { color: #2f7a36; }
.uc-cat--cooking { color: #b8560f; }
.uc-cat--speed { color: #b02a6b; }
.uc-cat--energy { color: #946200; }
.uc-cat--digital { color: #4a47b5; }
.uc-cat--time { color: #0f766e; }

/* ---------- Converter ---------- */
.uc-digits { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.uc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-items: end; }
.uc-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; min-width: 0; }
.uc-field > label { font-weight: 600; font-size: 0.95rem; }
.uc-sym { margin-left: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: var(--c-surface-2); color: var(--c-muted); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; }
/* The kit styles ".tool input" through a long :not() chain; !important is the short way past it. */
.tool .uc-field > input { width: 100%; min-height: 3.25rem !important; font-family: var(--font-mono) !important; font-size: 1.45rem !important; font-weight: 550 !important; letter-spacing: -0.01em; }
.tool .uc-field > input[aria-invalid="true"] { border-color: var(--c-danger); }
.tool .uc-field > select { width: 100%; }
.uc-field > .uc-unit-label { font-size: 0.8rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
.tool button.uc-swap { justify-self: start; min-height: 2.75rem; padding: 0.3rem 0.8rem; gap: 0.45rem; color: var(--c-primary); background: var(--c-surface); border: 1px solid var(--c-border-strong); font-size: 0.9rem; }
.tool button.uc-swap:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.tool button.uc-swap svg { transform: rotate(90deg); }
@media (min-width: 36rem) {
  .uc-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; }
  .tool button.uc-swap { justify-self: center; align-self: start; margin-top: 1.85rem; min-height: 3.25rem; padding: 0.3rem 0.7rem; }
  .tool button.uc-swap svg { transform: none; }
  .tool button.uc-swap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.uc-result { margin-top: 1rem; }
.uc-eq-from { color: var(--c-muted); font-weight: 500; }
.uc-of { font-family: var(--font-sans); font-size: 0.7em; letter-spacing: 0; }
.uc-result .k-result__note.uc-digits { color: var(--c-text); font-size: 1.02rem; }
.uc-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.uc-options .k-field { flex: 0 1 11rem; }
.uc-fraction, .uc-variants { border: 0; margin: 0; padding: 0; min-width: 0; }
.uc-fraction[hidden] { display: none; }
.uc-fraction legend, .uc-variants legend { padding: 0; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.uc-variants { margin-bottom: 1rem; }
.k-segmented { flex-wrap: wrap; border-radius: var(--radius-lg); }
.k-segmented span { font-size: 0.9rem; padding: 0.4rem 0.75rem; }
.k-segmented input:checked + span { color: var(--c-primary); }
.uc-group { margin-bottom: 1rem; max-width: 18rem; }
.uc-all { margin-top: 1.25rem; border-top: 1px solid var(--c-border); padding-top: 0.75rem; }
.uc-all summary { cursor: pointer; font-weight: 600; color: var(--c-link); }
.uc-all[open] summary { margin-bottom: 0.6rem; }
.uc-all-table td { text-align: right; }
.uc-reverse { margin-top: 2rem; }

/* ---------- Cooking converter and kitchen mode ---------- */
.uc-kitchen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.uc-ingredient { margin-bottom: 0.6rem; }
.uc-picks, .uc-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.uc-quick { margin: 0.75rem 0 0; }
.tool button.uc-pick { min-height: 2.5rem; padding: 0.3rem 0.75rem; font-size: 0.9rem; font-weight: 550; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border-strong); }
.tool button.uc-pick:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.tool button.uc-pick[aria-pressed="true"] { color: var(--c-on-primary); background: var(--c-primary); border-color: var(--c-primary); }
.uc-quick .uc-pick { font-family: var(--font-mono); min-width: 3rem; }
.uc--kitchen { border-color: var(--c-primary); border-width: 2px; }
.uc--kitchen .uc-field > input { min-height: 4.25rem !important; font-size: 2rem !important; }
.uc--kitchen .uc-field > select, .uc--kitchen .uc-ingredient select { min-height: 3.5rem; font-size: 1.15rem; }
.uc--kitchen button.uc-pick { min-height: 3.5rem; padding: 0.5rem 1rem; font-size: 1.1rem; flex: 1 1 8rem; }
.uc--kitchen .uc-quick .uc-pick { flex: 1 1 4rem; font-size: 1.25rem; }
.uc--kitchen button.uc-swap { min-height: 3.5rem; }
.uc--kitchen .k-result__value { font-size: clamp(2rem, 1.3rem + 4vw, 3.25rem); }
.uc--kitchen .uc-options, .uc--kitchen .k-actions { display: none; }
.uc-ingredients td.uc-src { font-size: 0.85rem; white-space: nowrap; }
.uc-ingredients caption { caption-side: top; text-align: left; padding-bottom: 0.4rem; font-family: var(--font-sans); font-size: 0.9rem; color: var(--c-muted); }
.uc-ingredients th[scope="row"] { font-family: var(--font-sans); }

/* ---------- Charts ---------- */
.uc-chart { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1rem; }
.uc-chart--1 { grid-template-columns: minmax(0, 24rem); }
.uc-chart--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .uc-chart--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uc-chart--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-chart--wide.uc-chart--1 { grid-template-columns: minmax(0, 28rem); }
}
.k-prose .uc-chart__table { margin: 0 0 0.75rem; font-size: 0.88rem; align-self: start; }
.k-prose .uc-chart__table th, .k-prose .uc-chart__table td { padding: 0.28rem 0.45rem; text-align: right; white-space: nowrap; }
.k-prose .uc-chart__table thead th { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.k-prose .uc-chart__table tbody tr:nth-child(5n) th, .k-prose .uc-chart__table tbody tr:nth-child(5n) td { border-bottom-color: var(--c-border-strong); }
.k-prose .uc-chart__table tbody th { color: var(--c-muted); font-weight: 500; }
.uc-print-only { display: none; }

/* ---------- Scale graphic ---------- */
.uc-scale { margin: 0 0 1rem; }
.uc-scale svg { display: block; width: 100%; height: auto; }
.uc-scale__body { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: 1; }
.uc-scale__mid { stroke: var(--c-border-strong); stroke-width: 1; }
.uc-scale .uc-tick { stroke: var(--c-muted); stroke-width: 0.9; }
.uc-scale .uc-tick--major { stroke: var(--c-text); stroke-width: 1.3; }
.uc-scale text { font-family: var(--font-mono); font-size: 11px; fill: var(--c-text); }
.uc-scale .uc-scale__unit { font-size: 10px; fill: var(--c-primary); font-weight: 700; }
.uc-scale__marker { stroke: var(--c-primary); stroke-width: 2; }
.uc-scale figcaption { margin-top: 0.4rem; font-size: 0.875rem; color: var(--c-muted); }

/* ---------- Home ---------- */
.uc-home-tool { max-width: 46rem; }
.uc-popular { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); list-style: none; margin: 0 0 1rem; padding: 0; }
.uc-popular a { display: flex; flex-direction: column; gap: 0.1rem; height: 100%; padding: 0.7rem 0.9rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); text-decoration: none; }
.uc-popular a:hover { border-color: var(--c-primary); }
.uc-popular strong { color: var(--c-link); font-weight: 650; }
.uc-popular span { font-family: var(--font-mono); font-size: 0.85rem; color: var(--c-muted); }

/* ---------- Other tools ---------- */
.uc-grid { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.uc-grid .k-field > input, .uc-week input { font-family: var(--font-mono) !important; font-size: 1.15rem !important; }
.uc-rows { list-style: none; margin: 0 0 1rem; padding: 0; }
.uc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 5.5rem) auto; gap: 0.5rem; align-items: end; padding: 0.5rem 0; border-bottom: 1px solid var(--c-border); }
.uc-rows input { width: 100%; }
.uc-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; list-style: none; margin: 0.6rem 0 0; padding: 0; }
.uc-stats li { display: flex; flex-direction: column; }
.uc-stats span { font-size: 0.8rem; color: var(--c-muted); }
.uc-stats strong { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; }
@media (max-width: 30rem) { .uc-rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Print: the chart on one sheet, A4 or US Letter ---------- */
@page { margin: 12mm; }
@media print {
  body { background: #fff; color: #000; font-size: 10pt; }
  .k-crumbs, .k-trust, .tool, .k-faq, .k-sources, .k-byline, .uc-noprint, .uc-scale, .uc-reverse, .k-skip, .k-search { display: none !important; }
  .k-page--tool { max-width: none; }
  .k-prose > *:not(.uc-print), .k-page--hub .k-prose > *:not(.uc-print), .k-page--hub > section { display: none !important; }
  .k-prose > .uc-print { display: block !important; }
  .k-page__head h1 { font-size: 16pt; margin-bottom: 2mm; }
  .k-lede { font-size: 10pt; color: #000; margin-bottom: 3mm; max-width: none; }
  .k-section-head { margin: 0 0 1mm; }
  .k-section-head h2, .uc-print h3 { font-size: 11pt; margin: 3mm 0 1mm; }
  .uc-print .k-muted { color: #000; font-size: 8pt; margin-bottom: 2mm; }
  .uc-chart { gap: 0 6mm; margin-bottom: 2mm; }
  .uc-chart--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uc-chart--2, .uc-chart--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-chart--wide.uc-chart--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-prose .uc-chart__table { font-size: 7.5pt; margin: 0; break-inside: avoid; }
  .k-prose .uc-chart__table th, .k-prose .uc-chart__table td { padding: 0.35mm 1.2mm; border-bottom: 0.2pt solid #999; }
  .k-prose .uc-chart__table thead th { border-bottom: 0.6pt solid #000; color: #000; font-size: 7.5pt; }
  .k-prose .uc-chart__table tbody th { color: #000; }
  .uc-ingredients { font-size: 7.5pt !important; }
  .uc-ingredients th, .uc-ingredients td { padding: 0.5mm 1.5mm !important; }
  .k-table-wrap { overflow: visible; }
  .uc-print-only { display: block; margin-top: 2mm; font-size: 7.5pt; }
}

/* Tools with two fixed sides joined by an equals sign */
.uc-swap--static { display: grid; place-items: center; min-height: 2rem; font-family: var(--font-mono); font-size: 1.4rem; color: var(--c-muted); }
@media (min-width: 36rem) { .uc-swap--static { align-self: end; min-height: 3.25rem; } }
.uc-form > .uc-grid { align-items: end; }
.uc-form > .uc-grid .k-field > input { min-height: 3.25rem !important; font-size: 1.45rem !important; font-weight: 550 !important; }
.k-field.is-output > input { background: var(--c-result-bg); border-style: dashed; }
.uc-coords { margin: 0; display: grid; gap: 0.6rem; }
.uc-coords > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.75rem; align-items: center; padding-bottom: 0.6rem; border-bottom: 1px solid #c9d7ec; }
.uc-coords > div:last-child { border-bottom: 0; padding-bottom: 0; }
.uc-coords dt { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 600; color: var(--c-muted); }
.uc-coords dd { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.uc-maplinks { margin-top: 0.9rem; font-size: 0.95rem; }
.uc-week input { width: 100%; min-width: 5.5rem; }
.uc-week td, .uc-week th { vertical-align: middle; }
.k-result__value .k-badge { font-family: var(--font-sans); font-size: 1.05rem; padding: 0.35rem 0.9rem; }

/* The kit has width and margin rules for bare "label + input" pairs in tools that predate it.
   The converters set their own widths, so these declarations must win over those rules. */
.tool .uc-field > input, .tool .uc-field > select, .tool .k-field > input, .tool .k-field > select { width: 100% !important; }
.tool .uc-field > label, .tool .k-field > label { margin: 0 !important; }

/* Two side-by-side reference tables with wide cells (24-hour to 12-hour) stack on a phone. */
@media (max-width: 26rem) {
  .uc-chart--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Wordmark: the second half of the name carries the brand colour */
.k-brand__name span { color: var(--c-primary); }

/* ---------- Home hero: the quick converter sits beside the headline ---------- */
.k-hero__aside.uc-home-tool { max-width: none; }
.k-hero__aside .uc-group { max-width: none; }
.uc-home-tool .tool { margin: 0; box-shadow: var(--shadow-lg); }