/* =========================================================================
   /voice/ - PROXIMITY VOICE IN THE CARD GRAMMAR (voice-gc.css, 2026-10-05)

   Loaded last (after voice.css, ge-signature.css and ge-cards.css). Re-voices
   the page's own surfaces onto the register in /assets/ge-cards.css: the card
   face and chisel, the four corners (surface / control / plate / pill), the
   mono-caps control voice, the display title. It never touches a state the
   script drives ([hidden] phases, data-state, data-active, aria-pressed,
   data-capturing, .speaking, .is-muted) beyond giving each state the same
   colour it had. voice.js, the LiveKit client, the token route and the dock
   are untouched.
   ========================================================================= */

.voice-shell{ padding:clamp(28px,5vw,56px) 16px 72px; }

/* the card: the grammar's surface */
.voice-card{
  position:relative; width:min(100%,720px); padding:42px 42px 34px;
}
.voice-card::before{
  content:""; position:absolute; left:20px; right:20px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent);
}

/* the head: eyebrow between two rules, display title, lede */
.hero{ margin-bottom:30px; }
.hero .ge-label{
  display:flex; align-items:center; justify-content:center; gap:13px; margin:0;
  color:var(--gc-accent-hi); font:600 var(--gc-t-micro)/1 var(--gc-f-mono); letter-spacing:.26em; text-transform:uppercase;
}
.hero .ge-label::before{ width:38px; height:1px; background:linear-gradient(90deg,transparent,var(--gc-accent)); opacity:1; }
.hero .ge-label::after{ content:""; width:38px; height:1px; flex:0 0 auto; background:linear-gradient(90deg,var(--gc-accent),transparent); }
.hero-title{
  margin:14px 0 10px; color:var(--sw-ink);
  font:700 clamp(30px,4.6vw,48px)/1.04 var(--gc-f-display); letter-spacing:.01em; text-transform:uppercase;
}
.hero-sub{ font:500 15px/1.6 var(--gc-f-ui); color:var(--sw-ink-2); }
.conn-pill{ border-radius:var(--gc-r-pill); background:var(--gc-face-sunk); border-color:var(--gc-edge-hi); font:600 12px/1.2 var(--gc-f-ui); }
.conn-meta{ font-family:var(--gc-f-mono); }

/* notices */
.notice{ border-radius:var(--gc-r-s); font:500 13.5px/1.55 var(--gc-f-ui); }

/* THE CONNECT STAGE: the one big commit control over a quiet range plate
   (two rings: hearing ~60 m inside the roster's ~450 m - decorative). */
.connect-stage{ position:relative; padding:26px 0 8px; isolation:isolate; }
.connect-stage::before{
  content:""; position:absolute; left:50%; top:58px; width:min(400px,96%); aspect-ratio:1; transform:translate(-50%,-50%);
  z-index:-1; pointer-events:none; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 30%,rgba(var(--sw-accent-rgb),.20) 30.2% 30.6%,transparent 30.9%),
    radial-gradient(circle at 50% 50%,transparent 0 47%,rgba(var(--sw-accent-rgb),.11) 47.2% 47.5%,transparent 47.8%);
  -webkit-mask:radial-gradient(circle,#000 0 40%,transparent 62%); mask:radial-gradient(circle,#000 0 40%,transparent 62%);
}
.btn-mega{
  min-height:64px; padding:0 44px; border-radius:var(--gc-r);
  border:1px solid rgba(198,166,255,.75);
  background:linear-gradient(180deg,#b184ff,#8a4df0); color:#fff;
  font:700 13px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 40px -18px rgba(138,77,240,.95);
}
:root[data-theme="light"] .btn-mega{ background:linear-gradient(180deg,#8f5af0,#6a2ccf); border-color:rgba(106,44,207,.85); }
.btn-mega:hover:not(:disabled){ filter:none; background:linear-gradient(180deg,#bc95ff,#9459f5); }
:root[data-theme="light"] .btn-mega:hover:not(:disabled){ background:linear-gradient(180deg,#9a69f2,#7434d9); }
.btn-mega-glow{ opacity:.35; }
.connect-hint{ margin-top:18px; font:600 var(--gc-t-micro)/1.4 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sw-ink-3); }
.connect-spatial{ font:500 13.5px/1.6 var(--gc-f-ui); color:var(--sw-ink-2); }

/* LIVE: the mic meter, the four controls, the people list, the details */
.voice-stage{ border-radius:var(--gc-r); background:var(--gc-face-sunk); border-color:var(--gc-edge); }
.mic-vis-label{ font:700 var(--gc-t-micro)/1.2 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; }
.mic-vis-mode{ font-family:var(--gc-f-mono); border-radius:var(--gc-r-pill); }

.controls{ gap:10px; }
.ctrl{
  min-height:76px; border-radius:var(--gc-r-s); background:var(--gc-face); border-color:var(--gc-edge);
  font:700 10.5px/1.2 var(--gc-f-mono); letter-spacing:.12em; box-shadow:var(--gc-shadow);
}
.ctrl:hover{ border-color:var(--gc-accent); }
.ctrl-icon{ font:700 11px/1 var(--gc-f-mono); letter-spacing:.12em; color:var(--gc-accent-hi); }
.ctrl-label{ font-size:10.5px; }
.ctrl-key{ border-radius:var(--gc-r-xs); font-family:var(--gc-f-mono); }
.ctrl[data-active="true"]{ background:rgba(var(--sw-warm-rgb),.14); border-color:rgba(var(--sw-warm-rgb),.5); color:var(--ge-danger); }
.ctrl[data-active="true"] .ctrl-icon{ color:var(--ge-danger); }

.parts{ border-radius:var(--gc-r); background:var(--gc-face-sunk); border-color:var(--gc-edge); }
.parts-label{ font-family:var(--gc-f-mono); letter-spacing:.16em; }
.parts-count{ font-family:var(--gc-f-num); border-radius:var(--gc-r-pill); }
.participant-name{ font-family:var(--gc-f-ui); }
.participant-sub{ font-family:var(--gc-f-mono); }
.participant-mute{ border-radius:var(--gc-r-xs); }

.stats{ border-radius:var(--gc-r); background:var(--gc-face-sunk); border-color:var(--gc-edge); }
.stats summary{ font:700 var(--gc-t-micro)/1.4 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sw-ink-2); }
.stat-k{ font-family:var(--gc-f-ui); }
.stat-v{ font-family:var(--gc-f-num); font-variant-numeric:tabular-nums; }

/* the Windows audio hint */
.setup-banner{ border-radius:var(--gc-r); background:var(--gc-face); border-color:var(--gc-edge); box-shadow:var(--gc-shadow); }
.setup-banner:hover{ border-color:var(--gc-accent); }
.setup-banner-icon{ padding:5px 8px; border-radius:var(--gc-r-xs); background:rgba(var(--sw-warn-rgb),.12); font-family:var(--gc-f-mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.setup-banner-text strong{ font:700 13.5px/1.3 var(--gc-f-ui); }
.setup-card{ border-radius:var(--gc-r); background:var(--gc-face-sunk); }
.setup-title{ font:700 22px/1.15 var(--gc-f-display); text-transform:uppercase; letter-spacing:.01em; }
.setup-tag{ font-family:var(--gc-f-mono); }
.setup-step{ border-radius:var(--gc-r-s); }
.step-n{ font-family:var(--gc-f-num); }
.step-c .hl{ border-radius:var(--gc-r-xs); }

/* buttons inside the card and the dialog */
.btn{ border-radius:var(--gc-r-s); font:700 11px/1 var(--gc-f-mono); letter-spacing:.12em; text-transform:uppercase; min-height:40px; }
.btn-primary{ color:#fff; border-color:rgba(198,166,255,.75); background:linear-gradient(180deg,#b184ff,#8a4df0); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
:root[data-theme="light"] .btn-primary{ background:linear-gradient(180deg,#8f5af0,#6a2ccf); border-color:rgba(106,44,207,.85); }
.icon-btn{ border-radius:var(--gc-r-s); }

/* the settings dialog: the framework's dialog shape */
.settings-dialog{
  width:min(100% - 28px,520px); border-radius:var(--gc-r); border-color:var(--gc-edge-hi);
  background:var(--gc-face); box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  /* 2026-10-05 planner fix (Ishaq: "players can not change the settings, we can't scroll down"): a native dialog is
     capped at the viewport height by the browser; overflow:hidden clipped the lower sections instead of scrolling. */
  overflow:auto; overscroll-behavior:contain; max-height:calc(100vh - 32px);
}
.settings-dialog::backdrop{ background:color-mix(in srgb,#07050e 72%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.settings-head{ position:relative; padding:20px 22px; }
.settings-head::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent); }
.settings-head h2{ font:700 22px/1.1 var(--gc-f-display); text-transform:uppercase; letter-spacing:.01em; }
.settings-section{ padding:16px 22px; }
.settings-section h3{ font-family:var(--gc-f-mono); letter-spacing:.16em; color:var(--sw-ink-3); }
.select-row select{ border-radius:var(--gc-r-s); min-height:38px; }
.settings-sub{ border-radius:var(--gc-r-s); }
.keybind-btn{ border-radius:var(--gc-r-s); font-family:var(--gc-f-mono); min-height:32px; }
.settings-foot{ padding:16px 22px 20px; }

@media (max-width:700px){
  .voice-card{ padding:30px 18px 24px; }
}
@media (max-width:560px){
  .btn-mega{ width:100%; padding:0 18px; min-height:58px; font-size:12px; }
  .hero-title{ font-size:30px; }
  .ctrl{ min-height:66px; }
}
@media (prefers-reduced-motion:reduce){
  .btn-mega-glow{ animation:none; }
}