/* OnTrack Timing — design system (navy + orange).
   Built from design_handoff_ontrack_site/README.md. Replaces the earlier
   black/gray/yellow system in brand/ott.css, which stays in place until every
   page has been migrated off it.

   Rules from the brief that are easy to lose:
   - Square corners everywhere. The only round things are the status dots.
   - Orange is live/interactive state only. Never inside a results table.
   - All numbers use tabular-nums; times are right-aligned. */

:root{
  --ink:        #0b1a2b;   /* main text, dark panels */
  --ink-2:      #334356;   /* secondary text, numeric columns */
  --ink-3:      #55657a;   /* tertiary text, meta, footer */
  --ink-4:      #6e7d90;   /* quiet counts and notes */
  --muted:      #8fa0b4;   /* labels on dark panels */
  --muted-2:    #a5b3c3;
  --on-dark:    #d3dce7;   /* body text on navy */
  --paper:      #fbfcfd;   /* page surface */
  --canvas:     #e8ecf1;   /* behind the page card */
  --band:       #eef2f6;   /* division band; idle status strip */
  --line:       #e1e6ec;   /* section dividers */
  --line-row:   #e6eaef;   /* row hairlines */
  --line-strong:#c9d2dd;
  --line-strong-2:#cfd7e1;
  --accent:     #f05a1e;   /* links, live strip, hover */
  --accent-bright:#ff7033; /* orange on navy */

  --card-shadow: 0 1px 0 #cfd7e1, 0 24px 60px -40px rgba(11,26,43,.35);
  --stick-shadow: 0 6px 10px -8px rgba(11,26,43,.25);
  --gutter: 28px;

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent); }
a:hover{ color:var(--ink); }

h1,h2,h3,p{ text-wrap:pretty; }

/* The page card */
.card{
  max-width:1100px;
  margin:0 auto;
  background:var(--paper);
  box-shadow:var(--card-shadow);
}

/* ---------- header ---------- */
.hdr{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px var(--gutter);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.brand img{ height:44px; width:auto; display:block; }
.wordmark{ font-size:23px; letter-spacing:-0.035em; line-height:1.05; }
.wordmark b{ font-weight:600; }
.wordmark span{ font-weight:500; }
.region{
  display:block; margin-top:3px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.hdr-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:13px; font-weight:700;
  padding:10px 16px; text-decoration:none; display:inline-block;
  border:1px solid var(--line-strong); color:var(--ink); background:transparent;
  transition:background .12s linear, color .12s linear, border-color .12s linear;
}
.btn-primary{ border-color:var(--ink); }
.btn-primary:hover{ background:var(--ink); color:#fff; }
.btn-secondary:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- status strip ---------- */
.strip{
  display:flex; align-items:center; gap:10px;
  padding:12px var(--gutter);
  font-family:var(--mono); font-size:13px;
  background:var(--band); color:var(--ink-2);
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
  animation:otpulse 1.6s ease-in-out infinite; }
.strip b{ font-weight:700; }
.strip.live{ background:var(--accent); color:#fff; }
.strip.live .dot{ background:#fff; }
.strip a{ color:inherit; }

@keyframes otpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px; padding:52px var(--gutter);
}
.hero h1{
  margin:0 0 18px;
  font-weight:600; letter-spacing:-0.035em; line-height:1.0;
  font-size:clamp(42px,6.4vw,68px);
}
.lede{ margin:0; font-size:17px; color:var(--ink-2); max-width:46ch; }

.search{ margin-top:26px; max-width:460px; }
.search-box{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--ink); background:#fff; padding:12px 14px;
}
.search-box .glyph{ color:var(--ink-3); font-size:16px; line-height:1; }
.search-box input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--sans); font-size:16px; color:var(--ink);
}
.search-box input::placeholder{ color:var(--ink-4); }
.search-count{ margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--ink-4); }
.search-results{ margin:14px 0 0; padding:0; list-style:none; }
.search-results li + li{ border-top:1px solid var(--line-row); }
.search-results a{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:10px 2px; text-decoration:none; color:var(--ink);
}
.search-results a:hover{ color:var(--accent); }
.search-results .yr{ font-family:var(--mono); font-size:13px; color:var(--ink-3); }
.search-results a:hover .yr{ color:var(--accent); }

/* ---------- next event card ---------- */
.nextcard{
  background:var(--ink); color:var(--on-dark);
  padding:28px; display:flex; flex-direction:column; gap:18px;
  align-self:start;
}
.nextcard .label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
}
.countdown{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.countdown .n{
  font-size:54px; font-weight:700; line-height:1;
  letter-spacing:-0.04em; color:var(--accent-bright);
}
.countdown .when{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); }
.nextcard h2{ margin:0; font-size:27px; font-weight:600; line-height:1.18;
  letter-spacing:-0.025em; color:#fff; }
.nextcard .where{ margin:0; font-size:15px; color:var(--muted-2); }
.nextcard .actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.btn-live{
  background:var(--accent-bright); color:var(--ink);
  font-family:var(--mono); font-size:13px; font-weight:700;
  padding:12px 18px; text-decoration:none; display:inline-block;
  transition:background .12s linear;
}
.btn-live:hover{ background:var(--paper); color:var(--ink); }
.register{
  color:#fff; text-decoration:underline; text-decoration-color:var(--accent-bright);
  text-underline-offset:4px; font-size:15px;
}
.register:hover{ color:var(--accent-bright); }

/* ---------- CTA band ---------- */
.cta{ background:var(--ink); padding:48px var(--gutter); }
.btn-cta{
  background:var(--accent-bright); color:var(--ink);
  font-family:var(--mono); font-size:14px; font-weight:700;
  padding:15px 22px; text-decoration:none; display:inline-block;
  transition:background .12s linear;
}
.btn-cta:hover{ background:var(--paper); }

/* ---------- footer ---------- */
.ftr{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:26px var(--gutter);
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  border-top:1px solid var(--line);
}
.ftr img{ height:26px; width:auto; opacity:.75; display:block; }
.ftr a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--line); }
.ftr a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.ftr .spacer{ flex:1 1 auto; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:720px){
  :root{ --gutter:20px }
  .hero{ padding:36px var(--gutter); gap:28px }
  .hdr{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ===================== results page =====================
   Markup is a real <table> per division so the print sheet can repeat the
   division name and column headers on every page via <thead>. On screen the
   rows are re-laid-out with CSS grid, which is why nearly everything below
   overrides a table display value. */

.card-wide{ max-width:1180px; }

.hdr-res{ padding:18px var(--gutter); }
.hdr-res .brand img{ height:38px; }
.hdr-res .wordmark{ font-size:19px; }
.res-label{
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink-3); margin-left:14px;
}
.res-count{ font-size:13px; color:var(--ink-4); }

.printhead{ display:none; }

.titleblock{ padding:34px var(--gutter) 0; }
.titleblock h1{
  margin:0; font-weight:600; letter-spacing:-0.035em; line-height:1.04;
  font-size:clamp(32px,4.8vw,48px);
}
.titlemeta{
  margin:12px 0 0; font-family:var(--mono); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}

.res-tools{
  padding:26px var(--gutter) 0;
  /* Search and the division toggle share one row. The toggle used to sit on a
     band of its own, which pushed the first result below the fold on a laptop
     for no benefit: it is closed by default on any race with more than 12
     division groups, so that band was usually empty. */
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.res-search{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex:1 1 420px; min-width:0; }
.res-search .search-box{ flex:1 1 360px; max-width:460px; }
.res-search .search-count{ margin:0; }

/* Right column: the finisher toggle sits above the division filter, stacked
   inside the height the search box already occupies, so neither costs a row. */
.res-right{ margin-left:auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:7px; min-width:0; }
.jumpwrap{ padding:0; margin:0; }
.jumpwrap > summary{ margin-left:auto; width:max-content; }
/* Opened, the panel needs the full width - the column holding it stretches,
   while both controls stay right-aligned where they were. */
.res-tools:has(.jumpwrap[open]) .res-right{ flex:1 1 100%; margin-left:0; }
.jumpwrap[open]{ padding-top:2px; width:100%; }

.tlink{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-4);
  border-bottom:1px solid transparent;
}
.tlink:hover{ color:var(--accent); border-bottom-color:currentColor; }
.tlink[aria-pressed="true"]{ color:var(--accent); border-bottom-color:currentColor; }
.jumpwrap > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.jumpwrap > summary::-webkit-details-marker{ display:none; }
.jumpwrap > summary::before{ content:"\25B8"; font-size:11px; }
.jumpwrap[open] > summary::before{ content:"\25BE"; }
.jumpwrap > summary:hover{ color:var(--accent); }
.jumpwrap .jn{ color:var(--ink-4); }

.jumplist{
  display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none;
}
.jumplist li{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--line);
}
.jumplist li[hidden]{ display:none; }
.jbase{
  padding:6px 9px; font-size:13px; color:var(--ink-2);
  border-right:1px solid var(--line);
}
.jumplist a{
  padding:6px 9px; font-family:var(--mono); font-size:12px;
  color:var(--ink-3); text-decoration:none;
  transition:background .12s linear, color .12s linear;
}
.jumplist a + a{ border-left:1px solid var(--line); }
.jumplist a:hover{ background:var(--ink); color:#fff; }
.jumplist a[hidden]{ display:none; }

.divisions{ padding:10px var(--gutter) 0; }

table.dtable{
  display:block; width:100%; border-collapse:collapse;
  margin-top:26px; scroll-margin-top:96px;
}
table.dtable[hidden]{ display:none; }
.dtable thead{
  display:block; background:var(--paper);
}
/* Only long divisions pin. A short division's header is as tall as its rows, so
   pinning it hides the very thing it labels. */
.dtable thead.dhead-sticky{
  position:sticky; top:0; z-index:2; box-shadow:var(--stick-shadow);
}
.dtable tbody{ display:block; }

tr.dband{ display:block; }
tr.dband th{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--band); padding:9px 6px; font-weight:400; text-align:left;
}
.dname{ font-size:17px; font-weight:600; letter-spacing:-0.02em; }
tr.dband .n{ font-size:12px; color:var(--ink-4); font-family:var(--mono); font-weight:400; }

tr.rowgrid{
  display:grid;
  grid-template-columns:34px 44px minmax(0,1fr) 32px minmax(38px,44px) minmax(50px,62px) minmax(50px,62px) minmax(44px,58px);
  gap:0 8px; align-items:baseline;
}
/* Border lives on the row, not the cell: with grid gaps a per-cell border
   draws as a dashed line with 8px holes in it. */
tr.colhead{ border-bottom:1px solid var(--line-strong); }
tr.colhead th{
  padding:6px 6px; font-size:13px; font-weight:600; color:var(--ink);
  text-align:left;
}
tr.colhead th:nth-child(n+4){ text-align:right; }

tr.rrow{ border-bottom:1px solid var(--line-row); }
tr.rrow td{
  padding:7px 6px; font-size:15px; line-height:1.3; text-align:left;
}
tr.rrow td:nth-child(n+4){ text-align:right; }
tr.rrow .pl{ font-weight:700; }
tr.rrow .bib{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
tr.rrow .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
tr.rrow .age,tr.rrow .oa,tr.rrow .chip,tr.rrow .pace{ color:var(--ink-2); }
tr.rrow .gun{ font-weight:700; }
tr.rrow[hidden]{ display:none; }

tr.rrow.dnf td{ color:#8a98aa; }
tr.rrow.dnf .pl,tr.rrow.dnf .oa{ color:#a9b5c4; font-weight:400; }
tr.rrow.dnf .gun{ font-weight:400; }

.res-ftr{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:30px var(--gutter); margin-top:30px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
}
.res-ftr a{ color:var(--ink-3); }
.res-ftr a:hover{ color:var(--accent); }

.noresults{ padding:26px 6px; color:var(--ink-4); font-size:15px; }
.noresults[hidden]{ display:none; }

@media (max-width:720px){
  tr.rowgrid{ grid-template-columns:30px 40px minmax(0,1fr) minmax(46px,56px) minmax(46px,56px); }
  tr.rowgrid .age,tr.rowgrid .oa,tr.rowgrid .pace{ display:none; }
}

/* ---------------------- print sheet ----------------------
   Letter, black ink only, so it survives a black-and-white printer.
   Everything interactive is hidden; the tables revert to real table display so
   <thead> repeats on each page of a long division. */
@media print{
  body{ background:#fff; color:#000; font-size:12.5px; }
  .card,.card-wide{ max-width:none; margin:0; background:#fff; box-shadow:none; }

  .hdr,.strip,.res-tools,.jumpwrap,.res-ftr,.noresults,.cta,.ftr,.hero{ display:none !important; }

  .printhead{
    display:flex !important; align-items:flex-start; justify-content:space-between;
    gap:20px; padding:0 0 8px; border-bottom:2px solid #000;
  }
  .printhead h2{ margin:0; font-size:26px; font-weight:600; letter-spacing:-0.03em; }
  .printhead p{
    margin:6px 0 0; font-family:var(--mono); font-size:10px;
    letter-spacing:.1em; text-transform:uppercase; color:#000;
  }
  .printhead img{ height:52px; width:auto; }
  .titleblock{ display:none; }
  .divisions{ padding:0; }

  table.dtable{
    display:table; width:100%; table-layout:fixed;
    margin:14px 0 0; break-inside:auto;
  }
  .dtable thead{ display:table-header-group; position:static; box-shadow:none; background:none; }
  .dtable tbody{ display:table-row-group; }
  tr{ display:table-row; break-inside:avoid; }
  th,td{ display:table-cell; }

  tr.dband th{
    display:table-cell; background:none; padding:8px 0 2px;
    font-size:15px; font-weight:600; border-bottom:1px solid #000;
  }
  tr.dband .n{ display:none; }

  tr.colhead th{
    font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:#000; padding:4px 2px;
    border-bottom:1px solid #999;
  }
  tr.rrow{ border-bottom:0; }
  tr.rrow td{
    font-size:12.5px; padding:3px 2px; color:#000;
    border-bottom:1px solid #e6e6e6;
  }
  tr.colhead{ border-bottom:0; }
  tr.rrow .gun{ font-weight:700; }
  tr.rrow .bib{ font-family:var(--mono); font-size:11px; color:#000; }
  tr.rrow .nm{ white-space:normal; }
  tr.rrow.dnf td{ color:#8a8a8a; }
  tr.rrow[hidden]{ display:none; }

  /* Brief's grid: 34 44 90+ 36 46 58 58 56 */
  .dtable th:nth-child(1),.dtable td:nth-child(1){ width:34px; }
  .dtable th:nth-child(2),.dtable td:nth-child(2){ width:44px; }
  .dtable th:nth-child(3),.dtable td:nth-child(3){ width:auto; }
  .dtable th:nth-child(4),.dtable td:nth-child(4){ width:36px; }
  .dtable th:nth-child(5),.dtable td:nth-child(5){ width:46px; }
  .dtable th:nth-child(6),.dtable td:nth-child(6){ width:58px; }
  .dtable th:nth-child(7),.dtable td:nth-child(7){ width:58px; }
  .dtable th:nth-child(8),.dtable td:nth-child(8){ width:56px; }
  .dtable th:nth-child(n+4),.dtable td:nth-child(n+4){ text-align:right; }

  /* position:fixed repeats on every printed page in browsers. Page numbers are
     not reachable from CSS in a browser - the browser's own print footer
     supplies those - so this carries the attribution only. */
  .printfoot{
    display:block !important; position:fixed; bottom:0; left:0; right:0;
    font-family:var(--mono); font-size:9px; letter-spacing:.08em;
    text-transform:uppercase; color:#000; border-top:1px solid #999; padding-top:3px;
  }
  a{ color:#000; text-decoration:none; }
}
.printfoot{ display:none; }

/* ---------- state switcher + participants/live views ---------- */
.stateswitch{ display:flex; gap:0; border-bottom:1px solid var(--line); }
.stateswitch a{
  padding:11px var(--gutter); font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.stateswitch a:hover{ color:var(--ink); }
.stateswitch a[aria-current]{ color:var(--ink); border-bottom-color:var(--accent); }

.prenote{ margin:14px 0 0; max-width:60ch; font-size:14px; color:var(--ink-3); }

tr.rowgrid.prow{ grid-template-columns:54px minmax(0,1fr) 44px minmax(0,18rem); }
tr.rowgrid.lrow{ grid-template-columns:44px 54px minmax(0,1fr) 92px minmax(70px,104px) minmax(64px,88px); }
.lrow .seen{ font-family:var(--mono); font-size:12px; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:.04em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
tr.rrow .divn{ color:var(--ink-2); font-size:14px; }
tr.rrow .st{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
tr.rowgrid.prow td:nth-child(n+3),
tr.rowgrid.prow th:nth-child(n+3){ text-align:left; }
tr.rowgrid.prow td:nth-child(3),
tr.rowgrid.prow th:nth-child(3){ text-align:right; }

/* the racer lookup: one sentence, not a table row */
.statuscards{ display:grid; gap:12px; padding:20px var(--gutter) 0; }
.statuscards[hidden]{ display:none; }
.statuscard{
  border-left:3px solid var(--ink-4); background:var(--band);
  padding:16px 18px;
}
.statuscard .who{
  margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.statuscard .code{
  margin:6px 0 0; font-size:28px; font-weight:600; letter-spacing:-0.03em; line-height:1.1;
}
.statuscard .lab{ margin:2px 0 0; font-size:15px; color:var(--ink-2); }
.statuscard .det{ margin:8px 0 0; font-size:15px; color:var(--ink-2); }
.statuscard[data-code="FINISHED"]{ border-left-color:#0a7; }
.statuscard[data-code="ON COURSE"]{ border-left-color:var(--accent); }
.statuscard[data-code="DNF"],
.statuscard[data-code="DSQ"]{ border-left-color:var(--ink-3); }

/* ===================== TV board (digital signage) =====================
   Unattended: no interaction, full-bleed, reloads itself. Scrolling runs as a
   CSS animation so it stays on the compositor through long unattended runs. */
body.tvbody{ margin:0; background:#000; color:#fff; overflow:hidden; }
.tv{ display:flex; flex-direction:column; height:100vh; }

.tvbar{
  display:flex; align-items:center; gap:22px;
  padding:16px 28px; border-bottom:3px solid var(--accent-bright);
  flex:none;
}
.tvbar img{ height:48px; width:auto; display:block; }
.tvbar h1{
  margin:0; font-weight:600; letter-spacing:-0.03em;
  font-size:clamp(18px,2.4vw,30px);
}
.tvtag{
  font-family:var(--mono); color:var(--accent-bright);
  font-size:clamp(11px,1.1vw,15px); letter-spacing:.14em; text-transform:uppercase;
}
.tvspacer{ flex:1 1 auto; }
.tvdot{
  width:14px; height:14px; border-radius:50%; background:var(--accent-bright);
  animation:otpulse 1.6s ease-in-out infinite; flex:none;
}
.tvclock{
  font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(20px,3vw,40px);
}

.tvscroll{ flex:1 1 auto; overflow:hidden; position:relative; }
.tvtrack{ will-change:transform; }
/* Fallback only. tv.html regenerates this rule with computed percentages so the
   dwell at the top of the list is a fixed number of seconds on any list length. */
@keyframes ottrack{ from{ transform:translateY(0) } to{ transform:translateY(var(--ot-span,0px)) } }

.tvdiv{ padding:10px 28px 4px; }
.tvdiv h2{
  margin:18px 0 8px; font-family:var(--mono); color:var(--accent-bright);
  font-size:clamp(13px,1.4vw,20px); letter-spacing:.14em; text-transform:uppercase;
  font-weight:600;
}
.tvrow{
  display:grid;
  grid-template-columns:clamp(50px,5vw,90px) clamp(60px,6vw,110px) minmax(0,1fr) auto auto;
  gap:0 24px; align-items:baseline; padding:6px 0; border-bottom:1px solid #222;
}
.tvrow .p{ font-size:clamp(18px,2.4vw,34px); font-weight:700; font-variant-numeric:tabular-nums; }
.tvrow .b{ font-family:var(--mono); font-size:clamp(14px,1.6vw,24px); color:#7d8a9b; }
.tvrow .n{ font-size:clamp(17px,2.3vw,32px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tvrow .g{ font-family:var(--mono); font-weight:700; font-size:clamp(17px,2.2vw,32px);
  font-variant-numeric:tabular-nums; }

.tvidle{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:14px; text-align:center; padding:0 28px; }
.tvidle .big{ margin:0; font-size:clamp(26px,4vw,56px); font-weight:600; letter-spacing:-0.03em; }
.tvidle .small{ margin:0; font-family:var(--mono); color:#7d8a9b;
  font-size:clamp(13px,1.4vw,20px); letter-spacing:.12em; text-transform:uppercase; }

.tvfoot{
  display:flex; justify-content:space-between; gap:20px; flex:none;
  padding:12px 28px; border-top:1px solid #222;
  font-family:var(--mono); color:#7d8a9b;
  font-size:clamp(11px,1.1vw,16px); letter-spacing:.12em; text-transform:uppercase;
}
/* On course but not finishing — shown so nobody is searched for on the trail. */
.tvrow.out .n{ color:#9aa7b6; }
.tvrow.out .g{ color:var(--accent-bright); font-size:clamp(14px,1.7vw,24px); letter-spacing:.08em; }
/* Source cannot supply division labels: drop the place column entirely rather
   than print per-division numbers that restart with no heading to explain them. */
.tvrow.nop{ grid-template-columns:clamp(60px,6vw,110px) minmax(0,1fr) auto auto; }
.tvrow.nop .p{ display:none; }

/* The list is ordered by time with both genders together, so this column is
   what the gender grouping used to say - shown with the division, because a
   lone letter in a box does not tell a spectator what it is. Muted and in its
   own column so it never competes with the name or the time. */
.tvrow .cat{
  font-family:var(--mono); font-size:clamp(12px,1.25vw,19px); color:#6f7d8e;
  letter-spacing:.04em; text-align:right; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:clamp(140px,22vw,460px);
}
.tvrow .cat .sx{ font-style:normal; font-weight:700; color:#9aa7b6; }
.tvrow.out .cat{ color:#5d6a7a; }
.tvsub{
  font-family:var(--mono); font-size:clamp(11px,1.1vw,16px); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4);
  padding:14px 28px 2px; margin:0;
}

/* An unscored contest is a real registration but not a race: labelled so
   nobody reads it as a field they can place in. */
.dband .untimed{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-4);
  border:1px solid var(--line); padding:1px 6px; margin-left:10px;
}

/* Race clock sits next to the time of day, visually primary - it is the number
   a spectator is actually reading off a finish-line board. */
.tvrace{
  font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(22px,3.4vw,46px); color:var(--accent-bright); letter-spacing:-.01em;
}
.tvracelbl{
  font-family:var(--mono); font-size:clamp(9px,.85vw,13px); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#6f7d8e;
  margin:0 18px 0 7px; align-self:center;
}

/* Timing point beside a split time on the board: present but subordinate to
   the number, which is what is being read from across a room. */
.tvrow .g .pt{
  font-style:normal; font-weight:600; font-size:.56em; color:#6f7d8e;
  letter-spacing:.06em; text-transform:uppercase; margin-right:.45em;
}

/* Checkpoint heading. Bigger and brighter than the generic sub-heading,
   because it is the thing that explains the ordering from across a room. */
.tvsub.at{
  color:var(--accent-bright); font-size:clamp(13px,1.45vw,22px);
  letter-spacing:.1em; padding-top:18px;
  border-top:1px solid #222; margin-top:6px;
}
.tvsub.at .cnt{
  color:#6f7d8e; font-weight:600; margin-left:.8em;
  font-size:.8em; letter-spacing:.06em;
}

/* Pinned band heading. Sits over the scrolling track so the checkpoint the
   rows belong to is on screen at all times - without it a row reading 14:34
   is unplaceable once its heading has scrolled away. */
.tvband{
  position:absolute; top:0; left:0; right:0; z-index:5;
  background:#000; border-bottom:1px solid #222;
  font-family:var(--mono); font-weight:600;
  font-size:clamp(11px,1.15vw,17px); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding:10px 28px 9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tvband.at{ color:var(--accent-bright); }
/* The first heading would otherwise sit directly under the pinned copy of
   itself. */
.tvtrack > section:first-child > h2:first-child{ padding-top:2px; }
.tvband .cnt{ color:#6f7d8e; font-weight:600; margin-left:1em; font-size:.85em; }

/* Past-results index: one row per race, its years as chips. */
.arclist{ padding:8px var(--gutter) 40px; }
.arcrow{ display:grid; grid-template-columns:minmax(180px,300px) 1fr; gap:10px 28px;
  align-items:baseline; padding:18px 0; border-top:1px solid var(--line); }
.arcrow[hidden]{ display:none; }
.arcrow h2{ margin:0; font-size:clamp(16px,1.6vw,21px); font-weight:650; letter-spacing:-.01em; }
.yrs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.yrs li[hidden]{ display:none; }
.yrs a{
  display:inline-block; font-family:var(--mono); font-size:13px; font-weight:600;
  padding:6px 11px; border:1px solid var(--line); color:var(--ink-2);
  text-decoration:none; font-variant-numeric:tabular-nums;
}
.yrs a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* A year we hold no structured data for still opens its published page; it is
   marked so the difference is visible rather than surprising. */
.yrs a.legacy{ color:var(--ink-4); border-style:dashed; }
.yrs a.legacy:hover{ background:var(--ink-4); border-color:var(--ink-4); color:#fff; }
@media (max-width:620px){
  .arcrow{ grid-template-columns:1fr; gap:10px; }
}