/* ==========================================================================
   base.css — the design system.

   NO COLOUR IN THIS FILE IS WRITTEN BY HAND. The :root block between the
   PALETTE markers is generated by tools/palette.mjs through tools/build.mjs,
   and tools/validate.mjs recomputes every value and fails the build if one
   has been edited in place. Everything below refers to the tokens.

   THE ONE RULE THAT IS NOT ABOUT COLOUR. Scroll reveal is scoped to
   `.js [data-reveal]`, and `.js` is set by an inline script before any
   stylesheet loads. A sibling shipped 37 elements at opacity 0 waiting on an
   IntersectionObserver, so the entire page was invisible to anything without
   JavaScript — including several crawlers.
   ========================================================================== */

/* PALETTE:BEGIN */
:root {
  --ground: #F9EBFF;
  --plate: #FFFCFF;
  --well: #F1DFF9;
  --deep: #07000C;
  --deep-plate: #100416;

  --ink: #36273C;
  --ink2: #54455B;
  --faint: #726179;

  --accent-a: #265400;
  --accent-b: #663679;
  --fill-a: #2F6500;
  --fill-b: #7A4190;

  --on-deep: #D8C8DF;
  --on-deep-2: #A697AD;
  --on-deep-faint: #807287;
  --on-deep-accent-a: #72A458;
  --on-deep-accent-b: #B683CC;
}
/* PALETTE:END */

:root {
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1180px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --shadow-sm: 0 1px 2px rgb(24 4 32 / 0.05), 0 2px 8px rgb(24 4 32 / 0.04);
  --shadow: 0 2px 6px rgb(24 4 32 / 0.06), 0 12px 32px -8px rgb(24 4 32 / 0.10);
  --shadow-lg: 0 4px 12px rgb(24 4 32 / 0.07), 0 28px 64px -16px rgb(24 4 32 / 0.18);

  --hair: color-mix(in oklab, var(--ink) 12%, transparent);
  --hair-soft: color-mix(in oklab, var(--ink) 7%, transparent);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas { max-width: 100%; display: block; }

::selection { background: color-mix(in oklab, var(--accent-a) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent-a);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fill-a); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- type ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h4 { font-size: 1.12rem; letter-spacing: -0.01em; }

h1 em, h2 em, h3 em { font-style: italic; color: var(--accent-a); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-a); text-decoration-color: color-mix(in oklab, var(--accent-a) 34%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 700; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.86em; }
code {
  background: var(--well); border: 1px solid var(--hair-soft);
  padding: 0.1em 0.36em; border-radius: 5px; color: var(--ink);
  overflow-wrap: anywhere;
}

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.24rem);
  line-height: 1.58; color: var(--ink2); max-width: 62ch;
  letter-spacing: -0.006em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-a); margin: 0 0 0.9rem;
}
.muted { color: var(--ink2); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 760px; }

section { padding-block: clamp(3.6rem, 8vw, 7rem); }
.band-well { background: var(--well); }
.band-plate { background: var(--plate); }
.band-deep { background: var(--deep); }

/* A dark band has to override EVERY ink token it inherits, not just the body
   colour. A sibling shipped one where the lede, the buttons and the heading
   accent were all still carrying light-surface tokens at 1.2, 1.4 and 1.9:1
   while the paragraph text was fine. */
.band-deep {
  color: var(--on-deep);
  --ink: var(--on-deep);
  --ink2: var(--on-deep-2);
  --faint: var(--on-deep-faint);
  --accent-a: var(--on-deep-accent-a);
  --accent-b: var(--on-deep-accent-b);
  --plate: var(--deep-plate);
  --well: var(--deep-plate);
  --hair: color-mix(in oklab, var(--on-deep) 16%, transparent);
  --hair-soft: color-mix(in oklab, var(--on-deep) 9%, transparent);
}

.head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.3rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ---- surfaces ------------------------------------------------------------ */
.card {
  background: var(--plate);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.card-hd { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }

.icon {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in oklab, var(--accent-a) 13%, var(--plate));
  color: var(--accent-a);
}
.icon svg { width: 19px; height: 19px; }

.ticks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.25rem; font-size: 0.925rem; color: var(--ink2); line-height: 1.5; }
.ticks li::before {
  content: ''; position: absolute; left: 0.22rem; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-a);
}

/* ---- chrome -------------------------------------------------------------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 80; padding: 0.85rem var(--gut); pointer-events: none; }
.bar-in {
  pointer-events: auto;
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.44rem 0.44rem 0.44rem 0.95rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--plate) 76%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow);
}
.bar-mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); margin-right: 0.5rem; }
.bar-mark svg { width: 27px; height: 27px; color: var(--fill-a); }
.bar-mark b { font-family: var(--font-display); font-size: 1.24rem; font-weight: 400; letter-spacing: 0.02em; }
.bar-nav { display: flex; gap: 0.1rem; margin-left: auto; }

/* `.bar-nav a` is two classes and `.bar-cta` is one, so a shared declaration
   loses to it and the call to action inherits nav colours. A sibling shipped
   a dark label on a dark pill at 1.03:1 that way, with every static check
   passing, because nothing in the markup was wrong — only the computed
   style. Both are stated explicitly here and tools/audit-live.mjs reads the
   computed colour of every one of them in a real browser. */
.bar-nav a {
  display: inline-block; padding: 0.42rem 0.72rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink2); text-decoration: none;
  white-space: nowrap;
}
.bar-nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.bar-nav a[aria-current='page'] { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }

.bar-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.05rem; border-radius: 999px;
  background: var(--fill-a); color: #fff; text-decoration: none;
  font-size: 0.885rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14);
}
.bar-cta:hover { background: color-mix(in oklab, var(--fill-a) 88%, #000); color: #fff; }
.bar-burger { display: none; }

@media (max-width: 900px) {
  .bar-nav { display: none; }
  .bar-burger {
    display: grid; place-items: center; margin-left: auto;
    width: 38px; height: 38px; border-radius: 999px;
    background: color-mix(in oklab, var(--ink) 7%, transparent);
    border: 0; color: var(--ink); cursor: pointer;
  }
  .bar-burger svg { width: 18px; height: 18px; }
  .bar.open .bar-nav {
    display: flex; flex-direction: column; gap: 0.15rem;
    position: absolute; top: calc(100% - 0.3rem); left: var(--gut); right: var(--gut);
    background: var(--plate); border: 1px solid var(--hair);
    border-radius: var(--r); padding: 0.5rem; box-shadow: var(--shadow-lg);
  }
  .bar.open .bar-nav a { padding: 0.6rem 0.8rem; }
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-1 { background: var(--fill-a); color: #fff; box-shadow: 0 2px 10px -2px color-mix(in oklab, var(--fill-a) 55%, transparent); }
.btn-1:hover { background: color-mix(in oklab, var(--fill-a) 88%, #000); color: #fff; }
.btn-2 { background: var(--plate); color: var(--ink); border-color: var(--hair); box-shadow: var(--shadow-sm); }
.btn-2:hover { background: var(--plate); border-color: color-mix(in oklab, var(--ink) 20%, transparent); color: var(--ink); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.44rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: color-mix(in oklab, var(--plate) 72%, transparent);
  border: 1px solid var(--hair-soft);
  font-size: 0.815rem; font-weight: 500; color: var(--ink2);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; color: var(--accent-a); flex: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-a); flex: none; }
.dot-live { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-a) 60%, transparent); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-a) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

/* ---- hero ---------------------------------------------------------------- */
.hero { position: relative; min-height: min(94vh, 940px); display: grid; align-items: center; isolation: isolate; padding-block: 7.5rem 3rem; }
.hero-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(115% 68% at 50% 32%, transparent 34%, color-mix(in oklab, var(--ground) 48%, transparent) 100%),
    linear-gradient(to bottom, transparent 68%, var(--ground) 99%);
}
.hero-card {
  max-width: 860px; margin-inline: auto; text-align: center;
  padding: clamp(1.9rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3.2rem);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--plate) 46%, transparent);
  border: 1px solid color-mix(in oklab, #fff 55%, transparent);
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
  box-shadow: var(--shadow-lg);
}
.hero-card h1 { margin-bottom: 0.28em; letter-spacing: -0.028em; }
.hero-card .lede { margin-inline: auto; margin-bottom: 1.7rem; }
.hero .btn-row { justify-content: center; margin-bottom: 1.5rem; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem; border-radius: 999px; margin-bottom: 1.6rem;
  background: color-mix(in oklab, var(--plate) 80%, transparent);
  border: 1px solid var(--hair-soft);
  font-size: 0.8rem; color: var(--ink2); font-weight: 500;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.hero-badge b { color: var(--ink); font-weight: 650; }

/* ---- numerals ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.1rem, 3vw, 2.4rem); }
.stat .n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1;
  letter-spacing: -0.028em; font-variant-numeric: tabular-nums;
  margin-bottom: 0.38rem; color: var(--ink);
}
.stat .n em { font-style: italic; color: var(--accent-a); }
.stat .k { font-size: 0.85rem; color: var(--ink2); line-height: 1.42; max-width: 26ch; }

/* ---- steps --------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: clamp(0.9rem, 1.6vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.step { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--hair); }
.step .sn { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-a); margin-bottom: 0.5rem; }
.step h4 { margin-bottom: 0.42rem; font-family: var(--font-display); font-size: 1.3rem; }
.step p { font-size: 0.925rem; color: var(--ink2); }

/* ---- tables -------------------------------------------------------------- */
.tbl-wrap {
  overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: var(--r);
  background: var(--plate); box-shadow: var(--shadow-sm);
  /* A scroll container still has a non-zero min-content contribution, so a
     wide table inside one can widen the PAGE instead of scrolling itself. */
  min-width: 0; max-width: 100%;
}
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
th, td { padding: 0.66rem 0.9rem; text-align: left; border-bottom: 1px solid var(--hair-soft); white-space: nowrap; }
thead th {
  font-family: var(--font-mono); font-size: 0.67rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink2);
  background: var(--well); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 0.82rem; }

/* ---- prose --------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 1.9em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.5em; color: var(--ink2); }
.prose li::marker { color: var(--accent-a); }

.note {
  border-left: 3px solid var(--accent-a);
  background: var(--well);
  padding: 1rem 1.2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.93rem; color: var(--ink2); margin: 1.4rem 0;
}
.note b { color: var(--ink); }

/* ---- state pills --------------------------------------------------------- */
.state { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid; }
.state-live { color: var(--fill-a); border-color: color-mix(in oklab, var(--fill-a) 34%, transparent); background: color-mix(in oklab, var(--fill-a) 9%, transparent); }
.state-unaudited { color: var(--fill-b); border-color: color-mix(in oklab, var(--fill-b) 34%, transparent); background: color-mix(in oklab, var(--fill-b) 9%, transparent); }
.state-not, .state-none-yet { color: var(--ink2); border-color: var(--hair); background: color-mix(in oklab, var(--ink) 5%, transparent); }

/* ---- footer -------------------------------------------------------------- */
footer { border-top: 1px solid var(--hair-soft); padding-block: clamp(2.6rem, 5vw, 4rem) 2rem; }
.foot { display: grid; grid-template-columns: minmax(230px, 1.4fr) repeat(auto-fit, minmax(130px, 1fr)); gap: 2rem; }
.foot h5 { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 0.85rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--ink2); text-decoration: none; font-size: 0.9rem; }
.foot a:hover { color: var(--ink); }
.foot-mark { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; }
.foot-mark svg { width: 26px; height: 26px; color: var(--fill-a); }
.foot-mark b { font-family: var(--font-display); font-size: 1.24rem; font-weight: 400; letter-spacing: 0.02em; }
.foot-legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hair-soft); display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; justify-content: space-between; font-size: 0.8rem; color: var(--faint); }

/* ---- reveal -------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal].in { transition: none; }
}

/* ---- app ----------------------------------------------------------------- */
.app-grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .app-grid { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }

.app-status {
  border: 1px solid var(--hair-soft); background: var(--plate);
  border-radius: var(--r); padding: 0.85rem 1.1rem; font-size: 0.9rem; color: var(--ink2);
  margin-bottom: 1.2rem; overflow-wrap: anywhere;
}
.app-status.ok { border-color: color-mix(in oklab, var(--fill-a) 40%, transparent); background: color-mix(in oklab, var(--fill-a) 7%, var(--plate)); }
.app-status.bad { border-color: color-mix(in oklab, var(--fill-b) 45%, transparent); background: color-mix(in oklab, var(--fill-b) 8%, var(--plate)); }

.assets { display: grid; gap: 0.3rem; max-height: 340px; overflow-y: auto; padding-right: 0.3rem; }
.asset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem;
  text-align: left; width: 100%; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem; color: var(--ink); font-family: inherit;
}
.asset:hover { background: var(--well); }
.asset.on { background: color-mix(in oklab, var(--accent-a) 12%, var(--plate)); border-color: color-mix(in oklab, var(--accent-a) 34%, transparent); }
.asset b { font-size: 0.9rem; font-weight: 700; }
.asset span { font-size: 0.78rem; color: var(--ink2); }

.field { display: grid; gap: 0.3rem; margin-bottom: 0.85rem; }
.field label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); }
.field input {
  font: inherit; font-size: 0.94rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--plate); color: var(--ink); width: 100%;
}
.field input:focus-visible { border-color: var(--accent-a); }
.field .hint { font-size: 0.78rem; color: var(--faint); }

.facts { display: grid; gap: 0.1rem; margin: 0 0 1.2rem; }
.fact { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--hair-soft); font-size: 0.9rem; }
.fact dt { color: var(--ink2); margin: 0; }
.fact dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.sess { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid; }
.sess-regular { color: var(--fill-a); border-color: color-mix(in oklab, var(--fill-a) 36%, transparent); background: color-mix(in oklab, var(--fill-a) 10%, transparent); }
.sess-pre, .sess-post { color: var(--ink2); border-color: var(--hair); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.sess-closed { color: var(--fill-b); border-color: color-mix(in oklab, var(--fill-b) 40%, transparent); background: color-mix(in oklab, var(--fill-b) 10%, transparent); }

/* ---- figures ------------------------------------------------------------- */
.fig { background: var(--plate); border: 1px solid var(--hair-soft); border-radius: var(--r-lg); padding: clamp(1.1rem, 2vw, 1.6rem); box-shadow: var(--shadow-sm); }
.fig figcaption { font-size: 0.86rem; color: var(--ink2); margin-top: 0.9rem; line-height: 1.5; }
.fig svg { width: 100%; height: auto; display: block; }

.bars { display: grid; gap: 0.55rem; }
.barrow { display: grid; grid-template-columns: 92px minmax(0,1fr) 96px; align-items: center; gap: 0.7rem; font-size: 0.86rem; }
/* display:block on BOTH. They are spans, and width and height do not apply
   to an inline box — the chart shipped as four identical empty tracks and
   every one of the thirty-one file checks passed over it, because nothing in
   the markup was wrong. */
.barrow .track { display: block; height: 22px; background: var(--well); border-radius: 5px; overflow: hidden; }
.barrow .fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.barrow .val { text-align: right; font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.barrow .lab { color: var(--ink2); }

.legend { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; font-size: 0.8rem; color: var(--ink2); margin-top: 1rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---- the asset grid ------------------------------------------------------- */
.agrid { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.acard {
  display: grid; gap: 0.6rem; text-decoration: none; color: var(--ink);
  background: var(--plate); border: 1px solid var(--hair-soft); border-radius: var(--r);
  padding: 0.75rem 0.85rem 0.7rem; box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.acard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--ink) 16%, transparent); }
.acard-hd { display: flex; align-items: center; gap: 0.55rem; }
.tile {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
}
.acard-id { display: grid; min-width: 0; line-height: 1.2; }
.acard-id b { font-size: 0.88rem; font-weight: 700; }
.acard-id span { font-size: 0.7rem; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-pct {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  color: var(--fill-b); font-variant-numeric: tabular-nums;
}
.split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--well); }
.split-none { opacity: 0.45; }
.split .seg { display: block; height: 100%; }
.split .s-reg { background: var(--fill-a); }
.split .s-ext { background: color-mix(in oklab, var(--fill-a) 34%, var(--well)); }
.split .s-shut { background: var(--fill-b); }
.acard-foot { font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.acard-foot i { font-style: normal; letter-spacing: 0.07em; text-transform: uppercase; font-size: 0.62rem; }
.acard-foot.live { color: var(--ink2); }

.grid-note { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center; margin-top: 1.2rem; font-size: 0.82rem; color: var(--ink2); }
.grid-note span { display: inline-flex; align-items: center; gap: 0.42rem; }
.grid-note i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; font-style: normal; }

/* ---- hero preview card ---------------------------------------------------- */
.preview {
  max-width: 420px; margin: -2.2rem auto 0; position: relative; z-index: 2;
  background: color-mix(in oklab, var(--plate) 88%, transparent);
  border: 1px solid color-mix(in oklab, #fff 60%, transparent);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem 1.2rem;
  backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: var(--shadow-lg); text-align: left;
}
.preview-hd { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.preview-hd .icon { width: 34px; height: 34px; flex: 0 0 34px; }
.preview-hd b { display: block; font-size: 0.94rem; }
.preview-hd span { font-size: 0.75rem; color: var(--ink2); }
.preview .facts { margin-bottom: 0; }
.preview .fact { font-size: 0.86rem; padding: 0.38rem 0; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: '+'; float: right; color: var(--accent-a); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details.card[open] summary::after { content: '−'; }

/* A grid item's default min-width is auto, i.e. its content's minimum — so a
   single unbroken 9,575-character token symbol makes the column that wide and
   takes the document with it. Every level between the grid and the text has
   to opt out. */
.acard, .acard-hd, .acard-id { min-width: 0; }
.acard-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-foot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Belt and braces for the rule above: nothing inline may grow tall enough to
   change a control's height, whatever its attributes say. */
.btn svg, .chip svg, .ticks svg, .state svg { flex: none; width: 16px; height: 16px; }

/* ---- the X link in the bar ------------------------------------------------ */
.bar-x {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--ink2); text-decoration: none;
  margin-left: 0.15rem;
}
.bar-x:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
@media (max-width: 900px) { .bar-x { margin-left: auto; } .bar.open .bar-x { margin-left: 0; } }
.foot a[rel~="me"] { display: inline-flex; align-items: center; gap: 0.4rem; }
.foot a[rel~="me"] svg { flex: none; }