/* Receipts tokens. Brand colours mirror brand/tokens.css
   (tests/test_receipts_build.py keeps them in sync). */
@font-face{font-family:"Bebas Neue";src:url("../fonts/bebas-neue.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --raps-red:#CE1141;
  --raps-black:#0B0B0F;
  --raps-white:#F5F5F7;
  --raps-silver:#A1A1A4;
  --raps-gold:#B4975A;
  /* The brand red lifted to carry small text on --raps-black, where
     --raps-red itself measures 3.54:1. Same hue, same saturation, more
     lightness: 4.63:1. --raps-red stays the brand value and keeps every
     job it already passes -- on paper it is 4.92:1. */
  --accent-on-dark:#ED2155;

  --paper:#F4F1EA;
  --paper-ink:#0B0B0F;
  --paper-leader:rgba(11,11,15,.4);  /* dotted leaders: paper-ink at 40% */
  --ink-on-accent:#FFFFFF;           /* text on accent-ink blocks (tag, total bar) */

  /* printer (game pages) */
  --printer-hi:#26262C;
  --printer-lo:#0E0E11;
  --printer-shadow:rgba(0,0,0,.4);
  --printer-slot:#050507;
  --printer-slot-shadow:#000000;
  --printer-label:#A1A1A4;  /* was #6B6B74: 2.85:1 on the housing */

  /* store floor (house pages), greys between black and silver */
  --house-rule:#2C2C35;              /* section rules, table lines */
  --house-line:#3A3A44;              /* ribbon midline, toggle borders */
  --house-loss:#4A4A55;
  --rw-band-3:#6B2230;               /* Rewind board: a notable day */
  --rw-band-4:#9B2436;               /* Rewind board: a big one */              /* loss bars in the season ribbon */
  --house-leader:rgba(161,161,164,.5);  /* dotted leaders: silver at 50% */

  --font-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --font-body:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;

  /* skin tokens: set per game on <body> (site/skins.json) */
  --field:var(--raps-red);
  --stripe:rgba(0,0,0,.10);
  --ghost:rgba(255,255,255,.22);
  /* The ascii mural draws in the field's own ink, so a skin that changes
     --field changes what the art is drawn in without touching the art.
     --mural-op carries the weight; .42 is what Ron picked on 2026-09-20. */
  --mural-ink:#000000;
  --mural-op:.42;
  --nav-ink:#FFFFFF;
  --ink-accent:var(--raps-red);

  /* The focus ring has no one colour: gold is 7.03:1 on the house ground but
     1.99:1 on the Icon field and 2.48:1 on paper. Each surface names its own,
     and the field borrows --nav-ink, which every skin already has to pass
     against --field, so a new jersey cannot bring an invisible ring with it. */
  --focus-ring:var(--raps-gold);

  /* Type scale, in rem so the reader's own font size moves it. The floor is
     --t-micro: mono labels are uppercase, tracked and a few words long, which
     holds at 12px where a sentence would not. Anything read as prose starts at
     --t-sm. Nothing below --t-micro ships. */
  --t-micro:0.75rem;   /* 12 -- labels, stubs, footer, table heads, chips */
  --t-meta:0.875rem;   /* 14 -- nav, table cells, receipt base, leader rows */
  --t-sm:1rem;         /* 16 -- receipt lines, timeline titles */
  --t-base:1.125rem;   /* 18 -- body prose */
  --t-lede:1.25rem;    /* 20 -- ledes, about copy */
  --t-tldr:1.375rem;   /* 22 -- the receipt's headline */
  --t-score:1.625rem;  /* 26 -- team names on the receipt */
  --t-stub:2.125rem;   /* 34 -- a stub's W/L */

  /* Legibility over a video thumbnail, whose brightness the site does not
     control: a play glyph and its label sit on someone else's photograph. */
  --over-media:rgba(0,0,0,.55);
  --over-media-text:rgba(0,0,0,.70);

  --gutter:16px;
}

*,*::before,*::after{box-sizing:border-box}
/* Without this the directory's four form controls render in light UA chrome
   on a black page: white dropdown, light scrollbars, light caret. */
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--raps-black);color:var(--raps-white);font:400 var(--t-base)/1.45 var(--font-body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* 345 links precede the content on the directory, so a keyboard reader had to
   tab through the whole nav on every page. Off-screen until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:30;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  background:var(--raps-white);color:var(--raps-black);
  font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.site-nav{position:relative;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:14px var(--gutter);font:600 var(--t-meta)/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.site-nav__brand{margin-right:auto;font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.14em;text-decoration:none}
/* Wraps rather than clipping: at a raised root font size five labels no
   longer fit one phone-width row. */
.site-nav nav{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;margin-block:-16px}
/* The padding is the tap target, the negative margin keeps the bar its old
   height: nav links measured 13px tall before this, against a ~44px thumb. */
.site-nav nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px;text-decoration:none}
.site-nav nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:480px){.site-nav__brand{display:none}}
/* Five labels plus their tap padding need more than 288px of content box, so
   the gap closes rather than the page scrolling. */
@media (max-width:360px){.site-nav{gap:10px}.site-nav nav{gap:8px}}

/* Statline: one block, two grounds. It lives here rather than in house.css
   because the person page and the receipt load different stylesheets and this
   is the only one both get. --stat-accent is redefined on paper below. */
.statline{--stat-accent:var(--accent-on-dark);
  border-top:1.5px dashed var(--house-rule);padding-top:14px;margin-top:10px}
/* Three numbers side by side. The label sits under its number, so the row
   scans as figures first and reads as one object rather than three cards. */
.statnums{display:flex;gap:clamp(18px,6vw,34px);margin:10px 0 0;padding:0}
.statnums__n{display:flex;flex-direction:column-reverse;gap:2px}
.statnums__n dd{margin:0;font:400 clamp(2.5rem,10vw,3.75rem)/.85 var(--font-display);
  color:var(--stat-accent);font-variant-numeric:tabular-nums}
.statnums__n dt{font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.16em;
  color:var(--raps-silver)}
/* What the big numbers miss. Nothing that did not happen gets a line. */
.statbullets{margin:12px 0 0;padding:0 0 0 1.1em;list-style:none}
.statbullets li{position:relative;font:400 var(--t-meta)/1.65 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--raps-white)}
.statbullets li::before{content:"·";position:absolute;left:-1.1em;
  color:var(--stat-accent);font-weight:700}
.statline__when{display:flex;justify-content:space-between;gap:10px;
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--house-rule);
  font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.1em}
.statline__res{color:var(--raps-silver)}
.statline__res.is-w{color:var(--stat-accent)}
.statline__go{display:inline-flex;align-items:center;min-height:44px;
  font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.14em;
  text-decoration:none;color:var(--stat-accent)}
.statline__go:hover{text-decoration:underline;text-underline-offset:4px}
.statline__play{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;width:100%;aspect-ratio:16/9;margin-top:6px;padding:14px;
  border:2px solid var(--stat-accent);background:none;color:var(--stat-accent);
  font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.14em;cursor:pointer}
.statline__play .r-hl__glyph{display:block;width:0;height:0;
  border-left:26px solid currentColor;border-top:16px solid transparent;
  border-bottom:16px solid transparent}
.statline__play:hover{background:var(--stat-accent);color:var(--raps-black)}

/* The stepper. Same chip as the season toggle and the month rail, so "go
   somewhere" is one shape across the site. Two columns on a phone with the
   up-link spanning beneath; three across once there is room, up in the middle
   where it sits between the two directions it is neither of. */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px 0 4px}
.pager__step,.pager__up{display:flex;flex-direction:column;justify-content:center;
  gap:3px;min-height:56px;padding:8px 14px;border:1.5px solid var(--house-line);
  font:700 var(--t-micro)/1.2 var(--font-mono);letter-spacing:.12em;
  text-decoration:none;color:inherit}
.pager__step--prev{grid-column:1}
/* Forced right, so a missing previous does not slide next into its place. */
.pager__step--next{grid-column:2;text-align:right}
/* The up-link keeps its own row at every width. It is a different kind of
   move -- out of this section, not sideways within it -- and sitting it
   between the two steps on a wide screen made it look like a third sibling. */
.pager__up{grid-column:1 / -1}
.pager__dir{color:var(--raps-silver)}
.pager__dir--up{color:var(--accent-on-dark)}
.pager__to{font-size:var(--t-meta)}
.pager__step:hover,.pager__up:hover,
.pager__step:focus-visible,.pager__up:focus-visible{border-color:currentColor}
@media (min-width:640px){
  .pager__up{justify-self:start;min-width:min(100%,340px)}
}

.site-foot a{display:inline-flex;align-items:center;min-height:24px;text-underline-offset:3px}
.site-foot{position:relative;z-index:1;padding:28px var(--gutter) 40px;font:400 var(--t-micro)/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--raps-silver);text-align:center}

/* Both values mark the active section. "true" is a leaf page inside it (a game,
   a person, a rewind day), which the nav link does not itself point at, so it
   gets the quieter rule. */
.site-nav nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.site-nav nav a[aria-current="page"]{text-decoration-thickness:2px}
.site-nav nav a[aria-current="true"]{text-decoration-thickness:1px;text-decoration-style:dotted}

/* Stat table ---------------------------------------------------------
   One primitive for the site's tabular numbers, on either ground. It is a
   real <table> on purpose. The grid it replaces sized its stat columns in
   `ch`, and `ch` resolves against each row's own font-size -- so a 12px head
   and a 14px body could not line up by construction, and the drift grew the
   further left you looked (12.4px off at PTS, 0 at MIN). A table's columns
   are one measurement every row shares, which makes that bug unrepresentable.

   Rank, not just rows. A stat line has an order of importance and the type
   carries it in ink, not weight: nothing here is bold (Ron, Sep 20). Three
   shades of the ground's own colour -- the subject and the figure the list is
   sorted by at full strength, the supporting figures a step back, the context
   figure nobody scans for two steps back. Declared per column by the template.

   Grouping. A row may own an annotation, so rows have uneven heights and the
   eye loses the unit. Each subject is therefore its own <tbody>: correct
   semantics, and the hook for a whisper-light band that alternates per unit
   rather than per line. The band rides the rows, not the tbody, so it inks in
   with its text on the receipt instead of arriving ahead of it. */
:root{
  --st-band:rgba(245,245,247,.05);
  --st-band-hi:rgba(245,245,247,.09);
  --st-rule:var(--house-rule);
  --st-ink-1:var(--raps-white);          /* subject, lead figure */
  --st-ink-2:rgba(245,245,247,.78);      /* supporting figures */
  --st-ink-3:var(--raps-silver);         /* context, zeros, annotations */
  --st-gap:10px;      /* between columns */
  --st-bleed:8px;     /* how far the band runs past the text column */
}
.stat-table{
  width:calc(100% + var(--st-bleed) * 2);
  margin-inline:calc(var(--st-bleed) * -1);
  border-collapse:collapse;text-align:right;
  font:400 var(--t-meta)/1.5 var(--font-mono);font-variant-numeric:tabular-nums}
.stat-table th,.stat-table td{padding:3px var(--st-gap) 3px 0;vertical-align:baseline}
/* The end cells carry the bleed, so the text column still lines up with the
   lines printed above and below the table while the band runs past them. */
.stat-table tr>:first-child{width:100%;text-align:left;padding-left:var(--st-bleed)}
.stat-table tr>:last-child{padding-right:var(--st-bleed)}
/* Breathing room at the edges of a unit, never between a row and its note.
   ~24px between subjects against ~0 within one: that ratio is what makes the
   pair read as a single object, and it is what carries the grouping when the
   band is switched off. */
.stat-table tbody tr:first-child>*{padding-top:11px}
.stat-table tbody tr:last-child>*{padding-bottom:13px}
/* A unit ending in a figure and one ending in an annotation end in different
   faces, whose boxes sit differently against their own text. Equal padding
   left an unequal gap (16px against 21.8px), so the figure-only case takes
   the difference back. */
.stat-table tbody tr:last-child:not(.stat-table__note)>*{padding-bottom:19px}

.stat-table thead th{
  padding-bottom:7px;font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--st-ink-3);border-bottom:1px solid var(--st-rule)}
/* Tracking adds a trailing space after the last letter, which right-aligned
   text cannot hide: without this the heads sit ~1px left of their figures. */
.stat-table thead th:not(:first-child){padding-right:calc(var(--st-gap) - .1em)}
.stat-table thead th:last-child{padding-right:calc(var(--st-bleed) - .1em)}

/* The three voices, all at 400. */
.stat-table th{font-weight:400}
.stat-table__name{font-size:var(--t-sm);letter-spacing:.01em;color:var(--st-ink-1);
  max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-table td{color:var(--st-ink-2)}
.stat-table td.stat-table__lead{font-size:var(--t-sm);color:var(--st-ink-1)}
.stat-table td.stat-table__mute,.stat-table td.is-zero{color:var(--st-ink-3)}
/* The annotation belongs to the row above it: flush left under the name, in
   the body face rather than the figure face, and tight to what it annotates.
   The face and the ink subordinate it; an indent on top of those was one
   signal too many (Ron, Sep 20). */
.stat-table tr.stat-table__note>td{padding-top:0;text-align:left;
  font:400 var(--t-sm)/1.3 var(--font-body);color:var(--st-ink-3)}

.stat-table tbody:nth-of-type(even) tr{background:var(--st-band)}
@media (hover:hover){.stat-table tbody:hover tr{background:var(--st-band-hi)}}
/* One row per subject, so there is no unit to group and the <tbody> machinery
   above has nothing to do: band the rows themselves. Not for a table whose
   rows can be filtered out -- :nth-child counts hidden rows too, so the
   stripes would drift the moment anything was hidden. */
/* No bleed on this ground: these tables sit in an overflow-x wrapper, where a
   negative margin is 8px of scrollable nothing (measured: 985 against a 977
   client width). The band runs the full column instead, which is what a table
   row wants anyway -- the bleed exists so a band can run past the receipt's
   own padding, and there is no padding to run past here. */
.stat-table--rows{--st-bleed:0}
.stat-table--rows tbody tr:nth-child(even){background:var(--st-band)}
.stat-table--rows tbody tr:first-child>*{padding-top:6px}
.stat-table--rows tbody tr:last-child>*,
.stat-table--rows tbody tr:last-child:not(.stat-table__note)>*{padding-bottom:6px}
.stat-table--rows tbody tr>*{padding-top:6px;padding-bottom:6px}
@media (hover:hover){.stat-table--rows tbody tr:hover{background:var(--st-band-hi)}}
.stat-table__name a{display:block;padding:4px 0;margin:-4px 0;text-decoration:none}
.stat-table__name a:hover,.stat-table__name a:focus-visible{
  text-decoration:underline;text-underline-offset:4px}

/* Printed on paper. The shades are ink at strength rather than greys, so they
   stay the paper's own colour: 15.6:1, 8.4:1 and 5.1:1 on --paper, where the
   quietest at 55% measured 4.39:1 and missed the 4.5 floor.

   They sit on .receipt, not on .stat-table, because the quarter block beside
   the rotation ranks its rows the same way and should not have to invent its
   own scale (Ron, Sep 20). */
.receipt{
  --st-band:rgba(11,11,15,.045);
  --st-band-hi:rgba(11,11,15,.08);
  --st-rule:rgba(11,11,15,.22);
  --st-ink-1:var(--paper-ink);
  --st-ink-2:rgba(11,11,15,.75);
  --st-ink-3:rgba(11,11,15,.60)}
.receipt .stat-table__name a{color:inherit}