/* The browser pack: a four-key beltpack face. Same panel as the director —
   graphite, amber for anything lit, talk red, listen green — sized for a
   thumb. System fonts only; nothing loads from outside the unit. */

:root {
  color-scheme: dark;
  --bg: #121417;
  --panel: #1b1e22;
  --well: #0d0f11;
  --key: #23272c;
  --key-hi: #2c3137;
  --line: #2f343a;
  --line-strong: #454c54;
  --ink: #e6e9ec;
  --ink-2: #9aa3ac;
  --ink-3: #626a73;
  --amber: #f0a830;
  --red: #e5484d;
  --red-deep: #6e1d20;
  --green: #3ecf8e;
  --callc: #49c6ff;  /* call signal: neither talk red, tally amber nor listen green */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --pad: max(10px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.35 var(--sans);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 13px; }

/* ---------- status strip ---------- */
#strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; min-height: 48px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.readout { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#who { flex: 1 1 auto; min-width: 0; color: var(--ink); }
#link { flex: 0 0 auto; }
/* the server in use when there is a failover list; amber while on a backup */
.srv { flex: 0 1 auto; min-width: 0; max-width: 42%; font-size: 12px; }
.srv.backup { color: var(--amber); font-weight: 600; }
.conn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 6px 4px; min-height: 36px;
  font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em;
}
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); flex: none; }
.lamp.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp.wait { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.lamp.bad { background: var(--red); box-shadow: 0 0 8px var(--red); }
.icon-btn {
  flex: none; width: 44px; height: 40px; border-radius: 6px;
  background: var(--key); border: 1px solid var(--line); display: grid; place-items: center;
}
.gear, .gear::before, .gear::after { display: block; width: 18px; height: 2px; background: var(--ink-2); border-radius: 1px; }
.gear { position: relative; }
.gear::before, .gear::after { content: ""; position: absolute; left: 0; }
.gear::before { top: -6px; }
.gear::after { top: 6px; }

.banner {
  padding: 8px 12px; background: #3a2a10; color: #ffd796; border-bottom: 1px solid #6a4b17;
  font-size: 13px;
}

/* ---------- keys ---------- */
#pack { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 10px var(--pad); gap: 10px; }
#keys {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
}
#keys.one { grid-template-columns: 1fr; }
@media (min-width: 760px) and (min-aspect-ratio: 4/3) {
  #keys { grid-template-columns: repeat(4, 1fr); }
  #keys.one { grid-template-columns: minmax(0, 520px); justify-content: center; }
}

.ch {
  position: relative;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.ch.call { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 14px rgba(240, 168, 48, .35); }
.ch.unassigned { opacity: .45; }

.talk {
  position: relative; flex: 1 1 auto; min-height: 96px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  margin: 0; padding: 26px 10px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: pointer;
}
div.talk { cursor: default; }
.talk:disabled { cursor: default; }
.talk .num {
  position: absolute; left: 10px; top: 8px;
  font: 600 13px/1 var(--mono); color: var(--ink-3);
}
.talk .call-lamp {
  position: absolute; right: 10px; top: 8px; width: 14px; height: 14px; border-radius: 50%;
  background: #3a3226; border: 1px solid #4a3f2c;
}
.ch.call .call-lamp { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px var(--amber); }
.talk .listen-lamp {
  position: absolute; right: 32px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #20372c;
}
.talk .listen-lamp.on { background: var(--green); }
.talk .lbl {
  font: 700 clamp(20px, 6.5vw, 34px)/1.05 var(--cond); letter-spacing: .01em; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
#keys.one .talk .lbl { font-size: clamp(30px, 10vw, 54px); }
.talk .st { font: 600 12px/1 var(--cond); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.ch.talking .talk { background: linear-gradient(180deg, #f05a5f, var(--red)); }
.ch.talking .talk .st, .ch.talking .talk .num { color: #fff; }
.ch.latched .talk { background: repeating-linear-gradient(135deg, #d9393e 0 14px, #c93136 14px 28px); }
.ch.latched .talk .st { color: #fff; }

.lvl { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; }
.lvl .ml { font: 600 11px/1 var(--cond); color: var(--green); letter-spacing: .08em; }
.lvl output { font: 500 12px/1 var(--mono); color: var(--ink-2); width: 46px; text-align: right; }
/* the LSN switch: tap to turn the listen off and on; the level stays */
.lvl .lsn {
  width: auto; flex: none; min-height: 32px; padding: 0 8px; margin: 0 -2px 0 -4px; border-radius: 5px;
  background: #15241d; border: 1px solid #1f5c41; cursor: pointer;
}
.lvl.off .lsn { color: var(--ink-3); background: none; border-color: var(--line-strong); text-decoration: line-through; }
.lvl.off input[type=range], .lvl.off output { opacity: .35; }
.ch:has(> .lvl.off) .talk .listen-lamp.on { background: #20372c; }

/* ---------- call: CALL buttons, and a channel someone else is calling ---------- */
.callbtn {
  position: absolute; z-index: 1; top: 6px; left: 30px; min-width: 52px; height: 30px; padding: 0 10px;
  border-radius: 15px; background: #16242d; border: 1px solid #2c5367; color: var(--callc);
  font: 700 12px/1 var(--cond); letter-spacing: .1em; cursor: pointer; touch-action: manipulation;
}
#keys.one .callbtn { left: 10px; }
.callbtn:active { background: #1d3442; }
.callbtn.sent { background: var(--callc); border-color: var(--callc); color: #06141c; }
.ch.has-call .talk { padding-top: 42px; }
.ch.called { animation: call-edge 1s infinite; }
.ch.called:not(.talking) .talk { animation: call-face 1s infinite; }
.ch.called .talk .st { color: var(--callc); }
#extra.called { animation: call-edge 1s infinite; }
@keyframes call-edge {
  0%, 49% { border-color: var(--callc); box-shadow: 0 0 0 2px var(--callc), 0 0 18px rgba(73, 198, 255, .5); }
  50%, 100% { border-color: var(--line); box-shadow: none; }
}
@keyframes call-face {
  0%, 49% { background: linear-gradient(180deg, #2a6a8a, #1c4a61); }
}
@media (prefers-reduced-motion: reduce) {
  .ch.called, .ch.called .talk, #extra.called { animation: none; }
  .ch.called, #extra.called { border-color: var(--callc); box-shadow: 0 0 0 2px var(--callc); }
  .ch.called:not(.talking) .talk { background: linear-gradient(180deg, #24536b, #1b3b4d); }
}

/* ---------- other listens (key 0) ---------- */
#extra { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#extra .ch { border: 0; background: none; }
#extra .xh { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }
#extra .xl { flex: 1 1 auto; min-width: 0; font: 600 13px/1.2 var(--cond); color: var(--ink-2); }
#extra .callbtn { position: static; flex: none; }

/* ---------- range inputs: big thumbs ---------- */
input[type=range] {
  flex: 1 1 auto; min-width: 0; height: 36px; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%;
  background: #d8dde2; border: 2px solid var(--bg);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--line); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #d8dde2; border: 2px solid var(--bg); }

/* ---------- bottom bar ---------- */
#bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--pad) max(10px, env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line);
}
.meters { display: flex; flex-direction: column; gap: 5px; width: 92px; flex: none; }
.mrow { display: flex; align-items: center; gap: 6px; }
.ml { font: 600 11px/1 var(--cond); color: var(--ink-3); letter-spacing: .08em; width: 26px; }
.meter { flex: 1; height: 6px; background: var(--well); border-radius: 3px; overflow: hidden; }
.mfill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--green); }
.mfill.hot { background: var(--red); }
label.master { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.key-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 14px; border-radius: 6px;
  background: var(--key); border: 1px solid var(--line-strong);
  font: 700 15px/1 var(--cond); letter-spacing: .08em;
}
.key-btn.lit { border-color: var(--amber); color: var(--amber); }
.key-btn.danger { color: var(--red); }
.key-btn:active { background: var(--key-hi); }

/* ---------- start overlay, settings ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(10, 11, 13, .94); padding: 20px;
}
.sheet { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.wordmark { font: 700 24px/1 var(--cond); }
.product { font: 600 15px/1 var(--cond); color: var(--amber); }
.who-line { color: var(--ink-2); margin: 4px 0; }
.big-btn {
  width: 100%; min-height: 72px; border-radius: 12px; border: 1px solid var(--amber);
  background: #2b2416; color: var(--amber); font: 700 22px/1 var(--cond); letter-spacing: .04em;
}
.big-btn:active { background: #3a3020; }
.hint { color: var(--ink-3); font-size: 13px; margin: 0; }
.err { color: var(--red); margin: 0; }
.or { text-align: center; color: var(--ink-3); font-size: 13px; }
label { display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 14px; }
label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--ink); }
label.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--amber); }
.in {
  min-height: 44px; padding: 8px 10px; border-radius: 6px; background: var(--well);
  border: 1px solid var(--line-strong); color: var(--ink); -webkit-user-select: text; user-select: text;
}
dialog {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 18px; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0; font: 700 20px/1 var(--cond); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0; font-size: 13px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

#toasts {
  position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px;
}
.toast {
  max-width: 460px; padding: 9px 14px; border-radius: 8px; background: #2a2e34; border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.toast.bad { border-color: var(--red); }