/* The desks' loading screen (StateSig.tv, formerly CivicCore), corner mark and stand-by screen (the same file in every desk; see lab-splash.js).
   The splash follows the desk's own --bg, --accent and text variables, so a TV theme carries over; the CivicCore cube
   and CORE are green everywhere. Every desk serves Barlow Condensed at /fonts/display.ttf. */
@font-face{font-family:"CivicCore Display";src:url("/fonts/display.ttf") format("truetype");font-weight:700 900;font-display:swap}
:root{--lab-green:#2ee66b}
.lab-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--desk-color,var(--accent,#4f8dff)) 14%,transparent),transparent 55%),var(--bg,#0a0e1a);
  color:var(--text,var(--ink,#eef2f8));transition:opacity .35s ease,transform .35s ease}
.lab-splash.out{opacity:0;transform:scale(1.03);pointer-events:none}
.ls-logo{position:relative;width:104px;height:104px;display:grid;place-items:center}
.ls-logo img{width:58%;height:58%;border-radius:18%;animation:ls-pop .55s cubic-bezier(.2,1.4,.4,1) .12s both}
.ls-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);animation:ls-spin 1.6s linear .9s infinite}
.ls-ring circle{fill:none;stroke:var(--desk-color,var(--accent,#4f8dff));stroke-width:4;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;
  animation:ls-draw .9s cubic-bezier(.6,0,.2,1) both;filter:drop-shadow(0 0 6px var(--desk-color,var(--accent,#4f8dff)))}
.ls-name{font:600 26px/1 system-ui,sans-serif;letter-spacing:.04em;animation:ls-name .6s ease-out .3s both}
.ls-name b{font-weight:800}
.ls-name span{font-weight:800;color:var(--desk-color,var(--accent,#4f8dff));filter:brightness(1.3) saturate(1.1)}
.ls-lab{display:flex;align-items:center;gap:8px;font:700 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.24em;opacity:.75;animation:ls-fade .5s ease-out .6s both}
.ls-lab .lab-cube{width:18px;height:18px}
.lab-splash.lab-tv{gap:3vh}
.lab-tv .ls-logo{width:22vh;height:22vh}
.lab-tv .ls-name{font-size:6vh}
.lab-tv .ls-lab{font-size:2vh;gap:1.2vh}.lab-tv .ls-lab .lab-cube{width:3.4vh;height:3.4vh}
@keyframes ls-draw{to{stroke-dashoffset:0}}
@keyframes ls-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@keyframes ls-pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes ls-name{from{opacity:0;letter-spacing:.4em;transform:translateY(6px)}to{opacity:1;letter-spacing:.04em;transform:none}}
@keyframes ls-fade{from{opacity:0}to{opacity:.75}}

/* the cube */
.lab-cube{flex:none;overflow:visible}
.lab-cube .f1{fill:#1d2130}.lab-cube .f2{fill:#141826}.lab-cube .f3{fill:#10131f}
.lab-cube .ln{fill:none;stroke:var(--lab-green);stroke-linecap:round;stroke-linejoin:round}
.lab-cube .dots{fill:var(--lab-green)}
.lab-cube .edge{stroke-dasharray:300;stroke-dashoffset:0}

/* the station bug in the bottom corner: a thin divider, the cube, the name */
.lab-mark{position:fixed;right:12px;bottom:10px;z-index:30;display:flex;align-items:center;gap:7px;pointer-events:none;
  font:800 13px/1 "CivicCore Display","Arial Narrow",system-ui,sans-serif;letter-spacing:.08em;color:var(--text,var(--ink,#eef2f8));opacity:.7}
.lab-mark::before{content:"";width:1px;height:1.5em;margin-right:3px;background:currentColor;opacity:.4}
.lab-mark .lab-cube{width:16px;height:16px;transition:filter .6s}
/* the wordmark: CIVIC in the text colour, CORE in green; the sweep is a light band over each half */
.lab-word{font-family:"CivicCore Display","Arial Narrow",system-ui,sans-serif;font-weight:800;letter-spacing:.08em;white-space:nowrap;
  background:linear-gradient(100deg,currentColor 42%,#fff 50%,currentColor 58%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lab-word b{font-weight:inherit;background:linear-gradient(100deg,var(--lab-green) 42%,#fff 50%,var(--lab-green) 58%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ls-lab .lab-word{font-size:1.35em;letter-spacing:.1em}
.lab-mark.lab-tv{right:1.2vw;bottom:var(--lab-mark-bottom,1.2vh);gap:.9vh;font-size:2vh;opacity:.85}
.lab-mark.lab-tv .lab-cube{width:2.8vh;height:2.8vh}

/* every two minutes: the edges redraw, the cursor blinks, a light sweeps over the name */
.lab-mark.play .lab-cube{filter:drop-shadow(0 0 4px var(--lab-green))}
.lab-mark.play .edge{animation:lab-edge 1.1s ease-out}
.lab-mark.play .cur{animation:lab-blink .45s steps(1) .6s 4}
.lab-mark.play .lab-word,.lab-mark.play .lab-word b{animation:lab-sweep 1.3s ease-in-out .9s}
@keyframes lab-edge{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes lab-blink{50%{opacity:0}}
@keyframes lab-sweep{from{background-position:100% 0}to{background-position:0 0}}

/* StateSig.tv, the brand on every desk, in red, white and blue: the mark is a signal meter drawn as a flag (a blue
   outline, a navy field, red and white bars for stripes, a white star in the corner); SIG in red, ".tv" in blue.
   Idle, the bars move like a live level meter (slow and small, paused under a takeover). Every two minutes the bars
   drop and spring back up one after another, a ring pings out of the tile, the outline redraws, the light sweeps
   over the name and ".tv" slides in. */
:root[data-brand=statesig]{--lab-green:#3a6df0;--ss-red:#e63946;--ss-red-hi:#ff7a84;--ss-blue-hi:#8fb0ff}
.lab-cube.ss .f1{fill:#15214a}
.lab-cube.ss .b1,.lab-cube.ss .b3{fill:#e63946}.lab-cube.ss .b2,.lab-cube.ss .b4{fill:#fff}
.lab-cube.ss .ss-star{fill:#fff;transform-box:fill-box;transform-origin:50% 55%}
:root[data-brand=statesig] .lab-word b{background-image:linear-gradient(100deg,var(--ss-red) 42%,#fff 50%,var(--ss-red) 58%)}
.ss-bar,.lab-cube.ss .ping{transform-box:fill-box}
.ss-bar{transform-origin:50% 100%}
.lab-cube.ss .ping{transform-origin:50% 50%;opacity:0}
.lab-mark .ss-bar,.sb-logo .ss-bar{animation:ss-level 2.2s ease-in-out infinite}
.lab-mark .b1,.sb-logo .b1{animation-duration:1.9s;animation-delay:-.4s}
.lab-mark .b2,.sb-logo .b2{animation-duration:2.5s;animation-delay:-1.1s}
.lab-mark .b3,.sb-logo .b3{animation-duration:1.7s;animation-delay:-.7s}
.lab-mark .b4,.sb-logo .b4{animation-duration:2.8s;animation-delay:-1.6s}
body.tk-on .lab-mark .ss-bar{animation-play-state:paused}
.lab-word i{font-style:normal;font-size:.74em;letter-spacing:.03em;margin-left:.1em;display:inline-block;
  background:none;-webkit-text-fill-color:var(--ss-blue-hi,var(--lab-green));color:var(--ss-blue-hi,var(--lab-green));opacity:.85}
.lab-mark.play .ss-bar{animation:ss-rise .75s cubic-bezier(.2,1.7,.4,1) both}
.lab-mark.play .b2{animation-delay:.1s}.lab-mark.play .b3{animation-delay:.2s}.lab-mark.play .b4{animation-delay:.3s}
.lab-mark.play .ping{animation:ss-ping 1.1s ease-out .55s}
.lab-mark.play .ss-star{animation:ss-star .9s cubic-bezier(.2,1.6,.4,1) .15s both}
.lab-mark.play .lab-word i{animation:ss-tv .55s cubic-bezier(.2,1.4,.4,1) 1.5s both}
:root[data-brand=statesig] .lab-mark.play .lab-cube{filter:drop-shadow(0 0 5px var(--lab-green)) drop-shadow(-4px 0 12px rgba(230,57,70,.45)) drop-shadow(4px 0 12px rgba(58,109,240,.55))}
:root[data-brand=statesig] .sb-logo .lab-cube{filter:drop-shadow(0 0 2.4vh rgba(58,109,240,.5))}
@keyframes ss-level{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.62)}60%{transform:scaleY(.9)}80%{transform:scaleY(.74)}}
@keyframes ss-rise{0%{transform:scaleY(.05)}100%{transform:scaleY(1)}}
@keyframes ss-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes ss-star{0%{opacity:0;transform:scale(.1) rotate(-216deg)}100%{opacity:1;transform:none}}
@keyframes ss-tv{0%{opacity:0;transform:translateX(-.5em)}100%{opacity:.85;transform:none}}
@media (prefers-reduced-motion:reduce){.sb-logo .ss-bar{animation:none!important}}

@media (max-width:700px){.lab-mark:not(.lab-tv){position:static;justify-content:center;margin:18px auto 22px}}
@media (prefers-reduced-motion:reduce){
  .lab-splash *,.lab-mark *{animation:none!important}
  .ls-ring circle{stroke-dashoffset:0}
}
@media print{.lab-mark,.lab-splash,.lab-standby{display:none}}

/* the stand-by screen: over everything, in its own colours whatever the desk's theme */
.lab-standby{position:fixed;inset:0;z-index:10002;overflow:hidden;cursor:none;color:#eef2f8;background:#050912;
  font-family:"CivicCore Display","Arial Narrow",system-ui,sans-serif;animation:sb-in .5s ease-out both}
.lab-standby.out{animation:sb-out .5s ease-in both}
html.lab-standing body{overflow:hidden}
.sb-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 60vh 52vh at 50% 40%,color-mix(in srgb,var(--lab-green) 16%,transparent),transparent 70%),
    radial-gradient(circle,rgba(120,150,210,.16) 1px,transparent 1.5px) 0 0/4vh 4vh,
    linear-gradient(180deg,#071022,#04070f)}
.sb-card::before{content:"";position:absolute;inset:-50% -10%;background:linear-gradient(105deg,transparent 45%,color-mix(in srgb,var(--lab-green) 7%,transparent) 50%,transparent 55%);
  animation:sb-sweep 9s ease-in-out infinite;pointer-events:none}
.sb-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px)}
.sb-top{position:absolute;left:4vw;right:4vw;top:4.5vh;display:flex;justify-content:space-between;align-items:center;font-size:2.6vh;letter-spacing:.2em;font-weight:800}
.sb-tag{display:flex;align-items:center;gap:1.1vh;padding:.9vh 1.6vh;border:1px solid rgba(255,255,255,.25);border-radius:.6vh;background:rgba(5,9,18,.6)}
.sb-tag i{width:1.4vh;height:1.4vh;border-radius:50%;background:#ff3b3b;box-shadow:0 0 1.2vh #ff3b3b;animation:sb-pulse 1.6s ease-in-out infinite}
.sb-desk{color:#9aa6bf}
.sb-logo{position:relative;width:34vh;height:34vh;display:grid;place-items:center;margin-top:-6vh}
.sb-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sb-rings circle{fill:none;transform-origin:100px 100px}
.sb-rings .r1{stroke:rgba(154,166,191,.35);stroke-width:.6;stroke-dasharray:1 5}
.sb-rings .r2{stroke:var(--lab-green);stroke-width:1.6;stroke-dasharray:46 22 8 22;opacity:.7;animation:sb-spin 40s linear infinite}
.sb-rings .r3{stroke:rgba(154,166,191,.4);stroke-width:.8;stroke-dasharray:120 40;animation:sb-spin 26s linear infinite reverse}
.sb-logo .lab-cube{width:58%;height:58%;filter:drop-shadow(0 0 2.4vh color-mix(in srgb,var(--lab-green) 45%,transparent));animation:sb-float 6s ease-in-out infinite}
.sb-logo .edge{animation:lab-edge 1.6s ease-out .2s both}
.sb-logo .cur{animation:lab-blink 1.06s steps(1) infinite}
.sb-word{margin-top:2.4vh;font-size:10vh;line-height:1}
.sb-word .lab-word{letter-spacing:.1em;margin-right:-.1em;animation:sb-word 9s ease-in-out 1s infinite}
.sb-word .lab-word b{animation:sb-word 9s ease-in-out 1s infinite}
.sb-msg{margin-top:4.5vh;display:flex;flex-direction:column;align-items:center;gap:2vh;position:relative}
.sb-msg h1{margin:0;padding:1.4vh 5vh;font-size:6.4vh;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  border-top:2px solid var(--lab-green);border-bottom:2px solid var(--lab-green);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lab-green) 8%,transparent),transparent);max-width:84vw;text-align:center}
.sb-count{margin:0;font-size:4.2vh;font-weight:800;letter-spacing:.14em;color:#f7b733;font-variant-numeric:tabular-nums}
.sb-count[hidden]{display:none}
.sb-foot{position:absolute;left:0;right:0;bottom:0;height:9vh;display:flex;align-items:center;gap:4vh;padding:0 4vw;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(11,18,34,.92),#050912);border-top:2px solid color-mix(in srgb,var(--lab-green) 50%,transparent);font-size:2.6vh;font-weight:800;letter-spacing:.16em}
.sb-net{display:flex;align-items:center;gap:1.2vh;font-size:3vh}
.sb-net .lab-cube{width:4.2vh;height:4.2vh}
.sb-desks{flex:1;display:flex;gap:3.4vh;justify-content:safe center;color:#6f7a93;white-space:nowrap;overflow:hidden}
.sb-desks .on{color:#eef2f8}
.sb-desks .on::before{content:"";display:inline-block;width:1vh;height:1vh;border-radius:50%;background:var(--lab-green);margin-right:1vh;vertical-align:.25vh}
@media (max-aspect-ratio:3/2){.sb-foot{gap:2.4vh;padding:0 3vw}.sb-desks{gap:2vh;font-size:.8em}}
.sb-clock{font-size:3.4vh;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* colour bars, with a label (and 1 kHz tone when asked) for lining up a stream */
.sb-bars{position:absolute;inset:0;display:none;background:#000}
.lab-standby.bars .sb-bars{display:block}.lab-standby.bars .sb-card{display:none}
.sb-bars>div{position:absolute;left:0;right:0;display:flex}.sb-bars i{flex:1}
.b-top{top:0;height:67%}.b-mid{top:67%;height:8%}.b-low{top:75%;bottom:0}
.b-top i:nth-child(1){background:#c0c0c0}.b-top i:nth-child(2){background:#c0c000}.b-top i:nth-child(3){background:#00c0c0}.b-top i:nth-child(4){background:#00c000}
.b-top i:nth-child(5){background:#c000c0}.b-top i:nth-child(6){background:#c00000}.b-top i:nth-child(7){background:#0000c0}
.b-mid i{background:#131313}.b-mid i:nth-child(1){background:#0000c0}.b-mid i:nth-child(3){background:#c000c0}.b-mid i:nth-child(5){background:#00c0c0}.b-mid i:nth-child(7){background:#c0c0c0}
.b-low i{flex:5;background:#131313}.b-low i:nth-child(1){background:#00214c}.b-low i:nth-child(2){background:#fff}.b-low i:nth-child(3){background:#32006a}
.b-low i:nth-child(5){flex:1.7;background:#090909}.b-low i:nth-child(6){flex:1.7}.b-low i:nth-child(7){flex:1.6;background:#1d1d1d}
.sb-bars .b-label{top:auto;left:auto;right:3vw;bottom:4vh;align-items:center;gap:1.6vh;padding:1.6vh 2.6vh;background:rgba(0,0,0,.8);color:#fff;font-size:3.4vh}
.b-label .lab-cube{width:5vh;height:5vh}
.b-desk,.b-tone{font-size:.7em;letter-spacing:.18em;color:#c9d1e3;padding-left:1.6vh;border-left:1px solid rgba(255,255,255,.3)}
.b-tone{color:#f7b733}.b-tone[hidden]{display:none}
@keyframes sb-in{from{opacity:0}}
@keyframes sb-out{to{opacity:0}}
@keyframes sb-spin{to{transform:rotate(360deg)}}
@keyframes sb-float{50%{transform:translateY(-1.2vh)}}
@keyframes sb-pulse{50%{opacity:.25}}
@keyframes sb-sweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
@keyframes sb-word{0%,70%{background-position:100% 0}90%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.lab-standby *,.lab-standby *::before,.lab-standby .sb-card::before{animation:none!important}}

/* the public TV's controls (statesig.tv): a small bar over the lower third, shown for a few seconds on a tap */
.ss-ctl{position:fixed;left:50%;bottom:13vh;z-index:9000;display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;
  background:rgba(8,10,16,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.55);font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:#eef2f8;
  opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .25s,transform .25s}
.ss-ctl.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.ss-ctl a,.ss-ctl button{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:0;border-radius:8px;background:none;
  color:inherit;font:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}
.ss-ctl a:hover,.ss-ctl button:hover,.ss-ctl a:focus-visible,.ss-ctl button:focus-visible{background:rgba(255,255,255,.09);outline:none}
.ss-ctl button{border-left:1px solid rgba(255,255,255,.1);border-radius:0 8px 8px 0}
.ss-ctl .lab-cube{width:20px;height:20px}
.ss-fs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-turn{display:none}
.ss-tip{flex-basis:100%;text-align:center;padding:8px 12px 6px;font-size:13px;line-height:1.45;white-space:normal;color:#eef2f8}
.ss-tip[hidden]{display:none}.ss-tip b{font-weight:700}
.ss-tip svg{width:15px;height:15px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-ctl.tip{flex-wrap:wrap;justify-content:center;width:max-content;max-width:92vw}
.ss-ctl.tip .ss-turn,.ss-ctl.upright.tip .ss-turn{display:none}
.ss-ctl.upright{flex-wrap:wrap;justify-content:center;width:max-content;max-width:92vw}
.ss-ctl.upright .ss-turn{display:block;flex-basis:100%;text-align:center;padding:8px 10px 6px;font-size:13px;color:var(--ss-blue-hi,var(--lab-green))}
.ss-chans{display:flex;gap:2px;padding:0 4px;border-left:1px solid rgba(255,255,255,.1)}
.ss-chans button{height:36px;padding:0 12px;border-radius:7px;font-size:14px;color:rgba(238,242,248,.75);border:0}
.ss-chans button[aria-current]{background:color-mix(in srgb,var(--lab-green) 28%,transparent);color:#fff}
/* another channel's big moment: a banner over the lower third that switches channel on a tap */
.ss-alert{position:fixed;left:2vw;bottom:13vh;z-index:8999;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:.4vh 1.4vw;
  align-items:center;max-width:min(62vw,1100px);padding:1.4vh 1.6vw;border-radius:1vh;text-decoration:none;color:#eef2f8;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ss-red,var(--lab-green)) 24%,transparent),rgba(8,10,16,.94) 40%);border:1px solid color-mix(in srgb,var(--ss-red,var(--lab-green)) 50%,transparent);border-left:.6vh solid var(--ss-red,var(--lab-green));
  box-shadow:0 2vh 5vh rgba(0,0,0,.55);font:600 clamp(13px,2vh,30px)/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;
  opacity:0;transform:translateX(-3vw);transition:opacity .35s,transform .35s cubic-bezier(.2,1.2,.4,1)}
.ss-alert.on{opacity:1;transform:none}
.ss-alert b{grid-column:1/-1;font:800 .72em/1 "CivicCore Display","Arial Narrow",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ss-red-hi,var(--lab-green))}
.ss-al-k{font-weight:700;color:rgba(238,242,248,.7);white-space:nowrap}
.ss-al-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-alert em{font-style:normal;font-weight:700;color:var(--ss-red-hi,var(--lab-green));white-space:nowrap}
@media print{.ss-ctl,.ss-alert{display:none}}

/* statesig.tv: a QR code for phones beside the station bug (public TVs on big screens; never in a takeover or stand-by) */
/* with the QR code: code, divider and StateSig.tv mark all share one centre line */
.lab-mark.has-qr{align-items:center}
.ss-qr{display:flex;align-items:flex-end;gap:.8vh;margin-right:1.2vh;order:-1}
.ss-qr img{width:9vh;height:9vh;border-radius:.8vh;box-shadow:0 .6vh 2vh rgba(0,0,0,.5)}
.ss-qr span{font:700 1.35vh/1.25 "CivicCore Display","Arial Narrow",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:right;opacity:.8}
body.tk-on .ss-qr,html.lab-standing .ss-qr{display:none}
@media (max-width:900px),(max-height:500px){.ss-qr{display:none}}