/* AIR PTT shared styles: tokens and base components used by the admin console and the
 * web dispatcher. Source of truth for the values: docs/design/airptt-ui.md (section 2).
 * Plain CSS, no build step. Served at /shared/airptt.css; fonts at fonts/. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0e1820;
  --surface: #17242e;
  --surface-raised: #1d2c37;
  --line: #2b3a45;
  --line-strong: #6f818d;
  --text: #eef2f4;
  --text-muted: #a9b6bf;
  --red: #d50000;
  --red-dark: #a50012;
  --red-text: #ff6b6b;
  --red-tint: #3a1416;
  --rx: #4cc3e0;
  --rx-tint: #142a33;
  --amber: #f2b441;

  --radius: 4px;
  --radius-sm: 2px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { color: #fff; text-decoration-color: var(--text); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
p { margin: 0 0 .75rem; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--rx) 70%, transparent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small upper-case label: "CHANNELS", "RECENT TRANSMISSIONS" */
.eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- header ---- */
.ap-header {
  border-top: 4px solid var(--red);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
}
.ap-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 auto; min-width: 0; }
.ap-wordmark {
  font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 2px; line-height: 1;
  text-transform: uppercase; color: var(--text); text-decoration: none;
}
.ap-product { font-size: 14px; font-weight: 600; }
.ap-org { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.ap-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text-muted); border: 1px solid transparent;
}
.ap-link:hover { color: var(--text); border-color: var(--line); }
.ap-link[aria-current="page"] { color: var(--text); border-color: var(--line); }

/* ---- chips and badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: var(--radius);
  border: 1px solid var(--line); font-size: 13px; white-space: nowrap; color: var(--text);
}
.chip.plain { border-color: transparent; color: var(--text-muted); padding: 0 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.dot.rx { background: var(--rx); }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber); }
.dot.white { background: var(--text); }
.dot.off { background: transparent; border: 1.5px solid var(--line-strong); }
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .4px; background: var(--surface-raised); color: var(--text-muted);
  white-space: nowrap;
}
.badge.sos { background: var(--red); color: #fff; }
.badge.rx { background: var(--rx-tint); color: var(--rx); }
.badge.amber { background: transparent; color: var(--amber); border: 1px solid var(--amber); }
.badge.selected { background: var(--red); color: #fff; }

/* ---- buttons ---- */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover:not([disabled]) { background: var(--surface-raised); color: var(--text); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover:not([disabled]) { background: #e30a0a; border-color: #e30a0a; }
.btn.danger { color: var(--red-text); border-color: color-mix(in srgb, var(--red) 70%, var(--line)); }
.btn.danger:hover:not([disabled]) { background: var(--red-tint); }
.btn.small, .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.xs { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn.link { border: 0; background: none; color: var(--rx); padding: 0 6px; min-height: 36px; }
.btn.link:hover:not([disabled]) { background: none; text-decoration: underline; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn.on-red { border-color: #fff; color: #fff; }
.btn.on-red:hover:not([disabled]) { background: rgb(255 255 255 / 14%); color: #fff; }
.btn.white { background: #fff; border-color: #fff; color: var(--red-dark); font-weight: 700; }
.btn.white:hover:not([disabled]) { background: #f1f1f1; color: var(--red-dark); }
.icon-btn {
  width: 32px; height: 32px; padding: 0; border-radius: var(--radius); background: transparent;
  border: 1px solid var(--line); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icon-btn:hover { background: var(--surface-raised); }
.icon-btn.round { border-radius: 50%; border-color: var(--line-strong); width: 36px; height: 36px; }
.icon-btn svg { display: block; }
.kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); font-size: 12px; line-height: 1.5;
}

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* ---- talk button ---------------------------------------------------------------
 * <div class="talk-ring"><button class="talk" data-state="ready|listening|onair|disabled">
 *   <svg class="ico-mic"/> <svg class="ico-spk"/>
 *   <span class="talk-label"/> <span class="talk-sub"/></button></div>
 * Same size and place in every state; told apart by colour and words. */
.talk-ring {
  width: 196px; height: 196px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 12%);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.talk-ring::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 6%);
  pointer-events: none;
}
.talk {
  width: 168px; height: 168px; border-radius: 50%; padding: 0; color: var(--text); cursor: pointer;
  background: var(--surface-raised); border: 2px solid var(--line-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: inherit; box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.talk svg { display: block; }
.talk .ico-spk { display: none; }
.talk-label { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.05; }
.talk-sub { font-size: 12px; color: var(--text-muted); }
.talk[data-state="listening"] { background: var(--rx-tint); border-color: var(--rx); }
.talk[data-state="listening"] .ico-mic { display: none; }
.talk[data-state="listening"] .ico-spk { display: block; }
.talk[data-state="listening"] .talk-label { color: var(--rx); }
.talk[data-state="onair"] { background: var(--red); border-color: #ff4d4d; color: #fff; }
.talk[data-state="onair"] .talk-sub { color: #ffe3e3; }
.talk[data-state="onair"] .talk-label { font-size: 40px; }
.talk[data-state="disabled"] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---- forms ---- */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 .25rem; }
.field { margin-bottom: 14px; }
.field .hint { color: var(--text-muted); font-size: .85rem; margin-top: .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--text); min-height: 44px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
input::placeholder { color: var(--text-muted); opacity: .8; }
select option { background: var(--surface); color: var(--text); }
.error { color: var(--red-text); background: var(--red-tint); border: 1px solid color-mix(in srgb, var(--red) 60%, transparent); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.notice { padding: 24px 16px; text-align: center; color: var(--text-muted); }
.signin { max-width: 400px; margin: 8vh auto 0; padding: 0 16px; width: 100%; }
.signin-brand { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.signin .card { padding: 24px; }
.signin-title { font-size: 34px; margin-bottom: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .icon-btn { transition: background .12s; }
}