*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--ro-ink);color:var(--ro-paper);font-family:var(--font)}
.st-head{display:flex;justify-content:space-between;align-items:center;background:var(--ro-red);
  padding:var(--s1) var(--s3);min-height:var(--s6);font-weight:700}
.st-head b{font-weight:900}
/* X37 — the RowOn wordmark (White, on the red bar) replaces the word; sized by /shared/brand/wordmark.css. */
.st-head__id{display:flex;align-items:center;gap:var(--s1);}
.livedot{width:10px;height:10px;border-radius:50%;background:var(--ro-green)}
.livedot.stale{background:var(--ro-yellow)}
.st{display:grid;grid-template-columns:1fr 320px;gap:var(--s3);padding:var(--s3);max-width:1200px;margin:0 auto}
.col h2{font-weight:900;font-size:var(--fs-2);border-bottom:3px solid var(--ro-red);padding-bottom:8px}
.fest{list-style:none;margin:0;padding:0}
.fest li{display:flex;align-items:center;gap:var(--s2);padding:8px 0;border-bottom:1px solid var(--ro-elev);
  font-size:var(--fs-1);font-variant-numeric:tabular-nums}
.fest .pl{font-weight:900;width:40px;text-align:right;color:var(--fg-dim)}
.fest .nm{flex:1;font-weight:700}
.fest .nm small{display:block;color:var(--fg-dim);font-weight:400;font-size:14px}
.fest b{font-weight:900;font-size:var(--fs-2)}
.fest li:nth-child(1) b{color:var(--ro-yellow)}
.watch{list-style:none;margin:0;padding:0}
.watch li{padding:8px 0;border-bottom:1px solid var(--ro-elev)}
.watch small{display:block;color:var(--fg-dim)}
.upd{color:var(--fg-dim);font-variant-numeric:tabular-nums}
.stale{color:var(--fg-dim)}
@media (max-width:800px){.st{grid-template-columns:1fr}}

/* S-17/S-18 — club standings + the Power Efficiency headline award */
.st h2 .hl { font-size: var(--fs-0); color: var(--ro-red); text-transform: uppercase; letter-spacing: .08em; }
.award { margin: 0 0 var(--s2); padding: var(--s2); border-radius: var(--radius-sm);
  background: var(--panel-bg); border-left: 4px solid var(--ro-red); }
.award .pct { float: right; font-variant-numeric: tabular-nums; color: var(--ro-red); }
.fest.eff b, .fest.clubs b { font-variant-numeric: tabular-nums; }

/* X17/D40 — the Para classification result, one list per classification. The
   sub-heading is deliberately quieter than the h2 above it: PR1/PR2/PR3 are
   groups within one result, not three results of their own. */
.pr-h { font-weight: 900; font-size: var(--fs-1); margin: var(--s2) 0 0; }
.pr-h small { font-weight: 400; color: var(--fg-dim); font-size: 14px; }

/* T9(g) — see screens/board/board.css: provisional until the umpire signs off. */
.st-head__right{display:flex;gap:var(--s1);align-items:center}
.prov{background:var(--ro-yellow);color:var(--ro-ink);font-weight:900;padding:2px 10px;font-size:13px}

/* C1b — see screens/board/board.css: the cloud copy's phase in words, set only
   by the cloud client. Before the event, and after it when no heartbeat from the
   day ever arrived ('nofeed'), the panel stands in for the lists. */
.phase{font-weight:700}
.phase[data-phase="live"]{white-space:nowrap}
.phase[data-phase="live"]::before{content:'';display:inline-block;width:10px;height:10px;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:1200px;margin:0 auto}
.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"] .st,[data-phase="before"] .st,[data-phase="nofeed"] .st,
[data-phase="checking"] .prov,[data-phase="before"] .prov,[data-phase="nofeed"] .prov{display:none !important}
@media (max-width:720px){.phase-panel h2{font-size:var(--fs-3)}}

/* R43 (R81: phones too, on the CLOUD COPY only; the venue screen never changes) - the standings on a phone. Every
   selector starts with html[data-phase], which only the cloud client sets, at 800px and below, where the page is
   already one column, or 500px high and below (a phone turned sideways). The header wraps (it was 451px wide on a
   375px phone, "Live" off the right edge), the headline award's label sits on its own line, and no text is under
   14px. Held by test/unit/r43-phone.test.js. */
@media (max-width:800px), (max-height:500px){
  html[data-phase] .st-head{flex-wrap:wrap;gap:4px var(--s2);padding:var(--s1) var(--s2)}
  html[data-phase] .st-head__right{flex-wrap:wrap}
  html[data-phase] .st{padding:var(--s2)}
  html[data-phase] .st h2 .hl{display:block;margin-top:4px}
  html[data-phase] .prov{font-size:14px}
  html[data-phase] .watch small{font-size:14px}
}