/* ══════════════════════════════════════════════════════════════════════════
   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 ─────────────────────────── */
/* The stage is the subject, so it takes the middle and the most width. The board sits
   on the left because it is what you act on while somebody else is talking, and the
   room's readouts sit right. Source order stays stage-board-side so that on a phone the
   video is still the first thing you see. */
.grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr) minmax(0,.86fr);
  gap:10px;padding:10px;align-items:start;max-width:2100px;margin:0 auto}
.grid > .stagecol{order:2}
.grid > .boardcol{order:1}
.grid > .sidecol{order:3}
.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;position:relative}
.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;container-type:size}
.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;transition:opacity .3s}
/* no lease running → no instrument. A ghosted 88:88 looks like a fault. */
.clockwrap.idle{opacity:0;pointer-events:none}
#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)}

/* Make: a compose step, so the first roll of the dice isn't the room's problem. */
.mksheet{position:absolute;inset:0;z-index:30;overflow-y:auto;
  background:linear-gradient(180deg,#070E1B 0%,#040A14 100%);
  border-top:1px solid var(--line);padding:14px 14px 18px;display:flex;flex-direction:column;gap:9px}
.mk-top{display:flex;align-items:center;justify-content:space-between}
.mk-top b{font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.mk-top button{background:none;border:0;color:var(--ink-4);cursor:pointer;font-size:14px;padding:4px}
.mk-top button:hover{color:var(--ink)}
.mk-kinds{display:flex;flex-wrap:wrap;gap:6px}
.mk-kinds button{background:var(--slot);border:1px solid var(--line);border-radius:20px;
  color:var(--ink-3);font-size:11.5px;padding:5px 11px;cursor:pointer;transition:.12s}
.mk-kinds button:hover{border-color:var(--line2);color:var(--ink-2)}
.mk-kinds button.on{background:rgba(18,107,255,.18);border-color:var(--blue);color:var(--blue-hi)}
.mk-l{font-family:var(--f-label);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700;margin-top:2px}
.mk-l i{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--ink-5,var(--ink-4));font-weight:400}
#mkWhat,#mkCap{width:100%;background:var(--slot);border:1px solid var(--line);border-radius:6px;
  color:var(--ink);padding:9px 11px;font:inherit;font-size:13.5px;resize:vertical}
#mkWhat:focus,#mkCap:focus{outline:none;border-color:var(--blue)}
.mk-busy{font-family:var(--f-mono);font-size:11.5px;color:var(--amber)}
.mk-busy::after{content:'';display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;
  background:var(--amber);animation:mkp 1s infinite}
@keyframes mkp{0%,100%{opacity:.25}50%{opacity:1}}
.mk-prev{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#01040B}
.mk-prev img{display:block;width:100%;height:auto}
.mk-prev .mk-t{display:block;padding:7px 10px;font-size:12px;color:var(--ink-3)}
.mk-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.mk-go>span{display:flex;gap:8px}
.mk-note{margin:0;font-size:11.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. */
/* ══════════════════════════════════════════════════════════════════
   PHONE
   The desktop deck stacked into a mile of instrumentation: a full-width
   fader, a VU meter the size of a fist, and a red flag banner, all above
   the thing you came for. On a phone the order is video, who is on, what
   to press — and the meter goes away entirely, because the wave under the
   video already says what it said.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  body{font-size:14.5px}

  /* one row, never three: the secondary links collapse behind a menu */
  header.top{height:auto;min-height:46px;padding:6px 10px;gap:8px;flex-wrap:nowrap;overflow:hidden}
  header.top .charter,header.top .me,header.top .pop{display:none}
  header.top a.ghost,header.top button.ghost{display:none}
  header.top #shareBtnTop,header.top #moreBtn{display:inline-flex}
  .brandword{height:20px} .brandmark{width:22px;height:22px}
  .roomid{font-size:10px;padding:3px 7px}
  .onair{font-size:9.5px;padding:5px 8px 4px;letter-spacing:.14em}
  .calltime{display:none}

  .grid{grid-template-columns:1fr;padding:0;gap:0}
  .grid > .stagecol{order:1} .grid > .boardcol{order:2} .grid > .sidecol{order:3}
  .col{gap:0}
  .stagecol .panel,.boardcol .panel,.sidecol .panel{border-radius:0;border-left:0;border-right:0}

  .stagevid{aspect-ratio:4/3;border-radius:0}
  #segClock{height:clamp(30px,9vw,44px)}

  /* the fader is the one control that has to stay, and it gets a thumb you can hit.
     The red flag sits beside it as a square, not across the whole screen — a banner
     that size reads as the primary action, and cutting someone off is not that. */
  
  .meterbox{display:none}                 /* the wave over the video already shows this */
  #dial{height:40px}
  #dial::-webkit-slider-thumb{width:30px;height:36px;margin-top:-14px}
  #dial::-webkit-slider-runnable-track{height:8px}
  .faderrow{font-size:9.5px}

  /* red flag becomes one button in the row, not a banner */
  button.flag{width:74px;flex:0 0 74px;min-height:64px;padding:8px 4px;flex-direction:column;gap:5px;
    font-size:8.5px;letter-spacing:.06em;line-height:1.15}
  button.flag svg{width:17px;height:17px}

  .stagebtns{padding:8px 8px 10px;gap:4px;flex-wrap:wrap;justify-content:center}
  .stagebtns button{flex:1 1 20%;min-width:58px;min-height:56px;gap:3px}
  button.ic svg{width:19px;height:19px;padding:8px}
  button.ic b{font-size:8px;letter-spacing:.05em}

  .gallery{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));max-height:none;padding:6px 8px}
  .scroll{max-height:300px} .scroll.sm{max-height:190px}

  .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:44px}
  .invite{flex-direction:column;gap:8px}

  .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}
  .recbar{left:8px;right:8px;transform:none;justify-content:center}
}
@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 */
/* A 24px minimum on anything you are expected to hit with a thumb. This was 18px, which
   is fine with a mouse and a coin-flip on a phone. */
.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;
  min-width:26px;min-height:26px}
.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}
/* The empty stage is the first thing anyone sees, and it was a small mark floating in a
   large black rectangle — which reads as a panel that failed to load rather than a room
   waiting for you. Scale it to the box it is in so it owns the frame. */
.emptymark{width:clamp(84px,27cqh,150px);height:clamp(84px,27cqh,150px);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:clamp(12px,3.6cqh,17px);
  letter-spacing:.14em;text-transform:uppercase;color:#8FB6EE}
.emptystage span{font-size:clamp(12.5px,3.1cqh,15.5px);color:var(--ink-4);max-width:34ch;line-height:1.5}
/* the theatre toggle sits beside the photo button, same treatment */
.theatrebtn{right:50px !important}
.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}
/* the record panels are read, not scanned — give them room and their own scroll */
.bpanel .scroll{max-height:340px;overflow-y:auto;margin-top:4px}
@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}

/* Your own camera is mirrored, because that is what a mirror does and it is what every
   video product has trained people to expect. Nobody else's is, and a screen share never
   is — a mirrored slide is unreadable. */
.tile.isme video{transform:scaleX(-1)}
.stagevid video.mirror{transform:scaleX(-1)}

/* ── the meter is the fader ────────────────────────────────────────────────
   One arc, two marks: the needle is what the ROOM is doing, the grip is what YOU
   are doing. A separate slider underneath was a second control saying the same
   thing in a different shape, and it took a whole row to do it. */
#vu{cursor:grab;touch-action:none;outline:none}
#vu.grabbing{cursor:grabbing}
#vu:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px;border-radius:4px}
.vu-yourarc{fill:none;stroke:var(--blue-hi);stroke-width:5;stroke-linecap:round;opacity:.5}
.vu-yourarc.cut{stroke:var(--tally)}
.vu-grip{fill:var(--blue-hi);stroke:#04101F;stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(42,140,255,.7));transition:r .12s}
.vu-grip.cut{fill:var(--tally);filter:drop-shadow(0 0 6px rgba(255,84,73,.7))}
.vu-gripdot{fill:#04101F;pointer-events:none}
#vu:hover .vu-grip,#vu.grabbing .vu-grip{r:8.5}
.meterlbl{display:flex;justify-content:space-between;margin-bottom:3px;
  font-family:var(--f-label);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.meterlbl .cut{color:var(--tally)} .meterlbl .hold{color:var(--phos)}
/* one row now, not two */


/* ── the queue: who is waiting and what for ────────────────────────────────
   The old "Up next" panel showed turns-taken and seconds-on-stage — a ledger,
   not a queue. Live means: these people want to speak, and this is what about. */
.queue{display:flex;flex-direction:column;gap:1px;padding:8px;min-height:64px}
.qrow{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;
  padding:9px 10px;border-radius:6px;background:rgba(18,107,255,.06);border:1px solid transparent}
.qrow:first-child{border-color:var(--line2);background:rgba(18,107,255,.12)}
.qrow .p{font-family:var(--f-mono);font-size:12px;color:var(--ink-4);text-align:center;line-height:1.5}
.qrow:first-child .p{color:var(--blue-hi)}
.qrow .nm{font-weight:600;font-size:14px;color:var(--ink)}
.qrow .wants{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.qrow .wants.none{color:var(--ink-4);font-style:italic}
.qrow .waited{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);margin-left:6px}
.qempty{padding:14px 10px;font-size:13px;color:var(--ink-4);font-style:italic;text-align:center}
.wantstage{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 16px);
  margin:0 8px 8px;padding:12px;border-radius:6px;cursor:pointer;transition:.15s;
  border:1px solid var(--blue);background:linear-gradient(180deg,rgba(18,107,255,.22),rgba(18,107,255,.08));
  color:#DCE8FF;font-family:var(--f-label);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase}
.wantstage:hover{box-shadow:var(--glow);background:linear-gradient(180deg,rgba(18,107,255,.34),rgba(18,107,255,.14))}
.wantstage svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wantstage.up{border-color:var(--phos);color:#BFF7E4;
  background:linear-gradient(180deg,rgba(53,242,177,.20),rgba(53,242,177,.07))}
.wantstage.rec{border-color:var(--tally);color:#FFC4BB;
  background:linear-gradient(180deg,rgba(255,84,73,.22),rgba(255,84,73,.08))}

/* asking out loud */
.wantcard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:460;
  width:min(460px,92vw);padding:20px 22px;border-radius:10px;
  background:linear-gradient(180deg,#0A1730,#020817);border:1px solid var(--blue);
  box-shadow:0 0 0 100vmax rgba(1,4,11,.68),0 26px 60px -18px #000}
.wantx{position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;
  color:var(--ink-4);font-size:24px;line-height:1;padding:2px 6px;border-radius:5px}
.wantx:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.wantrow button.enter{background:linear-gradient(180deg,#2A8CFF,#0F55CC);border-color:#0B3F9E;
  border-top-color:#5AAAFF;color:#F3F6FF;padding:10px 16px;white-space:nowrap}
.wantrow button.enter:hover{box-shadow:var(--glow);color:#fff}
.wantcard b{display:block;font-family:var(--f-label);font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.wantcard .hint2{margin:0 0 13px;font-size:13px;color:var(--ink-3)}
.wantcard .hint2 i{font-style:normal;color:var(--amber);font-weight:600}
.wantcard .heard{min-height:52px;padding:11px 13px;border-radius:6px;background:var(--slot);
  border:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink);margin-bottom:12px}
.wantcard .heard.empty{color:var(--ink-4);font-style:italic}
.wantrow{display:flex;gap:8px}
.wantrow input{flex:1;min-width:0;padding:11px;border-radius:6px;background:var(--slot);
  border:1px solid var(--line);color:var(--ink);font-size:15px}
.wantrow input:focus{outline:none;border-color:var(--blue);box-shadow:var(--glow)}
.wantrow button{background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink-3);
  padding:8px 14px;cursor:pointer;font-family:var(--f-label);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
.wantrow button:hover{color:var(--ink);border-color:var(--line2)}

/* ── theatre ───────────────────────────────────────────────────────────────
   Click the speaker and the desk gets out of the way. The stage fills the
   screen; everyone else runs along the bottom as a strip. Nothing is unmounted
   — the panels are hidden, so state and streams survive the trip both ways. */
body.theatre{overflow:hidden}
body.theatre header.top,body.theatre .below,body.theatre .boardcol,body.theatre .sidecol,
body.theatre .controls,body.theatre .stagebtns,body.theatre .uprow,
body.theatre .stagecol .panel .ph,body.theatre #transcript,body.theatre #clipRow{display:none}
body.theatre .grid{grid-template-columns:1fr;padding:0;gap:0;max-width:none;height:100vh}
body.theatre .col{gap:0;height:100vh}
body.theatre .stagecol{position:static;height:100vh;display:flex;flex-direction:column}
body.theatre .stage{flex:1;display:flex;flex-direction:column;border:0;border-radius:0;
  background:#000;min-height:0}
body.theatre .stagecol .panel{border:0;border-radius:0;background:#01040B}
body.theatre .stagevid{flex:1;aspect-ratio:auto;min-height:0;border-radius:0;cursor:zoom-out}
body.theatre .stagevid video{object-fit:contain}
body.theatre .gallery{display:grid !important;grid-auto-flow:column;grid-auto-columns:132px;
  grid-template-columns:none;overflow-x:auto;overflow-y:hidden;max-height:none;
  padding:8px;gap:6px;background:#01040B;border-top:1px solid var(--line);flex:0 0 auto}
body.theatre .tile{aspect-ratio:4/3}
.theatreout{position:fixed;top:14px;right:14px;z-index:470;width:38px;height:38px;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  background:rgba(2,8,23,.78);border:1px solid var(--line);color:var(--ink-2);backdrop-filter:blur(6px)}
.theatreout:hover{color:var(--ink);border-color:var(--line2)}
@media(max-width:860px){
  body.theatre .gallery{grid-auto-columns:104px}
  .theatreout{top:10px;right:10px}
}

/* ── one deck row ──────────────────────────────────────────────────────────
   Meter, controls, flag. The meter is the fader so there is nothing else to
   fit, and putting all three on one line is the difference between a control
   surface and a stack of panels. */
.deckrow{display:flex;align-items:center;gap:14px;padding:10px 12px;
  border-bottom:1px solid #000;background:linear-gradient(180deg,#0A1428,#050C1B)}
.deckrow .meterbox{flex:0 0 186px;width:186px}
.deckrow .meterbox #vu{display:block;width:100%;height:auto}
.deckrow .bar{flex:1;min-width:0;display:flex;align-items:center;gap:2px;
  justify-content:center;flex-wrap:wrap;padding:0;border:0;background:none}
.deckrow button.flag{flex:0 0 92px;width:92px;min-height:66px;padding:9px 6px;
  flex-direction:column;gap:6px;font-size:9px;letter-spacing:.07em;line-height:1.2}
.deckrow button.flag svg{width:17px;height:17px}
.deckrow .meterlbl{font-size:8px;letter-spacing:.07em;margin-bottom:2px}
.deckrow .barsep{width:1px;height:30px;background:var(--line);margin:0 5px}
@media(max-width:1180px){
  .deckrow .meterbox{flex:0 0 156px;width:156px}
  .deckrow button.ic svg{padding:8px}
  .deckrow button.ic b{font-size:8px}
}
@media(max-width:860px){
  .deckrow{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .deckrow .meterbox{flex:0 0 150px;width:150px}
  .deckrow button.flag{flex:0 0 76px;width:76px;min-height:60px}
  .deckrow .bar{flex:1 1 100%;order:3;justify-content:space-around;gap:2px}
  .deckrow .barsep{display:none}
}

/* nothing on the stage: one statement, given room */
.door.empty{display:none}
.novid.empty ~ .stageoverlay .who{display:none}
.emptystage{gap:18px}
.emptystage b{font-size:16px;letter-spacing:.18em}
.emptystage span{font-size:14.5px;max-width:340px;color:var(--ink-3)}
@media(max-width:860px){
  .emptymark{width:76px;height:76px}
  .emptystage b{font-size:13px}
  .emptystage span{font-size:13px}
}
/* your own words, visible on the card they merged into */
.voices span.mine{color:var(--ink);border-left:2px solid var(--blue);padding-left:8px;
  background:rgba(18,107,255,.08);border-radius:0 4px 4px 0}

/* ── the queue, ranked by the room ─────────────────────────────────────────
   Scrolls once there are more than a few. Votes move people; so does patience,
   which is why a long wait gets its own mark — the queue is visibly carrying
   somebody up rather than leaving them at the bottom forever. */
.queue{max-height:288px;overflow-y:auto}
.qrow{grid-template-columns:22px minmax(0,1fr) auto}
.qrow.me{outline:1px solid var(--blue);outline-offset:-1px}
.qbody{min-width:0}
.qv{display:flex;flex-direction:column;align-items:center;gap:1px;padding-left:6px}
.qb{background:none;border:0;cursor:pointer;color:var(--ink-4);font-size:11px;line-height:1;
  padding:3px 5px;border-radius:4px;transition:.12s}
.qb:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.qb.up:hover,.qb.up.any{color:var(--phos)}
.qb.down:hover,.qb.down.any{color:var(--tally)}
.qv b{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--ink-4);
  font-variant-numeric:tabular-nums;min-width:18px;text-align:center}
.qv b.pos{color:var(--phos)} .qv b.neg{color:var(--tally)}
.waited.patient{color:var(--amber)}

/* ── notes on a board card ────────────────────────────────────────────────
   A question can be worth keeping and still be wrong, and a downvote alone
   cannot say why. The thread is where the why goes. */
.qbtns button.dn{flex:0 0 auto;min-width:34px;color:var(--ink-4)}
.qbtns button.dn:hover,.qbtns button.dn.any{color:var(--tally);border-color:rgba(255,84,73,.4)}
.qbtns button.cmt{color:var(--ink-3)}
.qbtns button.cmt:hover{color:var(--blue-hi)}
.thread{margin:8px 0 2px;padding:9px 10px;border-radius:6px;background:rgba(2,8,23,.55);
  border:1px solid var(--line)}
.cm{font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:4px 0;
  border-bottom:1px solid rgba(90,130,205,.10)}
.cm:last-of-type{border-bottom:0}
.cm b{color:var(--ink);font-weight:600;margin-right:5px}
.cm.none{color:var(--ink-4);font-style:italic;border:0}
.cmrow{display:flex;gap:6px;margin-top:8px}
.cmrow input{flex:1;min-width:0;padding:8px 10px;border-radius:5px;background:var(--slot);
  border:1px solid var(--line);color:var(--ink);font-size:13.5px}
.cmrow input:focus{outline:none;border-color:var(--blue)}
.cmrow button{background:none;border:1px solid var(--line);border-radius:5px;color:var(--ink-3);
  padding:6px 12px;cursor:pointer;font-family:var(--f-label);font-weight:700;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase}
.cmrow button:hover{color:var(--blue-hi);border-color:var(--line2)}

/* ── thought bubbles ───────────────────────────────────────────────────────
   They land around the outside of the video, randomised, leaving the middle
   clear for the face.

   Transparent, and more so the busier the room gets: `--dim` is set per bubble
   from the live headcount. At six people they are nearly solid; at a hundred
   they are a suggestion you catch out of the corner of an eye. The speaker's
   face is what is being protected — peripheral vision that demands to be read
   is just a feed with extra steps.

   There used to be TWO `.thought` blocks in this file and the first one was
   dead, which is how a change to the bubbles did nothing at all. Do not add
   a third. */
.thoughts{position:absolute;inset:0;z-index:3;pointer-events:none;display:block;max-width:none}
.thought{--dim:1;
  position:absolute;max-width:min(38%,300px);padding:8px 12px;border-radius:12px;
  background:rgba(8,20,42,calc(.28 + .38 * var(--dim)));
  border:1px solid rgba(90,130,205,calc(.12 + .22 * var(--dim)));
  backdrop-filter:blur(10px) saturate(.92);
  font-size:13px;line-height:1.4;
  color:rgba(226,236,250,calc(.5 + .5 * var(--dim)));
  /* the keyframe below ends at var(--op), NOT at 1 — `animation-fill-mode: both` keeps the
     final frame applied forever, so a hard-coded `to{opacity:1}` silently overrode this
     declaration and the busy-room fade did nothing at all */
  --op:calc(.5 + .5 * var(--dim));
  opacity:var(--op);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.75);
  animation:thoughtIn .5s cubic-bezier(.2,.8,.2,1) both;
  transition:opacity .7s,transform .7s}
.thought b{display:block;font-family:var(--f-label);font-weight:700;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:2px;
  color:rgba(94,155,255,calc(.55 + .45 * var(--dim)))}
.thought.mine{border-color:rgba(18,107,255,calc(.24 + .3 * var(--dim)));
  background:rgba(14,44,96,calc(.3 + .4 * var(--dim)))}
/* something the room independently converged on — it earns a little more presence,
   and it is the only kind allowed to jump the rate limit */
.thought.merged{border-left:2px solid var(--phos);opacity:1}
.thought.out{opacity:0;transform:translateY(-12px) scale(.97)}
@keyframes thoughtIn{from{opacity:0;transform:translateY(10px) scale(.95)}
  to{opacity:var(--op,1);transform:translateY(0) scale(1)}}
@media(max-width:860px){.thought{max-width:64%;font-size:12px;padding:6px 9px}}

/* ── the stage seats ten ───────────────────────────────────────────────────
   Whoever holds it can pull people up by clicking their tile. The layout
   follows the voice: whoever is actually talking gets the room. */
.tile.canpull{cursor:pointer}
.tile.canpull::after{content:"bring up";position:absolute;inset:auto 0 0 0;padding:4px;
  font-family:var(--f-label);font-weight:700;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;color:#DCE8FF;background:rgba(18,107,255,.86);
  opacity:0;transition:.15s}
.tile.canpull:hover::after{opacity:1}
.tile.canpull.upthere::after{content:"send back";background:rgba(255,84,73,.86)}
.tile.upthere{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.tile.loud{border-color:var(--phos);box-shadow:0 0 0 2px var(--phos),0 0 18px rgba(53,242,177,.32)}

/* guests on the stage, in a grid that gives the loudest voice the space */
.guests{position:absolute;right:10px;bottom:96px;z-index:4;display:grid;gap:5px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));max-width:min(52%,470px)}
.guests .g{position:relative;aspect-ratio:4/3;border-radius:7px;overflow:hidden;
  background:#020817;border:1px solid var(--line);transition:transform .28s,box-shadow .28s,border-color .18s}
.guests .g video{width:100%;height:100%;object-fit:cover;display:block}
.guests .g .gn{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:10px;
  background:linear-gradient(180deg,transparent,rgba(1,4,11,.9));color:var(--ink-2)}
.guests .g.loud{border-color:var(--phos);box-shadow:0 0 0 2px var(--phos),0 0 20px rgba(53,242,177,.3);
  transform:scale(1.06);z-index:2}
@media(max-width:860px){
  .guests{right:6px;bottom:76px;max-width:64%;grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
}

/* ══════════════════════════════════════════════════════════════════
   THE DOOR
   A constellation drifting behind a lit emblem, a join card that tells
   you the truth about the room before you enter, and the stage portal
   throwing light up from underneath. The page scrolls — the card is
   above the fold, the reasons are below it.
   ══════════════════════════════════════════════════════════════════ */
.gate{align-items:start;overflow-y:auto;overflow-x:hidden;display:block;overscroll-behavior:contain}
#fire{position:fixed;inset:0;width:100%;height:100%;display:block}

.gatenav{position:relative;z-index:2;display:flex;justify-content:center;
  padding:20px 26px 4px;max-width:1360px;margin:0 auto}
.gnbrand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.gnbrand img:first-child{width:34px;height:34px;filter:drop-shadow(0 0 9px rgba(42,140,255,.5))}
.gnword{height:26px;width:auto;opacity:.94}
.gnlinks{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.gnlinks a,.gnlinks button{background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:9px 13px;border-radius:6px;transition:.14s}
.gnlinks a:hover,.gnlinks button:hover{color:var(--ink);background:rgba(18,107,255,.12)}
.gnlinks b{color:var(--amber);font-weight:700}
@media(max-width:760px){.gnlinks{display:none}}

.gate-inner{position:relative;z-index:1;text-align:center;max-width:1120px;
  margin:0 auto;padding:14px 22px 90px;background:none;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.gatemark{width:132px;height:auto;margin:8px auto 6px;display:block;
  filter:drop-shadow(0 0 40px rgba(42,140,255,.6));animation:markbreath 6s ease-in-out infinite}
img.wordmark{width:min(470px,80vw);margin:0 auto 16px}
.gate-line{font-size:clamp(19px,2.6vw,25px);line-height:1.3;margin:0 0 12px;
  font-weight:600;color:#DCE6F8}
.gate-line span{color:var(--amber)}
.gate-eyebrow{margin:0 0 30px}

/* the card that tells you what you are walking into */
.joincard{max-width:620px;margin:0 auto;padding:22px 24px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(11,28,54,.90),rgba(4,12,26,.94));
  border:1px solid var(--line2);backdrop-filter:blur(10px);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(18,107,255,.08) inset}
.joincard .livebar{margin:0 0 16px}
.joincard .gate-form{margin:0 0 14px}
.joincard .gate-toggles{justify-content:center;gap:16px;margin:0}
.joinnote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.joinnote b{color:var(--blue-hi)}
button.join{display:inline-flex;align-items:center;gap:9px}
button.join svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* the stage, throwing light up from under the card */
.portal{display:block;width:min(300px,58vw);height:auto;margin:-34px auto -6px;
  opacity:.85;pointer-events:none;
  animation:portalPulse 7s ease-in-out infinite}
@keyframes portalPulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}

.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;max-width:960px;margin:8px auto 0;text-align:left}
.prop{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;
  column-gap:15px;row-gap:3px;align-items:start}
.prop img{grid-row:1/3;width:46px;height:46px;padding:11px;border-radius:50%;
  background:rgba(18,107,255,.12);border:1px solid var(--line2)}
.prop b{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink)}
.prop span{font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.gate-foot{margin-top:34px}
@media(max-width:620px){
  .gatemark{width:96px}
  .joincard{padding:18px 16px 16px;border-radius:12px}
  .portal{margin-top:-18px;width:66vw}
  .props{gap:16px;margin-top:20px}
}

/* ── read the room, compressed ─────────────────────────────────────────────
   It was a header, a paragraph, a pill and a caption — four blocks to say one
   thing. Now: the title row carries the switch, and the body is either the
   sentence or a single line telling you how the sentence gets there. */
.readpanel .ph{gap:10px;flex-wrap:wrap}
.readpanel .ph .temp{margin-left:0}
.readpanel .listenpill{margin-left:auto;padding:6px 10px;font-size:9.5px;letter-spacing:.09em}
.readpanel .listenpill svg{width:13px;height:13px}
.readroom{padding:12px 14px;background:none;border:0}
.readnone{padding:11px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.readnone b{display:inline;margin-left:6px;font-family:var(--f-label);font-weight:700;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--phos)}
.readnone i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;color:var(--ink-4);margin-left:6px}
.readpanel .invite{display:none}

/* the record is meant to be read and quoted out of, so make selecting it feel deliberate */
#transcript,#ledger,.readroom p,.cm,.claudesaid{user-select:text;-webkit-user-select:text}
#transcript ::selection,#ledger ::selection,.claudesaid ::selection{
  background:rgba(42,140,255,.34);color:#fff}

/* ── votes you can actually hit ────────────────────────────────────────────
   The arrows were 11px glyphs in a 3px gutter. A vote is a primary action on
   this board, so it gets a real target: 26px wide, full-width hit area, and a
   hover state that makes clear which one you are about to press. */
.qvote{width:38px;padding:8px 0 0}
.qvote button{width:30px;height:26px;font-size:13px;display:grid;place-items:center;padding:0}
.qvote .sc{font-size:13px;padding:2px 0}
.q .qh .n{display:none}                  /* the score column is the number now */

/* replies are a hierarchy, not a list */
/* A thread is a tree. Depth is a left rule rather than an indent staircase, so the
   fourth level still has room to hold a sentence on a phone. The score sits beside the
   arrows instead of between them: one short row instead of a three-storey column. */
.cm{display:block;padding:6px 0 6px calc(var(--d,0) * 13px);
  border-bottom:1px solid rgba(90,130,205,.10);position:relative}
.cm[style*="--d:0"]{border-left:0}
.cm:not([style*="--d:0"]){border-left:1px solid rgba(90,130,205,.16);padding-left:calc(var(--d,0) * 13px)}
.cm.none{display:block;padding-left:0;border-left:0;color:var(--ink-4)}
.cmacts{display:flex;align-items:center;gap:10px;margin-top:3px}
.cm .rply{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-4);
  font-family:var(--f-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;transition:.12s}
.cm .rply:hover{color:var(--blue-hi)}
.rto{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--blue-hi);
  background:rgba(18,107,255,.12);border:1px solid rgba(18,107,255,.3);border-radius:5px;
  padding:3px 6px;white-space:nowrap}
.rto button{background:none;border:0;color:inherit;cursor:pointer;font-size:11px;padding:0;line-height:1}
.rv{display:inline-flex;flex-direction:row;align-items:center;gap:1px}
.rv button{background:none;border:0;cursor:pointer;color:var(--ink-4);font-size:10px;
  line-height:1;width:22px;height:18px;display:grid;place-items:center;border-radius:4px;transition:.12s}
.rv button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.rv button.up:hover{color:var(--phos)}
.rv button.dn:hover{color:var(--tally)}
.rv em{font-style:normal;font-family:var(--f-mono);font-size:11px;font-weight:600;
  color:var(--ink-4);font-variant-numeric:tabular-nums;line-height:1.1;margin-left:3px;min-width:9px}
.rv em.pos{color:var(--phos)} .rv em.neg{color:var(--tally)}
.cmt-body{min-width:0}

/* the maker can take their own picture back down */
.bmediawrap{position:relative}
.bmeddel{position:absolute;top:14px;right:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(2,8,23,.82);border:1px solid var(--line2);color:var(--ink-3);cursor:pointer;
  display:grid;place-items:center;font-size:12px;line-height:1;opacity:0;transition:.14s}
.bmediawrap:hover .bmeddel,.bmeddel:focus{opacity:1}
.bmeddel:hover{color:#fff;background:var(--tally);border-color:var(--tally)}
@media (hover:none){.bmeddel{opacity:1}}

/* an image the room made, sitting on the board as a thing that can be voted on */
.bmedia{display:block;margin:8px 0 2px;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);background:#01040B;text-decoration:none;line-height:0}
.bmedia img{display:block;width:100%;height:auto}
.bmedia span{display:block;padding:7px 10px;line-height:1.4;font-size:12.5px;color:var(--ink-2);
  background:rgba(2,8,23,.7)}
.bmedia:hover{border-color:var(--line2)}

/* ── the red flag says what it is asking for ───────────────────────────────
   "RED FLAG" alone tells you nothing about the threshold or the cost. The count
   is the part people read at a glance; the (i) carries the mechanism. */
button.flag{position:relative}
.flagcount{font-family:var(--f-mono);font-weight:700;font-size:15px;line-height:1;
  color:#FFB0A2;font-variant-numeric:tabular-nums}
.flagcount.hot{color:#FF8A7A}
.flagcount.passing{color:#fff;text-shadow:0 0 10px rgba(255,84,73,.9)}
.flaglabel{font-size:8.5px;letter-spacing:.09em}
.flaginfo{position:absolute;top:3px;right:4px;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-family:var(--f-body);font-weight:700;
  font-size:9.5px;line-height:1;color:#C48C84;border:1px solid rgba(255,155,140,.42);
  cursor:help;transition:.14s}
.flaginfo:hover,.flaginfo:focus-visible{color:#fff;border-color:#FF9B8C;background:rgba(255,84,73,.22)}
.flaghelp{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:520;
  width:min(430px,92vw);padding:24px;border-radius:12px;text-align:left;
  background:linear-gradient(180deg,#180C0A,#0B0605);border:1px solid #8A2620;
  box-shadow:0 0 0 100vmax rgba(1,4,11,.7),0 26px 60px -18px #000}
.flaghelp b{font-family:var(--f-label);font-weight:700;letter-spacing:.04em}
.flaghelp > b{display:block;font-size:17px;text-transform:uppercase;color:#FF9B8C;margin-bottom:12px}
.flaghelp p{margin:0 0 .85em;font-size:14px;line-height:1.6;color:var(--ink-2)}
.flaghelp p b{color:var(--ink)}
.flaghelp button{margin-top:6px;width:100%;padding:11px;border-radius:6px;cursor:pointer;
  background:rgba(255,84,73,.16);border:1px solid #8A2620;color:#FFC4BB;
  font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.flaghelp button:hover{background:rgba(255,84,73,.28);color:#fff}
.guests .g.droppable{cursor:pointer}
.guests .g.droppable::after{content:"send back";position:absolute;inset:auto 0 0 0;padding:3px;
  font-family:var(--f-label);font-weight:700;font-size:8px;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;color:#FFD6D0;background:rgba(255,84,73,.86);
  opacity:0;transition:.14s}
.guests .g.droppable:hover::after{opacity:1}


/* The red flag used to light up the moment you clicked it and stay lit even when the
   server had refused — during a new speaker's protected opening the count sat at 0 while
   the button looked pressed. Now it says why it is unavailable. */
#flagBtn.protected{opacity:.5;cursor:not-allowed;border-style:dashed}
#flagBtn:disabled{cursor:not-allowed}
.flaglabel{pointer-events:none}

/* AIAN answering from the crowd rather than from the stage */
.tile.speaking{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 16px rgba(18,107,255,.35)}


/* Invite, as a popup rather than a trip to the bottom of the page. The panels keep their
   own styling; the sheet just stops them looking like two floating slabs. */
.invitesheet{display:flex;flex-direction:column;gap:14px}
.invitesheet .bpanel{background:none;border:0;padding:0;box-shadow:none;margin:0}
.invitesheet .bh h2{margin-top:0}
.invitesheet .bigshare{margin-bottom:0}


/* The staging ribbon. Deliberately loud: two identical-looking tabs is exactly how
   someone tests the wrong one and draws the wrong conclusion. */
.stagingbar{position:fixed;inset:0 0 auto 0;z-index:9999;display:flex;align-items:center;gap:12px;
  padding:6px 14px;background:repeating-linear-gradient(135deg,#3A2500 0 12px,#2B1B00 12px 24px);
  border-bottom:1px solid var(--amber);font-family:var(--f-label);font-size:11px;
  letter-spacing:.1em;color:#FFD98A;pointer-events:none}
.stagingbar b{font-weight:700;letter-spacing:.2em;color:var(--amber)}
.stagingbar span{text-transform:none;letter-spacing:.02em;opacity:.85;font-family:var(--f-mono)}
html.is-staging body{padding-top:29px}
@media (max-width:640px){ .stagingbar span{display:none} }


/* The fader, while you are the one being timed. Your dial is not counted then — the
   server drops the holder from roomSignal() — so the control must read as unavailable
   rather than accepting a drag the mechanism ignores. */
#vu.locked{opacity:.45;cursor:not-allowed}
#vu.locked .vu-grip,#vu.locked .vu-gripdot,#vu.locked .vu-yourarc{opacity:0}


/* Your own vote, held by the server rather than guessed by the button. */
/* `.any` (somebody voted) must not out-specify `.mine` (YOU voted) */
.qvote button.up.mine{color:var(--phos);background:rgba(74,222,128,.16)}
.qvote button.dn.mine{color:var(--tally);background:rgba(255,84,73,.16)}
.rv button.up.mine{color:var(--phos);background:rgba(74,222,128,.16)}
.rv button.dn.mine{color:var(--tally);background:rgba(255,84,73,.16)}


/* The header carries two things you press while the room is running — invite and share —
   and one button for everything you read once. Grouping the status readouts stops them
   reading as five more buttons. */
.top .onair,.top .calltime,.top .pop,.top .me{flex-shrink:0}
#moreBtn{padding-left:9px;padding-right:9px}
#moreMenu button{white-space:nowrap;display:flex;justify-content:space-between;gap:16px}