/* ═══════════════════════════════════════════════════════════════════════════
   CALDERA — the design system of the ReviewBot document.

   Built to DESIGN.md. Forge fire on warm limestone: a Pumice canvas,
   Limestone cards, one vivid Ember, a Plasma halftone used exactly twice, and
   Sulfur reserved for tags. Flat throughout — nothing on this page casts a
   shadow. Structure is carried by ultrabold compressed type at architectural
   scale, by three radii (100 / 40 / 800), and by 1.5px dotted rules.

   THREE DEPARTURES from DESIGN.md, each forced by the content and each taken
   inside the palette rather than around it:

   1. State needs four readings — blocked, pending, cleared, on-file — and the
      brief forbids new hues. So state is spelled in the existing four
      surfaces: Ember fill (blocked / major), Sulfur fill (pending / minor),
      Obsidian fill (cleared / decided), dotted ghost (suppressed / deferred).
      Every one also carries a glyph or a word, so none of it is colour alone.

   2. Chalk on Ember is 3.36:1 — fine for an 80px numeral, not for a 14px
      label. So Ember surfaces take Chalk for display type and Obsidian for
      anything at body size. The stat cards read as a deliberate two-tone
      pairing rather than as a contrast failure.

   3. Code needs a monospace and the brief names none. It gets the system mono
      stack, so the page still makes exactly one font request it can lose.
      Syntax is coloured in Ember and Sulfur only, on Obsidian — the dark
      surface the brief already reserves for input sections.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Colours ─────────────────────────────────────────────────────────── */
  --ember:#fc5000;
  --plasma:#524ae9;
  --sulfur:#f5f28e;
  --limestone:#f7f6f2;
  --pumice:#e2e2df;
  --obsidian:#070607;
  --chalk:#ffffff;

  /* Monochrome warm greys, derived — the only tones outside the three
     chromatics, used for meta text and for dotted rules. */
  --ink:var(--obsidian);
  --ink-2:#4a4845;
  /* 4.85:1 on Pumice, 5.81:1 on Limestone. The obvious lighter grey read
     nicely and measured 4.03:1, which is a fail dressed as restraint. */
  --ink-3:#625f5a;
  --rule:#070607;
  --on-dark:#e7e5e0;
  --on-dark-2:#a5a29b;
  /* Tuned against the *lightest* dark surface it appears on (#151413, the
     lifted card inside a dark band), not against pure Obsidian: 4.80:1 there
     and 5.27:1 on Obsidian. The darker grey passed on Obsidian and quietly
     failed at 4.30:1 everywhere a card was lifted off it. */
  --on-dark-3:#85827a;
  --dark-line:#2a2827;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --f-display:'Anton','PP Neue Corp Compact',ui-sans-serif,system-ui,
    -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,
    'Segoe UI',Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --t-caption:.75rem;      /* 12 */
  --t-sm:.875rem;          /* 14 */
  --t-body:1rem;           /* 16 */
  --t-lede:1.125rem;       /* 18 */
  --t-sub:clamp(1.35rem,1.9vw,1.625rem);          /* → 26 */
  --t-h:clamp(1.5rem,2.4vw,2rem);                 /* → 32 */
  --t-h-lg:clamp(1.9rem,3.6vw,3rem);              /* → 48 */
  --t-h-2xl:clamp(2.3rem,5.6vw,5rem);             /* → 80 */
  --t-h-3xl:clamp(2.6rem,7vw,6rem);               /* → 96 */
  --t-display:clamp(3.3rem,12.1vw,11.8125rem);    /* → 189 */

  /* ── Space, shape, layout ────────────────────────────────────────────── */
  --wrap:1280px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --gap-sec:clamp(3.5rem,8vw,5rem);
  --pad-card:clamp(1.5rem,3.4vw,2.5rem);
  --r-card:clamp(24px,3vw,40px);
  --r-pill:800px;
  --r-input:100px;
  --r-med:20px;
  --r-sm:16px;
  --hair:1.5px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.4,0,.2,1);

  color-scheme:light;
}

/* ═══ 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{
  background:var(--pumice);color:var(--ink);
  font-family:var(--f-body);font-weight:500;font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2.5px solid var(--ember);outline-offset:3px;border-radius:2px}
.band-dark :focus-visible,.panel :focus-visible,.foot :focus-visible{outline-color:var(--sulfur)}
::selection{background:var(--sulfur);color:var(--obsidian)}

.vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-5rem;z-index:200;
  background:var(--ember);color:var(--obsidian);padding:.7rem 1.4rem;
  border-radius:var(--r-pill);font-size:var(--t-sm);transition:top .2s var(--e-io)}
.skip:focus{top:.7rem}

/* ═══ TYPE ════════════════════════════════════════════════════════════════
   Display type is never set below 26px and never given negative tracking:
   +0.02em is what keeps the heavy compressed strokes from colliding. */
.d0,.d1,.d2,.d3,.d4,.d5{
  font-family:var(--f-display);font-weight:400;
  letter-spacing:.02em;text-wrap:balance;
}
.d0{font-size:var(--t-display);line-height:.94;letter-spacing:.018em}
.d1{font-size:var(--t-h-3xl);line-height:.95}
.d2{font-size:var(--t-h-2xl);line-height:1.02}
.d3{font-size:var(--t-h-lg);line-height:1.02}
.d4{font-size:var(--t-h);line-height:1.06}
.d5{font-size:var(--t-sub);line-height:1.14}

.lede{font-size:clamp(1.0625rem,1.5vw,var(--t-lede));line-height:1.5;
  max-width:58ch;color:var(--ink)}
.body{max-width:62ch;line-height:1.55}
.small{font-size:var(--t-sm);line-height:1.5}
.meta{font-size:var(--t-caption);line-height:1.35;color:var(--ink-3)}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
code{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
.dim{color:var(--ink-3)}
.mt{margin-top:1rem}
strong,b{font-weight:500}
em{font-style:normal}

/* The one micro-label of the system: DM Sans Medium, tracked out, uppercase. */
.label{
  font-size:var(--t-caption);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.2;color:var(--ink-2);
}
.label--quiet{color:var(--ink-3);letter-spacing:.1em}

/* ═══ HALFTONE ════════════════════════════════════════════════════════════
   The signature motif. A 9px Ember dot grid over a Plasma→Ember gradient,
   with a solid Ember corner the dots dissolve into at the top right.
   Built from gradients only, so it costs no request and scales to any box. */
.halftone{position:relative;overflow:hidden;background:var(--plasma);isolation:isolate}
.halftone::before,.halftone::after{content:'';position:absolute;inset:0;
  pointer-events:none;z-index:0}
/* Ember is anchored to the top-right corner with a radial, not a linear axis.
   DESIGN.md asks for "fades to solid orange at the top right", and a linear
   gradient only delivers that at one aspect ratio: on the narrow, tall card a
   phone makes of the certificate, a 35deg axis dragged Ember all the way up
   under the headline and the RB-CRS/01 label. A corner-anchored radial keeps
   the orange in its corner at every shape, so text placed anywhere else on a
   halftone sits on Plasma and clears 5.7:1 against Chalk. */
.halftone::before{
  background:
    radial-gradient(circle at 2.2px 2.2px,var(--ember) 1.9px,#0000 2px) 0 0/9px 9px,
    radial-gradient(78% 62% at 100% 0%,var(--ember) 0%,#c9430f 26%,#6f42cf 55%,var(--plasma) 82%);
}
.halftone::after{
  background:var(--ember);
  -webkit-mask-image:radial-gradient(46% 82% at 100% 0%,#000 0%,#000 12%,#0000 62%);
  mask-image:radial-gradient(46% 82% at 100% 0%,#000 0%,#000 12%,#0000 62%);
}
.halftone>*{position:relative;z-index:2}

/* A quieter halftone for card image areas: shadowed dots on Ember. */
.halftone--ember{background:var(--ember)}
.halftone--ember::before{
  background:
    radial-gradient(circle at 2.2px 2.2px,#0000002e 2px,#0000 2.1px) 0 0/9px 9px,
    var(--ember);
}
.halftone--ember::after{display:none}

/* Dots on the dark surfaces, at low contrast, as texture rather than motif. */
.dots-dark{
  background-image:radial-gradient(circle at 1px 1px,#ffffff12 1px,#0000 1.1px);
  background-size:10px 10px;
}

/* ═══ DOTTED RULE ═════════════════════════════════════════════════════════
   1.5px dotted Obsidian. Built from a repeating gradient rather than a
   border, because a 1.5px dotted border renders as a smear at most zooms. */
.rule{height:var(--hair);border:0;flex:1;min-width:1.5rem;
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 2px,#0000 2px 6px);
  opacity:.42}
.band-dark .rule,.foot .rule{
  background-image:repeating-linear-gradient(90deg,var(--on-dark) 0 2px,#0000 2px 6px);
  opacity:.3}
.rule-v{width:var(--hair);align-self:stretch;min-height:1.5rem;flex:none;
  background-image:repeating-linear-gradient(180deg,var(--rule) 0 2px,#0000 2px 6px);
  opacity:.42}

/* The section header bar: label — dotted rule — sheet number. */
.bar{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.4rem);
  margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.bar .label{white-space:nowrap}
.bar .label:last-child{color:var(--ink-3)}
.band-dark .bar .label{color:var(--on-dark-2)}
.band-dark .bar .label:last-child{color:var(--on-dark-3)}

/* ═══ LAYOUT ══════════════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* The masthead is sticky, so anything a nav link jumps to has to clear it or
   the section's own header lands underneath the nav pill. */
[id]{scroll-margin-top:clamp(4.5rem,10vh,6.5rem)}
.sec{padding-block:var(--gap-sec)}
.head{max-width:min(100%,74ch);margin-bottom:clamp(2rem,4vw,3rem)}
.head .lede{margin-top:clamp(.9rem,1.8vw,1.3rem)}
.stack{display:grid;gap:1rem;align-content:start}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.split{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.split>*{min-width:0}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--wide-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .split--wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .split--flip>*:first-child{order:2}
}

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════
   Never rectangular. Ember fill with Obsidian text for the primary; a solid
   1.5px Obsidian outline at 40px for the secondary. */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-body);font-weight:500;font-size:var(--t-body);line-height:1.2;
  padding:.75rem 1.5rem;border-radius:var(--r-pill);
  background:var(--ember);color:var(--obsidian);
  border:var(--hair) solid var(--ember);
  text-decoration:none;white-space:nowrap;
  transition:background .18s var(--e-io),border-color .18s var(--e-io),
    transform .18s var(--e-out),color .18s var(--e-io);
}
.btn svg{width:1em;height:1em;flex:none}
.btn:hover{background:var(--obsidian);border-color:var(--obsidian);color:var(--chalk)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:#0000;border-color:var(--obsidian);color:var(--obsidian);
  border-radius:var(--r-card);padding:1rem 1.4rem}
.btn--ghost:hover{background:var(--obsidian);color:var(--chalk)}
.btn--onDark:hover{background:var(--chalk);border-color:var(--chalk);color:var(--obsidian)}
.btn--ghostDark{background:#0000;border-color:var(--on-dark-3);color:var(--on-dark);
  border-radius:var(--r-card);padding:1rem 1.4rem}
.btn--ghostDark:hover{background:var(--chalk);border-color:var(--chalk);color:var(--obsidian)}
.btn--sm{padding:.5rem 1.05rem;font-size:var(--t-sm)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* A low-emphasis link: no container, colour and position only. */
.glink{display:inline-flex;align-items:center;gap:.4rem;padding:0 .75rem;
  border-radius:var(--r-pill);text-decoration:none;font-size:var(--t-body);
  transition:opacity .16s var(--e-io)}
.glink svg{width:.9em;height:.9em}
.glink:hover{opacity:.6}

/* ═══ TAGS ════════════════════════════════════════════════════════════════
   Four readings, four surfaces, no new hues. Each carries its own word. */
.tag{
  display:inline-flex;align-items:center;gap:.36rem;
  font-family:var(--f-body);font-weight:500;font-size:var(--t-caption);
  line-height:1.25;letter-spacing:.02em;
  padding:.28rem .68rem;border-radius:var(--r-pill);
  background:var(--sulfur);color:var(--obsidian);
  border:var(--hair) solid #0000;white-space:nowrap;
}
.tag svg{width:.85em;height:.85em;flex:none}
.tag--ember{background:var(--ember);color:var(--obsidian)}
.tag--ink{background:var(--obsidian);color:var(--chalk)}
.tag--ghost{background:#0000;color:var(--ink-2);border:var(--hair) dotted var(--ink-2)}
.band-dark .tag--ghost,.panel .tag--ghost{color:var(--on-dark-2);border-color:var(--on-dark-3)}

/* ═══ CARDS ═══════════════════════════════════════════════════════════════ */
.card{background:var(--limestone);border-radius:var(--r-card);padding:var(--pad-card)}
.card--pumice{background:var(--pumice)}
.card--ember{background:var(--ember);color:var(--obsidian)}
/* Ember is a light surface. Greys tuned for Limestone measure 2.7:1 on it,
   so everything inside resolves to Obsidian at 85% or better. */
.card--ember .label,.card--ember .label--quiet{color:#070607d9}
.card--ember .meta,.card--ember .dim{color:#070607d9}
.card--tight{padding:clamp(1.1rem,2.2vw,1.5rem)}
.card__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1rem}

/* The Ember stat card. Chalk numeral, Obsidian label — see departure 2. */
.stats{display:grid;gap:clamp(.7rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stat{background:var(--ember);border-radius:var(--r-card);
  padding:clamp(1.3rem,2.6vw,2.5rem);display:grid;gap:.5rem;align-content:start}
/* Two lines' worth of room whether the label needs it or not, so the numerals
   sit on one line across the row instead of stepping wherever a label wraps. */
.stat__k{font-size:var(--t-sm);font-weight:500;color:var(--obsidian);line-height:1.25;
  min-height:2.5em}
.stat__v{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  font-size:clamp(3.2rem,5.4vw,5rem);line-height:1.1;color:var(--chalk)}
/* Obsidian, not Chalk: at 0.3em this unit label lands just under the 24px
   large-text threshold, so it needs 4.5:1 and Chalk on Ember gives 3.34. */
.stat__v small{font-size:.3em;letter-spacing:.08em;margin-left:.2em;
  vertical-align:.62em;color:var(--obsidian)}
/* 85% Obsidian over Ember is 4.86:1 — the lightest this 12px line may go and
   still be readable. Anything softer is a contrast failure dressed as taste. */
.stat__n{font-size:var(--t-caption);line-height:1.45;color:#070607d9;max-width:28ch}
/* One card in the row takes the quiet treatment, so it reads as a rhythm and
   not as a wall of orange. */
.stat--quiet{background:var(--limestone)}
.stat--quiet .stat__v{color:var(--obsidian)}
.stat--quiet .stat__n{color:var(--ink-3)}

/* ═══ DARK PANEL ══════════════════════════════════════════════════════════
   Obsidian is where code and machine output live. Card radius, flat. */
.panel{background:var(--obsidian);color:var(--on-dark);border-radius:var(--r-card);
  overflow:hidden}
.panel__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.95rem clamp(1rem,2.2vw,1.4rem);
  border-bottom:var(--hair) solid var(--dark-line)}
.panel__head .label{color:var(--on-dark-2)}
.panel__head .label:last-child{color:var(--on-dark-3);letter-spacing:.1em}
.panel__body{padding:clamp(1rem,2.2vw,1.4rem);display:grid;gap:.85rem}
.panel .dim{color:var(--on-dark-2)}
.panel .small,.panel .body{color:var(--on-dark)}

/* ═══ CODE ════════════════════════════════════════════════════════════════ */
.code{overflow-x:auto;padding:clamp(.9rem,2vw,1.2rem) 0}
.code ol{margin:0;padding:0;list-style:none;counter-reset:l;
  font-family:var(--f-mono);font-size:clamp(.72rem,1.35vw,.83rem);line-height:1.8;
  min-width:max-content}
.code li{counter-increment:l;display:flex;gap:.9rem;
  padding-inline:clamp(1.2rem,2.4vw,1.6rem) clamp(1rem,2vw,1.4rem);position:relative}
.code li::before{content:counter(l);color:var(--on-dark-3);
  min-width:1.3em;text-align:right;flex:none;user-select:none;font-size:.9em}
.code li[data-m]::after{content:attr(data-m);position:absolute;
  left:clamp(.35rem,.8vw,.6rem);color:var(--on-dark-3);font-size:.9em}
.code li[data-m="+"]{background:#fc50001c}
.code li[data-m="+"]::after{color:var(--ember)}
.code li[data-m="-"]{background:#ffffff09;color:var(--on-dark-3)}
/* The Ember edge is painted, not cast: an inset shadow would be the one shadow
   in a system that has none, and a border here would shift the line. */
.code li[data-hot]{
  background-image:linear-gradient(90deg,var(--ember) 0 2.5px,#0000 2.5px);
  background-color:#fc500033}
.code .t{white-space:pre}
.code .k{color:var(--ember)}
.code .s{color:var(--sulfur)}
.code .c{color:var(--on-dark-3);font-style:italic}
.code .fn{color:var(--chalk)}
.code .n{color:#d3d1ca}
.code .p{color:var(--on-dark-3)}

/* The annotation under a diff: a finding, written against the code. */
.annot{display:grid;grid-template-columns:var(--hair) 1fr;gap:0 1rem;
  margin:0 clamp(1rem,2.2vw,1.4rem) clamp(1rem,2.2vw,1.4rem)}
.annot__rule{background-image:repeating-linear-gradient(180deg,var(--ember) 0 2px,#0000 2px 6px)}
.annot--sulfur .annot__rule{background-image:repeating-linear-gradient(180deg,var(--sulfur) 0 2px,#0000 2px 6px)}
.annot--ghost .annot__rule{background-image:repeating-linear-gradient(180deg,var(--on-dark-3) 0 2px,#0000 2px 6px)}
.annot__t{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:var(--t-caption);letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-dark-2);margin-bottom:.5rem}
.annot p:not(.annot__t){font-size:var(--t-sm);line-height:1.6;color:var(--on-dark);
  max-width:64ch}
.annot code{color:var(--sulfur)}

/* ═══ TABLES ══════════════════════════════════════════════════════════════ */
.tbl{font-size:var(--t-sm)}
.tbl th{text-align:left;font-weight:500;font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:0 .8rem .55rem 0;vertical-align:bottom}
.tbl td{padding:.62rem .8rem .62rem 0;vertical-align:top;line-height:1.5;
  border-top:var(--hair) dotted #07060742}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl thead th{border-bottom:var(--hair) solid #07060726}
.tbl tbody tr:first-child td{border-top:0}
.tbl thead+tbody tr:first-child td{border-top:var(--hair) dotted #07060742}
.tbl .num{font-family:var(--f-mono);font-size:.92em;white-space:nowrap;letter-spacing:-.01em}
.tbl--dark th{color:var(--on-dark-3)}
.tbl--dark td{border-top-color:var(--dark-line);color:var(--on-dark)}
.tbl--dark thead th{border-bottom-color:var(--dark-line)}
.tbl--dark thead+tbody tr:first-child td{border-top-color:var(--dark-line)}
/* Every data table sits in one of these. A table cannot render below its own
   min-content width, and several of these rows hold a nowrap finding ref next
   to a nowrap tag — on a 390px screen that overflowed the page and body's
   overflow:hidden quietly ate the right-hand column. No min-width is set on
   purpose: narrow tables still fit their card, and only the ones that really
   cannot shrink get a scrollbar. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Machine verdicts inside a table, spelled in the two accents the palette
   already has. Only ever used on the Obsidian surfaces, where Sulfur and Ember
   both clear 4.5:1 — there is deliberately no light-surface variant, because
   inventing a darkened orange for one would be a fourth chromatic. */
.tbl--dark .ok{color:var(--sulfur)}
.tbl--dark .hot{color:var(--ember)}

/* Fielded key/value pairs, on a dotted rule. */
.fields{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.fields>div{padding:.7rem 1rem .7rem 0;border-top:var(--hair) dotted #07060742}
.fields>div span{display:block;font-size:var(--t-caption);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.28rem}
.fields>div b{font-family:var(--f-mono);font-size:.86rem;letter-spacing:-.01em}
.panel .fields>div,.band-dark .fields>div{border-top-color:var(--dark-line)}
.panel .fields>div span,.band-dark .fields>div span{color:var(--on-dark-3)}
.panel .fields>div b,.band-dark .fields>div b{color:var(--on-dark)}

/* ═══ THE CHECK ═══════════════════════════════════════════════════════════
   reviewbot/majors. A pill, because every small control here is one. Colour
   is never the only signal: the icon and the words change with it. */
.check{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;border-radius:var(--r-pill);
  border:var(--hair) solid #07060726;background:var(--limestone);
  font-size:var(--t-sm);transition:border-color .3s var(--e-io),background .3s var(--e-io)}
.check__dot{position:relative;width:1.25rem;height:1.25rem;flex:none}
.check__dot svg{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .28s var(--e-io)}
.check[data-state="pend"] .i-pend,
.check[data-state="fail"] .i-fail,
.check[data-state="pass"] .i-pass{opacity:1}
.check__name{font-family:var(--f-mono);font-size:.86rem;letter-spacing:-.01em}
.check__state{margin-left:auto;font-size:var(--t-caption);letter-spacing:.07em;
  text-transform:uppercase}
.check[data-state="fail"]{border-color:var(--ember);background:#fc500016}
.check[data-state="pass"]{border-color:var(--obsidian);background:#0706070f}
.panel .check,.band-dark .check{background:#ffffff0a;border-color:var(--dark-line);
  color:var(--on-dark)}
.panel .check[data-state="fail"],.band-dark .check[data-state="fail"]{
  border-color:var(--ember);background:#fc500022}
.panel .check[data-state="pass"],.band-dark .check[data-state="pass"]{
  border-color:var(--sulfur);background:#f5f28e16}

/* A typed pull-request command. */
.cmd{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.75rem 1rem;border-radius:var(--r-med);
  border:var(--hair) solid var(--dark-line);background:#ffffff08;
  font-family:var(--f-mono);font-size:clamp(.72rem,1.3vw,.8rem);line-height:1.55;
  color:var(--on-dark-2);transition:border-color .18s var(--e-io),background .18s var(--e-io)}
.cmd b{color:var(--sulfur);font-weight:400;overflow-wrap:anywhere}
button.cmd:hover{border-color:var(--on-dark-2);background:#ffffff14}
.cmd .caret{display:inline-block;width:.5em;height:1.05em;background:var(--sulfur);
  animation:blink 1.1s steps(1,end) infinite;vertical-align:-.15em;flex:none}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cmd .caret{animation:none}}
.cmd .tag{margin-left:auto}
@media (max-width:560px){
  .cmd{align-items:flex-start;flex-wrap:wrap}
  .cmd .tag{margin-left:0}
}

/* An SLA clock. */
.sla{display:flex;align-items:center;gap:.7rem;font-size:var(--t-caption)}
.sla__bar{flex:1;min-width:3rem;height:6px;border-radius:var(--r-pill);
  background:#07060714;overflow:hidden}
.panel .sla__bar,.band-dark .sla__bar{background:#ffffff16}
.sla__bar i{display:block;height:100%;border-radius:inherit;background:var(--sulfur);
  width:calc(var(--sla,0) * 100%);transition:width 1.2s var(--e-out)}
.sla__bar i[data-over]{background:var(--ember)}

/* ═══ MASTHEAD ════════════════════════════════════════════════════════════
   The nav row sits inside a Limestone pill — the signature chrome element. */
.mast{position:sticky;top:0;z-index:100;padding:clamp(.5rem,1.3vw,.85rem) 0}
/* Blur with no tint of its own. A Pumice-tinted scrim laid a pale grey seam
   across the two Obsidian sections; sampling whatever is behind it instead
   means the strip beside the nav pill stays the colour of its own section. */
.mast::before{content:'';position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@supports not (backdrop-filter:blur(2px)){.mast::before{background:var(--pumice)}}
.mast__in{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,.9rem);
  background:var(--limestone);border-radius:var(--r-pill);
  padding:.5rem .6rem .5rem 1.1rem;position:relative}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand svg{width:1.7rem;height:1.7rem;border-radius:8px;flex:none}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.35rem;
  letter-spacing:.03em;line-height:1}
.mast__nav{display:none;align-items:center;gap:9px;margin-left:auto}
.mast__nav a{font-size:.9rem;padding:.4rem .7rem;border-radius:var(--r-pill);
  text-decoration:none;transition:background .16s var(--e-io),color .16s var(--e-io)}
.mast__nav a:hover{background:var(--obsidian);color:var(--chalk)}
@media (min-width:1120px){.mast__nav{display:flex}}
.mast__cta{margin-left:auto}
@media (min-width:1120px){.mast__cta{margin-left:0}}
/* Reading progress runs along the very top of the viewport rather than inside
   the nav pill: at 5% it was a two-centimetre orange dash under the wordmark,
   which read as a mistake rather than as a measure. */
.mast__prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:101;
  background:var(--ember);transform-origin:left;transform:scaleX(var(--doc,0))}

/* ═══ SECTION BANDS ═══════════════════════════════════════════════════════ */
.band-dark{background:var(--obsidian);color:var(--on-dark)}
.band-dark .label{color:var(--on-dark-2)}
.band-dark .lede,.band-dark .body,.band-dark .small{color:var(--on-dark)}
.band-dark .dim{color:var(--on-dark-2)}
.band-dark .card{background:#151413}
.band-dark .tbl th{color:var(--on-dark-3)}
.band-dark .tbl td{border-top-color:var(--dark-line);color:var(--on-dark)}
.band-dark .tbl thead th{border-bottom-color:var(--dark-line)}
.band-dark .tbl thead+tbody tr:first-child td{border-top-color:var(--dark-line)}
.band-round{border-radius:var(--r-card)}

/* ═══ TABS ════════════════════════════════════════════════════════════════ */
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;
  margin-bottom:clamp(1.2rem,2.6vw,1.8rem);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:.6rem 1.15rem;border-radius:var(--r-pill);
  border:var(--hair) solid #07060730;font-size:var(--t-sm);white-space:nowrap;
  transition:background .18s var(--e-io),color .18s var(--e-io),border-color .18s var(--e-io)}
.tab:hover{border-color:var(--obsidian)}
.tab[aria-selected="true"]{background:var(--obsidian);color:var(--chalk);
  border-color:var(--obsidian)}
.tabp{animation:fade .3s var(--e-out)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.tabp{animation:none}}

/* ═══ REVEALS ═════════════════════════════════════════════════════════════ */
.rise,.rise-2{opacity:var(--p,0);
  transform:translate3d(0,calc((1 - var(--p,0)) * 26px),0)}
.rise-2{transform:translate3d(0,calc((1 - var(--p,0)) * 18px),0)}

/* ═══ PINNED SCENES ═══════════════════════════════════════════════════════ */
.pin{position:relative}
.pin__track{height:var(--track,600vh)}
.pin__stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(4.5rem,9vh,7rem) clamp(2rem,5vh,3.5rem);overflow:hidden}
.pin__stage>.wrap{width:100%}

/* ═══ FOOTER ══════════════════════════════════════════════════════════════ */
.foot{background:var(--obsidian);color:var(--on-dark);
  padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem);
  border-radius:var(--r-card) var(--r-card) 0 0;margin-top:clamp(2rem,4vw,3rem)}
.foot .brand b{color:var(--chalk)}
.foot p{color:var(--on-dark-2);font-size:var(--t-sm);line-height:1.6}
.foot .label{color:var(--on-dark-2)}
.foot .label:last-child{color:var(--on-dark-3)}
.foot__note{max-width:90ch;font-size:var(--t-caption);line-height:1.7;
  color:var(--on-dark-3);margin-top:clamp(1.6rem,3vw,2.4rem)}
.foot__note .mono{color:var(--on-dark-2)}

/* The bill of materials, as a Partner Logo Strip: one flat row, dotted
   dividers, no container per item. */
.bom{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.bom li{display:grid;gap:.28rem;padding:1rem 1.2rem 1rem 0;
  border-top:var(--hair) dotted var(--dark-line)}
.bom__id{display:flex;align-items:center;gap:.55rem}
.bom__id svg{width:1.15rem;height:1.15rem;flex:none;color:var(--ember)}
.bom__id b{font-size:.92rem;color:var(--chalk);font-weight:500}
.bom li span{font-size:var(--t-caption);color:var(--on-dark-3);line-height:1.45}

/* ═══ REDUCED MOTION ══════════════════════════════════════════════════════
   The whole story renders statically. Pinned tracks collapse to their stage,
   reveals sit at rest, and app.js stops scrubbing scenes entirely. */
@media (prefers-reduced-motion:reduce){
  .rise,.rise-2{opacity:1;transform:none}
  .pin__track{height:auto}
  .pin__stage{position:static;min-height:0;padding-block:0}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* A file path is not a label to be shouted: uppercasing it misrepresents a
   case-sensitive string. Paths keep their case and take the mono face, which
   is already the system's voice for anything entered or machine-written. */
.label--path{font-family:var(--f-mono);text-transform:none;letter-spacing:-.01em}