/* ============================================================================
   UNSTOCKED — design system v3 "Print / Etch"
   ----------------------------------------------------------------------------
   One drawing, two substrates. By day: ink printed on cold workshop paper.
   By night: the same drawing laser-engraved and paint-filled into a gunmetal
   data plate. Printed things flip with the stock (text, rules, tables, chips,
   sheets); physical objects keep their color (the titanium burn, anodize
   fills, brass, selection) — anodized metal doesn't change color when the
   lights go out. Depth inverts: paper shades darker for emphasis, metal
   raises lighter and recesses interaction.

   Theme mechanics: light tokens at :root; dark tokens twice — in the
   prefers-color-scheme media query (auto) and under [data-theme="dark"]
   (manual override via /theme.js). The two dark blocks are DUPLICATED BY
   DESIGN — edit both or the override drifts from auto.

   Type roles: Big Shoulders (display, caps only) · Libre Franklin (text) ·
   Courier Prime (every value: prices, specs, dates, section numbers, stamps).

   Legacy token NAMES (--bg, --surface, --accent, --ink-muted, --plate-*, …)
   are kept as aliases so existing per-page <style> blocks keep resolving.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* substrate — cold manual stock */
  --paper:        #F5F5F1;
  --paper-shade:  #ECECE6;   /* alternating bands, table heads */
  --paper-dim:    #E3E3DB;   /* wells, disabled */
  --ink:          #16161A;   /* text + strong rules — 16.5:1 */
  --ink-soft:     #45454D;   /* 8.69:1 */
  --ink-faint:    #66666D;   /* captions, meta — 5.21:1 (v2's #78787F was 4.01:1) */
  --rule:         #D2D2C9;   /* hairlines, decorative by contract */
  --rule-strong:  var(--ink);/* 2px section rules — manuals rule hard */

  /* the one color — anodize + burn */
  --anodize:      #6D1FC4;   /* text-safe accent — 7.27:1 */
  --anodize-mid:  #8129E0;   /* fills, borders, stamp-button fill */
  --accent-contrast: #FFFFFF;/* text on an anodize-mid fill — 6.3:1 */
  --burn-blue:    #3D7BFF;   /* first temper colour */
  --burn: linear-gradient(90deg, #3D7BFF 0%, #B04BFF 52%, #FFB84D 100%);
  --burn-text: linear-gradient(90deg, #3D7BFF 0%, #B04BFF 100%);
  /* ^ text fills clamp to the blue→violet range; the amber tail is 1.57:1 on
     paper and lives only on bars, dividers and silhouettes */
  --brass:        #7A5800;   /* money — 5.96:1 */
  --brass-tint:   #F3E9CF;   /* CAUTION wash, premium chip bg */
  --gold-contrast:#F5F5F1;   /* text on a brass/gold fill */

  /* the sheet — build sheets, bench, gallery cards. A fresh work order on
     the paper pile: separation by border + shadow, not value. */
  --sheet:        #FCFCFA;
  --sheet-edge:   #16161A;
  --sheet-border: 2px solid var(--sheet-edge);
  --sheet-chamfer: inset 0 1px 0 rgba(255, 255, 255, 0); /* dark-only highlight */
  --field-bg:     #FCFCFA;
  --field-line:   #16161A;

  /* chips & stickers — solid pairs, no alpha stacking */
  --tier-premium-ink: #7A5800;  --tier-premium-bg: #F3E9CF;  /* 5.39:1 */
  --tier-mid-ink:     #6D1FC4;  --tier-mid-bg:     #EDE4FA;  /* 6.46:1 */
  --tier-budget-ink:  #1D4FB8;  --tier-budget-bg:  #E2EAF9;  /* 6.07:1 */
  --stage1-ink:   #1D4FB8;   /* blue-ink sticker outline — 6.71:1 */

  /* mechanics */
  --focus-ring:    var(--ink);
  --selection-bg:  #6D1FC4;
  --selection-ink: #F5F5F1;
  --leader-ink:    rgba(22, 22, 26, 0.42);
  --stamp-shadow:  3px 3px 0 rgba(22, 22, 26, 0.14); /* hard offset, never blur */
  --stamp-press:   1px 1px 0 rgba(22, 22, 26, 0.14);
  --silhouette-ink: rgba(22, 22, 26, 0.06);
  --scroll-hint:   rgba(22, 22, 26, 0.28);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2345454D' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --measure:       66ch;

  /* legacy aliases — per-page <style> blocks reference these names */
  --bg:            var(--paper);
  --bg-soft:       var(--paper-shade);
  --surface:       var(--paper);
  --surface-2:     var(--paper-shade);
  --accent:        var(--anodize);
  --accent-bright: var(--anodize);
  --accent-soft:   #EDE4FA;
  --accent-line:   rgba(109, 31, 196, 0.38);
  --gold:          var(--brass);
  --gold-soft:     var(--brass-tint);
  --ink-muted:     var(--ink-soft);
  --line:          var(--rule);
  --line-soft:     #E1E1D9;
  --radius-sm:     2px;
  --radius:        2px;
  --radius-lg:     4px;      /* sheets; the 18px molded plate is retired */
  /* v2 plate names — resolve onto the sheet so old page CSS keeps working */
  --plate:         var(--sheet);
  --plate-raised:  var(--paper-shade);
  --plate-line:    var(--rule);
  --plate-ink:     var(--ink);
  --plate-accent:  var(--anodize);
  --plate-gold:    var(--brass);

  /* type */
  --font-display: 'Big Shoulders', 'Big Shoulders Display', 'Arial Narrow',
                  'Roboto Condensed', sans-serif;
  --font-text: 'Libre Franklin', 'Franklin Gothic Medium', -apple-system,
               'Segoe UI', sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', Courier, monospace;
}

/* --- night run: the etched data plate. DUPLICATED below under
       [data-theme="dark"] — edit both blocks together. -------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #15151C;
    --paper-shade:  #1F1F29;   /* raised — lighter than ground */
    --paper-dim:    #101014;   /* recessed — darker than ground */
    --ink:          #F4F4F8;   /* the paint fill — 16.6:1 */
    --ink-soft:     #B8B8C6;   /* 9.27:1 */
    --ink-faint:    #8F8FA0;   /* 5.71:1 */
    --rule:         #2A2A36;
    --anodize:      #C77DFF;   /* 9.2:1 */
    --anodize-mid:  #B04BFF;
    --accent-contrast: #101014;/* engraved text on the bright fill — 4.79:1 */
    --brass:        #FFB84D;   /* 10.6:1 */
    --brass-tint:   #3A2C17;
    --gold-contrast:#101014;
    --sheet:        #1A1A22;
    --sheet-edge:   #3E3E4A;
    --sheet-border: 1px solid var(--sheet-edge);
    --sheet-chamfer: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --field-bg:     #101014;
    --field-line:   #8F8FA0;
    --tier-premium-ink: #FFB84D;  --tier-premium-bg: #3A2C17;  /* 7.87:1 */
    --tier-mid-ink:     #C77DFF;  --tier-mid-bg:     #321E4C;  /* 5.48:1 */
    --tier-budget-ink:  #7CA7FF;  --tier-budget-bg:  #1C2740;  /* 6.25:1 */
    --stage1-ink:   #7CA7FF;
    --selection-bg: #B04BFF;
    --selection-ink:#101014;
    --leader-ink:   rgba(244, 244, 248, 0.40);
    --stamp-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); /* metal casts true black */
    --stamp-press:  1px 1px 0 rgba(0, 0, 0, 0.55);
    --silhouette-ink: rgba(244, 244, 248, 0.07);
    --scroll-hint:  rgba(244, 244, 248, 0.18);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8B8C6' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    --accent-soft:  #321E4C;
    --accent-line:  rgba(199, 125, 255, 0.38);
    --line-soft:    #24242E;
  }
}
:root[data-theme="dark"] {
  --paper:        #15151C;
  --paper-shade:  #1F1F29;
  --paper-dim:    #101014;
  --ink:          #F4F4F8;
  --ink-soft:     #B8B8C6;
  --ink-faint:    #8F8FA0;
  --rule:         #2A2A36;
  --anodize:      #C77DFF;
  --anodize-mid:  #B04BFF;
  --accent-contrast: #101014;
  --brass:        #FFB84D;
  --brass-tint:   #3A2C17;
  --gold-contrast:#101014;
  --sheet:        #1A1A22;
  --sheet-edge:   #3E3E4A;
  --sheet-border: 1px solid var(--sheet-edge);
  --sheet-chamfer: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --field-bg:     #101014;
  --field-line:   #8F8FA0;
  --tier-premium-ink: #FFB84D;  --tier-premium-bg: #3A2C17;
  --tier-mid-ink:     #C77DFF;  --tier-mid-bg:     #321E4C;
  --tier-budget-ink:  #7CA7FF;  --tier-budget-bg:  #1C2740;
  --stage1-ink:   #7CA7FF;
  --selection-bg: #B04BFF;
  --selection-ink:#101014;
  --leader-ink:   rgba(244, 244, 248, 0.40);
  --stamp-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  --stamp-press:  1px 1px 0 rgba(0, 0, 0, 0.55);
  --silhouette-ink: rgba(244, 244, 248, 0.07);
  --scroll-hint:  rgba(244, 244, 248, 0.18);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8B8C6' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --accent-soft:  #321E4C;
  --accent-line:  rgba(199, 125, 255, 0.38);
  --line-soft:    #24242E;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* anchors clear the sticky masthead */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
[id] { scroll-margin-top: 80px; }

body {
  font-family: var(--font-text);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; height: auto; }

::selection { background: var(--selection-bg); color: var(--selection-ink); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container.wide { max-width: 1360px; }

/* Accessibility: skip link + focus + motion + contrast modes -------------- */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 0;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root, :root[data-theme="dark"] { --ink-faint: var(--ink-soft); }
}

/* Forced colors (Windows High Contrast): fills disappear, so filled controls
   get real borders; everything else already rules in borders and outlines. */
@media (forced-colors: active) {
  .btn-primary, .nav-cta, .stage-chip, .tier, .chip-btn, .theme-switch, .account-chip {
    border: 2px solid transparent;
  }
}

/* Shared type helpers ---------------------------------------------------- */
/* .eyebrow is the Courier section number: `01 — OPERATION`. No tick, no fill. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}
.eyebrow::before { content: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.accent { color: var(--accent); }
.gold { color: var(--gold); }

/* The wordmark strike device: UN/STOCKED. Text fill stays in the blue→violet
   range — the amber tail never carries text. ------------------------------ */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
}
.wordmark .strike {
  background: var(--burn-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 1px;
}

/* Headings — display roles are Big Shoulders caps, never lowercase -------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.04;
}
.display {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================================
   Masthead — solid substrate, 2px ink rule with the 3px burn temper line
   under it: the only color in the chrome.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 13px 0 16px;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    var(--burn);
  background-size: 100% 2px, 100% 3px;
  background-position: 0 calc(100% - 3px), 0 100%;
  background-repeat: no-repeat;
  border-bottom: none;
}
.site-header .row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
  /* All header slack lands here: brand + nav hold the left edge, and the
     controls (NIGHT / SIGN IN / START A SHEET) cluster tight on the right.
     Without this the row's free space spreads between every flex child. */
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-header nav a {
  color: var(--ink);
  /* invisible hit-area growth (WCAG 2.5.8) — no layout change */
  position: relative;
  padding: 8px 2px;
  margin: -8px -2px;
}
.site-header nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-header nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-cta {
  color: var(--accent-contrast);
  white-space: nowrap;
  background: var(--anodize-mid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  box-shadow: var(--stamp-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav-cta:hover { transform: translate(2px, 2px); box-shadow: var(--stamp-press); }

/* Header chrome chips — the NIGHT switch (a button; reads as pressed-in
   when the night run is showing, aria-checked="true": inverse video) and
   the account entry (a plain anchor to /account/; label upgraded by
   theme.js from the localStorage account hint, "Sign in" → "Account ✓",
   never boots the Firebase SDK). One shared chrome register. The switch
   ships [hidden]; /theme.js reveals and wires it. */
.theme-switch[hidden] { display: none; }
.theme-switch, .account-chip {
  flex: none;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 2px;
  padding: 6px 10px 5px; cursor: pointer;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.account-chip { text-decoration: none; }
.theme-switch::after, .account-chip::after { content: ""; position: absolute; inset: -8px; }
.theme-switch[aria-checked="true"],
.account-chip:hover, .account-chip:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Mobile nav: every link stays reachable — the row scrolls horizontally
   (manual-index style); nothing is amputated. 860px, not 760: with the
   account chip in the row, the 761–860px band already overflows before
   the scroller can absorb it. */
@media (max-width: 860px) {
  .site-header .row { flex-wrap: nowrap; min-width: 0; gap: 12px; }
  .site-header .brand-lockup { flex: none; }
  .site-header nav {
    flex-wrap: nowrap; max-width: 100%; min-width: 0;
    gap: 14px; font-size: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 6px; margin: -8px auto -8px -6px; /* focus-ring room; right stays auto so the controls keep their right cluster */
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: none; }
}
@media (max-width: 480px) {
  .site-header .row { gap: 8px; }
  .site-header nav { gap: 10px; font-size: 11px; }
  .nav-cta { padding: 7px 12px; }
  .brand-lockup { font-size: 16px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  /* CTA shortens to SHEET; the accessible name stays the full label */
  .site-header .nav-cta { font-size: 0; letter-spacing: 0; }
  .site-header .nav-cta::after {
    content: "Sheet";
    content: "Sheet" / "";
    font-size: 13px; letter-spacing: 0.06em;
  }
}

/* ≤400px the row cannot hold wordmark + chip + CTA (clips from ~389px
   down): mark-only brand. The lockup's aria-label keeps the name. */
@media (max-width: 400px) {
  .site-header .wordmark { display: none; }
}

/* ============================================================================
   Sections — always left-aligned, ruled hard, numbered like a manual
   ========================================================================== */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section.soft {
  background: var(--paper-shade);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section-head {
  max-width: none;
  border-top: 2px solid var(--rule-strong);
  padding-top: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
/* centered heads are banned — the class survives, the centering does not */
.section-head.center { margin-left: 0; margin-right: 0; text-align: left; }
.section-head.center .eyebrow { justify-content: flex-start; }
.section-head.center .ctas { justify-content: flex-start; }
.section-title {
  font-size: clamp(30px, 4.4vw, 48px);
  margin: 6px 0 10px;
}
.section-sub { color: var(--ink-soft); font-size: 16.5px; max-width: 620px; }
.section-head.center .section-sub { margin: 0; }

/* ============================================================================
   Buttons — rectangular stamps. Hover = the stamp pressing into the page:
   the hard offset shadow collapses and the button moves into it.
   ========================================================================== */
.ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--anodize-mid); color: var(--accent-contrast);
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 26px 12px;
  border: none; border-radius: 2px; cursor: pointer;
  box-shadow: var(--stamp-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:hover, .btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: var(--stamp-press);
}
.btn-primary:disabled {
  background: var(--paper-dim); color: var(--ink-faint);
  box-shadow: none; cursor: default; transform: none;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); background: transparent;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 24px 10px;
  border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
  box-shadow: var(--stamp-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-ghost:hover, .btn-ghost:active {
  transform: translate(2px, 2px);
  box-shadow: var(--stamp-press);
}
.btn-ghost:disabled {
  border-color: var(--ink-faint); color: var(--ink-faint);
  box-shadow: none; cursor: default; transform: none;
}

/* ============================================================================
   Catalog tables — the signature texture. 2px top rule, hairline rows,
   Courier headers, Courier prices, brass totals.
   ========================================================================== */
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px;
  border-top: 2px solid var(--rule-strong);
}
.data-table th {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
}
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.data-table td.mono, .data-table .price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink);
}
.data-table tr.total td, .data-table tfoot td {
  background: var(--paper-shade);
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  font-weight: 600;
}
.data-table tr.total .price, .data-table tfoot .price {
  color: var(--brass); font-weight: 700;
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 0;
}
/* Scroll hint — scroll shadows on every horizontal scroller: ink shadows
   pinned to the box edges, covered by paper-attached gradients that slide
   away only when content actually continues in that direction. Pure CSS:
   nothing shows when the content fits, and the edge you've reached carries
   no shadow (Lea Verou technique — covers use background-attachment:local,
   shadows use scroll). */
.table-scroll, .site-header nav, .chip-row {
  background:
    linear-gradient(90deg, var(--paper) 40%, transparent) left / 44px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 40%, transparent) right / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-hint), transparent) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-hint), transparent) right / 16px 100% no-repeat scroll;
  background-color: var(--paper);
}
.table-scroll .data-table { border-top: none; }
.table-scroll .data-table td, .table-scroll .data-table th {
  padding-left: 14px; padding-right: 14px;
}

/* Dot-leader spec rows — parts fiche idiom. A flex row: name, a dotted
   leader that fills, a Courier price. Wraps gracefully: the name wraps
   inside its own span, the leader never collapses below 28px. */
.spec-list { list-style: none; border-top: 2px solid var(--rule-strong); }
.spec-row {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 0 7px;
  font-size: 14.5px;
}
.spec-list .spec-row { border-bottom: 1px solid var(--rule); }
.spec-row > span:first-child { flex: 0 1 auto; min-width: 0; }
.spec-row > span:first-child small {
  display: block; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em;
}
.spec-row .leader, .plate-row .leader {
  flex: 1 0 28px;
  border-bottom: 2px dotted var(--leader-ink);
  margin-bottom: 5px;
  min-height: 1px;
}
.spec-row .price {
  flex: none;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink);
}
.spec-row.total {
  background: var(--paper-shade);
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  padding-left: 10px; padding-right: 10px;
  font-weight: 600;
}
.spec-row.total .price { color: var(--brass); font-weight: 700; }
.spec-row.total .leader { border-bottom-style: none; }

/* Tier chips — one token pair set; the theme flips the values ------------- */
.tier {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
}
.tier.premium { color: var(--tier-premium-ink); background: var(--tier-premium-bg); }
.tier.mid     { color: var(--tier-mid-ink);     background: var(--tier-mid-bg); }
.tier.budget  { color: var(--tier-budget-ink);  background: var(--tier-budget-bg); }

/* Where-to-buy rows — Courier link-buttons, underlined, work-order style --- */
.buy-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.buy-link {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  color: var(--ink);
  background: transparent; border: none; border-radius: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* invisible hit-area growth — no layout change */
  position: relative;
  padding: 8px 0;
  margin: -6px 0;
}
.buy-link:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}
.buy-link::after { content: "\2197"; font-size: 11px; color: var(--ink-faint); }
.affiliate-note {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--ink-faint); margin-top: 10px;
  letter-spacing: 0.02em;
}

/* ============================================================================
   THE SHEET — build sheets, the composer sheet, gallery cards. One
   component, two substrates: a printed work order by day (paper fill, 2px
   ink frame), the etched plate by night (raised gunmetal, milled edge,
   chamfer highlight). The burn temper bar and Courier values carry the
   recognition; only the rendered card PNG stays permanently dark.
   ========================================================================== */
.spec-plate, .plate, .build-card {
  position: relative;
  background: var(--sheet);
  color: var(--ink);
  border: var(--sheet-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--stamp-shadow), var(--sheet-chamfer);
}
.spec-plate::before, .plate::before, .build-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--burn);
  opacity: 0.9;
}
/* Work-order header row: `UNSTOCKED · SHEET` left, `REV <build date>` right */
.plate-order {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 22px 0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.plate-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--rule);
}
.plate-order + .plate-head { padding-top: 8px; }
.plate-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.plate-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.plate-rows { list-style: none; }
.plate-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.plate-row:last-child { border-bottom: none; }
@media (max-width: 480px) {
  .plate-head { flex-wrap: wrap; }
  .plate-row { flex-wrap: wrap; padding: 10px 16px; }
  .plate-row .price { white-space: normal; text-align: left; width: 100%; }
  .plate-head, .plate-total, .plate-order { padding-left: 16px; padding-right: 16px; }
}
.plate-row .part { color: var(--ink); font-weight: 500; }
.plate-row .part small {
  display: block; font-family: var(--font-mono);
  color: var(--ink-faint); font-size: 11px; font-weight: 400;
  letter-spacing: 0.04em;
}
.plate-row .price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink-soft); white-space: nowrap;
}
.plate-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 15px 22px;
  background: var(--paper-shade);
  border-top: 1px solid var(--rule);
}
.plate-total .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.plate-total .value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--brass); font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Stamps — flat tech-inspection tags. Stage 1 blue-ink outline, stage 2
   anodize fill, stage 3 brass fill; track-only wears a brass outline.
   Applied-to-the-sheet reads via the hard-offset stamp shadow — never tilt
   (1° rotation antialiases 10–11px caps blurry).
   ========================================================================== */
.stage-chip {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 10px 3px;
  border: 2px solid var(--anodize-mid); border-radius: 2px;
  background: var(--anodize-mid); color: var(--accent-contrast);
  box-shadow: var(--stamp-shadow);
}
.stage-chip.s2 {
  background: var(--anodize-mid); border-color: var(--anodize-mid);
  color: var(--accent-contrast);
}
.stage-chip.s1 {
  background: transparent;
  color: var(--stage1-ink); border-color: var(--stage1-ink);
}
.stage-chip.s3 {
  background: var(--brass); border-color: var(--brass);
  color: var(--gold-contrast);
}

/* meta chips — quiet Courier data tags (never rotate: data, not stickers) */
.meta-chip {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--ink-faint);
  padding: 2px 8px; border-radius: 2px;
  white-space: nowrap;
}
.meta-chip.chip-gold { color: var(--gold); border-color: var(--gold); background: transparent; }

/* ============================================================================
   Path rail — the manual's numbered procedure. Courier numbers in plain
   ink-ruled squares; no accent boxes, no connector ornament.
   ========================================================================== */
.path-rail { list-style: none; counter-reset: stage; position: relative; }
.path-rail > li {
  position: relative;
  padding: 0 0 24px 52px;
  counter-increment: stage;
}
.path-rail > li::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute; left: 0; top: -3px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--ink);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: 0;
}
.path-rail > li::after { content: none; }
.path-rail h4 { font-size: 17px; letter-spacing: 0.02em; margin-bottom: 4px; }
.path-rail p { color: var(--ink-soft); font-size: 14.5px; }

/* ============================================================================
   Cards & grids — ruled manual panels on the substrate
   ========================================================================== */
.props-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .props-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .props-grid { grid-template-columns: 1fr; } }
.prop-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top-width: 3px;
  border-radius: 0;
  padding: 22px 20px;
  transition: background-color 0.12s ease;
}
a.prop-card:hover { background: var(--paper-shade); transform: none; }
.prop-card .tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 10px;
}
.prop-card h3 { font-size: 19px; margin-bottom: 8px; }
.prop-card p { color: var(--ink-soft); font-size: 14.5px; }

/* Bike cards — parts-fiche index panels ------------------------------------ */
.bikes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px) { .bikes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bikes-grid { grid-template-columns: 1fr; } }
.bike-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 16px 16px 13px;
  transition: background-color 0.12s ease;
}
.bike-card:hover { background: var(--paper-shade); transform: none; }
.bike-card .make {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.bike-card h3 { font-size: 21px; margin: 3px 0 10px; }
.bike-card .meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* Build gallery cards — small work-order sheets on the page ---------------- */
.builds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .builds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .builds-grid { grid-template-columns: 1fr; } }
.build-card {
  display: flex; flex-direction: column;
  transition: border-color 0.12s ease;
}
.build-card:hover { border-color: var(--anodize-mid); transform: none; }
.build-card .bc-head { padding: 20px 20px 0; }
.build-card .bc-bike {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.build-card h3 { font-size: 19px; margin: 6px 0 6px; letter-spacing: 0.02em; }
.build-card .bc-goal { color: var(--ink-soft); font-size: 14px; padding: 0 20px; flex: 1; }
.build-card .bc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding: 12px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper-shade);
}
.build-card .bc-parts { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.build-card .bc-total {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Hero — a worksheet, not a stage. No glow, no ambience.
   ========================================================================== */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 68px); position: relative; }
.hero::before { content: none; }
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(44px, 7vw, 84px); }
.hero .lede {
  color: var(--ink-soft); font-size: clamp(16px, 2vw, 18px);
  margin: 16px 0 26px; max-width: 520px;
}
/* trust row = work-order fields: `PLATFORMS ON FILE: 30 · PART LINES: 146` */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-trust b { color: var(--ink); font-weight: 700; }

/* ============================================================================
   Footer — the colophon. 2px ink rule, Franklin columns, and the brand line
   set in Big Shoulders outline across the page.
   ========================================================================== */
.footer {
  margin-top: auto;
  border-top: 2px solid var(--ink);
  padding: 44px 0 30px;
  background: var(--paper);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 38px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--ink-soft); font-size: 14px; margin-top: 10px; max-width: 300px; }
.footer-links .footer-h {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 12px;
}
.footer-links a { display: block; color: var(--ink-soft); font-size: 14.5px; padding: 4px 0; }
.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.footer-legal {
  display: flex; flex-direction: column-reverse; gap: 10px;
  padding-top: 20px; border-top: 1px solid var(--rule);
  color: var(--ink-faint); font-size: 13px;
}
.footer-legal > span:first-child {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* STOCK IS A STARTING POINT — ink stroke, substrate fill, full width */
.footer-legal .mono {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 7.6vw, 112px);
  line-height: 0.92;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--ink);
}
@supports (-webkit-text-stroke: 1px black) {
  .footer-legal .mono {
    -webkit-text-stroke: 2px var(--ink);
    color: var(--paper);
  }
}

/* ============================================================================
   Prose (guides, legal) — numbered manual sections, NOTE/CAUTION callouts
   ========================================================================== */
.prose { max-width: 720px; counter-reset: manual; }
.prose h1 { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 14px; }
.prose h2 {
  font-size: 23px; margin: 38px 0 12px;
  border-top: 2px solid var(--rule-strong);
  padding-top: 12px;
  counter-increment: manual;
}
.prose h2::before {
  content: counter(manual, decimal-leading-zero);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.72em;
  color: var(--accent);
  margin-right: 12px;
}
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { color: var(--ink-soft); margin-bottom: 14px; font-size: 16px; max-width: var(--measure); }
.prose ul, .prose ol { margin: 0 0 14px 22px; color: var(--ink-soft); }
.prose li { margin-bottom: 7px; font-size: 15.5px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--accent); border-bottom: none;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose .lead { font-size: 18px; color: var(--ink); }

/* NOTE / CAUTION — the manual's callout register. Labels are real markup
   (<strong class="callout-label">); the ::before content is the fallback for
   legacy callouts that predate the labelled markup. */
.callout, .prose .callout {
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 0;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 15px;
  color: var(--ink);
}
.callout::before, .prose .callout::before {
  content: "NOTE";
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em;
  margin-right: 12px;
  color: var(--ink);
}
.callout:has(.callout-label)::before,
.prose .callout:has(.callout-label)::before { content: none; }
.callout .callout-label {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-right: 10px; color: var(--ink);
}
.callout.gold, .prose .callout.gold { background: var(--brass-tint); border-color: var(--ink); }
.callout.gold::before, .prose .callout.gold::before { content: "CAUTION"; color: var(--brass); }
.callout.gold:has(.callout-label)::before { content: none; }
.callout.gold .callout-label { color: var(--brass); }

.updated {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Torque-spec fine print --------------------------------------------------- */
.fine-print {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-faint); line-height: 1.7;
}

/* FAQ — a ruled index, not a stack of boxes -------------------------------- */
.faq-list { display: block; border-top: 2px solid var(--rule-strong); }
.faq-item {
  background: transparent; border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 16px 0 15px;
}
.faq-item h3 { font-size: 17px; letter-spacing: 0.02em; margin-bottom: 6px; }
.faq-item p { color: var(--ink-soft); font-size: 14.5px; max-width: var(--measure); }

/* Contact / support -------------------------------------------------------- */
.contact-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0; padding: 28px 26px; max-width: 520px;
}
.contact-card .email {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.contact-card .email:hover { text-decoration-thickness: 2px; }
.contact-card .hint { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }

/* ============================================================================
   Figure frames — silhouettes as manual figures. Hairline frame, Courier
   `FIG. 1 — <BIKE>` caption. Watermark use stays ink; framed use may burn.
   ========================================================================== */
.figure {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 18px 18px 12px;
}
.figure .bike-sil { width: 100%; aspect-ratio: 16 / 9; }
.fig-caption {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin-top: 14px; padding-top: 10px;
}

/* ============================================================================
   Marque index tabs — the shop-binder thumb tab. One fixed tick of the
   brand's racing color wherever a platform is filed; the color is a filing
   key, not decoration: same marque, same color, everywhere it appears.
   Color only — never logo shapes (nominative use) — and never on text.
   Single values tuned to read on both paper and plate (fills, not type, so
   AA contrast does not bind them).
   ========================================================================== */
[data-marque="aprilia"]  { --marque: #C21833; }
[data-marque="bmw"]      { --marque: #0087C9; }
[data-marque="ducati"]   { --marque: #9E1B32; }
[data-marque="honda"]    { --marque: #E10600; }
[data-marque="kawasaki"] { --marque: #5FA80A; }
[data-marque="ktm"]      { --marque: #F25C00; }
[data-marque="suzuki"]   { --marque: #29569E; }
[data-marque="triumph"]  { --marque: #1F6B47; }
[data-marque="yamaha"]   { --marque: #2F4EC1; }
.marque-tab {
  display: inline-block; width: 5px; height: 13px;
  background: var(--marque, var(--ink));
  border-radius: 1px;
  margin-right: 9px;
  vertical-align: -2px;
  flex: none;
}

/* Bike silhouettes — alpha masks colored by background. Printed ghost by
   day, engraved ghost by night; the burn fill is theme-invariant. */
.bike-sil {
  background: var(--ink);
  -webkit-mask-image: var(--sil);
  mask-image: var(--sil);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
.bike-sil.burn { background: var(--burn); opacity: 0.9; }
.spec-plate .bike-sil, .plate .bike-sil, .build-card .bike-sil { background: var(--burn); }
.bike-sil.supersport { --sil: url('/img/sil-supersport.webp?v=9'); }
.bike-sil.naked { --sil: url('/img/sil-naked.webp?v=9'); }

/* ============================================================================
   Form fields — 2px ruled rectangles by day, engraved recesses by night.
   ========================================================================== */
.field label, .field .label {
  display: block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 6px;
}
.field select, .field input[type="text"], .field input[type="number"],
.field input[type="url"], .field input[type="search"],
.field input[type="email"], .field input[type="password"] {
  width: 100%;
  font-family: var(--font-text); font-size: 15px; color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--field-line);
  border-radius: 2px;
  padding: 10px 12px;
  appearance: none;
}
.field input::placeholder { color: var(--ink-faint); }
.field select:focus, .field input:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
/* select chevron: per-theme data-URI via the --chevron token (an element
   background can't be masked, so the glyph ships in both inks) */
.field select {
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px;
}

/* Binder tabs — category filters, picker steps. Rectangles seated on a
   baseline rule; the active tab is ink-filled with substrate text (inverse
   video on the night run). ------------------------------------------------- */
.chip-btn {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  padding: 6px 12px 5px; cursor: pointer;
  transition: background-color 0.12s ease;
}
.chip-btn:hover { background: var(--paper-dim); }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 16px; padding: 4px 8px; border-radius: 2px;
  font-family: var(--font-text);
}
.icon-btn:hover { color: var(--ink); background: var(--paper-shade); }

/* Count-up readout state (JS sets final; CSS only styles) ------------------- */
.readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Burn divider — the temper line, used sparingly ---------------------------- */
.burn-divider { height: 3px; background: var(--burn); opacity: 1; border: none; max-width: 120px; margin: 0; border-radius: 0; }

/* Link-buttons (sign out, forgot password) — hit-area padded ---------------- */
.link-btn {
  position: relative;
}
.link-btn::after { content: ""; position: absolute; inset: -8px 0; }

/* ============================================================================
   Composer picker tables (/build/ — The Bench). Worksheet register: ruled
   rows, Courier prices, binder-tab filters.
   ========================================================================== */
.picker-filter {
  width: 100%;
  font-family: var(--font-text); font-size: 15px; color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--field-line);
  border-radius: 2px;
  padding: 10px 12px;
  appearance: none; -webkit-appearance: none;
  margin-bottom: 10px;
}
.picker-filter:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.picker-filter::placeholder { color: var(--ink-faint); }
.picker-filter:disabled { background: var(--paper-dim); color: var(--ink-faint); }

.chip-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px;
  border-bottom: 2px solid var(--ink);
  margin: 10px 0 14px; padding: 0 2px;
}
.chip-row .chip-btn { border-bottom: none; border-radius: 2px 2px 0 0; padding-bottom: 6px; }
.chip-row .chip-btn[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Vertical scroll + sticky header live on the scroll container; .table-scroll
   still supplies the border and horizontal overflow on small screens. */
.picker-scroll { overflow: auto; background: var(--paper); }
.picker-scroll.parts-scroll { max-height: min(60vh, 640px); }

.picker-table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; border-top: none; }
.picker-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-shade);
  border-bottom: 1px solid var(--ink);
}
.picker-table td { border-bottom: 1px solid var(--rule); }
.picker-table tbody tr:last-child td { border-bottom: none; }
.picker-table tbody tr:hover td { background: var(--paper-shade); }
.picker-table .cell-muted { color: var(--ink-soft); }
.picker-table .cell-model { font-weight: 600; }
.picker-table .cell-part { font-weight: 500; }
.picker-table td.cell-price { text-align: right; color: var(--ink); }
.picker-table th.th-price { text-align: right; }
.picker-table th.th-add { width: 1%; }
.picker-table td.cell-add { text-align: right; padding-top: 8px; padding-bottom: 8px; }
.picker-table .empty-row td { color: var(--ink-faint); padding-top: 18px; padding-bottom: 18px; }
.picker-table .empty-row:hover td { background: transparent; }

.picker-table .row-add {
  font-size: 12px; letter-spacing: 0.06em;
  padding: 5px 12px 4px; border-radius: 2px;
  box-shadow: var(--stamp-press);
}
.picker-table .row-add:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--stamp-press);
}

.th-sort {
  background: none; border: none; cursor: pointer; padding: 8px 4px; margin: -8px -4px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.th-sort:hover { color: var(--accent); }
.th-sort .sort-arrow { color: var(--accent); min-width: 1em; display: inline-block; text-align: left; }

.picker-count { margin-top: 8px; }

/* Selected bike collapses into a compact chip line: "<label> · change". */
.bike-chipline[hidden] { display: none; } /* author display would beat UA [hidden] */
.bike-chipline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper-shade);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 8px 10px 8px 14px;
}
.bike-chipline .bike-chip-label { font-weight: 600; font-size: 15px; min-width: 0; }

/* Parts catalog ≤600px: stacked two-line rows on the SAME tr/td markup
   (name+brand / tier+price+button) — no horizontal scrubbing per row. */
@media (max-width: 600px) {
  .picker-table.parts-table { min-width: 0; display: block; }
  .picker-table.parts-table thead {
    display: block; position: sticky; top: 0; z-index: 2;
    background: var(--paper-shade);
    border-bottom: 1px solid var(--ink);
  }
  .picker-table.parts-table thead tr {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 8px 12px;
  }
  .picker-table.parts-table thead th {
    display: none; position: static;
    padding: 0; border-bottom: none; background: transparent;
  }
  .picker-table.parts-table thead th:first-child,
  .picker-table.parts-table thead th.th-price { display: block; }
  .picker-table.parts-table tbody { display: block; }
  .picker-table.parts-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name  name  brand"
      "tier  price add";
    gap: 4px 12px; align-items: center;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--rule);
  }
  .picker-table.parts-table tbody tr:last-child { border-bottom: none; }
  .picker-table.parts-table tbody tr:not(.empty-row):hover { background: var(--paper-shade); }
  .picker-table.parts-table tbody td { display: block; border-bottom: none; padding: 0; }
  .picker-table.parts-table tbody td.cell-part { grid-area: name; }
  .picker-table.parts-table tbody td.cell-muted {
    grid-area: brand; font-size: 12px; justify-self: end; text-align: right;
  }
  .picker-table.parts-table tbody tr > td:nth-child(3) { grid-area: tier; }
  .picker-table.parts-table tbody td.cell-price { grid-area: price; text-align: right; }
  .picker-table.parts-table tbody td.cell-add { grid-area: add; text-align: right; }
  .picker-table.parts-table tbody tr.empty-row { display: block; padding: 18px 12px; }
  .picker-table.parts-table tbody tr.empty-row td { display: block; padding: 0; border: none; }
}
@media (max-width: 480px) {
  .chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chip-row .chip-btn { white-space: nowrap; flex: none; }
}

/* ============================================================================
   Composer guided bike picker (/build/ — The Bench). Drill-down: brand
   tiles → model rows → year/generation rows. Fiche-index register: ruled
   panels, Courier counts and years. Every tile is a real <button>.
   ========================================================================== */
.picker-search { position: relative; margin-bottom: 12px; }
.picker-search .search-glyph {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.picker-search .picker-filter.bike-search {
  margin-bottom: 0;
  padding: 12px 16px 12px 42px;
  font-size: 15.5px;
  border-radius: 2px;
}
.picker-search .picker-filter.bike-search::placeholder {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
}

.bike-stage { display: grid; gap: 8px; align-content: start; }

.picker-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.picker-back {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  padding: 6px 14px; cursor: pointer;
  transition: background-color 0.12s ease;
}
.picker-back:hover { background: var(--paper-dim); }
.picker-crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right; min-width: 0;
}

/* Step 1 — brand tiles. The chevron marks "leads somewhere" (brand → models,
   model → years); final gen picks deliberately carry none. */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brand-tile {
  position: relative;
  display: grid; gap: 4px; text-align: left;
  background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: 15px 32px 12px 14px;
  cursor: pointer; color: var(--ink); font-family: var(--font-text);
  transition: background-color 0.12s ease;
}
.brand-tile::after {
  content: "\203A";
  position: absolute; right: 14px; top: 12px;
  font-size: 18px; font-weight: 600; color: var(--ink-faint);
  transition: color 0.12s ease;
}
.brand-tile:hover { background: var(--paper-shade); transform: none; box-shadow: none; }
.brand-tile:hover::after { color: var(--ink); }
.brand-tile .brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1;
}
.brand-tile .brand-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); }

/* Steps 2–3 (and search results) — full-width row-buttons. */
.model-list, .gen-list { display: grid; gap: 6px; }
.model-tile, .gen-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  text-align: left; width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: 12px 15px;
  cursor: pointer; color: var(--ink); font-family: var(--font-text);
  transition: background-color 0.12s ease;
}
.model-tile:hover, .gen-row:hover { background: var(--paper-shade); transform: none; }
.model-tile { justify-content: flex-start; }
.model-tile::after {
  content: "\203A";
  font-size: 18px; font-weight: 600; line-height: 1; color: var(--ink-faint);
  transition: color 0.12s ease;
}
.model-tile:hover::after { color: var(--ink); }
.model-tile .model-name {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15;
}
.model-tile .model-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }

/* Current selection keeps an anodize edge so "change" lands you somewhere
   familiar. */
.brand-tile.is-current, .model-tile.is-current {
  border-color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}

.gen-row .gen-years {
  font-family: var(--font-mono); font-size: 14.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gen-row.gen-any { background: transparent; border-style: dashed; border-color: var(--ink-faint); }
.gen-row.gen-any .gen-years {
  font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--ink-soft);
}
.gen-row.gen-any:hover .gen-years { color: var(--ink); }

.picker-none { padding: 12px 2px; }

@media (max-width: 600px) {
  /* 2-up brand tiles; rows stay full-width — no horizontal page scroll.
     The model chevron would trail the wrapped chip line, so it goes. */
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-tile { padding: 13px 28px 11px 12px; }
  .brand-tile::after { top: 10px; right: 12px; }
  .model-tile::after { display: none; }
  .model-tile .model-meta { justify-content: flex-start; margin-left: 0; }
}

/* ============================================================================
   Composer slot semantics — one part per slot: adding into an occupied slot
   replaces the old part and says so in a dismissible notice.
   ========================================================================== */
.swap-notice {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  border-radius: 2px;
  padding: 10px 8px 10px 14px;
  margin-bottom: 12px;
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
  transition: opacity 0.8s ease;
}
.swap-notice[hidden] { display: none; }
.swap-notice.is-fading { opacity: 0; }
.swap-notice .swap-dismiss { flex: none; margin-top: -3px; }

.flag-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: 2px; }
.plate-row .flag-chips { display: flex; margin: 4px 0 0; }

/* ============================================================================
   My sheets — account row (/build/). Signed out: the offer line over an
   expandable inline email+password form with its own aria-live status.
   Signed in: a quiet Courier line.
   ========================================================================== */
.my-sheets-account { display: grid; gap: 10px; justify-items: start; margin-bottom: 8px; }
.my-sheets-account .account-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.my-sheets-account .account-offer[hidden] { display: none; }
.my-sheets-account .account-keep {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.my-sheets-account .btn-ghost, .my-sheets-account .btn-primary {
  font-size: 13px; padding: 8px 16px 7px;
}
.account-email-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  width: 100%; max-width: 640px;
}
.account-email-form[hidden] { display: none; }
.account-email-form input {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--font-text); font-size: 15px; color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--field-line);
  border-radius: 2px;
  padding: 10px 12px;
  appearance: none;
}
.account-email-form input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.account-email-form .btn-primary { font-size: 13px; padding: 10px 18px 9px; }
.my-sheets-account .account-status { min-height: 20px; }
.my-sheets-account .account-line {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.my-sheets-account .account-line[hidden] { display: none; }
.my-sheets-account .link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.my-sheets-account .link-btn:hover { color: var(--ink); text-decoration-thickness: 2px; }
.my-sheets-account .fine-print { margin: 0; }

/* Row-button states: Replace = the swap said up front; On sheet = quiet
   disabled fact (stays focusable; --ink-soft keeps it readable). */
.row-add.row-replace { background: var(--brass); color: var(--gold-contrast); }
.row-add.row-replace:hover { box-shadow: var(--stamp-press); }
.row-add.row-onsheet {
  background: var(--paper-dim); color: var(--ink-soft);
  cursor: default; box-shadow: none;
}
.row-add.row-onsheet:hover { transform: none; box-shadow: none; }

.my-sheets-account.is-standalone { margin: 18px 0 10px; }
.my-sheets-account.is-standalone .fine-print { margin: 0; }

/* Glove-size hit areas for the small composer controls (WCAG 2.5.8):
   invisible padding, zero layout shift. */
@media (max-width: 920px) {
  #plate-rows .icon-btn, #swap-notice .swap-dismiss { position: relative; }
  #plate-rows .icon-btn::after, #swap-notice .swap-dismiss::after {
    content: ""; position: absolute; inset: -10px;
  }
}

/* ============================================================================
   Print — the sheet is literally a work order; it must print. Ink on white,
   no chrome, one sheet per page.
   ========================================================================== */
@media print {
  :root, :root[data-theme="dark"] {
    --paper: #FFFFFF; --paper-shade: #F2F2F2; --paper-dim: #EDEDED;
    --ink: #000000; --ink-soft: #333333; --ink-faint: #555555;
    --rule: #BBBBBB; --sheet: #FFFFFF; --sheet-edge: #000000;
    --sheet-border: 2px solid #000000;
    --sheet-chamfer: inset 0 1px 0 rgba(255, 255, 255, 0);
    --brass: #6A4C00; --anodize: #4A1583; --anodize-mid: #4A1583;
    --stamp-shadow: none; --stamp-press: none;
  }
  .site-header, .footer, .skip-link, .ctas, .nav-cta, .theme-switch,
  .buy-row, .affiliate-note, #community-builds, #community-bike,
  #community-prices { display: none !important; }
  .spec-plate, .plate, .build-card {
    box-shadow: none; break-inside: avoid;
  }
  body { background: #FFFFFF; }
}