:root {
  --bg: #0e1116; --panel: #171c24; --panel2: #1f2630; --text: #e8ecf1; --muted: #8b95a5; --line: #2b3441;
  --accent: #4da3ff; --aria: #a78bfa; --good: #34d399; --watch: #fbbf24; --bad: #f87171; --info: #60a5fa; --human: #fb923c;
  --ev0: #8b95a5; --ev1: #60a5fa; --ev2: #fbbf24; --ev3: #34d399;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .4em; }

/* shared components */
.c { margin: 0 0 1em; }
.c-h { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .8em; }
.subtitle { color: var(--muted); }
.line { display: flex; gap: .6em; padding: .35em 0; }
.speaker { flex: none; min-width: 4.5em; font-weight: 700; font-size: .75em; letter-spacing: .06em; padding-top: .3em; color: var(--muted); }
.sp-aria .speaker, .sp-aria .say { color: var(--aria); }
.sp-aria .say { background: color-mix(in srgb, var(--aria) 12%, transparent); padding: .1em .4em; border-radius: 6px; }
.sp-mod .speaker { color: var(--accent); }
.c-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .6em; }
.kpi { background: var(--panel); border-radius: 10px; padding: .7em .9em; border-top: 4px solid var(--muted); }
.kpi-label { color: var(--muted); font-size: .8em; } .kpi-value { font-size: 1.8em; font-weight: 700; } .kpi-delta { font-size: .8em; color: var(--muted); }
.band-good { border-top-color: var(--good); } .band-watch { border-top-color: var(--watch); } .band-bad { border-top-color: var(--bad); } .band-info { border-top-color: var(--info); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: .6em; }
/* a story in steps: read left to right, arrows between (stacked on a phone) */
.cards.flow { display: flex; align-items: stretch; gap: .5em; } .cards.flow .card { flex: 1 1 0; min-width: 0; }
.flow-arrow { align-self: center; flex: none; font-size: 1.5em; font-weight: 800; color: var(--muted); }
@media (max-width: 600px) { .cards.flow { flex-direction: column; } .flow-arrow { transform: rotate(90deg); } }
/* one line per agent: side by side, three to a row at most */
.agent-list.roster { display: grid; gap: .6em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); } .agent-list.roster .agent { margin: 0; }
.stage-view .agent-list.roster.n5, .stage-view .agent-list.roster.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-view .cols .agent-list.roster { grid-template-columns: 1fr; }
.card { background: var(--panel); border-radius: 10px; padding: .7em .9em; border-left: 5px solid var(--muted); }
.card.tone-good { border-left-color: var(--good); } .card.tone-watch { border-left-color: var(--watch); } .card.tone-bad { border-left-color: var(--bad); }
.card.tone-agent { border-left-color: var(--aria); } .card.tone-human { border-left-color: var(--human); } .card.tone-info { border-left-color: var(--info); }
.card-title { font-weight: 700; } .card-body { color: var(--muted); font-size: .9em; }
.tag, .badge { display: inline-block; font-size: .7em; padding: .1em .55em; border-radius: 99px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); margin-left: .4em; vertical-align: middle; }
.badge.red { background: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--bad); border-color: var(--bad); }
.badge.ok { color: var(--good); border-color: var(--good); } .badge.warn { color: var(--watch); border-color: var(--watch); } .badge.live { color: var(--accent); border-color: var(--accent); }
.mode-serbest, .mode-sinirli { color: var(--aria); border-color: var(--aria); } .mode-sablon { color: var(--watch); border-color: var(--watch); }
.agent { background: var(--panel); border-radius: 10px; padding: .7em .9em; margin-bottom: .5em; border-left: 5px solid var(--agent-color, var(--aria)); }
.agent-name { font-weight: 700; color: var(--agent-color, var(--aria)); } .agent-status { margin-left: .6em; color: var(--muted); font-size: .85em; }
.agent-text { margin-top: .25em; }
.agent.thinking .agent-text { color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.record { background: var(--panel); border-radius: 10px; padding: .6em .9em; margin-bottom: .5em; }
.record-title { font-weight: 700; margin-right: .5em; } .record-body { color: var(--muted); font-size: .9em; } .record-owner { font-size: .8em; color: var(--muted); }
.pill { display: inline-block; padding: .05em .6em; border-radius: 99px; font-size: .75em; font-weight: 700; color: #0e1116; }
.ev-0 { background: var(--ev0); } .ev-1 { background: var(--ev1); } .ev-2 { background: var(--ev2); } .ev-3 { background: var(--ev3); }
.ladder { background: var(--panel); border-radius: 10px; padding: .6em .9em; margin-bottom: .5em; border: 2px solid transparent; }
.ladder.exceeded { border-color: var(--bad); }
.ladder-label { margin-bottom: .4em; } .ladder-title { font-weight: 700; } .ladder-owner { color: var(--muted); font-size: .8em; margin-left: .6em; }
.ladder-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.lcell { text-align: center; padding: .35em 0; border-radius: 6px; background: var(--panel2); color: var(--muted); font-size: .8em; font-weight: 700; border: 2px solid transparent; }
.lcell.on { background: var(--accent); color: #0e1116; } .ladder.exceeded .lcell.on { background: var(--bad); }
.lcell.ceiling { border-color: var(--text); }
.chain .step { display: flex; gap: .6em; align-items: baseline; padding: .35em 0; border-bottom: 1px solid var(--line); }
.step-mark { font-weight: 700; width: 1.2em; } .step.ok .step-mark { color: var(--good); } .step.fail .step-mark { color: var(--bad); } .step.pending { opacity: .6; }
.step-label { font-weight: 700; } .step-text { color: var(--muted); }
.tally-row { margin-bottom: .7em; } .tally-label { font-weight: 700; color: var(--row-color, var(--text)); }
.tally-part { position: relative; display: flex; justify-content: space-between; padding: .25em .6em; background: var(--panel); border-radius: 6px; margin-top: 3px; overflow: hidden; }
.tally-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--row-color, var(--accent)) 35%, transparent); }
.tally-part > span { position: relative; } .tally-part.win { outline: 2px solid var(--good); } .tally-note { font-size: .8em; color: var(--muted); }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1em; } .countdown.urgent { color: var(--bad); }
.prog-row { display: flex; align-items: center; gap: .6em; margin: .3em 0; }
.prog-label { flex: 0 0 8em; } .prog-num { flex: none; min-width: 4em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.prog-bar { flex: 1; height: .9em; background: var(--panel2); border-radius: 99px; overflow: hidden; } .prog-fill { height: 100%; transition: width .4s; background: var(--accent); }
.synthetic { color: var(--muted); font-size: .8em; }
.banner { border-radius: 12px; padding: .8em 1em; color: #0e1116; } .banner-label { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: block; }
.banner-title { font-size: 1.6em; font-weight: 800; }
.cls-green { background: var(--good); } .cls-amber { background: var(--watch); } .cls-red { background: var(--bad); } .cls-pending { background: var(--muted); }
.banner.small { display: flex; gap: .8em; align-items: baseline; } .banner.small .banner-title { font-size: 1em; font-weight: 600; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; } .compare .col { background: var(--panel); border-radius: 10px; padding: .7em .9em; } .compare ul { margin: 0; padding-left: 1.1em; }
.c-qr { text-align: center; } .qr-img { width: min(70vw, 22em); background: #fff; padding: .6em; border-radius: 12px; } .qr-caption { font-size: 1.2em; margin-top: .4em; } .qr-url { color: var(--muted); font-size: .8em; }
.note { background: var(--panel); border-left: 4px solid var(--muted); padding: .6em .9em; border-radius: 8px; }
.note.tone-good { border-left-color: var(--good); } .note.tone-watch { border-left-color: var(--watch); } .note.tone-bad { border-left-color: var(--bad); } .note.tone-agent { border-left-color: var(--aria); }
.c-big { text-align: center; padding: 1em 0; } .big-text { font-size: 3em; font-weight: 800; line-height: 1.1; } .big-sub { color: var(--muted); font-size: 1.1em; margin-top: .3em; }

/* ---------- phone: the company's own app, near-future. A lamp layer (moods, see Mood in types.ts) glows behind
   dark glass panels, so the hall's 500 screens light the room without the text ever losing contrast. ---------- */
body.phone { --dept: #4da3ff; --lamp: var(--dept); --glow: .1; --fill: 0; --bg: #04060a; --glass: rgba(10, 14, 20, .72); --glass2: rgba(255, 255, 255, .05);
  --text: #eef2f7; --muted: #95a1b3; --line: rgba(255, 255, 255, .1); --accent: var(--dept); --hud: ui-monospace, 'SF Mono', Menlo, monospace;
  min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
body.phone > #app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* a decision takes the top of the screen; what the phone showed before waits underneath */
body.phone .p-head { order: -2; } body.phone.has-ballot .p-ballot { order: -1; } body.phone .p-dock { margin-top: auto; }
.p-lamp { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--lamp); opacity: var(--fill); transition: opacity .5s ease, background-color .8s ease; }
.p-lamp::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(60% 45% at 50% 0%, var(--lamp), transparent 70%), radial-gradient(70% 40% at 50% 105%, var(--lamp), transparent 70%); opacity: calc(var(--glow) / max(var(--fill), .15)); }
.p-gridbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); }
/* the aura: light at the screen's edges, so the phone lights the hall while the middle stays dark enough to read */
.p-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 calc(30px + 70px * var(--glow)) calc(6px + 26px * var(--glow)) var(--lamp); opacity: calc(var(--aura, .55) * var(--glow)); transition: opacity .5s ease; }
.p-aura.ripple { animation: ripple-a 1.3s var(--wave, 0ms) ease-out both; }
@keyframes ripple-a { 0% { opacity: calc(var(--aura, .55) * var(--glow)); } 18% { opacity: 1; box-shadow: inset 0 0 90px 30px var(--dept); } 100% { opacity: calc(var(--aura, .55) * var(--glow)); } }
body.phone.urgent .p-aura { --lamp: #ff3b3b; animation: urgent 1s ease-in-out infinite; } @keyframes urgent { 50% { opacity: .25; } }
/* the show's progress: a segment per scene under the header */
.p-prog { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; gap: 2px; padding: 0 1em; height: 3px; }
.p-prog i { flex: 1; background: rgba(255,255,255,.1); border-radius: 1px; } .p-prog i.past { background: color-mix(in srgb, var(--dept) 55%, transparent); } .p-prog i.now { background: var(--dept); box-shadow: 0 0 8px var(--dept); }
/* a new scene arrives like a transmission: each panel scans in, one after the other */
.p-comps.incoming > * { animation: scanin .55s calc(var(--i, 0) * 90ms) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes scanin { 0% { opacity: 0; transform: translateY(.6em); clip-path: inset(0 0 100% 0); } 60% { opacity: 1; } 100% { transform: none; clip-path: inset(0 0 0 0); } }
.p-comps.printed > .c-badge { animation: print .9s cubic-bezier(.2, .8, .2, 1) both; } @keyframes print { from { opacity: 0; transform: translateY(1.6em) scale(.96); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* static moods: colour and strength of the lamp; moving moods are driven from phone.ts on the server clock */
body.phone[data-mood="dark"] { --glow: .12; --fill: 0; }
body.phone[data-mood="dept"] .p-lamp { animation: breathe 5s ease-in-out infinite; } body.phone[data-mood="dept"] { --glow: .7; --fill: .16; }
body.phone[data-mood="bright"] { --glow: 1; --fill: .1; --aura: 1; --glass: rgba(5, 8, 13, .86); }
body.phone[data-mood="bright"][data-tint="amber"] { --lamp: #ffae1a; } body.phone[data-mood="bright"][data-tint="alert"] { --lamp: #ff3b3b; }
body.phone[data-mood="bright"][data-tint="calm"] { --lamp: #1fe0a0; } body.phone[data-mood="bright"][data-tint="warm"] { --lamp: #ffd39a; }
body.phone[data-mood="alert"] { --lamp: #ff2d2d; --glow: .85; --fill: .34; } body.phone[data-mood="calm"] { --lamp: #19d98f; --glow: .75; --fill: .28; }
body.phone[data-mood="amber"] { --lamp: #ffa514; --glow: .8; --fill: .3; } body.phone[data-mood="warm"] { --lamp: #ffd29a; --glow: .6; --fill: .2; }
@keyframes breathe { 50% { filter: brightness(.6); } }
/* header: a HUD strip */
.p-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .55em; padding: calc(.6em + env(safe-area-inset-top)) 1em .6em; background: linear-gradient(rgba(4,6,10,.92), rgba(4,6,10,.6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); font-family: var(--hud); }
.p-brand { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; letter-spacing: .22em; font-size: .72em; } .p-brand-mark { color: var(--dept); text-shadow: 0 0 10px var(--dept); }
.p-chip { display: inline-flex; align-items: center; gap: .4em; padding: .22em .65em; border-radius: 4px; background: color-mix(in srgb, var(--dept) 18%, transparent); border: 1px solid color-mix(in srgb, var(--dept) 55%, transparent); font-size: .74em; font-weight: 700; letter-spacing: .04em; }
.p-dot { width: .5em; height: .5em; border-radius: 50%; background: var(--dept); box-shadow: 0 0 8px var(--dept); }
.p-id { margin-left: auto; font-size: .74em; color: var(--muted); letter-spacing: .08em; } .p-badge { font-size: .64em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .1em .5em; }
.p-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: .9em; } .p-signal i { width: 3px; background: var(--good); border-radius: 1px; } .p-signal i:nth-child(1) { height: 30%; } .p-signal i:nth-child(2) { height: 55%; } .p-signal i:nth-child(3) { height: 80%; } .p-signal i:nth-child(4) { height: 100%; }
.p-signal.off i { background: var(--bad); animation: pulse 1s infinite; }
.p-comps, .p-ballot { position: relative; padding: 1em 1.05em; width: 100%; max-width: 34em; margin: 0 auto; }
/* panels: dark glass with corner brackets; headings are HUD labels */
body.phone .c-h { font: 700 .68em var(--hud); letter-spacing: .2em; color: color-mix(in srgb, var(--dept) 70%, #fff); text-transform: uppercase; }
body.phone .c-h::before { content: '// '; opacity: .6; }
body.phone .card, body.phone .agent, body.phone .record, body.phone .kpi, body.phone .note, body.phone .step, body.phone .ladder { position: relative; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 6px; }
body.phone .card::before, body.phone .agent::before, body.phone .note::before { content: ''; position: absolute; inset: -1px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(var(--dept), var(--dept)) top left / 12px 2px, linear-gradient(var(--dept), var(--dept)) top left / 2px 12px, linear-gradient(var(--dept), var(--dept)) bottom right / 12px 2px, linear-gradient(var(--dept), var(--dept)) bottom right / 2px 12px; background-repeat: no-repeat; opacity: .8; }
body.phone .card-title { font-weight: 750; } body.phone .card-body, body.phone .record-body { color: #c7d0dc; }
body.phone .p-comps .c-title h1 { font-size: 1.5em; line-height: 1.15; letter-spacing: -.01em; }
body.phone .sp-aria .say { background: color-mix(in srgb, var(--aria) 18%, transparent); border-left: 2px solid var(--aria); border-radius: 2px; padding: .2em .5em; }
/* a panel whose work is done folds into one HUD line (phone.ts fold); tap opens it again */
body.phone .p-comps > .folded { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 .1em; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.phone .p-comps > .folded::before, body.phone .p-comps > .folded::after { display: none; }
body.phone .p-comps > .folded > :not(.fold-l) { display: none; }
.fold-l { display: flex; align-items: center; gap: .6em; width: 100%; padding: .55em .15em; background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--dept) 28%, transparent); color: #9aa6b4; font: 600 .72em var(--hud); letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: pointer; }
.fold-k { color: var(--dept); text-shadow: 0 0 8px var(--dept); } .fold-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fold-x { color: var(--dept); font-size: 1.3em; line-height: 1; }
.has-ballot:not(.sealed) .p-comps { display: none; } .has-ballot.sealed .p-comps { opacity: .6; }
/* the badge: a holographic employee card */
.c-badge { margin-bottom: 1.1em; }
.badge-card { position: relative; overflow: hidden; border-radius: 14px; padding: 1em 1.1em .9em; background: linear-gradient(150deg, color-mix(in srgb, var(--badge) 30%, #0b0f16), #0a0d13 60%); border: 1px solid color-mix(in srgb, var(--badge) 60%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 14px 40px color-mix(in srgb, var(--badge) 30%, transparent); }
.badge-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 60%); transform: translateX(-100%); animation: holo 5.5s ease-in-out infinite; }
@keyframes holo { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.badge-top { display: flex; justify-content: space-between; align-items: center; font: 800 .7em var(--hud); letter-spacing: .24em; }
.badge-org::before { content: '◆ '; color: var(--badge); } .badge-chip { padding: .15em .5em; border: 1px solid color-mix(in srgb, var(--badge) 60%, transparent); border-radius: 3px; color: var(--badge); font-size: .9em; }
.badge-mid { display: flex; align-items: center; gap: .9em; margin: .9em 0 .6em; }
.badge-icon { width: 2.6em; height: 2.6em; display: grid; place-items: center; font-size: 1.5em; background: color-mix(in srgb, var(--badge) 22%, transparent); border: 1px solid var(--badge); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.badge-dept { font-size: 1.55em; font-weight: 800; line-height: 1.05; } .badge-id { font: 700 1em var(--hud); letter-spacing: .14em; color: var(--muted); margin-top: .15em; }
.badge-role { font-size: .92em; color: #c7d0dc; line-height: 1.35; }
.badge-strip { height: 16px; margin-top: .8em; opacity: .55; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px); -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.badge-rec { margin-top: .8em; border-top: 1px solid color-mix(in srgb, var(--badge) 35%, transparent); padding-top: .5em; position: relative; z-index: 1; }
.badge-rec-t { font: 800 .66em var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--badge); margin-bottom: .3em; }
.badge-row { display: grid; grid-template-columns: 7.6em 1fr; gap: .6em; padding: .32em 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: .86em; }
.badge-row-l { font: 700 .74em var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .2em; } .badge-row-v { line-height: 1.28; }
.badge-stamp { position: absolute; right: .9em; bottom: 1.5em; z-index: 2; font: 900 .9em var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--badge); border: 2px solid var(--badge); border-radius: 6px; padding: .2em .5em; transform: rotate(-8deg); opacity: .9; text-shadow: 0 0 10px var(--badge); }
.badge-note { margin-top: .8em; color: var(--muted); font-size: .9em; line-height: 1.4; }
/* hiring: the first time a phone joins */
.p-hire { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--dept) 25%, #04060a), #04060a 70%); }
.p-hire.on { display: grid; } .p-hire.out { animation: hireout .8s ease forwards; }
@keyframes hireout { to { opacity: 0; transform: scale(1.04); } }
.hire-box { width: min(86vw, 22em); font-family: var(--hud); }
.hire-org { font-size: .72em; letter-spacing: .24em; color: var(--dept); margin-bottom: 1.4em; }
.hire-step { opacity: 0; font-size: .9em; padding: .35em 0; border-bottom: 1px solid var(--line); animation: hirestep .4s ease forwards; }
.hire-step::before { content: '▸ '; color: var(--dept); } .hire-step::after { content: ' ✓'; color: var(--good); }
@keyframes hirestep { from { opacity: 0; transform: translateX(-.6em); } to { opacity: 1; transform: none; } }
.hire-stamp { opacity: 0; margin-top: 1.4em; text-align: center; font: 900 2.1em system-ui, sans-serif; letter-spacing: .06em; color: var(--dept); text-shadow: 0 0 24px var(--dept); border: 3px solid var(--dept); border-radius: 8px; padding: .25em 0; animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-8deg); } to { opacity: 1; transform: rotate(-3deg); } }
/* the decision moment: announced, one question at a time, a review, a seal held with the thumb, a receipt */
.p-intro { position: fixed; inset: 0; z-index: 22; display: none; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--dept) 55%, #04060a), #04060a 75%); }
.p-intro.on { display: grid; animation: introin .25s ease-out both; }
@keyframes introin { from { opacity: 0; } }
.intro-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px); }
.intro-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, var(--dept) 45%, transparent), transparent); animation: sweep 1.4s ease-in-out both; }
@keyframes sweep { from { top: -30%; } to { top: 100%; } }
.intro-box { position: relative; text-align: center; padding: 0 1.4em; font-family: var(--hud); }
.intro-k { font-size: .72em; letter-spacing: .4em; text-transform: uppercase; color: color-mix(in srgb, var(--dept) 60%, #fff); animation: hirestep .4s .1s ease both; }
.intro-t { font: 900 3.1em/1 system-ui, sans-serif; letter-spacing: .04em; margin: .25em 0; color: #fff; text-shadow: 0 0 30px var(--dept), 0 0 60px var(--dept); animation: glitch .55s .2s steps(6) both; }
@keyframes glitch { 0% { opacity: 0; transform: translateX(-8px) skewX(12deg); clip-path: inset(40% 0 30% 0); } 40% { opacity: 1; transform: translateX(6px); clip-path: inset(10% 0 60% 0); } 70% { transform: translateX(-3px); clip-path: inset(0 0 0 0); } 100% { opacity: 1; transform: none; clip-path: none; } }
.intro-s { font: 750 1.25em system-ui, sans-serif; color: #fff; animation: hirestep .4s .6s ease both; }
.intro-m { margin-top: .9em; font-size: .78em; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); animation: hirestep .4s .85s ease both; }
.b-head { display: grid; grid-template-columns: 1fr auto; gap: .8em; align-items: center; margin-bottom: .7em; }
.b-kicker { font: 800 .7em var(--hud); letter-spacing: .24em; text-transform: uppercase; color: var(--dept); text-shadow: 0 0 10px color-mix(in srgb, var(--dept) 60%, transparent); }
.b-kicker::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 1.2s infinite; vertical-align: .05em; }
body.sealed .b-kicker { color: var(--good); } body.sealed .b-kicker::before { animation: none; }
.b-title { font-size: 1.4em; line-height: 1.15; margin: .15em 0 0; }
.b-ring { position: relative; width: 4em; height: 4em; } .b-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: rgba(0,0,0,.45); stroke: var(--line); stroke-width: 5; } .ring-fg { fill: none; stroke: var(--dept); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 4px var(--dept)); }
.b-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.15em var(--hud); }
.b-ring.urgent .ring-fg { stroke: var(--bad); } .b-ring.urgent .b-ring-n { color: var(--bad); animation: pulse .8s infinite; }
/* steps: numbered segments joined by a line; done ones lit, the current one ringed */
.b-steps { display: flex; align-items: center; gap: 0; margin: .2em 0 1em; }
.b-seg { flex: none; width: 2.1em; height: 2.1em; padding: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--muted); font: 800 .8em var(--hud); transition: all .25s; }
.b-seg + .b-seg { margin-left: auto; } .b-steps { background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.b-seg.done { background: color-mix(in srgb, var(--dept) 30%, #05070b); border-color: var(--dept); color: #fff; }
.b-seg.now { border-color: var(--dept); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dept) 30%, transparent), 0 0 18px color-mix(in srgb, var(--dept) 60%, transparent); }
.b-seg:disabled { opacity: .5; }
.b-panel { animation: panelin .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes panelin { from { opacity: 0; transform: translateX(1.4em); } }
.b-count { font: 700 .68em var(--hud); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.b-q { font: 800 1.32em/1.2 system-ui, sans-serif; letter-spacing: -.005em; margin: .25em 0 .7em; color: #fff; }
.opt { position: relative; overflow: hidden; display: flex; gap: .85em; align-items: center; width: 100%; text-align: left; padding: 1em 1em; margin: .55em 0; min-height: 4em; background: linear-gradient(100deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%), var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; color: var(--text); transition: border-color .2s, background-color .2s, transform .25s, opacity .25s, filter .25s, box-shadow .25s; animation: optin .4s calc(var(--i, 0) * 70ms + 120ms) cubic-bezier(.2, .8, .2, 1) both; -webkit-user-select: none; user-select: none; }
@keyframes optin { from { opacity: 0; transform: translateY(.8em) scale(.98); } }
.opt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%); transform: translateX(-120%); }
.opt:active { transform: scale(.975); }
.opt-mark { flex: none; width: 2.3em; height: 2.3em; display: grid; place-items: center; font: 800 .95em var(--hud); border: 1px solid color-mix(in srgb, var(--dept) 50%, transparent); color: var(--dept); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: color-mix(in srgb, var(--dept) 12%, transparent); transition: all .2s; }
.opt.sel { border-color: var(--dept); background: color-mix(in srgb, var(--dept) 24%, rgba(10,14,20,.85)); box-shadow: 0 0 0 1px var(--dept), 0 0 30px color-mix(in srgb, var(--dept) 45%, transparent); }
.opt.sel .opt-mark { background: var(--dept); color: #05070b; }
/* lock-on: brackets close in on the chosen tile, a light runs across it, the rest step back */
.opt-lock { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(var(--dept), var(--dept)) top left / 18px 3px, linear-gradient(var(--dept), var(--dept)) top left / 3px 18px, linear-gradient(var(--dept), var(--dept)) top right / 18px 3px, linear-gradient(var(--dept), var(--dept)) top right / 3px 18px,
    linear-gradient(var(--dept), var(--dept)) bottom left / 18px 3px, linear-gradient(var(--dept), var(--dept)) bottom left / 3px 18px, linear-gradient(var(--dept), var(--dept)) bottom right / 18px 3px, linear-gradient(var(--dept), var(--dept)) bottom right / 3px 18px; background-repeat: no-repeat; }
.opt.sel .opt-lock { opacity: 1; }
.opt.locking .opt-lock { animation: lockon .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lockon { from { opacity: 0; transform: scale(1.12); } }
.opt.locking::after { animation: shine .5s ease-out; }
@keyframes shine { to { transform: translateX(120%); } }
.opt.recede { opacity: .38; transform: scale(.97); filter: saturate(.3); }
.opt-body { display: flex; flex-direction: column; gap: .2em; } .opt-text { font-weight: 700; line-height: 1.25; font-size: 1.02em; } .opt-hint { font-size: .82em; color: var(--muted); line-height: 1.32; }
/* review: what you chose, one row per step, tap to go back */
.rv-row { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; width: 100%; text-align: left; margin: .55em 0; padding: .8em .9em; border-radius: 12px; background: var(--glass); border: 1px solid color-mix(in srgb, var(--dept) 40%, var(--line)); color: var(--text); animation: optin .35s calc(var(--i, 0) * 60ms) both; }
.rv-row .opt-mark { background: var(--dept); color: #05070b; }
.rv-body { display: flex; flex-direction: column; gap: .15em; min-width: 0; } .rv-q { font: 700 .64em var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rv-a { font-weight: 700; line-height: 1.25; }
.rv-edit { font: 700 .64em var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--dept); }
.b-hint { text-align: center; padding: .8em; font: 700 .74em var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.b-hint[data-turnout]::after { content: attr(data-turnout); display: block; margin-top: .5em; letter-spacing: .1em; color: color-mix(in srgb, var(--dept) 70%, #fff); }
.p-dock { position: sticky; bottom: 0; z-index: 6; padding: .8em 1.05em calc(.9em + env(safe-area-inset-bottom)); width: 100%; max-width: 34em; margin-left: auto; margin-right: auto; background: linear-gradient(transparent, rgba(4,6,10,.92) 35%); }
.p-dock:empty { display: none; }
/* the seal: a fingerprint pad, the ring fills while the thumb holds */
.seal-wrap { display: flex; flex-direction: column; align-items: center; gap: .45em; padding-top: .3em; }
.seal { width: 6.4em; height: 6.4em; padding: 0; border-radius: 50%; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--dept) 30%, #05070b), #05070b 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dept) 60%, transparent), 0 0 34px color-mix(in srgb, var(--dept) 45%, transparent); touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; animation: readyglow 1.8s ease-in-out infinite; transition: transform .15s; }
.seal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seal-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; } .seal-fg { fill: none; stroke: var(--dept); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--dept)); }
.seal-print { transform: rotate(90deg); transform-origin: 50% 50%; fill: none; stroke: color-mix(in srgb, var(--dept) 75%, #fff); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.seal.holding { transform: scale(.94); animation: none; box-shadow: 0 0 0 2px var(--dept), 0 0 60px var(--dept); }
.seal.holding .seal-print { stroke: #fff; opacity: 1; }
.seal.sending { opacity: .6; animation: none; }
@keyframes readyglow { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dept) 80%, transparent), 0 0 54px color-mix(in srgb, var(--dept) 70%, transparent); } }
.seal-l { font: 800 .78em var(--hud); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.seal-wrap.nudge .seal-l { animation: nudge .4s; color: var(--watch); }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* launch: a point of light rises off the top, a ring spreads from the thumb, the screen flashes once */
.p-fx { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
.fx-orb { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 8px var(--dept), 0 0 60px 20px var(--dept), 0 40px 40px -10px var(--dept); }
.fx-wave { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--dept); }
.p-fx.flash { animation: flash 1.1s ease-out; } .p-fx::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #fff, color-mix(in srgb, var(--dept) 70%, #fff) 50%, var(--dept)); opacity: 0; }
.p-fx.flash::before { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .85; } 100% { opacity: 0; } }
/* the receipt: a sealed token with its code, your choices, and your colleagues' seals filling in */
.rc { position: relative; overflow: hidden; border-radius: 16px; padding: 1em 1.05em; background: linear-gradient(150deg, color-mix(in srgb, var(--good) 16%, #0a0f15), #070a0f 70%); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); }
.rc.fresh { animation: stampin .6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes stampin { from { opacity: 0; transform: scale(1.12) rotate(-2deg); } }
.rc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.1) 48%, transparent 60%); transform: translateX(-100%); animation: holo 6s ease-in-out infinite; pointer-events: none; }
.rc-top { display: grid; grid-template-columns: auto 1fr; gap: 0 .8em; align-items: center; margin-bottom: .7em; }
.rc-seal { grid-row: span 2; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--good); color: var(--good); font-weight: 900; font-size: 1.1em; box-shadow: 0 0 18px color-mix(in srgb, var(--good) 50%, transparent); }
.rc.fresh .rc-seal { animation: stamp .55s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.rc-t { font: 900 1.15em var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--good); } .rc-code { font: 700 .74em var(--hud); letter-spacing: .14em; color: var(--muted); }
.rc-row { display: flex; gap: .7em; align-items: center; padding: .45em 0; border-top: 1px solid var(--line); } .rc-row .opt-mark { width: 1.9em; height: 1.9em; font-size: .8em; background: color-mix(in srgb, var(--dept) 30%, transparent); color: #fff; } .rc-a { font-weight: 650; line-height: 1.25; }
.rc-turnout:not(:empty) { margin-top: .8em; padding-top: .7em; border-top: 1px solid var(--line); }
.rc.compact { padding: .55em .9em; cursor: pointer; } .rc.compact .rc-top { margin-bottom: 0; } .rc.compact .rc-seal { grid-row: auto; width: 1.7em; height: 1.7em; font-size: .85em; box-shadow: none; }
.rc.compact .rc-t { font-size: .85em; } .rc.compact .rc-code, .rc.compact .rc-row, .rc.compact .rc-dots, .rc.compact .rc-room, .rc.compact .rc-foot, .rc.compact .rc-change { display: none; }
.rc.compact .rc-turnout:not(:empty) { margin-top: .35em; padding-top: .35em; } .rc.compact .rc-tt { margin-bottom: 0; } .rc.compact::after { display: none; }
.rc-tt { font: 700 .7em var(--hud); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--dept) 70%, #fff); margin-bottom: .5em; }
.rc-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(.62em, 1fr)); gap: .28em; } .rc-dots.fine { grid-template-columns: repeat(auto-fill, minmax(.44em, 1fr)); gap: .2em; }
.rc-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); transition: background-color .4s, box-shadow .4s; } .rc-dots i.on { background: var(--dept); box-shadow: 0 0 6px var(--dept); }
.rc-room { margin-top: .5em; font: 700 .68em var(--hud); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.rc-foot { margin-top: .8em; font-size: .84em; color: var(--muted); }
.rc-change { margin-top: .5em; padding: .5em .9em; font: 700 .72em var(--hud); letter-spacing: .14em; text-transform: uppercase; background: transparent; color: var(--dept); border: 1px solid color-mix(in srgb, var(--dept) 50%, transparent); border-radius: 99px; }
.p-toast { position: fixed; left: 50%; top: calc(4.2em + env(safe-area-inset-top)); z-index: 26; transform: translate(-50%, -1em); opacity: 0; pointer-events: none; padding: .55em 1em; border-radius: 99px; background: rgba(10,14,20,.92); border: 1px solid color-mix(in srgb, var(--dept) 60%, transparent); font: 700 .78em var(--hud); letter-spacing: .1em; white-space: nowrap; transition: opacity .3s, transform .3s; box-shadow: 0 0 20px color-mix(in srgb, var(--dept) 35%, transparent); }
.p-toast.on { opacity: 1; transform: translate(-50%, 0); }
.p-cover { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .5em; text-align: center; padding: 2em; }
.p-cover.lantern { display: flex; background: radial-gradient(circle at 50% 40%, #fff, #fff6dd 60%, #ffe7b0); color: #3a2a10; }
.p-cover.blackout { display: flex; background: #000; gap: .3em; }
/* blackout keeps the hall dark, but the words must read at arm's length: large, mid-grey rather than white, breathing slowly */
.p-cover-hush { font: 800 2.1em/1.1 var(--hud); letter-spacing: .14em; color: rgba(255,255,255,.6); text-transform: uppercase; animation: hush 3.2s ease-in-out infinite; }
.p-cover-up { font: 300 3.2em/1 var(--hud); color: rgba(255,255,255,.45); animation: hush 3.2s ease-in-out infinite; }
@keyframes hush { 50% { opacity: .55; } }
.p-cover-t { font-size: 2.2em; font-weight: 900; letter-spacing: -.01em; } .p-cover-s { font-size: 1em; opacity: .7; }
.is-preview .p-cover, .is-preview .p-hire, .is-preview .p-lamp, .is-preview .p-gridbg { position: absolute; }
.conn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .5em; text-align: center; font-size: .85em; background: #333; color: #fff; transform: translateY(100%); transition: transform .3s; } .conn.show { transform: none; }

/* stage: type for a 500-seat hall. Sizes are in vh so they follow the projector, with a floor in stage.ts */
body.stage { overflow: hidden; background: #070a0f; transition: background-color 1.2s ease; }
body.stage[data-mood="alert"] { background: radial-gradient(ellipse at 50% 120%, #3a0b0e, #070a0f 70%); }
body.stage[data-mood="calm"] { background: radial-gradient(ellipse at 50% 120%, #08321f, #070a0f 70%); }
body.stage[data-mood="amber"] { background: radial-gradient(ellipse at 50% 120%, #3a2606, #070a0f 70%); }
body.stage[data-mood="warm"] { background: radial-gradient(ellipse at 50% 120%, #3b2c14, #0b0a08 70%); }
/* only the light desk blacks the stage out; a scene that darkens the hall leaves the stage to carry the moment */
body.stage[data-mood="blackout"][data-manual] #app { visibility: hidden; }
/* the hall's light along the stage's lower edge (stage.ts): one pool per group, behind the text */
.st-spill { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.stage #app { z-index: 1; }
.st-pool { position: absolute; bottom: 0; height: 42vh; --o: 0; opacity: calc(var(--o) * var(--drain, 1)); transition: opacity 1s ease; background: radial-gradient(60% 70% at 50% 100%, var(--lamp, var(--c)), transparent 70%); filter: blur(2vh); }
.st-spill[data-mood="dept"] .st-pool { --o: .42; animation: poolbreathe 5s ease-in-out infinite; } .st-spill[data-mood="dept"] .st-pool:nth-child(even) { animation-delay: -2.5s; }
@keyframes poolbreathe { 50% { filter: blur(2vh) brightness(.55); } }
.st-spill[data-mood="bright"] .st-pool { --o: .3; --lamp: #e8edf5; }
.st-spill[data-mood="alert"] .st-pool { --o: .38; --lamp: #ff2d2d; } .st-spill[data-mood="calm"] .st-pool { --o: .34; --lamp: #19d98f; }
.st-spill[data-mood="amber"] .st-pool { --o: .38; --lamp: #ffa514; } .st-spill[data-mood="warm"] .st-pool { --o: .32; --lamp: #ffd29a; }
.st-spill[data-mood="lantern"] .st-pool { --o: .55; --lamp: #fff3d6; }
.st-spill[data-mood="rhythm"] .st-pool, .st-spill[data-mood="converge"] .st-pool, .st-spill[data-mood="sync"] .st-pool, .st-spill[data-mood="unite"] .st-pool { transition: none; opacity: calc(var(--o) * .55 * var(--drain, 1)); }
.st-spark { position: absolute; bottom: 2vh; width: 1.1vh; height: 1.1vh; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2vh .4vh var(--c), 0 0 3vh 1vh var(--c); opacity: 0; animation: rise 2.2s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--h) * -1)) scale(.3); } }
body.stage #app { height: 100vh; display: flex; align-items: center; justify-content: center; }
.stage-view { width: 100%; padding: 4vh 5vw; font-size: 5.2vh; line-height: 1.22; overflow: hidden; }
.stage-view[data-n="4"], .stage-view[data-n="5"], .stage-view[data-n="6"] { font-size: 4.4vh; }
.stage-view h1 { font-size: 1.9em; line-height: 1.05; letter-spacing: -.015em; margin-bottom: .15em; }
.stage-view .eyebrow { font-size: .6em; } .stage-view .subtitle { font-size: .8em; }
.stage-view .big-text { font-size: 3em; } .stage-view .banner-title { font-size: 1.6em; }
.stage-view .c-h { font-size: .58em; letter-spacing: .1em; }
.stage-view .qr-img { width: auto; height: 58vh; } .stage-view .qr-caption { font-size: .9em; }
/* a scene with a QR: the code on the left, everything else beside it */
.stage-view:has(> .c-qr) { display: grid; grid-template-columns: auto 1fr; column-gap: 4vw; align-content: center; }
.stage-view:has(> .c-qr) > .c { grid-column: 2; } .stage-view:has(> .c-qr) > .c-qr { grid-column: 1; grid-row: 1 / span 12; align-self: center; margin: 0; }
.stage-view.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4vw; align-items: start; } .stage-view.cols > .c-title { grid-column: 1 / -1; }
.stage-view .col > .c:last-child { margin-bottom: 0; }
body.stage #app { position: relative; }
.stage-view.measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
/* a scene too long for one screen turns its own pages; the dots say there is more */
.pager { position: absolute; right: 3vw; bottom: 3vh; display: flex; gap: .8vh; }
.pager span { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: #334155; } .pager span.on { background: #e2e8f0; }
.stage-view { position: relative; }
.stage-view .c { margin-bottom: .7em; }
.stage-view .card-body, .stage-view .record-body, .stage-view .kpi-delta, .stage-view .band-note, .stage-view .ladder-words { font-size: .78em; }
.stage-view .kpi-label, .stage-view .record-owner, .stage-view .agent-status, .stage-view .tag, .stage-view .badge, .stage-view .synthetic, .stage-view .legend { font-size: .62em; }
.stage-view .speaker { font-size: .55em; min-width: 6em; padding-top: .45em; }
/* dense: the scene did not fit at the floor size, so detail goes (it is on the phones) instead of the type shrinking */
.stage-view.dense .cards:not(.flow) .card-body, .stage-view.dense .record-body, .stage-view.dense .band-note, .stage-view.dense .subtitle, .stage-view.dense .legend, .stage-view.dense .actor-by, .stage-view.dense .kpi-delta { display: none; }
.stage-view.dense .agent-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* motion: parts enter in reading order; timers in render.ts always end in .settled */
.motion .enter { animation: enter .6s cubic-bezier(.2, .75, .25, 1) both; animation-delay: var(--d, 0ms); }
@keyframes enter { from { opacity: 0; transform: translateY(.5em); } }
.motion.settled .enter { animation: none; }
.stage-view .chat { display: flex; flex-direction: column; justify-content: flex-end; max-height: 50vh; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 4em); mask-image: linear-gradient(transparent, #000 4em); }
.stage-view .agent.system { padding: .1em .9em; margin-bottom: .25em; font-size: .78em; }
.wait { display: none !important; }
.typing::after { content: '▍'; margin-left: .05em; color: var(--aria); animation: blink .9s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } }
/* Who acted: an agent's act in a dashed purple frame, a human decision in a solid amber frame. */
.actor-agent { outline: 2px dashed var(--aria); outline-offset: -2px; }
.actor-human { outline: 2px solid var(--human); outline-offset: -2px; }
.actor-by { font-weight: 700; font-size: .85em; margin-bottom: .3em; }
.actor-agent .actor-by { color: var(--aria); } .actor-human .actor-by { color: var(--human); }
.chain .step.actor-agent, .chain .step.actor-human, .chain .step.actor-both { outline: none; padding-left: .5em; border-left: 3px dashed var(--aria); }
.chain .step.actor-human { border-left-style: solid; border-left-color: var(--human); }
.chain .step.actor-both { border-left-style: double; border-left-color: var(--human); }
.ladder-words { margin-top: .4em; font-size: .85em; color: var(--muted); } .ladder-words b { color: var(--text); }
.legend { font-size: .8em; color: var(--muted); display: flex; gap: 1.2em; }
.legend .lg-agent { color: var(--aria); } .legend .lg-human { color: var(--human); }

/* shared buttons and inputs */
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: .4em .8em; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.big { padding: .9em 1.6em; font-size: 1.3em; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
button.danger, .guard.danger { background: color-mix(in srgb, var(--bad) 22%, var(--panel2)); border-color: var(--bad); }
input, select { font: inherit; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .3em .5em; } input[type=number] { width: 6em; }
.muted { color: var(--muted); } .small { font-size: .82em; } .warn-text { color: var(--watch); }
table.turns { width: 100%; border-collapse: collapse; margin-bottom: .5em; font-size: .85em; } .turns th { text-align: left; color: var(--muted); font-weight: 600; } .turns td { border-top: 1px solid var(--line); padding: .25em .3em; vertical-align: top; }
.events { font-size: .85em; } .ev { display: flex; gap: .6em; padding: .1em 0; } .ev-at, .ev-type { color: var(--muted); flex: none; }
.stage.is-preview { cursor: default; }

/* ---------- ops: fixed rail (pressed) + fixed track (where) + scrolling dashboard (watched) ---------- */
@keyframes blink { 50% { filter: brightness(.6); } }
@keyframes spin { to { transform: rotate(360deg); } }
body.ops { font-size: 14px; overflow: hidden; --lamp-ok: #22c55e; --lamp-warn: #f59e0b; --lamp-bad: #ef4444; --metal: #10141a; --bezel: #262e3a; background: #0a0d12; }
body.ops #app { height: 100vh; }
.k-app { height: 100vh; display: grid; grid-template-columns: clamp(360px, 28vw, 460px) 1fr; }
.k-rail { height: 100vh; overflow-y: auto; background: linear-gradient(180deg, #11161e, #0c1016); border-right: 1px solid var(--bezel); scrollbar-width: thin; }
.r-inner { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.k-right { min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.k-top { flex: none; border-bottom: 1px solid var(--bezel); background: var(--metal); padding: 8px 10px; }
.k-main { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 84px; scrollbar-width: thin; }
.k-wait { padding: 2em; color: var(--muted); font-size: 1.3em; }
body.ops.mode-canli .k-rail { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--lamp-bad) 70%, transparent); }

/* rail */
.r-id { display: flex; flex-direction: column; gap: 6px; } .r-show { font-weight: 800; font-size: 1.12em; line-height: 1.2; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg-b { border: 0; border-radius: 0; background: var(--panel2); padding: .35em .8em; border-right: 1px solid var(--line); color: var(--muted); }
.seg-b:last-child { border-right: 0; } .seg-b.on { background: var(--accent); color: #0b0f15; font-weight: 700; }
.k-mode { align-self: stretch; } .k-mode .seg-b { flex: 1; font-weight: 800; letter-spacing: .1em; padding: .5em; }
.k-mode.mode-canli .seg-b.on { background: var(--lamp-bad); color: #fff; } .k-mode.mode-prova .seg-b.on { background: #64748b; color: #fff; }
.r-ann { display: flex; flex-direction: column; gap: 6px; }
.r-lamps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.lamp { font: 700 .7em/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; padding: 7px 6px; border-radius: 5px; border: 1px solid #000; background: #1b2028; color: #4b5563; text-transform: uppercase; box-shadow: inset 0 0 6px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.lamp.ok { color: #052e14; background: var(--lamp-ok); box-shadow: 0 0 8px color-mix(in srgb, var(--lamp-ok) 45%, transparent); }
.lamp.warn { color: #3a2300; background: var(--lamp-warn); box-shadow: 0 0 8px color-mix(in srgb, var(--lamp-warn) 45%, transparent); }
.lamp.bad { color: #fff; background: var(--lamp-bad); box-shadow: 0 0 10px var(--lamp-bad); animation: blink 1s steps(2) infinite; }
.k-master { font: 800 .82em/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; padding: 10px; border-radius: 6px; border: 2px solid #000; }
.k-master.ok { background: #13281b; color: var(--lamp-ok); } .k-master.warn { background: var(--lamp-warn); color: #2a1a00; } .k-master.bad { background: var(--lamp-bad); color: #fff; animation: blink 1s steps(2) infinite; }
.r-now { background: #07090c; border: 1px solid var(--bezel); border-radius: 10px; padding: 10px 12px; }
.r-now-id { font: 700 .85em ui-monospace, Menlo, monospace; color: var(--accent); } .r-now-title { font-size: 1.35em; font-weight: 800; line-height: 1.15; margin: 2px 0 8px; }
.r-nums { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.r-big { font: 800 1.9em/1 ui-monospace, Menlo, monospace; color: #7dd3fc; font-variant-numeric: tabular-nums; } .r-of { color: var(--muted); font: .95em ui-monospace, Menlo, monospace; }
.r-dev { margin-left: auto; font: 700 .9em ui-monospace, Menlo, monospace; } .r-dev.ok { color: var(--lamp-ok); } .r-dev.over { color: var(--lamp-warn); } .r-dev.late { color: var(--lamp-bad); }
.r-meter { height: 6px; background: #1b2230; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.r-meter-fill { height: 100%; background: var(--lamp-ok); transition: width 1s linear; } .r-meter.near .r-meter-fill { background: var(--lamp-warn); } .r-meter.over .r-meter-fill { background: var(--lamp-bad); }
.k-go { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; border-radius: 14px; border: 3px solid #000; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.5); transition: transform .05s; }
.k-go:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.k-go-l { font-size: 1.9em; letter-spacing: .04em; } .k-go-s { font-size: .85em; font-weight: 600; opacity: .85; text-align: center; }
.k-go.ready { background: linear-gradient(180deg, #34d399, #059669); color: #02140c; }
.k-go.warn { background: linear-gradient(180deg, #fbbf24, #d97706); color: #2a1a00; }
.k-go.busy { background: #1e3a5f; color: #93c5fd; } .k-go.busy .k-go-l::after { content: ''; display: inline-block; width: .7em; height: .7em; margin-left: .3em; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.k-go.blocked { background: #2a2f38; color: var(--muted); }
.r-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.r-pages { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px; align-items: center; margin-top: 4px; }
.r-pages-t { text-align: center; font-size: .85em; color: var(--muted); }
.r-pages.manual .r-pages-t { color: var(--lamp-warn); font-weight: 700; }
.r-ballot { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; font-size: .95em; background: #07090c; border: 1px solid var(--bezel); border-radius: 8px; padding: 6px 10px; } .r-ballot .countdown { font-size: 1.4em; }
.k-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.k-btn { padding: .55em .8em; font-weight: 600; } .k-btn.primary { background: var(--accent); color: #07101c; border-color: var(--accent); } .k-btn.on { border-color: var(--good); color: var(--good); } .k-btn.small { padding: .2em .6em; font-size: .9em; text-transform: none; letter-spacing: 0; }
.k-notice { background: color-mix(in srgb, var(--info) 15%, var(--panel)); border: 1px solid var(--info); border-radius: 8px; padding: 8px 10px; }
.k-notice.warn { background: color-mix(in srgb, var(--watch) 15%, var(--panel)); border-color: var(--watch); display: flex; flex-direction: column; gap: 8px; }
.guard { position: relative; border: 2px solid transparent; background-image: linear-gradient(var(--panel2), var(--panel2)), repeating-linear-gradient(45deg, #facc15 0 6px, #111 6px 12px); background-origin: border-box; background-clip: padding-box, border-box; font-weight: 700; padding: .55em .9em; }
.guard.danger { background-image: linear-gradient(color-mix(in srgb, var(--bad) 22%, var(--panel2)), color-mix(in srgb, var(--bad) 22%, var(--panel2))), repeating-linear-gradient(45deg, #facc15 0 6px, #111 6px 12px); }
.guard.armed { background-image: linear-gradient(var(--bad), var(--bad)), repeating-linear-gradient(45deg, #facc15 0 6px, #111 6px 12px); color: #fff; animation: blink .6s steps(2) infinite; }
.guard.small { font-size: .85em; }
.r-sec { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.r-sec-t { font-size: .72em; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.r-cue-state, .r-light-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r-cue-sent { font: 800 .8em ui-monospace, Menlo, monospace; color: #4b5563; } .r-cue-sent.on { color: #fff; }
.r-cue-reply { margin-left: auto; font: 800 .8em ui-monospace, Menlo, monospace; padding: 3px 7px; border-radius: 4px; background: #1b2028; color: #4b5563; }
.r-cue-reply.ready { background: var(--lamp-ok); color: #052e14; } .r-cue-reply.hold { background: var(--lamp-bad); color: #fff; animation: blink 1s steps(2) infinite; } .r-cue-reply.time { background: var(--lamp-warn); color: #2a1a00; }
.r-cue-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* cue buttons are dark and still until pressed; the pressed one is lit solid in its colour and says how to clear it */
.cue-b { padding: .7em .3em; font-weight: 800; background: #151a22; color: #9aa4b4; border: 1px solid #2b3441; }
.cue-b.on { color: #0b0f15; border-color: #000; box-shadow: 0 0 14px var(--cc); background: var(--cc); }
.cue-l-standby { --cc: #f59e0b; } .cue-l-go { --cc: #22c55e; } .cue-l-stretch { --cc: #3b82f6; } .cue-l-wrap { --cc: #ef4444; }
.r-cue-sent.on.cue-l-standby, .r-cue-sent.on.cue-l-go, .r-cue-sent.on.cue-l-stretch, .r-cue-sent.on.cue-l-wrap { color: var(--cc); }
.cue-b.on.cue-l-stretch, .cue-b.on.cue-l-wrap { color: #fff; }
.r-light-now { font: 700 .78em ui-monospace, Menlo, monospace; color: var(--muted); } .r-light-now.manual { color: var(--lamp-warn); }
.r-pads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pad { padding: .5em .1em; font-size: .78em; font-weight: 700; border-radius: 6px; background: #151a22; color: #9aa4b4; border: 1px solid #2b3441; border-bottom: 3px solid var(--pc, #2b3441); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad.on { background: var(--pc, #334155); color: #0b0f15; box-shadow: 0 0 12px var(--pc, transparent); }
.pad-auto { --pc: #64748b; } .pad-dark { --pc: #1f2937; } .pad-bright { --pc: #f4f1ea; } .pad-dept { --pc: #a78bfa; } .pad-alert { --pc: #ef4444; } .pad-calm { --pc: #22c55e; } .pad-amber { --pc: #f59e0b; } .pad-warm { --pc: #f6d79a; } .pad-lantern { --pc: #ffffff; } .pad-blackout { --pc: #000; } .pad-rhythm { --pc: #f472b6; } .pad-converge { --pc: #c084fc; } .pad-sync { --pc: #7dd3fc; } .pad-unite { --pc: #fde68a; }
.pad-dark.on, .pad-blackout.on { color: #fff; }
.pad.guard { padding: .55em .1em; border-bottom: 3px solid var(--pc); }
.r-cues { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .85em; }
.r-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }

/* top: scene track with planned durations, and the clocks */
.t-inner { display: flex; gap: 10px; align-items: stretch; }
.k-track { flex: 1; min-width: 0; display: flex; gap: 2px; height: 46px; }
.tr { position: relative; min-width: 30px; border-radius: 4px; background: #1c232d; color: var(--muted); font: 700 .7em/1 ui-monospace, Menlo, monospace; padding: 5px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-top: 3px solid var(--act, #334155); }
.tr-top { display: flex; justify-content: space-between; gap: 2px; } .tr-dur { font-weight: 500; opacity: .8; } .tr-flag { color: var(--watch); }
.tr.act-start { margin-left: 5px; }
.act-0 { --act: #64748b; } .act-1 { --act: #38bdf8; } .act-2 { --act: #a78bfa; } .act-3 { --act: #f472b6; } .act-4 { --act: #fbbf24; } .act-5 { --act: #34d399; }
.tr.past { opacity: .45; } .tr.cur { background: #12345a; color: #fff; box-shadow: 0 0 0 2px var(--accent) inset; }
.tr.nxt { background: #273244; color: var(--text); outline: 1px dashed var(--accent); }
.tr-fill { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--lamp-ok); } .tr-fill.over { background: var(--lamp-bad); width: 100% !important; animation: blink 1s steps(2) infinite; }
.k-clocks { display: flex; gap: 6px; flex: none; }
.k-clock { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; background: #07090c; border: 1px solid var(--bezel); border-radius: 6px; padding: 3px 10px; min-width: 84px; }
.k-clock-l { font-size: .62em; letter-spacing: .12em; color: var(--muted); } .k-clock-v { font: 700 1.4em/1.1 ui-monospace, Menlo, monospace; color: #7dd3fc; font-variant-numeric: tabular-nums; }
.k-clock.dev.ok .k-clock-v { color: var(--lamp-ok); } .k-clock.dev.over .k-clock-v { color: var(--lamp-warn); } .k-clock.dev.late .k-clock-v { color: var(--lamp-bad); }

/* dashboard: what is watched live, fitted to the screen; previews open from the dock */
.k-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: 100%; }
@media (max-height: 780px) { .k-grid { height: auto; grid-template-rows: auto 440px; } }
@media (max-height: 900px) { .r-inner { gap: 7px; padding-top: 9px; } .k-go { padding: 9px 10px; } .k-go-l { font-size: 1.6em; } .r-now { padding: 7px 10px; } .r-now-title { font-size: 1.18em; margin-bottom: 4px; } .r-big { font-size: 1.6em; } .k-btn { padding: .42em .7em; } .cue-b { padding: .5em .3em; } .pad { padding: .4em .1em; } .lamp { padding: 5px 6px; } .k-master { padding: 7px; } }
.k-card { background: linear-gradient(180deg, #1a2029, #151a22); border: 1px solid var(--bezel); border-radius: 10px; padding: 12px 14px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.k-body { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.k-ph { display: flex; gap: .7em; align-items: center; justify-content: space-between; font-size: .78em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.c-mixer { grid-column: span 8; } .c-sys { grid-column: span 4; } .c-deck { grid-column: span 5; } .c-log { grid-column: span 7; }
@media (max-width: 1300px) { .c-mixer, .c-sys, .c-deck, .c-log { grid-column: 1 / -1; } .k-grid { grid-template-rows: none; } }
.sys-row { display: grid; grid-template-columns: 12px 120px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.sys-row:first-child { border-top: 0; }
.sys-led { width: 10px; height: 10px; border-radius: 50%; background: #2a313c; align-self: center; } .sys-led.ok { background: var(--lamp-ok); box-shadow: 0 0 6px var(--lamp-ok); } .sys-led.warn { background: var(--lamp-warn); } .sys-led.bad { background: var(--lamp-bad); animation: blink 1s steps(2) infinite; }
.sys-l { font-weight: 700; } .sys-t { color: var(--muted); font: .92em ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.feed-tabs { display: flex; gap: 2px; } .feed-tab { border: 0; background: transparent; color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 1em; padding: .2em .6em; border-radius: 5px; } .feed-tab.on { background: var(--panel2); color: var(--text); }
.c-log .log { flex: 1; height: auto; min-height: 0; } .c-log .k-telemetry { flex: 1; overflow: auto; min-height: 0; }
.c-deck .k-body { overflow: auto; }
.mx-flow { position: relative; height: 46px; margin-top: 8px; color: var(--accent); background: #07090c; border: 1px solid var(--bezel); border-radius: 6px; overflow: hidden; }
.mx-flow svg { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); }
.mx-rate { position: absolute; right: 8px; top: 4px; font: 700 .8em ui-monospace, Menlo, monospace; color: var(--muted); }
/* previews: held off screen until opened; never re-parented, so their sockets stay up */
.mon-holder > .mon-slot, .mon-holder > .c-phones { position: fixed; left: -10000px; top: 0; width: 1280px; visibility: hidden; }
.mon-holder > .mon-slot.zoomed, .mon-holder > .c-phones.zoomed { left: auto; top: auto; width: auto; visibility: visible; }
/* a fixed slot is its own stacking context: without its own z-index the zoomed monitor inside it paints under the backdrop */
.mon-holder > .mon-slot.zoomed { z-index: 40; }
.mon-slot { position: relative; width: 100%; }
.mon { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; border: 2px solid #000; background: #000; }
.mon iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; display: block; pointer-events: none; }
.mon-label { position: absolute; left: 6px; top: 6px; font: 700 .68em ui-monospace, monospace; background: #b91c1c; color: #fff; padding: 2px 6px; border-radius: 3px; letter-spacing: .06em; z-index: 1; }
.mon-phone .mon-label, .mon-mod .mon-label { background: #334155; }
.mon-zoom { position: absolute; right: 6px; top: 6px; z-index: 1; padding: 2px 7px; font: 700 .75em ui-monospace, monospace; background: rgba(15,20,28,.85); }
.mon-slot.zoomed > .mon, .mon.zoomed { position: fixed; z-index: 40; inset: 4vh 3vw; box-shadow: 0 20px 80px rgba(0,0,0,.8); border-color: var(--accent); }
.mon-slot.zoomed > .mon-stage { inset: 50% auto auto 50%; width: min(94vw, calc(92vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.mon-slot.zoomed > .mon-mod { inset: 50% auto auto 50%; height: 92vh; width: auto; aspect-ratio: 1024 / 1180; transform: translate(-50%, -50%); }
.phone-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.phone-tile { display: flex; flex-direction: column; gap: 4px; } .phone-tile.empty { opacity: .45; }
.phone-tile .mon { border-color: color-mix(in srgb, var(--ch) 70%, #000); border-radius: 14px; }
.phone-stat { font: 600 .82em ui-monospace, Menlo, monospace; color: var(--muted); text-align: center; }
.mon-holder > .c-phones.zoomed { position: fixed; z-index: 40; inset: 3vh 2vw; overflow: auto; box-shadow: 0 20px 80px rgba(0,0,0,.8); border-color: var(--accent); display: block; }
.c-phones.zoomed .phone-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: calc((86vh * 390 / 780 + 10px) * 7); margin: 0 auto; }
.c-phones.zoomed .mon-slot { max-height: 86vh; }
.k-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.72); display: none; } .k-backdrop.on { display: block; }
/* the dock: three square keys in the far corner, the letter in the middle, a lamp for whether that screen follows */
.k-dock { position: fixed; right: 14px; bottom: 14px; z-index: 45; display: flex; gap: 8px; }
.dock-b { position: relative; width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border-radius: 12px; background: #151a22; border: 1px solid #2b3441; border-bottom-width: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.dock-b:hover { border-color: var(--accent); } .dock-b.on { background: var(--accent); color: #07101c; border-color: #000; }
.dock-k { font: 900 1.7em/1 ui-monospace, Menlo, monospace; } .dock-l { position: absolute; bottom: 5px; left: 0; right: 0; font-size: .58em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dock-b.on .dock-l { color: #07101c; }
.dock-led { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #2a313c; } .dock-led.ok { background: var(--lamp-ok); box-shadow: 0 0 6px var(--lamp-ok); } .dock-led.warn { background: var(--lamp-warn); } .dock-led.bad { background: var(--lamp-bad); animation: blink 1s steps(2) infinite; }
.tr.lobby { flex: 0 0 52px; --act: #94a3b8; }

/* mixer */
.mx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; } .mx-title { font-weight: 700; }
.strips { display: flex; gap: 6px; }
.strip { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; background: #0c1016; border: 1px solid var(--bezel); border-radius: 8px; padding: 6px 4px; border-top: 3px solid var(--ch); }
.strip-top { font: 800 1.9em ui-monospace, Menlo, monospace; color: var(--ch); line-height: 1; } .strip-sub { font: .8em ui-monospace, Menlo, monospace; color: var(--muted); margin-top: -3px; }
.meter { position: relative; width: 34px; height: clamp(100px, 15vh, 180px); background: #05070a; border-radius: 4px; overflow: hidden; border: 1px solid #000; }
.meter-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, var(--ch), color-mix(in srgb, var(--ch) 50%, #fff)); transition: height .35s; box-shadow: 0 0 10px var(--ch); }
.tick { position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.6); }
.strip.idle { opacity: .35; }
.strip-icon { font-size: 1.2em; } .strip-name { font-size: .88em; font-weight: 700; text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .strip-n { font-size: .72em; color: var(--muted); }
.k-total { margin-top: 8px; display: flex; gap: .5em; align-items: baseline; } .k-total-n { font: 800 1.5em ui-monospace, Menlo, monospace; }
.k-outlook { margin-top: 8px; border-radius: 8px; padding: 6px 10px; color: #0b0f15; display: flex; gap: .6em; align-items: baseline; } .k-outlook-l { font-weight: 800; text-transform: uppercase; font-size: .75em; letter-spacing: .08em; flex: none; } .k-outlook-t { font-size: .9em; }
.k-row.prova { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .k-tag { font: 800 .7em ui-monospace, monospace; background: #64748b; color: #fff; padding: 3px 6px; border-radius: 4px; }

/* agents deck */
.deck-row { display: grid; grid-template-columns: minmax(70px, auto) 66px 48px 1fr; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: .92em; }
.deck-agent { font-weight: 700; } .deck-lat { font: .85em ui-monospace, Menlo, monospace; color: var(--muted); } .deck-text { color: var(--muted); }
.deck-row.degraded .deck-text { color: var(--watch); }
.led { font: 800 .7em/1 ui-monospace, Menlo, monospace; text-transform: uppercase; text-align: center; padding: 4px 0; border-radius: 4px; background: #1b2028; color: #6b7280; }
.led-serbest, .led-sinirli { background: var(--aria); color: #1e1238; box-shadow: 0 0 8px var(--aria); } .led-sablon { background: var(--lamp-warn); color: #2a1a00; } .led-script { background: #475569; color: #e2e8f0; } .led-pending { background: #1e3a5f; color: #93c5fd; animation: pulse 1.2s infinite; }

/* live log */
.log-filters { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.chip { padding: 1px 7px; font-size: .9em; text-transform: none; letter-spacing: 0; border-radius: 99px; border-color: var(--kc, var(--line)); color: var(--kc, var(--muted)); background: transparent; }
.chip.off { opacity: .35; text-decoration: line-through; }
.log { height: 340px; overflow-y: auto; font: .88em/1.45 ui-monospace, Menlo, monospace; background: #07090c; border: 1px solid var(--bezel); border-radius: 6px; padding: 4px 8px; scrollbar-width: thin; }
.lg { display: grid; grid-template-columns: 64px 74px 1fr; gap: 8px; padding: 1px 0; border-bottom: 1px solid #10151c; }
.lg-at { color: #5b6677; } .lg-k { color: var(--kc, var(--muted)); font-weight: 700; } .lg-t { color: #c9d1dc; overflow-wrap: anywhere; }
.k-scene { --kc: #38bdf8; } .k-ballot { --kc: #fbbf24; } .k-vote { --kc: #a3a3a3; } .k-agent { --kc: #a78bfa; } .k-people { --kc: #34d399; } .k-screen { --kc: #60a5fa; } .k-ops { --kc: #e5e7eb; } .k-mod { --kc: #fb923c; } .k-error { --kc: #f87171; }
.lg.k-error .lg-t { color: #fca5a5; }
.k-telemetry { font-size: .92em; }

/* overlay: drawer, help, offline */
.k-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.k-overlay > * { pointer-events: auto; }
.k-drawer { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(560px, 92vw); background: #121720; border: 1px solid var(--bezel); border-radius: 12px; box-shadow: -10px 0 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.d-tabs { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); }
.d-tab { border: 0; background: transparent; color: var(--muted); font-weight: 700; } .d-tab.on { background: var(--panel2); color: var(--text); } .d-close { margin-left: auto; }
.d-body { padding: 12px 14px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.d-body h4 { margin: .6em 0 .3em; font-size: .8em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.help-box { background: var(--panel); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 10px; font-size: .92em; line-height: 1.45; }
.cat { display: grid; gap: 8px; }
.cat-card { text-align: left; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; position: relative; }
.cat-card.sel { border-color: var(--accent); } .cat-card.current::before { content: ''; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--good); }
.cat-name { font-weight: 800; font-size: 1.1em; } .cat-meta { color: var(--muted); font-size: .85em; } .cat-sum { margin-top: 4px; font-size: .9em; }
.cat-card .badge { position: absolute; right: 10px; top: 10px; }
.cat-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.opt-row { display: flex; flex-direction: column; gap: 4px; } .opt-l { font-weight: 700; }
.probe { padding: 6px 10px; border-radius: 6px; font-size: .9em; } .probe.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); } .probe.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.d-lights { display: flex; flex-direction: column; gap: 6px; } .d-light { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; font-size: .9em; }
.k-help { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.k-help-box { background: #121720; border: 1px solid var(--bezel); border-radius: 12px; padding: 18px 22px; min-width: 460px; }
.k-help-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 4px 0; }
kbd { font: 700 .85em ui-monospace, Menlo, monospace; background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 5px; padding: 2px 6px; justify-self: start; }
.k-offline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--lamp-bad); color: #fff; font-weight: 900; font-size: 1.4em; padding: 18px 28px; border-radius: 12px; box-shadow: 0 0 40px var(--lamp-bad); animation: blink 1s steps(2) infinite; }
@media (max-width: 900px) { .k-app { grid-template-columns: 1fr; height: auto; } body.ops { overflow: auto; } .k-rail, .k-right { height: auto; } .k-main { overflow: visible; } }

/* ---------- moderator ---------- */
body.mod { padding: 14px 18px; font-size: 20px; }
.mod-head { display: flex; gap: 1em; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .4em; }
.mod-page { color: var(--muted); font-size: .8em; white-space: nowrap; } .mod-page.manual { color: #f59e0b; } .mod-id { color: var(--muted); font-family: ui-monospace, Menlo, monospace; } .mod-title { font-weight: 800; flex: 1; } .mod-time { color: var(--muted); font-size: .8em; }
.mod-clock { font: 700 1.4em ui-monospace, Menlo, monospace; color: var(--accent); }
.mod-conn { font-size: .7em; } .mod-conn.on { color: var(--good); } .mod-conn.off { color: var(--bad); font-weight: 800; }
.mod-cue { margin: .5em 0; padding: .45em .8em; border-radius: 10px; font-weight: 900; font-size: 1.2em; letter-spacing: .04em; min-height: 2.2em; background: #11161e; color: var(--muted); }
.mod-cue.cue-none:empty { visibility: hidden; }
.cue-standby { background: #f59e0b; color: #2a1a00; } .cue-go { background: #22c55e; color: #052e14; } .cue-stretch { background: #3b82f6; color: #fff; } .cue-wrap { background: #ef4444; color: #fff; animation: blink 1s steps(2) infinite; }
.mod-body { display: grid; grid-template-columns: 1fr minmax(300px, 34%); gap: 18px; align-items: start; }
.mod-now { margin: .4em 0; } .mline { display: flex; gap: .8em; padding: .3em 0; font-size: 1.15em; line-height: 1.3; } .mline .speaker { font-size: .55em; min-width: 4.5em; padding-top: .45em; }
.mline.is-mod { font-size: 1.6em; font-weight: 700; color: #fff; } .mline.is-mod .speaker { color: var(--accent); } .mline.not-mod { color: var(--muted); }
.mod-highlights { font-size: 1.05em; color: var(--watch); font-weight: 600; } .mod-notes { font-size: .7em; color: var(--muted); margin: .8em 0; }
.mod-next { opacity: .5; border-top: 1px dashed var(--line); margin-top: 1em; padding-top: .5em; } .mod-next-title { font-size: .7em; text-transform: uppercase; letter-spacing: .08em; } .mod-next .mline, .mod-next .mline.is-mod { font-size: .95em; font-weight: 500; }
.mod-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 10px; }
.mod-ballot { background: var(--panel); border-radius: 12px; padding: 12px 14px; font-size: .8em; } .mod-ballot.empty { color: var(--muted); text-align: center; } .mod-ballot.closed { opacity: .7; }
.mod-ballot-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; } .mod-ballot-top .countdown { font-size: 1.6em; }
.mod-count { font: 900 4em/1 ui-monospace, Menlo, monospace; margin-top: .2em; } .mod-count-sub { color: var(--muted); margin-bottom: .6em; }
.mod-extend { display: flex; gap: 8px; margin-top: 10px; } .mod-extend button { flex: 1; padding: .7em; font-size: 1.1em; }
.mod-signal { background: var(--panel); border-radius: 12px; padding: 12px 14px; } .mod-signal-title { font-size: .65em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.mod-signal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .sig { padding: .8em .2em; font-weight: 800; font-size: .8em; }
.sig-ready.on { background: #22c55e; color: #052e14; } .sig-hold.on { background: #ef4444; color: #fff; } .sig-time.on { background: #f59e0b; color: #2a1a00; }
.mod-flash { margin-top: 8px; font-size: .7em; color: var(--watch); }
@media (max-width: 800px) { .mod-body { grid-template-columns: 1fr; } }

/* forecast bands */
.band-row { margin-bottom: .7em; } .band-row.win .band-name { color: var(--good); }
.band-label { display: flex; gap: .7em; align-items: baseline; flex-wrap: wrap; } .band-name { font-weight: 700; } .band-range { font-variant-numeric: tabular-nums; color: var(--muted); } .band-actual-v { font-weight: 800; color: var(--text); }
.band-track { position: relative; height: .8em; background: var(--panel2); border-radius: 99px; margin-top: .25em; }
.band-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--band-color, var(--accent)) 70%, transparent); }
.band-target { position: absolute; top: -.3em; bottom: -.3em; width: 3px; margin-left: -1px; background: var(--watch); border-radius: 2px; }
.band-actual { position: absolute; top: -.45em; width: 1.1em; height: 1.7em; margin-left: -.55em; border-radius: 4px; background: var(--text); box-shadow: 0 0 0 3px var(--bg); }
.band-note { font-size: .8em; color: var(--muted); } .band-legend { font-size: .75em; color: var(--watch); }

.agent.system { background: transparent; border-left-style: dotted; } .agent.system .agent-name { color: var(--muted); }

/* ops: run record */
.r-run { display: block; width: 100%; margin-top: 6px; text-align: left; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font: 700 .72em ui-monospace, monospace; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-run.kind-gosteri { color: #fff; background: #b91c1c; border-color: #b91c1c; } .r-run.kind-test { color: #cbd5e1; }
.k-text { width: 100%; }
table.turns tr.cur td { background: rgba(56, 189, 248, .08); } .turns td { white-space: pre-line; } .rec-dl { white-space: nowrap; } .rec-dl .k-btn { padding: 2px 8px; }