/* jockeychallenge.live — members'-enclosure green with gold spent on the leader only.
   Light is the base; dark is a true green-black night version, not an inversion. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
}

:root {
  --ground: #f6f9f6;
  --card: #ffffff;
  --ink: #15251d;
  --muted: #5c6f64;
  --line: #dde6df;
  --line-soft: #e9f0ea;
  --brand: #175e42;
  --brand-ink: #0f4531;
  --gold: #a07d1c;
  --gold-wash: #faf3df;
  --live: #c43a2f;
  --live-wash: #fbeae8;
  --final-wash: #e7f1ec;
  --adline: #eef3ef;
  --link: #146149;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e1713;
    --card: #16221c;
    --ink: #e7efe9;
    --muted: #93a79a;
    --line: #26352d;
    --line-soft: #1d2b24;
    --brand: #4da581;
    --brand-ink: #7cc4a4;
    --gold: #e0b54d;
    --gold-wash: #2a2415;
    --live: #e2685e;
    --live-wash: #33201d;
    --final-wash: #1a2f26;
    --adline: #1c2a23;
    --link: #8ed3b1;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cond { font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600; }

.masthead {
  position: sticky; top: 0; z-index: 5;
  background: var(--card);
  border-bottom: 2px solid var(--brand);
  padding: 0.6rem 1rem 0.5rem;
}
.mast-inner { max-width: 1060px; margin: 0 auto; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.wordmark { font-size: 1.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.wordmark .tld { color: var(--gold); }
.mast-date { color: var(--muted); font-size: 0.85rem; }
.mast-note { margin-left: auto; color: var(--muted); font-size: 0.78rem; }
.mast-note .dot { color: var(--live); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 1rem; }

.scorebar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  color: var(--muted); font-size: 0.82rem; margin: 0.2rem 0 1rem;
}
.scorebar .chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line); border-radius: 3px; padding: 0.1rem 0.5rem;
  background: var(--card); color: var(--ink); font-variant-numeric: tabular-nums;
}
.scorebar .chip b { color: var(--brand-ink); }

/* reserved ad containers: real estate is held now so nothing shifts when tags land */
.ad {
  background: var(--adline);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; margin: 0 0 1.25rem;
}
.ad span { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.ad-tall { min-height: 110px; margin-top: 1.4rem; }

.empty { color: var(--muted); max-width: 48ch; }

.grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
/* Two columns only once each can carry a full box-challenge board (~453px min-content:
   rank + rug + Left + the 1·2·3 tally + Pts + Max). At 880px the columns came out ~420px
   and CSS 1fr won't shrink a track below its content, so the whole page scrolled sideways. */
@media (min-width: 980px) { .grid { grid-template-columns: 1fr 1fr; } }

.meet {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  overflow: clip; display: flex; flex-direction: column; align-self: start;
}
/* sticky under the masthead so long boards keep their venue in view (overflow: clip on
   .meet, not hidden — hidden would break the sticky) */
.meet-head {
  padding: 0.75rem 0.9rem 0.6rem; display: flex; align-items: center; gap: 0.6rem;
  position: sticky; top: 3.35rem; background: var(--card); z-index: 2;
}
.venue { font-size: 1.45rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }
.code-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 6px; min-height: 15px; margin-bottom: 0.15rem;
}
.country-flag { width: 20px; height: 15px; object-fit: contain; flex: none; border-radius: 1px; }
.status { margin-left: auto; flex: none; }
.pill {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 10rem; padding: 0.22rem 0.65rem; white-space: nowrap;
}
.pill-live { background: var(--live-wash); color: var(--live); }
.pill-live .ld {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); margin-right: 0.3rem; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .pill-live .ld { animation: none; } }
.pill-final { background: var(--brand); color: #fff; }
.pill-next { border: 1px solid var(--line); color: var(--muted); background: transparent; }

.raceline {
  display: flex; align-items: center; gap: 0.6rem; padding: 0 0.9rem 0.55rem;
  font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.racebar { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.racebar i { display: block; height: 100%; background: var(--brand); }

.winline {
  padding: 0.5rem 0.9rem; background: var(--final-wash); color: var(--brand-ink);
  font-size: 0.85rem; border-top: 1px solid var(--line-soft);
}

/* live-contest read: the one-sentence state line, and the arithmetic behind it */
.stateline {
  padding: 0.45rem 0.9rem; color: var(--muted); font-size: 0.82rem;
  border-top: 1px solid var(--line-soft);
}
.stateline.decided { background: var(--final-wash); color: var(--brand-ink); }
.lb td.max { color: var(--muted); font-size: 0.85rem; width: 2.6rem; }
.lb tr.elim td { opacity: 0.45; }
.lb tr.elim td.name { font-weight: 400; }

/* the placings that produced the current board */
.lastin {
  padding: 0.35rem 0.9rem; color: var(--muted); font-size: 0.76rem;
  font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* .meet is a column flex container, so this line's min-content would otherwise set
     the whole board's minimum width — a long "1st Raul Silvera Olivera · 2nd …" was
     forcing 511px boards onto 360px phones. */
  min-width: 0;
}

/* rank movement since the last race: a bare direction beside the rank it describes, so
   names keep a straight left edge and the row gains no number to decode */
.mv { font-size: 0.78rem; font-weight: 700; cursor: help; line-height: 1; }
/* NB an eliminated row dims via opacity on its cells, and a child cannot opt out of
   that — the whole subtree composites together — so the arrow rides the row's fade. */
.mv-up { color: var(--brand); }
.mv-dn { color: var(--live); }

/* a points cell that changed in the last in-place refresh */
.lb td.pts.flash { animation: ptsflash 1.4s ease-out; }
@keyframes ptsflash {
  0% { background: var(--gold-wash); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .lb td.pts.flash { animation: none; } }

table.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb th {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding: 0.45rem 0.6rem 0.3rem;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); font-weight: 600;
}
.lb th.name, .lb td.name { text-align: left; }
.lb th { white-space: nowrap; }   /* "1 · 2 · 3" must not stack into three lines */
.lb td { padding: 0.42rem 0.6rem; text-align: right; border-top: 1px solid var(--line-soft); }
.lb tr:first-child td { border-top: none; }
.lb td.rank {
  color: var(--muted); width: 2.8rem; font-size: 0.82rem; white-space: nowrap;
  text-align: left; padding-left: 0.5rem;
}
/* fixed slots: the numbers stack whether or not their row moved */
.rk-n { display: inline-block; width: 1.05rem; text-align: right; }
.rk-m { display: inline-block; width: 0.9rem; text-align: left; }
.lb td.name { font-weight: 600; }
.lb td.tally { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.lb td.pts { font-weight: 700; font-size: 1rem; width: 3.2rem; }
/* Won — the meeting is over, or the maths already settles it. Gold means this and only this,
   so seeing it anywhere on the page means that contest is finished. */
.lb tr.won td { background: var(--gold-wash); }
.lb tr.won td.rank { color: var(--gold); font-weight: 700; }
.lb tr.won td.pts { color: var(--gold); }
.lb tr.won td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* Ahead — top of the board with the lead still there to be taken. The house colour on a rail,
   no wash: present without claiming anything. */
.lb tr.ahead td.rank { color: var(--brand); font-weight: 700; }
.lb tr.ahead td.pts { color: var(--brand-ink); }
.lb tr.ahead td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* filled once the result is official, hollow while the meeting runs on */
.rk-w { width: 13px; height: 13px; margin-left: 0.22rem; vertical-align: -0.15em; color: var(--gold); }

/* A finished board has nothing left to argue about, so the field settles back behind the
   winner. :first-child is the header row — .lb has no thead. */
.meet.final .lb tr:not(.won):not(:first-child) td { opacity: 0.6; }
.lb td.pts.na { color: var(--muted); font-weight: 400; }
/* outside-market scorer — quiet outline diamond, no explanation on the page */
.unq { color: var(--muted); margin-left: 0.3rem; font-size: 0.8em; }

/* greyhound rug chips — the standard Australian rug colours, drawn in CSS so they cost
   nothing to load. Real-world constants: identical in both themes. Box 2's check is a
   repeating conic gradient; low-contrast authentic pairs (check/red, green/red) get a
   faint light halo so the numeral survives 15px. */
.rug {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 17px; height: 15px; border-radius: 3px;
  margin-right: 0.45rem; vertical-align: -2px;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600; font-size: 0.74rem; line-height: 1;
}
.rug.r1 { background: #d0342c; color: #fff; }
.rug.r2 {
  background: repeating-conic-gradient(#161616 0% 25%, #fafafa 0% 50%);
  background-size: 6px 6px; background-position: 1px 1px;
  color: #d0342c; text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.rug.r3 { background: #fafafa; color: #161616; box-shadow: inset 0 0 0 1px #c9cfc9; }
.rug.r4 { background: #1d59c9; color: #fff; }
.rug.r5 { background: #f3c112; color: #161616; }
.rug.r6 { background: #1a7a3c; color: #ef3b2d; text-shadow: 0 0 2px rgba(255,255,255,0.75); }
.rug.r7 { background: #161616; color: #f3c112; }
.rug.r8 { background: #f18bb1; color: #161616; }

.rules {
  display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap;
  margin: 1.4rem 0 0.4rem; color: var(--muted); font-size: 0.82rem;
}
.rules .r { display: inline-flex; align-items: center; gap: 0.4rem; }
.rules .n {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  min-width: 1.7rem; text-align: center; padding: 0.1rem 0.3rem; color: var(--brand-ink); font-size: 1rem;
}

.seo { max-width: 68ch; margin: 1.6rem 0 0; }
.seo h2 {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 1.25rem; margin: 0 0 0.4rem;
}
.seo h3 {
  font-size: 0.95rem; font-weight: 600; margin: 1rem 0 0.25rem; color: var(--ink);
}
.seo p { margin: 0 0 0.7rem; color: var(--muted); }

/* overnight empty state: yesterday's winners keep the page useful until markets open */
.ywin { margin-top: 1.2rem; }
.ywin h2 {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 1.1rem; margin: 0 0 0.4rem;
}
.ywin ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.ywin li { margin-bottom: 0.25rem; }
.foot {
  border-top: 1px solid var(--line); margin-top: 1.6rem; padding: 0.9rem 0 2rem;
  color: var(--muted); font-size: 0.78rem;
}

/* --- share row ------------------------------------------------------------
   Three tiers, resolved by classes the shell script puts on <html>: with a native
   share sheet (can-share) the single Share… button replaces the per-app links;
   with JS but no sheet (js) the links plus Copy link show; with neither, just the
   plain intent links, which are ordinary anchors and need nothing. */
.share {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.share-l {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-right: 0.2rem;
}
.share-btn {
  font: inherit; font-size: 0.78rem; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); border-radius: 10rem; padding: 0.15rem 0.7rem;
  background: var(--card); color: var(--muted);
}
.share-btn:hover { color: var(--ink); border-color: var(--muted); }
/* icon chips: the brand glyph alone, drawn in the chip's text colour */
.share-app { display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; }
.share-app svg { width: 0.95rem; height: 0.95rem; display: block; }
.share-native, .share-copy { display: none; }
.js .share-copy { display: inline-block; }
.can-share .share-native { display: inline-block; }
/* Only a phone-style sheet (touch) genuinely covers the apps; desktop share dialogs
   don't, so there the per-app links stay alongside the native button. */
@media (pointer: coarse) {
  .can-share .share-app { display: none; }
}
.share-copy.copied { color: var(--brand-ink); border-color: var(--brand); }

/* --- state bands + filters (Aug-2026 UX review) --------------------------- */

.filterbar {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.2rem 0 1rem;
}
.fchip {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10rem; padding: 0.15rem 0.7rem;
  background: var(--card); color: var(--muted);
}
.fchip:hover { color: var(--ink); }
.fchip-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fchip-on:hover { color: #fff; }
.fnote { margin-left: auto; color: var(--muted); font-size: 0.78rem; }

.band { margin-bottom: 1.4rem; }
.band-h {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.band-h .band-n {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400; font-size: 0.78rem; letter-spacing: normal; text-transform: none;
  color: var(--muted); margin-left: 0.5rem;
}
.fhide { display: none !important; }

/* collapsed later-today rows: one line each, the board on tap */
.laterlist { display: flex; flex-direction: column; gap: 6px; }
details.later {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
details.later > summary {
  display: grid; grid-template-columns: 5.6rem 10px minmax(7rem, auto) 1fr auto 1rem;
  align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; cursor: pointer;
  list-style: none;
}
details.later > summary::-webkit-details-marker { display: none; }
details.later > summary::after {
  content: "›"; color: var(--muted); justify-self: end;
  transition: transform 0.15s; transform: rotate(90deg) translateX(-1px);
}
@media (prefers-reduced-motion: reduce) { details.later > summary::after { transition: none; } }
details.later[open] > summary::after { transform: rotate(-90deg); }
details.later[open] > summary { border-bottom: 1px solid var(--line-soft); }
.cs-time { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-dot { width: 8px; height: 8px; border-radius: 2px; }
.cs-jockey { background: var(--gold); }
.cs-box { background: var(--brand); }
.cs-venue {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.cs-fav {
  color: var(--muted); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-races { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
details.later .meet { border: none; border-radius: 0; }
details.later .meet .meet-head { position: static; }
@media (max-width: 640px) {
  details.later > summary { grid-template-columns: 4.6rem 8px 1fr auto 1rem; }
  .cs-fav { display: none; }
}

/* mobile name abbreviation: full name above 480px, "B Temple" under it */
.nm-a { display: none; }
@media (max-width: 480px) {
  .nm-f { display: none; }
  .nm-a { display: inline; }
}

/* long boards clipped to the top 6 by JS (no-JS readers see every row) */
.xtr { display: none; }
.meet.expanded .xtr { display: table-row; }
.showall td { padding: 0.3rem 0.6rem; text-align: center; border-top: 1px solid var(--line-soft); }
.showall button {
  font: inherit; font-size: 0.78rem; cursor: pointer; color: var(--muted);
  background: none; border: none; padding: 0.15rem 0.5rem;
}
.showall button:hover { color: var(--ink); }

/* the one-line legend the tables lean on (tooltips don't exist on touch) */
.legend { color: var(--muted); font-size: 0.78rem; margin: 0.6rem 0 0; }
.legend b { color: var(--ink); font-weight: 600; }

/* --- venue + archive pages ------------------------------------------------ */

/* Plain links had no colour of their own and fell back to the browser's #0000EE,
   which measures 1.94:1 on the dark ground. Green keeps the palette coherent and
   leaves gold to mean "leader". */
a { color: var(--link); }
a:hover { color: var(--brand-ink); }

a.wordmark { text-decoration: none; }
a.wordmark:hover { text-decoration: none; }

.crumb { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.8rem; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }

.ph1 {
  font-size: 1.7rem; letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 0.4rem; line-height: 1.1;
}
.plead { color: var(--muted); max-width: 68ch; margin: 0 0 1.2rem; }

/* a venue name on a board that links to its own page */
a.vlink { color: var(--ink); text-decoration: none; }
a.vlink:hover { color: var(--brand-ink); text-decoration: underline; }

/* history / archive tables reuse the leaderboard shell with left-aligned text */
.lb.hist td, .lb.hist th { white-space: nowrap; }
.lb.hist td.name a { font-weight: 600; }
.arch-v {
  color: var(--muted); font-weight: 400 !important; font-size: 0.82rem;
  white-space: normal !important;
}
@media (max-width: 640px) {
  .arch-v { display: none; }
}

/* --- watching (local only) ------------------------------------------------ */

/* the star sits at the end of the name cell, quiet until it is on */
.wstar {
  font: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer;
  background: none; border: none; padding: 0 0 0 0.4rem; color: var(--line);
  vertical-align: -1px;
}
.wstar:hover { color: var(--gold); }
.wstar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.lb tr.watched .wstar { color: var(--gold); }
.lb tr.watched td { background: color-mix(in oklab, var(--gold) 8%, transparent); }
.lb tr.watched td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
/* a watched row that has also won keeps the winner's wash */
.lb tr.watched.won td { background: var(--gold-wash); }

/* the panel: every watched selection, wherever its meeting sits on the page */
#watch { margin: 0 0 1.2rem; }
.wlist { display: flex; flex-direction: column; gap: 4px; }
.wrow {
  display: grid;
  grid-template-columns: 2.6rem minmax(8rem, 1.4fr) minmax(7rem, 1fr) auto 4.2rem auto 1.6rem;
  align-items: center; gap: 0.6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 0.4rem 0.7rem; font-variant-numeric: tabular-nums;
}
/* the panel carries the board's three states, or following a bet keeps saying "leading"
   after the thing you followed has already won it */
.wrow.won { border-color: var(--gold); background: var(--gold-wash); }
.wrow.ahead { border-color: var(--brand); }
.wrow.elim { opacity: 0.5; }
.w-rank { color: var(--muted); font-size: 0.82rem; }
.w-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-venue {
  color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* how far through the meeting is — "6/9" — reads with the venue it belongs to */
.w-prog {
  color: var(--muted); font-size: 0.78rem; letter-spacing: normal;
  font-variant-numeric: tabular-nums; text-transform: none;
}
.w-prog::before { content: " · "; }
/* the board's 1·2·3 tally, carried over once the meeting has started */
.w-tally { color: var(--muted); font-size: 0.78rem; white-space: nowrap; justify-self: end; }
.w-pts { font-weight: 700; font-size: 1rem; text-align: right; white-space: nowrap; }
/* the unit that says what the big number is */
.w-u { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.wrow.won .w-pts { color: var(--gold); }
.wrow.ahead .w-pts { color: var(--brand-ink); }
.wrow .rk-w { margin: 0 0 0 0.25rem; }
.w-max { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
/* the same star idiom as the boards: filled here, tap to stop watching */
.wx {
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer;
  background: none; border: none; padding: 0; color: var(--gold); justify-self: end;
}
.wx:hover { color: var(--live); }
.wx:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) {
  .wrow { grid-template-columns: 2.4rem 1fr 3.8rem 1.5rem; }
  .w-venue { grid-column: 2; grid-row: 2; }
  /* the tally drops under the points, where the numbers it explains sit */
  .w-tally { grid-column: 3; grid-row: 2; }
  .w-max { display: none; }
}

/* --- phones: keep a live board inside the viewport ------------------------ */
/* A racing board carries six columns (rank, name, Left, 1·2·3, Pts, Max) and the
   name cell also holds the star, the ◇ and a movement chip — together that runs
   past 360px and the table starts scrolling sideways. The 1·2·3 tally is the one
   number Points already summarises, so it stands down on phones; the rest tighten. */
@media (max-width: 560px) {
  /* the last-in line keeps the winner only — second and third are in the tooltip */
  .li-x { display: none; }
  /* Max stands down on phones: the points and the state line carry the contest */
  .lb td.max, .lb th.max-h { display: none; }
  .lb td, .lb th { padding: 0.38rem 0.4rem; }
  .lb td.pts { font-size: 0.95rem; width: 2.6rem; }
  .lb td.rank { width: 2.1rem; font-size: 0.78rem; padding-left: 0.2rem; }
  .rk-n { width: 0.85rem; }
  .rk-m { width: 0.8rem; }
  .lb td.max { font-size: 0.8rem; width: 2.2rem; }
  .lb td.name { font-size: 0.95rem; }
  .wstar { padding-left: 0.3rem; font-size: 0.85rem; }
  .wrap { padding: 1rem 0.6rem; }
  /* a long venue beside a nowrap status pill (Warrnambool + "First race 2:52 pm")
     outgrows a 320px screen — let the header wrap rather than the board overflow */
  /* the collapsed later-today rows: trim the gutters so the chevron fits at 320px */
  details.later > summary {
    grid-template-columns: 4.2rem 8px 1fr auto 0.7rem;
    gap: 0.4rem; padding: 0.55rem 0.5rem;
  }
  .meet-head { flex-wrap: wrap; row-gap: 0.3rem; }
  .meet-head > div { min-width: 0; }
  .venue { font-size: 1.3rem; }
}