:root {
  --bg: #f3f4f6; --panel: #ffffff; --text: #111827; --muted: #4b5563; --line: #d1d5db;
  --go: #15803d; --go-text: #ffffff; --stop: #dc2626; --busy: #b45309; --off: #9ca3af;
  --cam: #1d4ed8; --video: #000000; --surface-2: #e8ebf0; --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --panel: #1a1d23; --text: #f3f4f6; --muted: #a1a7b0; --line: #333944;
    --go: #16a34a; --stop: #ef4444; --busy: #f59e0b; --off: #6b7280; --cam: #3b82f6; --surface-2: #232a35; --accent: #3b82f6;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --panel: #1a1d23; --text: #f3f4f6; --muted: #a1a7b0; --line: #333944;
  --go: #16a34a; --stop: #ef4444; --busy: #f59e0b; --off: #6b7280; --cam: #3b82f6; --surface-2: #232a35; --accent: #3b82f6;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Phones: keep the text size we set (no font inflation in landscape) and no grey flash on tap. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 18px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
[hidden] { display: none !important; }
button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 14px; border: 2px solid var(--line);
  background: var(--panel); color: var(--text); padding: 14px 22px; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
button:disabled { opacity: .45; cursor: default; }
button.go { background: var(--go); border-color: var(--go); color: var(--go-text); }
button.stop { background: var(--stop); border-color: var(--stop); color: #fff; }
button svg { width: 26px; height: 26px; flex: none; }
input {
  font: inherit; width: 100%; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--bg); color: var(--text);
}
.center { min-height: 100%; display: grid; place-items: center; padding: 16px; text-align: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; width: min(420px, 100%); }
.card h1 { margin: 0 0 16px; font-size: 26px; }
.card form { display: grid; gap: 14px; }
.error { color: var(--stop); min-height: 1.4em; margin: 0; }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.pill::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.pill.ready { color: var(--go); } .pill.busy { color: var(--busy); }
.pill.off { color: var(--off); } .pill.cam { color: var(--cam); }

/* ---- app bar: the same top bar on every head office page ---- */
.appbar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.logo { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2563eb, #16a34a); }
.logo svg { width: 20px; height: 20px; }
.tabs { display: flex; gap: 2px; margin-left: 10px; }
.tabs a, .tabs button {
  min-height: 36px; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center;
}
.tabs a:hover, .tabs button:hover { color: var(--text); background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.tabs .on, .tabs .on:hover { background: var(--surface-2); color: var(--text); }
.grow { flex: 1; }
.appbar .go { min-height: 40px; padding: 6px 16px; font-size: 15px; border-radius: 10px; gap: 8px; }
.appbar .go svg { width: 20px; height: 20px; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.who:empty { display: none; }
.who::before {
  content: attr(data-i); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px;
}
.ghost { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 9px; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.ghost:hover { color: var(--text); border-color: var(--muted); }
@media (max-width: 900px) { .brand b { display: none; } .tabs { margin-left: 0; } }
@media (max-width: 700px) {
  .appbar { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  /* Very narrow phones: the page tabs scroll sideways inside the bar instead of widening the page. */
  .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs button { flex: none; white-space: nowrap; }
  .tabs a, .tabs button { padding: 6px 10px; font-size: 14px; }
  .appbar .go { padding: 6px 12px; font-size: 14px; }
  .who { display: none; }
}

/* Automatic quality chip (netq.js): shown only while the app is holding video quality back to keep
   a weak connection working. It is information, not a control; there is nothing to set. */
.netq {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--busy) 16%, transparent);
  color: var(--busy); border: 1px solid color-mix(in srgb, var(--busy) 40%, transparent);
}
.netq::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.netq.audio { background: color-mix(in srgb, var(--stop) 16%, transparent); color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); }
/* On the dark call screen the chip sits on video, so it needs its own backing. */
.full .netq { background: rgba(0, 0, 0, .45); color: #fcd34d; border-color: rgba(252, 211, 77, .45); }
.full .netq.audio { color: #fca5a5; border-color: rgba(252, 165, 165, .45); }

/* Touch screens: iPhone zooms the whole page into any field whose text is smaller than 16px, and
   does not zoom back out. Every field is at least 16px on touch, whatever the page sets. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}