/*
 * The result boards' own stylesheet, scoped to the board wrapper.
 *
 * GENERATED - do not hand-edit. Run tools/board-css/build.php.
 *
 * Taken verbatim from bentang-jawa-recap.html and prefixed so it cannot reach
 * the rest of the site. The results pages are meant to look exactly like the
 * boards, and the way to be sure is to wear the same stylesheet rather than to
 * reimplement it and hope. The document-level rules - :root, html, body - map
 * onto .bj-board itself, so the wrapper carries the custom properties, the bone
 * ground and the type, while the theme's header and footer around it are
 * untouched.
 *
 * Edits belong in tools/board-css/reset.css (before) or extras.css (after).
 */

/* ── neutralising the theme, before the boards' own rules run ──────────────
   The boards were whole documents. Their stylesheet therefore never had to
   say what a form control or a heading looks like by default, because nothing
   else on the page had an opinion. Inside the theme something does: style.css
   gives every input a 1px border, 5px radius, full width and its own padding,
   and a rule the board simply does not have cannot be overridden by it.

   So the theme's defaults are taken back off inside the wrapper, and only
   inside it. Everything below this block is the boards' own stylesheet and
   wins by cascade order, so anything they do set still applies. */

.bj-board input,
.bj-board select,
.bj-board textarea,
.bj-board button {
  border-radius: 0;
  font-family: inherit;
}

/* The theme paints every bare button black with its own padding and type.
   The boards style the buttons they care about - .chip, .clear, .toggle - and
   leave the rest to the browser, so anything they leave alone inherits the
   theme's instead. .filtoggle is the one that shows: it is display:none above
   640px and only appears on a phone, which is exactly where it would have
   arrived black.

   line-height is deliberately not reset: the boards leave it to the browser
   here, and forcing it to inherit was the one measurable difference left
   between the two pages on a phone. */
.bj-board button {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.bj-board h1,
.bj-board h2,
.bj-board h3,
.bj-board p,
.bj-board ul,
.bj-board ol {
  margin: 0;
}

.bj-board a { text-decoration: none; }

.bj-board img { max-width: 100%; height: auto; }


.bj-board{
  /* Palette lifted from the Claude Design canvas: four brand hues on a bone ground,
     navy ink for type and rules. Nothing here is invented — the hex values are the
     canvas values, so the board and the canvas stay in step. */
  --teal:#0E6357;--yellow:#EDC616;--coral:#F4864D;--red:#D82C2F;
  --bone:#EAE6D9;--ink:#202F50;
  --paper:#FFFDF7;--paper-alt:#FBF8EE;--paper-hi:#FFF7E4;
  --rule:#DCD6C4;--muted:#6B7280;--teal-soft:#9CC3B6;--ink-soft:#9CA7C4;--idle:#F1EDE0;
  /* One hue per status group. The five groups are the spine of this page, so each gets
     a brand colour of its own and keeps it everywhere: section bar, row edge, stat tile. */
  --c-gc:var(--teal);--c-ride:var(--coral);--c-nc:var(--yellow);
  --c-dnf:var(--red);--c-dns:var(--muted);
  /* the canvas keeps corners almost square — 2-3px, and 999px only on pills */
  --r:3px;--r-sm:2px;
  --pad:clamp(14px,3.5vw,20px);--maxw:1240px;
  --disp:"Zilla Slab",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}
.bj-board, .bj-board *{box-sizing:border-box}
.bj-board{-webkit-text-size-adjust:100%}
.bj-board{margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:0}
.bj-board .inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.bj-board .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* The signature of the canvas: a four-colour rules band across the very top, repeated
   as a dashed yellow tick rule under the masthead. */
.bj-board .stripe{height:14px;background:repeating-linear-gradient(90deg,
  var(--teal) 0 18px,var(--yellow) 18px 36px,var(--coral) 36px 54px,var(--red) 54px 72px)}
.bj-board header{background:var(--teal);padding:22px 0 0;color:var(--bone)}
.bj-board .masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.bj-board .mast-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.bj-board .back{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-soft);text-decoration:none;margin-bottom:4px}
.bj-board .back:hover{color:var(--yellow)}
.bj-board .eyebrow{margin:0;font:600 12px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow)}
.bj-board h1{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(34px,6vw,60px);
  line-height:.94;letter-spacing:-.01em;color:var(--bone);text-transform:none}
.bj-board h1 .thin{color:var(--coral)}
.bj-board .unofficial{display:inline-block;margin:6px 0 0;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--red);color:var(--bone);
  font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bj-board .lede{margin:8px 0 0;max-width:60ch;color:var(--teal-soft);font-size:13px}
.bj-board .lede b{color:var(--bone);font-weight:600}
/* Header stat blocks: solid colour, mono label, slab numeral — straight off the canvas.
   Colour carries the meaning, so each tile is the hue its group uses everywhere else. */
.bj-board .counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:8px;margin-top:18px}
.bj-board .stat{background:var(--bone);color:var(--ink);padding:10px 13px;border-radius:var(--r-sm);
  min-width:0}
.bj-board .stat.gc{background:var(--teal);color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--teal-soft)}
.bj-board .stat.ride{background:var(--coral)}
.bj-board .stat.nc{background:var(--yellow)}
.bj-board .stat.dnf{background:var(--red);color:var(--bone)}
.bj-board .stat.dns{background:var(--idle)}
.bj-board .stat.clock{background:var(--ink);color:var(--bone)}
.bj-board .snum{font-family:var(--disp);font-weight:700;font-size:clamp(24px,5vw,30px);line-height:1.1}
/* a duration is mono, not slab — the digits have to line up and the unit letters have to
   stay lowercase, which a display face set in caps will not do */
.bj-board .snum.dur{font:600 clamp(15px,3vw,21px)/1.15 var(--mono);letter-spacing:-.02em;
  white-space:nowrap;padding:3px 0 1px}
.bj-board .slab{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.72;margin-top:6px}
.bj-board .sbreak{font:400 9.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  opacity:.55;margin-top:4px}
/* the two time-valued tiles carry the longest strings, so they take two tracks */
.bj-board .stat.wide{grid-column:span 2}
/* the dashed tick rule that closes the masthead */
.bj-board .tick{max-width:var(--maxw);margin:18px auto 0;height:10px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 26px,transparent 26px 44px)}
/* the control panel: paper card, hard 2px ink outline, square-ish corners */
.bj-board .bar{position:sticky;top:0;z-index:30;background:var(--bone);padding:12px 0 8px}
/* the panel is sticky, so every pixel here is a pixel of results the crew cannot see:
   kept as tight as the touch targets allow */
.bj-board .barbox{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
  padding:11px;display:flex;flex-direction:column;gap:9px}
.bj-board .search{position:relative;display:flex;align-items:center;gap:10px;
  background:var(--bone);border-radius:var(--r-sm);padding:9px 12px}
.bj-board .search::before{content:"⌕";font:600 15px/1 var(--mono);color:var(--teal)}
.bj-board .search input{flex:1;min-width:0;width:100%;border:none;background:transparent;
  font-family:var(--sans);font-size:16px;color:var(--ink);padding:2px 0}
.bj-board .search input::-webkit-search-cancel-button{display:none}
.bj-board .search input::placeholder{color:var(--muted)}
.bj-board .search input:focus{outline:none}
.bj-board .search:focus-within{box-shadow:inset 0 0 0 2px var(--teal)}
.bj-board .clear{border:none;background:var(--ink);color:var(--bone);cursor:pointer;
  font:600 10px/1 var(--mono);letter-spacing:.1em;padding:7px 10px;
  border-radius:var(--r-sm);display:none}
.bj-board .clear.on{display:block}
.bj-board .clear:hover{background:var(--red)}
/* A group label belongs to the chips underneath it, so the air goes above it, not
   below. Spacing it evenly — or, as it was, closer to the row above than to its own —
   makes it read as a caption for the previous group. Worst on a phone: the filters
   panel is display:block there, so the flex gap below does not apply at all and the
   label ended up touching the row above it with only its own row set away. Margins
   rather than the gap, so the two display modes space identically. */
.bj-board .chiplab{margin:16px 0 6px;font:600 10px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal)}
.bj-board .chiplab:first-child{margin-top:0}
.bj-board .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
/* a class that sets display beats the [hidden] default, so say it explicitly */
.bj-board .chips[hidden]{display:none}
.bj-board .chip{cursor:pointer;border:2px solid var(--ink);border-radius:999px;padding:6px 13px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.35;
  background:transparent;color:var(--ink)}
.bj-board .chip:hover{background:var(--idle)}
.bj-board .chip.on{background:var(--ink);color:var(--bone)}
.bj-board .chip:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bj-board .chip.crown.on{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.bj-board .chips.sub{margin-top:6px;padding-left:12px;border-left:3px solid var(--rule)}
.bj-board .chips.sub .chip{font-size:11.5px;padding:5px 11px;border-width:1.5px}
.bj-board .filters{display:flex;flex-direction:column;gap:0}
.bj-board .filtoggle{display:none}
@media (max-width:640px){.bj-board .filtoggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;cursor:pointer;border:2px solid var(--ink);border-radius:var(--r-sm);
    background:var(--bone);color:var(--ink);padding:11px 13px;
    font-family:var(--sans);font-size:13px;font-weight:600}
.bj-board .filtoggle .caret{transition:transform .15s ease;color:var(--teal)}
.bj-board .filtoggle[aria-expanded="true"]{background:var(--ink);color:var(--bone)}
.bj-board .filtoggle[aria-expanded="true"] .caret{transform:rotate(180deg);color:var(--yellow)}
.bj-board .filtoggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bj-board .filters{display:none}
.bj-board .filters.open{display:block}

}
.bj-board .statusline{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font:400 11px/1.45 var(--mono);color:var(--teal)}
.bj-board .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  display:inline-block;margin-right:6px;vertical-align:middle}
.bj-board .dot.busy{background:var(--yellow);animation:blink 1s steps(2,end) infinite}
.bj-board .dot.bad{background:var(--red)}
@keyframes blink{50%{opacity:.15}
}
.bj-board .banner{margin:0 0 12px;padding:12px 14px;border-radius:var(--r);
  border:2px solid var(--red);background:#FBE9E6;color:var(--red);
  font-size:13px;display:none}
.bj-board .banner.on{display:block}
/* The results table: one bordered panel, ink header bars per group, hairline rules
   between rows and a zebra tint — the canvas table, carrying the existing row grid. */
.bj-board .list{border:2px solid var(--ink);border-radius:var(--r);
  background:var(--paper);margin-bottom:34px}
.bj-board .sec{position:sticky;top:0;z-index:10;display:flex;align-items:baseline;gap:12px;
  flex-wrap:wrap;padding:11px 16px;background:var(--ink);color:var(--bone)}
.bj-board .sname{font:600 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.bj-board .sec.gc .sname{color:var(--yellow)}
.bj-board .sec.ride .sname{color:var(--coral)}
.bj-board .sec.nc .sname{color:var(--yellow)}
.bj-board .sec.dnf .sname{color:#FF9E9B}
.bj-board .sec.dns .sname{color:var(--ink-soft)}
.bj-board .scount{font:400 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);opacity:.75}
.bj-board .snote{flex:1 1 100%;font:400 10px/1.3 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.bj-board .row{display:grid;align-items:center;column-gap:14px;row-gap:10px;
  grid-template-columns:auto auto 1fr auto;
  grid-template-areas:"pos cap who mark" "progrow progrow progrow progrow" "splits splits splits splits";
  background:var(--paper);border-bottom:1px solid var(--rule);
  border-left:5px solid var(--rule);padding:13px 16px}
/* The zebra tint is a class-plus-pseudo selector, so it outranks a bare .row.state rule
   and would repaint every even row over its own state colour. Each state that paints a
   background is scoped to .list > too, so they sit at or above the zebra and win by
   order — and conflict, the one that is a warning, is kept out from under open. */
.bj-board .list > .row:nth-child(even){background:var(--paper-alt)}
.bj-board .row:last-child{border-bottom:none}
.bj-board .list > .row.hit{background:var(--paper-hi);box-shadow:inset 0 0 0 2px var(--ink)}
.bj-board .row.gc{border-left-color:var(--c-gc)}
.bj-board .row.ride{border-left-color:var(--c-ride)}
.bj-board .row.nc{border-left-color:var(--c-nc)}
.bj-board .row.dnf{border-left-color:var(--c-dnf)}
.bj-board .row.dns{border-left-color:var(--c-dns)}
/* the leader keeps the canvas's yellow podium treatment */
.bj-board .list > .row.gc.first{background:var(--paper-hi);border-left-color:var(--yellow)}
.bj-board .row.gc.first .pnum{color:var(--red)}
.bj-board .list > .row.conflict{border-left-color:var(--red);background:#FBE9E6}
.bj-board .pos{grid-area:pos;min-width:38px;text-align:center}
.bj-board .pnum{font-family:var(--disp);font-weight:700;font-size:clamp(20px,4vw,26px);
  line-height:1;color:var(--ink)}
.bj-board .plab{font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.bj-board .plab.tied{color:var(--coral)}
/* the cap number is data, so it is mono and teal — the canvas bib treatment */
.bj-board .cap{grid-area:cap;font:500 clamp(19px,4vw,23px)/1.15 var(--mono);
  letter-spacing:-.01em;min-width:56px;color:var(--teal)}
.bj-board .cap.pair{font-size:clamp(13px,3vw,15px);line-height:1.35}
.bj-board .who{grid-area:who;min-width:0}
.bj-board .name{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;
  overflow-wrap:anywhere;color:var(--ink)}
.bj-board .title{display:inline-block;margin-top:5px;padding:5px 9px;border-radius:var(--r-sm);
  background:var(--yellow);color:var(--ink);
  font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* The last unit home. Red, not the champion yellow — a lanterne rouge is an honour but
   it is not a podium place, and giving it the same badge would read as a fourth title. */
.bj-board .lantern{display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  padding:5px 9px;border-radius:var(--r-sm);
  background:var(--red);color:var(--bone);
  font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.bj-board .lsym{font-size:12px;line-height:1}
.bj-board .meta{font-size:12px;color:var(--muted);margin-top:3px}
.bj-board .mark{grid-area:mark;justify-self:end;text-align:right;min-width:148px;max-width:46%}
.bj-board .flag{font:600 clamp(16px,3.4vw,19px)/1.15 var(--mono);letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap}
.bj-board .row.gc .flag{color:var(--teal)}
/* a status word is a label, not a measurement — it takes the pill treatment the canvas
   gives its category badges rather than pretending to be a time */
.bj-board .flag.word{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.12em;
  padding:7px 10px;border-radius:var(--r-sm);background:var(--idle);color:var(--ink)}
.bj-board .row.ride .flag.word{background:var(--coral);color:var(--ink)}
.bj-board .row.nc .flag.word{background:var(--yellow);color:var(--ink)}
.bj-board .row.dnf .flag.word{background:var(--red);color:var(--bone)}
.bj-board .row.dns .flag.word{background:var(--idle);color:var(--muted)}
.bj-board .alt{font:400 13px/1.2 var(--mono);color:var(--muted);margin-top:4px;white-space:nowrap}
.bj-board .sub{font:400 10.5px/1.35 var(--mono);letter-spacing:.04em;color:var(--muted);
  margin-top:5px;text-transform:uppercase;overflow-wrap:anywhere}
.bj-board .sub.bad{color:var(--red)}
/* Checkpoint progress: one flex-weighted segment per leg, the canvas's signature strip.
   Segment width is the time that leg took, so the shape of the bar is the shape of the
   ride — a long bar section is a slow leg. */
/* the bar and its disclosure ride on one line: the bar is the glanceable summary and
   stays put, the button opens the detail underneath it */
.bj-board .progrow{grid-area:progrow;display:flex;align-items:center;gap:12px}
.bj-board .prog{flex:1;min-width:0;display:flex;height:10px;gap:2px}
.bj-board .toggle{flex:0 0 auto;cursor:pointer;border:none;background:transparent;
  font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--teal);
  padding:7px 4px;white-space:nowrap;border-radius:var(--r-sm)}
.bj-board .toggle:hover{color:var(--red);background:var(--idle)}
.bj-board .toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bj-board .tcar{font-size:9px;vertical-align:1px}
.bj-board .seg{border-radius:1px;min-width:2px}
.bj-board .seg.c0{background:var(--teal)}
.bj-board .seg.c1{background:var(--yellow)}
.bj-board .seg.c2{background:var(--coral)}
.bj-board .seg.c3{background:var(--red)}
.bj-board .seg.c4{background:var(--ink)}
.bj-board .seg.bad{background:repeating-linear-gradient(45deg,var(--red) 0 3px,#FBE9E6 3px 6px)}
/* splits: bone cards with a coloured left edge matching their segment in the bar above */
/* Collapsed by default. The splits grid is the tallest thing on a row — five cards that
   turn a 70px row into a 200px one — and 174 of those is a phone screen of scrolling per
   handful of riders. The markup is always emitted and hidden in CSS rather than rendered
   on demand: opening a row is then a class flip rather than a re-render of the list, and
   the row keeps its state when a filter or the search box redraws around it. */
.bj-board .splits{grid-area:splits;display:none;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.bj-board .splits.open{display:grid}
.bj-board .list > .row.open:not(.conflict){background:var(--paper-hi)}
.bj-board .leg{background:var(--bone);border-left:4px solid var(--rule);
  padding:10px 12px;border-radius:var(--r-sm);min-width:0}
.bj-board .leg.c0{border-left-color:var(--teal)}
.bj-board .leg.c1{border-left-color:var(--yellow)}
.bj-board .leg.c2{border-left-color:var(--coral)}
.bj-board .leg.c3{border-left-color:var(--red)}
.bj-board .leg.c4{border-left-color:var(--ink)}
.bj-board .lname{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal)}
.bj-board .lleg{font:600 16px/1 var(--mono);margin-top:6px;white-space:nowrap;color:var(--ink)}
.bj-board .lwhen{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap}
.bj-board .lcum{font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);opacity:.8;margin-top:4px;white-space:nowrap}
.bj-board .lvia{font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--coral);margin-top:4px;white-space:nowrap}
.bj-board .leg.bad{border-left-color:var(--red);background:#FBE9E6}
.bj-board .leg.bad .lleg{color:var(--red)}
/* A time penalty is the one leg the clock never recorded. The split cards sum to the
   ride, so on a sanctioned rider that sum no longer reaches the time on the chip; the
   penalty card and the adjusted card under it are what close that gap, which is why
   they sit at the end of the strip rather than anywhere else. */
.bj-board .leg.pen{border-left-color:var(--red);background:#FBE9E6}
.bj-board .leg.pen .lname, .bj-board .leg.pen .lleg{color:var(--red)}
.bj-board .leg.adj{border-left-color:var(--ink);background:var(--paper-hi)}
.bj-board .leg.adj .lname{color:var(--ink)}
/* the sanction has to be legible with the row shut: a reader looking at the collapsed
   list must never see two units ordered against the times printed beside them */
.bj-board .pflag{font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--red);
  margin-top:4px;white-space:nowrap}
/* four columns will not fit a phone: the name gets crushed to one word per line.
   Below this width the row stacks — position, cap and result on the top line, the name
   and its detail on a full-width line underneath, then the bar and the splits. */
@media (max-width:560px){.bj-board .row{grid-template-columns:auto auto 1fr;
       grid-template-areas:"pos cap mark" "who who who" "progrow progrow progrow" "splits splits splits";
       row-gap:10px;padding:13px}
.bj-board .cap{min-width:0}
.bj-board .mark{max-width:none}
.bj-board .splits.open{grid-template-columns:1fr}
.bj-board /* a thumb needs more than a text-sized target; the whole row toggles too, .bj-board so this
     is the affordance rather than the only way in */
  .toggle{padding:12px 8px;font-size:12.5px}

}
.bj-board .empty-state{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px;
  background:var(--paper)}
.bj-board .empty-state b{display:block;font-family:var(--disp);font-weight:700;font-size:22px;
  color:var(--ink);margin-bottom:6px}
.bj-board footer{background:var(--ink);color:var(--ink-soft);padding:28px 0 34px;
  font-size:12px;line-height:1.7}
.bj-board footer .inner{max-width:var(--maxw)}
.bj-board footer b{color:var(--bone);font-weight:600}
.bj-board footer a{color:var(--teal-soft);text-decoration:none;border-bottom:1px solid rgba(156,195,182,.4)}
.bj-board footer a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.bj-board footer code{font-family:var(--mono);font-size:11px;color:var(--yellow);
  background:rgba(237,198,22,.1);padding:1px 5px;border-radius:2px}
/* The static results table. It is the real content of the page until board.js
   replaces it, and the whole of it if the script never runs -- so it is styled to be
   read, not merely to exist. */
.bj-board table.ssr{border-collapse:collapse;width:100%;font-size:13px;
  font-variant-numeric:tabular-nums}
.bj-board table.ssr caption{text-align:left;padding:14px 16px;font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--rule)}
.bj-board table.ssr th, .bj-board table.ssr td{padding:7px 10px;text-align:left;
  border-bottom:1px solid var(--rule);vertical-align:top}
.bj-board table.ssr thead th{font:600 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.bj-board table.ssr tbody th{font-weight:600}
.bj-board table.ssr tr.grp th{background:var(--ink);color:var(--bone);
  font:600 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}
/* Its own scroll container rather than .list:has(table) -- the wide table must never
   push the page sideways, and a wrapper does that on every engine. */
.bj-board .ssrwrap{overflow-x:auto}
.bj-board table.ssr{min-width:760px}
.bj-board .footmark{display:block;font-family:var(--disp);font-weight:700;font-size:20px;
  color:var(--bone);margin-bottom:14px}
/* The mark is the title; the attribution rides under it at body weight rather than
   competing with it at 20px display bold. Links inside keep the mark's colour so the
   title does not turn teal halfway through. */
.bj-board .footmark .by{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink-soft);
  display:block;margin-top:3px}
.bj-board .footmark a{color:inherit;border-bottom-color:rgba(232,226,208,.32)}
.bj-board .footmark a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
@media print{.bj-board .bar, .bj-board .back, .bj-board footer, .bj-board .lede, .bj-board .stripe, .bj-board .tick{display:none}
.bj-board{background:#fff}
.bj-board header{background:#fff;color:#000}
.bj-board h1, .bj-board .eyebrow{color:#000}
.bj-board .sec{position:static;background:#fff;color:#000;border-bottom:2px solid #000}
.bj-board .sec .sname, .bj-board .scount, .bj-board .snote{color:#000}
.bj-board .list{border:1px solid #999}
.bj-board .row{break-inside:avoid;background:#fff}

}
/* ══════════════════════════════════════════════════════════════════════════════
   Archive additions. Everything above is the 2026 crew board's stylesheet, lifted
   whole so the archived editions and the live board are the same design rather
   than two that merely resemble each other. What follows is only what a closed
   edition needs and a running one does not.
   ══════════════════════════════════════════════════════════════════════════════ */
/* A disqualification is not a scratch, so it does not borrow the scratch colour.
   Navy is the ink of the page itself — the jury's hand rather than the road's. */
.bj-board{--c-dsq:var(--ink)}
.bj-board .stat.dsq{background:var(--ink);color:var(--bone)}
.bj-board .sec.dsq .sname{color:var(--ink-soft)}
.bj-board .row.dsq{border-left-color:var(--c-dsq)}
.bj-board .row.dsq .flag.word{background:var(--ink);color:var(--bone)}
/* The edition facts strip. On the live board this space is the race clock; here the
   equivalent question is which race this was — route, distance, climbing, cut-off —
   because a time means nothing without the course it was ridden on, and the course
   moved by 29 km across the six editions. */
.bj-board .facts{display:flex;flex-wrap:wrap;gap:0;margin-top:16px;
  border:1.5px solid var(--teal-soft);border-radius:var(--r-sm);overflow:hidden}
.bj-board .fact{flex:1 1 auto;min-width:118px;padding:9px 13px;
  border-right:1px solid rgba(156,195,182,.4)}
.bj-board .fact:last-child{border-right:none}
.bj-board .fkey{font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-soft)}
.bj-board .fval{font:600 13px/1.3 var(--mono);color:var(--bone);margin-top:5px;white-space:nowrap}
/* The six-edition switcher, replacing the year strip the old pages carried. */
.bj-board .edsw{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}
.bj-board .ed{font:600 11px/1 var(--mono);letter-spacing:.1em;text-decoration:none;
  padding:7px 11px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);color:var(--bone)}
.bj-board .ed:hover, .bj-board .ed.on{background:var(--yellow);color:var(--ink)}
/* Average speed sits under the elapsed time on the mark. It is the number that
   compares across editions, because the distance changed underneath the records and
   a raw time cannot be held against one ridden on a different course. */
.bj-board .kmh{font:600 11px/1.2 var(--mono);color:var(--teal);margin-top:4px;white-space:nowrap}
.bj-board .row.nc .kmh{color:var(--muted)}
/* How much of the 156 hours was left. Blank unless the unit is classified. */
.bj-board .spare{font:600 10px/1.3 var(--mono);color:var(--red);margin-top:3px;
  letter-spacing:.04em;text-transform:uppercase}
/* An NC rider's reason, when nc_reason alone does not explain it. A rider inside the
   cut-off holding no position reads as a bug until the chip says why — the same
   reason a penalty prints on the closed chip instead of hiding in the panel. */
.bj-board .ncnote{margin-top:6px;padding:6px 9px;border-left:2px solid var(--yellow);
  background:var(--paper-hi);font-size:12px;color:var(--ink);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
@media print{.bj-board .bar, .bj-board .edsw{display:none}
}
/* ── all-editions additions ────────────────────────────────────────────────── */
.bj-board .section{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad) 0}
.bj-board .shead{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);
  padding-bottom:9px;margin-bottom:4px}
.bj-board .shead h2{margin:0;font-family:var(--disp);font-weight:700;
  font-size:clamp(19px,3vw,26px);line-height:1.15}
.bj-board .shead .sn{font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--coral);
  text-transform:uppercase}
.bj-board .lede2{margin:10px 0 0;max-width:70ch;font-size:14px;color:var(--ink)}
.bj-board .chartbox{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px;margin-top:14px;overflow-x:auto}
.bj-board .chart{width:100%;min-width:520px;height:auto;display:block}
.bj-board .chart .ax{font:400 10px var(--mono);fill:var(--muted)}
.bj-board .chart .axb{font:600 11px var(--mono);fill:var(--ink)}
.bj-board .chart .val{font:600 11px var(--mono);fill:var(--muted)}
.bj-board .chart .dl{font:600 11px var(--sans)}
.bj-board .chart .unit{font:500 10px var(--mono);fill:var(--muted)}
.bj-board .chead{margin-top:18px}
.bj-board .chead h3{margin:0;font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.2}
.bj-board .chead p{margin:3px 0 0;max-width:70ch;font-size:12.5px;color:var(--muted)}
.bj-board .chead + .chartbox{margin-top:8px}
.bj-board .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.bj-board .lg{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--sans);color:var(--ink)}
.bj-board .sw{width:13px;height:13px;border-radius:2px;display:inline-block;flex:none}
.bj-board .sw.hatch{background:repeating-linear-gradient(45deg,#EFEBDD 0 2px,#8A8578 2px 4px)}
.bj-board .tbl{overflow-x:auto;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);margin-top:14px}
.bj-board table.rc{border-collapse:collapse;width:100%;font-size:13px;min-width:640px}
.bj-board table.rc th, .bj-board table.rc td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums}
.bj-board table.rc th:first-child, .bj-board table.rc td:first-child{text-align:left}
.bj-board table.rc thead th{font:600 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-alt);white-space:nowrap}
.bj-board table.rc tbody tr:last-child td{border-bottom:none}
.bj-board table.rc tbody tr:nth-child(even){background:var(--paper-alt)}
.bj-board table.rc a{color:var(--teal);font-weight:600}
.bj-board .rec{display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.bj-board .reccard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px 15px;border-top:3px solid var(--c,var(--teal))}
.bj-board .rectitle{font:600 9.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--c,var(--teal))}
.bj-board .recname{font-family:var(--disp);font-weight:700;font-size:17px;margin-top:7px;line-height:1.2}
.bj-board .recval{font:600 15px var(--mono);color:var(--ink);margin-top:6px}
.bj-board .recsub{font-size:12px;color:var(--muted);margin-top:4px}
.bj-board .riders{display:grid;gap:8px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bj-board .rider{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:11px 13px}
.bj-board .rider.multi{border-left:3px solid var(--teal)}
.bj-board .rname{font-weight:700;font-size:14px}
.bj-board .rmeta{font:400 11.5px var(--mono);color:var(--muted);margin-top:3px}
.bj-board .runs{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.bj-board .run{font:600 10px/1 var(--mono);padding:5px 7px;border-radius:var(--r-sm);
  background:var(--idle);color:var(--muted)}
.bj-board .run.gc{background:var(--teal);color:var(--bone)}
.bj-board .run.nc{background:var(--yellow);color:var(--ink)}
.bj-board .run.dnf{background:var(--red);color:var(--bone)}
.bj-board .run.dsq{background:var(--ink);color:var(--bone)}
.bj-board .rsearch{margin-top:14px}
.bj-board .rsearch input{width:100%;max-width:420px;padding:11px 13px;border:1.5px solid #C9C1A9;
  border-radius:var(--r-sm);font:400 14px var(--sans);background:var(--paper);color:var(--ink)}
.bj-board .rsearch input:focus{outline:2px solid var(--coral);outline-offset:1px}
.bj-board .rcount{font:400 11px var(--mono);color:var(--muted);margin-top:8px;display:block}



/* ── the supporter credit ──────────────────────────────────────────────────
   Not part of the published boards' stylesheet: on those it was injected on
   the way out, in markup written against these same tokens. It lives here now
   that the boards are no longer what is served, and it borrows the board's
   own custom properties rather than the theme's, because it sits inside the
   board wrapper. */

.bj-board .bjsup {
  border-top: 2px solid var(--ink);
  background: var(--paper-alt);
  padding: 22px 0 26px;
}

.bj-board .bjsup .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.bj-board .bjsup-k {
  margin: 0 0 14px;
  font: 600 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.bj-board .bjsup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}

/* min-height reserves the strip's row before the lazy logos load; without it
   the row is zero high until they arrive and the page shifts under the reader.
   30px is the height they are allowed to reach. */
.bj-board .bjsup-i {
  display: inline-flex;
  align-items: center;
  min-height: calc(30px * var(--bj-logo-scale, 1));
  text-decoration: none;
  border: 0;
}

.bj-board .bjsup-i img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(112px * var(--bj-logo-scale, 1));
  max-height: calc(30px * var(--bj-logo-scale, 1));
  opacity: .7;
}

.bj-board a.bjsup-i:hover img,
.bj-board a.bjsup-i:focus-visible img { opacity: 1; }

.bj-board .bjsup-n { font: 400 12px/1 var(--mono); color: var(--muted); }

.bj-board a.bjsup-i:hover .bjsup-n,
.bj-board a.bjsup-i:focus-visible .bjsup-n { color: var(--teal); }

.bj-board .bjsup-more {
  display: inline-block;
  margin-top: 16px;
  font: 400 11px/1 var(--mono);
  color: var(--teal);
}

@media print { .bj-board .bjsup { display: none; } }

/* ── two corrections to the boards' own stylesheet ─────────────────────────
   Everything above this point is the boards' CSS as published. These two are
   deliberate departures from it, because in both cases the board is wrong. */

/* 1. The route link was never styled.
   On the published boards it renders as unstyled browser blue on the teal
   masthead - #0000EE on #0E6357, a contrast ratio of 1.32, which is not a
   design decision but an oversight nobody caught because the link still
   worked. Inside the theme it inherits the site's teal instead, which is the
   masthead's own background: contrast 1.00, invisible.

   It is given the colour of the value it sits in, with a rule under it so it
   still reads as a link. */
.bj-board .fval a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal-soft);
  text-underline-offset: 3px;
}

.bj-board .fval a:hover,
.bj-board .fval a:focus-visible {
  color: var(--yellow);
  text-decoration-color: var(--yellow);
}

/* 2. The fact strip does not line up once it wraps.
   The boards lay it out as flex with content-sized cells, which is right in
   one row: six facts, each as wide as it needs. Wrapped onto a phone it puts
   the dividers at three different x positions down the strip, because each
   row sizes itself. A grid gives every row the same columns, so the rules
   line up - and the cell borders have to follow the grid rather than the
   source order. */
@media (max-width: 700px) {

  .bj-board .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bj-board .fact {
    min-width: 0;
    border-right: 1px solid rgba(156, 195, 182, .4);
    border-bottom: 1px solid rgba(156, 195, 182, .4);
  }

  .bj-board .fact:nth-child(2n) { border-right: none; }

  .bj-board .fact:nth-last-child(-n+2) { border-bottom: none; }

  /* A value that cannot wrap will push its column wider than its neighbour
     and undo the alignment the grid just bought. */
  .bj-board .fval { white-space: normal; }
}

/* 3. The board answers a motion preference; style.css already does.
   Two things move: the caret that turns when the phone filter opens, and the
   status dot that blinks
   once a second, forever, while an edition is live. The blink is what matters -
   indefinite blinking is exactly what someone who has asked their operating
   system for less motion has asked not to see, and it is the one animation here
   that no one can scroll away from. It is dormant on the six finalised boards
   and would start the day an edition is being tracked, which is the worst
   moment to discover it was never guarded. */
@media (prefers-reduced-motion: reduce) {

  .bj-board .dot.busy {
    animation: none;
  }

  .bj-board .filtoggle .caret {
    transition: none;
  }
}