/* Courtdesk TV: the shell the StateSig.tv desks' TVs share (header with the scene tab, up next, the countdown ring and the
   clock; the strip under it; one big scene; dots, progress and the two-tier lower third), from Econdesk TV, with the
   court's own pieces at the end: the bench of nine (each justice's side in a decision), opinion lists, the justices'
   table, the agreement grid, the argument calendar and the opinion takeover. Majority and dissent are teal and orange,
   never party colours. Two typefaces: Barlow Condensed for headlines, labels and numbers, IBM Plex Sans for sentences.
   Sizes follow the screen (vh). */
/* Barlow Condensed Bold and IBM Plex Sans, both under the SIL Open Font License (fonts/OFL-*.txt) */
@font-face{font-family:"Barlow Condensed";src:url("/fonts/display.ttf") format("truetype");font-weight:700 900;font-display:swap}
@font-face{font-family:"Courtdesk Text";src:url("/fonts/text.ttf") format("truetype");font-weight:400 500;font-display:swap}
@font-face{font-family:"Courtdesk Text";src:url("/fonts/text-semibold.ttf") format("truetype");font-weight:600 800;font-display:swap}
:root{
  --disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--text:"Courtdesk Text","Segoe UI",system-ui,sans-serif;
  /* type scale */
  --fs-label:clamp(10px,1.55vh,21px);--fs-small:clamp(12px,1.95vh,26px);--fs-body:clamp(14px,2.45vh,33px);
  --fs-title:clamp(19px,3.6vh,49px);--fs-head:clamp(28px,6.5vh,88px);
  /* palette: Courtdesk's statesig.tv colour #c0457a runs through the chrome; data colours stay fixed */
  --bg:#0e0d1b;--line:#3a2c4c;--line-2:#4b3c66;--ink:#f3f6fc;--ink-2:#b8c2d8;--ink-3:#7b87a3;
  --brand:#b23a6e;--brand-hi:#ff8fbf;--brand-deep:#4d1730;--brand-top:#d4558c;--glow-1:rgba(178,58,110,.16);--glow-2:rgba(178,58,110,.12);--hi-glow:rgba(255,143,191,.45);--gold:#f7b733;--live:#e5262e;--amber:#f2a93b;
  --d:#2f7bff;--d-hi:#86b4ff;--d-tint:#173468;--r:#f0464b;--r-hi:#ff9a9a;--r-tint:#5a1d25;--o:#a37fe0;--o-hi:#cdb6f5;--o-tint:#33274d;
  --flag-red:#e63946;--flag-white:#f4f6fb;--flag-blue:#2f62e6;--scene:var(--brand-hi);
  --glass:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 38%,rgba(0,0,0,.2)),rgba(25,23,45,.82);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,143,191,.12),0 2.2vh 5vh -1.2vh rgba(0,0,0,.7)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--text);cursor:none}
body{display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 100% 100%,var(--glow-1) 0,transparent 55%),radial-gradient(ellipse at 0% 0%,var(--glow-2) 0,transparent 45%),var(--bg)}
body.pointer{cursor:default}
body::before{content:"";flex:none;height:.45vh;background:linear-gradient(90deg,var(--flag-red) 0 33.4%,var(--flag-white) 33.4% 66.6%,var(--flag-blue) 66.6%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(155,179,209,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(155,179,209,.035) 1px,transparent 1px);background-size:4.2vh 4.2vh;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 80%)}
.d{color:var(--d-hi)}.r{color:var(--r-hi)}.o{color:var(--o-hi)}
.muted{color:var(--ink-3)}

/* Header: the logo, the scene tab, up next, the ring and the clock */
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1vh 1.5vw;padding:2.2vh 3vw 0}
.brand{display:flex;align-items:center;gap:1.4vw;white-space:nowrap;min-width:0}
.logo{display:flex;align-items:center;gap:.08em;font:800 clamp(18px,3.5vh,47px)/1 var(--disp);letter-spacing:.05em}
.logo svg{width:1em;height:1em;margin-right:.3em;fill:var(--gold);filter:drop-shadow(0 0 .25em rgba(247,183,51,.45))}
/* the name as on statesig.tv: the first word white, DESK in the desk's own colour */
.logo b{color:var(--ink);font-weight:800}.logo span{color:#c0457a;filter:brightness(1.3) saturate(1.1)}
.logo em{font-style:normal;font-size:.55em;letter-spacing:.08em;margin-left:.6em;padding:.25em .45em;border-radius:.25em;background:var(--brand);color:#fff}
.logo em:empty{display:none}
#section{font:800 clamp(13px,2.3vh,31px)/1 var(--disp);font-style:normal;letter-spacing:.12em;color:#fff;background:linear-gradient(180deg,var(--brand-top),var(--brand));
  padding:.45em 1em;border-radius:.35em;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#section:empty{display:none}
.hud{display:flex;align-items:center;gap:1.2vw;min-width:0}
#clock{flex:none;font:800 clamp(20px,4vh,54px)/1 var(--disp);letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
#clock small{font-size:.5em;color:var(--ink-3);margin-left:.35em;letter-spacing:.1em}
#upnext{min-width:0;max-width:38vw;display:flex;align-items:baseline;gap:.7em;color:var(--ink);font:600 clamp(12px,1.9vh,25px) var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--glass);box-shadow:var(--glass-edge);border-radius:.5em;padding:.5em 1em}
#upnext[hidden]{display:none}
#upnext span{flex:none;color:var(--brand-hi);font:800 .85em var(--disp);letter-spacing:.14em;text-transform:uppercase}
#upnext.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateX(2vw)}to{opacity:1;transform:none}}
#ring{flex:none}
#ring svg{display:block;width:3.6vh;height:3.6vh;transform:rotate(-90deg)}
#ring circle{fill:none;stroke-width:3.5}
#ring .rt{stroke:var(--line)}
#ring .rf{stroke:var(--brand-hi);stroke-dasharray:97.4;stroke-linecap:round}
body.paused #ring .rf{stroke:var(--ink-3)}
@media (max-aspect-ratio:1/1){#upnext{display:none !important}}

/* The strip: where the night stands (each chamber's count), what just happened on the right; pop-ups play in it */
#alertbar{display:flex;align-items:stretch;margin:1.4vh 3vw 0;height:7vh;min-height:44px;border-radius:1vh;overflow:hidden;white-space:nowrap;
  background:var(--glass);border:1px solid var(--ab-b,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1.4vh 3vh -1vh rgba(0,0,0,.6);transition:border-color .6s}
#alertbar>*{display:flex;align-items:center;flex:none;padding:0 1.1vw}
#alertbar>*+*{border-left:1px solid rgba(255,143,191,.1)}
#alertbar[data-state=live]{--ab:var(--live);--ab-a:rgba(229,38,46,.18);--ab-b:rgba(229,38,46,.45)}
#alertbar[data-state=test]{--ab:var(--amber);--ab-a:rgba(242,169,59,.14);--ab-b:rgba(242,169,59,.35)}
.ab-title{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:.4vh;min-width:11vw;
  background:var(--ab-a,var(--glow-1));border-left:.45vw solid var(--ab,var(--brand))}
.ab-k{display:flex;align-items:center;gap:.5vw;color:var(--ink-3);font:700 var(--fs-label) var(--disp);letter-spacing:.18em}
#ab-state{color:var(--ab,var(--ink));font:800 clamp(17px,3.1vh,42px)/1 var(--disp);letter-spacing:.08em}
.livedot{width:.75em;height:.75em;border-radius:50%;background:var(--brand-hi);box-shadow:0 0 .7em var(--brand-hi);flex:none}
#alertbar[data-state=live] .livedot{background:var(--live);box-shadow:0 0 .7em var(--live);animation:pulse 1.4s infinite}
#alertbar[data-state=test] .livedot{background:var(--amber);box-shadow:0 0 .7em var(--amber)}
#ab-chips{gap:0;padding:0!important;min-width:0;overflow:hidden;flex:0 1 auto!important}
.ac{display:flex;flex-direction:column;justify-content:center;gap:.5vh;padding:0 1.2vw;height:100%}
.ac+.ac{border-left:1px solid rgba(255,143,191,.07)}
.ac b{font:800 clamp(17px,3.1vh,42px)/1 var(--disp);display:flex;gap:.6em;align-items:baseline;letter-spacing:.02em}
.ac>span{color:var(--ink-2);font:700 var(--fs-label) var(--disp);letter-spacing:.12em;text-transform:uppercase}
.ac.won>span{color:var(--gold)}
#ab-lead{flex:1 1 0!important;min-width:12vw;white-space:normal;line-height:1.3;color:var(--ink);font:400 clamp(12px,1.95vh,26px) var(--text)}
#ab-lead>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#ab-lead em{flex:none;margin-right:.9vw;font:800 var(--fs-label) var(--disp);letter-spacing:.18em;color:var(--brand-hi);font-style:normal}
#ab-toast{display:none!important;align-items:center!important;gap:.8vw;min-width:0;flex:1 1 0!important}
#alertbar.toasting #ab-chips,#alertbar.toasting #ab-lead{display:none!important}
#alertbar.toasting #ab-toast{display:flex!important;animation:toastin .45s cubic-bezier(.2,.8,.2,1) both}
#alertbar.toasting{border-color:var(--tk,var(--brand));box-shadow:0 0 1.5vh -.3vh var(--tk,var(--brand))}
#alertbar.t-d{--tk:var(--d)}#alertbar.t-r{--tk:var(--r)}#alertbar.t-o{--tk:var(--o)}#alertbar.t-gold{--tk:var(--gold)}
@keyframes toastin{from{opacity:0;transform:translateX(3vw)}to{opacity:1;transform:none}}
#ab-toast em{flex:none;font:800 clamp(10px,1.6vh,22px) var(--disp);letter-spacing:.1em;padding:.3em .6em;border-radius:.3em;background:var(--tk,var(--brand));color:#fff;font-style:normal;text-transform:uppercase}
#alertbar.t-gold #ab-toast em{color:#1b1203}
#ab-toast b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font:600 clamp(12px,2vh,27px) var(--text)}

/* The stage: one scene at a time under its caption bar, in the screen's own units */
#stagebox{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 3vw 1vh;min-height:0;position:relative}
.waiting{color:var(--ink-3);font-size:3vh;text-align:center}
.scene{animation:fade .45s ease .18s both;min-height:0;height:100%;display:flex;flex-direction:column}
.sbody{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;overflow:hidden}
.capbar{flex:none;display:flex;align-items:center;gap:1.4vw;margin:2.4vh 0 1.8vh;height:4.6vh;padding:0 1.4vw 0 0;border-radius:.6vh;overflow:hidden;
  background:var(--glass);box-shadow:var(--glass-edge);font:700 clamp(13px,2.3vh,31px)/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  animation:capin .5s cubic-bezier(.2,.8,.2,1) .15s both}
.capbar::before{content:"";align-self:stretch;width:.8vw;background:linear-gradient(180deg,var(--brand-top),var(--brand))}
.capbar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capbar b{flex:none;color:var(--gold);font-weight:800}
@keyframes capin{from{opacity:0;transform:translateX(-3vw)}to{opacity:1;transform:none}}
/* A number that changed on a redraw lights up gold and settles */
.chg{animation:chg 2.4s ease-out!important}
.scene.still .chg{animation:chg 2.4s ease-out!important}
@keyframes chg{0%,35%{color:var(--gold);text-shadow:0 0 2vh rgba(247,183,51,.8)}}
/* odometer digits clip a glow into boxes, so they only change colour */
.odo.chg{animation-name:chgc!important}
@keyframes chgc{0%,35%{color:var(--gold)}}
@keyframes fade{from{opacity:0;transform:translateY(1.5vh)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateX(4vw)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.55}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0ms)}
/* a redraw with fresh numbers doesn't replay the entrance */
.scene.still,.scene.still *:not(.chg){animation:none!important}
#dots{display:flex;justify-content:center;gap:.8vw;padding:1.5vh 0}
#dots i{width:1vh;height:1vh;border-radius:50%;background:var(--line)}
#dots i.on{background:var(--brand-hi)}
#progress{height:.5vh;background:var(--line)}
#progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-hi))}

.heads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.2vh}
.heads li{font:800 clamp(18px,3.8vh,50px)/1.12 var(--disp);letter-spacing:.005em}
.heads small{display:block;margin-top:.6vh;color:var(--ink-3);font:400 var(--fs-small) var(--text);letter-spacing:0}

/* The lower third: a top tier with the CIVIC DESK plate, the part of the crawl going past, when it last updated
   and the LIVE bug; the scrolling results under it, each race on a chip in its leader's colour (solid once called) */
footer{flex:none;display:flex;flex-direction:column;color:var(--ink);contain:paint;box-shadow:0 -1.5vh 4vh -1vh rgba(0,0,0,.7)}
.lt-top{display:flex;align-items:stretch;height:3.6vh;font:800 clamp(12px,2.2vh,30px)/1 var(--disp);letter-spacing:.12em;text-transform:uppercase}
.lt-plate{flex:none;display:flex;align-items:center;gap:.35em;padding:0 2vw;color:#fff;background:linear-gradient(180deg,var(--brand-top),var(--brand-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lt-plate b{color:#fff;font-weight:800}.lt-plate em{font-style:normal;color:var(--gold)}
#crawl-sec{flex:1;min-width:0;display:flex;align-items:center;padding:0 1.4vw;color:var(--ink);
  background:linear-gradient(90deg,rgba(77,23,48,.9),rgba(8,14,30,.94) 60%);border-top:1px solid rgba(255,143,191,.2)}
#crawl-sec.pop{animation:secin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes secin{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
#lt-upd{flex:none;display:flex;align-items:center;padding:0 1.4vw;color:var(--ink-3);background:rgba(8,14,30,.94);font-size:.8em;letter-spacing:.1em}
#lt-upd:empty{display:none}
#lt-live{flex:none;display:flex;align-items:center;gap:.5em;padding:0 1.4vw;background:#2a3550;color:#fff}
#lt-live:empty{display:none}
#lt-live[data-state=live]{background:linear-gradient(180deg,#ff3b42,#a80f16)}
#lt-live[data-state=live]::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
#lt-live[data-state=test]{background:linear-gradient(180deg,#ffbf5c,#b7700b);color:#1b1203}
.lt-bot{display:flex;align-items:center;height:5.6vh;font-size:clamp(14px,2.4vh,32px);overflow:hidden;
  background:linear-gradient(180deg,#f4f6fb,#d5dbe8);color:#0a1020;border-top:.3vh solid var(--flag-red)}
footer b#crawl-label{flex:none;padding:0 2vw;height:100%;display:flex;align-items:center;background:#0a1020;color:#fff;font:800 1.05em var(--disp);letter-spacing:.12em}
.track{flex:1;overflow:hidden;white-space:nowrap}
#crawl-track{display:inline-block;white-space:nowrap;animation:crawl linear infinite;animation-duration:120s;will-change:transform;backface-visibility:hidden}
@keyframes crawl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ti{display:inline-flex;align-items:center;gap:.6em;margin-right:2.6vw;font:700 1em var(--disp);letter-spacing:.02em}
.ti b.chip{font:800 .9em/1 var(--disp);letter-spacing:.06em;padding:.25em .5em;border-radius:.3em;background:#c3cad8;color:#0a1020}
.ti b.chip.d.lead{background:#d4e3ff;color:#123a86;box-shadow:inset 0 0 0 .18em var(--d)}
.ti b.chip.r.lead{background:#ffdcdc;color:#8a1414;box-shadow:inset 0 0 0 .18em var(--r)}
.ti b.chip.o.lead{background:#ece2ff;color:#4a2f7e;box-shadow:inset 0 0 0 .18em var(--o)}
.ti b.chip.d.won{background:#2463d8;color:#fff}.ti b.chip.r.won{background:#d23439;color:#fff}.ti b.chip.o.won{background:#7d55b8;color:#fff}
.ti em{font-style:normal;font-weight:800}
.ti .d{color:#1b4fb8}.ti .r{color:#b71f1f}.ti .o{color:#5e3c99}
.ti small{color:#4d5873;font:700 .7em var(--disp);letter-spacing:.06em;text-transform:uppercase}
.ti .called{font:800 .62em var(--disp);letter-spacing:.1em;background:#0a1020;color:#fff;padding:.25em .5em;border-radius:.3em}
.ti.sum b{font:800 .9em var(--disp);color:#0a1020;letter-spacing:.06em}
#crawl.alert .lt-bot{background:#1e0407;color:#fff;border-top-color:var(--gold)}
#crawl.alert b#crawl-label{background:#b00000;color:#fff;animation:pulse 1.2s infinite}
#crawl-hold{flex:1;min-width:0;display:flex;align-items:center;height:100%;overflow:hidden}
#crawl-hold[hidden],#crawl.holding .track{display:none}
#crawl-hold .ch-h{flex:1;min-width:0;padding:0 1em;font:800 1.1em var(--disp);letter-spacing:.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:chin .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes chin{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* Takeovers: a major House vote the moment it closes. The flash bar
   holds still (a light sweeps across it twice) so the words stay readable. */
#takeover{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;cursor:pointer;animation:fade .4s ease;
  background:radial-gradient(ellipse at 50% 30%,#132552 0,var(--bg) 70%);--tkc:var(--brand)}
#takeover[hidden]{display:none}
#takeover.tone-d{--tkc:var(--d);background:radial-gradient(ellipse at 50% 30%,#0b2a5e 0,#020814 70%)}
#takeover.tone-r{--tkc:var(--r);background:radial-gradient(ellipse at 50% 30%,#4a0d14 0,#120203 70%)}
#takeover.tone-o{--tkc:var(--o);background:radial-gradient(ellipse at 50% 30%,#2f2150 0,#0b0714 70%)}
#takeover.tone-gold{--tkc:var(--gold);background:radial-gradient(ellipse at 50% 30%,#3a2a06 0,#120c02 70%)}
#takeover.tone-navy{--tkc:var(--brand)}
#takeover.tone-alert{--tkc:#d4141f;background:radial-gradient(ellipse at 50% 30%,#3d0a10 0,#0c0204 70%)}
.tk-flash{position:relative;background:var(--tkc);padding:2.5vh 4vw;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1vh 3vh rgba(0,0,0,.5)}
.tk-flash::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:sheen 1.4s ease .4s 2}
@keyframes sheen{to{transform:translateX(100%)}}
.tk-flash span{display:block;font:800 clamp(44px,12vh,170px)/1 var(--disp);letter-spacing:.1em;color:#fff;text-transform:uppercase;white-space:nowrap}
#takeover.tone-gold .tk-flash span{color:#1b1203}
#takeover.control .tk-flash{background:linear-gradient(90deg,var(--tkc),var(--tkc) 70%,var(--gold))}
/* key race alert: red with slow gold-edged hazard stripes */
#takeover.tone-alert .tk-flash{background:repeating-linear-gradient(-45deg,#d4141f 0 4vh,#a00c15 4vh 8vh);background-size:11.3vh 11.3vh;animation:hazard 3s linear infinite;border-bottom:.6vh solid var(--gold)}
@keyframes hazard{to{background-position:11.3vh 0}}
.tk-flash .preview{display:inline;font-size:.32em;letter-spacing:.1em;vertical-align:.6em;margin-left:1em}
.tk-body{flex:1;display:flex;flex-direction:column;justify-content:safe center;overflow:hidden;padding:0 5vw;min-height:0}
.tk-kicker{color:var(--ink-2);font:800 clamp(16px,3.2vh,42px) var(--disp);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2vh}
#takeover h1{margin:0;color:#fff;font:800 clamp(40px,11vh,160px)/1.02 var(--disp);letter-spacing:.005em}
#takeover h1 small{font-size:.45em;color:var(--ink-2)}
.tk-cands{margin-top:4.5vh;max-width:78vw}
.tk-cands .cand{font-size:clamp(18px,4vh,54px);margin-bottom:2.2vh}
.tk-cands .cand .cbar{height:1.6vh}
.tk-on{margin:1.5vh 0 0;color:var(--ink-2);font:400 clamp(14px,2.7vh,36px) var(--text)}
.tk-chamber{margin-top:3vh;max-width:70vw}
.tk-chamber .ch{min-height:46vh}
.tk-h2h{margin-top:3.5vh}
.tk-h2h .side{padding:2.4vh 2vw}.tk-h2h .side .pct{font-size:min(14vh,7vw)}
.tk-states{display:flex;flex-wrap:wrap;gap:1.6vh;margin-top:3vh}
.tk-states span{font:800 clamp(26px,8.5vh,116px)/1 var(--disp);background:rgba(255,255,255,.08);box-shadow:var(--glass-edge);border-radius:1vh;padding:.2em .4em;animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0ms)}
.tk-list{list-style:none;margin:4vh 0 0;padding:0;columns:2;column-gap:5vw;font:400 clamp(14px,2.7vh,36px) var(--text)}
.tk-list li{break-inside:avoid;padding:.6vh 0}.tk-list b{font:800 1.1em var(--disp);letter-spacing:.02em;margin-right:.5em}
.tk-progress{height:.8vh;background:rgba(255,255,255,.08)}
.tk-progress i{display:block;height:100%;width:0;background:#fff}

/* Odometer numbers: one column of digits per place, rolled into position */
.odo{display:inline-flex;vertical-align:baseline}
.odo .dg{display:inline-block;height:1em;line-height:1;overflow:hidden;font-variant-numeric:tabular-nums}
.odo .col{display:flex;flex-direction:column}
.odo .col i{display:block;height:1em;font-style:normal;text-align:center}
.odo.go .col{transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
.odo.go .dg:nth-child(2) .col{transition-delay:.12s}.odo.go .dg:nth-child(3) .col{transition-delay:.24s}

/* The scene change: a thin red, white and blue stripe sweeps across the stage */
#wipe{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
#wipe .band{position:absolute;top:-10%;bottom:-10%;left:0;width:9vw;display:flex;transform:translateX(-20vw) skewX(-22deg);opacity:0}
#wipe .band i{flex:none;height:100%}
#wipe .band i:nth-child(1){width:2.6vw;background:var(--flag-red)}
#wipe .band i:nth-child(2){width:1.4vw;background:var(--flag-white)}
#wipe .band i:nth-child(3){width:5vw;background:linear-gradient(90deg,var(--flag-blue),rgba(47,98,230,0))}
#wipe.go .band{animation:wipe .6s cubic-bezier(.5,0,.3,1) both}
@keyframes wipe{0%{transform:translateX(-20vw) skewX(-22deg);opacity:1}100%{transform:translateX(calc(100vw + 60vh)) skewX(-22deg);opacity:0}}

/* Messages, screen off, full screen */
#notice{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);z-index:31;max-width:80vw;padding:2.2vh 3.5vw;border-radius:1.6vh;
  background:#0f1526f2;border:.35vh solid var(--gold);box-shadow:0 2vh 6vh #000c;color:var(--ink);font:600 clamp(18px,4.2vh,56px)/1.25 var(--text);text-align:center;animation:fade .4s ease}
#notice[hidden],#screenoff[hidden]{display:none}
#screenoff{position:fixed;inset:0;z-index:30;background:#000}
body.tk-on #screenoff{display:none}
#fullscreen{position:fixed;left:1.2vw;bottom:8vh;background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:8px;font-size:22px;padding:4px 10px;cursor:pointer;opacity:0;transition:opacity .3s;z-index:5}
/* the corner button sits bottom left, clear of the station bug; the public TVs have Full screen in their channel bar instead */
body[data-public="1"] #fullscreen{display:none}
body.pointer #fullscreen{opacity:1}


/* the StateSig mark, just above the strip and crawl */
/* the station bug: lined up with the clock's right edge, centred on the scene dots */
body .lab-mark.lab-tv{right:3vw;bottom:10.2vh}

/* ===== Courtdesk ===== */
:root{--maj:#2fbf9f;--maj-hi:#86e6cf;--dis:#f08a3c;--dis-hi:#ffbb85;--nv:#3a4566}
#alertbar.t-maj{--tk:var(--maj)}#alertbar.t-dis{--tk:var(--dis)}

/* the bench of nine: each justice's side in one decision */
.bench{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.8vw}
.jv{display:flex;flex-direction:column;align-items:center;gap:1vh;min-width:0;animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0ms)}
.jv i{display:block;width:100%;aspect-ratio:1;max-width:7vh;border-radius:50%;background:var(--nv)}
.jv.majority i{background:radial-gradient(circle at 35% 30%,#7fe8cf,var(--maj) 70%)}
.jv.dissent i{background:transparent;box-shadow:inset 0 0 0 .55vh var(--dis)}
.jv.part i{background:linear-gradient(90deg,var(--maj) 50%,transparent 50%);box-shadow:inset 0 0 0 .4vh var(--dis)}
.jv span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font:700 var(--fs-label) var(--disp);letter-spacing:.06em;text-transform:uppercase}
.jv.dissent span,.jv.part span{color:var(--dis-hi)}
.bench.big .jv i{max-width:9vh}.bench.big .jv span{font-size:var(--fs-small)}

/* the split badge: 6–3, 9–0, no noted dissents */
.sp{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:3.4em;padding:.3em .55em;border-radius:.35em;
  font:800 var(--fs-title)/1 var(--disp);letter-spacing:.04em;font-variant-numeric:tabular-nums;background:#2a3550;color:var(--ink);white-space:nowrap}
.sp.una{background:linear-gradient(180deg,#45d6b4,#1f9479);color:#03150f}
.sp.nnd{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase}
.sp.none{color:var(--ink-3)}

/* the latest decision */
.lo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3.5vw;align-items:center}
.lo-k{margin:0;color:var(--gold);font:800 var(--fs-small) var(--disp);letter-spacing:.12em;text-transform:uppercase}
.lo-l h2{margin:1vh 0 1.2vh;font:800 clamp(30px,8vh,110px)/1 var(--disp);letter-spacing:.005em;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lo-by{margin:0 0 2vh;color:var(--ink);font:700 var(--fs-title)/1.1 var(--disp);letter-spacing:.03em}
.lo-s{margin:0;color:var(--ink-2);font:400 var(--fs-body)/1.4 var(--text);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.lo-q{margin:2vh 0 0;padding-top:1.6vh;border-top:1px solid var(--line);color:var(--ink-2);font:400 var(--fs-small)/1.4 var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lo-q small{margin-right:.8em;color:var(--gold);font:800 var(--fs-label) var(--disp);letter-spacing:.14em;text-transform:uppercase}
.lo-r{background:var(--glass);box-shadow:var(--glass-edge);border-radius:1.4vh;padding:3.4vh 2vw}
.lo-split{display:flex;align-items:center;gap:1.4vw;margin-bottom:3.4vh}
.lo-split .sp{font-size:clamp(30px,9vh,120px);padding:.12em .3em}
.lo-split .sp.nnd{font-size:var(--fs-title);padding:.4em .7em}
.lo-split span{color:var(--ink-2);font:600 var(--fs-body)/1.3 var(--text)}
.lo-r .bench{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2vh 1vw}
.lo-r .jv{flex-direction:row;gap:.8vw;justify-content:flex-start}
.lo-r .jv i{flex:none;width:5.4vh;max-width:none}
.lo-r .jv span{font-size:var(--fs-small)}
.lo-src{margin:2.6vh 0 0;color:var(--ink-3);font:700 var(--fs-label) var(--disp);letter-spacing:.12em;text-transform:uppercase}

/* opinion lists: date, case, split */
.ops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.3vh}
.ops li{display:grid;grid-template-columns:8vw minmax(0,1fr) auto;gap:1.8vw;align-items:center;background:var(--glass);box-shadow:var(--glass-edge);border-radius:1vh;padding:1.3vh 1.6vw}
.or-d{color:var(--gold);font:800 var(--fs-title)/1 var(--disp);letter-spacing:.04em;white-space:nowrap}
.or-d small{display:block;margin-top:.4vh;color:var(--ink-3);font-size:.55em;letter-spacing:.12em;text-transform:uppercase}
.or-n{min-width:0;font:800 var(--fs-title)/1.08 var(--disp);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.or-n small{display:block;margin-top:.5vh;color:var(--ink-3);font:400 var(--fs-small) var(--text);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops.gr .or-n small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wait{font:800 clamp(24px,5.4vh,74px)/1 var(--disp);text-align:right;font-variant-numeric:tabular-nums}
.wait small{display:block;color:var(--ink-3);font:700 var(--fs-label) var(--disp);letter-spacing:.14em;text-transform:uppercase}
.ops.cir li{grid-template-columns:7vw minmax(0,1fr)}
.cc{font:800 clamp(22px,5vh,68px)/1 var(--disp);color:var(--brand-hi);text-align:center}
.cc small{display:block;color:var(--ink-3);font:700 var(--fs-label) var(--disp);letter-spacing:.12em;text-transform:uppercase}

/* the justices */
.jt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7vh}
.jt li{display:grid;grid-template-columns:22vw minmax(0,1fr) 6vw 7vw 8vw;gap:1.6vw;align-items:center;border-bottom:1px solid var(--line);padding-bottom:.6vh}
.jt-n{font:800 var(--fs-title)/1.1 var(--disp);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-n small{margin-left:.7em;color:var(--ink-3);font:400 var(--fs-label) var(--text);letter-spacing:0}
.jt-bar{height:2.4vh;border-radius:.5vh;background:#0f1730;overflow:hidden}
.jt-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f9479,var(--maj));transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) .3s both}
.jt-p{font:800 var(--fs-title)/1 var(--disp);text-align:right;font-variant-numeric:tabular-nums}
.jt-x{color:var(--ink-3);font:400 var(--fs-small) var(--text);white-space:nowrap}
.jt-x b{color:var(--ink);font:800 1.3em var(--disp);margin-right:.25em}

/* the agreement grid */
.agree{border-collapse:separate;border-spacing:.35vh;margin:0 auto;font-variant-numeric:tabular-nums}
.agree th{color:var(--ink-2);font:800 var(--fs-label) var(--disp);letter-spacing:.08em;text-transform:uppercase;padding:0 .6vw;white-space:nowrap}
.agree thead th{height:4vh;vertical-align:bottom}
.agree tbody th{text-align:right}
.agree td{width:7.4vh;height:5vh;border-radius:.6vh;text-align:center;font:800 var(--fs-body)/1 var(--disp);
  background:rgba(47,191,159,calc(.08 + var(--a,0) * .8));color:var(--ink)}
.agree td.self{background:#0f1730}

/* how it divided */
.spl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:4vw;align-items:center}
.spl-big b{display:block;font:800 clamp(60px,22vh,300px)/1 var(--disp);color:var(--maj-hi);font-variant-numeric:tabular-nums}
.spl-big span{display:block;font:800 var(--fs-title) var(--disp);letter-spacing:.12em;text-transform:uppercase}
.spl-big small{display:block;margin-top:1vh;color:var(--ink-3);font:400 var(--fs-body) var(--text)}
.spl-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2vh}
.spl-bars li{display:grid;grid-template-columns:7vw minmax(0,1fr) 5vw;gap:1.6vw;align-items:center;font:800 var(--fs-title)/1 var(--disp)}
.spl-bars b{text-align:right;font-variant-numeric:tabular-nums}
.spl-bar{height:4vh;border-radius:.6vh;background:#0f1730;overflow:hidden}
.spl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-hi));transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) .4s both}
.spl-bars li:first-child .spl-bar i{background:linear-gradient(90deg,#1f9479,var(--maj))}

/* the argument calendar */
.cal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vh 1.6vw;align-content:start}
.cal-day{background:var(--glass);box-shadow:var(--glass-edge);border-radius:1.2vh;padding:2vh 1.4vw;min-width:0;border-top:.5vh solid var(--line-2)}
.cal-day.today{border-top-color:var(--live);background:linear-gradient(180deg,rgba(229,38,46,.14),transparent 50%),var(--glass)}
.cal-day h3{margin:0 0 1.4vh;font:800 var(--fs-title)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.cal-day.today h3{color:#fff}
.cal-day h3 small{margin-left:.6em;color:var(--ink-3);font-size:.7em}
.cal-day ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.4vh}
.cal-day li b{display:block;font:800 var(--fs-body)/1.1 var(--disp);letter-spacing:.01em}
.cal-day li small{display:block;margin-top:.3vh;color:var(--ink-3);font:400 var(--fs-small) var(--text)}

/* the crawl */
.ti b.chip.em{background:#5a3a12;color:#ffd9a8}.ti b.chip.gr{background:#1f9479;color:#fff}.ti b.chip.cir{background:var(--brand-deep);color:#fff}
.ti em{color:#0b6e58}

/* the takeover: an opinion */
#takeover.court h1{font-size:clamp(36px,10vh,140px);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-op{margin-top:3.6vh;max-width:88vw}
.tk-split{display:flex;align-items:baseline;gap:2vw}
.tk-split b{font:800 clamp(40px,13vh,180px)/1 var(--disp);color:#fff;font-variant-numeric:tabular-nums}
.tk-split span{color:var(--ink-2);font:600 clamp(16px,3.2vh,44px)/1.3 var(--text)}
.bench.tk{margin-top:3.4vh}.bench.tk .jv{animation-delay:calc(1000ms + var(--dl,0ms))}.bench.tk .jv i{max-width:8vh}.bench.tk .jv span{font-size:var(--fs-small)}
.tk-sum{margin:3.4vh 0 0;color:var(--ink-2);font:400 clamp(14px,2.7vh,36px)/1.4 var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk-list{columns:1}
.tk-list small{display:block;margin-top:.4vh;color:var(--ink-2);font:400 .8em/1.3 var(--text)}

@media (max-aspect-ratio:4/3){
  .lo,.spl{grid-template-columns:minmax(0,1fr);gap:2.4vh}
  .lo-s{-webkit-line-clamp:3}.lo-q{display:none}
  .lo-l h2{font-size:clamp(26px,6.5vh,90px)}
  .lo-r{padding:2.2vh 1.6vw}.lo-split{margin-bottom:2vh}.lo-split .sp{font-size:clamp(26px,7vh,96px)}
  .lo-r .bench{grid-template-columns:repeat(9,minmax(0,1fr));gap:.6vw}
  .lo-r .jv{flex-direction:column;align-items:center;gap:.8vh}.lo-r .jv i{width:4.6vh}.lo-r .jv span{font-size:var(--fs-label)}
  .cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jt li{grid-template-columns:26vw minmax(0,1fr) 8vw 10vw}.jt-x:last-child{display:none}.jt-n small{display:none}
  .agree td{width:6vh;height:4.4vh}.agree th{font-size:clamp(9px,1.3vh,18px)}
  .ops li{grid-template-columns:11vw minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){.jv,.jt-bar i,.spl-bar i{animation:none!important}}

/* on the bench at 10: the countdown (or IN SESSION) beside the day's cases */
.onbench{display:grid;grid-template-columns:1fr 1.15fr;gap:3vw;align-items:center;height:100%}
.bench-big b{display:block;font:800 clamp(60px,20vh,280px)/1 var(--disp);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bench-big b.bench-live{font-size:clamp(44px,13vh,180px);color:var(--live)}
.bench-big span{display:block;margin-top:1vh;font:800 var(--fs-title) var(--disp);letter-spacing:.1em;text-transform:uppercase}
.bench-big small{display:block;margin-top:2vh;color:var(--ink-3);font:400 var(--fs-body) var(--text)}
.bench-cases{list-style:none;margin:0;padding:0;display:grid;gap:2vh}
.bench-cases li{background:var(--glass);box-shadow:var(--glass-edge);border-radius:1.2vh;padding:2.2vh 1.6vw;border-left:.6vh solid var(--gold)}
.bench-cases em{display:block;font:700 var(--fs-label) var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-style:normal}
.bench-cases b{display:block;margin:.6vh 0;font:800 var(--fs-title) var(--disp)}
.bench-cases small{color:var(--ink-3);font:400 var(--fs-small) var(--text)}

/* the term in review */
.recap{display:grid;grid-template-columns:1fr 1.35fr;gap:3vw;align-items:center;height:100%}
.recap-big b{display:block;font:800 clamp(60px,22vh,300px)/1 var(--disp);color:var(--brand-hi);font-variant-numeric:tabular-nums}
.recap-big span{display:block;font:800 var(--fs-title) var(--disp);letter-spacing:.12em;text-transform:uppercase}
.recap-big p{margin:2.4vh 0 0;color:var(--ink-2);font:400 var(--fs-body)/1.4 var(--text)}
.recap-big em{font-style:normal;font-weight:700;color:var(--ink)}
.recap-rows{list-style:none;margin:0;padding:0;display:grid;gap:1.4vh}
.recap-rows li{display:grid;grid-template-columns:1.1fr 1.3fr auto;align-items:baseline;gap:1.4vw;background:var(--glass);box-shadow:var(--glass-edge);border-radius:1.2vh;padding:1.8vh 1.6vw}
.recap-rows span{font:700 var(--fs-label) var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.recap-rows b{font:800 var(--fs-title) var(--disp)}
.recap-rows em{font:800 var(--fs-title) var(--disp);font-style:normal;color:var(--gold);font-variant-numeric:tabular-nums}


/* phones held upright: stack the countdown and the term recap */
@media (max-aspect-ratio:1/1){.onbench,.recap{grid-template-columns:minmax(0,1fr);gap:3vh;align-content:center}}
/* the opinion takeover on a phone held upright: size by width, the split above its byline, the bench in two rows */
@media (max-aspect-ratio:3/4){
  .tk-flash{padding:2vh 5vw}.tk-flash span{font-size:clamp(36px,15vw,170px)}
  .tk-kicker{font-size:clamp(12px,3.4vw,42px);margin-bottom:1.2vh}
  #takeover.court h1{font-size:clamp(26px,8.5vw,140px);-webkit-line-clamp:3}
  .tk-op{margin-top:2.4vh;max-width:none}
  .tk-split{flex-direction:column;align-items:flex-start;gap:.8vh}
  .tk-split b{font-size:clamp(40px,15vw,180px)}.tk-split span{font-size:clamp(14px,4vw,44px)}
  .bench.tk{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6vh 2vw;margin-top:2.4vh}
  .bench.tk .jv i{max-width:11vw}.bench.tk .jv span{font-size:clamp(9px,2.6vw,16px)}
  .tk-sum{margin-top:2.4vh;font-size:clamp(14px,3.9vw,36px);-webkit-line-clamp:4}
}