/* PABST INTERFERENCE — brand tokens.
   Every colour below is SAMPLED from favicon.png, the league's own mark; the
   per-value provenance, shares and contrast ratios live in
   .interface-design/system.md. ONE JOB PER COLOUR, because on these surfaces
   red and blue are already spoken for by the data:
     blue = the engine's own voice — its chrome AND its readings. Never a direction.
     red  = the exception: negative contribution, optimistic floor, thin history,
            out of tolerance. Nowhere else, so it stays loud.
     gold = one hairline, on midnight only. Ornament, never data.            */
:root {
  /* sampled from the mark */
  --paper:    #e5e5e5;   /* ground                                          */
  --card:     #f5f5f5;   /* raised surface                                  */
  --midnight: #021562;   /* the mark's blue, its largest colour             */
  --ribbon:   #d43845;   /* the mark's red -- MARKS only, fails AA as text  */
  --ribbon-ink: #ae040d; /* the mark's darker red -- red TEXT, 5.91:1       */
  --steel:    #929196;   /* the mark's grey -- hairlines only, 2.48:1       */
  /* derived */
  --recess:   #d8d8da;   /* paper -5%: inputs sit below the surface         */
  --ink:      var(--midnight);     /* body text IS the brand blue, 12.96:1  */
  --reading:  var(--midnight);     /* a reading speaks in the same voice    */
  --exception: var(--ribbon-ink);  /* red that is legible at 11px           */
  --gold:     #c9a227;   /* register, not the mark. Midnight only: 1.92:1
                            on paper, 6.75:1 on midnight. One hairline.     */

  /* borders blend with their surface rather than reading as drawn lines */
  --rule:      color-mix(in srgb, var(--steel) 42%, transparent);
  --rule-soft: color-mix(in srgb, var(--steel) 24%, transparent);
  /* row banding is a wash, not a rule */
  --wash: color-mix(in srgb, var(--steel) 11%, transparent);
  /* the signature's pale extension: 28% keeps it clear of both the surface
     (1.85:1) and the solid core (8.11:1) -- see system.md */
  --reading-tint:   color-mix(in srgb, var(--reading) 28%, transparent);
  --exception-tint: color-mix(in srgb, var(--exception) 28%, transparent);

  /* four text tiers, every one legal at 11px */
  --t1: var(--ink);      /* 12.96:1 */
  --t2: #23305f;         /* 10.05:1 */
  --t3: #464b60;         /*  6.84:1 -- the 11px caption tier */
  --t4: #646470;         /*  4.63:1 -- never on --recess (4.10:1) */

  /* three roles. Display is condensed: the half of the retro-Americana
     register that ships without a webfont (system.md says why). */
  --face-display: "DIN Alternate", "Roboto Condensed", "Liberation Sans Narrow",
                  "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --face-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --face-data: ui-monospace, "SF Mono", "Cascadia Code", "DejaVu Sans Mono", monospace;

  /* 14px base, ratio 1.25, rounded to whole px and to the 4px grid. */
  --s-cap: 11px; --s-body: 14px; --s-h4: 16px; --s-h3: 18px;
  --s-h2: 22px; --s-h1: 28px; --s-display: 44px;

  --u: 4px;                       /* every space is a multiple of this       */
  --pad-tight: 12px;              /* workbench density, held everywhere      */
  --pad: 16px;
  --r-ctl: 2px; --r-card: 4px; --r-over: 6px;   /* small radii: a printed can */

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fast: 140ms;
}
/* dark = the same mark with the blue moved from the ink to the ground; the
   palette gains no colour. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #050b28; --card: #0a1440; --recess: #030818;
    --ink: #edeff5;
    --reading: #9db2ff;          /* --midnight lightened to clear its ground */
    --exception: #ff8a80;        /* --ribbon lightened for the same reason   */
    --steel: #7b7f95;
    --rule:      color-mix(in srgb, var(--steel) 50%, transparent);
    --rule-soft: color-mix(in srgb, var(--steel) 28%, transparent);
    --wash: color-mix(in srgb, var(--steel) 16%, transparent);
    --t1: var(--ink); --t2: #c9cfe4; --t3: #9aa3bf; --t4: #7d86a3;
  }
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0; background: var(--paper); color: var(--t1);
  font-family: var(--face-body); font-size: var(--s-body); line-height: 1.5;
}
h1, h2, h3 { text-wrap: balance; }
p, figcaption, .cap { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--reading); outline-offset: 2px; border-radius: var(--r-ctl); }
#rail :focus-visible { outline-color: var(--gold); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--face-data); font-variant-numeric: tabular-nums; }

/* ---- the instrument rail: navigation as four QUESTIONS, each carrying its
   own live reading. Not a sidebar, not a logo bar — it reports state. ---- */
#rail {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: var(--midnight); color: #edeff5;
  /* the ribbon: the one gold hairline, on the one surface it clears */
  border-bottom: 2px solid var(--gold);
}
#rail .logo { width: 26px; height: 26px; display: block; }
#rail .mark {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--pad); border-right: 1px solid rgba(237, 239, 245, 0.16);
}
#rail .mark .words { display: flex; flex-direction: column; justify-content: center; }
#rail .mark b {
  font-family: var(--face-display); font-size: var(--s-h4); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
#rail .mark span { font-size: var(--s-cap); color: rgba(237, 239, 245, 0.62);
                   font-family: var(--face-data); }
#rail nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; }
#rail a {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  padding: 10px var(--pad); text-decoration: none; color: rgba(237, 239, 245, 0.78);
  border-right: 1px solid rgba(237, 239, 245, 0.16);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  min-height: 44px;
}
#rail a .q {
  font-family: var(--face-display); font-size: var(--s-body);
  letter-spacing: 0.03em; text-transform: uppercase;
}
#rail a .reading { font-family: var(--face-data); font-size: var(--s-cap);
                   color: rgba(237, 239, 245, 0.62); }
#rail a:hover { background: rgba(237, 239, 245, 0.08); color: #fff; }
#rail a[aria-current="page"] {
  color: #fff; border-bottom-color: var(--gold);
  background: rgba(237, 239, 245, 0.12);
}
#rail a[aria-current="page"] .reading { color: var(--gold); }

main { padding: var(--pad) var(--pad) 64px; max-width: 1240px; }
.eyebrow {
  font-family: var(--face-display); font-size: var(--s-cap); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t3); margin: 0 0 4px;
}
.cap { font-size: var(--s-cap); color: var(--t3); margin: 4px 0 0; max-width: 68ch; }

/* ---- THE SIGNATURE: a tolerance bar that also reports whether its own width
   is trustworthy. Solid core = the measured value. Pale extent = +/-1 sd.
   The tick beneath marks the band's own calibration: this instrument knows
   its readings AND how much to trust its error bars. ---- */
.tolerance { position: relative; display: block; width: 100%; height: 14px; }
.tolerance .axis { position: absolute; top: 6px; height: 1px; left: 0; right: 0; background: var(--rule); }
.tolerance .band { position: absolute; top: 3px; height: 8px; background: var(--reading-tint); border-radius: 1px; }
.tolerance .core { position: absolute; top: 0; height: 14px; background: var(--reading); border-radius: 1px; }
.tolerance.neg .core { background: var(--exception); }
.tolerance.neg .band { background: var(--exception-tint); }
.tolerance .zero { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--rule); }
/* calibration mark: over = band too wide, under = too narrow, none = unmeasured */
.calmark { display: inline-block; width: 100%; height: 3px; margin-top: 2px; position: relative; }
.calmark i { position: absolute; height: 3px; top: 0; }
.calmark[data-cal="over"]  i { background: repeating-linear-gradient(90deg, var(--t4) 0 2px, transparent 2px 4px); }
.calmark[data-cal="under"] i { background: var(--exception); opacity: 0.55; }
.calmark[data-cal="none"]  i { background: var(--rule); }

/* Panels: separated by tonal shift and space, NOT by rules on every row. */
.panel { background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r-card);
         padding: var(--pad); margin-top: 24px; }
.panel > h2 { font-family: var(--face-display); font-size: var(--s-h3); font-weight: 600;
              letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 2px; }
table { border-collapse: collapse; width: 100%; }
thead th {
  font-family: var(--face-display); font-size: var(--s-cap); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t3); font-weight: 600; text-align: left;
  padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule);
}
tbody td { padding: 7px 8px 7px 0; border: 0; }
tbody tr:nth-child(even) { background: var(--wash); }   /* tonal, not ruled */
td.r, th.r { text-align: right; }

/* The search control: a milled recess with a clear button inside it, so
   clearing is where the typing is rather than a separate stop on the tab
   order. The button is only in the DOM's flow when there is something to
   clear -- an always-visible dead control reads as broken. */
.searchbox { position: relative; display: inline-flex; align-items: center; }
.searchbox input { padding-right: 26px; min-width: 168px; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox .clear {
  position: absolute; right: 2px; width: 22px; height: 26px; line-height: 1;
  background: none; border: 0; color: var(--t3); font-size: 15px; cursor: pointer;
  border-radius: var(--r-ctl); padding: 0;
}
.searchbox .clear:hover { color: var(--exception); }
.linky {
  font: inherit; font-size: var(--s-cap); background: none; border: 0; padding: 0;
  color: var(--reading); text-decoration: underline; cursor: pointer;
}
.empty { color: var(--t2); padding: 12px 0; }

select, input {
  font: inherit; font-family: var(--face-data); font-size: var(--s-cap);
  background: var(--recess); color: var(--t1);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 5px 7px;
  min-height: 32px;
}
button.act {
  font-family: var(--face-display); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--s-cap); background: var(--midnight); color: #f5f5f5;
  border: 0; border-radius: var(--r-ctl); padding: 8px 14px; min-height: 36px; cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  #rail a, button.act, .row-link { transition: background-color var(--fast) var(--ease),
                                                color var(--fast) var(--ease); }
  button.act:active { transform: scale(0.97); }
}
.denom { font-family: var(--face-data); font-size: var(--s-cap); color: var(--t4); }
/* The hand-off affordance, shared by every surface that hands off. A link
   cannot be told from body text by hue any more -- both are the brand blue,
   because blue is the engine's voice and does not take a second job -- so the
   link is marked by TREATMENT: condensed caps over a rule. */
.row-link { color: var(--reading); font-family: var(--face-display);
            font-size: var(--s-cap); text-transform: uppercase; letter-spacing: 0.05em;
            white-space: nowrap; text-decoration: underline;
            text-decoration-color: var(--rule); text-underline-offset: 3px; }
.row-link:hover { text-decoration-color: currentColor; }
.provisional { color: var(--exception); }