/* ══════════════════════════════════════════════════════════════════════════
   FLOOR — master control

   The ancestor is a 1970s broadcast control desk, because every object in this
   product already has a counterpart on one: the lease clock is the studio
   countdown, the dial is a channel fader, the room's aggregate is a VU meter,
   the red flag is the tally, the question board is the rundown, and the ledger
   is the transmission log. The machine that used to decide who was heard,
   handed to the crowd.

   Rules held throughout: warm painted-metal neutrals, never grey; three
   semantic colours each doing one job (amber = time and air, phosphor = the
   room giving you time, tally = cutting); engraved edges instead of drop
   shadows; no scanlines, no CRT curvature, no glow for its own sake. Real
   broadcast gear is precise and understated. That is the whole difference
   between meaningful retro and dressing up.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* console paint — warm, faintly green, the colour of rack gear */
  --panel:#1A1D1A; --panel-hi:#232722; --panel-lo:#131614; --deck:#0E100E;
  --bezel-hi:#343A32;            /* engraved top edge  */
  --bezel-lo:#090B09;            /* engraved underside */
  --slot:#0A0C0A;                /* fader travel, meter face */

  /* silkscreen */
  --ink:#DFE4D8; --ink-2:#96A28D; --ink-3:#616B5D; --ink-4:#454E43;

  /* three lamps, three jobs */
  --amber:#E8A033;  --amber-dim:rgba(232,160,51,.14);   /* time · on air */
  --phos:#5FD3A2;   --phos-dim:rgba(95,211,162,.13);    /* the room giving time */
  --tally:#E4423A;  --tally-dim:rgba(228,66,58,.14);    /* cutting · danger */

  --f-label:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}body{min-height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--f-body);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:auto;
  background:var(--deck);
  /* the faintest brushed cast across the deck — 3%, you should not notice it */
  background-image:repeating-linear-gradient(97deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--panel-lo)}
::-webkit-scrollbar-thumb{background:#2E332C;border:2px solid var(--panel-lo);border-radius:5px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* engraved silkscreen label — the single most characteristic thing on a console */
.eyebrow,.hint,.lbl{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;color:var(--ink-3);
}
.hint{letter-spacing:.1em;color:var(--ink-4)}
.slash{color:var(--ink-4);font-weight:400}

/* a panel is a milled plate: light top edge, dark underside, no soft shadow */
.plate{
  background:linear-gradient(180deg,var(--panel-hi) 0%,var(--panel) 34%,var(--panel-lo) 100%);
  border:1px solid var(--bezel-lo);
  border-top-color:var(--bezel-hi);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 1px 0 rgba(0,0,0,.5);
}

/* ─────────────────────────── the landing ───────────────────────────
   One fire, one line, one button. Everything else is a footnote you can ignore. */
.gate{position:fixed;inset:0;z-index:60;background:
  radial-gradient(ellipse 80% 60% at 50% 78%, #1C1208 0%, #0B0D0B 62%, #060706 100%);
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .6s ease, transform .6s ease}
.gate.gone{opacity:0;transform:scale(1.06);pointer-events:none}
#fire{position:absolute;inset:0;width:100%;height:100%;display:block}
.gate-inner{position:relative;z-index:1;text-align:center;padding:24px;max-width:560px;
  /* a soft well of shadow so the embers pass behind the words, not through them */
  background:radial-gradient(ellipse 78% 62% at 50% 44%, rgba(6,7,6,.90) 0%, rgba(6,7,6,.62) 55%, transparent 78%);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.gate-eyebrow{font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:#7A6B55;margin:0 0 20px}
.wordmark{font-family:var(--f-label);font-weight:700;font-size:clamp(46px,10vw,92px);
  letter-spacing:.14em;margin:0;line-height:1;color:#F6EEE2;
  text-shadow:0 0 46px rgba(232,140,50,.42), 0 0 100px rgba(232,110,30,.22)}
.gate-line{font-family:var(--f-label);font-weight:600;font-size:clamp(17px,2.4vw,22px);
  line-height:1.35;color:#C6B49B;margin:22px 0 34px;letter-spacing:.01em}
.gate-line span{color:#E8A033}
.gate-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gate-form input{flex:1;min-width:210px;max-width:290px;background:rgba(10,12,10,.72);
  border:1px solid #3A3128;border-radius:3px;padding:14px 15px;font-size:15px;color:var(--ink);
  backdrop-filter:blur(3px);transition:border-color .2s}
.gate-form input::placeholder{color:#6E6355}
.gate-form input:focus{border-color:var(--amber);outline:none}
button.join{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:13px;padding:14px 26px;border-radius:3px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#F2B25A,#D0801C);color:#1A1002;border:1px solid #8A5510;
  border-top-color:#FBD08A;box-shadow:0 0 30px rgba(232,160,51,.34),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s, box-shadow .25s}
button.join:hover{transform:translateY(-1px);box-shadow:0 0 48px rgba(232,160,51,.5),inset 0 1px 0 rgba(255,255,255,.5)}
button.join:active{transform:translateY(1px)}
.gate-toggles{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:#8E8069;cursor:pointer}
.chk input{accent-color:var(--amber)}
button.linky{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:#8E8069;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:#4A4034}
button.linky:hover{color:var(--amber)}
.gate-foot{margin-top:26px;padding-bottom:6px;font-family:var(--f-label);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#5F5546}
.gate-foot a{color:#8E7A5C;text-decoration:none}
.gate-foot a:hover{color:var(--amber)}

/* ─────────────────────────── sheets ───────────────────────────
   The constitution and the primer used to sit in the layout and eat a third of it.
   They are reference, not instrumentation, so they open when asked and get out of
   the way when not. */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(4,6,4,.72);
  display:grid;place-items:center;padding:24px;animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.sheet-card{position:relative;max-width:600px;width:100%;max-height:86vh;overflow-y:auto;
  background:linear-gradient(180deg,#22261F,#141712);border:1px solid #000;
  border-top-color:var(--bezel-hi);border-radius:3px;padding:26px 28px 24px;
  box-shadow:0 30px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .24s cubic-bezier(.2,.7,.2,1) both}
.sheet-card h2{font-family:var(--f-label);font-weight:700;font-size:22px;letter-spacing:-.005em;
  margin:8px 0 18px;color:var(--ink)}
.sheet-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--ink-4);
  font-size:15px;cursor:pointer;padding:6px}
.sheet-x:hover{color:var(--amber)}
.sheet-card .panel.bare{background:none;border:0;box-shadow:none}
.sheet-card .panel.bare .ph{display:none}
.how{display:flex;flex-direction:column;gap:13px}
.how div{font-size:14.5px;line-height:1.55;color:var(--ink-2);padding-left:14px;
  border-left:2px solid #33291A}
.how b{color:var(--ink);font-weight:600}

/* ─────────────────────────── switches ─────────────────────────── */
button.primary{
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  background:linear-gradient(180deg,#EBAA46,#C97F1C);color:#170F02;border:1px solid #8A5510;
  border-top-color:#F5C57A;border-radius:2px;padding:12px 20px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #000}
button.primary:active{background:linear-gradient(180deg,#C97F1C,#EBAA46);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
button.primary.sm,button.ghostbtn.sm{padding:7px 11px;font-size:10.5px;letter-spacing:.1em}
button.ghostbtn{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:11px;
  background:linear-gradient(180deg,#282D26,#1A1E19);color:var(--ink-2);
  border:1px solid var(--bezel-lo);border-top-color:#3B4239;border-radius:2px;padding:10px 14px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 #000}
button.ghostbtn:hover{color:var(--amber);border-top-color:#4A5245}
button.ghostbtn.on{color:#1A1002;background:linear-gradient(180deg,#F2B25A,#D0801C);border-color:#8A5510}
button.ghostbtn.locked{color:var(--phos);border-color:#2A5745;background:#0F1A15;cursor:default}
button.ghostbtn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
button[disabled]{opacity:.35;cursor:not-allowed}

/* ─────────────────────────── rack head ─────────────────────────── */
header.top{display:flex;align-items:center;gap:14px;padding:0 14px;height:50px;flex-shrink:0;position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#252A24,#15180F 60%,#101210);
  border-bottom:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.brand{font-family:var(--f-label);font-weight:700;letter-spacing:.13em;font-size:17px;display:flex;align-items:center;gap:8px}
.brandfire{color:var(--amber);font-size:12px;text-shadow:0 0 12px rgba(232,160,51,.7)}
.roomid{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2);
  background:var(--slot);border:1px solid var(--bezel-lo);border-radius:2px;padding:4px 9px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.charter{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.spacer{flex:1}
.pop,.me{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pop b{color:var(--ink)}.me b{color:var(--phos)}
a.ghost,button.ghost{font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  color:var(--ink-3);text-decoration:none;border:1px solid var(--bezel-lo);border-top-color:#333A31;
  padding:5px 10px;border-radius:2px;background:linear-gradient(180deg,#242922,#181C17)}
a.ghost:hover,button.ghost:hover{color:var(--amber)}

/* ON AIR — the lamp is either lit or it is not */
.onair{font-family:var(--f-label);font-weight:700;letter-spacing:.2em;font-size:11px;padding:6px 12px 5px;
  border-radius:2px;border:1px solid #2A2E28;color:#3A4038;background:#141713;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);transition:none}
.onair.lit{color:#2A1704;border-color:#8A5510;
  background:linear-gradient(180deg,#F4BE63,#E8A033);
  box-shadow:0 0 18px rgba(232,160,51,.45),inset 0 1px 0 rgba(255,255,255,.5)}

/* ─────────────────────────── deck layout ─────────────────────────── */
.grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) minmax(0,.72fr);
  gap:9px;padding:9px;align-items:start;max-width:2100px;margin:0 auto}
.col{display:flex;flex-direction:column;gap:9px;min-width:0}
/* the stage stays put while the secondary panels scroll past it */
@media(min-width:1181px){
  .stagecol{position:sticky;top:59px}
}
.panel{
  background:linear-gradient(180deg,var(--panel-hi) 0%,var(--panel) 30%,var(--panel-lo) 100%);
  border:1px solid var(--bezel-lo);border-top-color:var(--bezel-hi);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 rgba(0,0,0,.55);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.panel.grow{flex:1}
.panel{min-width:0}
.ph{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-shrink:0;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,#22261F,#181B16);border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ph b{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ph:hover b{color:var(--amber)}
.caret{margin-left:auto;font-size:10px;color:var(--ink-4);transition:color .15s}
.ph:hover .caret{color:var(--amber)}
.panel.folded > *:not(.ph){display:none}
.panel.folded{background:linear-gradient(180deg,#1E221C,#161A14)}
.pf{padding:8px 12px;border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-size:11px;color:var(--ink-4);line-height:1.5}
.pf b{color:var(--amber);font-family:var(--f-mono)}
.scroll{overflow-y:auto;overflow-x:hidden;padding:8px 8px 12px;display:flex;flex-direction:column;
  gap:6px;min-height:0;background:var(--panel-lo)}
.scroll>*{flex:0 0 auto}
.scroll.sm{max-height:190px}

/* ─────────────────────────── the stage / master head ─────────────────────────── */

.stage{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel-lo));
  border:1px solid var(--bezel-lo);border-top-color:var(--bezel-hi);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 rgba(0,0,0,.55);
  overflow:hidden;flex-shrink:0}
.stagevid{position:relative;background:#050705;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid #000}
.stagevid video{width:100%;height:100%;object-fit:cover;display:block;background:#050705}
.novid{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(ellipse at 50% 42%,#171B16,#080A08 72%)}
.avatar{width:92px;height:92px;border-radius:50%;
  background:linear-gradient(180deg,#2A2F28,#171A16);border:1px solid #363C34;
  display:grid;place-items:center;font-family:var(--f-label);font-size:32px;font-weight:700;color:var(--ink-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
/* tally frame: the border that tells the studio which camera is live */
.stagevid::after{content:"";position:absolute;inset:0;pointer-events:none;border:2px solid transparent;transition:border-color .15s}
.stagevid.live::after{border-color:rgba(232,160,51,.55)}
.stagevid.warn::after{border-color:rgba(228,66,58,.8)}

.stageoverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,5,.7) 0,rgba(5,7,5,0) 30%,rgba(5,7,5,0) 52%,rgba(5,7,5,.86) 100%)}
.clockwrap{display:flex;align-items:flex-start;gap:12px}
#segClock{height:clamp(38px,6.6vw,56px);width:auto;filter:drop-shadow(0 0 12px rgba(232,160,51,.28))}
#segClock.warn{filter:drop-shadow(0 0 14px rgba(228,66,58,.34))}
.ratebox{display:flex;flex-direction:column;gap:1px;padding-top:3px}
.ratebox .lbl{font-size:9px;letter-spacing:.16em;color:var(--ink-3)}
.ratebox .val{font-family:var(--f-mono);font-weight:700;font-size:16px;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.1}
.ratebox .val.warn{color:var(--tally)}
.whoseat{display:flex;align-items:center;gap:10px}
/* an engraved source chip, like a labelled input on a switcher */
.door{font-family:var(--f-label);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 8px 3px;border-radius:2px;background:#0C0E0C;border:1px solid #2E3329;color:var(--ink-2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.door.bid{color:var(--phos);border-color:#25473A}
.door.lot{color:var(--amber);border-color:#4A3A19}
.door.dissent{color:var(--tally);border-color:#4C221F}
.door.ai{color:#7FB6E8;border-color:#243A4C}
.who{font-family:var(--f-label);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink)}
/* the vibe meter — two needles, never averaged. Where they disagree is the story. */
.vibe{display:flex;flex-direction:column;gap:2px;margin-left:6px;min-width:154px}
#vibeChart{width:154px;height:40px;display:block;background:rgba(0,0,0,.5);border-radius:2px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.75)}
.vibe-legend{display:flex;gap:10px}
.vk{font-family:var(--f-label);font-weight:700;font-size:8px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:4px;align-items:center}
.vk::before{content:"";width:7px;height:2px;border-radius:1px;background:var(--amber)}
.vk.ai{color:#7FB6E8}.vk.ai::before{background:#7FB6E8}
.vk b{font-family:var(--f-mono);color:var(--ink-2);font-weight:700}
.vibe-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.vibe-line.crowd{stroke:var(--amber)}
.vibe-line.ai{stroke:#7FB6E8}
.vibe-area{fill:rgba(232,160,51,.13);stroke:none}
.vibe-mid{stroke:rgba(255,255,255,.10);stroke-width:1}
.vibe-why{font-family:var(--f-body);font-size:10.5px;color:#7FB6E8;opacity:.85;
  line-height:1.3;max-width:230px}
/* who is up, and who is asking */
.uprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px 10px}
.uprow .lbl{font-size:9px}
.uprow .handsl{margin-left:8px}
.upchip,.handchip{font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:.04em;
  padding:4px 9px;border-radius:2px;border:1px solid var(--bezel-lo);background:#161A15;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px}
.upchip.host{border-color:var(--amber);color:var(--amber)}
.upchip button,.handchip button{background:none;border:0;color:inherit;cursor:pointer;font-size:12px;
  opacity:.6;padding:0 0 0 2px}
.upchip button:hover,.handchip button:hover{opacity:1;color:var(--tally)}
.handchip{border-style:dashed;cursor:pointer}
.handchip:hover{border-color:var(--phos);color:var(--phos)}
.openmic{font-family:var(--f-label);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--phos);border:1px solid #2A5745;background:#0F1A15;
  border-radius:2px;padding:4px 9px}
/* more than one person up: split the tile */
.stagevid.multi video{position:absolute;inset:0}
.guests{position:absolute;right:8px;bottom:14px;display:flex;gap:6px;z-index:2}
.guests .gv{width:104px;aspect-ratio:4/3;background:#0A0C0A;border:1px solid var(--amber);
  border-radius:3px;overflow:hidden;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.guests .gv video{width:100%;height:100%;object-fit:cover}
.guests .gv span{position:absolute;left:0;right:0;bottom:0;font-family:var(--f-label);font-weight:600;
  font-size:9.5px;padding:2px 4px;background:linear-gradient(transparent,rgba(5,7,5,.92));text-align:center}
@media(max-width:860px){.guests .gv{width:74px}}
.emberburst{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.emberburst span{position:absolute;bottom:-24px;font-size:20px;animation:up 2.6s ease-out forwards;opacity:.95}
@keyframes up{to{transform:translateY(-320px) rotate(var(--spin,20deg));opacity:0}}
@media(max-width:860px){.vibe{min-width:104px}.vibe-why{display:none}}

/* the lease is a travelling bar in a milled slot */
.leasebar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--slot);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.leasebar i{display:block;height:100%;width:100%;
  background:linear-gradient(180deg,#F4BE63,#D08D22);transition:width .12s linear}
.leasebar i.hot{background:linear-gradient(180deg,#F09A4A,#C4661E)}
.leasebar i.crit{background:linear-gradient(180deg,#F0605A,#B92B24)}
.leasebar .prot{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.45)}

/* ─────────────────────────── the flag ─────────────────────────── */
.tapsound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(180deg,#F2B25A,#D0801C);color:#1A1002;border:1px solid #8A5510;
  border-radius:3px;padding:11px 18px;cursor:pointer;box-shadow:0 0 26px rgba(232,160,51,.5)}
.flagring{position:absolute;inset:0;display:grid;place-items:center;background:rgba(228,66,58,.13);
  animation:tally 1.05s steps(1,end) infinite}
@keyframes tally{0%,49%{background:rgba(228,66,58,.06)}50%,100%{background:rgba(228,66,58,.22)}}
.flagring-in{text-align:center;background:#0B0D0B;border:1px solid var(--tally);border-radius:2px;
  padding:16px 30px;box-shadow:0 0 30px rgba(228,66,58,.3),inset 0 1px 0 rgba(255,255,255,.06)}
.flagpct{font-family:var(--f-mono);font-weight:700;font-size:46px;line-height:1;color:var(--tally);font-variant-numeric:tabular-nums}
.flaglbl{font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.flagsecs{font-family:var(--f-mono);font-size:13px;color:var(--tally);margin-top:9px;font-variant-numeric:tabular-nums}

/* ─────────────────────────── fader + meter ─────────────────────────── */
.controls{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:14px;align-items:center;
  padding:12px;border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dialwrap{min-width:0}
.diallabel{display:flex;justify-content:space-between;margin-bottom:6px}
.diallabel .lbl{font-size:9.5px}
.diallabel .lbl.cut{color:#8C4A45}
.diallabel .lbl.hold{color:#4E8A70}
/* a real fader: a milled travel slot with a knurled cap riding in it */
#dial{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:grab}
#dial:active{cursor:grabbing}
#dial::-webkit-slider-runnable-track{height:8px;border-radius:1px;
  background:linear-gradient(180deg,#050605,#131612);border:1px solid #000;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.04)}
#dial::-moz-range-track{height:8px;border-radius:1px;background:#0A0C0A;border:1px solid #000}
#dial::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:26px;margin-top:-10px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#4A5145 0 1px,#2C312A 1px 3px);
  border:1px solid #0B0D0B;border-top-color:#5D6557;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(0,0,0,.7)}
#dial::-moz-range-thumb{width:16px;height:26px;border-radius:2px;background:#3A4036;border:1px solid #0B0D0B}
.dialticks{display:flex;justify-content:space-between;margin-top:3px}
.dialticks span{width:1px;height:5px;background:#2E332C}
.dialticks span.mid{height:8px;background:#4A5145}

.meterbox{position:relative}
#vu{display:block;width:100%;height:auto}
button.flag{
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;
  background:linear-gradient(180deg,#3A211F,#231413);color:#E88C85;
  border:1px solid #0C0908;border-top-color:#6A3733;border-radius:2px;padding:14px 16px;cursor:pointer;
  white-space:nowrap;display:flex;gap:8px;align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 0 #000}
button.flag:hover{color:#fff;background:linear-gradient(180deg,#5A2A26,#341715)}
button.flag:active,button.flag.on{background:linear-gradient(180deg,#B62E27,#E4423A);color:#1A0605;
  border-top-color:#F07E77;box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 22px rgba(228,66,58,.5)}
.stagebtns{display:flex;gap:7px;padding:0 12px 12px;flex-wrap:wrap}

/* ─────────────────────────── monitor wall ─────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px;
  padding:2px;max-height:250px;overflow-y:auto}
.tile{position:relative;aspect-ratio:4/3;background:#0A0C0A;border:1px solid var(--bezel-lo);
  border-top-color:#2C3129;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tile.speaking{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 14px rgba(232,160,51,.25)}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-label);font-weight:700;
  font-size:21px;color:var(--ink-4);background:radial-gradient(ellipse at 50% 40%,#15180F,#090B09 75%)}
.tile .nm{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;font-family:var(--f-label);font-weight:600;
  font-size:10.5px;letter-spacing:.05em;background:linear-gradient(transparent,rgba(5,7,5,.94));
  display:flex;justify-content:space-between;gap:4px;align-items:center}
.tile .rk{font-family:var(--f-mono);font-size:9.5px;color:var(--amber);font-variant-numeric:tabular-nums}
.tile .dl{position:absolute;top:0;left:0;height:2px;background:var(--phos);transition:width .18s}
.tile .dl.neg{background:var(--tally)}
.tile .hand{position:absolute;top:3px;right:4px;font-size:12px}
/* your own tile carries the familiar mic/camera pills */
.tile .self{position:absolute;top:5px;left:5px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.tile.isme:hover .self,.tile.isme:focus-within .self{opacity:1}
.tile .self button{width:26px;height:26px;border-radius:50%;border:1px solid #0A0C0A;cursor:pointer;
  background:rgba(12,14,12,.86);color:#D7DED2;font-size:12px;display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.6);padding:0;line-height:1}
.tile .self button.off{background:var(--tally);color:#1A0605;border-color:#7A211C}
.tile .self button:hover{border-color:var(--amber)}
@media(hover:none){.tile.isme .self{opacity:1}}

/* ─────────────────────────── the rundown ─────────────────────────── */
.mic{padding:9px;border-bottom:1px solid #000;background:linear-gradient(180deg,#1E221C,#171A16);flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.mic textarea{width:100%;background:var(--slot);border:1px solid #000;border-bottom-color:#2C312A;border-radius:2px;
  padding:9px 10px;resize:vertical;font-size:13px;line-height:1.5;color:var(--ink);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.mic textarea::placeholder{color:var(--ink-4)}
.microw{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.microw input{flex:1;min-width:120px;background:var(--slot);border:1px solid #000;border-bottom-color:#2C312A;
  border-radius:2px;padding:9px 10px;font-size:12.5px;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.live{font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tally)}
.live.loading{color:var(--amber)}
.engine{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-4);margin-left:auto}

/* a rundown row: number in the margin, engraved rule under each item */
.q{position:relative;background:linear-gradient(180deg,#1C201A,#171A15);
  border:1px solid var(--bezel-lo);border-top-color:#2B3029;border-radius:2px;padding:9px 10px 9px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.q.qtop{border-left:3px solid var(--amber);padding-left:10px}
.q.addressed{opacity:.4}
.qh{display:flex;gap:9px;align-items:baseline}
.qh .n{font-family:var(--f-mono);font-weight:700;font-size:12px;color:var(--amber);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:2.2em}
.qh .t{flex:1;min-width:0;font-size:13.5px;line-height:1.4;color:var(--ink)}
.qsrc{font-family:var(--f-label);font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 6px 1px;border-radius:2px;background:#0C0E0C;border:1px solid #2A2E28;color:var(--ink-4);white-space:nowrap}
.qsrc.claude{color:#7FB6E8;border-color:#243A4C}
.heat{height:4px;background:var(--slot);border-radius:1px;margin:8px 0 7px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.heat i{display:block;height:100%;background:linear-gradient(90deg,#3E8F6D,var(--phos))}
.voices{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.voices span{display:block;padding-left:9px;border-left:1px solid #2A2F27;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.qbtns{display:flex;gap:6px;margin-top:8px}
.qbtns button{font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,#242822,#181B17);border:1px solid var(--bezel-lo);border-top-color:#343A31;
  color:var(--ink-3);border-radius:2px;padding:5px 9px;cursor:pointer}
.qbtns button:hover{color:var(--phos);border-top-color:#3E6B58}
.qbtns button.done{color:var(--phos);border-color:#2A5745}

/* ─────────────────────────── the AI position ─────────────────────────── */
.claudebody{padding:10px;display:flex;flex-direction:column;gap:9px;background:var(--panel-lo)}
.stance{display:flex;flex-direction:column;gap:9px}
.stancerow .k{font-family:var(--f-label);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7FB6E8}
.stancerow p{margin:3px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.48}
.claudesaid{background:#101512;border-left:2px solid #7FB6E8;padding:10px 12px;font-size:13px;
  line-height:1.55;max-height:190px;overflow-y:auto;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}

/* ─────────────────────────── the ladder ─────────────────────────── */
.rk-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:5px 9px;align-items:center;
  padding:7px 9px 8px;border-radius:2px;background:linear-gradient(180deg,#1C201A,#171A15);
  border:1px solid var(--bezel-lo);border-top-color:#2A2F28;overflow:hidden}
.rk-row.me{border-left:2px solid var(--amber)}
.rk-row .p{font-family:var(--f-mono);font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.rk-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-label);font-weight:600;font-size:13.5px;letter-spacing:.02em}
.rk-row .n .ai{color:#7FB6E8;font-family:var(--f-mono);font-size:9.5px;margin-left:5px}
.rk-row .w{font-family:var(--f-mono);font-size:11.5px;color:var(--amber);font-variant-numeric:tabular-nums}
.rk-row .s{font-family:var(--f-mono);font-size:10px;color:var(--ink-4);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rk-row .bar{grid-column:1/-1;height:3px;background:var(--slot);border-radius:1px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.rk-row .bar i{display:block;height:100%;background:linear-gradient(90deg,#8A5F1E,var(--amber))}

/* ─────────────────────────── governance ─────────────────────────── */
.rulesround{margin:9px;padding:11px;border:1px solid #4A3A19;border-top-color:#6B5426;
  background:linear-gradient(180deg,#231D11,#171308);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rr-h{font-family:var(--f-label);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.rr-l{font-size:13.5px;margin:6px 0 10px;font-weight:600;color:var(--ink)}
.rr-b{display:flex;gap:6px}
.rr-b button{flex:1;padding:9px;border-radius:2px;cursor:pointer;
  font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--bezel-lo);border-top-color:#343A31;color:var(--ink-2);
  background:linear-gradient(180deg,#242822,#181B17);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rr-b .yes.on{background:linear-gradient(180deg,#6FDDAC,#35A277);border-color:#1E5B41;color:#04170F}
.rr-b .no.on{background:linear-gradient(180deg,#EF6058,#B92B24);border-color:#6B1B16;color:#1A0605}
.rr-t{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);margin-top:8px;font-variant-numeric:tabular-nums}
.fork{margin:9px;padding:11px;border:1px solid #4C221F;border-top-color:#6E3530;
  background:linear-gradient(180deg,#241412,#170C0B);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.fork b{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tally)}
.fork p{margin:5px 0 10px;font-size:12px;color:var(--ink-2)}
.propose{display:flex;gap:5px;padding:9px;border-bottom:1px solid #000}
.propose select,.propose input{background:var(--slot);border:1px solid #000;border-bottom-color:#2C312A;
  border-radius:2px;padding:7px;font-size:11.5px;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.propose select{flex:1;min-width:0}
.propose input{width:76px}
.am{background:linear-gradient(180deg,#1C201A,#171A15);border:1px solid var(--bezel-lo);border-top-color:#2A2F28;
  border-radius:2px;padding:7px 9px;font-size:12px;line-height:1.45}
.am .st{font-family:var(--f-label);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.am .st.passed{color:var(--phos)}.am .st.failed{color:var(--tally)}
.am .st.open{color:var(--amber)}.am .st.pending{color:var(--ink-4)}

/* the parameter strip reads like a settings decal on the back of the unit */
.params{padding:9px 12px;border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-family:var(--f-mono);font-size:10px;
  color:var(--ink-4);max-height:112px;overflow-y:auto;align-content:start;background:var(--panel-lo)}
.params span{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.params span::after{content:"";flex:1;order:1;border-bottom:1px dotted #262B24;margin:0 4px 3px}
.params b{color:var(--ink-2);font-weight:500;order:2;font-variant-numeric:tabular-nums}
.modules{padding:9px 12px;border-top:1px solid #000;display:flex;flex-wrap:wrap;gap:5px;background:var(--panel-lo)}
.modules button{font-family:var(--f-label);font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px 3px;border-radius:2px;cursor:pointer;border:1px solid #22261F;color:var(--ink-4);
  background:#0E100E;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.modules button.on{color:var(--phos);border-color:#2A5745;background:#0F1A15;
  box-shadow:inset 0 1px 0 rgba(95,211,162,.16)}

/* the log prints in fixed pitch, because it always did */
.ev{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);line-height:1.5;display:flex;gap:8px}
.ev b{color:var(--amber);font-weight:400;font-variant-numeric:tabular-nums}
.tx{font-size:12.5px;line-height:1.5}
.tx b{font-family:var(--f-label);font-weight:700;letter-spacing:.06em;font-size:11px;text-transform:uppercase;color:var(--amber)}
.tx.ai b{color:#7FB6E8}

/* ─────────────────────────── annunciators ─────────────────────────── */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:6px;z-index:70;align-items:center;pointer-events:none}
.toast{font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,#272C25,#14170F);border:1px solid #000;border-top-color:#3C4339;
  border-left:3px solid var(--amber);border-radius:2px;padding:9px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.toast.warn{border-left-color:#C98A2A}
.toast.bad{border-left-color:var(--tally)}
.toast.good{border-left-color:var(--phos)}

@media(max-width:1180px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sidecol{grid-column:1/-1}
  .stagecol{position:static}
}
/* ─────────────────────────── phones ───────────────────────────
   One column, stage first. The instruments stay — they are the product — but the
   fader and the flag become thumb-sized, and the secondary panels collapse so the
   first screen is the fire, not a dashboard. */
@media(max-width:860px){
  body{font-size:14.5px}
  header.top{height:auto;padding:8px 12px;gap:9px;flex-wrap:wrap}
  header.top .charter,header.top .me{display:none}
  .brand{font-size:15px}
  a.ghost,button.ghost{font-size:10px;padding:5px 8px}
  .grid{grid-template-columns:1fr;padding:8px;gap:8px}
  .stagevid{aspect-ratio:4/3}
  #segClock{height:clamp(34px,11vw,52px)}
  .controls{grid-template-columns:1fr;gap:12px;padding:12px}
  .meterbox{max-width:220px;margin:0 auto}
  #dial{height:44px}
  #dial::-webkit-slider-thumb{width:26px;height:40px;margin-top:-16px}
  #dial::-webkit-slider-runnable-track{height:10px}
  button.flag{width:100%;justify-content:center;padding:17px}
  .stagebtns{padding:0 12px 12px}
  .stagebtns button{flex:1 1 44%;min-height:46px;justify-content:center;display:flex;align-items:center}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));max-height:none}
  .scroll{max-height:340px}
  .scroll.sm{max-height:220px}
  .mic textarea{font-size:16px}          /* 16px stops iOS zooming the whole page on focus */
  .microw input{font-size:16px}
  .microw button{flex:1 1 auto;min-height:42px}
  .sheet{padding:0;place-items:end stretch}
  .sheet-card{max-width:none;max-height:88vh;border-radius:12px 12px 0 0;padding:22px 20px}
  .toasts{bottom:10px;left:10px;right:10px;transform:none}
  .toast{width:100%;text-align:center}
  .wordmark{letter-spacing:.1em}
  .gate-form{flex-direction:column;align-items:stretch}
  .gate-form input{max-width:none}
  button.join{padding:16px}
}
@media(max-width:860px) and (orientation:landscape){
  .stagevid{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─────────────────────────── the two instruments ─────────────────────────── */
.seg{fill:var(--amber);opacity:.075}       /* dark segments stay visible — that is what makes an LED display read as real */
.seg.lit{opacity:1}
#segClock.warn .seg{fill:var(--tally)}

.meterbox{border-radius:3px;padding:0;background:#0A0C0A;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05)}
#vu{display:block;width:100%;height:auto;border-radius:3px}
.vu-bezel{fill:#0E100D;stroke:#3A4036;stroke-width:1}
.vu-scale{fill:none;stroke:#3B3A30;stroke-width:1.2}
.vu-band-cut{fill:none;stroke:#B8342B;stroke-width:3;stroke-linecap:round}
.vu-band-hold{fill:none;stroke:#3C7A5C;stroke-width:3;stroke-linecap:round}
.vu-tick{stroke:#6E6B5A;stroke-width:1}
.vu-tick.major{stroke:#2E2D26;stroke-width:1.5}
.vu-lbl{fill:#4A483C;font-family:var(--f-label);font-weight:700;font-size:8.5px;letter-spacing:.16em;text-anchor:middle}
.vu-lbl.mid{fill:#26251F}
.vu-cap{fill:#8A8471;font-family:var(--f-label);font-weight:700;font-size:7.5px;letter-spacing:.26em}
.vu-needle{stroke:#1C1B16;stroke-width:1.6;stroke-linecap:round}
.vu-needle.cut{stroke:#B8342B}
.vu-tail{stroke:#1C1B16;stroke-width:2.6;stroke-linecap:round}
.vu-hub{fill:#2A2922;stroke:#15140F;stroke-width:1}
.vu-read{fill:#33322A;font-family:var(--f-mono);font-weight:700;font-size:9.5px}
.vu-read.cut{fill:#B8342B}