/* ============================================================================
   meterradio — shared stylesheet
   Subject framing: field RF test equipment / instrument documentation.
   Monospace is the utility face: frequencies, FCC IDs, band labels, table data.
   Tokens carried over unchanged from the single-page prototype.
   ========================================================================== */

:root {
  --ground:#EDF0F3; --panel:#FFFFFF; --panel-2:#F5F7F9;
  --ink:#111820; --ink-2:#4A5763; --ink-3:#6E7C89;
  --line:#D3DAE1; --line-2:#E4E9ED;
  --accent:#15619E; --accent-soft:#DCE9F4;
  --good:#1B7A4C; --good-soft:#DCEFE4;
  --warn:#9A6710; --warn-soft:#F6EBD6;
  --crit:#A33131; --crit-soft:#F5DEDE;
  --mono-bg:#E6EBF0;
  --shadow:0 1px 2px rgba(17,24,32,.06), 0 4px 16px rgba(17,24,32,.05);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --measure:760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0E1317; --panel:#161D24; --panel-2:#1B242C;
    --ink:#E4EAF0; --ink-2:#94A3B0; --ink-3:#748492;
    --line:#26313A; --line-2:#1F2830;
    --accent:#4FA3E0; --accent-soft:#16303F;
    --good:#46B37B; --good-soft:#12301F;
    --warn:#D2953A; --warn-soft:#312309;
    --crit:#E06A6A; --crit-soft:#341717;
    --mono-bg:#1D262E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --ground:#0E1317; --panel:#161D24; --panel-2:#1B242C;
  --ink:#E4EAF0; --ink-2:#94A3B0; --ink-3:#748492;
  --line:#26313A; --line-2:#1F2830;
  --accent:#4FA3E0; --accent-soft:#16303F;
  --good:#46B37B; --good-soft:#12301F;
  --warn:#D2953A; --warn-soft:#312309;
  --crit:#E06A6A; --crit-soft:#341717;
  --mono-bg:#1D262E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --ground:#EDF0F3; --panel:#FFFFFF; --panel-2:#F5F7F9;
  --ink:#111820; --ink-2:#4A5763; --ink-3:#6E7C89;
  --line:#D3DAE1; --line-2:#E4E9ED;
  --accent:#15619E; --accent-soft:#DCE9F4;
  --good:#1B7A4C; --good-soft:#DCEFE4;
  --warn:#9A6710; --warn-soft:#F6EBD6;
  --crit:#A33131; --crit-soft:#F5DEDE;
  --mono-bg:#E6EBF0;
  --shadow:0 1px 2px rgba(17,24,32,.06), 0 4px 16px rgba(17,24,32,.05);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}

.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.wrap { width:100%; max-width:var(--measure); margin:0 auto; padding:0 18px; }

a { color:var(--accent); text-underline-offset:2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;
}

.skip {
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--panel); color:var(--accent); padding:10px 14px;
  border:1px solid var(--accent); border-radius:0 0 6px 0;
}
.skip:focus { left:0; }

/* ---- site chrome ------------------------------------------------------- */

.topbar {
  border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:10;
}
.topbar-in {
  display:flex; align-items:center; gap:14px;
  min-height:54px; padding-top:6px; padding-bottom:6px;
}
.brand {
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  letter-spacing:.02em; color:var(--ink); text-decoration:none;
  white-space:nowrap; flex:0 0 auto;
}
.brand .dim { color:var(--ink-3); font-weight:500; }

nav.site { flex:1 1 auto; min-width:0; }
nav.site ul {
  list-style:none; margin:0; padding:0;
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
}
nav.site ul::-webkit-scrollbar { display:none; }
nav.site a {
  display:block; padding:6px 9px; border-radius:5px;
  font-size:13.5px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
nav.site a:hover { background:var(--panel-2); color:var(--ink); }
nav.site a[aria-current="page"] {
  color:var(--accent); background:var(--accent-soft); font-weight:560;
}

.theme-btn {
  flex:0 0 auto; width:32px; height:32px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  color:var(--ink-2);
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
.theme-btn svg { width:16px; height:16px; display:none; }
/* The head script always stamps data-theme before paint, so exactly one icon
   resolves. The button itself is hidden until that script runs — it does
   nothing without JS, and the tokens already follow prefers-color-scheme. */
:root[data-theme="dark"] .theme-btn .i-sun { display:block; }
:root[data-theme="light"] .theme-btn .i-moon { display:block; }

main { flex:1 0 auto; padding:28px 0 56px; }

/* ---- page header ------------------------------------------------------- */

.crumbs {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.crumbs a { color:var(--ink-3); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.crumbs .sep { opacity:.5; margin:0 6px; }

.eyebrow {
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
h1 {
  font-size:clamp(27px,6.4vw,40px); line-height:1.1; letter-spacing:-.022em;
  margin:0 0 12px; text-wrap:balance; font-weight:660;
}
.lede { margin:0; color:var(--ink-2); font-size:16.5px; max-width:60ch; }
.page-head { margin-bottom:28px; }

/* ---- prose ------------------------------------------------------------- */

.prose { max-width:66ch; }
.prose > * + * { margin-top:1em; }
.prose h2 {
  font-size:20px; font-weight:640; letter-spacing:-.016em;
  margin:2em 0 .1em; text-wrap:balance;
}
.prose h3 {
  font-size:16.5px; font-weight:620; letter-spacing:-.008em;
  margin:1.7em 0 .1em;
}
.prose p, .prose li { color:var(--ink-2); }
.prose strong { color:var(--ink); font-weight:600; }
.prose ul, .prose ol { padding-left:22px; }
.prose li + li { margin-top:.4em; }
.prose li::marker { color:var(--ink-3); }
.prose code {
  font-family:var(--mono); font-size:.88em;
  background:var(--mono-bg); color:var(--ink);
  padding:1.5px 5px; border-radius:4px;
}
.prose a { font-weight:500; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.2em 0; }
.prose blockquote {
  margin:1.4em 0; padding:2px 0 2px 16px;
  border-left:3px solid var(--line); color:var(--ink-3); font-style:normal;
}

pre {
  font-family:var(--mono); font-size:13px; line-height:1.5;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; overflow-x:auto; margin:1.2em 0;
}
pre code { background:none; padding:0; font-size:inherit; }

/* ---- section headings (eyebrow treatment) ------------------------------ */
/* Scoped to section/note headings only, so panel headings (.tool-head, .card
   h3) keep the body face without fighting the cascade. Do not widen this
   selector — an earlier version needed inline overrides to escape it. */

section { margin-top:44px; }
section > h2, .note > h2 {
  font-size:13px; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
  color:var(--ink-3); margin:0 0 4px;
  font-family:var(--mono);
}
.sec-lede { margin:0 0 20px; color:var(--ink-2); font-size:15px; max-width:62ch; }

/* ---- band diagram ------------------------------------------------------ */

.band { margin:24px 0 28px; }
.band-scale {
  position:relative; height:38px; border-radius:5px; overflow:hidden;
  background:linear-gradient(90deg,var(--panel-2),var(--mono-bg),var(--panel-2));
  border:1px solid var(--line);
}
.band-tick { position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.band-span {
  position:absolute; top:0; bottom:0; background:var(--accent); opacity:0;
  transition:left .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.band-span.on { opacity:.34; }
.band-labels { display:flex; justify-content:space-between; margin-top:7px; font-size:11.5px; color:var(--ink-3); }
.band-cap { margin-top:9px; font-size:13px; color:var(--ink-2); min-height:1.4em; }

/* ---- panels ------------------------------------------------------------ */

.tool { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px 20px; box-shadow:var(--shadow); }
.tool + .tool { margin-top:16px; }

h2.tool-head {
  margin:0 0 4px; font-size:18px; font-weight:640; letter-spacing:-.015em;
  color:var(--ink); text-transform:none; font-family:var(--sans);
}
.tool-sub { margin:0 0 16px; font-size:14.5px; color:var(--ink-2); }

/* ---- lookup ------------------------------------------------------------ */

.search-row { display:flex; gap:8px; }
.search-row input {
  flex:1 1 auto; min-width:0; font:inherit; font-size:16px;
  font-family:var(--mono);
  letter-spacing:.04em; text-transform:uppercase;
  padding:11px 13px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel-2); color:var(--ink);
}
.search-row input::placeholder { text-transform:none; letter-spacing:0; color:var(--ink-3); }
.search-row input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.examples { margin:11px 0 0; font-size:13px; color:var(--ink-3); }
.examples button {
  font:inherit; font-size:12.5px; font-family:var(--mono);
  background:var(--mono-bg); border:1px solid var(--line); color:var(--accent);
  border-radius:4px; padding:2px 7px; margin:0 3px 4px 0; cursor:pointer;
}
.examples button:hover { border-color:var(--accent); }

.hits { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.hit {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel-2); cursor:pointer; font:inherit; text-align:left; width:100%;
  color:var(--ink);
}
.hit:hover { border-color:var(--accent); }
.hit-id { font-family:var(--mono); font-size:13.5px; font-weight:600; }
.hit-mk { font-size:12.5px; color:var(--ink-3); }
.dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.dot.y { background:var(--good); } .dot.n { background:var(--crit); }

/* ---- qualifier --------------------------------------------------------- */

.q { margin-bottom:20px; }
.q:last-of-type { margin-bottom:0; }
.q-label {
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:11px;
}
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opts.stack { flex-direction:column; }
button.opt {
  font:inherit; font-size:14.5px; text-align:left; cursor:pointer;
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:7px;
  padding:10px 14px; transition:background .14s, border-color .14s, color .14s;
}
.opts:not(.stack) button.opt { flex:1 1 auto; text-align:center; min-width:92px; }
button.opt:hover { border-color:var(--accent); }
button.opt[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:560; }
@media (prefers-reduced-motion:reduce) { button.opt { transition:none; } }
.hint { margin:9px 0 0; font-size:13px; color:var(--ink-3); }

/* ---- verdict ----------------------------------------------------------- */

.verdict { margin-top:20px; border-radius:9px; overflow:hidden; border:1px solid var(--line); display:none; }
.verdict.show { display:block; animation:rise .3s cubic-bezier(.4,0,.2,1); }
@keyframes rise { from { opacity:0; transform:translateY(7px);} to {opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce) {
  .verdict.show { animation:none; } .band-span { transition:none; }
}
.v-head { padding:14px 18px; display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.v-pill {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 9px; border-radius:4px; font-weight:600; white-space:nowrap; color:#fff;
}
.v-head h3 { margin:0; font-size:17px; letter-spacing:-.012em; font-weight:620; }
.v-body { padding:16px 18px 18px; background:var(--panel); border-top:1px solid var(--line); }
.v-body p { margin:0 0 13px; font-size:15px; color:var(--ink-2); }
.v-body p:last-child { margin-bottom:0; }
.v-body strong { color:var(--ink); font-weight:600; }

.spec { width:100%; border-collapse:collapse; margin:4px 0 15px; font-size:13.5px; }
.spec th, .spec td { text-align:left; padding:7px 0; border-bottom:1px solid var(--line-2); vertical-align:top; }
.spec th {
  font-family:var(--mono);
  font-weight:500; color:var(--ink-3); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; width:42%; padding-right:14px;
}
.spec td { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom:none; }

.good .v-head { background:var(--good-soft); } .good .v-pill { background:var(--good); }
.warn .v-head { background:var(--warn-soft); } .warn .v-pill { background:var(--warn); }
.crit .v-head { background:var(--crit-soft); } .crit .v-pill { background:var(--crit); }

/* ---- stats ------------------------------------------------------------- */

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.stat .n {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:26px; font-weight:640; letter-spacing:-.02em; display:block; line-height:1.15;
}
.stat .l { font-size:12.5px; color:var(--ink-3); margin-top:3px; display:block; }
.stat.hero .n { color:var(--accent); }

/* ---- checks / callouts ------------------------------------------------- */

.checks { display:grid; gap:12px; }
.check {
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:7px; padding:14px 16px;
}
.check h3 { margin:0 0 5px; font-size:15px; font-weight:620; letter-spacing:-.008em; }
.check p { margin:0; font-size:14px; color:var(--ink-2); }
.check.good { border-left-color:var(--good); }
.check.warn { border-left-color:var(--warn); }
.check.crit { border-left-color:var(--crit); }

.callout {
  margin:1.6em 0; padding:14px 16px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent);
}
.callout > :first-child { margin-top:0; }
.callout > :last-child { margin-bottom:0; }
.callout p { margin:0 0 10px; font-size:14.5px; color:var(--ink-2); }
.callout p:last-child { margin-bottom:0; }
.callout .k {
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;
}
.callout.warn { border-left-color:var(--warn); background:var(--warn-soft); }
.callout.warn .k { color:var(--warn); }
.callout.crit { border-left-color:var(--crit); background:var(--crit-soft); }
.callout.crit .k { color:var(--crit); }
.callout.good { border-left-color:var(--good); background:var(--good-soft); }
.callout.good .k { color:var(--good); }

/* ---- tables ------------------------------------------------------------ */

.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel); margin:1.4em 0; }
table.data { width:100%; border-collapse:collapse; font-size:13.5px; min-width:540px; }
table.data th, table.data td { padding:10px 13px; text-align:left; border-bottom:1px solid var(--line-2); }
table.data thead th {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--panel-2); white-space:nowrap;
}
table.data tbody tr:last-child td { border-bottom:none; }
table.data td.m { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data td, table.data th { color:var(--ink-2); }
table.data td strong { color:var(--ink); }

.tag { font-size:11px; padding:2px 7px; border-radius:3px; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.tag.y { background:var(--good-soft); color:var(--good); }
.tag.n { background:var(--crit-soft); color:var(--crit); }
.tag.m { background:var(--warn-soft); color:var(--warn); }

/* ---- card grid (index pages, next-steps) ------------------------------- */

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:12px; margin:1.4em 0 0; }
a.card {
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:15px 17px; box-shadow:var(--shadow);
  transition:border-color .14s, transform .14s;
}
a.card:hover { border-color:var(--accent); }
@media (prefers-reduced-motion:no-preference) { a.card:hover { transform:translateY(-1px); } }
a.card .k {
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:7px;
}
a.card h3 { margin:0 0 5px; font-size:16px; font-weight:620; letter-spacing:-.01em; color:var(--ink); }
a.card p { margin:0; font-size:13.5px; color:var(--ink-2); }
a.card:hover h3 { color:var(--accent); }

/* ---- note block -------------------------------------------------------- */

.note { margin-top:44px; padding:18px 20px; border:1px dashed var(--line); border-radius:8px; background:var(--panel-2); }
.note h2 { margin-bottom:10px; }
.note p { margin:0 0 11px; font-size:14.5px; color:var(--ink-2); }
.note p:last-child { margin-bottom:0; }
.note strong { color:var(--ink); font-weight:600; }

/* ---- site footer ------------------------------------------------------- */

footer.site {
  flex:0 0 auto;
  border-top:1px solid var(--line); background:var(--panel);
  padding:26px 0 34px; font-size:13px; color:var(--ink-3);
}
footer.site .cols {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:20px 24px; margin-bottom:22px;
}
footer.site h2 {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 8px;
}
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site li + li { margin-top:5px; }
footer.site ul a { color:var(--ink-2); text-decoration:none; }
footer.site ul a:hover { color:var(--accent); }
footer.site .fine { border-top:1px solid var(--line-2); padding-top:16px; }
footer.site .fine p { margin:0 0 8px; max-width:74ch; }
footer.site .fine p:last-child { margin-bottom:0; }
footer.site .fine strong { color:var(--ink-2); }