/* ============================================================================
   Artha Leaderboard — PUBLIC board (/)
   Loaded AFTER /style.css, which owns every colour token and the instrument
   components this page reuses verbatim (.badge, .chip, .pill, .azb-*, .dbl-*).
   Two hard rules:
     1. ADD ONLY. Nothing in style.css is edited — the operator app depends on it.
     2. Every rule is scoped under `.pub`, so nothing can leak the other way.
   No new colour tokens: every colour here is an existing token, which is why
   light mode needs zero overrides in this file.
   ============================================================================ */

.pub {
  --p-gut: 32px;          /* page gutter */
  --p-wrap: 1120px;       /* content measure — the admin app is full-bleed, this is Read mode */
  --p-gap: 34px;          /* between sections */
  --p-lbl: 11px;          /* label floor: 9px reads as chrome to an operator, as noise to a visitor */
  --p-track: .12em;       /* letter-spacing cap */
}

/* ── Neutralizing overrides ────────────────────────────────────────────────
   style.css targets bare elements that would otherwise hit this page. Beaten on
   specificity, never with !important. */
.pub main { padding: 0; overflow-x: visible; }
.pub table { min-width: 0; }
.pub .p-board th, .pub .p-board td { white-space: normal; }
.pub .p-board td.num, .pub .p-board th.num { white-space: nowrap; }
/* Public analyser rows are readouts, not controls: no pointer, no hover lift, no caret. */
.pub .azb-row { cursor: default; }
.pub .azb-row:hover { background: transparent; }
.pub .azb-row:hover .dbl-g { background: var(--panel); }

/* ── Skip link + visually hidden ───────────────────────────────────────── */
.pub .p-skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--signal); border-radius: 3px;
  padding: 10px 14px; font: 500 12px/1 var(--sans); text-decoration: none;
}
.pub .p-skip:focus { left: 12px; top: 12px; }
.pub .p-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.pub .p-wrap { max-width: var(--p-wrap); margin: 0 auto; padding: 0 var(--p-gut); }
.pub main.p-wrap { padding: 28px var(--p-gut) 8px; }
.pub .p-sec { margin-bottom: var(--p-gap); }

.pub .p-sech {
  margin: 0 0 12px;
  font: 600 var(--p-lbl)/1 var(--sans);
  letter-spacing: var(--p-track); text-transform: uppercase;
  color: var(--mut);          /* --dim is 2.8:1 on --panel: it never carries text on this page */
}
.pub .p-taskcap {
  margin: 0 0 12px;
  font: 400 12.5px/1.55 var(--sans); color: var(--mut);
}

/* Theme toggle — a single ghost button, not the operator's settings menu. */
.pub .p-theme {
  margin-left: auto; align-self: center;
  background: transparent; border: 1px solid var(--hairline-2); border-radius: 3px;
  color: var(--mut); cursor: pointer;
  font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 10px;
  transition: color .12s, border-color .12s;
}
.pub .p-theme:hover { color: var(--fg); border-color: var(--hairline-2); }

/* ── Instrument panel (the #board treatment, which is id-scoped in style.css
      and belongs to the admin app — 10 duplicated declarations is the correct
      price for never touching that file) ──────────────────────────────────── */
.pub .p-pnl {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 20px 22px 18px;
}
.pub .p-pnl::before, .pub .p-pnl::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--signal); opacity: .5; pointer-events: none;
}
.pub .p-pnl::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pub .p-pnl::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.pub .p-pnlh {
  margin: 0 0 14px;
  font: 600 var(--p-lbl)/1 var(--sans);
  letter-spacing: var(--p-track); text-transform: uppercase; color: var(--mut);
}
.pub .p-pnlfoot { margin: 14px 0 0; font: 400 12px/1 var(--sans); }
.pub .p-pnlfoot a { color: var(--mut); text-decoration: none; border-bottom: 1px solid var(--hairline-2); }
.pub .p-pnlfoot a:hover { color: var(--signal); border-color: var(--signal); }
.pub .p-noscript p { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--mut); }

/* ── The verdict ───────────────────────────────────────────────────────── */
/* A sentence, so it is set in the sans face — not a readout. */
.pub .p-claim {
  margin: 0 0 20px;
  font: 400 clamp(20px, 4.2vw, 30px)/1.34 var(--sans);
  color: var(--fg);
  max-width: 30ch;
}
.pub .p-claim b { font-weight: 600; }
.pub .p-claim .p-cn { font-weight: 600; }
.pub .p-claim .good { color: var(--good); font-weight: 600; }
.pub .p-claim .bad { color: var(--bad); font-weight: 600; }
.pub .p-claim.p-wide { max-width: 44ch; }
.pub .p-claim .p-claimna { font-size: .62em; line-height: 1.6; color: var(--mut); }

/* The disclosure line under the claim. Deliberately not styled as a warning: it is a fact about
   the data, set at reading size in muted text, the way the method note is. */
.pub .p-subclaim {
  margin: -8px 0 20px;
  max-width: 62ch;
  font: 400 13px/1.65 var(--sans);
  color: var(--mut);
}
.pub .p-subclaim b { color: var(--fg); font-weight: 600; }

/* ── The index chart ───────────────────────────────────────────────────────
   Three criteria, each as a deviation from the frontier reference pinned at
   100 in the centre of the track. Same grammar as .dbl-* (a datum, a marker,
   a bar for the gap) with the reference marker fixed at centre — which is what
   lets the page reuse one reading skill everywhere. */
.pub .p-ix {
  border: 1px solid var(--hairline); border-radius: 3px;
  background: var(--panel); overflow: hidden;
}
.pub .p-ixhead, .pub .p-ixrow {
  display: grid;
  grid-template-columns: minmax(112px, 170px) 1fr 76px 108px;
  align-items: center;
  gap: 14px;
  padding: 0 15px;
}
.pub .p-ixhead {
  padding-top: 10px; padding-bottom: 10px;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
}
.pub .p-ixtrackh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pub .p-ixtrackh i { font-style: normal; color: var(--dim); }
.pub .p-ixtrackh b { font: 600 9.5px/1 var(--mono); color: var(--mut); letter-spacing: .04em; }
.pub .p-ixvalh { text-align: right; }
.pub .p-ixsubh { text-align: right; }

.pub .p-ixrow { padding-top: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--hairline); }
.pub .p-ixrow:last-child { border-bottom: none; }
.pub .p-ixlbl {
  font: 600 13px/1.25 var(--sans); color: var(--fg);
  display: flex; flex-direction: column; gap: 3px;
}
.pub .p-ixlbl i {
  font: 400 10.5px/1.2 var(--sans); font-style: normal;
  color: var(--dim); letter-spacing: 0; text-transform: none;
}

/* Track: hairline rule, a centre tick for the datum, a bar out to our index, a dot at the end. */
.pub .p-ixtrack, .pub .p-captrack { position: relative; display: block; width: 100%; }
.pub .p-ixtrack { height: 22px; }
.pub .p-captrack { height: 16px; margin: 2px 0 0; }
.pub .p-ixtrack::before, .pub .p-captrack::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--hairline);
}
.pub .p-ixbase {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 1px; background: var(--hairline-2);
}
.pub .p-ixtrack .p-ixbase { height: 14px; }
.pub .p-captrack .p-ixbase { height: 11px; }
.pub .p-ixbar {
  position: absolute; top: 50%; transform: translateY(-50%);
  border-radius: 2px; min-width: 1px;
}
.pub .p-ixtrack .p-ixbar { height: 5px; }
.pub .p-captrack .p-ixbar { height: 4px; }
.pub .p-ixdot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 2;
  box-shadow: 0 0 0 2px var(--panel);   /* keeps the dot legible where it sits on the centre tick */
}
.pub .p-ixtrack .p-ixdot { width: 9px; height: 9px; }
.pub .p-captrack .p-ixdot { width: 7px; height: 7px; }
.pub .p-ixbar.up, .pub .p-ixdot.up { background: var(--good); }
.pub .p-ixbar.down, .pub .p-ixdot.down { background: var(--bad); }
.pub .p-ixbar.even, .pub .p-ixdot.even { background: var(--mut); }
.pub .p-ixbar.na, .pub .p-ixdot.na { background: var(--dim); }

/* The index readout. Never teal: teal means selected/active on this bench, and a measurement
   is neither. The arrow carries the direction so colour is only ever reinforcement. */
.pub .p-ixval {
  font: 700 clamp(22px, 3.4vw, 28px)/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--fg);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
}
.pub .p-ixval.up { color: var(--good); }
.pub .p-ixval.down { color: var(--bad); }
.pub .p-ixval.even { color: var(--fg); }
.pub .p-ixval.na { color: var(--dim); }
.pub .p-ixarrow { font-size: .45em; line-height: 1; position: relative; top: -.15em; }
.pub .p-ixsub {
  text-align: right;
  font: 500 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--mut);
}
.pub .p-ixsub b { color: var(--fg); font-weight: 700; }
.pub .p-ixsub i { color: var(--dim); font-style: normal; padding: 0 3px; }

/* W · L · T bar — same colour grammar as .dbl-conn.up/.down, so the bar and
   the dumbbells teach each other. */
.pub .p-wltbar {
  display: flex; height: 8px; border-radius: 2px; overflow: hidden;
  background: var(--hairline); margin-top: 18px;
}
.pub .p-wltbar i { display: block; min-width: 0; }
.pub .p-wltbar i.w { background: var(--good); }
.pub .p-wltbar i.t { background: var(--hairline-2); }
.pub .p-wltbar i.l { background: var(--bad); }
.pub .p-wltkey {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 9px;
  font: 400 11.5px/1.4 var(--sans); color: var(--mut);
}
.pub .p-wltkey b { font: 600 11.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.pub .p-wltkey .w b { color: var(--good); }
.pub .p-wltkey .t b { color: var(--fg); }
.pub .p-wltkey .l b { color: var(--bad); }
.pub .p-wltkey em { font-style: normal; color: var(--dim); }
/* The corpus size, pushed to the end of the record line: it qualifies the record rather than
   being one of its terms, so it sits apart instead of reading as a fourth outcome. */
.pub .p-wltn { color: var(--dim); margin-left: auto; font-family: var(--mono); font-size: 11px; }

/* ── Across the pipeline — the capability strip ────────────────────────────
   Four tiles in pipeline order. The raw score is the big number, the index chip
   is the scan line, and the grader is named on every tile because that is what
   makes the raw scores incomparable across tiles.
   Tiles are anchors into the detail tabs, so they get a real hover + focus. */
.pub .p-caps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden;
}
.pub .p-cap {
  background: var(--panel); padding: 14px 16px 15px;
  display: flex; flex-direction: column; gap: 4px;
  color: inherit; text-decoration: none;
  transition: background .12s;
}
.pub a.p-cap:hover { background: var(--panel-lift); }
.pub a.p-cap:hover .p-ixdot { box-shadow: 0 0 0 2px var(--panel-lift); }
.pub a.p-cap:hover .p-caph { color: var(--signal); }
.pub .p-cap-skel { gap: 12px; min-height: 132px; }

.pub .p-caph {
  font: 600 var(--p-lbl)/1 var(--sans);
  letter-spacing: var(--p-track); text-transform: uppercase; color: var(--mut);
  display: flex; flex-direction: column; gap: 5px;
  transition: color .12s;
}
.pub .p-caph i {
  font: 400 11px/1.2 var(--sans); font-style: normal;
  letter-spacing: 0; text-transform: none; color: var(--dim);
}

.pub .p-capnum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pub .p-capraw {
  font: 700 clamp(26px, 3.6vw, 34px)/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pub .p-capraw.na { color: var(--dim); }
/* The chip is ~55% of the raw number: clearly secondary in the tile, but identical across all
   four tiles, so reading only the chips left to right gives the whole comparison. */
.pub .p-capidx {
  font: 700 15px/1 var(--mono); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 4px 6px; border-radius: 2px; border: 1px solid transparent;
}
.pub .p-capidx span { font-size: .7em; position: relative; top: -.1em; }
.pub .p-capidx.up { color: var(--good); background: var(--good-dim); }
.pub .p-capidx.down { color: var(--bad); background: var(--bad-dim); }
.pub .p-capidx.even { color: var(--mut); border-color: var(--hairline-2); }
.pub .p-capidx.na { color: var(--dim); border-color: var(--hairline); border-style: dashed; }

.pub .p-capref {
  font: 500 11px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--mut);
  margin-top: 3px;
}
.pub .p-capref i { font-style: normal; color: var(--dim); }
.pub .p-capfoot {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: auto; padding-top: 11px;
}
.pub .p-capmetric { font: 500 11.5px/1.3 var(--sans); color: var(--fg); }
.pub .p-capgrader { font: 400 10.5px/1.3 var(--sans); color: var(--dim); }
/* Which config this tile is reporting. Small, but never omitted: the strip mixes configs by
   design and a reader who assumes one model would be reading it wrong. */
.pub .p-capcfg {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hairline);
  font: 500 10px/1.3 var(--mono); color: var(--dim);
  overflow-wrap: anywhere;
}
.pub .p-cap-na .p-capref { color: var(--dim); }
.pub .p-capsempty { grid-column: 1 / -1; border: none; border-radius: 0; }
.pub .p-capnote { margin: 10px 0 0; font: 400 11.5px/1.55 var(--sans); color: var(--dim); }

/* ── How this is measured ──────────────────────────────────────────────── */
.pub .p-mgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden;
}
.pub .p-mcell { background: var(--panel); padding: 15px 17px 17px; }
.pub .p-mcell h3 {
  margin: 0 0 9px;
  font: 600 var(--p-lbl)/1 var(--sans);
  letter-spacing: var(--p-track); text-transform: uppercase; color: var(--mut);
}
.pub .p-mcell p { margin: 0 0 9px; font: 400 12.5px/1.62 var(--sans); color: var(--fg); }
.pub .p-mcell p:last-child { margin-bottom: 0; }
.pub .p-mcell b { font-weight: 600; }
.pub .p-glyph { font: 400 13px/1 var(--mono); color: var(--signal); }
.pub .p-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pub .p-badgenote { font: 400 11.5px/1.55 var(--sans); color: var(--mut); flex: 1 1 100%; }

/* ── Analyser dumbbell board — .azb-* / .dbl-* come from style.css ─────── */
.pub .azb { margin-bottom: 0; }
.pub .azb-metric { width: 88px; }
.pub .azb-h-metrics > span { width: 88px; }
.pub .p-azmlbl { display: none; }     /* per-cell labels only appear once the header row is gone */
.pub .azb-lab { font-size: 13px; }

/* ── Task boards ───────────────────────────────────────────────────────── */
.pub .pill { font: 600 var(--p-lbl)/1 var(--sans); letter-spacing: var(--p-track); }
.pub .p-boardwrap { margin-top: 14px; }
.pub .p-board {
  width: 100%; border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 4px;
  overflow: hidden;
}
.pub .p-board thead tr { background: var(--ground); }
.pub .p-board thead th {
  font: 600 var(--p-lbl)/1.2 var(--sans);
  letter-spacing: var(--p-track); text-transform: uppercase; color: var(--mut);
  text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--hairline);
}
/* The codename cell is a <th scope="row"> for screen readers — it must NOT inherit the
   header row's micro-caps treatment. A codename is a name, set as typed. */
.pub .p-board tbody th {
  text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400;
  padding: 12px 13px; border-bottom: 1px solid var(--hairline);
}
.pub .p-board tbody tr:last-child th { border-bottom: none; }
.pub .p-board th.num, .pub .p-board td.num { text-align: right; }
.pub .p-board td {
  padding: 12px 13px;
  font: 500 13px/1.35 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--fg); border-bottom: 1px solid var(--hairline);
}
.pub .p-board tr:last-child td { border-bottom: none; }
.pub .p-board td.p-rank { color: var(--dim); width: 1%; padding-right: 0; }
.pub .p-board th.p-name, .pub .p-board td.p-name { min-width: 180px; }
.pub .p-cn { font: 600 13.5px/1.3 var(--mono); color: var(--fg); }
.pub .p-head { font-weight: 700; }

/* Leader: the existing teal fill + 2px left tick. It goes to whoever is genuinely rank 1 —
   INCLUDING the frontier reference when it wins. Teal keeps its one meaning, and a board that
   could only ever paint itself teal would be a brochure. */
.pub .p-board tr.p-lead td { background: var(--signal-bg); }
.pub .p-board tr.p-lead td.p-rank { position: relative; color: var(--signal); }
.pub .p-board tr.p-lead td.p-rank::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 20px; background: var(--signal);
}
/* Reference rows: they sit on the bench surface rather than on the instrument panel — the datum
   the instrument is calibrated against, not a rival column. Ground fill + hairline brackets +
   no rank, all without spending any ink. */
.pub .p-board tr.p-ref td { background: var(--ground); }
.pub .p-board tr.p-ref.p-lead td { background: var(--signal-bg); }
.pub .p-board tr.p-ref td:first-child { border-top: 1px solid var(--hairline-2); }
.pub .p-board tr.p-ref .p-cn { color: var(--mut); font-weight: 500; }
.pub .p-tag {
  display: inline-block; margin-left: 7px; vertical-align: 1px;
  font: 600 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); border: 1px solid var(--hairline-2); border-radius: 2px; padding: 3px 5px;
}
.pub .p-rowsub {
  display: none;                      /* revealed below 900px, when the columns reflow in here */
  margin-top: 6px;
  font: 400 11px/1.5 var(--mono); color: var(--mut);
}
.pub .p-rowsub .k { color: var(--dim); }
.pub .p-cov-inline { display: none; margin-top: 7px; }

/* ── Empty / error: the instrument with no needle ──────────────────────── */
.pub .p-empty {
  font: 400 13px/1.65 var(--sans); color: var(--mut);
  padding: 16px 18px;
  border: 1px solid var(--hairline); border-radius: 4px; background: var(--panel);
}
.pub .p-empty b { color: var(--fg); font-weight: 600; }
.pub .p-ghost { color: var(--dim); }
.pub .p-board tr.p-ghostrow td { color: var(--dim); }

/* ── Skeletons: geometry-preserving, opacity-only (a sweeping gradient would
      be a decorative gradient, which the design system bans) ────────────── */
.pub .p-skel {
  display: inline-block; vertical-align: middle;
  background: var(--panel-lift); border-radius: 2px;
  height: 12px; width: 100%;
  animation: p-pulse 1.4s ease-in-out infinite;
}
.pub .p-skel-v { height: 34px; width: 84px; }
.pub .p-skel-track { height: 20px; width: 300px; max-width: 100%; }
.pub .p-skel-txt .p-skel { height: 22px; margin-bottom: 8px; }
@keyframes p-pulse { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }

/* ── Footer ────────────────────────────────────────────────────────────── */
.pub .p-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 20px; padding-bottom: 32px; margin-top: 8px;
  border-top: 1px solid var(--hairline);
  font: 400 11.5px/1.4 var(--sans); color: var(--mut);
}
.pub .p-asof { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.pub .p-footsep { color: var(--hairline-2); }
.pub .p-foot a { color: var(--mut); text-decoration: none; border-bottom: 1px solid var(--hairline-2); }
.pub .p-foot a:hover { color: var(--signal); border-color: var(--signal); }

/* ── Method note ───────────────────────────────────────────────────────── */
.pub .p-prose { max-width: 68ch; }
.pub .p-prose p { margin: 0 0 13px; font: 400 14px/1.7 var(--sans); color: var(--mut); }
.pub .p-prose p:last-child { margin-bottom: 0; }
.pub .p-prose b { color: var(--fg); font-weight: 600; }

/* ── Focus: the page's first focus styles ──────────────────────────────── */
.pub a:focus-visible, .pub button:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px;
}
/* Tiles are large targets; the outline goes inside so it isn't clipped by the strip's overflow. */
.pub a.p-cap:focus-visible { outline-offset: -3px; }

/* Jumping from a pipeline tile to its tab: land above the heading, not on top of it.
   Smooth scroll is opt-in per motion preference — the reduce block below turns it off. */
.pub #h-detail { scroll-margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.pub) { scroll-behavior: smooth; }
}

/* ── Responsive ─────────────────────────────────────────────────────────
   The board stays a TABLE at every width and never scrolls sideways. A
   leaderboard exists so you can run your eye down one column; card-collapse
   destroys exactly that. Content leaves the column grid instead of the page,
   and nothing is dropped — least of all coverage. */
@media (max-width: 900px) {
  .pub .p-mgrid { grid-template-columns: repeat(2, 1fr); }
  /* Four tiles at 900px would put the raw number and its chip on separate lines in every one.
     Two columns keeps each tile's hierarchy intact; the strip is still one glance. */
  .pub .p-caps { grid-template-columns: repeat(2, 1fr); }
  /* Secondary metrics + run counts reflow into the codename cell. */
  .pub .p-board .p-sec-col { display: none; }
  .pub .p-rowsub { display: block; }
}
@media (max-width: 760px) {
  .pub { --p-gap: 28px; }
  .pub .p-mgrid { grid-template-columns: 1fr; }
  /* Index rows restack: name + index on one line, then the full-width track, then the raw pair.
     The index stays adjacent to the label so the column of numbers is still scannable. */
  .pub .p-ixhead { display: none; }
  .pub .p-ixrow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl val" "trk trk" "sub sub";
    gap: 5px 12px; padding-top: 14px; padding-bottom: 15px;
  }
  .pub .p-ixlbl { grid-area: lbl; }
  .pub .p-ixtrack { grid-area: trk; margin: 3px 0 1px; }
  .pub .p-ixval { grid-area: val; }
  .pub .p-ixsub { grid-area: sub; text-align: left; }
  /* Dumbbell rows restack: label + record, then a full-width track, then the metric cells. */
  .pub .azb-head { display: none; }
  .pub .azb-row { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px 16px; }
  .pub .azb-name { flex: 1 1 auto; }
  .pub .azb-wltcell { width: auto; margin-left: auto; text-align: right; }
  .pub .dbl { flex: 1 1 100%; }
  .pub .azb-metrics { flex: 1 1 100%; justify-content: flex-start; gap: 0; }
  .pub .azb-metric { flex: 1 1 0; width: auto; }
  .pub .p-azmlbl {
    display: block;
    font: 600 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
  }
}
@media (max-width: 560px) {
  .pub { --p-gut: 16px; }
  .pub .p-claim { max-width: none; }
  /* The codename column's min-width is what would otherwise push the table past the gutter and
     reintroduce a horizontal scrollbar. Below this width the name cell just flexes. */
  .pub .p-board th.p-name, .pub .p-board td.p-name { min-width: 0; }
  .pub .p-board thead th, .pub .p-board tbody th, .pub .p-board td { padding-left: 10px; padding-right: 10px; }
  .pub .pill { padding: 16px 14px; }           /* >=44px touch target */
  .pub .p-theme { padding: 15px 13px; }
  .pub .p-foot { padding-bottom: 40px; }
}
@media (max-width: 480px) {
  /* Coverage stops being a column and moves under the codename. Relocated, never dropped. */
  .pub .p-board .p-cov-col { display: none; }
  .pub .p-cov-inline { display: block; }
  /* One tile per row: two 34px readouts side by side in a 160px column would wrap the chip
     under the number and break the tile's one-glance hierarchy. */
  .pub .p-caps { grid-template-columns: 1fr; }
  .pub .p-cap { padding: 13px 14px 14px; }
  .pub .p-capfoot { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pub .p-wltn { margin-left: 0; flex: 1 1 100%; }
}

/* ── Preference queries ────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  .pub { --hairline: var(--hairline-2); --dim: var(--mut); }
  .pub .p-pnl::before, .pub .p-pnl::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pub *, .pub *::before, .pub *::after {
    animation: none !important;
    transition: none !important;
  }
  .pub .p-skel { opacity: .7; }
}
@media (hover: none) {
  .pub .p-theme:hover { color: var(--mut); }
  .pub a.p-cap:hover { background: var(--panel); }
  .pub a.p-cap:hover .p-caph { color: var(--mut); }
  .pub a.p-cap:hover .p-ixdot { box-shadow: 0 0 0 2px var(--panel); }
}

/* The shared .azb-lab (style.css) is nowrap + ellipsis inside a fixed 176px column, which
   truncated the longer analyser names ("Bank Statement Analysis…") and clipped the mode tag
   with them. On the public board the full name matters more than a single-line row, so let
   the label wrap and give the column enough room for two lines of it. Scoped to .pub — the
   admin board keeps its dense single-line treatment. */
.pub .azb-name { flex: 0 0 208px; }
.pub .azb-lab {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: balance;
}

/* Inference-mode tag on an analyser row. Each row shows that analyser's BEST mode, so the
   row must name it — otherwise the number reads as a single configuration when it is a max
   over two. `partial` warns that the winning run skipped documents. */
.pub .azb-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--hairline-2);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  vertical-align: 1px;
  white-space: nowrap;
}
.pub .azb-tag-think {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--signal-dim);
}
.pub .azb-tag-warn {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-dim);
}