/* ── Radio instruction page ───────────────────────────────────────
       One page per physical radio. Carries both routes to the serial —
       without removing the unit, and by removing it — as tabs, plus the
       entry as the final numbered step of the same sequence.

       Tokens only, no new colours. See DESIGN.md. */

    .radio-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--spacing-24); }
    .radio-head-art {
      flex: none; width: 104px; height: 58px;
      background: var(--surface-linen-band); border-radius: 10px; padding: 4px 6px;
    }
    .radio-head-art svg { width: 100%; height: 100%; display: block; }
    .radio-head-t { flex: 1 1 0; min-width: 0; }
    .radio-head-name { display: block; font-size: var(--text-heading-sm); letter-spacing: var(--tracking-heading-sm);
      font-weight: var(--font-weight-bold); color: var(--color-carbon); line-height: 1.14; }
    .radio-head-sub { display: block; font-size: 13px; color: var(--color-ash-text); margin-top: 4px; }

    /* tabs */
    .radio-tabs {
      display: flex; gap: 6px; padding: 4px;
      background: var(--surface-mist-fill); border-radius: var(--radius-buttons);
      margin-bottom: var(--spacing-20);
    }
    .radio-tab {
      flex: 1; padding: 11px 8px; border: 0; background: none;
      border-radius: var(--radius-buttons); font: inherit; font-size: 14px;
      font-weight: var(--font-weight-semibold); color: var(--color-graphite); cursor: pointer;
      transition: background .15s ease, color .15s ease;
    }
    .radio-tab[aria-selected="true"] {
      background: var(--surface-canvas); color: var(--color-carbon);
      box-shadow: var(--shadow-subtle-2);
    }
    .radio-tab:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; }
    .radio-panel { display: none; }
    .radio-panel.is-on { display: block; }

    /* steps */
    .radio-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px; }
    .radio-steps li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--color-graphite); }
    .radio-steps b {
      flex: none; width: 23px; height: 23px; border-radius: 50%;
      background: var(--surface-canvas); border: 1px solid var(--color-fog);
      color: var(--color-carbon); font-size: 12px; font-weight: var(--font-weight-bold);
      display: flex; align-items: center; justify-content: center;
    }
    .radio-steps em { font-style: normal; color: var(--color-carbon); font-weight: var(--font-weight-semibold); }
    .radio-steps kbd {
      font-family: var(--font-mono); font-size: 13px; font-weight: var(--font-weight-semibold);
      background: var(--color-carbon); color: var(--color-paper-white);
      border-radius: 5px; padding: 2px 8px;
    }

    .radio-need { margin: 0 0 16px; padding: 12px 14px; background: var(--color-linen); border-radius: 10px; }
    .radio-need-k { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
      font-weight: var(--font-weight-bold); color: var(--color-graphite); margin-bottom: 5px; }
    .radio-need-v { font-size: 13.5px; color: var(--color-graphite); line-height: 1.45; }
    .radio-need-v b { color: var(--color-carbon); font-weight: var(--font-weight-semibold); }

    .radio-warn { margin: 15px 0 0; padding: 12px 14px; border-radius: 10px;
      background: #fff6e5; font-size: 13px; line-height: 1.45; color: #8a5a00; }
    .radio-warn b { font-weight: var(--font-weight-bold); }

    /* ── The specimen ─────────────────────────────────────────────────
       The shape you are hunting for and the box you type into are the
       same object. The cells start greyed as the example and fill as the
       customer types, so "have I got the right thing" is answered by
       looking rather than by reading a rule. */
    .radio-final { margin-top: var(--spacing-24); }
    .radio-final-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .radio-final-n {
      flex: none; width: 23px; height: 23px; border-radius: 50%;
      background: var(--color-carbon); color: var(--color-paper-white);
      font-size: 12px; font-weight: var(--font-weight-bold);
      display: flex; align-items: center; justify-content: center;
    }
    .radio-final-t { font-size: var(--text-subheading); letter-spacing: var(--tracking-subheading);
      font-weight: var(--font-weight-semibold); color: var(--color-carbon); }

    .radio-spec { padding: 17px 14px 16px; background: var(--surface-mist-fill); border-radius: var(--radius-cards); }
    .radio-spec-k { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
      font-weight: var(--font-weight-bold); color: var(--color-graphite); text-align: center; margin-bottom: 13px; }

    .radio-glyphs { display: flex; justify-content: center; gap: 5px; }
    .radio-glyph {
      width: 30px; height: 43px; border-radius: 7px;
      background: var(--surface-canvas); border: 1px solid var(--color-fog);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 20px; font-weight: var(--font-weight-semibold);
      color: var(--color-carbon);
      transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .radio-glyph.is-empty { color: var(--color-fog); }
    .radio-glyph.is-filled { background: var(--color-mint-wash); border-color: var(--color-lavender); }
    .radio-glyph.is-wrong { background: #ffeceb; border-color: var(--color-ember); color: var(--color-ember); }

    .radio-braces { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
    .radio-brace { font-size: 11.5px; color: var(--color-graphite); text-align: center; line-height: 1.3; }
    .radio-brace i { display: block; height: 5px; border: 1px solid var(--color-fog); border-bottom: 0;
      border-radius: 4px 4px 0 0; margin-bottom: 4px; }

    .radio-not { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0 0; padding-top: 14px;
      border-top: 1px solid var(--color-fog); font-size: 13px; line-height: 1.45; color: var(--color-graphite); }
    .radio-not svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--color-ash); }
    .radio-not b { color: var(--color-carbon); font-weight: var(--font-weight-semibold); }
    .radio-not code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-canvas);
      border: 1px solid var(--color-fog); border-radius: 4px; padding: 1px 5px; }

    .radio-serial-input {
      width: 100%; margin-top: 12px; padding: 15px 16px;
      font: inherit; font-size: 20px; font-family: var(--font-mono);
      background: var(--surface-canvas); color: var(--color-carbon);
      border: 1px solid var(--color-fog); border-radius: var(--radius-inputs);
      letter-spacing: .14em; text-align: center; text-transform: uppercase;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .radio-serial-input::placeholder { color: var(--color-fog); }
    .radio-serial-input:focus { outline: none; border-color: var(--color-lavender);
      box-shadow: 0 0 0 3px rgba(18, 53, 36, 0.22); }
    .radio-serial-input.is-ok { border-color: var(--color-mint); box-shadow: 0 0 0 3px rgba(51,199,88,.18); }
    .radio-serial-input.is-bad { border-color: var(--color-ember); box-shadow: 0 0 0 3px rgba(255,62,0,.14); }

    .radio-status { margin: 9px 0 0; font-size: 13.5px; min-height: 20px; text-align: center; color: var(--color-graphite); }
    .radio-status.is-ok { color: var(--color-lavender); font-weight: var(--font-weight-semibold); }
    .radio-status.is-bad { color: var(--color-ember); font-weight: var(--font-weight-semibold); }

    .radio-go {
      width: 100%; margin-top: 11px; padding: 15px;
      background: var(--color-carbon); color: var(--color-paper-white); border: 0;
      border-radius: var(--radius-buttons); font: inherit; font-size: 15px;
      font-weight: var(--font-weight-semibold); cursor: pointer; transition: background .15s ease, opacity .15s ease;
    }
    .radio-go:hover { background: var(--color-lavender); }
    .radio-go:disabled { opacity: .4; cursor: default; background: var(--color-carbon); }
    .radio-go:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 3px; }
    .radio-price { margin: 10px 0 0; font-size: 12.5px; color: var(--color-ash-text); text-align: center; }

    .radio-body { max-width: 560px; margin: 0 auto; }

    /* A retrieval method inferred from grouping, not confirmed by name. */
    .radio-unconfirmed {
      margin: 0 0 var(--spacing-16); padding: 10px 13px; border-radius: 10px;
      background: #fff6e5; color: #8a5a00; font-size: 13px; line-height: 1.45;
    }

    /* Variable-length serials (TravelPilot, Bosch) — plain input, no specimen. */
    .radio-varhint { font-size: 13px; color: var(--color-graphite); margin: 0 0 10px; }
    .radio-serial-input--wide { font-size: 16px; letter-spacing: .06em; text-align: left; }

/* ── Hub page: model comparison + inline lookup ──────────────────────────────
   The "Which radio is in your X?" pages were ~155 words with no way to buy:
   a visitor who arrived from Google already holding their serial had to pick a
   model page first, and one who could not identify their unit had nowhere to
   go at all. These styles carry the comparison table and the inline lookup. */
.hub-intro { max-width: 760px; margin: 0 0 var(--spacing-32); }
.hub-intro p { color: var(--color-graphite); margin-bottom: var(--spacing-16); }

.hub-table-wrap { overflow-x: auto; margin: 0 0 var(--spacing-32); }
.hub-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-caption);
}
.hub-table th,
.hub-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-fog);
  vertical-align: top;
}
.hub-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.hub-table td { color: var(--color-graphite); }
.hub-table td a { color: var(--color-carbon); font-weight: var(--font-weight-medium); }
.hub-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  color: var(--color-carbon);
  white-space: nowrap;
}

.hub-lookup {
  max-width: 560px;
  margin: 0 0 var(--spacing-48);
  padding: var(--spacing-32);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  background: var(--color-linen);
}
.hub-lookup-h {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  margin: 0 0 var(--spacing-8);
}
.hub-lookup-p { color: var(--color-graphite); font-size: var(--text-caption); margin: 0 0 var(--spacing-16); }

/* A caption the screen reader announces and the eye does not see. The table has
   a visible heading above it, so a second visible caption would be duplication —
   but the table still needs a programmatic name. Clip rather than display:none,
   which would remove it from the accessibility tree as well. */
.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;
}

/* An email is not a serial. It reuses the input's box and focus ring but not the
   monospace, the letter spacing, the centring or the uppercase transform: those
   exist to make a serial easy to read back character by character, and applied
   to an address they render "buyer@example.com" as "BUYER@EXAMPLE.COM", which
   looks like the form has mangled what the customer typed. */
.resend-email-input {
  font-family: inherit;
  font-size: var(--text-body);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}


/* ── Brand page: radio picker rows ───────────────────────────────────────
   Moved here from the mockup's inline <style> when the pattern went live on
   the real pages. Leaving them inline meant the markup shipped with no rules
   behind it, which verify_pages.mjs caught as unstyled elements. */
/* The sprite must stay in the document for <use href="#..."> to resolve, but
       it must not occupy space. Not display:none, which stops <use> resolving in
       some browsers — zero-size and clipped instead. This rule lives inline on
       ford-radios.html and I copied the sprite without it, which is what put a
       blank band at the top of the page. */
    .radio-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rt-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px 96px; }
/* The section starts below the fold on purpose: someone who already has
       their serial should see the box and nothing competing with it. */
    .rt-wrap { padding-top: 72px; }
.rt-row { padding-left: 16px; padding-right: 16px; }
.rt-h { font-size: var(--text-heading-sm); font-weight: var(--font-weight-bold);
            color: var(--color-carbon); margin: 0 0 6px; text-align: center; }
.rt-sub { color: var(--color-graphite); margin: 0 0 40px; text-align: center; }
/* Same divider the brands page uses for its A/B/C bands, so the two lists
       read as the same component: sticky, tinted, hairline top and bottom. */
    .rt-group {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--surface-mist-fill, #f5f5f5);
      border-top: 1px solid var(--color-fog, #e8e8e8);
      border-bottom: 1px solid var(--color-fog, #e8e8e8);
      padding: 4px 16px;
      margin: 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-graphite, #6b7280);
    }
.rt-list { margin-bottom: 0; }
/* illustration left, name right, one row per radio */
    .rt-row { display: flex; align-items: center; gap: 20px; padding: 14px 8px;
              border-bottom: 1px solid var(--color-fog); text-decoration: none; }
.rt-row:hover { background: var(--surface-mist-fill); }
.rt-row:hover .rt-name { color: var(--color-lavender); }
.rt-art { flex: 0 0 88px; }
.rt-art svg { width: 88px; height: auto; display: block; }
.rt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt-name { font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--color-carbon); }
.rt-meta { font-size: var(--text-caption); color: var(--color-ash-text); }
.rt-go { flex: 0 0 auto; color: var(--color-ash); font-size: 18px; }
.rt-tbc { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
              background: var(--surface-mist-fill); color: var(--color-ash-text);
              font-size: 11px; font-weight: var(--font-weight-medium); letter-spacing: .04em;
              text-transform: uppercase; vertical-align: middle; }
.rt-row { gap: 14px; }
.rt-art, .rt-art svg { flex-basis: 64px; width: 64px; }

@media (max-width: 640px) {
      .rt-row { gap: 14px; }
      .rt-art, .rt-art svg { flex-basis: 64px; width: 64px; }

.radio-help {
      display: block; width: 100%; max-width: 420px; margin: var(--spacing-32) auto 0;
      padding: 14px; background: none;
      border: 1px dashed var(--color-fog); border-radius: var(--radius-cards);
      font: inherit; font-size: 14px; color: var(--color-graphite);
      text-align: center; text-decoration: none;
    }
    .radio-help:hover { border-color: var(--color-ash); color: var(--color-carbon); }

.rc-help { display: block; width: 100%; max-width: 420px; margin: var(--spacing-32) auto 0; padding: 14px; background: none; border: 1px dashed var(--color-fog); border-radius: var(--radius-cards); font: inherit; font-size: 14px; color: var(--color-graphite); text-align: center; text-decoration: none; }

/* Links to model-specific pages, kept on the brand page so those pages are not
   orphaned. They were linked from a section the brand-page rebuild replaced,
   which quietly re-orphaned four pages that had been fixed earlier the same
   day — caught by the orphan check, not by looking. */
.radio-related {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.radio-related a { color: var(--color-carbon); font-weight: var(--font-weight-medium); }