/* Big board — venue screen, ink theme, ro-tokens only. Flat colour,
   committed red, whole-lane legibility from the flywheel end. */
*{box-sizing:border-box}
[hidden]{display:none !important}   /* class display rules must never resurrect a hidden face */
html,body{height:100%}
body{margin:0;background:var(--ro-ink);color:var(--ro-paper);font-family:var(--font);overflow:hidden}

/* ---------- header ---------- */
.board-head{display:flex;align-items:center;justify-content:space-between;
  background:var(--ro-red);color:var(--ro-paper);padding:var(--s2) var(--s3);min-height:var(--s6)}
/* X37 — the RowOn wordmark (White, on the red bar) replaces the word; the event's
   name stays in type beside it. Sized by /shared/brand/wordmark.css. */
.board-head__id{display:flex;align-items:center;gap:var(--s1);}
.board-head__event{font-weight:400;font-size:var(--fs-1)}
.board-head__mode{display:flex;gap:var(--s1)}
.mode-tab{font-weight:700;font-size:var(--fs-0);padding:8px var(--s2);opacity:.55}
.mode-tab.on{background:var(--ro-paper);color:var(--ro-red);opacity:1}
/* an event's official mark: "· <n> official" while the day is open, "· Official" once it is closed (8 Oct 2026) */
.mode-tab__off{font-weight:900}
.board-head__status{display:flex;align-items:center;gap:var(--s1);font-weight:700;font-size:var(--fs-0)}
/* W0-10: a void run's mark beside the heat's name */
.void-tag{background:var(--ro-yellow);color:var(--ro-ink);font-weight:900;padding:2px 10px}
.livedot{width:12px;height:12px;border-radius:50%;background:var(--ro-green);display:inline-block}
.livedot.stale{background:var(--ro-yellow)}

/* ---------- layout ---------- */
.board{height:calc(100vh - 72px);padding:var(--s2)}
.face{display:grid;grid-template-columns:1fr 280px;gap:var(--s2);height:100%}
.sidebar{background:var(--ro-elev);padding:var(--s2);overflow:hidden}
.sidebar__h{font-size:var(--fs-0);font-weight:700;margin:0 0 var(--s1);color:var(--ro-paper);
  border-bottom:2px solid var(--ro-red);padding-bottom:4px}
.sidebar ol{list-style:none;margin:0 0 var(--s3);padding:0;font-variant-numeric:tabular-nums}
.sidebar li{display:flex;justify-content:space-between;gap:var(--s1);padding:8px 0;
  border-bottom:1px solid var(--ro-line);border-bottom-color:color-mix(in srgb, var(--ro-paper) 12%, transparent);font-size:var(--fs-0)}
.sidebar li b{font-weight:900}

/* ---------- E1 thermometers ---------- */
.therm-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s1);height:100%}
.therm{display:flex;flex-direction:column;align-items:center;min-width:0}
.therm__tube{flex:1;width:70%;background:var(--ro-elev);position:relative;display:flex;align-items:flex-end}
/* 5 Nov (12:2x, "smooth out the transition of the bars moving up"): board.js updates a cell in place, so the fill and its peak mark glide to each new
   figure over most of a stroke (one about every 2 s), easing out; the watts beside them change at once. A silent lane's tube is empty at once. */
.therm__fill{width:100%;background:var(--ro-red);transition:height .8s ease-out}
.therm--ns .therm__fill{transition:none}
.therm__peak{position:absolute;left:0;width:100%;height:3px;background:var(--ro-yellow);transition:bottom .8s ease-out}
.therm__w{font-weight:900;font-size:var(--fs-1);font-variant-numeric:tabular-nums;margin-top:8px}
.therm__name{font-weight:700;font-size:var(--fs--1, 14px);width:100%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.therm__lane{color:var(--fg-dim);font-size:12px}

/* ---------- E2 track ---------- */
.track{display:flex;flex-direction:column;gap:6px;height:100%;justify-content:center}
/* X84 (16 Oct) - the hybrid style: the leader's metres and the scale over a head row (column headings and the metre labels), then a
   row per lane. A row is the same four parts as ever (lane, name, track, metres): the place is inside the name's cell and the gap
   inside the metres', so the cloud copy's phone list (the R43 block at the end of this file) lays every row out unchanged. A row
   grows with a tall screen (up to 56px) and is its own height on a short one, so twelve lanes fit a laptop. */
.track-lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);padding:0 var(--s1)}
.track-lead__l{font-weight:700;color:var(--fg-dim)}
.track-lead__m{font-weight:900;font-size:var(--fs-3);line-height:1.1;font-variant-numeric:tabular-nums}
.track-lead__s{font-size:14px;color:var(--fg-dim)}
.track-row{display:grid;grid-template-columns:28px 200px 1fr 130px;align-items:center;gap:var(--s1);
  min-height:clamp(26px, calc((100vh - 340px) / 13), 56px)}
.track-row__lane{font-weight:900;color:var(--fg-dim);text-align:center}
.track-row__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* X85b: "Warning, lane 3" / "Excluded, lane 5" under the name (a false start the umpire confirmed); by lane number, never a name */
.track-row__fs{display:block;width:max-content;max-width:100%;padding:0 6px;font-size:.72em;line-height:1.25;font-weight:900;background:var(--ro-yellow);color:var(--ro-ink)}
.track-row--ex .track-row__fs{background:var(--ro-red);color:var(--ro-paper)}
.track-row--ex .track-row__dot{opacity:.45}
.track-row__pl{display:inline-block;min-width:2ch;margin-right:var(--s1);text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-dim)}
/* the track is inset 12px each side so a boat on either edge (its 22px dot is centred on the metre) is still inside the row, and the
   gridlines and the labels use the same inset: they all stand where the metres are */
.track-row__lanebed{position:relative;height:16px;margin:0 12px;background:var(--ro-elev)}
.track-row__grid{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb, var(--ro-paper) 22%, transparent)}
.track-row__dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;
  border-radius:50%;background:var(--ro-paper)}
.track-row.leader .track-row__dot{background:var(--ro-yellow)}
/* behind the left edge of the track: a ring, not a disc, on the edge (the shape says it, not only the position); the gap says how far */
.track-row--off .track-row__dot{background:transparent;border:4px solid var(--ro-paper)}
.track-row--empty{opacity:.4}
/* 17 Oct (16 Oct 16:40) - a lane the close left without a place: no boat (the script draws none), a hyphen for the figure, the name and lane a little back */
.track-row--up .track-row__name,.track-row--up .track-row__lane{opacity:.6}
.track-row__m{font-weight:900;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.track-row__gap{margin-left:var(--s1);font-size:14px;font-weight:700;color:var(--fg-dim)}
.track-row--head{min-height:0;align-items:end;font-size:14px;font-weight:700;color:var(--fg-dim)}
.track-row--head .track-row__lane,.track-row--head .track-row__pl{font-weight:700}
.track-row--head .track-row__m{white-space:normal;font-weight:700}
.track-row--head .track-row__gap{display:block;margin:0}
.track-row__scale{height:20px;background:none}
.track-row__tick{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.track-row__tick--start{transform:none}
.track-row__tick--end{transform:translateX(-100%)}
.sidebar__note{margin:0 0 var(--s1);font-size:14px;color:var(--fg-dim)}

/* ---------- E3 tiles ---------- */
.face--e3{grid-template-rows:auto 1fr;grid-template-columns:1fr 280px}
/* X96 L-7 (31 Oct): the time left, a band across the top of the board in the largest type the page has (shared/heat-clock.css sets the rest) */
/* an inset block, so the closing quarter's red is a block of its own and not the header's red grown by a row */
.heat-clock--board{--heat-clock-size:var(--fs-5);margin:var(--s1) var(--s3);padding:var(--s1) var(--s3);text-align:center}
.stageclock{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s3);
  background:var(--ro-red);padding:var(--s1) var(--s3)}
.stageclock__stage{font-weight:900;font-size:var(--fs-3)}
.stageclock__target{font-weight:900;font-size:var(--fs-3);font-variant-numeric:tabular-nums}
.stageclock[hidden],.stageclock__stage[hidden],.stageclock__target[hidden]{display:none}
.stageclock__bar{flex:1;height:12px;background:var(--ro-red-2);position:relative}
/* the bar is drawn every frame from the bus clock (board.js), so it has no transition: one would sweep it back across at every step */
.stageclock__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ro-paper);width:0%}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:var(--s1)}
.tile{background:var(--ro-elev);padding:var(--s1) var(--s2);display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.tile__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__lane{color:var(--fg-dim);font-size:12px}
.tile__big{font-weight:900;font-size:var(--fs-2);font-variant-numeric:tabular-nums}
.tile__sub{color:var(--fg-dim);font-size:14px;font-variant-numeric:tabular-nums}
.tile.finished .tile__big{font-size:var(--fs-1)}
/* 6 Nov (ruling 157 and the lead's defaults D1, D2, D4, OPEN) - Event 3 on the big screen.
   D2: a climbing lane's strikes in this stage, a NUMBER read from across the hall, with its words ("Strikes", "of 3"). From 7 Nov the panel colour (below) carries the
   state and the number is plain ink or white on it, so no rule here colours the number by its count. The number and the words say it; the colour only draws the eye. */
.tile__strikes{display:flex;align-items:baseline;gap:var(--s1);line-height:1;font-variant-numeric:tabular-nums}
.tile__sk-l{font-weight:700;font-size:var(--fs-1)}
.tile__sk-n{font-weight:900;font-size:clamp(var(--fs-4),7vh,84px)}
.tile__sk-of{font-weight:700;font-size:var(--fs-1);color:var(--fg-dim)}
/* D4: a lane out on strikes is a SOLID tile, not an outline: a dark fill of the finish yellow with "OUT · Stage 4" large in a dimmed yellow. Dimmed on purpose: by the
   end of a heat most tiles are out, and the lanes still climbing (the grey tiles with white figures) must be the ones the eye goes to */
.tile--out{background:color-mix(in srgb, var(--ro-yellow) 12%, var(--ro-ink))}
.tile--out .tile__name{color:var(--fg-dim)}
.tile.tile--out .tile__out{font-size:var(--fs-4);line-height:1.05;color:color-mix(in srgb, var(--ro-yellow) 70%, var(--ro-ink))}
/* bug 12: a lane nobody was put in, an empty frame: no fill, no figures */
.tile--empty{background:transparent;border:2px solid var(--ro-elev)}
.tile--empty .tile__name{color:var(--fg-dim)}
/* D1: the last 5 s of a stage. 11 Nov: only the words of the next step ("next step in 0:03") flash, not the line. They flash once a second (a yellow block with ink figures, then as it was), and the stage band says what is coming; under
   reduced motion the board's rule below stops the flash and the yellow block stays, a steady highlight. */
@keyframes ro-e3-flash{50%{background:transparent;color:var(--ro-paper)}}
.heat-clock--board .heat-clock__next{padding:0 .2em}
.heat-clock--board.heat-clock--flash .heat-clock__next{background:var(--ro-yellow);color:var(--ro-ink);animation:ro-e3-flash 1s step-end infinite}
.stageclock__next{flex:none;padding:2px var(--s2);background:var(--ro-yellow);color:var(--ro-ink);font-weight:900;font-size:var(--fs-3);line-height:1.15;font-variant-numeric:tabular-nums}

/* ---------- X96 L-7b (1 Nov): the next wave, between heats ----------
   Above the faces, inside the race column (board.js adds .has-next to #board only while the panel shows, so the race column then makes room for it and the faces share what is left;
   the online board is never given the class and its markup stays hidden). The wave's name small, its clock in the largest type the page has, then the lineup in columns filled
   down: 12 ergs are 3 columns of 4, 13 to 24 step down to dense type in 4 columns of up to 6 rows. A name or a club that is too long for its cell is cut with an ellipsis; the lane number never is. */
.board.has-next .board__race{display:flex;flex-direction:column;gap:var(--s1);min-height:0}
.board.has-next .board__race>.face{flex:1 1 0;height:auto;min-height:0}
.next-panel{flex:none;display:flex;flex-direction:column;gap:6px;background:var(--ro-elev);border-left:8px solid var(--ro-red);padding:var(--s1) var(--s3)}
.next-panel__when{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3)}
.next-panel__head{margin:0;font-weight:700;font-size:var(--fs-2)}
.next-panel__main{margin:0;font-weight:900;font-size:var(--fs-3);line-height:1.15;font-variant-numeric:tabular-nums}
.next-panel[data-reading="counting"] .next-panel__main,.next-panel[data-reading="starting"] .next-panel__main,.next-panel[data-reading="about"] .next-panel__main{font-size:var(--fs-5)}
.next-panel[data-reading="planned"] .next-panel__main{font-size:var(--fs-4)}
.next-panel__note{margin:0;font-size:var(--fs-0);color:var(--fg-dim)}
.next-panel__lineup{display:grid;grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px var(--s4);font-size:var(--fs-1);line-height:1.4;font-variant-numeric:tabular-nums}
.next-panel__lineup[data-grid="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px var(--s3)}
.next-panel__lineup[hidden]{display:none}
.next-panel__lineup[data-rows="1"]{grid-template-rows:repeat(1,auto)}
.next-panel__lineup[data-rows="2"]{grid-template-rows:repeat(2,auto)}
.next-panel__lineup[data-rows="3"]{grid-template-rows:repeat(3,auto)}
.next-panel__lineup[data-rows="4"]{grid-template-rows:repeat(4,auto)}
.next-panel__lineup[data-rows="5"]{grid-template-rows:repeat(5,auto)}
.next-panel__lineup[data-rows="6"]{grid-template-rows:repeat(6,auto)}
.next-panel__lineup[data-dense="1"]{font-size:var(--fs-0);line-height:1.35}
.np-row{display:flex;align-items:center;gap:var(--s1);min-width:0}
.np-row__lane{flex:none;min-width:2ch;text-align:right;font-weight:900;color:var(--fg-dim)}
.np-row__name{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-row__club{flex:0 100 auto;max-width:45%;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-text,.np-more{grid-column:1 / -1;margin:0;color:var(--fg-dim)}
/* Event 2's track takes its row height from the screen's height (the .track-row rule above): with the panel up there is that much less room, and the twelve rows would run off the foot
   of the board and hide the last lanes' results. So each row takes its share of what is left (the panel's and the clock's band taken out), and a short screen gets the panel in
   denser type. */
.board.has-next .track-row{min-height:clamp(22px, calc((100vh - 600px) / 13), 56px)}
.board.has-next .track-row--head{min-height:0}
@media (max-height:900px){
  .next-panel[data-reading="counting"] .next-panel__main,.next-panel[data-reading="starting"] .next-panel__main,.next-panel[data-reading="about"] .next-panel__main{font-size:var(--fs-4)}
  .next-panel__head{font-size:var(--fs-1)}
  .next-panel__lineup{font-size:var(--fs-0);line-height:1.35}
}

/* ---------- countdown cue overlay ---------- */
.cue{position:fixed;inset:0;background:var(--ro-ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:10}
.cue__text{font-weight:900;font-size:min(38vw,380px);line-height:1;font-variant-numeric:tabular-nums}
.cue__sub{font-weight:700;font-size:var(--fs-3);color:var(--fg-dim)}
.cue.go .cue__text{color:var(--ro-green)}
.cue.abort .cue__text{color:var(--ro-yellow)}
/* 28 Oct - the start overlay (screens/shared/start-overlay.js): the locked start sequence over the whole board, above the count (.cue). See-through
   where the sequence shows nothing, so the count shows under it; in a synced heat the monitor's words are a line over the 3-2-1. */
.so{position:fixed;inset:0;z-index:20;pointer-events:none}
.so__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.so__line{position:absolute;left:0;right:0;bottom:7vh;margin:0;padding:.12em 0;text-align:center;color:var(--ro-paper);font-weight:900;font-size:4vw;letter-spacing:.06em;
  background:var(--ro-ink)}
.so-log{position:fixed;right:1vw;bottom:1vw;z-index:30;max-width:60vw;margin:0;padding:.8vw 1vw;white-space:pre-wrap;
  font:600 max(12px,1vw)/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--ro-paper);background:rgba(0,0,0,.88);border:1px solid var(--ro-dim)}

@media (max-width:900px){
  .face{grid-template-columns:1fr}
  .sidebar{display:none}
  .therm-grid{grid-template-columns:repeat(6,1fr)}
  .tile-grid{grid-template-columns:repeat(3,1fr)}
  .track-row{grid-template-columns:22px 130px 1fr 90px}
}

/* 7 Nov (the big board ruling): a whole-panel colour by strikes - green 0, yellow 1, yellow flashing 2, red out. render.js e3Panel decides; the strike number stays on
   the tile. White on green and red, dark ink on yellow and amber (all at least 4.8:1, past WCAG AA 4.5:1). The flash goes yellow to a darker amber and back, never to black, about 1 s a cycle (board.js). */
/* the panel colours are the brand tokens (the brand lint bans a raw hex here): green and the amber are the brand green and yellow darkened with the ink, so white (green) and ink (amber) text pass AA */
:root{--panel-green:color-mix(in srgb, var(--ro-green) 70%, var(--ro-ink));--panel-yellow:var(--ro-yellow);--panel-amber:color-mix(in srgb, var(--ro-yellow) 68%, var(--ro-ink));--panel-red:var(--ro-red);--panel-grey:var(--ro-dim);--panel-ink:var(--ro-ink)}
.tile--p-green{background:var(--panel-green);color:var(--ro-paper)}
.tile--p-yellow,.tile--p-flash{background:var(--panel-yellow);color:var(--panel-ink)}
.tile--p-red,.tile.tile--out.tile--p-red{background:var(--panel-red);color:var(--ro-paper)}
.tile--p-green .tile__lane,.tile--p-green .tile__sub,.tile--p-green .tile__sk-of,.tile--p-red .tile__lane,.tile--p-red .tile__sub,.tile--p-red .tile__name,.tile--p-red .tile__sk-of{color:var(--ro-paper)}
.tile--p-yellow .tile__lane,.tile--p-yellow .tile__sub,.tile--p-yellow .tile__sk-of,.tile--p-flash .tile__lane,.tile--p-flash .tile__sub,.tile--p-flash .tile__sk-of{color:var(--panel-ink)}
.tile.tile--out.tile--p-red .tile__out{color:var(--ro-paper)}
/* 7 Nov (ruling, "Neutral tile"): a lost erg is a calm grey tile, white text (the brand dim grey, past AA with white), never red or yellow */
.tile--p-grey{background:var(--panel-grey);color:var(--ro-paper)}
.tile--p-grey .tile__lane,.tile--p-grey .tile__name,.tile--p-grey .tile__sub{color:var(--ro-paper)}
.tile.tile--lost .tile__lost{font-size:var(--fs-4);line-height:1.05;color:var(--ro-paper)}
.tile--p-yellow .tile__sk-n,.tile--p-flash .tile__sk-n{background:none;color:var(--panel-ink);padding:0}
/* the flash is board.js's blink class on the grid, never a CSS animation on a tile: the tiles are rebuilt every frame and a tile's animation would restart each time */
.tile-grid--blink .tile--p-flash{background:var(--panel-amber)}

/* checklist: motion is respectful — a vestibular-safe board is still a board */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
/* 7 Nov: the 2-strike panel does not flash for those who ask for no motion (the rule above stops its animation): a steady darker amber with a thick inset ring instead (a ring, not a border, so the tile keeps its size) */
@media (prefers-reduced-motion: reduce){
  .tile--p-flash{background:var(--panel-amber);box-shadow:inset 0 0 0 6px var(--panel-ink)}
}

/* narrow-viewport floor: the board is a display surface. Below ~960px each
   face scrolls inside its own container instead of smearing the numerals
   (checklist: wide content scrolls in its container, never the page). */
.board{overflow-x:auto}
.face{min-width:960px}

/* 16 §2.2 — always-on recognition rail (Festival + Efficiency + Hat-Trick watch) */
.board{display:grid;grid-template-columns:1fr 320px;gap:var(--s2)}
.board__race{min-width:0;height:100%}
.rail{background:var(--ro-elev);padding:var(--s2);overflow:hidden;min-width:0}
.rail__list{list-style:none;margin:0 0 var(--s3);padding:0;font-variant-numeric:tabular-nums}
.rail__list li{display:flex;justify-content:space-between;gap:var(--s1);padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:var(--fs-0)}
.rail__list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail__list li b{font-weight:900;flex:none}
.rail__award{margin:0 0 var(--s1);padding:6px 8px;border-left:3px solid var(--ro-red);
  background:rgba(255,255,255,.05);font-size:var(--fs-0)}
.rail__award b{float:right;color:var(--ro-red)}
.rail__empty{color:var(--fg-dim);font-size:var(--fs-0)}
@media (max-width:1400px){ .board{grid-template-columns:1fr} .rail{display:none} }

/* T9(g) — results are provisional until the umpire signs the session off.
   Sentence case deliberately: leak-gate blocks the all-caps spelling of this
   word on a public surface (it is the division marker), and this screen ships
   to cloud/hosting/. */
.prov{background:var(--ro-yellow);color:var(--ro-ink);font-weight:900;padding:2px 10px;
  margin-right:8px;font-size:var(--fs-0)}

/* C1b — the cloud copy says its phase in words. data-phase is set only by the
   cloud client (screens/shared/bus-client-cloud.js), so none of this applies
   on the venue network. Before the event, and while it is still finding out,
   the page shows the panel instead of whatever the database holds: that is a
   rehearsal's leftovers or nothing, never this event's racing. The same after
   the event when no heartbeat from the day ever arrived ('nofeed'). Paused or
   finished, the last results stay, but a countdown left on screen is not. */
.phase{font-weight:700;font-size:var(--fs-0)}
.phase[data-phase="live"]{white-space:nowrap}
.phase[data-phase="live"]::before{content:'';display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--ro-green);margin-right:var(--s1)}
.phase[data-phase="paused"]{background:var(--ro-paper);color:var(--ro-ink);padding:0 var(--s1)}
.phase-panel{padding:var(--s6) var(--s3);max-width:56rem}
.phase-panel h2{font-weight:900;font-size:var(--fs-4);line-height:1.1;margin:0 0 var(--s2)}
.phase-panel p{font-size:var(--fs-1);color:var(--fg-dim);margin:0}
[data-phase="checking"] .board,[data-phase="before"] .board,[data-phase="nofeed"] .board,
[data-phase="checking"] .board-head__mode,[data-phase="before"] .board-head__mode,[data-phase="nofeed"] .board-head__mode,
[data-phase="checking"] #heat-name,[data-phase="before"] #heat-name,[data-phase="nofeed"] #heat-name,
[data-phase="checking"] #heat-void,[data-phase="before"] #heat-void,[data-phase="nofeed"] #heat-void,
[data-phase="checking"] .prov,[data-phase="before"] .prov,[data-phase="nofeed"] .prov{display:none !important}
[data-phase="checking"] .cue,[data-phase="before"] .cue,[data-phase="nofeed"] .cue,
[data-phase="paused"] .cue,[data-phase="finished"] .cue{display:none !important}
/* the cloud copy is opened on phones: the header wraps so the phase line is on screen */
@media (max-width:900px){
  .board-head{flex-wrap:wrap;gap:var(--s1)}
  .phase-panel h2{font-size:var(--fs-3)}
}

/* X87 (15 Oct) - "NO SIGNAL, LANE n" / "DATA PAUSED" (screens/shared/signal.css has the banner). On the board it sits across the top of
   the race, under the red bar, so it is the first thing read from the flywheel end; the numbers below it are dimmed while the whole
   feed is paused. A silent lane says the words where its number was and loses its fill / dot: no frozen colour stands in for them. */
/* The banner takes its own height OUT of the board's rather than lying over the top of the race (it would hide the stage clock and
   lane 1): the page is a column, and the board is what is left of it. With no banner that is exactly what the board was. */
body{display:flex;flex-direction:column}
.board{flex:1 1 auto;height:auto;min-height:0}
.board.paused{opacity:.45}
.therm--ns .therm__tube{background:var(--ro-ink);outline:2px dashed var(--ro-yellow);outline-offset:-2px}
.therm--ns .therm__w{font-size:var(--fs-0);line-height:1.1;text-align:center;color:var(--ro-yellow)}
.track-row--ns .track-row__dot{visibility:hidden}
.track-row--ns .track-row__m{color:var(--ro-yellow)}
.track-row--ns .track-row__name,.track-row--ns .track-row__lane{opacity:.6}
.tile--ns{outline:3px dashed var(--ro-yellow);outline-offset:-3px}
.tile--ns .tile__big{font-size:var(--fs-1);color:var(--ro-yellow)}

/* 7 Nov - the break reel between heats: full area, behind the next-start panel (z 6) and the cue (10) and the start overlay (20), which stay on top and readable */
.board-reel{position:fixed;inset:0;z-index:5;background:var(--ro-ink)}
.board-reel[hidden]{display:none}
.board-reel video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ro-ink)}
.next-panel{position:relative;z-index:6}   /* 7 Nov: over the reel layer; the online copy ships this panel hidden, so it is unaffected there */

/* R43 (13 Oct: "Board didn't fit"; R81, 15 Oct: the board fits phones, tablets and laptops, on the CLOUD COPY only,
   the venue board never changes) - the board on a phone. Every selector starts with html[data-phase], which only the
   cloud client sets (screens/shared/bus-client-cloud.js paintPhase; the venue's own client never does,
   test/unit/cloud-pages.test.js C1b), so no venue screen gets this at any width or with any pointer, touch included.
   At 900px wide or less, or 500px high or less (a phone turned sideways), or on a touch screen 1400px wide or less
   (R112, 16 Oct: a tablet held sideways cut Event 1's names to about a third; "Phone list on touch screens"), the
   board is a LIST: one row per lane, all twelve in one column, the page scrolls down (never sideways), and the face's
   own list and the recognition rail follow the lanes. A touch screen is one whose main pointer is a finger
   (pointer:coarse): a laptop's main pointer is its trackpad or mouse, touch screen or not, so laptops keep the fill
   below. 1400px takes every iPad either way up (the largest is 1376px wide sideways) and is where the venue rule above
   already drops the rail; a touch screen wider than that (a touch monitor) keeps the fill. It overrides the
   narrow-viewport floor above (.face min-width 960px). The C1b phase hides above keep winning: they are !important.
   Held by test/unit/r43-phone.test.js. */
@media (max-width:900px), (max-height:500px), (pointer:coarse) and (max-width:1400px){
  html[data-phase],html[data-phase] body{height:auto}
  html[data-phase] body{overflow:visible}
  html[data-phase] .board{display:block;height:auto;overflow-x:visible;padding:var(--s1) var(--s2) var(--s5)}
  html[data-phase] .board__race{height:auto}
  html[data-phase] .face,html[data-phase] .face--e3{display:block;min-width:0;height:auto}

  html[data-phase] .board-head{flex-wrap:wrap;padding:var(--s1) var(--s2);min-height:0;gap:4px var(--s2)}
  html[data-phase] .board-head__event{font-size:var(--fs-0)}
  html[data-phase] .board-head__mode{order:3;flex:1 1 100%}
  html[data-phase] .mode-tab{display:none}
  html[data-phase] .mode-tab.on{display:block;padding:0;background:none;color:var(--ro-paper);font-size:var(--fs-1)}
  html[data-phase] .board-head__status{order:4;flex:1 1 100%;flex-wrap:wrap;gap:4px var(--s1);justify-content:flex-start}
  html[data-phase] .prov{margin:0}

  html[data-phase] .therm-grid{display:flex;flex-direction:column;gap:var(--s1);height:auto;container-type:inline-size}
  html[data-phase] .therm{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;align-items:baseline;column-gap:var(--s1);
    position:relative;padding-bottom:18px}
  html[data-phase] .therm__tube{position:absolute;top:calc(100% - 12px);left:0;flex:none;width:12px;
    height:calc(100vw - 2 * var(--s2));height:100cqw;
    transform-origin:0 0;transform:translateX(calc(100vw - 2 * var(--s2))) rotate(90deg)}
  @supports (width:1cqw){ html[data-phase] .therm__tube{transform:translateX(100cqw) rotate(90deg)} }
  html[data-phase] .therm__lane{order:1;font-size:14px}
  html[data-phase] .therm__name{order:2;font-size:var(--fs-0);text-align:left}
  html[data-phase] .therm__w{order:3;margin:0}

  html[data-phase] .track{height:auto;justify-content:flex-start;gap:var(--s1)}
  html[data-phase] .track-row{grid-template-columns:2.5ch minmax(0,1fr) auto;row-gap:6px}
  html[data-phase] .track-row__lanebed{grid-column:1 / -1;grid-row:2;height:10px}
  html[data-phase] .track-row__dot{width:16px;height:16px}
  /* R45 A5 F2 (19 Oct): a row is the tap target of the follow tap (R43: 44px) and was 40px (a name's line, row-gap 6px, the 10px lanebed). The box is
     44px and the 2px it gains each side comes back as margin, so nothing below it moves. --row-base is the base rule's own min-height (the box a row
     had on a tall screen, which is above 44px from 912px high): the box is never smaller than that, and the margin is 0 once the base is 44px or more,
     -2px while it is 40px or less (screens up to 860px high), and in between exactly what keeps the row's footprint what it was. */
  html[data-phase] .track-row:not(.track-row--head){--row-base:clamp(26px, calc((100vh - 340px) / 13), 56px);
    min-height:max(44px, var(--row-base));margin:calc((max(40px, var(--row-base)) - max(44px, var(--row-base))) / 2) 0}

  /* X96 R208 review (1 Nov): the heat clock on the online board, on a phone. The venue's 24px inset left 279px of a 375px phone, and Event 3's line ("Stage 12, target 420 W, next
     step in 0:29") ran to five lines at 49px and broke "420" from its W. The inset is 16px here, and Event 3's line is sized from the width that is left: its first line,
     "Stage 12, target 420 W,", is 11.75em wide in Mont 700 (measured in Chrome), so a size of (width - the inset) / 13.5 keeps it whole, and the rest ("next step in 0:29")
     is the second line; never below --fs-1 (20px, at 320px wide) or above --fs-5. Checked from 320 to 900px across stages 1 to 12, the last-stage line and the window lines:
     two lines at most, 80px tall at 430px, no split of a figure from its W. Event 1 and 2's "m:ss left" keeps the largest figure the page has (one line from 320px up). */
  html[data-phase] .heat-clock--board{margin:var(--s1) var(--s2);padding:var(--s1) var(--s2)}
  html[data-phase] .heat-clock--board[data-kind="stage"]{--heat-clock-size:clamp(var(--fs-1),calc((100vw - 4 * var(--s2)) / 13.5),var(--fs-5))}

  html[data-phase] .stageclock{gap:var(--s2);padding:var(--s1) var(--s2)}
  html[data-phase] .stageclock__stage,html[data-phase] .stageclock__target{font-size:var(--fs-2)}
  html[data-phase] .tile-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:var(--s1);margin-top:var(--s1)}
  html[data-phase] .tile{flex-flow:row wrap;justify-content:flex-start;align-items:baseline;column-gap:var(--s2);padding:var(--s1) var(--s2)}
  html[data-phase] .tile > div:first-child{flex:1 1 100%;min-width:0;margin-bottom:4px}
  html[data-phase] .tile__lane,html[data-phase] .tile__sub{font-size:14px}
  html[data-phase] .tile__sub{white-space:nowrap}
  html[data-phase] .tile__big{font-size:var(--fs-1)}

  html[data-phase] .sidebar{display:block;margin-top:var(--s2)}
  html[data-phase] .rail{display:block;margin-top:var(--s2)}
}

/* R43 (R81: tablets and laptops too; R112, 16 Oct: laptops, not touch screens) - the cloud copy wider than 900px and
   taller than 500px with a trackpad or mouse (pointer:fine) or no pointer (pointer:none), or wider than 1400px with any
   pointer: the race fills what the header leaves. Exactly what the list above does not take, so the two never both
   apply. Spelled out pointer by pointer because "and (not (pointer:coarse))" is newer Media Queries 4 syntax: a
   browser that does not read it drops the whole condition, and the fill with it. The header wraps to 96-122px at these
   widths, and the 72px the board's height assumes (above) cut off the bottom of every Event 1 lane with no way to
   scroll. html[data-phase]: the venue screen never matches. */
@media (min-width:901px) and (min-height:501px) and (pointer:fine), (min-width:901px) and (min-height:501px) and (pointer:none), (min-width:1401px) and (min-height:501px){
  html[data-phase] body{display:flex;flex-direction:column}
  html[data-phase] .board{flex:1 1 0;min-height:0;height:auto}
}