/* Verkiezingsnacht — broadcast UI. Design tokens are shared with liveblog.css (same names, --veed- prefix there). */
:root {
  /* surfaces */
  --bg: #0b0c0f;
  --surface: rgba(20, 22, 28, .72);          /* glass panel */
  --surface-solid: #15171c;
  --surface-2: rgba(255, 255, 255, .045);    /* inset / hover */
  --surface-3: rgba(255, 255, 255, .08);
  --panel: var(--surface);                   /* legacy alias */
  --line: rgba(255, 255, 255, .08);          /* hairline */
  --line-strong: rgba(255, 255, 255, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 48px -12px rgba(0, 0, 0, .65), 0 4px 14px rgba(0, 0, 0, .35);
  /* ink */
  --ink: #f3f4f6; --ink-2: #c9ccd3; --dim: #8a8f9a; --faint: #5b606b;
  /* party (saturated, tuned) */
  --d: #3b82f6; --d-ink: #7fb0ff; --d-deep: #1c3566;
  --r: #ef4458; --r-ink: #ff8794; --r-deep: #5e1c27;
  --i: #a66cff;
  /* semantic + the one UI accent */
  --amber: #f6b93b; --ok: #34d399; --red: #ff3b4e;
  --accent: #c6f25e; --accent-ink: #0b0c0f;
  /* shape + motion */
  --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-pill: 999px;
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font);
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { opacity: 0; pointer-events: none; }
button { font-family: inherit; }

/* glass primitive (panels only — never full-screen layers) */
#card, #timeline, #statepanel, .bubble, #breaking, #analysis, #infoline, #livepill, #sound, #balance-wrap {
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}

/* ---------- top bar */
#top { position: fixed; top: 0; left: 0; right: 0; height: 92px; display: flex; align-items: center;
  justify-content: space-between; gap: 28px; padding: 0 32px; z-index: 5;
  background: linear-gradient(180deg, rgba(11, 12, 15, .96) 0%, rgba(11, 12, 15, .9) 72%, rgba(11, 12, 15, 0) 100%); }
.brand { display: flex; align-items: center; gap: 14px; min-width: 300px; flex-wrap: wrap; row-gap: 4px; }
.live em { font-style: normal; }
.live { background: var(--red); color: #fff; font-weight: 700; letter-spacing: .06em; font-size: 12px;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 7px;
  box-shadow: 0 0 0 4px rgba(255, 59, 78, .14), 0 0 22px rgba(255, 59, 78, .35); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
body.browse .live { background: var(--amber); color: #111; box-shadow: 0 0 0 4px rgba(246, 185, 59, .14); }
body.browse .live i { background: #111; }
/* static export: the broadcast is over (app.js ENDED) — a quiet grey badge, no pulse */
body.ended:not(.browse) .live { background: #3a3f4b; color: #e6e8ec; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
body.ended:not(.browse) .live i { background: #9aa1ad; animation: none; }
body.ended #livepill .dot { background: #9aa1ad; animation: none; }
body.ended #livepill b { color: var(--ink-2, #cfd3da); }
@keyframes pulse { 50% { opacity: .25; transform: scale(.8); } }
.title { font-size: 23px; font-weight: 500; letter-spacing: -.005em; text-transform: lowercase; }
.title::first-letter { text-transform: uppercase; }
.title b { font-weight: 800; text-transform: none; margin-left: 2px; }
.sub { font-size: 12px; color: var(--dim); letter-spacing: 0; text-transform: none; flex-basis: 100%; margin-top: -2px; }
.sub::first-letter { text-transform: uppercase; }

#balance { width: 600px; }
.bal-label { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--dim); }
.bal-label b { font-size: 30px; color: var(--ink); font-weight: 800; letter-spacing: -.03em; vertical-align: -4px; line-height: 1; }
.bal-label .d b { color: var(--d-ink); } .bal-label .r b { color: var(--r-ink); }
.bal-label .mid { align-self: end; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--dim); padding-bottom: 2px; }
.bal-label .mid .dd { color: var(--d-ink); font-weight: 700; } .bal-label .mid .rr { color: var(--r-ink); font-weight: 700; }
.bal-label small { font-size: 12px; font-weight: 500; color: var(--faint); margin: 0 7px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bal-bar { position: relative; height: 10px; display: flex; border-radius: var(--r-pill); margin-top: 7px;
  background: rgba(255, 255, 255, .06); overflow: visible; }
.seg { transition: width 1.2s var(--ease-out); height: 100%; }
.seg.d.base { background: var(--d-deep); } .seg.d.won { background: var(--d); box-shadow: 0 0 14px rgba(59, 130, 246, .55); }
.seg.r.base { background: var(--r-deep); } .seg.r.won { background: var(--r); box-shadow: 0 0 14px rgba(239, 68, 88, .55); }
#bar-d-base { border-radius: var(--r-pill) 0 0 var(--r-pill); } #bar-r-base { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.mark { position: absolute; width: 2px; border-radius: 1px; background: var(--ink); }
.mark-d { left: 51%; top: -5px; height: 10px; }
.mark-r { left: 50%; bottom: -5px; height: 10px; margin-left: -2px; }
#bar-open { flex: 1; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 3px, rgba(255, 255, 255, .1) 3px 6px); border-radius: 2px; }
.fifty { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); }
.bal-foot { font-size: 12px; color: var(--dim); margin-top: 7px; display: flex; justify-content: space-between; gap: 10px; }
.bal-foot b { color: var(--ink); font-weight: 700; } .bal-foot .hr { color: var(--r-ink); font-weight: 600; } .bal-foot .hd { color: var(--d-ink); font-weight: 600; }
.key { font-size: 11px; letter-spacing: 0; white-space: nowrap; color: var(--faint); }
.sw { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin: 0 5px 1px 0; vertical-align: middle;
  background: linear-gradient(90deg, var(--d-deep) 50%, var(--r-deep) 50%); }
.sw.won { background: linear-gradient(90deg, var(--d) 50%, var(--r) 50%); margin-left: 8px; }

.lblink { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600;
  background: var(--surface-3); padding: 7px 12px; border-radius: var(--r-pill); }
.lblink:hover { background: var(--accent); color: var(--accent-ink); }
body.record .lblink { display: none; }
.right { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.mode { display: flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line); }
.mode button { background: transparent; border: 0; color: var(--dim); padding: 7px 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: 0; cursor: pointer; text-transform: none;
  transition: background .3s var(--ease-out), color .3s; }
.mode button:hover { color: var(--ink); }
.mode button.on { background: var(--ink); color: var(--bg); }
#clock { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- race card */
#card { position: fixed; left: 32px; top: 124px; width: 410px; z-index: 4; background: var(--surface);
  border: 0; border-left: 3px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 20px 22px 18px; transition: opacity .45s var(--ease-out), transform .7s var(--spring); transform: none; }
#card.hidden { transform: translateX(-24px) scale(.98); }
#card .st { font-size: 13px; color: var(--dim); font-weight: 500; letter-spacing: 0; }
#card h2 { margin: 2px 0 12px; font-size: 36px; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 5px 10px;
  border-radius: var(--r-pill); margin-bottom: 14px; }
.badge.called { background: var(--ink); color: var(--bg); }
.badge.leading, .badge.too_close { background: rgba(246, 185, 59, .16); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(246, 185, 59, .35); }
.badge.open, .badge.counting { background: var(--surface-3); color: var(--ink-2); }
.cand { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 0 10px;
  border-top: 1px solid var(--line); }
.cand .ph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: 15px; color: #fff; letter-spacing: -.01em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.cand .nm { font-size: 19px; font-weight: 700; letter-spacing: -.005em; }
.cand .pt { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .06em; margin-top: 1px; }
.cand .pct { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cand .bar { grid-column: 2 / 4; height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); margin-top: 6px; overflow: hidden; }
.cand .bar i { display: block; height: 100%; border-radius: var(--r-pill); transition: width 1.4s var(--ease-out); }
.cand.win .nm::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -2px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%230b0c0f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.cand.lose { opacity: .5; }
#card .margin { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 12px; letter-spacing: -.005em; }
.rep { font-size: 13px; color: var(--dim); margin-top: 10px; }
.srcs { margin-top: 8px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.srcs a { color: var(--dim); }

/* ---------- lower thirds: breaking + analysis (glass card, pill tag) */
#breaking, #analysis { position: fixed; left: 32px; right: 404px; bottom: calc(96px + var(--nlh)); z-index: 6;
  background: rgba(16, 17, 22, .86); border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  overflow: hidden; transform-origin: 50% 100%;
  transition: opacity .35s var(--ease-out), transform .75s var(--spring); }
#breaking.hidden, #analysis.hidden { transform: translateY(28px) scale(.97); }
#breaking { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 22px; padding: 22px 28px 20px; }
#breaking::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red);
  box-shadow: 0 0 24px 2px rgba(255, 59, 78, .6); }
#breaking::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 59, 78, .16), transparent 55%); }
#breaking .tag { position: relative; z-index: 1; background: var(--red); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .08em;
  padding: 7px 13px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; white-space: nowrap;
  writing-mode: initial; box-shadow: 0 6px 20px rgba(255, 59, 78, .35); }
#breaking .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
#breaking .body { position: relative; z-index: 1; min-width: 0; background: none; color: var(--ink); padding: 0; }
#br-head { font-size: 44px; font-weight: 750; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
#br-dek { font-size: 20px; margin-top: 8px; color: var(--ink-2); line-height: 1.35; font-weight: 450; }
#br-src { font-size: 12px; margin-top: 10px; color: var(--faint); letter-spacing: 0; text-transform: none; }
#breaking.flash { animation: brin .9s var(--ease-out); }
@keyframes brin { 0% { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 59, 78, .9), 0 0 60px rgba(255, 59, 78, .5); }
  100% { box-shadow: var(--shadow), 0 0 0 1px var(--line); } }
#breaking.correction::before { background: var(--amber); box-shadow: 0 0 24px 2px rgba(246, 185, 59, .5); }
#breaking.correction::after { background: radial-gradient(120% 140% at 0% 0%, rgba(246, 185, 59, .14), transparent 55%); }
#breaking.correction .tag { background: var(--amber); color: #111; box-shadow: 0 6px 20px rgba(246, 185, 59, .3); }
#breaking.correction .tag::before { background: #111; }
#breaking.correction .body { background: none; }

#analysis { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; max-height: 320px; }
#analysis:has(#an-widget.gone) { grid-template-columns: 1fr; }
#analysis .tag { grid-column: 1; grid-row: 1; justify-self: start; margin: 20px 0 0 26px; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 12px; letter-spacing: .08em; padding: 6px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; }
#analysis .body { grid-column: 1; grid-row: 2; background: none; border: 0; padding: 10px 26px 20px; min-width: 0; }
#an-title { font-size: 30px; font-weight: 750; line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
#an-text { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
#an-text b { color: var(--ink); font-weight: 700; }
#an-src { font-size: 12px; margin-top: 10px; color: var(--faint); letter-spacing: 0; text-transform: none; }
#an-widget { grid-column: 2; grid-row: 1 / 3; width: auto; background: rgba(255, 255, 255, .035); border: 0; border-left: 1px solid var(--line);
  padding: 20px 20px 16px; min-width: 0; }
#an-widget.gone { display: none; }
.w-title { font-size: 11px; letter-spacing: .08em; color: var(--dim); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; }
.w-row { display: grid; grid-template-columns: 1fr auto; font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.w-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.w-bar { grid-column: 1 / 3; height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); margin-top: 5px; overflow: hidden; }
.w-bar i { display: block; height: 100%; border-radius: var(--r-pill); }
.w-foot { font-size: 11px; color: var(--faint); letter-spacing: 0; margin-top: 6px; }
.w-bal { display: flex; align-items: center; gap: 10px; } .w-bal b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.w-bal .bal-bar { flex: 1; margin: 0; overflow: hidden; }

#infoline { position: fixed; left: 32px; right: 404px; bottom: calc(54px + var(--nlh)); z-index: 6; height: 34px; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); background: rgba(16, 17, 22, .8);
  border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); padding-right: 16px;
  white-space: nowrap; overflow: hidden; transition: opacity .5s var(--ease-out); }
#infoline .lbl { background: var(--surface-3); color: var(--ink); font-weight: 700; letter-spacing: .06em; font-size: 11px; text-transform: uppercase;
  align-self: center; display: flex; align-items: center; padding: 5px 11px; margin: 0 12px 0 5px; border-radius: var(--r-pill); }
#infoline i { font-style: normal; color: var(--faint); margin: 0 10px; }
#infoline b { color: var(--ink); font-weight: 700; }
.st-called { color: var(--ink); font-weight: 700; } .st-leading, .st-too_close { color: var(--amber); font-weight: 700; }
.st-counting, .st-open { color: var(--dim); font-weight: 600; }
.st-flip { color: var(--amber); font-weight: 800; letter-spacing: .06em; font-size: .85em; }
.tl.call.flip { background: rgba(246, 185, 59, .06); } .tl.call.flip::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(246, 185, 59, .2); }
.badge.retracted { background: rgba(246, 185, 59, .16); color: var(--amber); margin-left: 6px; }

#livepill { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 10px;
  background: rgba(16, 17, 22, .88); box-shadow: var(--shadow), 0 0 0 1px rgba(255, 59, 78, .45); border-radius: var(--r-pill);
  padding: 5px 5px 5px 14px; font-size: 14px; max-width: 900px; transition: opacity .3s var(--ease-out); }
#livepill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.4s ease-in-out infinite; flex: none; }
#livepill b { color: var(--red); letter-spacing: .06em; font-size: 12px; }
#lp-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; color: var(--ink-2); }
#livepill button { background: var(--red); color: #fff; border: none; font-weight: 700; letter-spacing: 0; padding: 7px 14px;
  border-radius: var(--r-pill); cursor: pointer; font-size: 13px; flex: none; }
#livepill.blink { animation: lpblink .5s 4; }
@keyframes lpblink { 50% { box-shadow: var(--shadow), 0 0 0 3px rgba(255, 59, 78, .7); } }
body.browse #replaybadge { top: 146px; }
.sp-tabs { display: flex; gap: 2px; margin: 16px 0 8px; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); width: max-content; }
.sp-tabs button { background: transparent; border: 0; color: var(--dim); padding: 6px 13px; font-size: 12px; font-weight: 600;
  letter-spacing: 0; cursor: pointer; text-transform: none; border-radius: var(--r-pill); }
.sp-tabs button.on { background: var(--ink); color: var(--bg); }
@keyframes flash { 0% { filter: brightness(1.6); } 100% { filter: none; } }

/* ---------- host (anchor subtitle) */
#host { position: fixed; left: 32px; bottom: calc(96px + var(--nlh)); right: 404px; z-index: 7; display: flex; align-items: flex-end; gap: 14px;
  transition: opacity .5s var(--ease-out), bottom .55s var(--spring); }
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #2a2e36, #121418 70%);
  box-shadow: inset 0 0 0 1.5px rgba(198, 242, 94, .55), 0 0 0 5px rgba(198, 242, 94, .08), 0 10px 28px rgba(0, 0, 0, .5); }
.avatar span { width: 18px; height: 4px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px rgba(198, 242, 94, .7); transition: height .15s; }
body.speaking .avatar span { animation: talk .25s infinite alternate; }
body.speaking .avatar { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px rgba(198, 242, 94, .14), 0 0 30px rgba(198, 242, 94, .3); }
@keyframes talk { to { height: 14px; } }
.bubble { background: rgba(16, 17, 22, .82); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px; padding: 12px 18px 13px; max-width: 920px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.who { font-size: 11px; letter-spacing: .07em; color: var(--accent); font-weight: 700; text-transform: uppercase; }
#host-text { font-size: 20px; line-height: 1.38; margin-top: 3px; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }

/* ---------- timeline */
#timeline { position: fixed; right: 20px; top: 100px; bottom: calc(60px + var(--nlh)); width: 364px; z-index: 4;
  background: rgba(16, 17, 22, .74); border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  padding: 16px 8px 0 18px; display: flex; flex-direction: column; overflow: hidden; }
#timeline h3 { margin: 0 10px 10px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; }
#timeline h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
#tl-count { margin-left: auto; color: var(--faint); font-weight: 600; letter-spacing: 0; }
#tl-list { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; padding: 0 10px 16px 0;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); }
.tl { position: relative; padding: 9px 10px 11px 20px; margin: 0; cursor: pointer; font-size: 14px; line-height: 1.38; color: var(--ink-2);
  border-radius: var(--r-sm); animation: tlin .7s var(--spring); transition: background .2s; }
.tl::before { content: ""; position: absolute; left: 5px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.tl::after { content: ""; position: absolute; left: 8px; top: 27px; bottom: -9px; width: 1px; background: var(--line); }
@keyframes tlin { from { opacity: 0; transform: translateY(-8px); } }
.tl:hover { background: var(--surface-2); }
.tl .t { font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: 0; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.tl b { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.tl.breaking::before { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 59, 78, .2); }
.tl.breaking b { font-size: 15px; }
.tl.call::before { background: var(--ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.tl.host { color: var(--dim); font-style: italic; } .tl.host::before { background: var(--accent); width: 5px; height: 5px; left: 6px; top: 16px; }
.tl.ticker { color: var(--dim); font-size: 13px; }
.tl.post { background: rgba(255, 255, 255, .035); } .tl.post b { font-size: 15px; display: block; margin-top: 4px; }
.tl.post::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(198, 242, 94, .16); }
.tl .ex { color: var(--dim); font-size: 13px; margin-top: 3px; line-height: 1.42; }
.tl.factcheck::before { background: var(--ok); } .tl.fc-held::before { background: var(--amber); } .tl.fc-retracted::before { background: var(--red); }
.tl.correction { background: rgba(246, 185, 59, .06); } .tl.correction::before { background: var(--amber); }
.tl.host.voiced::after { content: " ♪"; position: static; background: none; width: auto; color: var(--accent); font-style: normal; }
.chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--r-pill);
  margin-right: 6px; color: #fff; vertical-align: 1px; font-style: normal; }

/* ---------- state panel */
#statepanel { position: fixed; left: 32px; top: 124px; bottom: calc(64px + var(--nlh)); width: 450px; z-index: 7; background: rgba(16, 17, 22, .9);
  border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line); padding: 22px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; transition: opacity .3s var(--ease-out); }
#statepanel h2 { margin: 0 0 4px; font-size: 36px; font-weight: 750; letter-spacing: -.02em; }
#statepanel .x { float: right; cursor: pointer; color: var(--dim); font-size: 18px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); border: none; display: grid; place-items: center; }
#statepanel .x:hover { color: var(--ink); }
#statepanel h4 { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dim); margin: 20px 0 6px; text-transform: uppercase; }
#statepanel .rc { border: 0 !important; background: var(--surface-2); border-radius: var(--r-md); }
.news a { display: block; color: var(--ink); text-decoration: none; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.news a:hover { color: #fff; }
.news a span { color: var(--faint); font-size: 12px; display: block; margin-top: 2px; }

/* ---------- ticker */
#ticker { position: fixed; left: 0; right: 0; bottom: var(--nlh); height: 44px; z-index: 6; display: flex; align-items: center;
  background: rgba(11, 12, 15, .96); border-top: 1px solid var(--line); }
#ticker .lbl { background: var(--accent); color: var(--accent-ink); font-weight: 800; letter-spacing: .06em; font-size: 12px; text-transform: uppercase;
  padding: 6px 13px; margin: 0 4px 0 20px; border-radius: var(--r-pill); display: flex; align-items: center; }
.crawl { flex: 1; overflow: hidden; position: relative; align-self: stretch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
#crawl-inner { position: absolute; white-space: nowrap; top: 11px; font-size: 16px; font-weight: 500; color: var(--ink-2); will-change: transform; }
#crawl-inner span { margin-right: 56px; }
#crawl-inner span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  margin-right: 12px; vertical-align: 3px; }

#replaybadge { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: 8; background: var(--amber); color: #111;
  font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 6px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow); }
#sound { position: fixed; right: 20px; top: 100px; z-index: 9; background: rgba(16, 17, 22, .85); color: var(--ink); border: 0;
  box-shadow: 0 0 0 1px var(--line-strong); padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px; font-weight: 600; }
#sound:hover { background: var(--ink); color: var(--bg); }
body:not(.record) #timeline { top: 144px; }
body.record #sound, body.record #replaybadge { display: none; }
body.record { cursor: none; }

body:not(.record) #timeline { bottom: calc(60px + var(--nlh)); }   /* the old in-column scrubber is the time bar now */
#scrubber { position: fixed; right: 20px; width: 364px; bottom: 52px; z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 14px; border-radius: var(--r-pill); background: rgba(16, 17, 22, .8); box-shadow: 0 0 0 1px var(--line);
  opacity: .5; transition: opacity .3s var(--ease-out); }
#scrubber:hover { opacity: 1; }
#scrubber input { flex: 1; min-width: 0; accent-color: var(--accent); }
#scrubber span { font-size: 11px; letter-spacing: .04em; color: var(--accent); font-weight: 700; min-width: 48px; font-variant-numeric: tabular-nums; }
#scrubber button { background: var(--surface-3); color: var(--ink); border: 0; font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--r-pill); cursor: pointer; letter-spacing: 0; white-space: nowrap; }
#scrubber button:hover { background: var(--ink); color: var(--bg); }
body.record #scrubber { display: none; }

/* ---------- recap (WAAR STAAN WE) segment */
#analysis.recap { max-height: 400px; }
#analysis.recap .tag { background: var(--amber); color: #111; font-size: 12px; max-width: none; line-height: 1; text-align: left; }
#analysis.recap #an-title { font-size: 32px; }
#analysis.recap #an-text { -webkit-line-clamp: unset; display: block; font-size: 18px; }
#analysis.recap #an-text ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
#analysis.recap #an-text li { margin-bottom: 6px; padding-left: 18px; position: relative; }
#analysis.recap #an-text li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
body.recap-on #balance { animation: balpulse 2s ease-in-out infinite; }
@keyframes balpulse { 50% { filter: drop-shadow(0 0 12px rgba(246, 185, 59, .55)) brightness(1.15); } }
.tl.post.recap { background: rgba(246, 185, 59, .06); } .tl.post.recap::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(246, 185, 59, .18); }
#sp-veed { min-height: 60px; }

/* ---------- site nav (one url for everything) */
.sitenav { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.sitenav a { color: var(--dim); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 5px 12px; border: 0; border-radius: var(--r-pill); transition: color .2s, background .3s var(--ease-out); }
.sitenav a:hover { color: var(--ink); }
.sitenav a.on { color: var(--bg); background: var(--ink); }
body:not(.record) .brand .sub { display: none; }
body.record .sitenav { display: none; }
a.src { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .22); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.src:hover { color: var(--ink); text-decoration-color: var(--accent); }
#br-src a.src { color: var(--dim); pointer-events: auto; }
.tl .srcl { font-size: 11px; color: var(--faint); margin-top: 4px; letter-spacing: 0; font-style: normal; }
#statepanel .rc h2 { display: none; } #statepanel .rc .st { font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ui-agent: House bar, house moment, sound switch, timeline filters */
#bigmoment { position: fixed; inset: 84px 380px 96px 28px; z-index: 8; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; background: rgba(11,12,15,.82); backdrop-filter: blur(6px); transition: opacity .6s; }
#bigmoment .bm-kicker { font-size: 18px; letter-spacing: .2em; color: var(--accent); font-weight: 800; }
#bigmoment .bm-head { font-size: 84px; font-weight: 900; line-height: 1.05; margin: 14px 0 24px; }
#bigmoment[data-party="D"] .bm-head { color: var(--d-ink); } #bigmoment[data-party="R"] .bm-head { color: var(--r-ink); }
#bigmoment .bm-nums { display: flex; gap: 40px; align-items: baseline; font-size: 22px; }
#bigmoment .bm-nums b { font-size: 64px; } #bigmoment .bm-nums .d b { color: var(--d-ink); } #bigmoment .bm-nums .r b { color: var(--r-ink); }
#bigmoment .bm-src { margin-top: 18px; font-size: 12px; color: var(--dim); }
#sound { display: flex; align-items: center; gap: 8px; }
#sound .snd-sw { width: 30px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; }
#sound .snd-sw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .2s; }
#sound.on .snd-sw { background: var(--accent); } #sound.on .snd-sw i { left: 16px; background: #0b0c0f; }
#soundprompt { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: rgba(0,0,0,.45); transition: opacity .3s; }
#soundprompt #sp-on { font-size: 22px; font-weight: 800; padding: 18px 30px; border: none; border-radius: 40px; cursor: pointer;
  background: var(--accent); color: #0b0c0f; }
#soundprompt #sp-off { background: none; border: none; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: 13px; }
body.record #soundprompt, body.record #tl-tools { display: none; }
#tl-tools { margin-bottom: 8px; }
#tl-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#tl-filters button { font-size: 11px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer; }
#tl-filters button.on { background: var(--accent); color: #0b0c0f; border-color: var(--accent); font-weight: 700; }
#tl-search { width: 100%; font-size: 12px; padding: 5px 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; }
#tl-list[data-f="calls"] .tl:not([data-cat="calls"]), #tl-list[data-f="results"] .tl:not([data-cat="results"]),
#tl-list[data-f="post"] .tl:not([data-cat="post"]), #tl-list[data-f="breaking"] .tl:not([data-cat="breaking"]),
#tl-list[data-f="host"] .tl:not([data-cat="host"]), #tl-list .tl.nomatch { display: none; }
.tl.post .ex { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-src { margin-top: 4px; }
#bodies { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
#bodies .body-chip { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; background: none; border: 1px solid transparent;
  border-radius: 6px; padding: 1px 8px; color: var(--dim); font-size: 11px; cursor: pointer; text-align: left; }
#bodies .body-chip b { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
#bodies .body-chip b .hd { color: var(--d-ink); } #bodies .body-chip b .hr { color: var(--r-ink); }
#bodies .body-chip small { font-size: 10px; color: var(--dim); }
#bodies .body-chip.on { border-color: var(--accent); color: var(--ink); }
/* ui-agent: explainers, background switch, resume pill */
.ix { background: none; border: none; color: var(--dim); cursor: help; font-size: 12px; padding: 0 2px; line-height: 1; vertical-align: 1px; }
.ix:hover { color: var(--accent); }
body.record .ix, body.record #bedsw, body.record #resumepill, body.record #xtip { display: none !important; }
#xtip { position: fixed; z-index: 30; width: 290px; background: rgba(16,18,22,.97); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: opacity .15s; }
#xtip p { margin: 4px 0 6px; color: var(--ink); } #xtip a { color: var(--accent); font-weight: 700; text-decoration: none; }
#bedsw { position: fixed; right: 176px; top: 104px; z-index: 9; display: flex; align-items: center; gap: 8px; background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); padding: 4px 10px; cursor: pointer; font-size: 11px; border-radius: 14px; }
#bedsw .snd-sw { width: 26px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.18); position: relative; }
#bedsw .snd-sw i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .2s; }
#bedsw.on .snd-sw { background: var(--accent); } #bedsw.on .snd-sw i { left: 14px; background: #0b0c0f; }
#bedsw:disabled { opacity: .4; cursor: default; }
#resumepill { position: fixed; left: 50%; top: 136px; transform: translateX(-50%); z-index: 12; background: var(--accent); color: #0b0c0f;
  border: none; border-radius: 20px; padding: 8px 18px; font-weight: 800; cursor: pointer; transition: opacity .3s; }
#soundprompt .sp-how { color: var(--ink); font-size: 13px; }
#clock { white-space: nowrap; }
/* ui-agent: two anchors (Eva / Daan) */
#host .anchors { display: flex; gap: 6px; align-items: flex-end; }
#host .avatar.daan { border-radius: 14px; background: radial-gradient(circle at 35% 35%, #ffd27a, #c07a1a 60%, #3a2408); }
#host .avatar.daan span { background: #ffd27a; box-shadow: 0 0 10px rgba(255,210,122,.7); }
#host .avatar:not(.active) { opacity: .45; transform: scale(.82); transition: opacity .3s, transform .3s; }
#host .avatar.active { opacity: 1; transform: scale(1); transition: opacity .3s, transform .3s; }
body.speaking #host .avatar:not(.active) span { animation: none; }
body.speaking #host .avatar:not(.active) { box-shadow: none; }
#host[data-sp="daan"] .who { color: #ffd27a; }
.tl .spk { font-style: normal; font-weight: 800; } .tl .spk-eva { color: var(--accent); } .tl .spk-daan { color: #ffd27a; }
.tl.exchange details { margin-top: 4px; } .tl.exchange summary { cursor: pointer; font-size: 11px; color: var(--dim); font-style: normal; }
.tl.exchange .turn { margin-top: 4px; }

/* ---- design pass 2: restyle of the ui-agent additions (selectors unchanged) ---- */
/* header: brand | balance (flexes) | three bodies | mode + clock */
#balance { flex: 1 1 600px; max-width: 600px; min-width: 0; }
.bal-label .mid { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 10px; }
.bal-label .mid b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; vertical-align: 0; }
.bal-label > .d, .bal-label > .r { white-space: nowrap; flex: none; }
.bal-foot > * { white-space: nowrap; }
#bodies { flex: none; display: grid; gap: 2px; min-width: 0; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line); }
#bodies .body-chip { display: grid; grid-template-columns: 84px 58px 62px; gap: 6px; align-items: baseline; white-space: nowrap;
  background: none; border: 0; border-radius: 9px; padding: 3px 10px; color: var(--dim); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: left; transition: background .25s var(--ease-out), color .2s; }
#bodies .body-chip:hover { background: var(--surface-2); color: var(--ink); }
#bodies .body-chip b { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
#bodies .body-chip b .hd { color: var(--d-ink); } #bodies .body-chip b .hr { color: var(--r-ink); }
#bodies .body-chip small { font-size: 11px; font-weight: 500; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
#bodies .body-chip.on { background: rgba(255, 255, 255, .09); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 1700px) {
  #top .mode { display: none; }   /* the #bodies chips switch the map too */
  #top { gap: 20px; padding: 0 24px; }
  .bal-label b { font-size: 26px; }
}
@media (max-width: 1500px) {
  .bal-foot .key { display: none; }
  .bal-label small { display: none; }
  .title { font-size: 20px; }
  .brand { min-width: 0; }
}

/* House-control moment: a glass stage over the map (not full-bleed) */
#bigmoment { inset: 108px 404px calc(72px + var(--nlh)) 32px; border-radius: 24px; background: rgba(11, 12, 15, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  transition: opacity .5s var(--ease-out), transform .8s var(--spring); }
#bigmoment.hidden { transform: scale(.97); }
#bigmoment::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255, 255, 255, .06), transparent 70%); }
#bigmoment[data-party="D"]::before { background: radial-gradient(60% 50% at 50% 42%, rgba(59, 130, 246, .22), transparent 70%); }
#bigmoment[data-party="R"]::before { background: radial-gradient(60% 50% at 50% 42%, rgba(239, 68, 88, .22), transparent 70%); }
#bigmoment > * { position: relative; }
#bigmoment .bm-kicker { font-size: 13px; letter-spacing: .08em; font-weight: 700; color: var(--accent-ink); background: var(--accent);
  padding: 7px 14px; border-radius: var(--r-pill); }
#bigmoment .bm-head { font-size: 92px; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 26px 40px 30px; text-wrap: balance; }
#bigmoment .bm-nums { gap: 48px; font-size: 20px; font-weight: 600; color: var(--dim); }
#bigmoment .bm-nums b { font-size: 80px; font-weight: 800; letter-spacing: -.04em; margin: 0 6px; }
#bigmoment .bm-nums .mid { font-size: 16px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); align-self: center; }
#bigmoment .bm-src { margin-top: 26px; font-size: 13px; color: var(--faint); }

/* sound + background switches, resume pill, first-visit prompt */
#sound, #bedsw { top: 100px; height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 13px; border: 0;
  border-radius: var(--r-pill); background: rgba(16, 17, 22, .85); box-shadow: 0 0 0 1px var(--line-strong);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .2s, background .2s; }
#sound:hover, #bedsw:hover { background: rgba(30, 32, 38, .92); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .24); }
#bedsw { right: auto; left: auto; right: 196px; color: var(--ink-2); }
#sound .snd-ico { font-size: 13px; line-height: 1; }
#sound .snd-sw, #bedsw .snd-sw { width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .16); position: relative; flex: none;
  transition: background .25s var(--ease-out); }
#sound .snd-sw i, #bedsw .snd-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: left .35s var(--spring); }
#sound.on .snd-sw, #bedsw.on .snd-sw { background: var(--accent); }
#sound.on .snd-sw i, #bedsw.on .snd-sw i { left: 14px; background: var(--accent-ink); }
#bedsw:disabled { opacity: .4; cursor: default; }
#resumepill { top: 148px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px;
  border-radius: var(--r-pill); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 5px rgba(198, 242, 94, .16); animation: resumepulse 2.4s ease-in-out infinite; }
@keyframes resumepulse { 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 9px rgba(198, 242, 94, .06); } }
#soundprompt { gap: 12px; background: radial-gradient(50% 45% at 50% 50%, rgba(11, 12, 15, .72), rgba(11, 12, 15, .5)); }
#soundprompt #sp-on { font: inherit; font-size: 22px; font-weight: 750; letter-spacing: -.01em; padding: 20px 34px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 8px rgba(198, 242, 94, .14);
  transition: transform .4s var(--spring), box-shadow .3s; }
#soundprompt #sp-on:hover { transform: scale(1.03); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 12px rgba(198, 242, 94, .18); }
#soundprompt #sp-off { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 16px;
  border-radius: var(--r-pill); background: rgba(16, 17, 22, .8); box-shadow: 0 0 0 1px var(--line-strong); }
#soundprompt #sp-off:hover { background: rgba(30, 32, 38, .9); }
#soundprompt .sp-how { font-size: 13px; color: var(--ink-2); text-decoration: none; }
#soundprompt .sp-how:hover { color: var(--accent); }

/* timeline tools: one line of filter chips + a pill search */
#tl-tools { margin: 0 10px 10px 0; }
#tl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
#tl-filters::-webkit-scrollbar { display: none; }
#tl-filters button { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); border: 0;
  background: var(--surface-2); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; }
#tl-filters button:hover { color: var(--ink); background: var(--surface-3); }
#tl-filters button.on { background: var(--ink); color: var(--bg); box-shadow: none; font-weight: 700; }
#tl-search { font: inherit; font-size: 13px; padding: 7px 12px 7px 32px; border-radius: var(--r-pill); border: 0; outline: none; color: var(--ink);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%238a8f9a' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%238a8f9a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 11px 50%/14px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
#tl-search::placeholder { color: var(--faint); }
#tl-search:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* two anchors: Eva = lime round, Daan = amber rounded square */
#host .anchors { gap: 8px; }
#host .avatar.daan { border-radius: 16px; background: radial-gradient(circle at 30% 25%, #2e2a22, #14120e 70%);
  box-shadow: inset 0 0 0 1.5px rgba(246, 185, 59, .6), 0 0 0 5px rgba(246, 185, 59, .08), 0 10px 28px rgba(0, 0, 0, .5); }
#host .avatar.daan span { background: var(--amber); box-shadow: 0 0 10px rgba(246, 185, 59, .7); }
body.speaking #host .avatar.daan.active { box-shadow: inset 0 0 0 1.5px var(--amber), 0 0 0 6px rgba(246, 185, 59, .14), 0 0 30px rgba(246, 185, 59, .3); }
#host .avatar:not(.active) { opacity: .4; transform: scale(.8); filter: saturate(.4); transition: opacity .4s var(--ease-out), transform .5s var(--spring), filter .4s; }
#host .avatar.active { opacity: 1; transform: none; filter: none; transition: opacity .4s var(--ease-out), transform .5s var(--spring), filter .4s; }
#host[data-sp="daan"] .who { color: var(--amber); }
#host[data-sp="daan"] .bubble { border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px; box-shadow: var(--shadow), 0 0 0 1px rgba(246, 185, 59, .2); }
.tl .spk { font-style: normal; font-weight: 700; letter-spacing: -.005em; } .tl .spk-eva { color: var(--accent); } .tl .spk-daan { color: var(--amber); }
.tl.host { font-style: normal; color: var(--ink-2); }
.tl.exchange { background: rgba(255, 255, 255, .025); }
.tl.exchange::before { background: linear-gradient(90deg, var(--accent) 50%, var(--amber) 50%); width: 8px; height: 8px; left: 4px; top: 14px; }
.tl.exchange details { margin-top: 6px; }
.tl.exchange summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600;
  color: var(--dim); padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-2); }
.tl.exchange summary::-webkit-details-marker { display: none; }
.tl.exchange summary:hover { color: var(--ink); }
.tl.exchange details[open] summary { margin-bottom: 4px; }
.tl.exchange .turn { margin-top: 6px; padding-left: 10px; border-left: 1px solid var(--line-strong); }
.tl.post .ex { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* explainer (i) buttons + tooltip, map tooltip */
.ix { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-left: 2px; border-radius: 50%; border: 0;
  background: transparent; color: var(--faint); font-size: 12px; line-height: 1; cursor: help; vertical-align: 1px; transition: color .2s, background .2s; }
.ix:hover { color: var(--accent-ink); background: var(--accent); }
.sitenav .ix { width: 28px; height: auto; border-radius: var(--r-pill); }
#livepill button.ix { background: transparent; color: var(--dim); padding: 0; width: 26px; height: 26px; font-size: 13px; }
#livepill button.ix:hover { background: var(--surface-3); color: var(--ink); }
#scrubber .ix { width: 24px; height: 24px; padding: 0; background: transparent; }
#xtip, #maptip { position: fixed; z-index: 30; pointer-events: auto; background: rgba(20, 22, 28, .94); border: 0; border-radius: var(--r-md);
  box-shadow: var(--shadow), 0 0 0 1px var(--line-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink-2); font-size: 13px; line-height: 1.45; transition: opacity .18s var(--ease-out), transform .3s var(--spring); }
#xtip { width: 300px; padding: 12px 14px; }
#xtip b { color: var(--ink); font-size: 14px; font-weight: 700; }
#xtip p { margin: 4px 0 8px; color: var(--ink-2); }
#xtip a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 13px; }
#xtip a:hover { text-decoration: underline; text-underline-offset: 3px; }
#xtip.hidden, #maptip.hidden { transform: translateY(4px); pointer-events: none; }   /* an invisible tip must not eat clicks */
#maptip { pointer-events: none; padding: 9px 12px; min-width: 160px; max-width: 260px; font-size: 13px; }
#maptip b { color: var(--ink); font-weight: 700; }
body.record #maptip { display: none; }

/* KIJKMODUS: the badge turns amber; the pill offers the way back */
body.browse .live { letter-spacing: .05em; }
body.browse #livepill { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 59, 78, .5); }
/* ui-agent: House districts in the state panel */
.sp-house { display: flex; flex-direction: column; gap: 2px; }
.sp-dist { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.sp-dist small { color: var(--dim); font-size: 10px; }
.sp-dist-more { font-size: 11px; color: var(--dim); padding-top: 6px; }
/* ui-agent: ACHTERGROND deep-dive segment */
#deepdive { position: fixed; left: 28px; right: 380px; bottom: calc(96px + var(--nlh)); z-index: 6; background: rgba(12,13,17,.95); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px; transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.2,1); }
#deepdive.hidden { transform: translateY(30px); }
.dd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dd-tag, .chip.dd-chip { background: #8b7cff; color: #0b0c0f; font-weight: 900; letter-spacing: .12em; font-size: 12px; padding: 3px 9px; border-radius: 4px; }
.dd-title { font-size: 26px; font-weight: 800; }
.dd-tl { display: flex; gap: 12px; overflow: hidden; }
.dd-item { flex: 1; min-width: 0; border-top: 3px solid rgba(255,255,255,.15); padding-top: 8px; opacity: .12; transform: translateY(10px);
  transition: opacity .6s, transform .6s, border-color .6s; }
.dd-item.on { opacity: 1; transform: none; border-top-color: #8b7cff; }
.dd-date { font-size: 12px; font-weight: 800; color: #b8afff; letter-spacing: .06em; }
.dd-label { font-size: 15px; line-height: 1.35; margin-top: 4px; }
.dd-src { font-size: 10px; color: var(--dim); margin-top: 4px; }
.dd-profiles { display: flex; gap: 14px; }
.dd-card { flex: 1; min-width: 0; background: rgba(255,255,255,.04); border-top: 4px solid; border-radius: 8px; padding: 12px 14px; animation: ddin .6s; }
@keyframes ddin { from { opacity: 0; transform: translateY(14px); } }
.dd-name { font-size: 22px; font-weight: 800; } .dd-role { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.dd-fact { font-size: 13px; line-height: 1.4; margin-bottom: 5px; } .dd-quote { font-style: italic; margin-top: 8px; color: var(--ink); }
.tl.feature { border-left-color: #8b7cff; }
body.anchors3d #host .anchors { display: none; }
/* ui-agent: Dit moet je weten */
#bf-open { background: none; border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 16px; cursor: pointer; }
#bf-open.fresh { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(198,242,94,.15); }
body.record #bf-open { display: none; }
#briefing { position: fixed; top: 96px; right: 380px; width: 440px; z-index: 8; background: rgba(12,13,17,.96); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; transition: opacity .4s, transform .5s; }
#briefing.hidden { transform: translateY(-12px); }
#briefing.onair { width: 620px; right: auto; left: 50%; margin-left: -500px; top: 150px; border-color: var(--accent); }
.bf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bf-head b { font-size: 18px; } .bf-head span { font-size: 11px; color: var(--dim); flex: 1; }
.bf-x { background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer; }
.bf-list { margin: 0; padding-left: 20px; } .bf-list li { font-size: 14px; line-height: 1.4; margin-bottom: 7px; }
#briefing.onair .bf-list li { font-size: 17px; }
.bf-list li.go { cursor: pointer; } .bf-list li.go:hover { color: var(--accent); }
body.record #briefing .bf-x { display: none; }
.chip.bf-chip { background: var(--accent); color: #0b0c0f; }
#bf-open { white-space: nowrap; }
/* ui-agent: referenda, segment panels, rotating card line */
#card .m-title { font-size: 24px; line-height: 1.15; }
.badge.m-aangenomen { background: #2fbf71; color: #0b0c0f; } .badge.m-verworpen { background: #b0606a; color: #fff; }
.badge.m-te-nipt { background: var(--amber); color: #000; } .badge.m-open { background: rgba(255,255,255,.1); color: var(--ink); }
.m-sum { font-size: 13px; color: var(--dim); line-height: 1.4; margin: 4px 0 10px; }
.m-res { display: flex; flex-direction: column; gap: 6px; }
.m-row { display: grid; grid-template-columns: 40px 1fr 56px; gap: 8px; align-items: center; font-size: 14px; }
.m-row span { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; } .m-bar i { display: block; height: 100%; }
#breaking.small #br-head { font-size: 26px; } #breaking.small .tag { background: #2fbf71; color: #0b0c0f; }
.tl.measure { border-left-color: #2fbf71; }
#analysis.segpanel .tag { background: #8b7cff; color: #0b0c0f; max-width: 190px; text-align: center; line-height: 1.2; font-size: 14px; }
.rot { margin-top: 10px; font-size: 12px; color: var(--ink); border-top: 1px solid var(--line); padding-top: 8px; min-height: 2.6em; }
.rot.in { animation: rotin .5s; } @keyframes rotin { from { opacity: 0; transform: translateY(4px); } }
#bodies { gap: 0; } #bodies .body-chip { padding-top: 0; padding-bottom: 0; line-height: 1.3; }
/* ---- design pass 3 (QA): no clipped header text, wrapping timeline filters, person-like initials ---- */
.bal-label { align-items: flex-end; gap: 10px; }
.bal-label .mid { white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  font-size: 11.5px; line-height: 1.25; text-wrap: balance; padding-bottom: 3px; }
#balance { flex: 1 1 640px; max-width: 640px; }
#tl-filters { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; row-gap: 5px; }
#tl-filters button { padding: 3px 9px; font-size: 11.5px; }
.cand .ph { background-image: linear-gradient(155deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .28)) !important; }
.cand .ph { font-size: 16px; font-weight: 600; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 2px rgba(11, 12, 15, .9), 0 0 0 3.5px rgba(255, 255, 255, .16), 0 6px 16px rgba(0, 0, 0, .4); }
#top .mode { display: none; }   /* the #bodies chips (incl. Referenda) switch the map; frees the header for the balance */
.right { gap: 14px; }
.bal-foot { gap: 14px; } .bal-foot > :last-child { margin-left: auto; }
#bf-open { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border: 0; border-radius: var(--r-pill); color: var(--ink);
  background: rgba(16, 17, 22, .85); box-shadow: 0 0 0 1px var(--line-strong); transition: background .2s, box-shadow .2s; }
#bf-open:hover { background: var(--ink); color: var(--bg); }
#bf-open.fresh { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(198, 242, 94, .14); }
/* segment panels, deep dive, briefing: same glass + pill language */
#analysis.segpanel .tag { background: #8b7cff; color: #0b0c0f; max-width: none; text-align: left; line-height: 1; font-size: 12px; }
#deepdive, #briefing { background: rgba(16, 17, 22, .9); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#deepdive { left: 32px; right: 404px; padding: 20px 24px; transition: opacity .4s var(--ease-out), transform .75s var(--spring); }
.dd-tag, .chip.dd-chip { letter-spacing: .07em; font-weight: 800; border-radius: var(--r-pill); padding: 4px 11px; }
.dd-title { font-size: 28px; font-weight: 750; letter-spacing: -.015em; }
.dd-item { border-top-width: 2px; border-radius: 0; }
.dd-card { border-radius: var(--r-md); border-top-width: 3px; background: var(--surface-2); padding: 14px 16px; }
.dd-name { font-weight: 750; letter-spacing: -.01em; }
#briefing { right: 404px; padding: 16px 18px; }
#briefing.onair { box-shadow: var(--shadow), 0 0 0 1.5px var(--accent); }
.bf-x { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); font-size: 16px; display: grid; place-items: center; }
.bf-list { padding-left: 0; list-style: none; }
.bf-list li { position: relative; padding-left: 18px; }
.bf-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge.m-aangenomen { background: rgba(52, 211, 153, .18); color: var(--ok); } .badge.m-verworpen { background: rgba(239, 68, 88, .18); color: var(--r-ink); }
.badge.m-te-nipt { background: rgba(246, 185, 59, .16); color: var(--amber); }
.m-bar { border-radius: var(--r-pill); }
.rot { color: var(--ink-2); font-size: 13px; }
/* ui-agent: QA round — collapsed breaking chip, dedupe note */
#breaking.collapsed { right: auto; max-width: 560px; cursor: pointer; }
#breaking.collapsed .body { padding: 6px 14px; }
#breaking.collapsed #br-head { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#breaking.collapsed #br-dek, #breaking.collapsed #br-src { display: none; }
#breaking.collapsed .tag { font-size: 11px; padding: 0 10px; }
.tl .more-src { font-size: 11px; color: var(--dim); margin-top: 3px; }
/* ui-agent: compact race card when the anchor area needs the room */
#card.compact .cand:nth-of-type(n+3), #card.compact .srcs, #card.compact .rot, #card.compact .m-sum,
#card.compact .surprise-note, #card.compact .results-src { display: none; }   /* the stack sits above the results strip: the card gives way */
#card.compact .cand { padding: 5px 0; }
/* ui-agent: board moment, call basis, Straks, ticker orientation */
.basis { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; margin-left: 6px;
  background: rgba(255,255,255,.12); color: var(--ink); vertical-align: 1px; }
.basis-ap { background: #e6e6e6; color: #111; } .basis-ddhq { background: #2b6cb0; color: #fff; }
.basis-anderen, .basis-andere, .basis-others { background: rgba(245,185,66,.25); color: var(--amber); }
#br-src .basis { margin: 0 8px 0 0; }
#tease { position: fixed; right: 392px; bottom: calc(56px + var(--nlh)); z-index: 7; height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: rgba(12,13,17,.95); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; max-width: 520px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s; }
#tease b { color: var(--accent); letter-spacing: .12em; font-size: 10px; }
#crawl-inner span.orient { color: var(--accent); font-weight: 700; }
#boardview { position: fixed; left: 28px; right: 380px; top: 96px; bottom: calc(96px + var(--nlh)); z-index: 6; display: flex; flex-direction: column; justify-content: center;
  gap: 22px; padding: 28px 36px; background: rgba(11,12,15,.78); backdrop-filter: blur(4px); border-radius: 14px; transition: opacity .6s; }
.bv-kicker { font-size: 14px; letter-spacing: .2em; color: var(--accent); font-weight: 800; }
.bv-bodies { display: flex; gap: 24px; }
.bv-body { flex: 1; background: rgba(255,255,255,.04); border-radius: 12px; padding: 16px 20px; }
.bv-name { font-size: 16px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.bv-nums { font-size: 64px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bv-nums .d { color: var(--d-ink); } .bv-nums .r { color: var(--r-ink); } .bv-nums .dash { color: var(--dim); margin: 0 8px; }
.bv-sub { font-size: 12px; color: var(--dim); }
.bv-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.bv-call { font-size: 15px; opacity: 0; animation: bvin .5s forwards; }
@keyframes bvin { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
/* ui-agent: corrections mask */
.tl.corrected { opacity: .72; }
.corr-mark { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; background: rgba(245,185,66,.18); color: var(--amber); font-style: normal; }
#maskcount { position: fixed; top: 116px; left: 50%; transform: translateX(-50%); z-index: 8; font-size: 11px; color: var(--dim);
  background: rgba(12,13,17,.85); border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; transition: opacity .3s; }
.m-trend { font-size: 12px; color: var(--amber); font-style: italic; margin: -4px 0 8px; }
/* ui-agent: the 3D anchors keep one fixed size; only the subtitle bubble flexes */
#host #anchors3d { flex: 0 0 360px; width: 360px; min-width: 360px; max-width: 360px; height: 200px; overflow: hidden; align-self: flex-end; }
#host #anchors3d canvas { display: block; width: 360px !important; height: 200px !important; }
#host .bubble { flex: 1 1 auto; min-width: 0; }
/* ui-agent: anchor shots — the 3D canvas always renders at the close-up size (558x310) and is scaled down for the
   compact storytelling shot; the layout box stays 360x200 (negative margins), so nothing else jumps */
#host #anchors3d { flex: 0 0 558px; width: 558px; min-width: 558px; max-width: 558px; height: 310px;
  margin-right: -198px; margin-top: -110px; transform: scale(.6452); transform-origin: 0 100%;
  transition: transform .5s cubic-bezier(.3,.8,.3,1); will-change: transform; overflow: visible; }
#host #anchors3d canvas { width: 558px !important; height: 310px !important; }
body.anchor-closeup #host #anchors3d { transform: scale(1); }
#host .bubble { transition: margin-left .5s cubic-bezier(.3,.8,.3,1); }
body.anchor-closeup.anchors3d #host .bubble { margin-left: 198px; }
body.anchor-closeup #host #host-text { font-size: 17px; line-height: 1.35; }

/* ======================================================================================================
   PHONE LAYOUT. Everything below is scoped to phones (portrait <= 900px wide, or a landscape screen <= 500px high);
   the desktop broadcast (>= 1280px) never matches. app.js uses the same media query (MOBILE_MQ) for the map
   canvas sizing, framing and devicePixelRatio cap.
   Portrait: a scrolling page. Sticky header + nav, the map band with the race card (top-left) and the compact anchor
   shot (bottom edge), then the tally (balance + bodies), the scrubber and the feed. Lower thirds are bottom sheets.
   Landscape: the map sticks on the left, the tally + feed scroll on the right.
   ====================================================================================================== */
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  :root {
    --g: 16px;
    --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
    --gl: calc(var(--g) + var(--sal)); --gr: calc(var(--g) + var(--sar));
    --hdr: calc(var(--sat) + 90px);
    --tick-h: calc(34px + var(--sab));
    --map-h: min(80vw, 46vh);
    --bar-h: 108px;                             /* docked control bar above the ticker: the time bar + (briefing / music / sound) */
    --nlh: 0px;                                 /* the desktop time-bar offset: the phone docks it in the bar instead */
    --fab: calc(var(--tick-h) + 6px);           /* bottom of the buttons inside that bar */
    --sheet-b: calc(var(--tick-h) + var(--bar-h) + 8px);   /* lower-third sheets sit above the bar */
  }
  @supports (height: 1dvh) { :root { --map-h: min(80vw, 46dvh); } }
  html { height: auto; overflow-x: hidden; overflow-y: auto; -webkit-text-size-adjust: 100%; }
  body { height: auto; min-height: 100vh; overflow: visible; display: flex; flex-direction: column;
    padding-bottom: calc(var(--tick-h) + var(--bar-h) + 12px); overscroll-behavior-y: none; }
  /* the docked bar: an opaque strip the three buttons sit in, so they never float over feed controls */
  body::after { content: ""; position: fixed; z-index: 8; left: 0; right: 0; bottom: var(--tick-h); height: var(--bar-h);
    background: var(--bg); border-top: 1px solid var(--line); pointer-events: auto; }
  body.record::after { display: none; }
  #top, #top .right { display: contents; }

  /* header: LIVE + title + clock, then the nav as one swipeable row */
  .brand { order: 1; position: sticky; top: 0; z-index: 8; height: var(--hdr); min-width: 0; flex: none;
    flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px 10px;
    padding: calc(var(--sat) + 6px) var(--gr) 0 var(--gl); background: var(--bg); border-bottom: 1px solid var(--line); }
  .live { font-size: 11px; padding: 4px 9px 4px 8px; }
  .title { font-size: 15px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    flex: 1 1 0; margin-right: 84px; }   /* the clock sits in those 84px (KIJKMODUS makes the badge wider) */
  #clock { position: fixed; z-index: 9; top: calc(var(--sat) + 6px); right: var(--gr); height: 28px; line-height: 28px; font-size: 15px; }
  .sitenav { order: 3; flex: 0 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0; gap: 0;
    background: none; box-shadow: none; -webkit-overflow-scrolling: touch; }
  .sitenav::-webkit-scrollbar { display: none; }
  .sitenav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .sitenav .ix { flex: none; width: 44px; height: 44px; }

  /* the map: a band in the page; one finger pans, pinch zooms (OrbitControls sets touch-action: none) */
  #gl { order: 2; position: relative; inset: auto; flex: none; width: 100%; height: var(--map-h); }

  /* race card: compact, top-left on the map */
  #card { position: absolute; z-index: 4; top: calc(var(--hdr) + 8px); left: var(--gl); width: min(50vw, 230px);
    max-height: calc(var(--map-h) - 88px); overflow: hidden; padding: 10px 12px 8px; border-left-width: 2px; border-radius: var(--r-md); }
  #card .st { font-size: 11px; }
  #card h2 { font-size: 19px; margin: 0 0 6px; }
  #card .m-title { font-size: 15px; }
  #card .badge { font-size: 11px; padding: 3px 8px; margin-bottom: 6px; }
  #card .cand { grid-template-columns: 26px 1fr auto; gap: 0 8px; padding: 5px 0; }
  #card .cand .ph { width: 26px; height: 26px; font-size: 11px; }
  #card .cand .nm { font-size: 13px; }
  #card .cand .pt { font-size: 11px; }
  #card .cand .pct { font-size: 17px; }
  #card .cand .bar { height: 4px; margin-top: 3px; }
  #card .cand.win .nm::after { width: 14px; height: 14px; margin-left: 5px; background-size: 9px; }
  #card .cand:nth-of-type(n+3), #card .srcs, #card .rot, #card .m-sum, #card .rep, #card .basis, #card .ix,
  #card .badge.flip, #card .surprise-note { display: none; }
  #card .badge { letter-spacing: .02em; line-height: 1.25; }
  #card .margin { font-size: 12px; margin-top: 6px; }
  .m-row { font-size: 12px; grid-template-columns: 30px 1fr 44px; }

  /* anchor shot: a small 3D render (the canvas really is this size, not a scaled 558px one) over the map's bottom edge */
  /* portrait: the figures stand on the map's bottom edge, the subtitle runs full width under the map */
  #host { order: 3; position: relative; inset: auto; bottom: auto !important; z-index: 5; flex: none; min-height: 80px;
    margin: -80px var(--gr) 0 var(--gl); gap: 6px 8px; align-items: flex-end; flex-wrap: wrap; }
  #host .bubble { flex: 1 1 100%; }
  /* fixed 4-line subtitle box: the tally + feed below never jump when a line starts, ends or is longer */
  #host-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; height: calc(4 * 1.35em); }
  #host #anchors3d, body.anchor-closeup #host #anchors3d { flex: 0 0 144px; width: 144px; min-width: 144px; max-width: 144px; height: 80px;
    margin: 0; transform: none; will-change: auto; }
  #host #anchors3d canvas { width: 100% !important; height: 100% !important; }
  body.anchor-closeup.anchors3d #host .bubble { margin-left: 0; }
  #host .bubble { padding: 7px 11px 8px; max-width: none; }
  #host-text, body.anchor-closeup #host #host-text { font-size: 14px; line-height: 1.35; }
  .avatar { width: 36px; height: 36px; }

  /* tally */
  #balance { order: 4; flex: none; width: auto; max-width: none; min-width: 0; margin: 12px var(--gr) 0 var(--gl); }
  .bal-label { gap: 8px; }
  .bal-label b { font-size: 24px; }
  .bal-label .mid { font-size: 11px; }
  .bal-label small, .bal-foot .key { display: none; }
  .bal-foot { font-size: 11px; flex-wrap: wrap; row-gap: 2px; }
  #bodies { order: 5; flex: none; margin: 10px var(--gr) 0 var(--gl); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  #bodies .body-chip { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 0; min-height: 48px;
    padding: 4px 4px; font-size: 11px; text-align: center; overflow: hidden; }
  #bodies .body-chip b { font-size: 15px; }
  #bodies .body-chip small { display: none; }
  #bodies .body-chip.on { box-shadow: inset 0 -2px 0 var(--accent); }

  /* back-in-time scrubber: in the page, always fully visible (no hover on a phone) */
  #scrubber { order: 6; position: relative; inset: auto; z-index: 1; width: auto; flex: none; margin: 10px var(--gr) 0 var(--gl); min-height: 52px;
    padding: 4px 4px 4px 4px; opacity: 1; }
  #scrubber input { height: 44px; }
  #scrubber button { min-height: 44px; padding: 0 12px; font-size: 13px; }
  #scrubber .ix { width: 44px; height: 44px; }

  /* the feed: plain page scroll (no inner scroller, no blur over a 400k px tall panel) */
  #timeline, body:not(.record) #timeline { order: 7; position: relative; inset: auto; width: auto; flex: none; overflow: visible;
    margin: 12px var(--gr) 0 var(--gl); padding: 14px 6px 4px 14px; background: var(--surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  #tl-list { overflow: visible; flex: none; -webkit-mask-image: none; mask-image: none; padding-bottom: 8px; }
  #tl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -6px; }
  #tl-filters::-webkit-scrollbar { display: none; }
  #tl-filters button { min-height: 36px; padding: 0 13px; font-size: 13px; }
  #tl-search { font-size: 16px; min-height: 44px; }   /* >= 16px: iOS does not zoom the page on focus */
  .tl { font-size: 15px; }
  .tl .t, .tl.ticker, .tl .ex { font-size: 13px; }
  .tl .srcl, .tl .more-src, .tl.exchange summary { font-size: 12px; }

  /* sound, background music and "Dit moet je weten": docked in the bar above the ticker */
  #sound, #bedsw, #bf-open { position: fixed; z-index: 9; top: auto; bottom: var(--fab); height: 44px; }
  #sound { right: var(--gr); width: 76px; justify-content: center; padding: 0 10px; }
  #sound .snd-lbl, #bedsw .snd-lbl { display: none; }
  #bedsw { right: calc(var(--gr) + 84px); left: auto; width: 70px; justify-content: center; padding: 0 10px; }
  #bedsw::before { content: "\266B"; font-size: 15px; line-height: 1; }
  #bf-open { left: var(--gl); right: auto; padding: 0 16px; font-size: 13px; }

  /* ticker */
  #ticker { height: var(--tick-h); padding-bottom: var(--sab); background: var(--bg); }
  #ticker .lbl { margin-left: var(--gl); font-size: 11px; padding: 4px 10px; }
  #crawl-inner { top: 8px; font-size: 14px; }

  /* lower thirds sit ON THE MAP band (they scroll with it, never over the tally / feed controls); the race card
     steps aside while one is up. The briefing is opened from the bar, so it is a bottom sheet with its own close. */
  #breaking, #analysis, #deepdive, #boardview, #bigmoment {
    position: absolute; inset: calc(var(--hdr) + 8px) var(--gr) auto var(--gl); width: auto; margin: 0;
    max-height: calc(var(--map-h) - 96px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgba(16, 17, 22, .97); }
  #briefing, #briefing.onair {
    position: fixed; inset: auto var(--gr) var(--sheet-b) var(--gl); width: auto; margin: 0; max-height: 50vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgba(16, 17, 22, .97); }
  body:has(#breaking:not(.hidden), #analysis:not(.hidden), #deepdive:not(.hidden), #boardview:not(.hidden),
    #bigmoment:not(.hidden)) #card { opacity: 0; pointer-events: none; }
  #bigmoment { background: rgba(11, 12, 15, .96); }
  #breaking { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 12px 14px; }
  #breaking .tag { margin-top: 0; justify-self: start; font-size: 11px; padding: 4px 10px; }
  #br-head, #breaking.small #br-head { font-size: 21px; }
  #br-dek { font-size: 14px; margin-top: 4px; }
  #br-src { font-size: 11px; margin-top: 6px; }
  #breaking.collapsed { max-width: none; padding: 8px 12px; }
  #breaking.collapsed .body { padding: 0; }
  #breaking.collapsed #br-head { font-size: 14px; }
  #analysis { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  #analysis:has(#an-widget.gone) { grid-template-columns: minmax(0, 1fr); }
  #analysis .tag { margin: 12px 0 0 14px; font-size: 11px; }
  #analysis .body { padding: 6px 14px 12px; }
  #an-widget { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); padding: 10px 14px; }
  #an-title, #analysis.recap #an-title { font-size: 18px; }
  #an-text, #analysis.recap #an-text { font-size: 14px; }
  #an-src { font-size: 11px; }
  #deepdive { padding: 12px 14px; }
  .dd-title { font-size: 18px; }
  .dd-tl, .dd-profiles { flex-direction: column; gap: 8px; }
  .dd-label { font-size: 13px; }
  .dd-name { font-size: 16px; }
  .dd-src { font-size: 11px; }
  #boardview { justify-content: flex-start; gap: 12px; padding: 14px; }
  .bv-bodies { flex-direction: column; gap: 8px; }
  .bv-nums { font-size: 32px; }
  .bv-calls { grid-template-columns: minmax(0, 1fr); }
  .bv-call { font-size: 13px; }
  #bigmoment { padding: 16px; }
  #bigmoment .bm-head { font-size: 34px; margin: 12px 8px 14px; }
  #bigmoment .bm-nums { gap: 14px; font-size: 14px; flex-wrap: wrap; justify-content: center; }
  #bigmoment .bm-nums b { font-size: 36px; }
  #briefing .bf-list li, #briefing.onair .bf-list li { font-size: 14px; }
  .bf-x { width: 44px; height: 44px; }

  /* tapping a state: a full sheet */
  #statepanel { position: fixed; inset: calc(var(--hdr) + 8px) var(--gr) var(--sheet-b) var(--gl); width: auto; z-index: 10;
    padding: 16px; overscroll-behavior: contain; }
  #statepanel h2 { font-size: 26px; }
  #statepanel .x { width: 44px; height: 44px; }
  .sp-tabs { max-width: 100%; overflow-x: auto; }
  .sp-tabs button { min-height: 36px; }
  .sp-dist small { font-size: 11px; }

  /* pills under the header */
  #livepill { top: calc(var(--hdr) + 8px); max-width: calc(100vw - 2 * var(--g)); padding-left: 12px; font-size: 13px; }
  #lp-head { max-width: none; min-width: 0; flex: 1 1 auto; }
  #lp-back { min-height: 40px; }
  #replaybadge, body.browse #replaybadge, #resumepill { top: calc(var(--hdr) + 60px); white-space: nowrap; }
  #resumepill { min-height: 44px; }
  #maskcount { top: calc(var(--hdr) + 8px); }
  #infoline, #tease { display: none; }
  #xtip { max-width: calc(100vw - 2 * var(--g)); }
  #maptip { max-width: min(260px, calc(100vw - 2 * var(--g))); }
  #soundprompt { padding: 0 var(--g); text-align: center; }
  #soundprompt #sp-on { font-size: 18px; padding: 16px 22px; }
  #soundprompt #sp-off { min-height: 44px; }
  #soundprompt .sp-how { padding: 12px; }
}

/* phone held sideways: the map sticks on the left, tally + feed scroll on the right */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  :root { --hdr: calc(var(--sat) + 48px); --side: min(340px, 42vw); --tick-h: calc(30px + var(--sab)); }
  body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: var(--hdr) auto auto auto 1fr;
    align-items: start; padding-bottom: calc(var(--tick-h) + var(--bar-h) + 12px); }
  body::after { left: calc(100vw - var(--side)); }   /* the bar spans the feed column; the map keeps its full height */
  .brand { grid-column: 1 / -1; grid-row: 1; flex-wrap: nowrap; align-items: center; align-content: center;
    padding: var(--sat) calc(var(--gr) + 84px) 0 var(--gl); }
  .title { flex: 0 1 auto; max-width: 40vw; margin-right: 0; }
  .sitenav { order: 0; flex: 1 1 auto; }
  #clock { top: calc(var(--sat) + 10px); }
  #gl { grid-column: 1; grid-row: 2 / -1; position: sticky; top: var(--hdr); align-self: start;
    height: calc(100vh - var(--hdr) - var(--tick-h)); }
  @supports (height: 1dvh) { #gl { height: calc(100dvh - var(--hdr) - var(--tick-h)); } }
  #balance, #bodies, #scrubber, #timeline, body:not(.record) #timeline { grid-column: 2; margin-left: 8px; margin-right: var(--gr); }
  #balance { grid-row: 2; margin-top: 8px; }
  #bodies { grid-row: 3; }
  #scrubber { grid-row: 4; }
  #timeline, body:not(.record) #timeline { grid-row: 5; }
  #card { position: fixed; top: calc(var(--hdr) + 8px); max-height: calc(100vh - var(--hdr) - var(--tick-h) - 128px); }
  #host { position: fixed; grid-column: 1; left: var(--gl); right: auto; bottom: calc(var(--tick-h) + 8px) !important;
    width: calc(100vw - var(--side) - var(--gl) - 16px); margin: 0; flex-wrap: nowrap; }
  #host .bubble { flex: 1 1 auto; }
  #host-text { -webkit-line-clamp: 3; height: auto; }
  #sound, #bedsw, #bf-open { bottom: var(--fab); }
  #bf-open { left: calc(100vw - var(--side) + 8px); }
  /* sideways the feed column is short: lower thirds go over the MAP (under the header, above the anchor shot) so they
     never cover the tally / scrubber / feed controls; the race card steps aside while one is up */
  #breaking, #analysis, #deepdive, #boardview, #briefing, #briefing.onair, #bigmoment {
    position: fixed; inset: calc(var(--hdr) + 8px) calc(var(--side) + 8px) auto var(--gl);
    max-height: calc(100vh - var(--hdr) - var(--tick-h) - 136px); }
  body:has(#briefing:not(.hidden)) #card { opacity: 0; pointer-events: none; }
  #statepanel { right: calc(var(--side) + 8px); }
}

/* ---- QA round 15 ---- */
/* late join: the timeline shows the newest items; older ones on request */
#tl-more { display: block; width: 100%; margin: 8px 0 4px; padding: 8px 12px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#tl-more:hover { background: var(--surface-3); }
#tl-more.hidden { display: none; }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  #tl-more { min-height: 44px; }
  /* "laden…" in the chips until the board is in (plain counts stay hidden on a phone) */
  body.booting #bodies .body-chip small, #bodies .body-chip small.ctl { display: block; font-size: 11px; line-height: 1.2; }
}
/* KIJKMODUS badge is a back-to-live button */
body.browse .live[role=button] { cursor: pointer; }
/* the veed inside a state panel while browsing: a neutral label, not a red LIVE */
.veed .veed-live.veed-live-off { background: var(--surface-3, #2a2d35); color: var(--ink-2); }
.veed .veed-live.veed-live-off i { display: none; }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* "Terug naar live" above an open state sheet; the sheet starts under the pill */
  #livepill { z-index: 11; }
  body.browse:has(#livepill:not(.hidden)) #statepanel { top: calc(var(--hdr) + 64px); }
}
/* Senaat / Huis chips: the control status sits where the count was */
#bodies .body-chip small.ctl { color: var(--ink-2); }
#bodies .body-chip small .hd { color: var(--d-ink); font-weight: 700; } #bodies .body-chip small .hr { color: var(--r-ink); font-weight: 700; }
.bal-foot .ctl .hd, .bal-foot .ctl .hr { font-weight: 800; }
/* state panel: the close button stays in reach while the veed scrolls */
#statepanel .x { position: sticky; top: 0; z-index: 3; box-shadow: 0 0 0 4px rgba(16, 17, 22, .9); }
/* a replay never wears the red LIVE badge, and shows no clock / tally until its start moment is in */
body.replay .live { background: #3a3f4a; color: var(--ink); box-shadow: none; }
body.replay .live i { animation: none; background: var(--dim); }
body.replay.booting #clock, body.replay.booting #balance, body.replay.booting #bodies { visibility: hidden; }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* first-visit sound prompt: on a dimmed page, never drawn over the subtitle text */
  #soundprompt { background: rgba(11, 12, 15, .86); }
}
/* replay: the skip note can carry the desk's explanation — one line, never wider than the screen */
#maskcount { max-width: min(720px, calc(100vw - 32px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- results strip (lower third): fixed Senaat / Huis boxes + one rotating card; kickers ---- */
#lowerthird { position: fixed; left: 32px; right: 404px; bottom: calc(52px + var(--nlh)); height: 64px; z-index: 5; display: flex; gap: 5px; padding: 5px;
  border-radius: var(--r-lg); background: rgba(16, 17, 22, .86); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); contain: layout paint; }
.lt-boxes { display: flex; gap: 4px; flex: none; }
.lt-box { width: 206px; padding: 5px 12px 6px; border-radius: 11px; background: var(--surface-2); display: flex; flex-direction: column;
  justify-content: space-between; min-width: 0; }
.lt-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; white-space: nowrap; }
.lt-name { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lt-short { display: none; }
.lt-tier { font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.lt-tier[data-tier="open"] { color: var(--faint); }
.lt-tier .hd { color: var(--d-ink); font-weight: 800; } .lt-tier .hr { color: var(--r-ink); font-weight: 800; }
.lt-nums { display: flex; align-items: baseline; gap: 3px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-d, .lt-r { font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.lt-d { color: var(--d-ink); } .lt-r { color: var(--r-ink); }
.lt-nums i { font-style: normal; color: var(--faint); font-size: 15px; margin: 0 1px; }
.lt-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--dim); }
.lt-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.lt-bar .d, .lt-bar .r { position: absolute; top: 0; bottom: 0; transition: width 1.2s var(--ease-out); }
.lt-bar .d { left: 0; background: var(--d); border-radius: 2px 0 0 2px; }
.lt-bar .r { right: 0; background: var(--r); border-radius: 0 2px 2px 0; }
.lt-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.lt-rot { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 11px; }
.lt-slot { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.lt-slot.on { opacity: 1; transform: none; pointer-events: auto; }
.lt-card { position: relative; height: 100%; padding: 4px 14px 4px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.lt-card::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--lead, var(--line-strong)); }
.lt-feit::before { background: var(--accent); }
.lt-top { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; white-space: nowrap; }
.lt-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.lt-feit .lt-where { color: var(--accent); }
.lt-st { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-weight: 700; }
.lt-st.called { background: var(--ink); color: var(--bg); }
.lt-st.lead, .lt-st.close { background: rgba(246, 185, 59, .16); color: var(--amber); }
.lt-st.flip { background: var(--amber); color: #111; text-transform: uppercase; letter-spacing: .06em; }
.lt-cnt, .lt-src { flex: none; margin-left: auto; color: var(--dim); font-weight: 500; }
.lt-src { min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.lt-cands { display: flex; align-items: baseline; gap: 24px; min-width: 0; overflow: hidden; white-space: nowrap; }
.lt-c { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.lt-c > i { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.lt-c .nm { font-size: 17px; font-weight: 700; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; }
.lt-c .pc { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lt-c.lose { opacity: .5; }
.lt-ok { flex: none; align-self: center; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 11px; line-height: 1; }
.lt-lead { flex: none; align-self: center; color: var(--amber); font-size: 11px; }
.lt-feit { gap: 2px; padding-top: 2px; padding-bottom: 2px; }
.lt-txt { font-size: 13.5px; line-height: 1.22; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* the strip carries the race on air: the old one-line UITSLAG bar goes; the lower-third stack starts above the strip */
#infoline { display: none; }
#breaking, #analysis, #deepdive, #host { bottom: calc(132px + var(--nlh)); }
#boardview { bottom: calc(128px + var(--nlh)); }
#tease { bottom: calc(106px + var(--nlh)); right: 420px; }
/* kickers: the desk's 2-3 word label, big on the inslide, a tag in the timeline / anchor bubble */
#br-kick { font-size: 21px; font-weight: 900; letter-spacing: .03em; line-height: 1.05; text-transform: uppercase; color: var(--ink); margin: 1px 0 6px; }
#br-kick:empty { display: none; }
#breaking.collapsed #br-kick { display: none; }
.kick { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px; background: var(--ink); color: var(--bg);
  font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; line-height: 1.45; }
.who .kick { margin: 0 0 0 8px; }

@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  :root { --lt-h: 46px; --sheet-b: calc(var(--tick-h) + var(--bar-h) + var(--lt-h) + 8px); }
  body { padding-bottom: calc(var(--tick-h) + var(--bar-h) + var(--lt-h) + 12px); }
  /* the docked bar grows by one row: the compact strip sits on top of the briefing / music / sound buttons */
  body::after { height: calc(var(--bar-h) + var(--lt-h)); }
  #lowerthird { left: var(--gl); right: var(--gr); bottom: calc(var(--tick-h) + var(--bar-h)); height: var(--lt-h); z-index: 9;
    padding: 4px 0 2px; gap: 4px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lt-boxes { gap: 4px; }
  #breaking, #analysis, #deepdive, #boardview { bottom: auto; }   /* desktop stack offsets above do not apply to the sheets */
  .lt-box { width: auto; padding: 2px 6px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "nm nums" "tier tier";
    align-content: center; column-gap: 5px; row-gap: 1px; border-radius: 9px; }
  .lt-hd { display: contents; }
  .lt-name { grid-area: nm; align-self: center; letter-spacing: 0; }
  .lt-long { display: none; } .lt-short { display: inline; }
  .lt-nums { grid-area: nums; justify-self: end; gap: 1px; }
  .lt-d, .lt-r { font-size: 14px; letter-spacing: -.02em; }
  .lt-nums i { font-size: 12px; }
  .lt-meta, .lt-bar { display: none; }
  .lt-tier { grid-area: tier; font-size: 11px; line-height: 1.15; }
  .lt-rot { border-radius: 9px; background: var(--surface-2); }
  .lt-card { padding: 2px 8px 2px 12px; gap: 1px; }
  .lt-card::before { left: 4px; top: 6px; bottom: 6px; width: 2px; }
  .lt-top { gap: 5px; }
  .lt-where { letter-spacing: .03em; }
  .lt-st { padding: 0 5px; }
  .lt-w, .lt-st.flip { display: none; }
  .lt-where .lt-long { display: none; } .lt-where .lt-short { display: inline; }
  .lt-cands { gap: 8px; }
  .lt-c { gap: 3px; flex: 0 1 auto; }
  .lt-c > i { display: none; }
  .lt-c { min-width: 0; }
  .lt-c .nm { font-size: 12px; min-width: 2.2em; color: var(--pc); filter: brightness(1.35); }
  .lt-c .pc { font-size: 13px; flex: none; }
  .lt-ok { width: auto; height: auto; background: none; color: var(--ink); font-size: 12px; }
  .lt-lead { font-size: 11px; }
  .lt-txt { font-size: 12px; line-height: 1.25; -webkit-line-clamp: 1; }   /* one row: one line of the feit */
  .lt-src { display: none; }
  #br-kick { font-size: 16px; margin-bottom: 2px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  #lowerthird { left: calc(100vw - var(--side) + 8px); }
  .lt-race .lt-cnt { display: none; }   /* the side column is narrow: state + status first */
}
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* one row is narrow: the leader keeps the name, the runner-up shows its share */
  .lt-race .lt-c + .lt-c .nm { display: none; }
  .lt-c .nm { min-width: 0; }
}
/* a call only REPORTED by news sites (no named caller): muted, never 'projectie' */
.badge.called.reported { background: var(--surface-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lt-st.reported { background: var(--surface-2); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.gemeld { color: var(--faint); }

/* ======================================================================================================
   SHOT DIRECTOR (app.js): body.shot-two | shot-close | shot-map | shot-card | shot-wide, cut every 10-16 s.
   Desktop: the stage is the area left of the timeline, under the header, above the results strip.
   ====================================================================================================== */
:root { --stage-t: 92px; --stage-r: 404px; --stage-b: calc(124px + var(--nlh)); }
body.record { --stage-b: 124px; }
#shotveil { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease-out;
  background: radial-gradient(ellipse 70% 80% at 36% 48%, rgba(13, 15, 20, .78), rgba(6, 7, 10, .95)); }
body.shot-close #shotveil, body.shot-two #shotveil, body.shot-card #shotveil { opacity: 1; }
#shotfade { position: fixed; left: 0; top: var(--stage-t); right: var(--stage-r); bottom: var(--stage-b); z-index: 7;
  pointer-events: none; background: #06070a; opacity: 0; }
#shotfade.go { animation: shotdip .32s ease-out; }
@keyframes shotdip { 0% { opacity: .6; } 100% { opacity: 0; } }
/* anchors: close-up / two-shot = the 3D canvas fills the stage; map / card = no desk in the picture */
body.shot-close #host #anchors3d, body.shot-two #host #anchors3d, body.shot-map #host #anchors3d, body.shot-card #host #anchors3d {
  flex: 0 0 0; width: 0; min-width: 0; max-width: 0; margin: 0; transform: none; will-change: auto; overflow: visible; transition: none; }
body.shot-close #host #anchors3d canvas, body.shot-two #host #anchors3d canvas {
  position: fixed; left: 0; top: var(--stage-t); width: calc(100vw - var(--stage-r)) !important;
  height: calc(100vh - var(--stage-t) - var(--stage-b)) !important;
  background: radial-gradient(ellipse 46% 62% at 50% 40%, rgba(58, 66, 84, .5), rgba(10, 11, 15, 0) 72%); }
body.shot-close[data-shot] #host, body.shot-two #host, body.shot-card #host { bottom: calc(132px + var(--nlh)) !important; }
body.shot-close #host .bubble, body.shot-two #host .bubble { margin-left: 0; max-width: 980px; }
/* whatever the map shot carries goes while the picture is on a face or a full graphic */
body.shot-close :is(#card, #analysis, #deepdive, #boardview, #breaking, #infoline, #tease),
body.shot-two :is(#card, #analysis, #deepdive, #boardview, #breaking, #infoline, #tease),
body.shot-card :is(#card, #analysis, #deepdive, #breaking, #infoline, #tease),
body.shot-wide #card { opacity: 0 !important; visibility: hidden; transition: none !important; }
/* the full-screen graphic */
#shotcard { position: fixed; z-index: 6; left: 40px; right: calc(var(--stage-r) + 24px); top: calc(var(--stage-t) + 28px); bottom: calc(290px + var(--nlh));
  display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 34px 44px; overflow: hidden;
  background: linear-gradient(160deg, rgba(24, 27, 35, .96), rgba(13, 14, 19, .97)); border-radius: var(--r-lg, 18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px var(--line, rgba(255, 255, 255, .08)); border-top: 3px solid var(--accent); }
#shotcard.hidden { display: none; }
#shotcard .sc-kick { font-size: 15px; font-weight: 800; letter-spacing: .09em; color: var(--accent); text-transform: uppercase; }
#shotcard .sc-kick span { color: var(--dim); font-weight: 600; letter-spacing: .04em; margin-left: 10px; }
#shotcard .sc-status { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2, #cfd3da); }
#shotcard .sc-status.st-called { color: #2fbf71; }
#shotcard .sc-status.st-too_close { color: var(--amber, #f5b942); }
#shotcard .sc-cands { display: grid; gap: 16px; }
#shotcard .sc-cand { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 20px; opacity: .78; }
#shotcard .sc-cand.win { opacity: 1; }
#shotcard .sc-nm { font-size: 30px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; min-width: 0; }
#shotcard .sc-nm i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
#shotcard .sc-nm small { font-size: 14px; font-weight: 600; color: var(--dim); }
#shotcard .sc-cand.win .sc-nm::after { content: "✓"; color: #2fbf71; font-size: 26px; }
#shotcard .sc-pct { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
#shotcard .sc-bar { grid-column: 1 / -1; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
#shotcard .sc-bar b { display: block; height: 100%; border-radius: 6px; }
#shotcard .sc-fact { font-size: 34px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; max-width: 30ch; }
#shotcard .sc-list { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 12px; font-size: 22px; line-height: 1.3; font-weight: 500; }
#shotcard .sc-list li::marker { color: var(--accent); font-weight: 800; }
#shotcard .sc-src { font-size: 13px; color: var(--dim); }
#shotcard .sc-src a { color: inherit; }
#shotcard .sc-bodies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#shotcard .sc-body { padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .04); min-width: 0; container-type: inline-size; }
#shotcard .sc-bn { font-size: 15px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
/* the numbers scale with their box (cqi): "233 – 144" at a fixed size overflowed into the next body (the House R ran
   over the governors' D in the Kaart inset, reading as "148") */
#shotcard .sc-bnums { display: flex; gap: .18em; white-space: nowrap; font-size: 56px; font-size: min(56px, 20cqi); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
#shotcard .sc-bnums .d { color: var(--d-ink, #6ea3ff); }
#shotcard .sc-bnums .r { color: var(--r-ink, #ff6b7a); }
#shotcard .sc-bnums .dash { color: var(--faint, #555b66); font-weight: 500; }
#shotcard .sc-bf { font-size: 13px; color: var(--dim); margin-top: 4px; }
body.shot-card #shotcard:not(.hidden) { animation: scin .3s ease-out; }
@keyframes scin { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  #shotveil { transition: none; }
  body.shot-card #shotcard:not(.hidden) { animation: none; }
}
/* phone (portrait): every shot happens in the map band; the subtitle stays under it */
@media (orientation: portrait) and (max-width: 900px) {
  #shotveil { display: none; }
  #shotfade { position: absolute; left: 0; right: 0; top: var(--hdr); bottom: auto; height: var(--map-h); z-index: 6; }
  body.shot-close #host #anchors3d, body.shot-two #host #anchors3d, body.shot-map #host #anchors3d, body.shot-card #host #anchors3d {
    flex: 0 0 144px; width: 144px; min-width: 144px; max-width: 144px; position: relative; }
  body.shot-close #host #anchors3d canvas, body.shot-two #host #anchors3d canvas {
    position: absolute; left: calc(-1 * var(--gl)); top: calc(80px - var(--map-h)); width: 100vw !important; height: var(--map-h) !important;
    background: radial-gradient(ellipse 60% 70% at 50% 42%, #2a303d, #0b0c10 78%); }
  body.shot-close[data-shot] #host, body.shot-two #host, body.shot-card #host { bottom: auto !important; }
  #shotcard { position: absolute; left: 0; right: 0; top: var(--hdr); bottom: auto; height: var(--map-h); z-index: 5;
    padding: 16px var(--gr) 18px var(--gl); gap: 10px; border-radius: 0; box-shadow: none; }
  #shotcard .sc-kick { font-size: 12px; }
  #shotcard .sc-kick span { display: block; margin: 2px 0 0; }
  #shotcard .sc-status { font-size: 12px; }
  #shotcard .sc-cands { gap: 8px; }
  #shotcard .sc-nm { font-size: 18px; gap: 8px; }
  #shotcard .sc-nm small { display: none; }
  #shotcard .sc-pct { font-size: 28px; }
  #shotcard .sc-bar { height: 7px; }
  #shotcard .sc-fact { font-size: 21px; }
  #shotcard .sc-list { font-size: 15px; gap: 6px; }
  #shotcard .sc-list li:nth-child(n+4) { display: none; }
  #shotcard .sc-bodies { gap: 8px; }
  #shotcard .sc-body { padding: 10px; }
  #shotcard .sc-bn { font-size: 11px; }
  #shotcard .sc-bnums { font-size: 28px; font-size: min(28px, 20cqi); gap: .18em; }
  #shotcard .sc-bf { font-size: 11px; }
}

/* ======================================================================================================
   ONE TV (app.js tvSet): Regie = the shot director's picture fills the stage; Kaart (body.tv-small) = the map is
   the viewer's and the same shots play in an inset TV bottom-left (the desk box; a graphic takes its place).
   ====================================================================================================== */
#tvsw { position: fixed; right: 358px; top: 100px; z-index: 9; display: flex; gap: 2px; height: 34px; padding: 3px;
  border-radius: var(--r-pill); background: rgba(16, 17, 22, .85); box-shadow: 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#tvsw button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--ink-2);
  padding: 0 13px; border-radius: var(--r-pill); cursor: pointer; transition: background .2s, color .2s; }
#tvsw button:hover { color: var(--ink); }
#tvsw button.on { background: var(--ink); color: var(--bg); }
#tvchip { position: fixed; top: 100px; left: calc((100vw - var(--stage-r)) / 2); transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 3px 3px 3px 15px; border-radius: var(--r-pill);
  background: rgba(16, 17, 22, .9); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(198, 242, 94, .45), 0 10px 30px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#tvchip button { font: inherit; font-size: 13px; font-weight: 700; height: 100%; padding: 0 14px; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); }
#tvchip.hidden { display: none; }
body.browse #tvchip, body.record #tvsw, body.record #tvchip { display: none; }
/* the inset TV: the desk box with a screen behind the figures; a click makes it big */
body.tv-small #host #anchors3d canvas { border-radius: 22px; cursor: zoom-in;
  background: radial-gradient(ellipse 60% 70% at 50% 42%, #2a303d, #0b0c10 78%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .6); }
/* a graphic in the inset: the full-size card, scaled into the desk box (360 x 202) */
body.tv-small.tv-card #shotcard { left: 32px; right: auto; top: auto; bottom: var(--host-b, calc(132px + var(--nlh))); width: 900px; height: 506px;
  transform: scale(.4); transform-origin: 0 100%; cursor: zoom-in; padding: 40px 54px; border-radius: 34px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .6); }
/* at 40% the small print must still read: the inset sets its own type (x0.4 on screen) */
body.tv-small.tv-card #shotcard .sc-kick { font-size: 30px; }
body.tv-small.tv-card #shotcard .sc-kick span { display: block; margin: 4px 0 0; }
body.tv-small.tv-card #shotcard .sc-status, body.tv-small.tv-card #shotcard .sc-src { font-size: 26px; }
body.tv-small.tv-card #shotcard .sc-nm { font-size: 40px; }
body.tv-small.tv-card #shotcard .sc-nm small { display: none; }
body.tv-small.tv-card #shotcard .sc-pct { font-size: 64px; }
body.tv-small.tv-card #shotcard .sc-bar { height: 16px; }
body.tv-small.tv-card #shotcard .sc-fact { font-size: 46px; max-width: none; }
body.tv-small.tv-card #shotcard .sc-list { font-size: 34px; }
body.tv-small.tv-card #shotcard .sc-list li:nth-child(n+4) { display: none; }
body.tv-small.tv-card #shotcard .sc-bn, body.tv-small.tv-card #shotcard .sc-bf { font-size: 24px; }
body.tv-small.tv-card #shotcard .sc-bnums { font-size: 72px; font-size: min(72px, 20cqi); }
/* nothing goes full screen over the viewer's map */
body.tv-small :is(#bigmoment, #boardview, #briefing.onair) { visibility: hidden !important; opacity: 0 !important; }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* the map band's bottom-right corner (a breaking sheet takes its top; the desk stands bottom-left) */
  #tvsw { position: absolute; z-index: 7; top: calc(var(--hdr) + var(--map-h) - 52px); right: var(--gr); height: 44px; padding: 0; }
  #tvsw button { min-width: 64px; height: 44px; padding: 0 12px; font-size: 13px; }
  #tvchip { position: absolute; left: auto; right: var(--gr); transform: none; top: calc(var(--hdr) + var(--map-h) - 104px); height: 44px;
    padding: 0 0 0 13px; font-size: 12px; z-index: 7; }
  #tvchip button { padding: 0 12px; }
  body.tv-small #host #anchors3d canvas { border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16); }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  #tvsw { position: fixed; top: calc(var(--hdr) + 8px); right: calc(var(--side) + 8px); }
  #tvchip { position: fixed; top: calc(var(--hdr) + 60px); right: calc(var(--side) + 8px); }
}

/* header balance foot: one line that never runs over the body chips (app.js fitBalFoot shortens, then drops key/flips) */
#balance .bal-foot { min-width: 0; overflow: hidden; }
#balance #bal-open { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#balance .bal-foot .fit-off { display: none; }
/* desktop ≤1500: the brand never shrinks under its own nav (it ran into the balance); a tighter nav pays for it */
@media (min-width: 951px) and (max-width: 1500px) {
  #top .brand { flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  #top .brand .sitenav { grid-column: 1 / -1; }
  .sitenav a { padding: 5px 8px; font-size: 12.5px; }
}
@media (min-width: 951px) and (max-width: 1380px) {
  #top { gap: 14px; }
  #top .right { gap: 10px; }
  .sitenav a { padding: 5px 7px; }
  #bf-open { padding: 6px 10px; font-size: 12px; }
  .bal-label .mid { font-size: 10.5px; }
  .bal-label b { font-size: 22px; }
}
/* a tie on the strip shows vote counts: smaller than a percentage, and on the narrow phone row smaller still */
.lt-c .pc.v { font-size: 17px; }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .lt-c .pc.v { font-size: 11px; letter-spacing: -.03em; }
}

/* ======================================================================================================
   THE NIGHT AS A TIME BAR (#nightline, app.js NL): the main control of the page, like a video player's seek bar —
   play/pause, chapters, -/+30 s, the time, the whole night with hour ticks, chapter marks by type, activity per
   10 min and our own House count (D/R) as a thin line, a hover card; speed on the right.
   Desktop: a full-width strip under the ticker (everything bottom-anchored sits --nlh higher).
   Phone: the top row of the docked bar above the ticker.
   ====================================================================================================== */
:root { --nlh: 52px; }
body.record { --nlh: 0px; }
#nightline { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nlh); z-index: 9; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: rgba(10, 11, 14, .97); border-top: 1px solid var(--line-strong); color: var(--ink); font-size: 12px;
  user-select: none; -webkit-user-select: none; }
body.record #nightline { display: none; }
.nl-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.nl-btn { height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; }
.nl-btn:hover, .nl-btn:focus-visible { background: var(--surface-3); }
.nl-btn.nl-txt { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2, #cfd3da); }
.nl-play { min-width: 42px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 15px; }
.nl-play:hover, .nl-play:focus-visible { background: var(--accent); filter: brightness(1.1); }
.nl-time { flex: none; min-width: 64px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.nl-state { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--dim); min-width: 74px; text-align: right; }
body.replay .nl-state { color: var(--amber); }
.nl-speed { flex: none; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#nightline .nl-ix { flex: none; width: 26px; height: 26px; }
.nl-bar { position: relative; flex: 1 1 auto; min-width: 120px; height: 40px; cursor: pointer; touch-action: none; outline: none; }
.nl-bar:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
.nl-spark { position: absolute; left: 0; right: 0; top: 2px; height: 22px; width: 100%; overflow: visible; pointer-events: none; }
.nl-dens rect { fill: rgba(255, 255, 255, .11); }
.nl-maj { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.nl-hd, .nl-hr { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nl-hd { stroke: #6ea3ff; } .nl-hr { stroke: #ff6b7a; }
.nl-track { position: absolute; left: 0; right: 0; top: 26px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.nl-done { height: 100%; width: 0; background: var(--accent); opacity: .85; }
.nl-bar:hover .nl-track { height: 7px; top: 25px; }
.nl-hours i { position: absolute; top: 24px; width: 1px; height: 9px; background: rgba(255, 255, 255, .28); pointer-events: none; }
.nl-hours i[data-l]::after { content: attr(data-l); position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600;
  color: var(--faint, #6b7280); font-variant-numeric: tabular-nums; }
.nl-marks i { position: absolute; top: 22px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; pointer-events: none; }
.nl-marks .m-breaking { background: #ff3b4e; height: 9px; top: 24px; opacity: .8; }
.nl-marks .m-call { background: #9aa1ad; }
.nl-marks .m-call.p-D { background: #3b82f6; } .nl-marks .m-call.p-R { background: #ef4458; }
.nl-marks .m-flip { background: var(--amber, #f5b942); height: 15px; top: 21px; }
.nl-marks .m-corr { background: #c084fc; height: 15px; top: 21px; }
.nl-marks .m-major { background: #fff; width: 4px; margin-left: -2px; height: 19px; top: 19px; box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
.nl-head { position: absolute; top: 18px; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); pointer-events: none; }
.nl-tip { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 320px; padding: 8px 11px;
  border-radius: 10px; background: rgba(16, 17, 22, .97); box-shadow: var(--shadow), 0 0 0 1px var(--line-strong); font-size: 12px; line-height: 1.35;
  pointer-events: none; z-index: 2; }
.nl-tip.hidden { display: none; }
.nl-tip b { font-size: 13px; font-variant-numeric: tabular-nums; }
.nl-tip .nt-c { margin-top: 3px; color: var(--ink); }
.nl-tip .nt-c span { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; background: var(--surface-3); color: var(--ink); }
.nl-tip .nt-breaking { background: #ff3b4e !important; color: #fff !important; }
.nl-tip .nt-flip { background: var(--amber, #f5b942) !important; color: #111 !important; }
.nl-tip .nt-corr { background: #c084fc !important; color: #111 !important; }
.nl-tip .nt-major { background: #fff !important; color: #111 !important; }
.nl-tip .nt-none { color: var(--dim); }
.nl-tip .nt-h { margin-top: 4px; color: var(--dim); font-size: 11px; }
.nl-tip .nt-h .d { color: #6ea3ff; font-style: normal; font-weight: 700; } .nl-tip .nt-h .r { color: #ff6b7a; font-style: normal; font-weight: 700; }
@media (max-width: 1300px) { .nl-wide { display: none; } .nl-state { display: none; } }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  #nightline { bottom: calc(var(--tick-h) + 56px); height: 50px; padding: 0 var(--gr) 0 var(--gl); gap: 6px; border-top: 1px solid var(--line);
    background: var(--bg); }
  .nl-btns .nl-btn:not(.nl-play) { display: none; }   /* chapters: tap a mark on the bar */
  .nl-hours i[data-l]::after { font-size: 8px; }
  body.replay #replaybadge { display: none; }   /* the bar says HERHALING; the long badge ran off a phone screen */
  .nl-play { width: 44px; height: 44px; }
  .nl-time { min-width: 52px; font-size: 13px; }
  .nl-state, #nightline .nl-ix { display: none; }
  .nl-speed { height: 36px; }
  .nl-bar { height: 44px; }
  .nl-tip { max-width: 70vw; }
}
.nl-endbtn { flex: none; border: 1px solid var(--line-strong); height: 30px; }
/* static export: muted autoplay — the one sound control, over the stage, never a modal */
#soundpill { position: fixed; z-index: 12; left: calc((100vw - var(--stage-r)) / 2); top: 150px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 0 6px rgba(198, 242, 94, .18); animation: sp-breathe 2.4s ease-in-out infinite; }
#soundpill:hover { filter: brightness(1.08); }
#soundpill.hidden { display: none; }
body.record #soundpill { display: none !important; }
@keyframes sp-breathe { 50% { box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 0 12px rgba(198, 242, 94, .08); } }
@media (prefers-reduced-motion: reduce) { #soundpill { animation: none; } }
@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  #soundpill { position: fixed; left: 50%; top: calc(var(--hdr) + 12px); font-size: 15px; padding: 11px 20px; }
  .nl-endbtn { display: none; }
}