/* ══════════════════════════════════════════════════════════════════════════
   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{
  /* CLUB STAGE — near-black canvas, thin blue borders, glow only where something is live.
     Blue is functional emphasis, never decoration. Amber stays reserved for time and
     standing; green for who is on; red for cutting. */
  --canvas:#01040B; --canvas-deep:#000208;
  --panel:#061022; --panel-hi:#0A1730; --panel-lo:#020817; --deck:#01040B;
  --bezel-hi:#123C77;            /* the thin blue edge  */
  --bezel-lo:#000208;
  --slot:#01050E;                /* fader travel, meter face */
  --line:rgba(18,107,255,.24); --line2:rgba(18,107,255,.44);

  /* type */
  --ink:#F3F6FF; --ink-2:#B8C6E6; --ink-3:#8190B3; --ink-4:#55648A;

  /* the lamps */
  --blue:#126BFF; --blue-hi:#2A8CFF; --cyan:#2CC8FF; --violet:#6D3DFF;
  --blue-dim:rgba(18,107,255,.15);
  --glow:0 0 14px rgba(18,107,255,.28);
  --amber:#FFC14A;  --amber-dim:rgba(255,193,74,.14);   /* time · standing · on air */
  --phos:#35F2B1;   --phos-dim:rgba(53,242,177,.13);    /* the room giving time */
  --tally:#FF5449;  --tally-dim:rgba(255,84,73,.15);    /* 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:#222E3D;border:2px solid var(--panel-lo);border-radius:5px}
:focus-visible{outline:2px solid var(--blue-hi);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%, #071838 0%, #020A18 60%, #01040B 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 motes pass behind the words, not through them */
  background:radial-gradient(ellipse 86% 74% at 50% 46%, rgba(1,5,14,.93) 0%, rgba(1,5,14,.78) 52%, rgba(1,5,14,.34) 72%, transparent 88%);
  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:#6C86B4;margin:0 0 20px}

/* the live strip — a real reading of the room, or hidden */
.livebar{display:inline-flex;align-items:center;gap:10px;margin:2px 0 22px;
  padding:8px 15px 8px 13px;border-radius:999px;
  background:rgba(6,16,34,.72);border:1px solid var(--line);backdrop-filter:blur(6px)}
.livebar .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.livebar.on .dot{background:var(--phos);box-shadow:0 0 0 0 rgba(53,242,177,.6);animation:pulsedot 2.2s ease-out infinite}
@keyframes pulsedot{0%{box-shadow:0 0 0 0 rgba(53,242,177,.55)}70%{box-shadow:0 0 0 9px rgba(53,242,177,0)}100%{box-shadow:0 0 0 0 rgba(53,242,177,0)}}
.livebar b{font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink)}
.livebar i{font-style:normal;font-size:12px;color:var(--ink-3)}
.livebar.on i{color:var(--phos)}
.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(42,140,255,.42), 0 0 100px rgba(18,107,255,.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:#FFC14A}
.gate-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#gpass{max-width:180px}
.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(--blue);outline:none;box-shadow:var(--glow)}
button.join{
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;
  background:linear-gradient(180deg,#2A8CFF,#0F55CC);color:#F5F9FF;border:1px solid #0B3F9E;
  border-top-color:#6EB4FF;border-radius:6px;padding:16px 26px;cursor:pointer;transition:.18s;
  box-shadow:0 0 30px rgba(18,107,255,.38),inset 0 1px 0 rgba(255,255,255,.26)}
button.join:hover{transform:translateY(-1px);box-shadow:0 0 52px rgba(42,140,255,.55),inset 0 1px 0 rgba(255,255,255,.32)}
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:var(--ink-3);cursor:pointer}
.chk:hover{color:var(--ink-2)}
.chk input{accent-color:var(--blue)}
button.linky{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(18,107,255,.5)}
button.linky:hover{color:var(--blue-hi)}
.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:#4E608A}
.gate-foot a{color:#7F97C4;text-decoration:none}
.gate-foot a:hover{color:var(--blue-hi)}

/* ─────────────────────────── 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,#19212C,#0F141A);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(--blue-hi)}
.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 ─────────────────────────── */
/* Blue is the action colour. Amber stays reserved for time and standing — if the
   primary button is amber then amber means nothing. */
button.primary{
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  background:linear-gradient(180deg,#2A8CFF,#0F55CC);color:#F3F6FF;border:1px solid #0B3F9E;
  border-top-color:#5AAAFF;border-radius:6px;padding:12px 20px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 14px rgba(18,107,255,.22)}
button.primary:hover{background:linear-gradient(180deg,#3D98FF,#1462DD);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 20px rgba(18,107,255,.4)}
button.primary:active{background:linear-gradient(180deg,#0F55CC,#2A8CFF);box-shadow:inset 0 2px 6px 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,#1E2835,#141A23);color:var(--ink-2);
  border:1px solid var(--bezel-lo);border-top-color:#2C3B4F;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(--blue-hi);border-color:var(--line2)}
button.ghostbtn.on{color:#170F02;background:linear-gradient(180deg,#FFD07A,#E09A2A);border-color:#7A5A18}
button.ghostbtn.locked{color:var(--phos);border-color:#146B52;background:#04231A;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,#1C2632,#0A121D 60%,#0C1016);
  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}

.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(--line);
  padding:6px 11px;border-radius:5px;background:rgba(6,16,34,.7);transition:.14s}
a.ghost:hover,button.ghost:hover{color:var(--ink);border-color:var(--line2);box-shadow:0 0 12px rgba(18,107,255,.18)}

/* 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:5px;border:1px solid #14243E;color:#33486B;background:#020817;transition:none}
.onair.lit{color:#DCEBFF;border-color:var(--blue);
  background:linear-gradient(180deg,rgba(18,107,255,.30),rgba(18,107,255,.12));
  box-shadow:0 0 18px rgba(42,140,255,.42),inset 0 1px 0 rgba(255,255,255,.12)}

/* ─────────────────────────── 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,#19212C,#12181F);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(--blue-hi)}
.caret{margin-left:auto;font-size:10px;color:var(--ink-4);transition:color .15s}
.ph:hover .caret{color:var(--blue-hi)}
.panel.folded > *:not(.ph){display:none}
.panel.folded{background:linear-gradient(180deg,#161E28,#10161E)}
.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:#040608;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid #000}
.stagevid video{width:100%;height:100%;object-fit:cover;display:block;background:#040608}
.aianface{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.novid{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(ellipse at 50% 42%,#12181F,#06090C 72%)}
.avatar{width:92px;height:92px;border-radius:50%;
  background:linear-gradient(180deg,#1F2A38,#11171F);border:1px solid #283648;
  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(18,107,255,.6);box-shadow:inset 0 0 26px rgba(18,107,255,.14)}
.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 92px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,5,.7) 0,rgba(5,7,5,0) 28%,rgba(5,7,5,0) 62%,rgba(5,7,5,.55) 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(--blue-hi);font-variant-numeric:tabular-nums;line-height:1.1}
.ratebox .val.warn{color:var(--tally)}
.whoseat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 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:5px 9px 4px;border-radius:5px;background:#020817;border:1px solid var(--line);color:var(--ink-2)}
.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:var(--cyan);border-color:rgba(44,200,255,.4);box-shadow:0 0 10px rgba(44,200,255,.16)}
.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. */
/* the vibe strip runs the full width of the stage, directly above the lease bar —
   two lines over one dark band, so the whole turn is readable at a glance */
.vibe{position:absolute;left:0;right:0;bottom:6px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,4,0) 0%,rgba(4,6,4,.80) 34%,rgba(4,6,4,.94) 100%);
  padding:16px 12px 6px}
#vibeChart{width:100%;height:40px;display:block}
.vibe-legend{display:flex;gap:14px;align-items:baseline;margin-top:3px;flex-wrap:nowrap;min-width:0}
.vk{font-family:var(--f-label);font-weight:700;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:5px;align-items:center}
.vk::before{content:"";width:10px;height:2px;border-radius:1px;background:var(--blue-hi)}
.vk.ai{color:#7FB6E8}.vk.ai::before{background:#7FB6E8}
.vk b{font-family:var(--f-mono);color:var(--ink);font-weight:700;font-size:11px}
.vibe-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.vibe-line.crowd{stroke:var(--blue-hi);filter:drop-shadow(0 0 5px rgba(42,140,255,.55))}
.vibe-line.ai{stroke:var(--cyan);filter:drop-shadow(0 0 5px rgba(44,200,255,.55))}
.vibe-mid{stroke:rgba(255,255,255,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.vibe-why{font-family:var(--f-body);font-size:11px;color:#7FB6E8;opacity:.9;
  text-transform:none;letter-spacing:0;font-weight:400;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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){
  .stageoverlay{padding:10px 12px 84px}
  .vibe-why{display:none}
  .who{font-size:17px}
}

/* 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)}
/* Time runs blue and heats through amber to red as the lease burns down — so the
   colour itself tells you how long you have without reading the clock. */
.leasebar i{display:block;height:100%;width:100%;
  background:linear-gradient(180deg,#4FA3FF,#0F55CC);transition:width .12s linear;
  box-shadow:0 0 10px rgba(42,140,255,.45)}
.leasebar i.hot{background:linear-gradient(180deg,#FFC85E,#D08D22);box-shadow:0 0 10px rgba(255,193,74,.45)}
.leasebar i.crit{background:linear-gradient(180deg,#FF6B5E,#B92B24);box-shadow:0 0 12px rgba(255,84,73,.55)}
.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,#FFD07A,#E09A2A);color:#170F02;border:1px solid #7A5A18;
  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:#090C0F;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:#3164A7}
/* 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,#040507,#0E131A);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:#080B0E;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,#364860 0 1px,#212C3A 1px 3px);
  border:1px solid #090C0F;border-top-color:#4D5C6F;
  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:#2A394C;border:1px solid #090C0F}
.dialticks{display:flex;justify-content:space-between;margin-top:3px}
.dialticks span{width:1px;height:5px;background:#222E3D}
.dialticks span.mid{height:8px;background:#364860}

.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:.14em;font-size:11px;
  background:linear-gradient(180deg,#3A1614,#1E0C0B);color:#FF9B8C;
  border:1px solid #000;border-top-color:#8A3A30;border-radius:6px;cursor:pointer;
  white-space:nowrap;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  height:84px;width:118px;padding:0;                     /* matches the meter beside it */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 0 #000}
button.flag svg{width:26px;height:26px;color:currentColor}
button.flag:hover{color:#fff;background:linear-gradient(180deg,#5A2A26,#341715)}
button.flag:active,button.flag.on{background:linear-gradient(180deg,#B62E27,#FF5449);color:#1A0403;
  border-top-color:#F07E77;box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 22px rgba(228,66,58,.5)}
/* one row of round controls, the way every call app does it — the instruments above
   are what makes this different, so the plumbing below should be unremarkable */
.bar{display:flex;align-items:flex-start;gap:6px;padding:2px 12px 12px;flex-wrap:wrap}
.barsep{width:1px;align-self:stretch;background:var(--bezel-lo);margin:4px 5px}
button.ic{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;
  cursor:pointer;padding:0;width:60px;color:var(--ink-3)}
button.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  box-sizing:content-box;padding:10px;border-radius:50%;
  background:linear-gradient(180deg,#1D2734,#141A23);border:1px solid var(--bezel-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:.14s}
button.ic b{font-family:var(--f-label);font-weight:600;font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.1;text-align:center}
button.ic:hover{color:var(--ink)}
button.ic:hover svg{border-color:#2D3D51}
/* OFF is struck through, not lit up. A solid red disc is what every other product uses
   for "recording" — filling the button red to mean "muted" says the opposite of what it
   means. The control recedes; a single red stroke crosses it out. */
button.ic .slash{opacity:0;stroke:#D9503C;stroke-width:2.3;transition:opacity .14s}
button.ic.off svg{background:linear-gradient(180deg,#131A22,#0D1116);border-color:#000;
  border-top-color:#1F2937;color:#6F7EA3}
button.ic.off .slash{opacity:1}
button.ic.off{color:#C46A57}
button.ic.off:hover svg{border-top-color:#2D3D51;color:#8FA0C4}
button.ic.on svg{background:linear-gradient(180deg,#FFD07A,#E09A2A);color:#170F02;border-color:#7A5A18}
button.ic.on{color:var(--amber)}
button.ic.go:hover svg{border-color:#146B52;color:var(--phos)}
button.ic.live svg{background:#04231A;border-color:#146B52;color:var(--phos)}
button.ic.live{color:var(--phos)}
@media(max-width:860px){
  .bar{gap:2px;justify-content:center}
  button.ic{width:56px}
  button.flag{width:100%;height:64px;flex-direction:row;gap:10px}
}

/* ─────────────────────────── 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:#080B0E;border:1px solid var(--bezel-lo);
  border-top-color:#202B3A;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tile.speaking{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 16px rgba(18,107,255,.35)}
.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%,#0A121D,#070A0D 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 #080B0E;cursor:pointer;
  background:rgba(12,14,12,.86);color:#CBD6E5;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:#1A0403;border-color:#8A2620}
.tile .self button:hover{border-color:var(--blue)}
@media(hover:none){.tile.isme .self{opacity:1}}

/* ─────────────────────────── the rundown ─────────────────────────── */
/* the invitation — the board only works if the crowd knows it is theirs */
.invite{display:flex;gap:11px;align-items:flex-start;padding:11px 10px;
  background:linear-gradient(180deg,#141C26,#11171E);border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.listenpill{display:flex;align-items:center;gap:7px;flex-shrink:0;cursor:pointer;
  font-family:var(--f-label);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  background:linear-gradient(180deg,#1D2734,#131A22);color:var(--ink-2);
  border:1px solid var(--bezel-lo);border-top-color:#2C3B4F;border-radius:3px;padding:9px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.listenpill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.listenpill:hover{color:var(--phos);border-top-color:#1B7A5E}
.listenpill.on{background:linear-gradient(180deg,#4CF7BE,#1FA87C);color:#01120C;border-color:#0E6B4E}
.listenpill.on svg{animation:pulsemic 1.6s ease-in-out infinite}
.listenpill .slash{opacity:0;transition:opacity .16s}
/* OFF must read as off. A filled red button reads as "live/recording" — exactly backwards.
   So: the button goes quiet and recedes, and the mic gets struck through. The only red is
   the stroke of the slash itself, which is the universal "not this" mark. */
.listenpill.off{background:linear-gradient(180deg,#151C25,#0F141A);
  color:var(--ink-4);border-color:#000;border-top-color:#1F2937;opacity:.9}
.listenpill.off .slash{opacity:1;stroke:#D9503C;stroke-width:2.2}
.listenpill.off svg{animation:none;opacity:.55}
.listenpill.off:hover{color:var(--ink-3);border-top-color:#2C3B4F;opacity:1}
.invitecopy.muted b{color:#8A93B8}
@keyframes pulsemic{0%,100%{opacity:1}50%{opacity:.45}}
.invitecopy{margin:0;font-size:12px;line-height:1.45;color:var(--ink-3);min-height:62px}
.invitecopy p{margin:0}
/* both status lines always occupy their space, so toggling never reflows the panel */
.invitecopy b{display:block;min-height:13px;font-family:var(--f-label);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--phos);margin-top:3px}
.invitecopy i{display:block;min-height:12px;font-style:normal;font-family:var(--f-mono);
  font-size:9.5px;color:var(--ink-4)}

.makemenu{position:absolute;z-index:20;margin-top:4px;display:flex;flex-direction:column;min-width:150px;
  background:linear-gradient(180deg,#1B2430,#12181F);border:1px solid #000;border-top-color:#2C3B4F;
  border-radius:3px;box-shadow:0 14px 34px -12px #000;overflow:hidden}
.makemenu button{background:none;border:0;text-align:left;padding:10px 13px;cursor:pointer;
  font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.makemenu button:hover{background:rgba(18,107,255,.14);color:var(--blue-hi)}
.making{display:flex;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid #000;
  background:#0F151E;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--phos)}
.making i{width:9px;height:9px;border-radius:50%;background:var(--phos);animation:pulsemic 1.1s ease-in-out infinite;flex-shrink:0}
.madecard{padding:9px;border-bottom:1px solid #000;background:#0B111A}
.madecard a{display:block;position:relative;border:1px solid #202B3A;border-radius:3px;overflow:hidden}
.madecard img{width:100%;display:block}
.madecard .cc{position:absolute;left:0;right:0;bottom:0;padding:10px 8px 8px;
  background:linear-gradient(transparent,rgba(4,6,4,.92));font-family:var(--f-label);font-weight:700;
  font-size:14px;text-transform:uppercase;text-align:center;color:#fff;text-shadow:0 2px 8px #000}
.madecard .mm{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--f-mono);
  font-size:10px;color:var(--ink-4)}
@media(max-width:860px){.invite{flex-direction:column;gap:8px}.listenpill{width:100%;justify-content:center}}
.mic{padding:9px;border-bottom:1px solid #000;background:linear-gradient(180deg,#161E28,#11171F);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:#212C3A;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:#212C3A;
  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(--cyan)}
.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,#151C25,#11171E);
  border:1px solid var(--bezel-lo);border-top-color:#202B39;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(--blue);padding-left:10px}
.q.landed{animation:landed 2.4s ease-out}
@keyframes landed{0%{box-shadow:0 0 0 2px var(--phos),0 0 26px rgba(95,211,162,.5)}100%{box-shadow:none}}
.q.onfloor{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue),0 0 18px rgba(18,107,255,.2)}
.q.answered{opacity:.62}
.qsrc.live{color:#170F02;background:linear-gradient(180deg,#FFD07A,#E09A2A);border-color:#7A5A18}
.qh{display:flex;gap:9px;align-items:baseline}
.qh .n{font-family:var(--f-mono);font-weight:700;font-size:12px;color:var(--blue-hi);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:#090D11;border:1px solid #1F2937;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 #1F2937;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,#1B242F,#121820);border:1px solid var(--bezel-lo);border-top-color:#273444;
  color:var(--ink-3);border-radius:2px;padding:5px 9px;cursor:pointer}
.qbtns button:hover{color:var(--phos);border-top-color:#1B7A5E}
.qbtns button.done{color:var(--phos);border-color:#146B52}

/* ─────────────────────────── 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:#0D1218;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,#151C25,#11171E);
  border:1px solid var(--bezel-lo);border-top-color:#1F2A38;overflow:hidden}
.rk-row.me{border-left:2px solid var(--blue)}
.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,#7A5A18,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(--blue-hi)}
.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:#273444;color:var(--ink-2);
  background:linear-gradient(180deg,#1B242F,#121820);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rr-b .yes.on{background:linear-gradient(180deg,#4CF7BE,#1FA87C);border-color:#0E6B4E;color:#01120C}
.rr-b .no.on{background:linear-gradient(180deg,#EF6058,#B92B24);border-color:#6B1B16;color:#1A0403}
.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:#212C3A;
  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,#151C25,#11171E);border:1px solid var(--bezel-lo);border-top-color:#1F2A38;
  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 #1C2633;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 #19212C;color:var(--ink-4);
  background:#0B0E13;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.modules button.on{color:var(--phos);border-color:#146B52;background:#04231A;
  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,#1D2734,#0A121C);border:1px solid #000;border-top-color:#2D3C4F;
  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(--blue-hi);opacity:.10}       /* dark segments stay visible — that is what makes an LED display read as real */
.seg.lit{opacity:1}
#segClock.warn .seg{fill:var(--tally)}
.seg.lit{filter:drop-shadow(0 0 8px rgba(42,140,255,.55))}

.meterbox{border-radius:3px;padding:0;background:#080B0E;
  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:#01040B;stroke:#123C77;stroke-width:1}
.vu-scale{fill:none;stroke:#3E5878;stroke-width:1.2}
.vu-band-cut{fill:none;stroke:#D9382C;stroke-width:3;stroke-linecap:round}
.vu-band-hold{fill:none;stroke:#35F2B1;stroke-width:3;stroke-linecap:round}
.vu-tick{stroke:#4E617A;stroke-width:1}
.vu-tick.major{stroke:#6E8AB4;stroke-width:1.5}
.vu-lbl{fill:#7B92B8;font-family:var(--f-label);font-weight:700;font-size:8.5px;letter-spacing:.16em;text-anchor:middle}
.vu-lbl.mid{fill:#A8BCDC}
.vu-cap{fill:#627A99;font-family:var(--f-label);font-weight:700;font-size:7.5px;letter-spacing:.26em}
.vu-needle{stroke:#CFE0FF;stroke-width:1.6;stroke-linecap:round}
.vu-needle.cut{stroke:#D9382C}
.vu-tail{stroke:#8FA8CE;stroke-width:2.6;stroke-linecap:round}
.vu-hub{fill:#2A3E5E;stroke:#0B1119;stroke-width:1}
.vu-read{fill:#9CB4D8;font-family:var(--f-mono);font-weight:700;font-size:9.5px}
.vu-read.cut{fill:#D9382C}

/* mute AIAN's voice — yours only, nothing is broadcast */
.aianmute{margin-left:auto;margin-right:8px;background:none;border:1px solid var(--line);border-radius:5px;
  color:var(--dim);padding:2px 5px;cursor:pointer;display:grid;place-items:center;transition:.14s}
.aianmute:hover{color:var(--ink);border-color:var(--line2)}
.aianmute .off{display:none}
.aianmute.muted{color:var(--tally);border-color:color-mix(in srgb,var(--tally) 45%,transparent)}
.aianmute.muted .on{display:none} .aianmute.muted .off{display:block}

/* the flip only means anything where there are two cameras */
.mobonly{display:none}
body.hasflip .mobonly{display:flex}
/* how long this fire has been burning */
.calltime{font:600 11px/1 var(--f-mono);color:var(--ink-4);letter-spacing:.09em;
  padding:5px 8px;border:1px solid var(--line);border-radius:5px;white-space:nowrap}
.calltime b{color:var(--blue-hi);font-weight:600}

/* ── Presence without a camera ──────────────────────────────────────────────
   An empty stage used to be a grey dash on black, which reads as broken rather
   than as available. Now: a fire that breathes, and an invitation. And when
   somebody IS on stage with their camera off, their photo (or initials) sits
   inside a ring that moves with their actual voice — so you can see who is
   talking even when you cannot see them. */
.novid .ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.novid .avatar{position:relative;z-index:1;overflow:hidden}
.novid .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.emptystage{position:absolute;inset:0;z-index:2;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px}
.novid.empty .avatar,.novid.empty .ring{display:none}
.novid.empty .emptystage{display:flex}
.emptymark{width:74px;height:74px;object-fit:contain;opacity:.9;
  filter:drop-shadow(0 0 26px rgba(42,140,255,.45));animation:markbreath 5.5s ease-in-out infinite}
.emptystage b{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#8FB6EE}
.emptystage span{font-size:12.5px;color:var(--ink-4);max-width:290px;line-height:1.5}
.setpic{position:absolute;right:12px;bottom:12px;z-index:6;width:32px;height:32px;display:grid;place-items:center;
  background:rgba(12,14,11,.72);border:1px solid var(--line);border-radius:6px;color:var(--ink-3);cursor:pointer;
  backdrop-filter:blur(4px);transition:.15s;opacity:0}
.stagevid:hover .setpic{opacity:1}
.setpic:hover{color:var(--amber);border-color:#3A4A78}
.setpic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile .ini{overflow:hidden}
.tile .ini img{width:100%;height:100%;object-fit:cover;display:block}

/* AIAN mid-sentence: a cursor, so a pause reads as thinking rather than as broken */
.claudesaid.writing::after{content:"";display:inline-block;width:7px;height:1.05em;
  vertical-align:-2px;margin-left:3px;background:var(--amber);animation:cur .9s steps(2) infinite}
@keyframes cur{0%,100%{opacity:1}50%{opacity:0}}

.opsbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:400;
  display:flex;align-items:center;gap:14px;max-width:min(680px,92vw);
  padding:11px 14px;border-radius:6px;font-size:12.5px;line-height:1.45;
  background:linear-gradient(180deg,#2E2418,#1C1710);border:1px solid #6A4A1E;
  color:#E8C68A;box-shadow:0 18px 40px -14px #000}
.opsbar button{flex-shrink:0;background:none;border:1px solid #6A4A1E;border-radius:4px;
  color:#C9A46A;padding:4px 9px;cursor:pointer;font-family:var(--f-label);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase}
.opsbar button:hover{color:#F0DCB4;border-color:#8A6428}

/* ── identity ──────────────────────────────────────────────────────────────
   The wordmark is custom lettering, not a typeface — it is always the artwork,
   never an approximation. currentColor drives the SVG fill. */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brandmark{width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(42,140,255,.45))}
.brandword{height:30px;width:auto;opacity:.92}
.brand:hover .brandword{opacity:1}
.gatemark{width:104px;height:104px;object-fit:contain;margin:0 auto 14px;display:block;
  filter:drop-shadow(0 0 30px rgba(42,140,255,.5));animation:markbreath 6s ease-in-out infinite}
@keyframes markbreath{0%,100%{transform:scale(1);opacity:.96}50%{transform:scale(1.035);opacity:1}}
img.wordmark{display:block;width:min(430px,72vw);height:auto;margin:0 auto 18px;
  filter:drop-shadow(0 0 22px rgba(42,140,255,.28))}
/* the networked horizon, low in the page where there is nothing else */
.horizon{position:absolute;left:0;right:0;bottom:0;height:320px;z-index:0;pointer-events:none;
  background:url(/brand/horizon.png) center bottom/min(100%,1920px) auto no-repeat;
  mix-blend-mode:screen;opacity:.5}

/* ══════════════════════════════════════════════════════════════════
   BELOW THE FOLD
   The room fills the viewport. This is what you find when you scroll,
   which makes it the right home for things that should not compete
   with a live conversation. It is dark, wide, and lit from below by
   the network horizon.
   ══════════════════════════════════════════════════════════════════ */
.below{position:relative;z-index:1;padding:64px 22px 240px;
  background:linear-gradient(180deg,var(--canvas-deep),#010614 45%,#01040B);
  border-top:1px solid var(--line)}
.below-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
@media(max-width:860px){.below-inner{grid-template-columns:1fr}.below{padding:44px 14px 190px}}
.bpanel{background:linear-gradient(180deg,rgba(6,16,34,.94),rgba(2,8,23,.94));
  border:1px solid var(--line);border-radius:10px;padding:22px}
.bh h2{margin:0 0 6px;font-family:var(--f-label);font-weight:700;font-size:19px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.bh p{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:56ch}

.lb{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:1px}
.lb li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;
  padding:11px 12px;background:rgba(2,8,23,.6);border:1px solid transparent;border-radius:6px}
.lb li:nth-child(-n+3){border-color:var(--line);background:rgba(18,107,255,.06)}
.lb li:first-child{border-color:rgba(255,193,74,.34);background:rgba(255,193,74,.05)}
.lb .pos{font-family:var(--f-mono);font-size:12px;color:var(--ink-4);text-align:center}
.lb li:first-child .pos{color:var(--amber)}
.lb .nm{font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .ct{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.lb li:first-child .ct{color:var(--amber)}
.lb li.you{outline:1px solid var(--blue);outline-offset:-1px}
.lb-empty{display:block !important;color:var(--ink-4);font-size:12.5px;font-style:italic;
  background:none !important;border:1px dashed var(--line) !important}
.yourank{margin:-6px 0 16px;font-size:12.5px;color:var(--ink-3);
  padding:9px 12px;border-left:2px solid var(--blue);background:rgba(18,107,255,.06)}
.yourank b{color:var(--ink)}

.bigshare,.primary{cursor:pointer}
.bigshare{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px;border-radius:6px;border:1px solid var(--blue);
  background:linear-gradient(180deg,rgba(18,107,255,.22),rgba(18,107,255,.10));
  color:#DCE8FF;font-family:var(--f-label);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;transition:.15s}
.bigshare:hover{background:linear-gradient(180deg,rgba(18,107,255,.34),rgba(18,107,255,.16));
  box-shadow:var(--glow)}
.bigshare svg{width:15px;height:15px}

.inviteform{display:flex;gap:8px}
.inviteform input{flex:1;min-width:0;padding:12px;border-radius:6px;
  background:var(--slot);border:1px solid var(--line);color:var(--ink)}
.inviteform input:focus{outline:none;border-color:var(--blue);box-shadow:var(--glow)}
.invitemade{margin-top:16px}
.cardprev{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#01040B;margin-bottom:10px;line-height:0}
.cardprev img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:contain}
.cardrow{display:flex;gap:8px}
.cardrow input{flex:1;min-width:0;padding:11px;border-radius:6px;background:var(--slot);
  border:1px solid var(--line);color:var(--ink-2);font-family:var(--f-mono);font-size:12px}
.cardnote{margin:9px 0 0;font-size:12px;color:var(--ink-4);line-height:1.5}
.ghost.share{display:inline-flex;align-items:center;gap:6px}

/* copy → copied */
.cardrow button.done,button.primary.done{background:linear-gradient(180deg,#4CF7BE,#1FA87C);
  border-color:#0E6B4E;border-top-color:#7CFFD6;color:#01120C;
  box-shadow:0 0 18px rgba(53,242,177,.4),inset 0 1px 0 rgba(255,255,255,.3)}
button.primary.done svg{vertical-align:-2px;margin-right:5px}
.ghost.done{color:#4CF7BE;border-color:rgba(53,242,177,.5)}
.bigshare.done{border-color:#1FA87C;color:#7CFFD6;
  background:linear-gradient(180deg,rgba(53,242,177,.22),rgba(53,242,177,.08));
  box-shadow:0 0 20px rgba(53,242,177,.3)}

/* ── record ────────────────────────────────────────────────────────────────
   A record control has to be unmistakable both ways round: idle it is an
   outline, live it is a filled red disc that pulses and shows the elapsed
   time. This is the one place a red fill is CORRECT, because here it really
   does mean recording. */
button.ic.rec svg circle{fill:none;stroke:currentColor;stroke-width:2}
button.ic.rec:hover svg{border-color:#8A3A30;color:#FF9B8C}
button.ic.rec.live svg{background:linear-gradient(180deg,#FF6B5E,#C92C20);border-color:#8A2620;color:#fff}
button.ic.rec.live svg circle{fill:#fff;stroke:none;animation:recpulse 1.4s ease-in-out infinite}
button.ic.rec.live{color:#FF8A7A}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.35}}
.recbar{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:420;
  display:flex;align-items:center;gap:12px;padding:9px 15px;border-radius:999px;
  background:rgba(30,8,6,.9);border:1px solid #8A2620;backdrop-filter:blur(6px);
  box-shadow:0 12px 34px -14px #000}
.recbar .rd{width:9px;height:9px;border-radius:50%;background:#FF6B5E;animation:recpulse 1.4s ease-in-out infinite}
.recbar b{font-family:var(--f-mono);font-weight:700;font-size:13px;color:#FFD9D2;font-variant-numeric:tabular-nums}
.recbar span{font-size:12px;color:#E8B0A6}
.recbar button{background:none;border:1px solid #8A2620;border-radius:5px;color:#FFB0A2;
  padding:5px 11px;cursor:pointer;font-family:var(--f-label);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
.recbar button:hover{color:#fff;border-color:#C4463A}

/* clips recorded in this room — a link anyone can take away */
.clips{display:flex;flex-direction:column;gap:1px;padding:8px 9px;border-bottom:1px solid #000;
  background:rgba(18,107,255,.05);max-height:132px;overflow:auto}
.clipline{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:5px;font-size:12.5px;color:var(--ink-2)}
.clipline:hover{background:rgba(18,107,255,.10)}
.clipline svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:#FF8A7A;stroke-width:2}
.clipline b{color:var(--ink);font-weight:600}
.clipline .t{font-family:var(--f-mono);font-size:11px;color:var(--ink-4)}
.clipline a{margin-left:auto;color:var(--blue-hi);text-decoration:none;font-family:var(--f-label);
  font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.clipline a:hover{text-decoration:underline}
.clipline.fresh{animation:clipin 1.4s ease-out}
@keyframes clipin{0%{background:rgba(53,242,177,.24)}100%{background:transparent}}

/* transcript downloads — two small chips rather than two underlined links wedged
   into the middle of a sentence */
.dls{display:inline-flex;gap:5px;margin-left:auto;flex-shrink:0}
a.dl{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-family:var(--f-label);font-weight:700;font-size:9.5px;letter-spacing:.13em;
  color:var(--ink-3);background:rgba(2,8,23,.8);border:1px solid var(--line);
  border-radius:5px;padding:4px 8px 3px;transition:.14s;line-height:1}
a.dl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
a.dl:hover{color:var(--blue-hi);border-color:var(--line2);background:rgba(18,107,255,.10)}
a.dl:active{transform:translateY(1px)}

/* still there? */
.idlecard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:500;
  width:min(420px,92vw);padding:26px;text-align:center;border-radius:10px;
  background:linear-gradient(180deg,#0A1730,#020817);border:1px solid var(--blue);
  box-shadow:0 0 0 100vmax rgba(1,4,11,.72),0 30px 70px -20px #000}
.idlecard b{display:block;font-family:var(--f-label);font-weight:700;font-size:19px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.idlecard p{margin:0 0 20px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.idlecard i{font-style:normal;font-family:var(--f-mono);font-weight:700;color:var(--amber)}
.idlecard button{background:linear-gradient(180deg,#2A8CFF,#0F55CC);border:1px solid #0B3F9E;
  border-top-color:#6EB4FF;border-radius:6px;color:#F5F9FF;padding:13px 30px;cursor:pointer;
  font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.idlecard button:hover{box-shadow:0 0 24px rgba(18,107,255,.5)}
.bootedout{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:30px;background:var(--canvas)}
.bootedout img{width:96px;height:96px;opacity:.85;filter:drop-shadow(0 0 28px rgba(42,140,255,.45))}
.bootedout b{font-family:var(--f-label);font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--ink)}
.bootedout p{margin:0;font-size:13.5px;color:var(--ink-3);max-width:44ch;line-height:1.6}
.bootedout a{margin-top:8px;text-decoration:none;background:linear-gradient(180deg,#2A8CFF,#0F55CC);
  border:1px solid #0B3F9E;border-radius:6px;color:#F5F9FF;padding:13px 30px;
  font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}