/* TGLRP Radio. The same Windows-classic chrome as vt-radio's MCC 7500
   console (radio/dispatch/dispatch.css): Tahoma 11px, #d4d0c8 face, white and
   #808080 bevels, the blue title bar, the #3f4a5a desktop behind it. Read
   that file before changing a colour here, so the two never drift apart. */
:root {
  --face: #d4d0c8;
  --face-light: #e8e5df;
  --hi: #ffffff;
  --shadow: #808080;
  --dark: #404040;
  --desk: #3f4a5a;
  --title-a: #0a5fc8;
  --title-b: #073f88;
  --select: #0a246a;
  --text: #000000;
  --muted: #404040;
  --ok: #00c000;
  --bad: #ee0000;
  font: 11px/1.35 Tahoma, "Segoe UI", sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--desk); }
::selection { background: var(--select); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* ── the classic pieces ────────────────────────────────────────────────── */
.raised { border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi); }
.sunken { border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); background: #fff; }

button, .button, select, input { font: inherit; color: var(--text); border-radius: 0; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 75px;
  height: 23px;
  padding: 0 10px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
  box-shadow: 1px 1px 0 var(--dark);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:active, .button:active, button[aria-pressed="true"], button[aria-checked="true"] {
  border-color: var(--shadow) var(--hi) var(--hi) var(--shadow);
  box-shadow: none;
}
button[aria-pressed="true"], button[aria-checked="true"] { background: #c5c1b9; font-weight: bold; }
/* the default button: the extra black frame Windows draws round it */
.default { outline: 1px solid #000; outline-offset: 0; }
.default:focus-visible { outline: 1px solid #000; box-shadow: inset 0 0 0 2px var(--face), inset 0 0 0 3px #000; }
.button[aria-disabled="true"], button:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--hi); pointer-events: none; }

select, input {
  height: 21px;
  padding: 0 3px;
  background: #fff;
  border: 2px solid;
  border-color: var(--shadow) var(--hi) var(--hi) var(--shadow);
}
select { padding-right: 0; }

.window {
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-light) var(--dark) var(--dark) var(--face-light);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--shadow);
  padding: 3px;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 4px;
  background: linear-gradient(var(--title-a), var(--title-b));
  color: #fff;
  font-weight: bold;
}
.titlebar img { width: 16px; height: 16px; }

fieldset { margin: 0; padding: 8px 10px 10px; border: 2px groove #f0f0f0; }
legend { padding: 0 3px; }

.statusbar { display: flex; gap: 2px; margin-top: 3px; }
.statusbar > * { padding: 2px 6px; border: 1px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); }
.statusbar .grow { flex: 1; }

/* the game radio's light, a real reading of /api/health */
.live { display: inline-flex; align-items: center; gap: 5px; }
.live .dot { width: 9px; height: 9px; background: #4a5a4a; border: 1px solid #2a3a2a; }
.live[data-state="up"] .dot { background: #22e022; }
.live[data-state="down"] .dot { background: #ff2020; }

.message { display: flex; gap: 10px; align-items: flex-start; }
.message i { font-size: 26px; color: var(--bad); flex: none; }

/* ── sign-in ───────────────────────────────────────────────────────────── */
.signin { display: grid; place-items: center; min-height: 100%; padding: 16px; }
.logon { width: min(440px, 100%); }
.logon .banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 0 10px;
  padding: 10px 12px;
  background: #000060;
  color: #fff;
}
.logon .banner img { width: 56px; height: 56px; flex: none; }
.logon .banner strong { display: block; font: bold 16px/1.15 Arial, sans-serif; letter-spacing: 0.02em; }
.logon .banner span { color: #ffff00; font-weight: bold; }
.logon .body { padding: 0 8px 8px; display: grid; gap: 10px; }
.logon p { margin: 0 0 10px; }
.logon .discord i { font-size: 13px; color: #5865f2; }
.logon .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.logon .facts dt { color: var(--muted); }
.logon .facts dd { margin: 0; font-weight: bold; }
.logon .error { padding: 8px; background: var(--face); }

/* ── the console page ──────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; overflow: hidden; background: var(--desk); }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 3px 4px;
  background: var(--face);
  border-bottom: 1px solid var(--shadow);
  box-shadow: inset 0 1px 0 var(--hi);
}
.bar .sep { align-self: stretch; width: 2px; margin: 1px 4px; border-left: 2px groove #f0f0f0; }
.bar .grow { flex: 1; }
.brand { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.brand img { width: 20px; height: 20px; }
.brand .name { font: bold 13px Arial, sans-serif; letter-spacing: 0.04em; }
.bar label { display: inline-flex; align-items: center; gap: 4px; }
.bar button { min-width: 0; padding: 0 8px; }
.bar .field { min-width: 70px; height: 21px; padding: 2px 5px; font-weight: bold; letter-spacing: 0.04em; }
.bar select { max-width: 170px; }
.bar i { font-size: 11px; }
.bar .who { color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.group { display: inline-flex; }
.group button + button { margin-left: -1px; }

.console { position: relative; flex: 1; min-height: 0; }
#radio { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.waiting { position: absolute; inset: 0; display: grid; place-items: center; }
.waiting .window { width: 300px; }
.waiting .body { padding: 12px; display: grid; gap: 10px; justify-items: center; text-align: center; }

/* ── callsign ──────────────────────────────────────────────────────────── */
dialog { padding: 0; border: 0; background: transparent; width: min(380px, calc(100% - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / 0.35); }
dialog .body { padding: 10px; display: grid; gap: 10px; }
dialog p { margin: 0; }
dialog .field-row { display: flex; align-items: center; gap: 8px; }
dialog input { flex: 1; height: 23px; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; }
dialog .actions { display: flex; justify-content: flex-end; gap: 6px; }
.message i.info { color: #1b5fc1; }
#askError { color: var(--bad); font-weight: bold; }

#setup { width: min(420px, calc(100% - 32px)); }
.note { margin: 0; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
dialog .actions .grow { flex: 1; }
#setup select { width: 100%; }
#setup fieldset { display: grid; gap: 8px; }
#setup fieldset + fieldset { margin-top: 8px; }

.tabs { display: flex; padding-left: 2px; margin-bottom: -10px; position: relative; z-index: 1; }
.tabs button {
  min-width: 0;
  height: 20px;
  padding: 0 10px;
  margin-top: 2px;
  border-width: 2px 2px 0;
  border-color: var(--hi) var(--dark) transparent var(--hi);
  box-shadow: none;
  font-weight: normal;
  background: var(--face);
}
.tabs button:active { border-color: var(--hi) var(--dark) transparent var(--hi); }
.tabs button[aria-selected="true"] { height: 23px; margin: 0 -2px -1px; padding: 0 12px; position: relative; z-index: 1; }
.tabs button[aria-selected="false"] + button, .tabs button + button[aria-selected="false"] { margin-left: -1px; }
.page { padding: 10px; border: 2px solid; border-color: var(--hi) var(--dark) var(--dark) var(--hi); }
.tabs[hidden] + .page, .tabs[hidden] ~ .page { border-color: transparent; padding: 0; }

.meter { flex: 1; height: 18px; padding: 1px; background: #fff; }
.meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--select) 0 8px, transparent 8px 10px);
}

#pttTest[data-state="up"] { font-weight: bold; }

.waiting.dim { background: rgb(0 0 0 / 0.45); z-index: 2; }
#offline .window { width: 360px; }
#offline .body { justify-items: stretch; text-align: left; }
#offline p { margin: 0 0 4px; }
.message i.warn { color: #c89600; }
.busy { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--select); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .busy { animation: none; } }