/* Swarah UI, built on tokens.css. No inline styles anywhere (CSP style-src 'self'). */
[hidden]{display:none!important}
.stage{width:100%}#orb{width:100%;aspect-ratio:1}
*{box-sizing:border-box}
body{margin:0;font:var(--sw-fs-m)/1.55 var(--sw-font);background:var(--sw-grad-haze),var(--sw-grad-bg);background-attachment:fixed;color:var(--sw-text);min-height:100vh}
main{max-width:720px;margin:auto;padding:20px 16px 40px}
a{color:var(--sw-accent)}
h1,h2,h3{font-weight:600;letter-spacing:.01em}h2{font-size:var(--sw-fs-l)}h3{font-size:var(--sw-fs-m)}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand .wave{width:52px;height:47px;flex:none}
h1{margin:0;font-size:var(--sw-fs-word);line-height:1.1;font-weight:500}
.word{background:var(--sw-grad-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag,.badge{font-size:var(--sw-fs-xs);background:var(--sw-indigo);color:var(--sw-text);padding:2px 10px;border-radius:var(--sw-r-pill);vertical-align:middle;font-weight:500}.badge{background:var(--sw-border)}
.sub{color:var(--sw-text-2);margin:4px 0 0;width:100%}
.notfor{color:var(--sw-warn-text);font-size:var(--sw-fs-s);margin:10px 0}
.gate,.panel,dialog{background:var(--sw-panel-a);border:1px solid var(--sw-border);border-radius:var(--sw-r-m);padding:18px;box-shadow:var(--sw-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.panel{margin:12px 0}.gate label{display:block;margin:8px 0}.gate a{color:var(--st-happy-hi)}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--sw-accent);outline-offset:2px}
#agree,#mic{border:0;border-radius:var(--sw-r-pill);background:var(--sw-grad-wave);color:var(--sw-text);font-weight:600;box-shadow:var(--sw-glow-violet)}
#agree{margin-top:10px;padding:10px 24px}#agree:disabled{opacity:.4;box-shadow:none}
#mic{font-size:var(--sw-fs-l);padding:14px 30px;display:block;margin:10px auto}#mic[aria-pressed=true]{background:var(--st-error);box-shadow:none}
.blocked{background:var(--sw-error-surface);border-left:4px solid var(--st-error);padding:16px;border-radius:var(--sw-r-s)}
.ailabel{position:sticky;top:0;z-index:5;display:inline-block;background:var(--sw-amber);color:var(--sw-on-amber);font-weight:600;padding:3px 12px;border-radius:var(--sw-r-pill);margin-bottom:8px;font-size:var(--sw-fs-s)}
.acct{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.acct button,.panel button,.row button{padding:7px 16px;border-radius:var(--sw-r-pill);border:1px solid var(--sw-border);background:var(--sw-panel);color:var(--sw-text)}
.status{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;color:var(--sw-text-2);font-size:var(--sw-fs-s)}#conn{margin-left:auto;color:var(--sw-accent)}
.hint,.planned,.small,.opt span{color:var(--sw-text-3);font-size:var(--sw-fs-s)}
#log{min-height:140px;background:rgba(2,9,34,.6);border:1px solid var(--sw-border);border-radius:var(--sw-r-m);padding:10px 12px;max-height:44vh;overflow:auto}
.u{color:var(--sw-info-text)}.a{color:var(--st-happy-hi)}
.opt{display:block;margin:10px 0;padding:10px;border:1px solid var(--sw-border);border-radius:var(--sw-r-s)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.danger{border-color:var(--st-error)!important;color:var(--sw-warn-text)!important}
.link{border:0!important;background:none!important;color:var(--st-happy-hi)!important;text-decoration:underline}
textarea{width:100%;background:rgba(2,9,34,.6);color:var(--sw-text);border:1px solid var(--sw-border);border-radius:var(--sw-r-s);padding:8px;font:inherit}
#chats li{margin:4px 0}.err{color:var(--sw-warn-text)}.ts:empty{display:none}
dialog{max-width:460px;color:var(--sw-text);background:var(--sw-panel)}dialog::backdrop{background:rgba(2,9,34,.75)}#wdDialog{border-color:var(--st-error)}
/* prefs */
.prefs{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:8px 0}
.pick{display:flex;flex-direction:column;font-size:var(--sw-fs-xs);color:var(--sw-text-2)}
select{font:inherit;font-size:var(--sw-fs-s);background:var(--sw-panel);color:var(--sw-text);border:1px solid var(--sw-border);border-radius:var(--sw-r-pill);padding:6px 12px;min-height:36px}
/* stage */
.stage{position:relative;display:flex;justify-content:center;align-items:center;margin:6px auto}
#orb{max-width:250px;margin:4px auto}
/* desktop: brand + legal left, stage centre, controls and transcript right */
@media (min-width:1024px){
  main{max-width:1280px;display:grid;grid-template-columns:300px 1fr;gap:0 36px;padding:28px 32px}
  main>header,main>.notfor{grid-column:1}main>section,main>p#checking{grid-column:2;grid-row:1/span 3}
  .brand{flex-direction:column;align-items:flex-start}.brand .wave{width:72px;height:65px}
  #app:not([hidden]){display:grid;grid-template-columns:minmax(360px,1fr) 380px;grid-template-areas:"label label" "acct acct" "ts ts" "err err" "stage prefs" "stage cam" "stage status" "stage mic" "stage hint" "stage log" "stage planned" "stage .";grid-template-rows:repeat(11,auto) 1fr;gap:4px 28px;align-content:start}
  #app>.ailabel{grid-area:label;justify-self:start}#acct{grid-area:acct}#ts{grid-area:ts}#err{grid-area:err}#prefs{grid-area:prefs}#camOn{grid-area:cam}#stage{grid-area:stage;align-self:start;min-height:520px}
  #app>.status{grid-area:status}#mic{grid-area:mic;justify-self:start;margin:6px 0}#app>.hint{grid-area:hint}#log{grid-area:log;max-height:340px}#app>.planned{grid-area:planned}
  #orb{max-width:350px;width:100%}
}

input[type=checkbox],input[type=radio]{accent-color:var(--sw-accent)}

/* m9d wordmark: board-sampled "Sw" silver + "arah" lilac, Poppins 600 */
.word{background:none;color:inherit;font-weight:600;letter-spacing:.01em}.word .w1{background:linear-gradient(180deg,#D9DBE5,#D0D0E3);-webkit-background-clip:text;background-clip:text;color:transparent}.word .w2{background:linear-gradient(180deg,#C8ACE6,#C298E3 60%,#C4A0E4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* m9f: board layout — orb is the only visual. Wordmark + wave top-left, orb centred in mood haze, status + round gradient mic below. */
html,body{min-height:100%;background-color:#01091D}
body{background:#01091D}
.brand{flex-direction:row!important;align-items:center!important;gap:10px}
.brand h1{font-size:28px;line-height:1;margin:0;font-weight:600;letter-spacing:.01em}
.brand .sub{flex-basis:100%;margin:6px 0 0;color:var(--sw-text-2);font-size:13px;letter-spacing:.02em}
.brand .wave{width:44px!important;height:40px!important}
#app{text-align:center}
.prefs{justify-content:center}
.stage{margin:18px auto 8px;position:relative}
.stage::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(97,38,247,.26),rgba(97,38,247,.14) 35%,rgba(0,104,252,.06) 65%,rgba(0,104,252,0));pointer-events:none}
#orb{width:min(78vw,300px)!important;max-width:none!important;margin:0 auto!important;position:relative}
.status{justify-content:center;gap:14px}#conn{margin-left:0!important;font-size:15px;color:var(--sw-text)}
#mic{border-radius:999px;padding:16px 34px;background:linear-gradient(90deg,#0068FC,#6126F7 55%,#E550BF);box-shadow:0 0 28px rgba(97,38,247,.55),0 0 0 1px rgba(255,255,255,.12) inset;margin:14px auto!important;justify-self:center!important}
@media (min-width:900px){
  #app:not([hidden]){display:block!important}#app>*{margin-left:auto;margin-right:auto}#stage{min-height:0!important}
  #orb{width:420px!important}
  .hint{max-width:560px;margin:8px auto}
}
.swarah-glow{height:100lvh!important}
.brand .tagline{flex-basis:100%;margin:4px 0 0;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#C8ACE6}
html,body{overflow-x:clip}.stage::before{inset:-12%}
/* m9f band fix: html carries the indigo base (full height); body/main stay transparent so the fixed cosmic canvases (z:-1) are never covered by a body-height box */
html{min-height:100%;background:#01091D}body{min-height:100%;background:transparent!important}