/* ===========================================================================
   Life's Gr8
   Sixteen teams, IDP scoring, one racetrack.

   Colour contract
   ---------------
   Data marks use the validated categorical palette. Both modes were run through
   the palette validator against the exact card surfaces declared below
   (#f5f1e6 light, #14181a dark) and pass every hard gate. Light mode returns a
   sub-3:1 contrast WARN on four of the eight hues, which obligates relief: every
   silk on this site renders beside its three-letter team code, and every race
   lane carries its value as text. Colour is never the only channel, which is
   also the only way sixteen teams can be told apart at all.

   Chrome colours (paper, ink, turf, brass) are separate from data colours and
   are never used to encode a value.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- surfaces & ink ---------------------------------------------------- */
  --page:          #efe9d9;
  --surface:       #f5f1e6;   /* validated chart surface, light */
  --surface-sunk:  #e8e2cf;
  --surface-raise: #fffdf5;
  --ink:           #16150f;
  --ink-2:         #4e4b3f;
  --ink-3:         #86826f;
  --rule:          #d9d2ba;
  --rule-soft:     #e4ddc8;
  --shadow:        0 1px 2px rgba(22,21,15,.06), 0 8px 22px -14px rgba(22,21,15,.30);

  /* --- brand ------------------------------------------------------------- */
  --turf:          #1f5c3a;
  --turf-ink:      #f3f7f1;
  --brass:         #8a6d22;
  --brass-soft:    #e9dcb4;
  --rail:          #c0b696;

  /* --- data: categorical (validated, light) ------------------------------ */
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100;
  --c5:#e87ba4; --c6:#008300; --c7:#4a3aa7; --c8:#e34948;

  /* --- data: sequential blue (light) ------------------------------------- */
  --s100:#cde2fb; --s200:#9ec5f4; --s300:#6da7ec; --s400:#3987e5;
  --s500:#256abf; --s600:#184f95; --s700:#0d366b;

  /* --- data: diverging poles + neutral midpoint -------------------------- */
  --div-pos:  #2a78d6;
  --div-neg:  #e34948;
  --div-mid:  #ddd6be;

  /* --- status (fixed, never themed) -------------------------------------- */
  --ok:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --ok-ink:#006300;

  /* --- type -------------------------------------------------------------- */
  --display: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: 16px;
  --radius: 10px;
  --lane-h: 34px;
}

/* Dark values are selected for the dark surface, not flipped from the light
   ones. Declared under both scopes so the toggle beats the OS either way. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#0c0f10; --surface:#14181a; --surface-sunk:#0f1314; --surface-raise:#1c2124;
    --ink:#f2efe4; --ink-2:#c3c2b7; --ink-3:#898781;
    --rule:#2b3134; --rule-soft:#222729;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.8);
    --turf:#2f8757; --turf-ink:#07130c; --brass:#c9a94e; --brass-soft:#3a3222; --rail:#39403f;
    --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
    --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767;
    --s100:#0d366b; --s200:#184f95; --s300:#256abf; --s400:#3987e5;
    --s500:#6da7ec; --s600:#9ec5f4; --s700:#cde2fb;
    --div-pos:#3987e5; --div-neg:#e66767; --div-mid:#333a3c;
    --ok-ink:#0ca30c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0c0f10; --surface:#14181a; --surface-sunk:#0f1314; --surface-raise:#1c2124;
  --ink:#f2efe4; --ink-2:#c3c2b7; --ink-3:#898781;
  --rule:#2b3134; --rule-soft:#222729;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.8);
  --turf:#2f8757; --turf-ink:#07130c; --brass:#c9a94e; --brass-soft:#3a3222; --rail:#39403f;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
  --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767;
  --s100:#0d366b; --s200:#184f95; --s300:#256abf; --s400:#3987e5;
  --s500:#6da7ec; --s600:#9ec5f4; --s700:#cde2fb;
  --div-pos:#3987e5; --div-neg:#e66767; --div-mid:#333a3c;
  --ok-ink:#0ca30c;
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  font-synthesis-weight: none;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; }
p { margin: 0 0 .8em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.sprite { position: absolute; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--turf); color: var(--turf-ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ masthead --- */
.demo-banner {
  background: var(--brass-soft); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: 13px; line-height: 1.4; padding: 7px var(--gut); text-align: center;
}
.demo-banner strong { font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; }
.demo-banner span { color: var(--ink-2); }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; fill: var(--turf); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: .015em; }
.brand-sub { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.theme-toggle-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brass) 50%, var(--ink) 50%);
}

.tabs { border-top: 1px solid var(--rule-soft); }
.tabs-inner {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 13px; cursor: pointer; white-space: nowrap;
  font-family: var(--display); font-size: 15px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--turf); }

/* --------------------------------------------------------------- layout -- */
main { display: block; padding: 20px 0 56px; min-height: 60vh; }
main:focus { outline: none; }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 16px; overflow: hidden;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 16px 10px;
}
/* On a phone the aside (a chip or a figure) wraps under the heading rather than
   squeezing the heading and its blurb into a narrow column. */
.card-head { flex-wrap: wrap; }
.card-head > div:first-child { flex: 1 1 240px; min-width: 0; }
.card-head h2 { font-size: 20px; letter-spacing: .02em; }
.card-head h3 { font-size: 17px; }
.card-body { padding: 0 16px 16px; }
.card-body.flush { padding-inline: 0; }
.eyebrow {
  font-family: var(--display); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0; }
.grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid.side { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); } }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-2); background: var(--surface-sunk);
  white-space: nowrap;
}
.chip.good { color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); }
.chip.bad  { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--rule)); }
.chip.live { color: var(--brass); border-color: var(--brass); }
.chip.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.btn {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
}
.btn:hover { border-color: var(--rail); color: var(--ink); }
.btn[aria-pressed="true"] { background: var(--turf); border-color: var(--turf); color: var(--turf-ink); font-weight: 600; }

.empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------- silks --- */
/* Sixteen teams, eight validated hues. Pattern is the second identity channel
   and the three-letter code beside it is the third. Never colour alone. */
.silk {
  --silk: var(--c1);
  display: inline-block; flex: none;
  width: 17px; height: 17px; border-radius: 4px;
  background: var(--silk);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.silk[data-pattern="hoops"] {
  background: repeating-linear-gradient(
    180deg, var(--silk) 0 3.5px, var(--surface-raise) 3.5px 7px);
}
.silk.lg { width: 22px; height: 22px; border-radius: 5px; }
.silk.sm { width: 13px; height: 13px; border-radius: 3px; }

.tname { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tcode {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .07em; color: var(--ink-2); flex: none;
}
.tfull { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmgr { color: var(--ink-3); font-size: 12px; }

/* -------------------------------------------------------------- paddock --- */
.race { border-top: 1px solid var(--rule-soft); padding: 14px 0 18px; }
.race:first-child { border-top: 0; }
.race-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 16px 10px; }
.race-title { font-size: 19px; }
.race-blurb { font-size: 13px; color: var(--ink-2); max-width: 52ch; margin: 2px 0 0; }
.race-gap { text-align: right; flex: none; }
.race-gap b { font-family: var(--display); font-size: 21px; display: block; line-height: 1; }
.race-gap span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.track {
  position: relative; padding: 4px 16px 0;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 calc(12.5% - 1px), var(--rule-soft) calc(12.5% - 1px) 12.5%);
  background-position: 0 0; background-size: calc(100% - 100px) 100%;
  background-repeat: no-repeat; background-origin: content-box;
}
.finish {
  position: absolute; top: 2px; bottom: 6px; width: 8px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--ink-3) 0 4px, transparent 4px 8px);
  opacity: .5;
}

.lane {
  display: grid; grid-template-columns: 52px minmax(0,1fr) 62px;
  align-items: center; gap: 8px; height: var(--lane-h);
}
.lane + .lane { border-top: 1px solid color-mix(in srgb, var(--rule-soft) 60%, transparent); }

/* The jockey line. Kept quiet on purpose: one line, small, muted, clipped, so the
   horses stay the loudest thing on the track. Silk and code keep their place and
   the value stays level with the horse. */
.lane.has-jockeys {
  height: auto; grid-template-rows: 26px auto; row-gap: 0; padding-bottom: 6px;
}
/* Every cell is placed explicitly. Pinning only some of them to row 1 lets the
   grid place those first and push the track into an implicit fourth column. */
.lane.has-jockeys .lane-id    { grid-column: 1; grid-row: 1; }
.lane.has-jockeys .lane-track { grid-column: 2; grid-row: 1; height: 26px; }
.lane.has-jockeys .lane-val   { grid-column: 3; grid-row: 1; }
.lane-jockeys {
  grid-column: 2 / 4; grid-row: 2; margin-top: -2px;
  font-size: 11px; line-height: 1.25; letter-spacing: .01em; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lane.is-leader .lane-jockeys { color: var(--ink-2); }
/* The finish post runs the full height of the track; the names sit on top of it. */
.lane-jockeys { position: relative; z-index: 2; }
.lane-jockeys .jk { background: var(--surface); box-shadow: 0 0 0 2px var(--surface); padding-right: 3px; }
.lane-more { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: .8; }
.lane-id { display: flex; align-items: center; gap: 5px; }
.lane-place {
  font-family: var(--display); font-size: 11px; color: var(--ink-3);
  width: 15px; text-align: right; flex: none;
}
.lane-track { position: relative; height: 100%; min-width: 0; }
.lane-rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--rule); transform: translateY(-.5px);
}
.lane-prog {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--p, 0) * 100%);
  transition: width 1.05s cubic-bezier(.22,.75,.28,1);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.lane-dust {
  position: absolute; right: 12px; left: 0; top: 50%; height: 3px;
  transform: translateY(-1.5px); border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--silk) 55%, transparent));
}
.lane-runner {
  position: absolute; right: -9px; top: 50%;
  width: 28px; height: 18px; transform: translateY(-50%);
  fill: var(--silk); filter: drop-shadow(0 1px 0 var(--surface));
}
/* A hooped stable gets two surface-coloured bands cut through the horse, which
   is the same second identity channel the silk swatch beside it already shows. */
.lane[data-pattern="hoops"] .lane-runner { --band: var(--surface); }
.lane-val {
  font-size: 13px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.lane.is-leader .lane-val { color: var(--ink); }
.lane.is-leader .lane-place { color: var(--brass); font-weight: 700; }

.scrub { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.scrub label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.scrub input[type="range"] { flex: 1; min-width: 0; accent-color: var(--turf); }
.scrub output { font-family: var(--display); font-size: 15px; min-width: 62px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .lane-prog { transition: none; }
  .chip.live::before { animation: none; }
}

/* --------------------------------------------------------------- tables --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 8px 9px; text-align: right; white-space: nowrap; }
table.data th {
  font-family: var(--display); font-weight: 500; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--surface); z-index: 2;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th[aria-sort]:not([aria-sort="none"]) { color: var(--ink); }
table.data th[aria-sort="descending"]::after { content: " \2193"; }
table.data th[aria-sort="ascending"]::after { content: " \2191"; }
table.data td { border-bottom: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; }
table.data th:first-child, table.data td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1;
}
table.data th:first-child { z-index: 3; }
table.data tbody tr:hover td { background: var(--surface-sunk); }
table.data tbody tr:hover td:first-child { background: var(--surface-sunk); }
table.data .rk { color: var(--ink-3); width: 26px; }
.cut td { border-bottom: 2px dashed var(--brass) !important; }
.pos-good { color: var(--ok-ink); font-weight: 600; }
.pos-bad  { color: var(--crit); font-weight: 600; }

/* --------------------------------------------------------------- charts --- */
.meter { position: relative; height: 9px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--s400); }
.dv { display: grid; grid-template-columns: 1fr; gap: 2px; }

.dumbbell { position: relative; height: 18px; min-width: 120px; }
.dumbbell .bar { position: absolute; top: 50%; height: 2px; transform: translateY(-1px); background: var(--rule); }
.dumbbell .pt { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.dumbbell .pt.exp { background: var(--ink-3); }
.dumbbell .pt.act { background: var(--c1); }

.divbar { position: relative; height: 16px; }
.divbar .zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--div-mid); left: 50%; }
.divbar > i { position: absolute; top: 3px; height: 10px; border-radius: 3px; }
.divbar > i.pos { background: var(--div-pos); left: 50%; }
.divbar > i.neg { background: var(--div-neg); right: 50%; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-2); margin: 10px 0 0; padding: 0 2px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.h2h { border-collapse: collapse; font-size: 11px; }
.h2h th, .h2h td { padding: 0; }
.h2h td.cell { width: 26px; height: 26px; text-align: center; border: 1px solid var(--surface); font-variant-numeric: tabular-nums; }
.h2h td.self { background: var(--surface-sunk); color: var(--ink-3); }
.h2h th.rowh { text-align: right; padding-right: 7px; position: sticky; left: 0; background: var(--surface); }
.h2h th.colh { height: 58px; vertical-align: bottom; padding-bottom: 5px; }
.h2h th.colh span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .06em; }

/* ------------------------------------------------------------ home card --- */
.hero {
  background: linear-gradient(170deg, var(--turf), color-mix(in srgb, var(--turf) 74%, #000));
  color: var(--turf-ink); border: 0; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.55) 22px 23px);
}
.hero-inner { padding: 20px 16px 22px; position: relative; z-index: 1; }
.hero-eyebrow { font-family: var(--display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .82; }
.hero h1 { font-size: clamp(34px, 9vw, 56px); line-height: .94; margin: 6px 0 8px; letter-spacing: .005em; }
.hero p { margin: 0; max-width: 46ch; opacity: .9; font-size: 14.5px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.hero-stat b { font-family: var(--display); font-size: 27px; display: block; line-height: 1; }
.hero-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }

.story { display: flex; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--rule-soft); }
.story:first-child { border-top: 0; }
.story-mark { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-sunk); font-family: var(--display); font-size: 15px; color: var(--ink-2); }
.story h4 { font-size: 15.5px; margin-bottom: 2px; }
.story p { font-size: 13.5px; color: var(--ink-2); margin: 0; }

.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--rule-soft); }
.award { background: var(--surface); padding: 12px 13px; }
.award-label { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.award-team { display: flex; align-items: center; gap: 6px; margin: 5px 0 2px; font-weight: 600; font-size: 13.5px; }
.award-val { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.award-note { font-size: 11.5px; color: var(--ink-3); }

/* ------------------------------------------------------ stat of the week --- */
.sotw { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 4px 0 14px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 8px; }
.sotw-num b { font-family: var(--display); font-size: 46px; line-height: .95; display: block; }
.sotw-num span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sotw-who p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.sotw-list { list-style: none; margin: 0; padding: 0; }
.sotw-list li { display: grid; grid-template-columns: 34px minmax(0,1fr) 90px 48px; gap: 10px;
  align-items: center; padding: 7px 0; border-top: 1px solid var(--rule-soft); font-size: 13.5px; }
.sotw-list li:first-child { border-top: 0; }
.sotw-rank { color: var(--ink-3); font-size: 12px; }
.sotw-name { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sotw-name em { font-style: normal; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sotw-val { text-align: right; font-weight: 600; }
.sotw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sotw-rotation { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 420px) {
  .sotw-list li { grid-template-columns: 30px minmax(0,1fr) 44px; }
  .sotw-bar { display: none; }
}

/* --------------------------------------------------------------- recap --- */
.recap-body { font-size: 15.5px; line-height: 1.72; max-width: 66ch; }
.recap-body .lede { font-size: 17px; color: var(--ink); border-left: 3px solid var(--brass); padding-left: 14px; }
.recap-body p + p { margin-top: .95em; }
.recap-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.archive-item {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--rule-soft); width: 100%; background: none; border-left: 0;
  border-right: 0; border-bottom: 0; text-align: left; cursor: pointer;
}
.archive-item:hover { background: var(--surface-sunk); }
.archive-item b { font-family: var(--display); color: var(--ink-3); font-size: 13px; flex: none; width: 46px; }
.archive-item span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- blotter --- */
.txn { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--rule-soft); }
.txn:first-child { border-top: 0; }
.txn.pending { background: color-mix(in srgb, var(--brass-soft) 45%, var(--surface)); }
.txn-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.txn-time { font-size: 11.5px; color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.txn-line { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.txn-line em { font-style: normal; color: var(--ink); font-weight: 500; }
.mv { display: inline-flex; align-items: center; gap: 5px; }
.mv-in  { color: var(--ok-ink); font-weight: 700; }
.mv-out { color: var(--crit); font-weight: 700; }
.ppos { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.day-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface-sunk);
  padding: 6px 16px; font-family: var(--display); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  border-block: 1px solid var(--rule-soft);
}

/* ------------------------------------------------------------- loading --- */
.loading { padding: 60px 0; text-align: center; color: var(--ink-3); }
.loading-rail { display: block; width: min(320px, 80%); height: 2px; background: var(--rule); margin: 0 auto 18px; position: relative; border-radius: 2px; }
.loading-runner { position: absolute; top: -7px; width: 24px; height: 16px; background: var(--turf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 44'%3E%3Cpath d='M4.5 33.5c2.6.2 4.6-.6 6.4-2.1 1.3-1.1 2.4-2.4 3.6-3.6.8-.8 1.7-1.4 2.9-1.5 2.6-.2 5.1.2 7.6.7 2.9.6 5.8 1 8.8.7 1.6-.2 3.1-.6 4.5-1.4l2.4 5.2c.3.7 1 1 1.7.8.7-.3 1-1.1.7-1.8l-2.3-5 4.6-2.7 2.7 5.9c.3.7 1.1 1 1.8.7.7-.3 1-1.1.6-1.8l-2.9-6.4c1-1.2 1.7-2.6 2-4.2l.5-2.6 3.9-1.4c1.4-.5 2.5-1.6 2.9-3.1l.8-2.8a1 1 0 0 0-.5-1.2l-4.7-2.3a4.6 4.6 0 0 0-4.2.05l-5.8 3.1-10.4.9c-3.3.3-6.4 1.6-8.9 3.8l-4.6 4-6.9 1.5C7 15.9 4.2 18 2.7 21l-.5 1c-.5 1-.5 2.2 0 3.2l1.4 2.8c.4.8.5 1.7.3 2.6l-.3 1.3a1.2 1.2 0 0 0 .9 1.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: gallop 1.7s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes gallop { 0% { left: 0; } 100% { left: calc(100% - 24px); } }
.fail { border: 1px solid var(--crit); background: color-mix(in srgb, var(--crit) 8%, var(--surface));
  padding: 16px; border-radius: var(--radius); }
.fail h2 { color: var(--crit); font-size: 18px; margin-bottom: 6px; }
.fail code { font-size: 12.5px; background: var(--surface-sunk); padding: 2px 5px; border-radius: 4px; }

/* -------------------------------------------------------------- footer --- */
.footer { border-top: 1px solid var(--rule); background: var(--surface-sunk); padding: 22px 0 40px; }
.footer-inner { font-size: 12.5px; color: var(--ink-3); }
.footer-built { margin-bottom: 4px; color: var(--ink-2); }
.footer p { margin: 0 0 4px; }

@media (min-width: 720px) {
  :root { --gut: 24px; --lane-h: 36px; }
  .lane { grid-template-columns: 116px minmax(0,1fr) 78px; }
  .card-head { padding: 16px 20px 12px; }
  .card-body { padding: 0 20px 20px; }
  .race-head, .track, .scrub { padding-inline: 20px; }
  .txn, .award, .story, .archive-item, .day-head { padding-inline: 20px; }
  .hero-inner { padding: 34px 28px 32px; }
}