/* Bench house style — tokens and grammar from SGL Scope v7. Every page uses these. */
:root{
  --navy:#0B1220; --panel:#111A2B; --panel2:#182338; --line:#233049; --line2:#2E3D5C;
  --text:#E6EDF7; --muted:#7C8AA5; --azure:#3A86FF;
  --ch1:#3A86FF; --ch2:#FFB020; --ch3:#FF5AC8; --ch4:#38D996;
  --grid:#1C2740; --grid2:#2A3A5C; --trig:#FF6B4A; --ok:#38D996;
  --mono:"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--navy);color:var(--text);font-family:var(--sans);font-size:14px}
body{display:flex;flex-direction:column;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--azure);text-decoration:none}
/* header — identical grammar to the scope */
.hdr{display:flex;align-items:center;gap:10px;padding:0 12px;height:44px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;margin-right:6px}
.brand svg{height:26px;width:auto}
.brand .name{font-family:Michroma,var(--sans);letter-spacing:.18em;font-size:11px;color:var(--muted)}
.brand .inst{font-size:12px;letter-spacing:.14em;color:var(--azure);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line2);border-radius:6px;background:var(--navy);font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--text)}
.pill b{font-family:var(--sans);font-weight:700;font-size:11px;color:var(--muted);letter-spacing:.06em}
.pill.h b{color:var(--ch2)}.pill.t b{color:var(--trig)}
.pill.run{border-color:var(--ok);color:var(--ok);font-weight:700;letter-spacing:.08em}
.pill.run.stopped,.pill.bad{border-color:var(--trig);color:var(--trig)}
.pill.act{border-color:var(--azure);color:var(--azure)}
.pill.sess{color:var(--muted)}
.spacer{flex:1}
/* body */
main{flex:1;padding:12px;max-width:1080px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.sec h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:700}
.sec h4 span{color:var(--azure)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row label{font-size:11px;color:var(--muted);min-width:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;min-height:34px;border:1px solid var(--line2);border-radius:6px;background:var(--navy);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--text)}
.btn:active,.btn.on{background:var(--azure);border-color:var(--azure);color:#fff}
.btn.primary{background:var(--azure);border-color:var(--azure);color:#fff}
.btn.warn{color:var(--trig);border-color:var(--trig)}
.btn.big{padding:12px 14px;min-height:44px;font-size:13.5px}
.btn:disabled{opacity:.4;cursor:default}
.seg{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg button{flex:1;padding:7px 0;font-size:12px;color:var(--muted);background:var(--navy);min-height:34px}
.seg button.on{background:var(--azure);color:#fff;font-weight:600}
.stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--navy);flex:1}
.stepper button{width:40px;height:36px;font-size:18px;color:var(--azure)}
.stepper span{flex:1;text-align:center;font-family:var(--mono);font-size:12.5px}
input.field{background:var(--navy);color:var(--text);border:1px solid var(--line2);border-radius:6px;padding:8px 10px;font:inherit;font-family:var(--mono);min-height:36px}
.meas{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-family:var(--mono);font-size:12.5px}
.meas span:nth-child(odd){color:var(--muted)}.meas span:nth-child(even){text-align:right}
/* station/session cards, same grammar as channel cards */
.card{border:1px solid var(--line2);border-radius:8px;padding:8px 26px 8px 10px;background:var(--navy);display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;position:relative;--c:var(--azure)}
.card .n{grid-row:span 2;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#050912;background:var(--c);align-self:center}
.card .v{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.card .o{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.card .pw{position:absolute;right:8px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--line2)}
.card.on .pw{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.card.busy .pw{background:var(--trig);box-shadow:0 0 6px var(--trig)}
.card .act{grid-row:span 2}
.grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.muted{color:var(--muted)}.mono{font-family:var(--mono)}
/* the join code is the one loud thing on the session screen */
.code{font-family:var(--mono);font-size:clamp(48px,14vw,104px);letter-spacing:.16em;font-weight:700;color:var(--azure);text-align:center;line-height:1.1;margin:6px 0}
.code.sm{font-size:clamp(32px,9vw,56px)}
.qr{width:168px;height:168px;background:var(--navy);border:1px solid var(--line2);border-radius:8px;padding:8px}
.readout{font-family:var(--mono);font-size:clamp(56px,16vw,128px);font-weight:700;text-align:center;color:var(--ch2);line-height:1.05;margin:16px 0}
.readout small{font-size:.35em;color:var(--muted);font-weight:600;margin-left:.2em}
.err{position:fixed;left:0;right:0;bottom:0;background:var(--trig);color:#050912;padding:8px 12px;font-size:13px;display:none;z-index:9}
@media (max-width:820px){ .hdr{height:auto;padding:6px 8px;row-gap:6px} .brand .name{display:none} .pill{height:28px;font-size:12px;padding:0 8px} .spacer{display:none} }