/* ════════════════════════════════════════════════════════════════
   LIVESTACK STUDIO — shared design system
   Brand broadcast style (tokens shared with prototype-v3 / studio-suite)
   ════════════════════════════════════════════════════════════════ */
:root{
  --blk:#0A0A0A;
  --blk-2:#121212;
  --blk-3:#161614;
  --wht:#F5F5F2;
  --gry:#8A8A85;
  --gry-2:#3A3A38;
  --gry-3:#222220;
  --tally:#FF2B2B;
  --tally-dim:#7E0E0E;
  --pvw:#FFB300;
  --safe:#19E68C;
  --logo-red:#E02020;
  --display:'Anton',sans-serif;
  --body:'Space Grotesk',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --bar-h:54px;
  /* playback channel colors */
  --ch-red:#FF2B2B; --ch-green:#19E68C; --ch-x:#4A9EFF;
  --ch-y:#C084FC;   --ch-gold:#FFB300;  --ch-silver:#C0C0C0;
}
/* ── Self-hosted web fonts ──────────────────────────────────────────
   Anton, Space Grotesk, and IBM Plex Mono, all SIL Open Font License
   (see fonts/OFL.txt). Latin + Latin Extended subsets only — this
   suite is English-only. No third-party font requests.

   Space Grotesk ships upstream as a single variable-weight font, so
   Google serves byte-identical files for every static weight in
   300–600; the two files below are reused across all four @font-face
   weight blocks rather than duplicated on disk. Anton and IBM Plex
   Mono are static per-weight, so each weight has its own file. */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/anton-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/anton-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/space-grotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-grotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/space-grotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/space-grotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* 700 comes free — the shared variable file's wght axis spans to 700, so a few
   font-weight:700 elements render as true bold instead of falling back to 600. */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/space-grotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--blk);color:var(--wht);
  font-family:var(--body);font-weight:300;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--tally);color:#000}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:var(--mono);color:var(--wht);background:#000;border:1px solid var(--gry-2);padding:9px 12px;font-size:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pvw)}
.mono{font-family:var(--mono)}
.hidden{display:none!important}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--gry-2)}
::-webkit-scrollbar-thumb:hover{background:var(--gry)}

/* SMPTE bars */
.smpte{display:flex;height:6px;width:100%}
.smpte i{flex:1}
.smpte i:nth-child(1){background:#C0C0C0}.smpte i:nth-child(2){background:#C0C000}
.smpte i:nth-child(3){background:#00C0C0}.smpte i:nth-child(4){background:#00C000}
.smpte i:nth-child(5){background:#C000C0}.smpte i:nth-child(6){background:#C00000}
.smpte i:nth-child(7){background:#0000C0}

/* ════════ MASTER CONTROL BAR ════════ */
#mcr{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:200;
  background:#000;border-bottom:1px solid var(--gry-2);
  display:flex;align-items:stretch;font-family:var(--mono);
}
#mcr .cell{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--gry-2);font-size:11px;letter-spacing:.14em;white-space:nowrap}
#mcr .brand-cell svg{height:24px;width:auto}
#mcr .brand-cell b{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.08em}
#mcr .brand-cell b span{color:var(--logo-red)}
#mcr .station-name{color:var(--pvw);font-weight:600}
#mcr .grow{flex:1;border-right:none}
#mcr .tc{font-size:15px;font-weight:600;color:var(--safe);justify-content:center;min-width:130px}
@keyframes onairblink{0%,60%{background:var(--tally);color:#000}61%,100%{background:var(--tally-dim);color:#FF8585}}
.air-chip{padding:4px 12px;font-weight:600;font-size:11px;letter-spacing:.16em}
.air-chip.live{background:var(--tally);color:#000;animation:onairblink 2.4s steps(2,start) infinite}
.air-chip.standby{background:var(--gry-3);color:var(--gry)}

/* connection LED */
.led{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--gry)}
.led i{width:9px;height:9px;border-radius:50%;background:var(--gry-2);flex:none}
.led.ok{color:var(--safe)}.led.ok i{background:var(--safe);box-shadow:0 0 8px var(--safe)}
.led.warn{color:var(--pvw)}.led.warn i{background:var(--pvw);box-shadow:0 0 8px var(--pvw)}
.led.err{color:var(--tally)}.led.err i{background:var(--tally);box-shadow:0 0 8px var(--tally);animation:ledblink 1s steps(1) infinite}
@keyframes ledblink{50%{opacity:.25}}

/* ════════ LAYOUT / PANELS ════════ */
main{padding-top:var(--bar-h)}
.panel{
  border:1px solid var(--gry-2);background:var(--blk-2);
  display:flex;flex-direction:column;min-height:0;
}
.panel .ph{
  display:flex;align-items:center;gap:10px;padding:9px 14px;flex:none;
  border-bottom:1px solid var(--gry-2);background:#000;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gry);
}
.panel .ph b{color:var(--wht);font-weight:600}
.panel .ph .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.panel .pb{flex:1;min-height:0;overflow:auto;padding:14px}
.panel.inactive{opacity:.45;pointer-events:none;filter:saturate(.3)}
.panel.inactive .ph{color:var(--gry-2)}

/* ════════ BUTTONS ════════ */
.swbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  padding:11px 20px;cursor:pointer;border:1px solid var(--gry-2);
  background:var(--blk-3);color:var(--wht);transition:all .12s steps(2,end);
  text-transform:uppercase;
}
.swbtn:hover{background:var(--tally);border-color:var(--tally);color:#000}
.swbtn.amber:hover{background:var(--pvw);border-color:var(--pvw)}
.swbtn.green:hover{background:var(--safe);border-color:var(--safe)}
.swbtn.solid{background:var(--tally);border-color:var(--tally);color:#000}
.swbtn.solid:hover{background:var(--wht);border-color:var(--wht)}
.swbtn:disabled{opacity:.35;pointer-events:none}
.swbtn.sm{padding:6px 12px;font-size:10px}
.iconbtn{
  font-family:var(--mono);font-size:12px;border:1px solid var(--gry-2);
  background:#000;color:var(--gry);width:28px;height:24px;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;transition:all .12s;
}
.iconbtn:hover{color:var(--pvw);border-color:var(--pvw)}
.iconbtn:disabled{opacity:.3;pointer-events:none}

/* toggle group (refresh rates) */
.tgl-group{display:inline-flex;border:1px solid var(--gry-2)}
.tgl-group button{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;font-weight:600;
  padding:6px 12px;color:var(--gry);background:#000;cursor:pointer;
  border-right:1px solid var(--gry-2);transition:all .12s;
}
.tgl-group button:last-child{border-right:none}
.tgl-group button:hover{color:var(--wht)}
.tgl-group button.on{background:var(--pvw);color:#000}

/* feedback ✓ / ✕ */
.fb{display:inline-flex;gap:6px}
.fb button{
  width:34px;height:30px;border:1px solid var(--gry-2);background:#000;
  font-size:14px;font-weight:700;color:var(--gry);cursor:pointer;transition:all .1s;
  font-family:var(--mono);
}
.fb button.yes:hover,.fb button.yes.hit{background:var(--safe);border-color:var(--safe);color:#000}
.fb button.no:hover,.fb button.no.hit{background:var(--tally);border-color:var(--tally);color:#000}

/* ════════ RED PULSE (push notification) ════════ */
#pulse{
  position:fixed;inset:0;z-index:500;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(255,43,43,.55) 100%);
}
#pulse.go{animation:redpulse 1.1s ease-out 1}
@keyframes redpulse{
  0%{opacity:0}12%{opacity:1}100%{opacity:0}
}

/* ════════ RELEVANCE RING ════════ */
.ring{position:relative;width:74px;height:74px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bgc{fill:none;stroke:var(--gry-3);stroke-width:6}
.ring .arc{fill:none;stroke:var(--pvw);stroke-width:6;stroke-linecap:butt;transition:stroke-dashoffset .5s}
.ring .pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:16px;font-weight:600;color:var(--wht);
}

/* ════════ MODALS ════════ */
.modal-veil{
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:4vh 4vw;
}
.modal{
  background:var(--blk-2);border:1px solid var(--gry-2);max-width:860px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal .mh{
  display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--gry-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--pvw);background:#000;
}
.modal .mh .x{margin-left:auto;font-size:16px;color:var(--gry);cursor:pointer;background:none;border:none}
.modal .mh .x:hover{color:var(--tally)}
.modal .mb{padding:20px;overflow:auto}
.modal .mf{padding:14px 18px;border-top:1px solid var(--gry-2);display:flex;gap:10px;justify-content:flex-end;background:#000}

/* ════════ TABLES ════════ */
table.lst{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
table.lst th{
  text-align:left;padding:7px 10px;color:var(--gry);font-weight:500;letter-spacing:.16em;
  border-bottom:1px solid var(--gry-2);font-size:9px;position:sticky;top:0;background:var(--blk-2);
}
table.lst td{padding:7px 10px;border-bottom:1px dashed var(--gry-3);vertical-align:middle}
table.lst tr.flag td{background:#1A0606}
table.lst tr.done td{color:var(--gry-2);text-decoration:line-through}

/* form rows */
.frow{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.frow label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--gry)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* small chips */
.chip{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;padding:3px 8px;font-weight:600}
.chip.amber{background:var(--pvw);color:#000}
.chip.red{background:var(--tally);color:#000}
.chip.grey{background:var(--gry-3);color:var(--gry)}
.chip.green{background:var(--safe);color:#000}
.chip.outline{background:none;border:1px solid var(--gry-2);color:var(--gry)}

/* script notation rendering */
.cue-talent{background:#2A2208;color:var(--pvw);padding:0 5px;font-weight:500}
.cue-prod{color:var(--gry-2)}
.cue-prod.known{color:var(--gry)}
.cue-cam{background:#240808;color:var(--tally);padding:0 5px;font-weight:600}

/* proximity colors */
.prox-green{color:var(--safe)!important;border-color:var(--safe)!important}
.prox-yellow{color:var(--pvw)!important;border-color:var(--pvw)!important}
.prox-red{color:var(--tally)!important;border-color:var(--tally)!important}

/* utility */
.dim{color:var(--gry)}
.dimmer{color:var(--gry-2)}
.amber{color:var(--pvw)}
.red{color:var(--tally)}
.green{color:var(--safe)}
.strike{text-decoration:line-through;color:var(--gry-2)!important}

/* ════════ HEADLINE PROVENANCE BADGE ════════ */
.hl-row .origin{
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.14em;
  padding:3px 7px;flex:none;align-self:flex-start;margin-top:2px;cursor:help;
}
.hl-row .origin.auto{background:var(--pvw);color:#000}
.hl-row .origin.written{background:none;border:1px solid var(--gry-2);color:var(--gry)}

/* ════════ GUIDED WALKTHROUGH CALLOUTS ════════
   Anchored beside the panel they explain, never over it — position is
   computed live from the target panel's bounding box (see positionCallout()
   in ad-hub.html) so the card can't end up on top of it at any viewport
   size, and is recomputed on resize. This is a hard requirement: a callout
   covering the panel it explains — especially the ad-lib recovery — would
   defeat the entire point of the walkthrough. */
.callout-glow{outline:2px solid var(--pvw);outline-offset:-2px}
.callout{
  position:fixed;z-index:250;width:340px;max-width:calc(100vw - 32px);
  background:var(--blk-2);border:1px solid var(--pvw);
  box-shadow:0 20px 50px rgba(0,0,0,.65);display:flex;flex-direction:column;
}
.callout-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--gry-2);background:#000;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--pvw);font-weight:600;
}
.callout-x{font-size:14px;line-height:1;color:var(--gry);cursor:pointer;background:none;border:none}
.callout-x:hover{color:var(--tally)}
.callout-x:disabled{opacity:.35;pointer-events:none;cursor:default}
.callout-bd{padding:14px 16px 4px}
.callout-bd h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:16px;line-height:1.18;letter-spacing:.01em}
.callout-bd p{font-size:12.5px;line-height:1.65;color:var(--gry);margin-top:10px}
.callout-bd p b{color:var(--wht);font-weight:600}
.callout-ft{padding:12px 16px;border-top:1px solid var(--gry-2);display:flex;justify-content:flex-end;margin-top:10px}
.callout[data-side="right"]::after,.callout[data-side="left"]::after,
.callout[data-side="top"]::after,.callout[data-side="bottom"]::after{
  content:"";position:absolute;width:0;height:0;border:8px solid transparent;
}
.callout[data-side="right"]::after{left:-16px;top:22px;border-right-color:var(--pvw)}
.callout[data-side="left"]::after{right:-16px;top:22px;border-left-color:var(--pvw)}
.callout[data-side="bottom"]::after{top:-16px;left:22px;border-bottom-color:var(--pvw)}
.callout[data-side="top"]::after{bottom:-16px;left:22px;border-top-color:var(--pvw)}

/* ════════ END-OF-SHOW RECAP ════════ */
.recap-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0}
.recap-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.65;color:var(--gry)}
.recap-list li::before{content:"▸";position:absolute;left:0;color:var(--pvw);font-weight:700}
.recap-list li b{color:var(--wht);font-weight:600}