/* Synapse Portal Search Lab — refined scientific-editorial.
   Cool near-white surfaces, deep ink, teal as the dominant accent, terracotta as the
   sharp accent. The surfaces are neutral on purpose: this is an instrument reporting
   measurements, and a warm paper tint read as an archive of them.
   Display: Archivo (a grotesque — streamlined, impactful at heavy weights and tight
   tracking) · Body: Public Sans · Mono (scores/ids): IBM Plex Mono. */

:root {
  /* This design commits to one look: a single light palette. Declaring the scheme keeps
     form controls, scrollbars and the canvas light under a dark OS setting rather than
     half-flipping into a theme the marks were never validated against. */
  color-scheme: light;

  --display:    "Archivo", "Public Sans", system-ui, sans-serif;

  --paper:      #f7f9fa;
  --paper-2:    #edf1f4;
  --card:       #ffffff;
  --wash-cool:  #e8eef2;   /* the second background bloom; was a terracotta tint */
  --ink:        #151d21;
  --muted:      #56626a;
  /* AA (4.5:1) on every surface faint text actually sits on: card, paper, paper-2
     (.delta.same), and --teal-wash — the selected index card's gradient and a hovered
     scoreboard row both put .ic-id / .score on it. */
  --faint:      #636c72;
  --teal:       #0e8c7f;
  --teal-deep:  #0a655b;
  --teal-wash:  #e4f0ee;
  --teal-line:  #bfdcd7;
  --green:      #4c9a2a;   /* distinct from teal — upward delta only, so it doesn't blend in */
  --green-deep: #2e6b19;
  --green-wash: #e9f3e0;
  --clay:       #a55226;   /* sharp accent: downward delta, errors — AA on clay-wash too */
  --clay-wash:  #f7e7dc;
  --rule:       #e2e8ec;
  --rule-soft:  #eef2f5;
  --shadow:     14px 18px 40px -28px rgba(17,34,45,.38);
  --radius:     14px;

  /* ---- data-mark roles -------------------------------------------------
     Chrome is teal/clay (above); DATA is never teal, so a mark is never
     mistaken for a control. Values are the validated reference palette,
     re-checked against this page's chart surface (--card, #fffdf8) with the
     data-viz validator: the categorical pair and the 3-step ordinal ramp
     both pass. A recipe's colour follows its ROLE, never its rank in a
     sorted list, so re-sorting never repaints a recipe. */
  --series-1:   #2a78d6;   /* best recipe tested */
  --series-2:   #eb6834;   /* the platform default — the absolute control */
  --series-3:   #4a3aa7;   /* production_current — the contextual control */
  /* Text-safe steps of the same two hues, for axis labels that mirror a bar's role.
     The fills themselves fail as text on --card: --series-2 is 3.2:1, under the 4.5:1
     AA floor. These are the nearest darker steps that clear it (5.9:1 and 8.6:1) while
     staying recognisably the same hue as the mark they label. */
  --series-2-ink: #a8461d;
  --series-3-ink: #4a3aa7;
  --muted-mark: #a3a199;   /* every other recipe — context, not emphasis */
  /* rank bands: one hue, light->dark (ordinal). "Missed" is neutral, never a
     status colour — a search missing is a measurement, not an alarm. */
  --rank-top:    #104281;
  --rank-near:   #256abf;
  --rank-deep:   #86b6ef;
  --rank-miss:   #c9c3b4;
  --rank-absent: #eae6da;
  --grid:       #e7ecef;
  --axis:       #ccd4d9;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win over any class's `display`, no matter its
   specificity — several sections here are toggled via `.hidden` and would otherwise
   leak through as empty boxes. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* deep-linked sections shouldn't butt against the top of the viewport */
.block, .sub { scroll-margin-top: 18px; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 78% -8%, var(--teal-wash) 0%, transparent 55%),
    radial-gradient(900px 500px at -5% 110%, var(--wash-cool) 0%, transparent 50%),
    var(--paper);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A trace of grain, only enough to keep the large washes from banding — at .035 it read
   as paper stock. Delete the element in index.html for a perfectly flat surface. */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .012;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

a { color: var(--teal-deep); text-underline-offset: 2px; }

/* ---------- masthead ---------- */
.masthead { padding: 26px 0 18px; position: relative; z-index: 1; }
.masthead::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 55%, var(--clay) 100%);
}
.eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: 700; font-family: "Public Sans", sans-serif;
  vertical-align: middle; margin-right: 4px;
}
h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 8px; color: var(--ink);
}
.lede { margin: 0; max-width: 70ch; font-size: 15px; color: var(--muted); }
.lede strong { color: var(--ink); font-weight: 600; }

/* staggered entrance */
h1, .lede { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.lede { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- tabs: top-level page switch ----------
   These change the whole page, so they read as tabs rather than filter chips: a
   full-width rail, the active one lifted as a card sitting on it with a 3px teal
   edge, and label type a step up from body copy. */
.tabs {
  display: flex; align-items: stretch; gap: 4px;
  margin: 26px auto 0; border-bottom: 2px solid var(--rule);
}
.tab {
  appearance: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -.025em;
  background: none; border: 1px solid transparent; border-bottom: 3px solid transparent;
  border-radius: 12px 12px 0 0; margin-bottom: -2px; padding: 11px 22px 12px;
  color: var(--muted); transition: .18s ease;
}
.tab:hover { color: var(--ink); background: var(--paper-2); }
.tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tab.is-active {
  color: var(--teal-deep); background: var(--card);
  border-color: var(--rule); border-bottom-color: var(--teal);
  box-shadow: 0 -6px 18px -14px rgba(16,32,30,.5);
}
@media (max-width: 560px) {
  .tabs { gap: 0; }
  .tab { padding: 10px 14px 11px; flex: 1; font-size: 15px; }
}

/* ---------- instrument bar (index selector) ---------- */
.instrument {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 16px auto 0; padding: 12px 16px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.inst-field { display: inline-flex; align-items: center; gap: 9px; }
.inst-field > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
#indexPick {
  font: 600 14px "Public Sans", sans-serif; color: var(--ink); padding: 8px 30px 8px 12px;
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e8c7f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
#indexPick:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.inst-custom { display: inline-flex; align-items: center; gap: 8px; }
#customId {
  font: 13px "IBM Plex Mono", monospace; color: var(--ink); padding: 8px 11px; width: min(340px, 60vw);
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper);
}
#customId:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.mini-go {
  appearance: none; cursor: pointer; border: none; border-radius: 10px; background: var(--teal); color: #fff;
  font: 600 14px "Public Sans", sans-serif; padding: 8px 16px; transition: .15s;
}
.mini-go:hover { background: var(--teal-deep); }
.mini-go:disabled { background: var(--faint); cursor: progress; }
.inst-status {
  margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint);
  text-align: right; white-space: nowrap;
}
.inst-status.err { color: var(--clay); }
.inst-status .ok { color: var(--teal-deep); }

main { padding: 16px 0 48px; }
.panel-tab { display: none; animation: fade .35s ease both; }
.panel-tab.is-active { display: block; }

/* ---------- layout: content + collapsible boosts sidebar ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 28px; align-items: start;
  transition: grid-template-columns .25s ease, gap .25s ease;
}
.content { min-width: 0; }
.sidebar { position: sticky; top: 16px; }
/* collapsed: sidebar shrinks to a slim rail, content takes the width back */
.layout.boosts-collapsed { grid-template-columns: minmax(0, 1fr) 34px; gap: 14px; }
.layout.boosts-collapsed .boost-card { display: none; }
.layout.boosts-collapsed .boost-rail { display: flex; }
@media (max-width: 900px) {
  .layout, .layout.boosts-collapsed { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { position: static; }
  /* collapse-to-side is a wide-screen affordance; on mobile always show the card */
  .layout.boosts-collapsed .boost-card { display: block; }
  .boost-rail { display: none !important; }
}
.boost-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s;
}
/* a selected recipe currently reads these boosts — draw the eye here */
.boost-card.is-linked { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash), var(--shadow); }
.boost-rail.is-linked { background: var(--teal); color: #fff; border-color: var(--teal); }
.boost-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.boost-title { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.boost-toggle {
  appearance: none; border: 1px solid var(--rule); background: var(--paper); color: var(--teal-deep);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font: 600 15px "Public Sans", sans-serif;
  line-height: 1; display: grid; place-items: center; transition: .15s;
}
.boost-toggle:hover { border-color: var(--teal); background: var(--teal-wash); }
/* slim vertical tab shown when collapsed */
.boost-rail {
  display: none; align-items: center; justify-content: center; gap: 8px; width: 34px; min-height: 150px;
  padding: 14px 0; cursor: pointer; appearance: none; border: 1px solid var(--teal-line);
  background: var(--teal-wash); color: var(--teal-deep); border-radius: var(--radius);
  font: 700 13px "Public Sans", sans-serif; letter-spacing: .04em;
  writing-mode: vertical-rl; transition: .15s; box-shadow: var(--shadow);
}
.boost-rail::before { content: "«"; writing-mode: horizontal-tb; font-size: 15px; }
.boost-rail:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.boost-card .adv-note { font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.type-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.type-note summary {
  cursor: pointer; color: inherit; font: inherit; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.type-note summary::-webkit-details-marker { display: none; }
.type-note .disclosure-icon { flex: none; width: 11px; height: 11px; transition: transform .15s ease; }
.type-note[open] .disclosure-icon { transform: rotate(90deg); }
.type-note p { margin: 8px 0 0; }
.type-note code { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink); }
.boost-card .boost-editor {
  grid-template-columns: 1fr; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 6px;
}
.boost-card .boost-field { justify-content: space-between; }
.boost-card .adv-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; gap: 10px 16px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- search bar ---------- */
.searchbar { display: flex; gap: 10px; margin: 18px 0 12px; }
#q {
  flex: 1; font: 18px "Public Sans", sans-serif; color: var(--ink);
  padding: 16px 18px; border: 1.5px solid var(--rule); border-radius: var(--radius);
  background: var(--card); transition: .18s ease; box-shadow: var(--shadow);
}
#q::placeholder { color: var(--faint); }
#q:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash); }
.go {
  appearance: none; cursor: pointer; border: none; border-radius: var(--radius);
  background: var(--teal); color: #fff; font: 600 16px "Public Sans", sans-serif;
  padding: 0 28px; transition: .18s ease; box-shadow: var(--shadow);
}
.go:hover { background: var(--teal-deep); transform: translateY(-1px); }
.go:active { transform: none; }
.go:disabled { background: var(--faint); cursor: progress; transform: none; }

/* ---------- advanced ---------- */
.advanced { margin: 6px 0 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.advanced > summary {
  cursor: pointer; padding: 12px 18px; font-weight: 600; color: var(--teal-deep);
  list-style: none; user-select: none;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸ "; color: var(--faint); }
.advanced[open] > summary::before { content: "▾ "; }
.adv-body { padding: 0 18px 18px; border-top: 1px solid var(--rule-soft); }
.adv-note { font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.boost-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; margin: 8px 0 14px; }
.boost-field { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.boost-field code { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink); }
.boost-field input { width: 56px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 7px; font: 13px "IBM Plex Mono", monospace; }
.adv-row { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.adv-row input[type=number] { width: 64px; padding: 5px 7px; border: 1px solid var(--rule); border-radius: 7px; font: 13px "IBM Plex Mono", monospace; }
.link-btn { background: none; border: none; color: var(--teal-deep); cursor: pointer; font: 600 14px "Public Sans"; text-decoration: underline; padding: 0; }

/* ---------- compare columns ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.col { min-width: 0; }
.col-head { margin-bottom: 10px; }
.col-pick {
  width: 100%; font: 600 15px "Public Sans", sans-serif; color: var(--ink);
  padding: 11px 34px 11px 14px; border: 1.5px solid var(--rule); border-radius: 11px; background: var(--card);
  cursor: pointer; transition: .18s; appearance: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e8c7f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.col-pick:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash); }
.col-pickrow { display: flex; align-items: center; gap: 8px; }
.col-pickrow .col-pick { flex: 1; width: auto; }
.boost-ref {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; white-space: nowrap;
  border-radius: 999px; padding: 3px 10px; border: 1px solid var(--rule);
  color: var(--muted); background: var(--paper-2);
}
.boost-ref.is-boosted {
  color: var(--teal-deep); background: var(--teal-wash); border-color: var(--teal-line);
}
.info { position: relative; flex: none; display: inline-flex; }
.info-trigger {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rule);
  color: var(--teal-deep); background: var(--card); cursor: help; display: grid; place-items: center;
  font: 700 13px var(--display); transition: .15s;
}
.info-trigger:hover, .info:focus-within .info-trigger { border-color: var(--teal); background: var(--teal-wash); }
.col-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 270px;
  background: var(--ink); color: #f4f1e9; padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 12px 30px -10px rgba(16,32,30,.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.col-tip::after {
  content: ""; position: absolute; bottom: 100%; right: 9px; border: 6px solid transparent;
  border-bottom-color: var(--ink);
}
.info:hover .col-tip, .info:focus-within .col-tip { opacity: 1; visibility: visible; transform: none; }
.col-tip .best-for { display: block; margin-top: 6px; color: #7fd6ca; font-weight: 600; }
.col-meta { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--faint); margin: 6px 2px 12px; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hit {
  position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 13px 15px 13px 46px; transition: .16s ease; animation: rise .4s ease both;
}
.hit:hover { border-color: var(--teal-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.hit .rank {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--teal-deep);
  background: var(--teal-wash); border-radius: 12px 0 0 12px; border-right: 1px solid var(--teal-line);
}
.hit .name { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.hit .sub { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 5px; }
.chip {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px;
  background: var(--paper-2); color: var(--muted); border: 1px solid var(--rule);
}
.type-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-deep); background: var(--teal-wash); border-color: var(--teal-line); }
.type-icon { width: 14px; height: 14px; flex: none; }
.score { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--faint); }
.hit .desc { font-size: 13px; color: var(--muted); margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rid { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--faint); }

/* rank-delta badge */
.delta { position: absolute; right: 11px; top: 11px; font: 600 11px "IBM Plex Mono", monospace; padding: 2px 7px; border-radius: 999px; }
.delta.up { color: var(--green-deep); background: var(--green-wash); }
.delta.down { color: var(--clay); background: var(--clay-wash); }
.delta.same { color: var(--faint); background: var(--paper-2); }

.compare-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 0 0 16px; padding: 11px 16px; background: var(--card);
  border: 1px solid var(--rule); border-left: 4px solid var(--teal); border-radius: 10px;
  font-size: 13px; color: var(--muted); animation: fade .3s ease both;
}
.compare-summary .cs-lead { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.compare-summary .cs-stat { white-space: nowrap; }
.compare-summary .cs-stat b { color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.compare-summary em { font-style: normal; font-weight: 600; color: var(--ink); }

.compare-hint { font-size: 13px; color: var(--muted); margin-top: 16px; }
.delta-key { font-family: "IBM Plex Mono", monospace; padding: 0 4px; border-radius: 5px; }
.delta-key.up { color: var(--green-deep); background: var(--green-wash); }
.delta-key.down { color: var(--clay); background: var(--clay-wash); }

.empty, .loading, .errbox { padding: 22px; text-align: center; color: var(--faint); border: 1px dashed var(--rule); border-radius: 12px; font-size: 14px; }
.errbox { color: var(--clay); border-color: var(--clay); background: var(--clay-wash); }
.loading::after {
  content: ""; display: inline-block; margin-left: 8px; vertical-align: -3px;
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--rule);
  border-top-color: var(--teal); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- live scoring (lab tab) ---------- */
.bench-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; margin: 18px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.strat-picker { border: none; margin: 0; padding: 0; min-width: 0; }
.strat-picker legend { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0; margin-bottom: 8px; }
.strat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.strat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: .15s; background: var(--paper); }
.strat-chip:hover { border-color: var(--teal-line); }
.strat-chip input { accent-color: var(--teal); margin: 0; }
.strat-chip.on { color: var(--teal-deep); background: var(--teal-wash); border-color: var(--teal-line); }
.bench-actions { display: flex; align-items: center; gap: 14px; }
.bench-est { font-size: 13px; color: var(--faint); font-family: "IBM Plex Mono", monospace; }

.progress { margin: 8px 0 18px; }
.progress-bar { height: 10px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transition: width .2s ease; }
.progress-text { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); margin: 7px 2px 0; }

.scoreboard { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 6px 0 10px; }
.scoreboard th, .scoreboard td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; }
.scoreboard thead th { background: var(--ink); color: #f7f4ec; font-weight: 600; font-size: 13px; cursor: pointer; user-select: none; position: relative; white-space: nowrap; }
.scoreboard thead th:hover { background: #20302d; }
.scoreboard thead th.sorted::after {
  content: ""; display: inline-block; margin-left: 5px; vertical-align: middle;
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--teal);
}
/* reversed (worst-first) order — point the triangle up instead of down */
.scoreboard thead th.sorted.reverse::after { border-top: none; border-bottom: 5px solid var(--teal); }
.scoreboard th:first-child, .scoreboard td:first-child { text-align: left; }
.scoreboard td.metric { font-family: "IBM Plex Mono", monospace; }
.scoreboard tbody tr:hover { background: var(--teal-wash); }
.scoreboard .stratname { font-weight: 600; color: var(--ink); }
.scoreboard .stratname small { display: block; font-weight: 400; color: var(--faint); font-size: 11.5px; }
.scoreboard td.best { color: var(--teal-deep); font-weight: 700; position: relative; }
.scoreboard td.best::before { content: "★"; color: var(--clay); margin-right: 4px; font-size: 11px; }
.score-note { font-size: 12.5px; color: var(--faint); margin: 2px 0 24px; }
.score-note .note-star { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; color: var(--clay); }

/* ---------- footer ---------- */
.foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 12.5px; }
.foot code { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--muted); }

/* ==========================================================================
   BENCHMARK RESULTS DASHBOARD
   The reporting face of the site. Chrome keeps the lab's paper-and-teal
   identity; inside a figure, ink is the only colour text ever wears and the
   data-mark roles above are the only colour the marks wear.
   ========================================================================== */

#results { padding: 8px 0 52px; }

/* ---------- hero: the finding, stated ---------- */
.hero { padding: 14px 0 26px; }
.hero-eyebrow {
  font: 700 11px "IBM Plex Mono", monospace; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal-deep); margin: 0 0 10px;
}
.hero-thesis {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(23px, 3.2vw, 34px); line-height: 1.16; letter-spacing: -.028em;
  color: var(--ink); margin: 0; max-width: 52ch;
}
/* the one hero figure on the page — sans, not the display face, and set with
   proportional figures because it stands alone rather than in a column */
.hero-fig {
  font-family: "Public Sans", sans-serif; font-weight: 700;
  font-size: clamp(42px, 6.2vw, 60px); line-height: .85; letter-spacing: -.03em;
  color: var(--teal-deep); display: inline-block; padding: 0 2px;
}
.hero-sub { margin: 14px 0 0; max-width: 72ch; font-size: 14.5px; color: var(--muted); }
/* freshness, stated where the reader starts rather than only in the footer */
.hero-stamp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 14px;
  font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); font-variant-numeric: tabular-nums;
}
.hero-stamp-key {
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-size: 10px;
}
.hero-stamp-key:not(:first-child) { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--rule); }

/* The hero rail: the three pooled facts as one strip with hairline dividers, not three
   bordered tiles. Context for the headline, so it carries no card fill and no shadow —
   the boxes on this page are reserved for things you can open. */
.hero-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.rail-item { padding: 0 20px; border-left: 1px solid var(--rule-soft); }
.rail-item:first-child { padding-left: 0; border-left: 0; }
.rail-label {
  font: 700 10.5px "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
/* the same role dot the reading-guide nodes use, so an item states which arm it is about */
.rail-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted-mark); }
.rail-item.is-best .rail-dot { background: var(--series-1); }
.rail-item.is-baseline .rail-dot { background: var(--series-2); }
.rail-value {
  font: 600 27px "Public Sans", sans-serif; letter-spacing: -.02em; line-height: 1;
  color: var(--ink); margin: 0;
}
.rail-note { font: 600 12.5px "Public Sans", sans-serif; color: var(--green-deep); margin: 5px 0 0; }
.rail-note.is-worse { color: var(--clay); }
.rail-note.is-quiet { color: var(--faint); font-weight: 500; }
.hero-rail-note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; max-width: 84ch; line-height: 1.5; }

/* still used by the single-recipe leaderboard, where six metrics have no comparison */
.hero-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-top: 24px; }
.stat {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 16px 15px; position: relative; overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--muted-mark); }
.stat-best::before { background: var(--series-1); }
.stat-baseline::before { background: var(--series-2); }
.stat-label {
  font: 700 10.5px "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px;
}
.stat-value {
  font: 600 30px "Public Sans", sans-serif; letter-spacing: -.02em; line-height: 1;
  color: var(--ink); margin: 0;
}
.stat-delta { font: 600 12.5px "Public Sans", sans-serif; color: var(--green-deep); margin: 6px 0 0; }
/* the delta line reads as good news by default; a regression takes the downward
   accent, and a plain restatement of the figure (a share, a denominator) stays quiet */
.stat-delta.is-worse { color: var(--clay); }
.stat-delta.is-quiet { color: var(--faint); font-weight: 500; }
.stat-sub { font-size: 12.5px; color: var(--faint); margin: 6px 0 0; line-height: 1.45; }

/* ---------- section anchors ----------
   Every section is addressable as #/<tab>/<index>/<section>. The control appears on
   hover/focus of its heading so the copy is quiet, but it is always in the tab order. */
.anchor-link {
  appearance: none; background: none; border: none; cursor: pointer; padding: 2px;
  margin-left: 8px; color: var(--faint); vertical-align: middle;
  opacity: 0; transition: opacity .15s ease, color .15s ease;
  display: inline-flex; align-items: center;
}
.anchor-link svg { width: 15px; height: 15px; }
h2:hover > .anchor-link, h3:hover > .anchor-link,
.anchor-link:focus-visible { opacity: 1; }
.anchor-link:hover { color: var(--teal-deep); }
.anchor-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 5px; }
.anchor-link.is-copied { opacity: 1; color: var(--green-deep); }
.anchor-link.is-copied::after {
  content: "Link copied"; margin-left: 6px;
  font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .04em; white-space: nowrap;
}
@media (hover: none) { .anchor-link { opacity: 1; } }

/* ---------- section blocks ---------- */
.block { padding: 30px 0 6px; border-top: 1px solid var(--rule); margin-top: 26px; }
.block-head { max-width: 78ch; }
.block-eyebrow {
  font: 700 10.5px "IBM Plex Mono", monospace; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px;
}
.block-head h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.025em; line-height: 1.16; margin: 0; color: var(--ink);
}
.block-lede { font-size: 14.5px; color: var(--muted); margin: 8px 0 0; }
/* the instruction at the end of a lede — an action, so it is set apart from the prose */
.block-cta { color: var(--ink); font-weight: 700; }
/* the eyebrow of the detail block: names its tie to the picker above, so it carries the
   same teal as the selected card rather than the recessive grey of a plain section label */
.block-eyebrow.is-current { color: var(--teal-deep); }
.block-body { margin-top: 16px; }
.sub { margin: 26px 0 0; }
.sub-head {
  font-family: var(--display); font-weight: 700; font-size: 18.5px; letter-spacing: -.022em;
  margin: 0 0 6px; color: var(--ink);
}
.sub-lede { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; max-width: 76ch; }
.fine { font-size: 12.5px; color: var(--faint); margin: 12px 0 0; max-width: 80ch; }
.empty-line {
  font-size: 13.5px; color: var(--faint); margin: 12px 0 0; padding: 16px 18px;
  border: 1px dashed var(--rule); border-radius: 12px;
}

/* ---------- reference points: fixed baseline + test / promote loop ---------- */
.reference-figure { margin: 0; }
.reference-diagram { display: block; width: 100%; height: auto; }
.reference-diagram.is-compact { display: none; }
.reference-edge, .reference-head {
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.reference-edge.is-promote, .reference-head.is-promote { stroke: var(--teal-deep); }
.reference-edge.is-promote { stroke-dasharray: 6 5; }
.reference-edge-label { font: 500 14px "Public Sans", sans-serif; fill: var(--muted); }
.reference-edge-label.is-promote { fill: var(--teal-deep); }
.reference-node rect { fill: var(--card); stroke: var(--rule); }
.reference-node.is-baseline circle { fill: var(--series-2); }
.reference-node.is-best circle { fill: var(--series-1); }
.reference-node.is-production circle { fill: var(--series-3); }
.reference-node-role { font: 600 11px "IBM Plex Mono", monospace; fill: var(--faint); }
.reference-node-name { font: 700 23px var(--display); fill: var(--ink); letter-spacing: -.5px; }
.reference-node-gist { font: 400 14px "Public Sans", sans-serif; fill: var(--muted); }
.flow-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; max-width: 90ch; }
.reference-definitions { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
.reference-definitions > summary { cursor: pointer; color: var(--teal-deep); font-size: 13px; font-weight: 600; }
.reference-definitions > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.reference-definition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 20px; }
@media (max-width: 800px) {
  .reference-diagram.is-wide { display: none; }
  .reference-diagram.is-compact { display: block; max-width: 400px; margin: 0 auto; }
  .reference-definition-grid { grid-template-columns: 1fr; gap: 20px; }
}
.ref-name {
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.022em;
  line-height: 1.15; margin: 0 0 3px; color: var(--ink);
}
.ref-aka { font-size: 12px; color: var(--faint); margin: 0 0 9px; }
.ref-aka-label {
  font: 700 9.5px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-right: 6px;
}
.ref-what { font-size: 13.5px; color: var(--muted); margin: 0; }
.ref-why { font-size: 13.5px; color: var(--ink); margin: 10px 0 0; }
.ref-why-label {
  display: block;
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 2px;
}
.ref-caveat {
  font-size: 12.5px; color: var(--faint); line-height: 1.45;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-soft);
}

/* ---------- index cards (also the picker for the detail below) ---------- */
.index-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.index-card {
  appearance: none; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 13px 14px 14px; position: relative; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.index-card:hover { border-color: var(--teal-line); box-shadow: var(--shadow); transform: translateY(-1px); }
/* Selection has to survive a grid of 13 near-identical cards, so it is carried three ways
   at once — ring, wash, and a teal top rail — rather than by a 1px border colour that
   reads as a hover state (which is what it was). Geometry is unchanged
   (an inset ring, not a thicker border) so selecting a card never nudges the grid; the
   tie to the section it drives is made by that section's teal "Selected index" eyebrow,
   not by a pointer, since the cards wrap onto three rows. */
.index-card.is-on {
  border-color: var(--teal);
  background: linear-gradient(180deg, var(--teal-wash) 0%, var(--card) 62%);
  box-shadow: 0 0 0 1px var(--teal) inset, 0 0 0 4px var(--teal-wash), var(--shadow);
}
.index-card.is-on::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--teal); border-radius: var(--radius) var(--radius) 0 0;
}
.index-card.is-on .ic-name { color: var(--teal-deep); }
.index-card.is-on .ic-id { color: var(--teal-deep); }
/* Indexes with no golden set: nothing to open, so a chip rather than a card. */
.index-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 14px 0 0; font-size: 12.5px;
}
.chips-label {
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-right: 3px;
}
.chip {
  font: 500 12px "IBM Plex Mono", monospace; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 3px 10px; cursor: default;
}
.chip.has-config { border-color: var(--teal-line); color: var(--teal-deep); }
.ic-name { font-weight: 600; font-size: 14.5px; margin: 0; color: var(--ink); }
.ic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 4px 0 10px; }
.ic-id { font: 400 11px "IBM Plex Mono", monospace; color: var(--faint); }
.ic-flag {
  font: 600 9.5px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--teal-wash); border: 1px solid var(--teal-line);
  border-radius: 999px; padding: 1px 6px;
}
/* second chip on a card: distinct from "config" (a file exists) because this one is a
   recorded fact about production */
.ic-flag.is-promoted {
  color: var(--green-deep); background: var(--green-wash); border-color: #c4ddb0;
}
.ic-stat { font: 600 13.5px "Public Sans", sans-serif; color: var(--ink); margin: 0 0 8px; }
.ic-stat.is-quiet { color: var(--faint); font-weight: 500; }
.ic-sub { font-size: 11.5px; color: var(--faint); margin: 8px 0 0; }

/* The recurring motif: where this index's answers land, as one strip. */
.rank-strip { display: flex; gap: 2px; height: 7px; }
.rank-strip-seg { border-radius: 2px; min-width: 3px; }

/* ---------- identity row ---------- */
.ident {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: 13px 16px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.ident-fact { display: flex; flex-direction: column; gap: 2px; }
.ident-label {
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.ident-value, .ident-link { font: 500 13px "IBM Plex Mono", monospace; color: var(--ink); }
.ident-link { color: var(--teal-deep); }

/* ---------- figures ---------- */
.fig {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 15px 18px 16px; margin: 14px 0 0;
}
.fig-cap { margin: 0 0 12px; }
.fig-cap h3 { font: 600 14.5px "Public Sans", sans-serif; margin: 0; color: var(--ink); }
.fig-note { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; max-width: 78ch; }
/* A note about a row measured elsewhere — set apart so it reads as a caveat on the figure
   rather than more description of it. */
.fig-note.is-constant {
  margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--rule);
  color: var(--faint);
}
.fig-plot { width: 100%; overflow-x: auto; }

svg.viz { display: block; overflow: visible; }
.viz-grid { stroke: var(--grid); stroke-width: 1; }
.viz-axis { stroke: var(--axis); stroke-width: 1; }
.viz-connect { stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
/* the range plot's whisker: the row's own role colour (set inline), held back so the two
   dots stay the marks the eye lands on */
.viz-range { stroke-width: 3; stroke-linecap: round; opacity: .38; }
.viz-dot { stroke: var(--card); stroke-width: 2; }
.viz-cat { font: 500 12.5px "Public Sans", sans-serif; fill: var(--ink); }
.viz-val { font: 600 12px "IBM Plex Mono", monospace; fill: var(--ink); font-variant-numeric: tabular-nums; }
.viz-tick { font: 400 10.5px "IBM Plex Mono", monospace; fill: var(--faint); }
.viz-inseg { font: 600 10.5px "IBM Plex Mono", monospace; }
.viz-colhead { font: 500 11px "Public Sans", sans-serif; fill: var(--muted); }
/* An axis label for a reference recipe carries that recipe's colour, so the label and
   its bar agree without the reader tracing across the plot. Only the two controls are
   tinted — tinting every row would make colour meaningless. */
.viz-cat.is-baseline, .viz-colhead.is-baseline { fill: var(--series-2-ink); font-weight: 600; }
.viz-cat.is-production, .viz-colhead.is-production { fill: var(--series-3-ink); font-weight: 600; }
.viz-point-label { font: 500 11.5px "Public Sans", sans-serif; fill: var(--ink); }
.viz-axis-label {
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  fill: var(--faint);
}
.viz-mark { cursor: default; transition: opacity .12s ease; }
.viz-mark:hover { opacity: .82; }
.viz-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
.viz-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.viz-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.viz-legend-note { font-size: 12px; color: var(--faint); }

/* ---------- tooltips ---------- */
.viz-tip {
  position: fixed; z-index: 40; pointer-events: none; opacity: 0; visibility: hidden;
  background: var(--ink); color: #f7f4ec; border-radius: 10px; padding: 9px 12px;
  box-shadow: 0 12px 28px -18px rgba(16,32,30,.8); max-width: 280px;
  transition: opacity .12s ease;
}
.viz-tip.is-on { opacity: 1; visibility: visible; }
.viz-tip-title { font: 600 12.5px "Public Sans", sans-serif; margin: 0 0 5px; color: #fff; }
.viz-tip-row { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 12px; color: #cfd8d5; }
.viz-tip-row b { font: 600 13px "IBM Plex Mono", monospace; color: #fff; font-variant-numeric: tabular-nums; }
.viz-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }

/* ---------- table twins ---------- */
.viz-twin { margin: 12px 0 0; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.viz-twin > summary {
  cursor: pointer; list-style: none; font: 600 12.5px "Public Sans", sans-serif;
  color: var(--teal-deep); display: inline-flex; align-items: center; gap: 6px;
}
.viz-twin > summary::-webkit-details-marker { display: none; }
.viz-twin > summary::before { content: "▸"; color: var(--faint); }
.viz-twin[open] > summary::before { content: "▾"; }
.viz-twin-scroll { max-height: 420px; overflow: auto; margin-top: 10px; }
.viz-twin table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.viz-twin th, .viz-twin td { padding: 7px 10px; border-bottom: 1px solid var(--rule-soft); text-align: left; }
.viz-twin th {
  position: sticky; top: 0; background: var(--paper-2); color: var(--muted);
  font-weight: 600; white-space: nowrap;
}
.viz-twin td.num, .viz-twin th.num { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

/* ---------- definition twins ---------- */
/* Same disclosure affordance as the table twin, for the short-hand recipe names the
   figures are labelled with. Two columns on wide viewports, stacked on narrow. */
.defs-list { margin: 0; }
.defs-list dt {
  font: 600 12.5px "Public Sans", sans-serif; color: var(--ink);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.defs-list > dt:first-child { padding-top: 0; border-top: 0; }
.defs-list dd {
  margin: 3px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  max-width: 74ch;
}
/* The term wears its mark's role colour, the same two the plot tints a category label
   with (and the same text-safe steps — the raw fills fail contrast as text). Only the
   controls are tinted: colouring every entry would make the colour mean nothing. */
.defs-term.is-baseline { color: var(--series-2-ink); }
.defs-term.is-production { color: var(--series-3-ink); }
.defs-tag {
  font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: .02em;
  color: var(--teal-deep); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-radius: 3px; padding: 1px 5px;
}
/* Colour-coded to match the legend, but the role is carried by a swatch-style border
   rather than a filled background: --paper on --series-2 is only ~3:1, short of the 4.5:1
   this 10px text needs. Dark ink on the pale surface is ~14.5:1. */
.defs-role {
  font: 600 10px "Public Sans", sans-serif; text-transform: uppercase;
  letter-spacing: .06em; border-radius: 3px; padding: 1px 6px;
  color: var(--ink); background: var(--paper-2);
  border-left: 3px solid var(--muted-mark);
}
.defs-role-best { border-left-color: var(--series-1); }
.defs-note { display: block; margin-top: 2px; color: var(--faint); }

/* ---------- contribute ----------
   The golden set is the one part of this dashboard an outsider can improve, so the ask
   sits at the end of the section that explains it. Primary is the issue (no git needed);
   the YAML edit is offered quietly beside it. */
.contrib { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.contrib-btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 600 14px "Public Sans", sans-serif; border-radius: var(--radius);
  padding: 10px 18px; transition: .18s ease;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
.contrib-btn:hover { background: #000; transform: translateY(-1px); }
.contrib-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.contrib-btn.is-quiet {
  background: var(--card); color: var(--ink); border-color: var(--rule);
}
.contrib-btn.is-quiet:hover { background: var(--paper-2); border-color: var(--faint); }
.gh-mark { width: 16px; height: 16px; flex: none; }

/* ---------- glossary drawer ----------
   A reference panel, not a dialog: on a wide viewport it overlays the right margin and
   leaves the page fully usable, so a name can be looked up without losing the figure it
   was read from. The tab is a child of the panel and sits 34px to its left, so at rest
   the panel is off-screen and only the tab shows — one control that slides out. */
.drawer {
  position: fixed; top: 0; right: 0; z-index: 40;
  width: min(390px, 92vw); height: 100vh;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;                       /* only the tab and the panel take clicks */
}
.drawer.is-open { transform: none; }
.drawer-tab {
  position: absolute; top: 32vh; left: -34px; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 34px; min-height: 168px; padding: 14px 0; cursor: pointer; appearance: none;
  border: 1px solid var(--teal-line); border-right: 0; background: var(--teal-wash);
  color: var(--teal-deep); border-radius: var(--radius) 0 0 var(--radius);
  font: 700 13px "Public Sans", sans-serif; letter-spacing: .04em;
  writing-mode: vertical-rl; transition: .15s; box-shadow: var(--shadow);
}
.drawer-tab::before { content: "«"; writing-mode: horizontal-tb; font-size: 15px; }
.drawer.is-open .drawer-tab::before { content: "»"; }
.drawer-tab:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.drawer-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.drawer-panel {
  pointer-events: auto; height: 100%; display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--rule);
  box-shadow: -20px 0 50px -34px rgba(16, 32, 30, .55);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--rule-soft);
}
.drawer-title {
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  color: var(--ink); margin: 0;
}
.drawer-close {
  appearance: none; border: 1px solid var(--rule); background: var(--paper);
  color: var(--teal-deep); width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font: 400 18px "Public Sans", sans-serif; line-height: 1; display: grid; place-items: center;
  transition: .15s; flex: none;
}
.drawer-close:hover { border-color: var(--teal); background: var(--teal-wash); }
.drawer-sub { font-size: 12.5px; color: var(--faint); margin: 0; padding: 10px 18px 0; line-height: 1.45; }
.drawer-body { flex: 1; overflow: auto; padding: 4px 18px 22px; }
/* group headings inside the drawer: the same mono eyebrow the page uses for section
   labels, so a scroll through the panel reads as sections rather than one long list */
.drawer-group-title {
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0 2px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.drawer-body > .drawer-group-title:first-child { margin-top: 10px; padding-top: 0; border-top: 0; }

/* On a narrow viewport the panel covers the content, so it behaves like a sheet: a scrim
   appears and takes the dismiss click. Wide viewports never see it. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 39; background: rgba(22, 32, 30, .3);
  opacity: 0; transition: opacity .2s ease;
}
.drawer-scrim.is-on { opacity: 1; }
@media (min-width: 901px) { .drawer-scrim { display: none !important; } }

/* ---------- filters & segmented controls ---------- */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding: 12px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
}
.seg { display: inline-flex; align-items: center; gap: 9px; }
.seg-label {
  font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.seg-group { display: inline-flex; gap: 3px; padding: 3px; background: var(--paper-2); border-radius: 999px; }
.seg-btn {
  appearance: none; border: none; background: none; cursor: pointer; border-radius: 999px;
  font: 600 12.5px "Public Sans", sans-serif; color: var(--muted); padding: 5px 12px; transition: .15s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--card); color: var(--teal-deep); box-shadow: 0 1px 3px rgba(16,32,30,.12); }
.filter-select { display: inline-flex; align-items: center; gap: 9px; }
.filter-select select {
  font: 500 13px "Public Sans", sans-serif; color: var(--ink); padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: 9px; background: var(--paper);
}
.filter-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.filter-check input { accent-color: var(--teal); }

/* ---------- notices ---------- */
.notice {
  margin: 16px 0 0; padding: 14px 18px; border-radius: var(--radius);
  background: var(--clay-wash); border: 1px solid #e8c5a8; color: #7a3d18;
}
.notice-title { font: 600 14px "Public Sans", sans-serif; margin: 0 0 4px; color: #5c2d10; }
.notice-body { font-size: 13.5px; margin: 0; }
.notice code { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: #fff4ea; padding: 1px 5px; border-radius: 5px; }
/* "What is deployed is already the best arm" is a finding, not a problem — the default
   notice is clay because it flags something missing. This one gets the affirmative side
   of the palette, and a mark so it reads as a state rather than a caveat. */
.notice.is-promoted { background: var(--green-wash); border-color: #c4ddb0; color: #33501f; }
.notice.is-promoted .notice-title { color: var(--green-deep); display: flex; align-items: center; gap: 8px; }
.notice-mark {
  flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


/* ---------- failure cards ---------- */
/* Legacy-gap groups: a closed gap and an open one are different news, so each grid gets
   a heading that says which. The heading carries the colour; cards stay on the neutral
   card surface with a single accent edge, so a grid of eight wins doesn't shout. */
.gap-group-head {
  font: 600 12.5px "Public Sans", sans-serif; margin: 18px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.gap-group-head::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.gap-group-head.is-win { color: var(--green-deep); }
.gap-group-head.is-win::before { background: var(--rank-top); }
.gap-group-head.is-open { color: var(--muted); }
.gap-group-head.is-open::before { background: var(--rank-miss); }
.fail-card.is-win { border-left: 3px solid var(--rank-top); }

.fail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 12px; }
.fail-card {
  background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rank-miss);
  border-radius: var(--radius); padding: 13px 15px 14px;
}
.fail-q { font: 600 14.5px "Public Sans", sans-serif; margin: 0; color: var(--ink); }
.fail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.tag {
  font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: .06em; padding: 2px 7px;
  border-radius: 999px; background: var(--teal-wash); color: var(--teal-deep); border: 1px solid var(--teal-line);
}
.tag.is-quiet { background: var(--paper-2); color: var(--muted); border-color: var(--rule); }
.fail-verdict { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin: 10px 0 0; }
.verdict-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fail-notes {
  font-size: 12.5px; color: var(--muted); margin: 9px 0 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fail-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font: 400 11px "IBM Plex Mono", monospace; color: var(--faint); }
.fail-foot a { color: var(--teal-deep); }
.fail-review { margin-left: auto; }

/* ---------- code card ---------- */
.code-card { margin: 14px 0 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px 16px; }
.code-head { font: 700 10.5px "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.code-card pre { margin: 0; overflow-x: auto; }
.code-card code { font: 400 12px "IBM Plex Mono", monospace; color: var(--ink); }

/* ---------- live scoring panel (lab tab) ---------- */
.score-live { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rule); }
.score-live h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.025em;
  margin: 0 0 6px; color: var(--ink);
}
.score-live .link-btn { font-size: 13.5px; }

/* Stacked: one stage per row, so the connectors point down (settled) and up (promotion,
   from the best card below to the production card above) instead of right and left.
   Height, not layout, makes room for the rotated arrow — transforms don't reflow. */
@media (max-width: 900px) {
}

@media (max-width: 620px) {
  .hero-figs { grid-template-columns: 1fr; }
  .hero-rail { grid-template-columns: 1fr; }
  .rail-item { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rule-soft); }
  .rail-item:first-child { padding-top: 0; border-top: 0; }
  .ident { gap: 10px 18px; }
}