/* UnitSnap design system v2
   Direction: measuring instrument. Cool graphite neutrals, one locked accent (signal green),
   mono numerals everywhere, density tuned for a reference tool rather than a marketing page.

   Shape rule (documented, applied everywhere):
     interactive pills + round buttons -> full radius
     containers / cards / tables       -> 12px
     inputs and selects                -> 10px

   Icon glyph geometry is from Tabler Icons (MIT). Inlined to keep the site request-free.
*/

:root {
  color-scheme: light;
  --bg: #f5f7f8;
  --bg-tint: #eceff1;
  --surface: #ffffff;
  --surface-2: #eef1f3;
  --ink: #0f1419;
  --ink-2: #48535e;
  --ink-3: #5a6672;
  --line: #dde2e6;
  --line-strong: #c0c8ce;
  --accent: #0a6b46;
  --accent-ink: #ffffff;
  --accent-soft: #e0f0e8;
  --accent-line: #9fcbb6;
  --focus: #0a6b46;
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, .07);
  --shadow-md: 0 1px 2px rgba(15, 20, 25, .05), 0 10px 24px -14px rgba(15, 20, 25, .28);
  --r-card: 12px;
  --r-input: 10px;
  --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --s7: 44px; --s8: 60px;
  --maxw: 1180px;
  --head-h: 64px;
  --ff: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1013;
  --bg-tint: #11161a;
  --surface: #161b20;
  --surface-2: #1d242a;
  --ink: #e9eef2;
  --ink-2: #a6b2bd;
  --ink-3: #93a0ab;
  --line: #262e35;
  --line-strong: #3a454e;
  --accent: #5ed49f;
  --accent-ink: #06231a;
  --accent-soft: #14302a;
  --accent-line: #2f5f4d;
  --focus: #5ed49f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -18px rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }

/* A theme flip should be instant. Without this every hover transition cross-fades
   its colors for ~150ms and the whole page smears through mid-tones. */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* type scale: 1.22 ratio, tight tracking on display sizes */
h1, h2, h3 { margin: 0 0 var(--s3); line-height: 1.15; font-weight: 640; letter-spacing: -0.022em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.1vw, 2.7rem); }
h2 { font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem); letter-spacing: -0.015em; }
h3 { font-size: 1rem; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s4); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, select, input, summary):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--surface); color: var(--ink);
  padding: 12px 16px; border-radius: 0 0 10px 0; box-shadow: var(--shadow-md); }
.skip:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) {
  .site-head { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(150%) blur(10px); }
}
.head-row { display: flex; align-items: center; gap: var(--s4); height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none;
  font-weight: 660; font-size: 1.05rem; letter-spacing: -0.03em; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 24px; height: 24px; color: var(--accent); flex: 0 0 auto; }
.head-spacer { flex: 1 1 auto; }
.head-link { color: var(--ink-2); text-decoration: none; font-size: .9rem; padding: 10px; border-radius: 8px;
  transition: color .14s ease; }
.head-link:hover { color: var(--ink); text-decoration: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-input);
  color: var(--ink-2); cursor: pointer; font: inherit; font-size: .875rem;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .icon-btn, .icon-btn:active { transition: none; transform: none; } }

/* ------------------------------------------------------------------- hero */
.hero { padding: var(--s7) 0 var(--s5); }
.hero h1 { max-width: 20ch; }
.lede { font-size: 1.05rem; color: var(--ink-2); max-width: 58ch; margin-bottom: 0; }
.hero-meta { margin: var(--s4) 0 0; font-family: var(--ff-mono); font-size: .8rem; color: var(--ink-3);
  letter-spacing: .01em; }
.breadcrumb { font-size: .84rem; color: var(--ink-3); margin: var(--s4) 0 0; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* hub hero: value prop left, the links people actually came for on the right */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s8); }
  .hero-side { padding-top: 6px; }
}

/* --------------------------------------------------------- page structure */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-bottom: var(--s6); }
@media (min-width: 1024px) {
  .page-grid { grid-template-columns: minmax(0, 1fr) 296px; gap: var(--s8); align-items: start; }
  .col-rail { position: sticky; top: calc(var(--head-h) + 24px); }
}
.section { padding: var(--s6) 0 0; }
.section:first-child { padding-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); }
.section-head h2 { margin: 0; }
.section-head span { font-family: var(--ff-mono); font-size: .78rem; color: var(--ink-3); }

/* ------------------------------------------------------------- converter */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); padding: var(--s5); }

.conv-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s4); align-items: end; }
@media (max-width: 780px) { .conv-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .78rem; font-weight: 620; color: var(--ink-2); text-transform: none; letter-spacing: .01em; }
.field input, .field select {
  width: 100%; min-height: 50px; padding: 11px 13px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-input);
  transition: border-color .14s ease;
}
.field input { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600;
  letter-spacing: -0.01em; }
.field select { appearance: none; padding-right: 38px; background-repeat: no-repeat;
  background-position: right 13px center; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field .out { background: var(--surface-2); border-style: dashed; }

.swap-wrap { display: flex; align-items: center; justify-content: center; padding-bottom: 3px; }
@media (max-width: 780px) { .swap-wrap { padding: var(--s1) 0; } }
.swap { width: 46px; height: 46px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), background .14s ease, color .14s ease; }
.swap:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.swap:active { transform: scale(.94); }
.swap svg { width: 19px; height: 19px; }
.swap.spun { transform: rotate(180deg); }
.swap.spun:active { transform: rotate(180deg) scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .swap { transition: background .14s ease, color .14s ease; }
  .swap.spun, .swap:active, .swap.spun:active { transform: none; }
}

.result { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.result-value { display: block; font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em;
  line-height: 1.15; word-break: break-word; }
.result-value .u { color: var(--accent); font-size: .5em; font-weight: 620; margin-left: .45em;
  letter-spacing: 0; vertical-align: baseline; }
.result-formula { display: block; margin-top: 6px; color: var(--ink-2); font-size: .86rem; font-family: var(--ff-mono); }
.result-note { display: block; margin-top: 6px; color: var(--accent); font-size: .86rem; font-weight: 560; }

.tool-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4);
  padding-top: var(--s4); border-top: 1px dashed var(--line); }
.tool-row label { font-size: .8rem; color: var(--ink-2); }
.tool-row select { min-height: 44px; padding: 8px 12px; font: inherit; font-size: .875rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-input); }
.copied { color: var(--accent); font-size: .84rem; font-weight: 620; }
.hint { color: var(--ink-3); font-size: .82rem; flex: 1 1 220px; min-width: 0; }

/* ----------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: .86rem; text-decoration: none; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease, transform .1s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 560; }
.chip .sym { font-family: var(--ff-mono); }
@media (prefers-reduced-motion: reduce) { .chip, .chip:active { transition: none; transform: none; } }

/* -------------------------------------------------------- rail (desktop) */
.rail-block + .rail-block { margin-top: var(--s6); }
.rail-block h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  font-weight: 620; margin-bottom: var(--s3); }
.rail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rail-list li { border-bottom: 1px solid var(--line); }
.rail-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 44px; padding: 8px 2px; color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.rail-list a:hover { color: var(--accent); text-decoration: none; }
.rail-list .sym { font-family: var(--ff-mono); font-size: .78rem; color: var(--ink-3); }
.rail-units { font-family: var(--ff-mono); font-size: .8rem; color: var(--ink-3); line-height: 1.7;
  word-spacing: .1em; }

/* --------------------------------------------------------- search + hub */
.search-wrap { position: relative; margin: var(--s5) 0 0; max-width: 640px; }
.search-wrap input { width: 100%; min-height: 54px; padding: 13px 16px 13px 46px; font: inherit; font-size: 1rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.search-wrap input:hover { border-color: var(--ink-3); }
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.search-count { margin: var(--s3) 0 0; font-size: .85rem; color: var(--ink-2); min-height: 0; }

/* category index tables */
.cat-table { font-size: .94rem; }
.cat-table th[scope=row] { font-weight: 500; padding: 0; }
.cat-table th[scope=row] a { display: block; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.cat-table tbody tr:hover th[scope=row] a { color: var(--accent); }
.cat-table td { padding: 12px 14px; }
.cat-table .col-count { width: 4.5rem; color: var(--ink-2); }
.cat-table .col-base { color: var(--ink-2); white-space: nowrap; }
.cat-table .col-sym { color: var(--ink-3); font-size: .84rem; }
.cat-table tbody tr[hidden] { display: none; }
@media (max-width: 860px) { .cat-table .col-base { display: none; } }
@media (max-width: 620px) { .cat-table .col-sym { display: none; } }

.group { padding-top: var(--s7); scroll-margin-top: calc(var(--head-h) + 12px); }
.group p.note { color: var(--ink-2); font-size: .92rem; margin: 0 0 var(--s4); max-width: 62ch; }

.empty-state { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.empty-state h2 { margin-bottom: var(--s2); }
.empty-state p { color: var(--ink-2); max-width: 52ch; }

/* ----------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption { text-align: left; color: var(--ink-2); font-size: .87rem; padding: 0 0 var(--s3); }
th, td { text-align: left; padding: 10px 14px; white-space: nowrap; }
/* sticky relative to .table-scroll, which is the nearest scrollport: any non-zero
   offset would float the head into the table and cover the first row. */
thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); font-weight: 620; border-bottom: 1px solid var(--line); }
tbody th { font-weight: 500; color: var(--ink); }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--line); }
td.num, th.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: .86rem; }
tbody tr:hover th, tbody tr:hover td { background: var(--surface-2); }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 66ch; }
.prose code { font-family: var(--ff-mono); font-size: .9em; background: var(--surface-2); padding: 3px 7px;
  border-radius: 6px; border: 1px solid var(--line); }
details.faq { border-bottom: 1px solid var(--line); }
details.faq:first-of-type { border-top: 1px solid var(--line); }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; gap: 14px; align-items: center; min-height: 56px; padding: 6px 0; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--ink-3); font-size: 1.25rem; line-height: 1; font-weight: 400; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: 0 0 var(--s4); color: var(--ink-2); max-width: 66ch; }

/* --------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s7) 0 var(--s8);
  background: var(--bg-tint); color: var(--ink-2); font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s6); }
.foot-grid h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  margin-bottom: var(--s3); font-weight: 620; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 7px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--accent); text-decoration: underline; }
.foot-note { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: .83rem; color: var(--ink-3); }