/* ============================================================================
   ysdk.css — ysdk.org production stylesheet, v1.0.0-draft.2
   Every feature choice is justified against web-features 3.36.0 (2026-08-27).

   BASELINE HIGH, used freely:  container queries (2025-08-14) · oklch (2025-11-09)
     color-mix (2025-11-09) · :has() (2026-06-19) · subgrid (2026-03-15)
   BASELINE LOW, wrapped with a working fallback: @property (2024-07-09)
     text-wrap:balance (2024-05-13) · @starting-style (2024-08-06)
   NOT BASELINE, never load-bearing: anchor positioning · scroll-driven animation

   LAW: tap targets are FLOORED with min-block-size, never PINNED with a size.
============================================================================ */

@layer reset, tokens, layout, hex, components, a11y;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-block-size: 100dvb; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-inline-size: 100%; }
  input, textarea, button { font: inherit; color: inherit; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    --phi: 1.6180339887;
    --s1: .382rem; --s2: .618rem; --s3: 1rem;
    --s4: 1.618rem; --s5: 2.618rem; --s6: 4.236rem; --s7: 6.854rem;

    /* --h remains the GENERATIVE hue for the runtime-parameterized families
       (hexfield tiles get --hue from ysdk.js; rung borders use calc offsets).
       The static tokens below are quantized to the goldenratiocolors.com
       golden-ratio RGB ladder {0,14,37,60,97,158,195,218,241,255} —
       palette-audit R321/S314, 2026-08-30. Each token is the perceptually
       nearest GRC color (dE_OK argmin; token distinctness and the chain's
       lightness order preserved; 24/24 contrast pairs re-verified post-snap).
       grcNNN = ladder indices for R,G,B. Original authored values kept in
       the trailing comments. */
    --h: 232;
    --brand:     #259ef1; /* grc258 · was oklch(.68 .17 var(--h)) */
    --brand-lit: #3cc3f1; /* grc368 · was oklch(.80 .15 var(--h)) */
    --brand-dim: #00619e; /* grc045 · was oklch(.50 .15 var(--h)) */
    --accent:    #ff9e9e; /* grc955 · was oklch(.78 .16 calc(var(--h) + 137.5077640500378)) */

    --void:  #0e0e0e; /* grc111 · was oklch(.145 .012 var(--h)) */
    --sunk:  #0e0e25; /* grc112 · was oklch(.175 .014 var(--h)) */
    --surf:  #0e2525; /* grc122 · was oklch(.215 .016 var(--h)) */
    --surf2: #252525; /* grc222 · was oklch(.265 .018 var(--h)) */
    --edge:  #253c3c; /* grc233 · was oklch(.34 .018 var(--h)) */
    --edge2: #3c6161; /* grc344 · was oklch(.44 .022 var(--h)) */

    --ink:   #f1f1f1; /* grc888 · was oklch(.97 .004 var(--h)) */
    --ink2:  #c3c3c3; /* grc666 · was oklch(.80 .012 var(--h)) */
    --ink3:  #9e9e9e; /* grc555 · was oklch(.66 .014 var(--h)) */

    --ok:   #61c361; /* grc464 · was oklch(.76 .15 152) */
    --warn: #f1c33c; /* grc863 · was oklch(.82 .15 85) */
    --bad:  #f16161; /* grc844 · was oklch(.68 .19 25) */

    --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

    --tap: 44px; --tap-fine: 36px;
    --r1: .5rem; --r2: .875rem; --r3: 1.25rem;
    --dur: 220ms; --ease: cubic-bezier(.2,0,0,1);

    --maxw: 74rem;
    color-scheme: dark;
  }

  @supports at-rule(@property) {
    @property --h { syntax: "<number>"; inherits: true; initial-value: 232; }
  }

  body {
    font-family: var(--ui);
    font-size: clamp(1rem, .96rem + .18cqi, 1.0625rem);
    line-height: 1.62;
    color: var(--ink2);
    background:
      radial-gradient(120% 80% at 50% -8%, rgb(0 60 97 / .38), transparent 62%),   /* grc034 · was oklch(.30 .10 var(--h) / .38) */
      radial-gradient(90% 60% at 92% 8%, rgb(97 14 37 / .18), transparent 55%),    /* grc412 · was oklch(.32 .09 calc(var(--h) + 137.5) / .18) */
      var(--void);
    background-attachment: fixed;
  }
}

@layer layout {
  /* Container queries, not media queries: these sections render at full width
     here and could render inside a panel elsewhere at the same viewport width. */
  main { container-type: inline-size; container-name: page; display: block; }

  .band {
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto;
    padding-block: var(--s7);
    border-block-start: 1px solid oklch(from var(--edge) l c h / .38);
  }
  .band:first-of-type { border-block-start: 0; }
  .band-alt {
    inline-size: 100%;
    max-inline-size: none;
    padding-inline: max(1.25rem, calc((100% - var(--maxw)) / 2));
    background: linear-gradient(180deg, transparent, rgb(14 14 37 / .55) 18%, transparent); /* grc112 · was oklch(.19 .015 var(--h) / .55) */
  }
  .band-h { font-size: clamp(1.5rem, 1.1rem + 1.5cqi, 2.35rem); color: var(--ink); letter-spacing: -.02em; }
  .band-sub { margin-block-start: var(--s3); max-inline-size: 62ch; color: var(--ink3); }

  .topbar {
    position: sticky; inset-block-start: 0; z-index: 40;
    /* Own container: the topbar sits OUTSIDE <main> (the `page` container), so
       a `page` query can never reach .topnav — that defect shipped as the 390px
       vertical nav splay. Page-shell responsiveness stays container-driven. */
    container-type: inline-size; container-name: topbar;
    display: flex; align-items: center; gap: var(--s4);
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto; padding-block: var(--s3);
    background: oklch(from var(--void) l c h / .82);
    backdrop-filter: blur(14px) saturate(1.3);
    border-block-end: 1px solid oklch(from var(--edge) l c h / .3);
  }
  .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
  .brand-mark { inline-size: 26px; block-size: 30px; }
  .bm-hex { fill: none; stroke: var(--brand); stroke-width: 2.5; }
  .bm-core { fill: var(--brand); opacity: .9; }
  .brand-word { font-weight: 700; letter-spacing: .06em; color: var(--ink); }
  .brand-ver { font: 600 .625rem/1 var(--mono); color: var(--ink3);
    border: 1px solid var(--edge); border-radius: 999px; padding: .25rem .45rem; }
  .topnav { display: flex; gap: var(--s4); margin-inline-start: auto; flex-wrap: wrap; }
  .topnav a { color: var(--ink3); text-decoration: none; font-size: .9375rem;
    padding-block: .35rem; border-block-end: 2px solid transparent; transition: color var(--dur) var(--ease); }
  .topnav a:hover { color: var(--ink); border-color: var(--brand); }

  @container topbar (inline-size < 780px) {
    .topnav { display: none; }
  }

  .hero {
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto;
    display: grid; gap: var(--s6);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    padding-block: var(--s7) var(--s6);
  }
  @container page (inline-size < 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-hex { order: -1; }
  }

  .eyebrow { font: 600 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-lit); }
  .hero h1 {
    margin-block-start: var(--s3);
    font-size: clamp(2.1rem, 1.2rem + 4.2cqi, 4rem);
    letter-spacing: -.035em; color: var(--ink);
  }
  .lede { margin-block-start: var(--s4); font-size: clamp(1.02rem, .96rem + .4cqi, 1.18rem); max-inline-size: 56ch; }
  .lede strong { color: var(--ink); }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }
  .hero-note { margin-block-start: var(--s4); font-size: .9rem; color: var(--ink3); max-inline-size: 52ch; }
}

/* ── The hexagon field. Exact regular-hexagon geometry, not an approximation.
   Flat-top: width 2r vertex-to-vertex, height √3·r flat-to-flat, columns
   stepped by 1.5r with alternate columns offset by √3·r/2. The 25%/75% x
   positions in the clip are exactly r/2 from each vertex. ── */
@layer hex {
  .hero-hex { container-type: inline-size; container-name: field; }
  .hexfield {
    --r: 74px;
    --hw: calc(var(--r) * 2);
    --hh: calc(var(--r) * 1.7320508075688772);
    --stepx: calc(var(--r) * 1.5);
    --gap: 6px;
    position: relative;
    block-size: calc(var(--hh) * 3 + var(--gap) * 3);
    inline-size: 100%;
  }
  .hx {
    position: absolute;
    inline-size: var(--hw); block-size: var(--hh);
    inset-inline-start: calc(var(--col) * (var(--stepx) + var(--gap)));
    inset-block-start: calc(var(--row) * (var(--hh) + var(--gap)) + var(--odd) * (var(--hh) / 2));
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(158deg,
      oklch(.30 .07 var(--hue, var(--h)) / .85), var(--sunk) 46%, var(--void));
    display: grid; place-items: center;
    font: 600 .6875rem/1.3 var(--mono);
    color: oklch(.86 .09 var(--hue, var(--h)));
    text-align: center;
    animation: hx-rise 700ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  .hx::after {
    content: ""; position: absolute; inset: 0; clip-path: inherit; padding: 1.5px;
    background: linear-gradient(150deg, oklch(.82 .13 var(--hue, var(--h))), transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .hx[data-dim] { opacity: .42; }
  @keyframes hx-rise { from { opacity: 0; translate: 0 14px; scale: .96; } }
  @media (prefers-reduced-motion: reduce) { .hx { animation: none; } }

  @container field (inline-size < 420px) { .hexfield { --r: 56px; } }
  @container field (inline-size < 320px) { .hexfield { --r: 46px; } }
}

@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-block-size: var(--tap-fine);           /* FLOOR, never a fixed size */
    padding: .6rem 1.15rem;
    border-radius: var(--r2); border: 1px solid transparent;
    font-weight: 600; font-size: .9375rem; text-decoration: none;
    cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  @media (pointer: coarse) { .btn, .field { min-block-size: var(--tap); } }
  .btn-primary { background: var(--brand); color: #0e0e0e; } /* grc111 · was oklch(.16 .02 var(--h)) */
  .btn-primary:hover { background: var(--brand-lit); translate: 0 -1px; }
  .btn-ghost { background: oklch(from var(--surf) l c h / .6); border-color: var(--edge); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--edge2); background: var(--surf2); }

  .cards { display: grid; gap: var(--s3); margin-block-start: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .card {
    padding: var(--s4); border-radius: var(--r3);
    background: linear-gradient(165deg, oklch(from var(--surf) l c h / .8), oklch(from var(--sunk) l c h / .7));
    border: 1px solid oklch(from var(--edge) l c h / .55);
  }
  .card h3 { font-size: 1.0625rem; color: var(--ink); }
  .card p { margin-block-start: var(--s2); font-size: .9375rem; color: var(--ink3); }
  .card em { color: var(--ink2); font-style: normal; }
  .card-link { text-decoration: none; display: block; transition: border-color var(--dur) var(--ease), translate var(--dur) var(--ease); }
  .card-link:hover { border-color: var(--brand); translate: 0 -2px; }
  .card-go { display: inline-block; margin-block-start: var(--s3); color: var(--brand-lit); font-weight: 600; font-size: .875rem; }

  .steps { list-style: none; padding: 0; margin-block-start: var(--s5); display: grid; gap: var(--s5); }
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; }
  .step-n {
    display: grid; place-items: center;
    inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
    background: oklch(from var(--brand) l c h / .16); border: 1px solid var(--brand-dim);
    color: var(--brand-lit); font: 700 .9375rem var(--mono);
  }
  .step h3 { font-size: 1.125rem; color: var(--ink); }
  .step > div > p { margin-block: var(--s2) var(--s3); font-size: .9375rem; color: var(--ink3); max-inline-size: 60ch; }
  @container page (inline-size < 560px) {
    /* minmax(0,1fr), not bare 1fr: a bare 1fr track keeps the grid item's
       automatic minimum (min-content of the pre.code inside), which blew the
       track to 947px at 390 viewport — measured LAW 3 failure, palette-audit
       2026-08-30. The >=560 two-col layout already guards with minmax(0,1fr). */
    .step { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  }

  .code {
    position: relative; margin: 0; overflow-x: auto;
    padding: var(--s3) var(--s4); border-radius: var(--r2);
    background: #000e0e; border: 1px solid var(--edge); /* grc011 · was oklch(.125 .014 var(--h)) */
    font: .8125rem/1.7 var(--mono); color: var(--ink2);
    scrollbar-width: thin;
  }
  .code code { white-space: pre; }
  .code .k { color: var(--brand-lit); }
  .code .s { color: var(--accent); }
  .code .n { color: #c39eff; } /* grc659 · was oklch(.80 .13 300) */
  .code .c { color: var(--ink3); font-style: italic; }
  .copy {
    position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
    min-block-size: var(--tap-fine); padding: .3rem .7rem;
    border-radius: var(--r1); border: 1px solid var(--edge);
    background: var(--surf); color: var(--ink3); font-size: .75rem; cursor: pointer;
    opacity: 0; transition: opacity var(--dur) var(--ease);
  }
  .code:hover .copy, .copy:focus-visible { opacity: 1; }
  .copy[data-done] { color: var(--ok); border-color: var(--ok); opacity: 1; }
  /* R321/§314 g3 conformance-evidence fix (2026-08-30): the 390/Pixel-5 leg
     measured .copy at 36px under pointer:coarse (below the 44px LAW 5 floor)
     and opacity:0 under hover:none — an invisible-but-tappable control where
     hover does not exist. Floor (never pin) + reveal where hover is absent. */
  @media (pointer: coarse) { .copy { min-block-size: var(--tap); } }
  @media (hover: none) { .copy { opacity: 1; } }

  .ladder { display: grid; gap: var(--s3); margin-block-start: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .rung { padding: var(--s4); border-radius: var(--r3);
    background: oklch(from var(--sunk) l c h / .8);
    border: 1px solid var(--edge);
    border-inline-start: 3px solid oklch(.70 .16 calc(var(--h) + var(--l-off, 0)));
  }
  .rung[data-l="0"] { --l-off: 0; }   .rung[data-l="1"] { --l-off: 28; }
  .rung[data-l="2"] { --l-off: 56; }  .rung[data-l="3"] { --l-off: 84; }
  .rung[data-l="4"] { --l-off: 112; } .rung[data-l="5"] { --l-off: 140; }
  .rung[data-l="6"] { --l-off: 168; }
  .rung header { display: flex; align-items: baseline; gap: .6rem; }
  .rung-id { font: 700 .8125rem var(--mono); color: oklch(.80 .15 calc(var(--h) + var(--l-off, 0))); }
  .rung h3 { font-size: 1.0625rem; color: var(--ink); }
  .rung-eta { margin-inline-start: auto; font-size: .75rem; color: var(--ink3); font-family: var(--mono); }
  .rung p { margin-block-start: var(--s2); font-size: .875rem; color: var(--ink3); }
  .rung-proof strong { color: var(--ink2); }
  .rung em { color: var(--ink); font-style: normal; }

  .val { display: grid; gap: var(--s4); margin-block-start: var(--s5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  @container page (inline-size < 900px) { .val { grid-template-columns: 1fr; } }
  .lbl { display: block; margin-block: var(--s3) var(--s2); font-size: .8125rem; font-weight: 600; color: var(--ink2); }
  .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
  .row-end { justify-content: flex-end; margin-block-start: var(--s2); }
  .field {
    flex: 1 1 14rem; min-block-size: var(--tap-fine);
    padding: .6rem .85rem; border-radius: var(--r2);
    background: #000e0e; border: 1px solid var(--edge); /* grc011 · was oklch(.13 .014 var(--h)) */
    color: var(--ink); font-family: var(--mono); font-size: .875rem;
  }
  .field:focus-visible { border-color: var(--brand); }
  .field-area { inline-size: 100%; resize: vertical; line-height: 1.55; }
  .hint { margin-block-start: var(--s2); font-size: .8125rem; color: var(--ink3); }

  .val-out { min-block-size: 16rem; padding: var(--s4); border-radius: var(--r3);
    background: #000e0e; border: 1px solid var(--edge); } /* grc011 · was oklch(.13 .014 var(--h)) */
  .val-idle { color: var(--ink3); font-size: .9375rem; }
  .verdict { display: flex; align-items: center; gap: var(--s3); padding-block-end: var(--s3);
    border-block-end: 1px solid var(--edge); margin-block-end: var(--s3); }
  .verdict-lvl { font: 800 2rem/1 var(--mono); }
  .verdict.pass .verdict-lvl { color: var(--ok); }
  .verdict.fail .verdict-lvl { color: var(--bad); }
  .verdict p { font-size: .875rem; color: var(--ink3); }
  .checks { list-style: none; padding: 0; display: grid; gap: .55rem; }
  .chk { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .6rem; align-items: start; font-size: .875rem; }
  .chk-i { font: 700 .8125rem/1.5 var(--mono); }
  .chk.ok .chk-i { color: var(--ok); }
  .chk.no .chk-i { color: var(--bad); }
  .chk.wn .chk-i { color: var(--warn); }
  .chk-b strong { color: var(--ink); font-weight: 600; }
  .chk-b span { display: block; color: var(--ink3); font-size: .8125rem; }
  .chk-b code { font-family: var(--mono); font-size: .75rem; color: var(--brand-lit); }

  .standards { margin-block-start: var(--s6); padding: var(--s5); border-radius: var(--r3);
    background: oklch(from var(--sunk) l c h / .6); border: 1px solid var(--edge); }
  .standards-h { font-size: 1.0625rem; color: var(--ink); }
  .std-list { margin-block-start: var(--s3); padding-inline-start: var(--s4); display: grid; gap: var(--s2); font-size: .9375rem; color: var(--ink3); }
  .std-list strong { color: var(--ink2); }
  .std-note { margin-block-start: var(--s4); font-size: .9375rem; color: var(--ink3); max-inline-size: 72ch; }

  .eco { list-style: none; padding: 0; margin-block-start: var(--s5); display: grid; gap: .6rem; }
  .eco li { display: grid; grid-template-columns: 10rem minmax(0,1fr) auto; gap: var(--s3);
    align-items: center; padding: .75rem var(--s3); border-radius: var(--r2);
    background: oklch(from var(--sunk) l c h / .7); border: 1px solid var(--edge); font-size: .9375rem; }
  .eco b { font-family: var(--mono); font-size: .875rem; color: var(--ink); }
  .eco span { color: var(--ink3); }
  .pill { font: 600 .6875rem var(--mono); padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; }
  .pill.live { color: var(--ok); background: oklch(from var(--ok) l c h / .14); }
  .pill.park { color: var(--warn); background: oklch(from var(--warn) l c h / .14); }
  .pill.soon { color: var(--ink3); background: oklch(from var(--edge) l c h / .3); }
  @container page (inline-size < 640px) {
    .eco li { grid-template-columns: 1fr auto; }
    .eco span { grid-column: 1 / -1; }
  }

  .band-honest { border-block-start-color: oklch(from var(--warn) l c h / .35); }
  .honest { margin-block-start: var(--s4); padding-inline-start: var(--s4); display: grid; gap: var(--s3); font-size: .9375rem; color: var(--ink3); max-inline-size: 76ch; }
  .honest strong { color: var(--ink); }
  .honest em { color: var(--ink2); font-style: normal; }
  .honest-tail { margin-block-start: var(--s4); font-size: .9375rem; color: var(--ink2); }

  .foot { margin-block-start: var(--s7); border-block-start: 1px solid var(--edge);
    background: oklch(from var(--void) l c h / .9); }
  .foot-grid { inline-size: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
    padding-block: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
  .foot-brand { font-weight: 700; color: var(--ink); }
  .foot-brand span { font: 600 .6875rem var(--mono); color: var(--ink3); }
  .foot-note { font-size: .875rem; color: var(--ink3); }
  .foot nav { display: flex; gap: var(--s4); margin-inline-start: auto; flex-wrap: wrap; }
  .foot nav a { font-size: .875rem; color: var(--ink3); text-decoration: none; }
  .foot nav a:hover { color: var(--ink); }
  .foot-status { inline-size: 100%; font: .75rem var(--mono); color: var(--ink3); }
}

@layer a11y {
  :focus-visible { outline: 3px solid var(--brand-lit); outline-offset: 2px; border-radius: 3px; }

  /* clip-path CLIPS AN OUTLINE AWAY. A clipped element that relies on a normal
     outline gives keyboard users no visible focus at all. Draw it inside. */
  .hx:focus-visible { outline: none; }
  .hx:focus-visible::before {
    content: ""; position: absolute; inset: 3px; clip-path: inherit;
    box-shadow: inset 0 0 0 3px var(--brand-lit); z-index: 2;
  }

  .skip {
    position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s2);
    z-index: 100; padding: .6rem 1rem; border-radius: var(--r1);
    background: var(--surf2); color: var(--ink); text-decoration: none;
    translate: 0 -300%;
  }
  .skip:focus-visible { translate: 0 0; }

  @media (forced-colors: active) {
    .card, .rung, .eco li, .val-out, .code { border: 1px solid CanvasText; }
    .hx { forced-color-adjust: none; }
    .btn-primary { border: 1px solid ButtonText; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important; animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   g2 spec-render additions START — /spec/ (rendered specification page).
   Rendered deterministically from spec/index.md by the lane's build-spec.mjs;
   styled by THIS stylesheet only (site CSP is style-src 'self'; merge-into-
   the-host law — no parallel stylesheet, no inline styles).
   Colors: existing ladder tokens only — var() and token-relative color forms; no new
   off-ladder literals. Responsive: container queries only (ASL LAW 2);
   media queries restricted to pointer / reduced-motion / forced-colors.
   No viewport-height units (ASL LAW 1) — the sticky TOC sizes with dvb.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
  .spec-band { display: grid; gap: var(--s5);
    grid-template-columns: minmax(0, 1fr); align-items: start; }
  @container page (inline-size >= 1080px) {
    .spec-band { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s6); }
    .spec-toc { order: 2; position: sticky; inset-block-start: 5.5rem;
      max-block-size: calc(100dvb - 7rem); overflow-y: auto; scrollbar-width: thin; }
    .spec-doc { order: 1; }
    .spec-toc ol ol { display: grid; }
  }

  .spec-toc { padding: var(--s4); border-radius: var(--r3);
    background: oklch(from var(--sunk) l c h / .6); border: 1px solid var(--edge); }
  .spec-toc-h { font: 600 .75rem/1 var(--mono); letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink3); }
  .spec-toc ol { list-style: none; padding: 0; margin-block-start: var(--s2); }
  .spec-toc ol ol { display: none; margin-block-start: 0; margin-inline-start: .55rem;
    padding-inline-start: var(--s3);
    border-inline-start: 1px solid oklch(from var(--edge) l c h / .55); }
  .spec-toc a { display: flex; align-items: center; min-block-size: var(--tap-fine);
    padding: .2rem .55rem; border-radius: var(--r1);
    color: var(--ink3); text-decoration: none; font-size: .875rem;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
  .spec-toc a:hover { color: var(--ink); background: oklch(from var(--surf) l c h / .6); }
  .spec-toc ol ol a { font-size: .8125rem; }

  .spec-doc { max-inline-size: 76ch; }
  .spec-doc h1 { font-size: clamp(1.8rem, 1.15rem + 2.4cqi, 2.8rem);
    letter-spacing: -.03em; color: var(--ink); }
  .spec-doc h1 + p { font: 600 .8125rem/1.9 var(--mono); color: var(--ink3);
    margin-block-start: var(--s3); }
  .spec-doc h1 + p strong { color: var(--ink2); }
  .spec-doc h2 { margin-block-start: var(--s6); padding-block-start: var(--s5);
    border-block-start: 1px solid oklch(from var(--edge) l c h / .38);
    font-size: clamp(1.3rem, 1.05rem + 1cqi, 1.8rem);
    letter-spacing: -.02em; color: var(--ink); }
  .spec-doc h3 { margin-block-start: var(--s5); font-size: 1.125rem; color: var(--ink); }
  .spec-doc h2, .spec-doc h3 { scroll-margin-block-start: 5.5rem; }
  .spec-doc p { margin-block-start: var(--s3); }
  .spec-doc ul, .spec-doc ol { margin-block-start: var(--s3);
    padding-inline-start: var(--s4); display: grid; gap: var(--s2); }
  .spec-doc li::marker { color: var(--ink3); }
  .spec-doc hr { border: 0; margin-block-start: var(--s6);
    border-block-start: 1px solid oklch(from var(--edge) l c h / .38); }
  .spec-doc pre.code { margin-block-start: var(--s3); }
  .spec-doc strong { color: var(--ink); }
  .spec-doc em { color: var(--ink2); }
  .spec-doc code { font-family: var(--mono); font-size: .875em;
    color: var(--brand-lit); overflow-wrap: anywhere; }
  .spec-doc pre.code code { color: inherit; font-size: inherit; overflow-wrap: normal; }

  .foot-status a { color: var(--ink2); }

  /* LAW 5 floors under touch: page-shell links become >=44px targets. Floors
     (min-block-size), never pins — spec §5.6. Inline prose links keep the
     WCAG 2.5.8 inline exception. */
  @media (pointer: coarse) {
    .spec-toc a { min-block-size: var(--tap); }
    .topnav a, .foot nav a { display: inline-flex; align-items: center;
      min-block-size: var(--tap); }
    .brand { min-block-size: var(--tap); }
  }
}
/* ── g2 spec-render additions END ── */