/* WispAyr Comms - operator surfaces. Dark by default: these are used at FOH,
   in a van, and in a dark field. No tickers, no marquees - state updates in
   place (house rule). */
:root{
  --bg:#0c1114; --panel:#141c20; --panel-2:#1b262b; --line:#26343a;
  --ink:#e4ebec; --ink-2:#93a4a9; --ink-3:#66787e;
  --accent:#3fb0c4; --live:#4cbb7f; --warn:#d9a844; --fault:#e07a66;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
.wrap{max-width:900px;margin:0 auto;padding:22px 18px 60px}
h1{font-size:20px;margin:0 0 2px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--ink-2);font-size:13.5px;margin:0 0 22px}
.mono{font-family:var(--mono)}

.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pill{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:2px;background:var(--panel-2);color:var(--ink-2)}
.pill.on{background:rgba(76,187,127,.16);color:var(--live)}
.pill.off{background:rgba(224,122,102,.16);color:var(--fault)}
.pill.wait{background:rgba(217,168,68,.16);color:var(--warn)}

button{font-family:var(--sans);font-size:14px;font-weight:600;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);padding:9px 16px;border-radius:3px;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#06181c}
button.danger{background:transparent;border-color:var(--fault);color:var(--fault)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

input,select{font-family:var(--sans);font-size:14px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:9px 11px;min-width:0}
label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.grow{flex:1 1 200px}

.msg{padding:11px 14px;border-radius:3px;font-size:14px;margin-bottom:14px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(224,122,102,.13);color:var(--fault);border:1px solid rgba(224,122,102,.3)}
.msg.ok{background:rgba(76,187,127,.13);color:var(--live);border:1px solid rgba(76,187,127,.3)}

.people{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.person{display:flex;align-items:center;gap:11px;background:var(--panel);padding:11px 14px}
.person .nm{flex:1;font-size:14.5px}
.person .who{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.meter{width:52px;height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;flex:none}
.meter i{display:block;height:100%;width:0%;background:var(--live);transition:width .08s linear}
.empty{color:var(--ink-3);font-size:14px;padding:18px 14px;text-align:center;background:var(--panel)}

video{width:100%;background:#000;display:block;border-radius:3px}