/* =============================================================
   Bureau of Patty Statistics
   Visual system: MongoDB (design-md/mongodb/DESIGN.md)
   Section references below cite that document.

   MOBILE-FIRST. Base styles target ~360px phone browsers.
   Enhancements are added upward with min-width only.

   DUAL-MODE (§1, §7 Do): the system's core contrast mechanism is the
   alternation between dark forest sections and light white sections.
   Every section is wrapped in .band--dark or .band--light, which set
   semantic custom properties. Components read only the semantic vars,
   so each works unchanged in either mode. §7 Don't: never mix the two
   treatments inside one section.

   Breakpoints follow §8:
     425px  (26.5625rem)  mobile small -> mobile
     768px  (48rem)       tablet, 2-col grids begin
     1024px (64rem)       desktop
     1280px (80rem)       large desktop

   Contents:
     1.  Raw palette
     2.  Mode bands
     3.  Reset & base
     4.  Layout primitives
     5.  Labels & type helpers
     6.  Masthead + view nav
     7.  Intro block
     8.  Stat strip
     9.  Section headers
     10. Rankings list
     11. Empty state
     12. Buttons & action bar
     13. Form
     14. Tally
     15. Footer
     16. Breakpoints
   ============================================================= */

/* ---------- 1. Raw palette (§2) ---------- */
:root {
  --forest:      #001e2b;   /* never pure black — §7 Don't */
  --teal-deep:   #1c2d38;
  --teal-bd:     #3d4f58;
  --silver:      #b8c4c2;   /* borders on light surfaces */
  --cool:        #8a9ba2;   /* muted text on dark (reference dark preview) */
  --cool-dim:    #5c6c75;   /* §2 Cool Gray — muted text on light */
  --input-tx:    #e8edeb;
  --white:       #ffffff;
  --black:       #000000;

  --green:       #00ed64;   /* accent only, never a background — §7 Don't */
  --green-fn:    #00684a;   /* functional: button fills, borders, light-mode labels */
  --blue:        #006cfa;
  --blue-hover:  #3860be;
  --teal-active: #1eaedb;

  /* §6 Depth — teal-tinted, never neutral gray (§7 Don't) */
  --sh-subtle: rgba(0, 0, 0, .1) 0 2px 4px;
  --sh-card:   rgba(0, 30, 43, .12) 0 3px 9px, rgba(0, 0, 0, .06) 0 1px 3px;
  --sh-forest: rgba(0, 30, 43, .12) 0 26px 44px, rgba(0, 0, 0, .13) 0 7px 13px;

  /* §3 Three-font system. Value Serif and Euclid Circular A are proprietary;
     Newsreader and Jost stand in. Source Code Pro is the real thing. */
  --f-serif: "MongoDB Value Serif", Newsreader, Times, serif;
  --f-sans:  Jost, "Euclid Circular A", "Akzidenz-Grotesk Std", Arial, system-ui, sans-serif;
  --f-mono:  "Source Code Pro", ui-monospace, Menlo, monospace;

  /* §5 Border radius scale */
  --r-input: 4px;
  --r-card:  16px;
  --r-lg:    24px;
  --r-pill:  100px;

  --pad-x: 1.25rem;   /* 20px gutter on small phones */
  --shell: 72rem;
  --tap:   2.75rem;   /* 44px minimum touch target */
}

/* ---------- 2. Mode bands ---------- */
.band { background: var(--bg); color: var(--tx); }

.band--dark {
  --bg:          var(--forest);
  --surface:     var(--teal-deep);
  --bd:          var(--teal-bd);
  --bd-soft:     rgba(255, 255, 255, .07);
  --tx:          var(--white);
  --tx-strong:   var(--white);
  --tx-muted:    var(--cool);
  --tx-faint:    var(--cool-dim);
  --label:       var(--green);
  --figure:      var(--green);
  --card-shadow: var(--sh-subtle);
  --bar-track:   rgba(255, 255, 255, .07);
}

.band--light {
  --bg:          var(--white);
  --surface:     var(--white);
  --bd:          var(--silver);
  --bd-soft:     rgba(0, 30, 43, .08);
  --tx:          var(--black);
  --tx-strong:   var(--forest);
  --tx-muted:    var(--cool-dim);
  --tx-faint:    #7d8b93;
  --label:       var(--green-fn);
  --figure:      var(--green-fn);
  --card-shadow: var(--sh-card);   /* §6: teal-tinted even on white */
  --bar-track:   rgba(0, 30, 43, .09);
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }   /* stop iOS resizing text on rotate */

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--forest);      /* overscroll at either end lands on forest */
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 300;               /* §3: weight 300 is the body voice */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* belt-and-braces: no sideways scroll */
}

h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset, legend { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.band--dark :focus-visible { outline-color: var(--green); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green-fn);
  color: var(--white);
  padding: .75rem 1rem;
  border-radius: 0 0 var(--r-input) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

main { flex: 1 0 auto; }
.view { display: block; }
.view[hidden] { display: none; }

/* §5: compact light sections, generous dark ones. */
.section { padding-block: 1.75rem 2rem; }

/* ---------- 5. Labels & type helpers ---------- */
/* §3: wide-tracked uppercase mono = "database field label". §7 Do: keep the tracking. */
.label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--tx-muted);
}
.label--accent { color: var(--label); }

/* §4 signature: neon green accent underline on a display heading fragment. */
.accent-rule {
  border-bottom: 3px solid var(--green);
  padding-bottom: 2px;
}
.band--light .accent-rule { border-bottom-color: var(--green-fn); }

/* ---------- 6. Masthead + view nav ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--teal-bd);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 3rem;
}

.seal { flex: none; width: 1.375rem; height: 1.375rem; color: var(--green); }
.seal svg { display: block; width: 100%; height: 100%; }

.masthead__id { min-width: 0; display: flex; flex-direction: column; }

.masthead__name {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Redundant with the wordmark on the smallest screens — suppressed there. */
.masthead__form {
  display: none;
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}

.status { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .4rem; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status__text {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
}

/* Two segments. §4: pill geometry, teal surface, teal-gray border. */
.viewnav { padding-bottom: .625rem; }
.viewnav__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .125rem;
  background: var(--teal-deep);
  border: 1px solid var(--teal-bd);
  border-radius: var(--r-pill);
  padding: .25rem;
}
.viewnav__btn {
  position: relative;
  min-height: var(--tap);
  padding: .5rem .25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--cool);
  font-size: .8125rem;      /* four cells must fit a 360px viewport */
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}

/* Count of specimens awaiting the signed-in auditor. */
.viewnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  margin-left: .25rem;
  padding: 0 .25rem;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #00231a;
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  vertical-align: middle;
}
.viewnav__btn[aria-selected="true"] {
  background: var(--forest);
  border-color: var(--green-fn);
  color: var(--green);
}

/* ---------- 7. Intro block ---------- */
/* §5: dark sections breathe. Still restrained on phones so the register
   stays close to the top of the first screen. */
.intro { padding-block: 1.75rem 2rem; }
.intro--compact { padding-block: 1.75rem; }

.intro__title {
  font-family: var(--f-serif);      /* §3 Display Hero — serif for authority */
  font-weight: 400;
  font-size: 1.875rem;              /* 30px: readable, not viewport-eating */
  line-height: 1.15;
  margin-top: .625rem;
  text-wrap: balance;
}

.intro__sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--input-tx);
  margin-top: .75rem;
}

/* Supporting prose — decorative relative to the rankings, so it waits for width. */
.intro__note { display: none; }

/* ---------- 8. Stat strip ---------- */
/* §4 Cards: surface + 1px border, 16px radius. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.5rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: .625rem .5rem;
  text-align: center;
  min-width: 0;
}
.stat__label {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
  line-height: 1.4;
}
.stat__value {
  font-family: var(--f-serif);       /* display numeral, not body text */
  font-size: 1.5rem;
  line-height: 1.1;
  margin-top: .25rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 9. Section headers ---------- */
.section__head { margin-bottom: 1.125rem; }
.section__title {
  font-size: 1.5rem;                 /* §3 Section Heading: sans, weight 500 */
  font-weight: 500;
  line-height: 1.25;
  margin-top: .375rem;
  color: var(--tx-strong);
}
.section__meta {
  font-size: .875rem;
  font-weight: 300;
  color: var(--tx-muted);
  margin-top: .25rem;
}

/* ---------- 10. Rankings list ---------- */
.rankings { display: grid; gap: .625rem; }

.ranking {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms;
}

/* The whole header is the touch target. Four fixed slots, and the text
   block is nested so it wraps as a unit at narrow widths. */
.ranking__btn {
  width: 100%;
  min-height: var(--tap);
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto 1rem;
  gap: .75rem;
  align-items: center;
  padding: .875rem .875rem .875rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.ranking__rank {
  font-family: var(--f-serif);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--figure);
  font-variant-numeric: tabular-nums;
}

.ranking__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.ranking__text { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }

.ranking__name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tx-strong);
  overflow-wrap: anywhere;
}

.ranking__origin {
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--tx-muted);
  overflow-wrap: anywhere;
}

/* CPI is the number people scan for — serif, large, right-aligned. */
.ranking__score {
  font-family: var(--f-serif);
  font-size: 1.625rem;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tx-strong);
  white-space: nowrap;
}
.ranking__score small {
  display: block;
  font-family: var(--f-mono);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--tx-faint);
  margin-top: .25rem;
}

/* Secondary metadata: present, deliberately quiet. */
.ranking__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.ranking__file {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}

.tag {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .1875rem .5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--bd);
  color: var(--tx-muted);
  white-space: nowrap;
}
.band--dark .tag--certified   { color: var(--green); border-color: var(--green-fn); background: rgba(0,237,100,.08); }
.band--dark .tag--provisional { color: #66a3ff;      border-color: #0b4a8f;         background: rgba(0,108,250,.1); }
.band--dark .tag--review      { color: #7fd4ee;      border-color: #1a6a83;         background: rgba(30,174,219,.1); }
.band--dark .tag--disputed    { color: var(--silver);border-color: var(--teal-bd);  background: rgba(184,196,194,.06); }

.band--light .tag--certified   { color: var(--green-fn); border-color: var(--green-fn); background: rgba(0,237,100,.14); }
.band--light .tag--provisional { color: var(--blue);     border-color: #9dc2fb;         background: rgba(0,108,250,.08); }
.band--light .tag--review      { color: #17667e;         border-color: #a5d8e8;         background: rgba(30,174,219,.12); }
.band--light .tag--disputed    { color: var(--cool-dim); border-color: var(--silver);   background: #f4f6f6; }

.ranking__chev {
  width: 1rem; height: 1rem;
  color: var(--tx-muted);
}

/* ---------- 11. Empty state ---------- */
.empty {
  border: 1px dashed var(--bd);
  border-radius: var(--r-card);
  padding: 2rem 1.25rem;
  text-align: center;
}
.empty__stamp {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--label);
  border: 1px solid currentColor;
  border-radius: var(--r-input);
  padding: .25rem .625rem;
  transform: rotate(-2deg);
}
.empty__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-top: 1rem;
  color: var(--tx-strong);
}
.empty__text {
  font-size: .875rem;
  font-weight: 300;
  color: var(--tx-muted);
  margin-top: .5rem;
}

/* ---------- 12. Buttons & action bar ---------- */
/* §4 Primary Green + §7 Do: pill radius on primary actions. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: .75rem 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms, transform 150ms, color 150ms;
}
.btn--primary {
  background: var(--green-fn);
  border-color: var(--green-fn);
  color: var(--white);
  box-shadow: rgba(0,0,0,.06) 0 1px 6px;
}
.btn--primary:hover:not(:disabled) { background: var(--teal-active); border-color: var(--teal-active); }
.btn--primary:active:not(:disabled) { transform: scale(.98); }
.btn--primary:disabled {
  background: transparent;
  border-color: var(--bd);
  color: var(--tx-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.btn--block { width: 100%; }

/* Sticky so the primary action stays in thumb reach while scrolling a long
   register. Not a native tab bar — one action, and it scrolls with the page. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, var(--bg) 45%);
}

/* ---------- 13. Form ---------- */
.form { display: grid; gap: 1.5rem; }

.field { display: grid; gap: .5rem; }
.field__label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-muted);
  padding: 0;
}

/* §4 Inputs: 4px radius, silver-teal border. 1rem font-size is required —
   anything under 16px makes iOS Safari zoom the viewport on focus. */
.input {
  width: 100%;
  min-height: var(--tap);
  background: var(--surface);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r-input);
  padding: .625rem .75rem;
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.input::placeholder { color: var(--tx-faint); }
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0,108,250,.2);
}

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.segmented__btn {
  min-height: var(--tap);
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  color: var(--tx-muted);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}
.segmented__btn.is-selected {
  color: var(--green-fn);
  border-color: var(--green-fn);
  background: rgba(0,237,100,.12);
}

/* ---- Scoring control ----
   A range input for coarse travel plus +/- steppers for exact tenths.
   Rationale: dragging is fast and needs no keyboard (so iOS never zooms),
   while the steppers guarantee every tenth — including exactly 0.0 and
   10.0 — is reachable without pixel-accurate dragging on a phone. */
.score {
  --pct: 50%;
  padding: .875rem 0;
  border-top: 1px solid var(--bd-soft);
}
.score:first-child { border-top: 0; }

.score__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}
.score__labelwrap { display: flex; align-items: baseline; gap: .5rem; min-width: 0; flex-wrap: wrap; }
.score__label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
/* The weight is visible so the examiner knows what actually moves the index. */
.score__weight {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--tx-faint);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  padding: .0625rem .375rem;
}
.score__value {
  font-family: var(--f-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--green-fn);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.score.is-unset .score__value { color: var(--tx-faint); }

.score__controls {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  gap: .5rem;
  align-items: center;
}

.score__step {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 50%;
  color: var(--tx-strong);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.score__step:hover { border-color: var(--green-fn); }
.score__step:active { transform: scale(.92); background: rgba(0,237,100,.12); }

/* Track fill is driven by --pct, set on .score from JS. */
.score__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap);          /* full-height hit area for thumbs */
  background: transparent;
  cursor: pointer;
  touch-action: none;          /* dragging must not scroll the page */
}
.score__slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--green-fn) var(--pct), var(--bar-track) var(--pct));
}
.score__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green-fn);
  box-shadow: rgba(0, 30, 43, .2) 0 2px 6px;
}
.score__slider::-moz-range-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bar-track);
}
.score__slider::-moz-range-progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--green-fn);
}
.score__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green-fn);
}

/* Unscored categories read as genuinely empty, not as a zero. */
.score.is-unset .score__slider::-webkit-slider-runnable-track { background: var(--bar-track); }
.score.is-unset .score__slider::-webkit-slider-thumb { border-color: var(--bd); }
.score.is-unset .score__slider::-moz-range-progress { background: transparent; }
.score.is-unset .score__slider::-moz-range-thumb { border-color: var(--bd); }

/* Only after a failed submit. */
.score.is-missing .score__label { color: #b3261e; }
.score.is-missing .score__value { color: #b3261e; }

/* ---- Examiner sections ---- */
.examiner {
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.125rem 1.25rem;
  margin-bottom: 1.25rem;
}
.examiner.is-incomplete { border-color: #e3b7b3; }

.examiner__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--bd);
}
.examiner__name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  margin-top: .25rem;
  color: var(--tx-strong);
}
.examiner__scorewrap { text-align: right; flex: none; }
.examiner__scorelabel {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.examiner__score {
  font-family: var(--f-serif);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tx-strong);
}
.examiner__progress {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .625rem;
}
.score-list { margin-top: .25rem; }

/* ---- Inline field validation ---- */
.field__error {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b3261e;
}
.input.is-invalid { border-color: #b3261e; }

/* ---------- 14. Tally ---------- */
.tally {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  padding: 1rem;
}
.tally__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.tally__label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
.tally__value {
  font-family: var(--f-serif);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tx-strong);
}
.tally__hint {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .5rem;
}

.form__note {
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tx-faint);
  text-align: center;
}

/* ---------- 15. Footer ---------- */
.footer {
  flex: none;
  border-top: 1px solid var(--teal-bd);
  padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
}
.footer__line { font-size: .8125rem; font-weight: 300; color: var(--tx-muted); }
.footer__line--mono {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .5rem;
}

/* ---------- 15b. Evaluation Record ---------- */
.record__head { padding-block: 1rem 2rem; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--tap);
  padding: 0 .75rem 0 .5rem;
  margin-left: -.5rem;
  background: none;
  border: 0;
  color: var(--green);
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.backlink svg { width: 1rem; height: 1rem; }

.record__burger {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.15;
  margin-top: .5rem;
  text-wrap: balance;
}
.record__restaurant {
  font-size: 1rem;
  font-weight: 300;
  color: var(--tx-muted);
  margin-top: .375rem;
}

.record__figures {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  margin-top: 1.5rem;
}
.figure {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: .75rem 1rem;
  min-width: 0;
}
.figure__label {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
.figure__value {
  font-family: var(--f-serif);
  font-size: 2rem;
  line-height: 1.1;
  margin-top: .25rem;
  font-variant-numeric: tabular-nums;
}
.figure--wide .figure__value { color: var(--green); }

.section__head--spaced { margin-top: 2.5rem; }

/* Per-examiner record card */
.exrec {
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.125rem 1.125rem;
  margin-bottom: 1rem;
}
.exrec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--bd);
  margin-bottom: .25rem;
}
.exrec__name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--tx-strong);
}
.exrec__weighted { text-align: right; flex: none; }
.exrec__weightedlabel {
  display: block;
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.exrec__weightedvalue {
  font-family: var(--f-serif);
  font-size: 1.625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--green-fn);
}

/* Category rows, shared by examiner scores and combined findings. */
.catlist { display: grid; gap: .5rem; }
.catlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  gap: .25rem .75rem;
  align-items: center;
  padding-top: .5rem;
}
.catlist__label {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.catlist__weight {
  font-size: .5rem;
  letter-spacing: 1px;
  color: var(--tx-faint);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  padding: 0 .3125rem;
}
.catlist__bar {
  grid-column: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bar-track);
  overflow: hidden;
}
.catlist__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--green-fn);
}
.catlist__val {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--f-serif);
  font-size: 1.25rem;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tx-strong);
}
.catlist--findings .catlist__fill { background: var(--teal-active); }

/* Secondary action */
.btn--outline {
  background: transparent;
  border-color: var(--bd);
  color: var(--tx-strong);
}
.btn--outline:hover { border-color: var(--green-fn); color: var(--green-fn); }

/* The record already has a back link in its header, so a sticky duplicate
   would cover content for no gain. It sits at the end of the page instead. */
#view-record .actionbar {
  position: static;
  background: none;
  padding: 1.5rem 0 2.5rem;
}

/* Newly filed specimen, briefly */
.ranking.is-new {
  border-color: var(--green-fn);
  box-shadow: 0 0 0 3px rgba(0, 237, 100, .18), var(--card-shadow);
}

/* =============================================================
   16. Breakpoints — additive only (§8)
   ============================================================= */

/* --- 425px: mobile small -> mobile --- */
@media (min-width: 26.5625rem) {
  :root { --pad-x: 1.5rem; }

  .masthead__form { display: block; }
  .intro__title   { font-size: 2.125rem; }
  .stat__value    { font-size: 1.75rem; }
  .ranking__score { font-size: 2rem; }
}

/* --- 768px: tablet. Two columns begin (§8). --- */
@media (min-width: 48rem) {
  :root { --pad-x: 2rem; }

  /* A two-item control has no business spanning a wide viewport. */
  .viewnav__track { max-width: 32rem; }
  .viewnav__btn { font-size: .875rem; padding: .5rem .75rem; }

  /* §5: generous dark sections. */
  .intro { padding-block: 4rem 3rem; }
  .intro--compact { padding-block: 3rem; }
  .intro__title { font-size: 3.25rem; line-height: 1.1; }
  .intro__sub   { font-size: 1.25rem; margin-top: 1rem; }

  /* Supporting prose earns its place once there's room for it. */
  .intro__note {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--tx-muted);
    margin-top: 1rem;
    max-width: 34rem;
  }

  .stats { gap: .75rem; margin-top: 2rem; }
  .stat  { padding: 1rem; }
  .stat__label { font-size: .625rem; letter-spacing: 2px; }
  .stat__value { font-size: 2.125rem; }

  .section { padding-block: 3rem; }
  .section__title { font-size: 2.25rem; line-height: 1.33; }

  /* Rank + identity + metadata on one line; score anchored right. */
  .ranking__btn {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1rem;
    gap: 1.25rem;
    padding: 1.125rem 1.25rem 1.125rem 1.5rem;
  }
  .ranking__rank   { font-size: 1.625rem; }
  .ranking__name   { font-size: 1.1875rem; }
  .ranking__origin { font-size: .875rem; }
  .ranking__score  { font-size: 2.25rem; }

  /* Identity left, metadata right, on one line. */
  .ranking__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .ranking__meta { flex: none; }

  /* Enough room to sit inline — no need to pin it to the thumb zone. */
  .actionbar {
    position: static;
    background: none;
    padding: 0 0 3rem;
  }
  .btn--block { width: auto; min-width: 16rem; }

  /* Two columns of categories, and the form stops stretching to full width. */
  .form { max-width: 46rem; }
  .score-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
  .score-list .score:nth-child(2) { border-top: 0; }
  .form__note { text-align: left; }

  .examiner { padding: 1.25rem 1.5rem 1.5rem; }
  .record__head { padding-block: 1.25rem 3rem; }
  .record__burger { font-size: 3rem; }
  .record__figures { grid-template-columns: auto auto; justify-content: start; gap: .75rem; }
  .figure { padding: 1rem 1.75rem; }
  .figure__value { font-size: 2.5rem; }
  #record-examiners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .exrec { margin-bottom: 0; }
  .catlist--findings { grid-template-columns: repeat(2, 1fr); gap: .5rem 2rem; }
}

/* --- 1024px: desktop. Use the width without letting text sprawl. --- */
@media (min-width: 64rem) {
  .intro { padding-block: 5rem 3.5rem; }
  .intro__title { font-size: 4rem; }

  .rankings { gap: .75rem; }
  .ranking__btn { grid-template-columns: 3rem minmax(0, 1fr) auto 1rem; }

  .form { max-width: 52rem; }
  .record__burger { font-size: 3.5rem; }
  .catlist--findings { grid-template-columns: repeat(3, 1fr); }
}

/* --- 1280px: large desktop (§8) --- */
@media (min-width: 80rem) {
  .intro__title { font-size: 4.5rem; }
  .section__title { font-size: 2.5rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   17. PHASE 3 — auth, pending, findings, oversight
   ============================================================= */

/* ---------- Credential check ---------- */
.auth { padding-block: 3rem 3.5rem; text-align: left; }
.seal--lg { width: 2.5rem; height: 2.5rem; display: block; margin-bottom: 1.25rem; }
.auth__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.15;
  margin-top: .625rem;
}
.auth__sub { font-size: 1.0625rem; color: var(--input-tx); margin-top: .75rem; }
.auth__note { font-size: .9375rem; color: var(--tx-muted); margin-top: 1rem; max-width: 30rem; }
.form--auth { gap: 1.25rem; }

/* ---------- Auditor identity chip ---------- */
.authchip {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 1px solid var(--teal-bd);
  border-radius: var(--r-pill);
  padding: .25rem .625rem;
  background: var(--teal-deep);
}
.authchip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.authchip__label {
  display: none;
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cool-dim);
}
.authchip__name {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}

/* ---------- Row action bar (peer review shortcut) ---------- */
.ranking__action {
  border-top: 1px solid var(--bd-soft);
  padding: .625rem .875rem .875rem;
}
.btn--small {
  min-height: var(--tap);
  padding: .5rem 1.125rem;
  font-size: .875rem;
  letter-spacing: .4px;
  width: 100%;
}

/* ---------- Duplicate-specimen guard ---------- */
.dupwarn {
  border: 1px solid #d9a441;
  background: rgba(217, 164, 65, .08);
  border-radius: var(--r-card);
  padding: .875rem 1rem 1rem;
  display: grid;
  gap: .5rem;
}
.dupwarn__title {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a6414;
}
.dupwarn__text { font-size: .875rem; line-height: 1.5; color: var(--tx-strong); }

/* ---------- Fixed specimen header while reviewing ---------- */
.reviewhead {
  border: 1px solid var(--bd);
  border-left: 3px solid var(--green-fn);
  border-radius: var(--r-card);
  padding: 1rem 1.125rem;
  background: var(--surface);
}
.reviewhead__burger {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  line-height: 1.15;
  margin-top: .375rem;
  color: var(--tx-strong);
}
.reviewhead__restaurant { font-size: .9375rem; color: var(--tx-muted); margin-top: .125rem; }
.reviewhead__note { font-size: .8125rem; line-height: 1.5; color: var(--tx-muted); margin-top: .625rem; }

.eval__divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 0 .5rem;
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.eval__divider::before, .eval__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* ---------- Record extras ---------- */
.record__meta {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .75rem;
}
.record__await {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tx-muted);
  margin-top: 1.25rem;
  max-width: 34rem;
}
#record-cta { margin-top: 1.5rem; }
.exrec--missing { border-style: dashed; }
.exrec__missing {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--tx-muted);
  margin: .75rem 0 1rem;
}
.exrec__filed {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .875rem;
}
.exrec .btn--small { margin-top: .875rem; }

/* ---------- Oversight: four-tile summary ---------- */
.stats--four { grid-template-columns: repeat(2, 1fr); }

/* ---------- Personnel key/value ---------- */
.kv { display: grid; gap: 0; margin-top: .25rem; }
.kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-top: 1px solid var(--bd-soft);
}
.kv__key {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
.kv__val {
  font-size: .9375rem;
  font-weight: 400;
  color: var(--tx-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Findings ----------
   The rotating written notices are the centrepiece of the page. */
#findings-list { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.finding {
  border: 1px solid var(--bd);
  border-left: 3px solid var(--green-fn);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.125rem 1.125rem;
  position: relative;
}
.finding__title {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green-fn);
  padding-right: 5rem;
}
.finding__body {
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tx-strong);
  margin-top: .5rem;
  text-wrap: pretty;
}
.finding__flag {
  position: absolute;
  top: .875rem;
  right: 1rem;
  font-family: var(--f-mono);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  padding: .125rem .5rem;
}
.finding--rare { border-left-color: var(--teal-active); }
.finding--rare .finding__title { color: #17667e; }
.finding--legendary { border-left-color: #b8860b; }
.finding--legendary .finding__title { color: #8a6414; }
.finding--legendary .finding__flag { border-color: #d9a441; color: #8a6414; }

/* ---------- Ranking disputes ---------- */
.disputes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.disputes__col {
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: .875rem 1rem 1rem;
  background: var(--surface);
  min-width: 0;
}
.disputes__title {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: .5rem;
}
.disputes__list { display: grid; gap: .375rem; }
.disputes__item {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  min-width: 0;
}
.disputes__rank {
  font-family: var(--f-serif);
  font-size: 1rem;
  color: var(--figure);
  flex: none;
  width: 1rem;
  font-variant-numeric: tabular-nums;
}
.disputes__name {
  font-size: .875rem;
  color: var(--tx-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Category differentials ---------- */
.diffs { display: grid; gap: 1rem; }
.diff {
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: .875rem 1rem 1rem;
  background: var(--surface);
}
.diff__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}
.diff__label {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
.diff__delta {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  color: var(--tx-strong);
  font-variant-numeric: tabular-nums;
}
.diff__bars { display: grid; gap: .375rem; }
.diff__line { display: grid; grid-template-columns: 3rem 1fr 2.25rem; gap: .625rem; align-items: center; }
.diff__who {
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tx-muted);
}
.diff__track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bar-track);
  overflow: hidden;
}
.diff__fill { display: block; height: 100%; border-radius: var(--r-pill); }
.diff__fill--ryan { background: var(--green-fn); }
.diff__fill--devin { background: var(--teal-active); }
.diff__num {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 600;
  text-align: right;
  color: var(--tx-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer session + toast ---------- */
.footer__session {
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--teal-bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.linkbtn {
  background: none;
  border: 0;
  padding: .5rem 0;
  min-height: var(--tap);
  color: var(--green);
  font-family: var(--f-mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 2rem);
  background: var(--forest);
  color: var(--white);
  border: 1px solid var(--green-fn);
  border-radius: var(--r-pill);
  padding: .75rem 1.25rem;
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: rgba(0, 30, 43, .4) 0 8px 24px;
}

/* ---------- Breakpoints for the new blocks ---------- */
@media (min-width: 26.5625rem) {
  .authchip__label { display: inline; }
}

@media (min-width: 48rem) {
  .auth { padding-block: 4.5rem 4rem; }
  .auth__title { font-size: 3rem; }
  .form--auth { max-width: 26rem; }
  .stats--four { grid-template-columns: repeat(4, 1fr); }
  .disputes { grid-template-columns: repeat(3, 1fr); }
  .diffs { grid-template-columns: repeat(2, 1fr); }
  #findings-list { grid-template-columns: repeat(2, 1fr); }
  #personnel-files { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  #personnel-files .exrec { margin-bottom: 0; }
  .btn--small { width: auto; }
  .ranking__action { display: flex; justify-content: flex-end; }
}

@media (min-width: 64rem) {
  #findings-list { grid-template-columns: repeat(3, 1fr); }
  .diffs { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   18. Bureau event theater
   ============================================================= */
#bureau-event-stage { padding-block: 1rem 0; }
#bureau-event-stage[hidden] { display: none; }

.bps-event-shell {
  position: relative;
  color: var(--forest);
  isolation: isolate;
}
.bps-event {
  --event-ink: var(--forest);
  --event-paper: #f4f0e6;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--event-ink);
  background: var(--event-paper);
  color: var(--event-ink);
  box-shadow: rgba(0, 30, 43, .22) 0 12px 32px;
  padding: 1.125rem;
}
.bps-event__head { position: relative; z-index: 2; max-width: 46rem; }
.bps-event__code {
  font: 600 .625rem/1.4 var(--f-mono);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  opacity: .68;
}
.bps-event__title {
  margin-top: .45rem;
  font: 500 clamp(1.55rem, 8vw, 3rem)/1 var(--f-serif);
  text-wrap: balance;
}
.bps-event__lead { margin-top: .75rem; max-width: 42rem; font-size: .9375rem; line-height: 1.55; }
.bps-event__aside { margin-top: 1rem; font: 500 .7rem/1.5 var(--f-mono); letter-spacing: .4px; }
.bps-event__dismiss,
.bps-continuing__open {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: var(--tap);
  margin-top: 1.125rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: .625rem 1rem;
  background: var(--event-ink, var(--forest));
  color: var(--event-paper, var(--white));
  font: 600 .6875rem/1.2 var(--f-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.bps-continuing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid #9b2c2c;
  border-top: 5px solid #9b2c2c;
  background: #fff9f2;
  padding: .625rem .75rem;
}
.bps-continuing__code { font: 600 .625rem/1.4 var(--f-mono); letter-spacing: 1px; color: #751d1d; }
.bps-continuing__open { width: auto; flex: none; margin: 0; background: #751d1d; color: white; }

.bps-meter { margin-top: 1rem; border: 1px solid currentColor; padding: .625rem; }
.bps-meter__head { display: flex; justify-content: space-between; gap: 1rem; font: 600 .625rem var(--f-mono); text-transform: uppercase; }
.bps-meter__track { height: .75rem; margin-top: .5rem; background: rgba(0, 0, 0, .12); overflow: hidden; }
.bps-meter__fill { height: 100%; background: currentColor; transform-origin: left; animation: bps-meter-in .8s ease-out both; }

/* 01 */
.bps-event--d01 { background: #edf7f4; border-color: #00684a; }
.bps-mirror { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 1rem; position: relative; }
.bps-mirror::after { content: ""; position: absolute; inset: 0 50%; border-left: 3px double #00684a; }
.bps-mirror__file { min-width: 0; border: 1px solid #00684a; background: white; padding: .75rem; text-align: center; }
.bps-mirror__name, .bps-mirror__note { font: 600 .55rem var(--f-mono); letter-spacing: 1px; }
.bps-mirror__score { margin: .625rem 0; color: #00684a; white-space: nowrap; overflow: hidden; }

/* 02 */
.bps-event-shell--d02,
.bps-event-shell--d10,
.bps-event-shell--d11,
.bps-event-shell--d16 {
  position: fixed;
  z-index: 18;
  top: 6.4rem;
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .42));
}
.bps-event-shell--d02 .bps-event,
.bps-event-shell--d10 .bps-event,
.bps-event-shell--d11 .bps-event,
.bps-event-shell--d16 .bps-event { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.bps-event--d02 { --event-ink: #7f1018; --event-paper: #fff4e8; border-width: 5px; }
.bps-fault { display: grid; grid-template-columns: 1fr 2.25rem 1fr; align-items: stretch; margin-top: 1.25rem; }
.bps-fault__side { border: 1px solid currentColor; padding: 1rem .5rem; text-align: center; font: 600 .55rem var(--f-mono); }
.bps-fault__side strong { display: block; margin-top: .5rem; font-size: 2rem; }
.bps-fault__crack { display: grid; place-items: center; font-size: 1.4rem; animation: bps-fault .42s ease-in-out 2; }
.bps-crisis--d02 #view-insights { animation: bps-office-shake .38s linear 1; }

/* 03 */
.bps-event--d03 { --event-ink: #192a5e; --event-paper: #eef0fb; border-style: double; border-width: 5px; }
.bps-opposition { margin-top: 1rem; border-block: 1px solid; padding: .75rem; text-align: center; font: 600 clamp(.75rem, 4vw, 1.15rem) var(--f-mono); }
.bps-opposition__cross { color: #b3262d; font-size: 1.5rem; letter-spacing: 1rem; }

/* 04 */
.bps-event--d04 { --event-ink: #3a174d; --event-paper: #faf3ff; border-radius: 50% 50% 1rem 1rem / 1.5rem 1.5rem 1rem 1rem; text-align: center; }
.bps-event--d04 .bps-event__head { margin-inline: auto; }
.bps-choir { margin-top: 1rem; padding: 1rem; background: white; border: 1px solid #82569a; }
.bps-choir strong { display: block; color: #6a2785; font: 600 1rem var(--f-mono); }
.bps-choir__staff { letter-spacing: .25rem; color: #82569a; }

/* 05 */
.bps-event--d05 { --event-ink: #59472b; --event-paper: #efe6cf; border-left-width: 10px; }
.bps-stack { height: 8rem; margin: 1rem auto 0; max-width: 19rem; position: relative; }
.bps-stack__sheet { position: absolute; inset: calc(var(--i, 0) * 2px); border: 1px solid #806c49; background: #fffdf6; padding: .75rem; font: 600 .65rem var(--f-mono); box-shadow: 2px 2px #b8a782; }
.bps-stack__sheet:nth-child(1) { transform: rotate(-2deg); z-index: 7; font-size: 1.3rem; }
.bps-stack__sheet:nth-child(2) { transform: translate(3px, 5px) rotate(1deg); z-index: 6; }
.bps-stack__sheet:nth-child(3) { transform: translate(-3px, 10px) rotate(-1deg); z-index: 5; }
.bps-stack__sheet:nth-child(n+4) { transform: translate(2px, 14px); }

/* 06 */
.bps-event--d06 { --event-ink: #273744; --event-paper: #e9eef0; }
.bps-office { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: 1rem; }
.bps-office__desk { border: 2px solid; padding: .75rem .25rem; text-align: center; font: 600 .55rem var(--f-mono); }
.bps-office__desk--vacant { border-style: dashed; opacity: .5; }
.bps-office__worker { font-size: 2rem; }
.bps-office__hall { color: #9b2c2c; font-family: var(--f-mono); writing-mode: vertical-rl; }

/* 07 */
.bps-event--d07 { --event-ink: #0b4039; --event-paper: #e9fff9; border-radius: 0; }
.bps-flatline { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; margin-top: 1.5rem; font: 600 .55rem var(--f-mono); }
.bps-flatline__trace { height: 5rem; position: relative; overflow: hidden; border-block: 1px dotted; background: repeating-linear-gradient(90deg, transparent 0 1.4rem, rgba(0,104,74,.12) 1.4rem calc(1.4rem + 1px)); }
.bps-flatline__trace::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; border-top: 3px solid #00a965; animation: bps-trace 1.8s linear both; }

/* 08 */
.bps-event--d08 { --event-ink: #1d1d1d; --event-paper: #ffe84b; border-width: 0; padding-inline: 0; }
.bps-event--d08 .bps-event__head, .bps-event--d08 .bps-event__dismiss { width: calc(100% - 2rem); margin-inline: 1rem; }
.bps-zone { margin-top: 1rem; padding: 1rem; background: #fff; }
.bps-zone__tape { margin-inline: -1rem; padding: .4rem 1rem; overflow: hidden; background: repeating-linear-gradient(135deg,#161616 0 12px,#ffe84b 12px 24px); color: white; font: 600 .55rem var(--f-mono); letter-spacing: 1px; text-shadow: 0 1px #000; white-space: nowrap; }
.bps-zone__name { display: block; margin: 1rem 0; font: 600 1.25rem/1.1 var(--f-mono); }

/* 09 */
.bps-event--d09 { --event-ink: #3e3127; --event-paper: #f2ece5; border-bottom-width: 12px; }
.bps-dept { margin: 1rem auto 0; max-width: 24rem; text-align: center; }
.bps-dept__roof { border-bottom: 6px double; padding: .5rem; font: 600 .65rem var(--f-mono); }
.bps-dept__collapse { font-size: 3rem; letter-spacing: -.8rem; transform: skew(-8deg); animation: bps-collapse .8s ease-out both; }
.bps-dept__status { font: 600 .6rem var(--f-mono); color: #8b221e; }

/* 10 */
.bps-event--d10 { --event-ink: #563c00; --event-paper: #fff8cc; border: 8px double #b8860b; text-align: center; }
.bps-event--d10 .bps-event__head { margin-inline: auto; }
.bps-medal { margin: 1rem auto; text-align: center; }
.bps-medal__rays { color: #b8860b; font-size: 2rem; letter-spacing: 1rem; animation: bps-rays 3s linear infinite; }
.bps-medal__seal { display: grid; place-items: center; width: 8rem; height: 8rem; margin: .5rem auto; border: 10px double #b8860b; border-radius: 50%; background: #fffdf0; font: 500 3rem var(--f-serif); box-shadow: 0 0 0 .75rem rgba(184,134,11,.12); }
.bps-medal__ribbon { display: inline-block; background: #7a1e22; color: white; padding: .5rem 1rem; clip-path: polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%); font: 600 .55rem var(--f-mono); }

/* 11 */
.bps-event--d11 { --event-ink: #e9e9e9; --event-paper: #111; border: 1px solid #5b5b5b; text-align: center; }
.bps-event--d11 .bps-event__head { margin-inline: auto; }
.bps-memorial { margin: 1.25rem auto; border-block: 1px solid #777; padding: 1.25rem; }
.bps-memorial__flag { width: 4rem; margin: auto; border-bottom: 2rem solid #222; border-right: 1.25rem solid transparent; color: transparent; transform: rotate(-5deg); }
.bps-memorial__number { font: 400 2.5rem var(--f-serif); margin-top: .75rem; }
.bps-memorial__line, .bps-memorial__dates { font: 600 .55rem var(--f-mono); letter-spacing: 2px; }

/* 12 */
.bps-event--d12 { --event-ink: #4d1f16; --event-paper: #fffaf0; border: 6px ridge #9d7d52; }
.bps-table { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: .5rem; align-items: center; margin-top: 1rem; }
.bps-table__seat { border: 1px dashed; padding: 1rem .25rem; text-align: center; font: 600 .55rem var(--f-mono); }
.bps-table__minutes { background: white; box-shadow: 2px 3px #ab9b83; padding: .75rem .25rem; text-align: center; font: 600 .5rem var(--f-mono); transform: rotate(-1deg); }
.bps-table__zero { font: 400 2.5rem var(--f-serif); }

/* 13 */
.bps-event--d13 { --event-ink: #f2f7f6; --event-paper: #07352e; border-color: #00ed64; text-align: center; }
.bps-event--d13 .bps-event__head { margin-inline: auto; }
.bps-podium { margin: 1rem auto 0; max-width: 22rem; border-inline: 3rem solid transparent; border-bottom: 8rem solid #0b2927; height: 0; position: relative; }
.bps-podium > * { position: relative; width: 16rem; max-width: 70vw; left: 50%; transform: translateX(-50%); }
.bps-podium__banner { top: .6rem; font: 600 .55rem var(--f-mono); color: #00ed64; }
.bps-podium__seal { top: 1.1rem; font: 500 2rem var(--f-serif); }
.bps-podium__name { top: 1.2rem; font: 600 .65rem var(--f-mono); }
.bps-podium__term { top: 1.4rem; font-size: .65rem; color: #a8c4bf; }

/* 14 */
.bps-event--d14 { --event-ink: #092d3c; --event-paper: #e8f7ff; font-family: var(--f-mono); }
.bps-calibration { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-top: 1rem; border: 1px solid; padding: .75rem; background: linear-gradient(rgba(0,108,250,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,108,250,.08) 1px,transparent 1px); background-size: 16px 16px; }
.bps-calibration span { display: grid; place-items: center; height: 2rem; border: 1px solid #6aa2bd; animation: bps-calibrate 1.4s ease-in-out infinite alternate; }

/* 15 */
.bps-event--d15 { --event-ink: #572516; --event-paper: #fff9e9; transform-origin: center; animation: bps-office-shake .5s linear 1; }
.bps-seismo { margin-top: 1rem; overflow: hidden; border: 1px solid; background: repeating-linear-gradient(0deg,transparent 0 15px,rgba(135,66,34,.12) 15px 16px); }
.bps-seismo__paper { min-width: 34rem; padding: 1rem; color: #b13525; font: 600 2.4rem/1 var(--f-mono); letter-spacing: -.5rem; animation: bps-seismo 2.8s linear infinite; }
.bps-seismo__count { padding: .5rem; border-top: 1px solid; font: 600 .6rem var(--f-mono); }

/* 16 */
.bps-event--d16 { --event-ink: #e4ffff; --event-paper: #051c29; border: 3px solid #1eaedb; text-align: center; }
.bps-event--d16 .bps-event__head { margin-inline: auto; }
.bps-compass { margin: 1rem auto; width: min(18rem, 100%); aspect-ratio: 1; border: 2px solid #1eaedb; border-radius: 50%; display: grid; place-content: center; box-shadow: inset 0 0 2rem rgba(30,174,219,.25); }
.bps-compass__dial { font: 500 2rem var(--f-mono); color: #00ed64; animation: bps-compass 2.5s ease-in-out infinite alternate; }
.bps-compass__n, .bps-compass__s, .bps-compass__readout { font: 600 .6rem var(--f-mono); letter-spacing: 1px; }

/* 17 */
.bps-event--d17 { --event-ink: #55220c; --event-paper: #fff0d4; border: 0; outline: 2px solid #d84c18; outline-offset: -6px; text-align: center; }
.bps-quarantine { margin-top: 1rem; }
.bps-quarantine__tape { background: #d84c18; color: white; padding: .45rem; font: 600 .55rem var(--f-mono); letter-spacing: 2px; transform: rotate(-1deg); }
.bps-quarantine__door { margin: .75rem auto .25rem; font-size: 5rem; line-height: 1; filter: drop-shadow(5px 5px #d2a166); }
.bps-quarantine__label { font: 600 .7rem var(--f-mono); margin-bottom: .75rem; }

/* 18 */
.bps-event--d18 { --event-ink: #14275a; --event-paper: #f3f5fa; border-top-width: 12px; }
.bps-tribunal { margin-top: 1rem; display: grid; gap: .5rem; border-left: 4px solid #b3262d; padding: .75rem 1rem; background: white; }
.bps-tribunal__docket, .bps-tribunal__note { font: 600 .55rem var(--f-mono); letter-spacing: 1px; }
.bps-tribunal strong { font: 500 1.4rem var(--f-serif); }
.bps-tribunal__bars { color: #14275a; font-size: 1.3rem; letter-spacing: .3rem; }

/* 19 */
.bps-event--d19 { --event-ink: #13342f; --event-paper: #eef5ee; border-style: dashed; }
.bps-missing { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; gap: .5rem; margin-top: 1rem; padding: 1rem; border: 1px solid; background: white; }
.bps-missing__before, .bps-missing__after { font: 500 4rem/1 var(--f-serif); }
.bps-missing__decimal { align-self: end; color: #c2322b; font-size: 4rem; line-height: 1; animation: bps-missing 2.4s ease-in both infinite; }
.bps-missing__poster { grid-column: 1 / -1; text-align: center; font: 600 .55rem var(--f-mono); letter-spacing: 1px; }

/* 20 */
.bps-event--d20 { --event-ink: #242424; --event-paper: #e9e9e2; border-right-width: 9px; }
.bps-copier { height: 8.5rem; margin-top: 1rem; position: relative; background: #333; overflow: hidden; border: 4px solid #111; }
.bps-copier__page { position: absolute; top: .5rem; left: calc(8% + var(--page, 0) * 3px); width: 84%; height: 7rem; background: white; border: 1px solid #aaa; padding: .65rem; font: 600 .55rem var(--f-mono); animation: bps-copy 1.6s ease-out both; }
.bps-copier__page strong { display: block; margin-top: .5rem; font: 400 2.1rem var(--f-serif); }
.bps-copier__page:nth-child(1) { transform: translate(0,0) rotate(-1deg); z-index: 7; }
.bps-copier__page:nth-child(2) { transform: translate(4px,3px) rotate(1deg); z-index: 6; }
.bps-copier__page:nth-child(3) { transform: translate(-4px,6px); z-index: 5; }
.bps-copier__page:nth-child(n+4) { transform: translate(7px,9px); }

@keyframes bps-meter-in { from { transform: scaleX(0); } }
@keyframes bps-fault { 50% { transform: scale(1.25) rotate(4deg); } }
@keyframes bps-office-shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes bps-trace { from { transform: translateX(-100%); } }
@keyframes bps-collapse { from { transform: translateY(-2rem) skew(0); opacity: 0; } }
@keyframes bps-rays { to { transform: rotate(360deg); } }
@keyframes bps-calibrate { to { background: #b9e5f7; transform: translateY(-2px); } }
@keyframes bps-seismo { to { transform: translateX(-10rem); } }
@keyframes bps-compass { to { transform: rotate(155deg); } }
@keyframes bps-missing { 45%, 75% { opacity: 0; transform: translate(1rem, -1rem); } }
@keyframes bps-copy { from { transform: translateY(-100%); opacity: 0; } }

@media (min-width: 48rem) {
  #bureau-event-stage { padding-top: 1.5rem; }
  .bps-event { padding: 1.75rem 2rem; }
  .bps-event__dismiss { width: auto; min-width: 15rem; }
  .bps-event-shell--d02,
  .bps-event-shell--d10,
  .bps-event-shell--d11,
  .bps-event-shell--d16 { top: 7.25rem; left: max(2rem, calc((100vw - 56rem) / 2)); right: max(2rem, calc((100vw - 56rem) / 2)); }
}

@media (max-width: 26.5rem) {
  .bps-continuing { align-items: stretch; flex-direction: column; }
  .bps-continuing__open { width: 100%; }
  .bps-event__title { font-size: 1.65rem; }
  .bps-office { grid-template-columns: 1fr; }
  .bps-office__hall { writing-mode: initial; }
}

@media (prefers-reduced-motion: reduce) {
  .bps-crisis--d02 #view-insights,
  .bps-event--d15 { transform: none !important; }
  .bps-seismo__paper { transform: translateX(-2rem); }
  .bps-missing__decimal { opacity: .25; transform: none; }
}