/* Coral Springs CAD. The whole design system lives in this one file: there is no build step. docs/CAD_LOOK.md is the contract for how it looks.
   Order: tokens, base, shell, top bar, navigation, notices, alerts, buttons, tags, forms, tabs, menu, modal, toasts, data display, panic,
   call parts, dispatch, My Unit, map, command bar, sign-in, go on duty, phone, motion. js/README-components.md explains the conventions. */

/* ---- tokens ---------------------------------------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* The one accent. --orange is the colour itself; --orange-deep is that colour as a fill under white text, because white on #E25A00 is only 3.7:1. */
  --orange: #E25A00;
  --orange-deep: #C94E00;
  --orange-press: #AD4300;
  --orange-tint: #FDF1E8;
  --orange-tint-2: #FADFCB;
  --accent-text: #B84700;
  --on-accent: #FFFFFF;
  --white: #FFFFFF;

  --ground: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #F7F8F9;
  --surface-3: #ECEEF1;
  --ink: #16191D;
  --ink-2: #3A4049;
  --muted: #5C6470;
  --faint: #7A818C;
  --line: #D9DCE1;
  --line-soft: #E6E8EC;
  --line-strong: #BFC4CC;

  /* Status colours are flat and only mean status. */
  --red: #C62828;
  --red-solid: #C62828;
  --red-deep: #A31F1F;
  --red-tint: #FCEBEB;
  --red-text: #B01E1E;
  --green: #1B7F4B;
  --green-solid: #1B7F4B;
  --green-tint: #E6F4EC;
  --green-text: #136339;
  --blue: #1F5FBF;
  --blue-solid: #1F5FBF;
  --blue-tint: #E8F0FB;
  --blue-text: #174F9F;
  --amber: #B7791F;
  --amber-solid: #9A6508;
  --amber-tint: #FBF2DF;
  --amber-text: #7A5200;
  --idle: #7A818C;
  --idle-solid: #5C6470;
  --idle-tint: #ECEEF1;
  --idle-text: #4A515C;

  --sea: #3D6973;
  --map-leo: #2F7BEA;
  --map-fd: #E8473F;
  --map-dot: #E5A100;
  --map-dispatch: #8E7BD9;
  --map-p1: #E5262B;
  --map-p2: #E5A100;
  --map-p3: #AEB4BD;

  --scrim: rgba(12, 14, 18, .5);
  --shadow-1: none;
  --shadow-2: 0 2px 8px rgba(16, 20, 26, .12);
  --shadow-3: 0 8px 24px rgba(16, 20, 26, .18);
  --focus: #E25A00;

  /* --font-display is only for what docs/CAD_LOOK.md lists: page titles, my callsign, a call's type. css/accents.css holds those pieces. */
  --font-body: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  --fs-body: 13px;
  --fs-read: 14px;
  --fs-sm: 12px;
  --fs-tag: 11.5px;
  --fs-label: 12px;
  --fs-head: 15px;
  --fs-title: 20px;

  --r-sm: 4px;
  --r: 4px;
  --r-lg: 4px;
  --mast-h: 44px;
  --tab-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --gutter: 16px;
  --ease: ease-out;
  --fast: 100ms;
  --med: 120ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --orange: #FF7A1A;
  --orange-deep: #FF7A1A;
  --orange-press: #FF9147;
  --orange-tint: #33241A;
  --orange-tint-2: #4A2F1C;
  --accent-text: #FF9148;
  --on-accent: #111418;
  --ground: #111418;
  --surface: #1A1E24;
  --surface-2: #222730;
  --surface-3: #2A3038;
  --ink: #E7E9EC;
  --ink-2: #C6CBD2;
  --muted: #9AA3AF;
  --faint: #7B8490;
  --line: #2E343D;
  --line-soft: #262B33;
  --line-strong: #414955;
  --red: #F0625F;
  --red-tint: #3A1B1D;
  --red-text: #FF9D9A;
  --green: #34B778;
  --green-tint: #12301F;
  --green-text: #6FD9A3;
  --blue: #5B9BF0;
  --blue-solid: #2563C7;
  --blue-tint: #16263F;
  --blue-text: #9CC2F7;
  --amber: #E0A33B;
  --amber-tint: #33270F;
  --amber-text: #F0C274;
  --idle: #9AA3AF;
  --idle-tint: #2A3038;
  --idle-text: #B7BEC8;
  --scrim: rgba(4, 5, 7, .62);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .5);
  --focus: #FF7A1A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --orange: #FF7A1A;
    --orange-deep: #FF7A1A;
    --orange-press: #FF9147;
    --orange-tint: #33241A;
    --orange-tint-2: #4A2F1C;
    --accent-text: #FF9148;
    --on-accent: #111418;
    --ground: #111418;
    --surface: #1A1E24;
    --surface-2: #222730;
    --surface-3: #2A3038;
    --ink: #E7E9EC;
    --ink-2: #C6CBD2;
    --muted: #9AA3AF;
    --faint: #7B8490;
    --line: #2E343D;
    --line-soft: #262B33;
    --line-strong: #414955;
    --red: #F0625F;
    --red-tint: #3A1B1D;
    --red-text: #FF9D9A;
    --green: #34B778;
    --green-tint: #12301F;
    --green-text: #6FD9A3;
    --blue: #5B9BF0;
    --blue-solid: #2563C7;
    --blue-tint: #16263F;
    --blue-text: #9CC2F7;
    --amber: #E0A33B;
    --amber-tint: #33270F;
    --amber-text: #F0C274;
    --idle: #9AA3AF;
    --idle-tint: #2A3038;
    --idle-text: #B7BEC8;
    --scrim: rgba(4, 5, 7, .62);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, .5);
    --focus: #FF7A1A;
  }
}

/* Tones: set once, read by anything that wants a colour family. There is no orange tone any more: orange is not a status. */
.tone-good, .chip--good { --tone: var(--green); --tone-solid: var(--green-solid); --tone-tint: var(--green-tint); --tone-text: var(--green-text); }
.tone-info, .chip--info { --tone: var(--blue); --tone-solid: var(--blue-solid); --tone-tint: var(--blue-tint); --tone-text: var(--blue-text); }
.tone-warn, .chip--warn { --tone: var(--amber); --tone-solid: var(--amber-solid); --tone-tint: var(--amber-tint); --tone-text: var(--amber-text); }
.tone-bad, .chip--bad { --tone: var(--red); --tone-solid: var(--red-solid); --tone-tint: var(--red-tint); --tone-text: var(--red-text); }
.tone-idle, .chip--idle { --tone: var(--idle); --tone-solid: var(--idle-solid); --tone-tint: var(--idle-tint); --tone-text: var(--idle-text); }
.tone-orange, .chip--orange, .tone-neutral, .chip--neutral { --tone: var(--muted); --tone-solid: var(--idle-solid); --tone-tint: var(--surface-3); --tone-text: var(--ink-2); }

/* ---- base ------------------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

html.has-modal { overflow: hidden; }
html.has-scrollbar { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--fs-body)/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: 600; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
button { cursor: pointer; }
button:disabled { cursor: default; }
code { font-family: var(--font-mono); font-size: .95em; }
::selection { background: var(--orange-deep); color: var(--on-accent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.icon { flex: none; }

.display { font-weight: 600; }

/* Call numbers, callsigns, plates and clock times, always the same way, and nothing else. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .95em;
  font-weight: 500;
  letter-spacing: 0;
}

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--accent-text); text-decoration-color: currentColor; }

.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ground);
}
.splash img { width: 44px; height: auto; }

/* ---- shell ----------------------------------------------------------------------------------------------------------- */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell--fill { height: 100vh; height: 100dvh; overflow: hidden; }

.main { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; }
.main--fill { flex: 1 1 0; min-height: 0; }
.shell--phone .main { padding-bottom: calc(var(--tab-h) + var(--safe-b)); }

.view { min-width: 0; flex: 1 0 auto; }
.view--fill { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }

.page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}
.page--wide { max-width: 1440px; }

.pagehead { margin-bottom: 16px; }
.pagehead__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.pagehead__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pagehead__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pagehead__titles { min-width: 0; }
.pagehead__title { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pagehead__sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-body); max-width: 72ch; }
.pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel + .panel { margin-top: 12px; }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
}
.panel__title { font-size: var(--fs-label); font-weight: 600; line-height: 1.3; color: var(--muted); }
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.panel__body { padding: 12px; }
.panel--flush .panel__body { padding: 0; }

/* ---- top bar --------------------------------------------------------------------------------------------------------- */
.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding-top: var(--safe-t);
}
.mast__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--mast-h);
  padding: 0 12px;
}

.mast__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: none;
  color: var(--ink);
  text-decoration: none;
}
.mast__mark { width: 22px; height: 16px; object-fit: contain; flex: none; }
.mast__names { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mast__word { font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.mast__preview { color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.mast__grow { flex: 1 1 0; min-width: 0; }

.mast__nav { display: flex; align-self: stretch; align-items: stretch; margin-left: 12px; flex: none; }
.mast__nav .menu { display: flex; }
.mast__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--fast), color var(--fast);
}
.mast__link:hover { background: var(--surface-2); color: var(--ink); }
.mast__link.is-on { color: var(--accent-text); border-bottom-color: var(--orange); }
.mast__link:focus-visible { outline-offset: -2px; }

.live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  flex: 0 1 auto;       /* the first thing to give way if a long status needs the room */
  min-width: 0;
  overflow: hidden;
  padding: 2px;
}
.live__item { display: inline-flex; align-items: center; gap: 4px; }
.live__item b { font-weight: 500; color: var(--ink-2); }

.mast__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--muted);
  flex: none;
  transition: background-color var(--fast);
}
.mast__search:hover { background: var(--surface-2); color: var(--ink); }
.mast__search-text { font-size: var(--fs-sm); }

.unitctl { flex: none; }
.teamctl__btn { padding: 0 8px; font-weight: 600; }
.teamctl__word { white-space: nowrap; }
.unitctl__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  transition: background-color var(--fast);
}
.unitctl__btn:hover { background: var(--surface-2); }
.unitctl__emblem { width: 18px; height: 18px; border-radius: 2px; flex: none; }
.unitctl__sign { color: var(--ink); }
.unitctl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); flex: none; }
.unitctl__btn > .icon { color: var(--muted); }
.unitctl__btn.is-panic { background: var(--red-solid); border-color: var(--red-solid); color: #fff; }
.unitctl__btn.is-panic .unitctl__sign, .unitctl__btn.is-panic > .icon { color: #fff; }

.statusitem { display: flex; align-items: center; gap: 8px; }
.statusitem__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); flex: none; }
.statusitem__code { min-width: 40px; font-weight: 600; }

.avatarmenu { flex: none; }
.avatarmenu__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  flex: none;
}

/* ---- bottom navigation and the More sheet ----------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}
.tabbar__item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.tabbar__item.is-on { color: var(--accent-text); }
.tabbar__item:active { background: var(--surface-2); }
.tabbar__item:focus-visible { outline-offset: -3px; }

.moresheet__grid { border-bottom: 1px solid var(--line); }
.moresheet__item, .moresheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: left;
}
.moresheet__item:last-child, .moresheet__row:last-child { border-bottom: 0; }
.moresheet__item.is-on { color: var(--accent-text); font-weight: 500; }
.moresheet__item:active, .moresheet__row:active { background: var(--surface-2); }
.moresheet__item .icon, .moresheet__row .icon { color: var(--muted); }
.moresheet__item.is-on .icon { color: inherit; }
.moresheet__value { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); }

/* ---- notices ---------------------------------------------------------------------------------------------------------- */
.banners { position: sticky; top: calc(var(--mast-h) + var(--safe-t)); z-index: 35; flex: none; }
.banners:empty { display: none; }
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-height: 32px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-body);
}
.banner > .icon { color: var(--muted); }
.banner__title { font-weight: 600; white-space: nowrap; }
.banner__sign { font-weight: 600; }
.banner__text { min-width: 0; flex: 0 1 auto; }
.banner__text b { font-weight: 600; }
.banner__age { font-size: var(--fs-sm); opacity: .9; }
.banner__more { font-size: var(--fs-sm); opacity: .9; white-space: nowrap; }
.banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.banner--signal, .banner--panic { border-bottom-color: rgba(255, 255, 255, .24); color: #fff; }
.banner--signal { background: var(--red-solid); }
.banner--panic { background: var(--red-deep); }
.banner--signal > .icon, .banner--panic > .icon { color: #fff; }
.banner--warn { background: var(--amber-tint); color: var(--amber-text); }
.banner--warn > .icon { color: inherit; }
.banner--hint { flex-wrap: nowrap; gap: 8px; color: var(--muted); }
.banner--hint .linkbtn { flex: none; font-size: var(--fs-sm); }
.banner--hint .banner__text { flex: none; font-size: var(--fs-sm); }
.banner__close { margin-left: auto; }
.banner__link { color: inherit; font-weight: 600; text-underline-offset: 2px; }
.banner--list { display: block; padding: 0; }
.banner__item { display: flex; align-items: center; gap: 2px 8px; min-height: 32px; padding: 3px 12px; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.banner__item:last-of-type { border-bottom: 0; }
.banner__item .banner__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner__item .banner__actions { flex: none; flex-wrap: nowrap; width: auto; margin-left: auto; }
.banner__item .banner__sign { flex: none; white-space: nowrap; }
.banner__item .banner__actions .btn { flex: none; width: auto; padding: 0 10px; }
@media (max-width: 359px) { .banner__item .banner__age { display: none; } }
.banner--list .banner__more { display: block; padding: 0 12px 4px; }
.banner .btn:focus-visible, .alertcard .btn:focus-visible { outline-color: #fff; }

/* ---- new P1 alerts ---------------------------------------------------------------------------------------------------- */
.alerts {
  position: fixed;
  bottom: 64px;
  left: 12px;
  z-index: 55;
  width: 320px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.alertcard {
  padding: 8px 12px 10px;
  border-radius: var(--r);
  background: var(--red-solid);
  color: #fff;
  box-shadow: var(--shadow-3);
  pointer-events: auto;
}
.alertcard__top { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.alertcard__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -6px -2px auto;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: #fff;
}
.alertcard__close:hover { background: rgba(255, 255, 255, .18); }
.alertcard__type { margin: 4px 0 2px; font-size: var(--fs-head); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.alertcard__where { font-size: var(--fs-body); }
.alertcard__actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---- buttons ----------------------------------------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.btn:disabled { cursor: default; opacity: .5; }
.btn.is-busy:disabled { opacity: .78; }
.btn__label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 26px; padding: 0 8px; font-size: var(--fs-sm); gap: 4px; }
.btn--lg { min-height: 36px; padding: 0 14px; font-size: var(--fs-read); }
.btn--xl { min-height: 44px; padding: 0 18px; font-size: var(--fs-head); gap: 8px; font-weight: 600; }

.btn--primary { background: var(--orange-deep); color: var(--on-accent); font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: var(--orange-press); }
.btn--primary:disabled:not(.is-busy) { background: var(--surface-3); color: var(--muted); opacity: 1; }
.btn--secondary, .btn--soft { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover:not(:disabled), .btn--soft:hover:not(:disabled) { background: var(--surface-2); border-color: var(--faint); }
.btn--ghost { background: none; color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn--danger { background: var(--red-solid); color: #fff; font-weight: 600; }
.btn--danger:hover:not(:disabled) { background: var(--red-deep); }
.btn--onred { background: #fff; color: #A31F1F; }
.btn--onred:hover:not(:disabled) { background: #FCEBEB; }
.btn--onred-quiet { background: none; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn--onred-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }

.btn .kbd { background: color-mix(in srgb, currentColor 14%, transparent); border-color: transparent; color: inherit; margin-left: 2px; }
.btn--secondary .kbd, .btn--ghost .kbd { background: var(--surface-3); }

.btn__busy { display: inline-flex; align-items: center; gap: 3px; }
.btn__busy i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: busy-dot 900ms ease-in-out infinite; }
.btn__busy i:nth-child(2) { animation-delay: 120ms; }
.btn__busy i:nth-child(3) { animation-delay: 240ms; }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--muted);
  text-decoration: none;
  transition: background-color var(--fast), color var(--fast);
}
.iconbtn:hover { background: var(--surface-3); color: var(--ink); }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--muted);
  font: 500 11px/1 var(--font-body);
  white-space: nowrap;
}

/* ---- tags ------------------------------------------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  max-width: 100%;
  padding: 0 6px;
  border-radius: var(--r);
  background: var(--tone-tint);
  color: var(--tone-text);
  font-size: var(--fs-tag);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}
.chip--solid { background: var(--tone-solid); color: #fff; }
.chip__code { font-weight: 600; }
.chip__words { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.chip--status { min-width: 0; }

/* En route and on scene must not look alike: on scene is solid. */
.chip--status[data-code="10-23"] { background: var(--blue-solid); color: #fff; }
.chip--status[data-code="10-97"] { background: transparent; box-shadow: inset 0 0 0 1px var(--blue); }
.chip--status[data-code="10-99"], .chip--status[data-code="10-80"], .chip--status[data-code="10-70"] { background: var(--red-solid); color: #fff; }

.chip--p { justify-content: center; min-width: 24px; padding: 0 5px; }
.chip--p .chip__words { font-weight: 500; }
.chip--p1 { background: var(--red-solid); color: #fff; }
.chip--p2 { background: var(--amber-tint); color: var(--amber-text); }
.chip--p3 { background: var(--idle-tint); color: var(--idle-text); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.tag--auto, .tag--info { background: var(--blue-tint); color: var(--blue-text); }
.tag--orange { background: var(--surface-3); color: var(--ink); }
.tag--bad { background: var(--red-tint); color: var(--red-text); }
.tag--good { background: var(--green-tint); color: var(--green-text); }
.tag--warn { background: var(--amber-tint); color: var(--amber-text); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot--on { background: var(--green); }
.dot--off { background: var(--faint); }
.dot--warn { background: var(--amber); }

.livedot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  animation: live-dot 1.2s ease-in-out infinite;
}
.livedot--white { background: #fff; }

.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  flex: none;
}
.avatar--blank {
  display: inline-grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1;
}
.emblem { display: inline-block; border-radius: 2px; flex: none; object-fit: cover; }

/* ---- forms ------------------------------------------------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.field__label { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-label); font-weight: 600; color: var(--ink-2); }
.field__optional { font-weight: 400; color: var(--muted); }
.field__hint { font-size: var(--fs-sm); color: var(--muted); }
.field__error { font-size: var(--fs-sm); color: var(--red-text); font-weight: 500; }
.field.has-error .input { border-color: var(--red); }

.input {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.35;
  transition: border-color var(--fast);
}
.input::placeholder { color: var(--faint); }
.input:hover:not(:disabled) { border-color: var(--faint); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.input:disabled { background: var(--surface-3); color: var(--muted); }
.input--area { resize: vertical; min-height: 56px; line-height: 1.4; }

.selectwrap { position: relative; display: block; width: 100%; }
.input--select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; }
.selectwrap__chev { position: absolute; right: 7px; top: 50%; margin-top: -7px; pointer-events: none; color: var(--muted); }

.check, .toggle { display: flex; gap: 8px; cursor: pointer; }
.check.is-disabled, .toggle.is-disabled { cursor: default; opacity: .55; }
.check { align-items: flex-start; }
.check input, .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: transparent;
  flex: none;
}
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 1px; }
.check__text { font-size: var(--fs-body); font-weight: 500; line-height: 1.35; }
.check__hint, .toggle__hint { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.toggle { align-items: center; justify-content: space-between; }
.toggle__text { font-size: var(--fs-body); font-weight: 500; }
.toggle__track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--line-strong);
  flex: none;
  transition: background-color var(--fast);
}
.toggle__track i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform var(--fast) var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--ink); }
.toggle input:checked + .toggle__track i { transform: translateX(14px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--focus); outline-offset: 1px; }

.seg {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.seg--block { display: flex; width: 100%; }
.seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--fast), color var(--fast);
}
.seg__item:first-child { border-left: 0; }
.seg__item:hover { background: var(--surface-2); color: var(--ink); }
.seg__item:focus-visible { outline-offset: -2px; }
.seg__item.is-on { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.seg__item--p1.is-on { background: var(--red-solid); color: #fff; }
.seg__item--p2.is-on { background: var(--amber-tint); color: var(--amber-text); }
.seg--sm .seg__item { min-height: 24px; padding: 0 7px; }
.seg__count { font-size: 11px; font-weight: 500; color: var(--muted); }
.seg__item.is-on .seg__count { color: inherit; }

.chiptoggle { display: flex; flex-wrap: wrap; gap: 4px; }
.chiptoggle__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.chiptoggle__item:hover { background: var(--surface-2); }
.chiptoggle__item.is-on { border-color: var(--ink-2); background: var(--surface-3); color: var(--ink); font-weight: 600; }

.combo { position: relative; width: 100%; }
.combo__list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 248px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.combo__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: var(--fs-body);
  cursor: pointer;
}
.combo__item.is-active { background: var(--surface-3); }
.combo__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__hint { font-size: var(--fs-sm); color: var(--muted); flex: none; }
.combo__none { padding: 8px; color: var(--muted); font-size: var(--fs-sm); }

.errornote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: var(--r);
  background: var(--red-tint);
  color: var(--red-text);
  font-size: var(--fs-body);
  font-weight: 500;
}
.errornote .icon { margin-top: 1px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-body);
}
.notice .icon { margin-top: 1px; color: var(--muted); }
.notice__text { flex: 1 1 auto; min-width: 0; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 4px; }
.notice--info .icon { color: var(--blue-text); }
.notice--warn { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); background: var(--amber-tint); color: var(--amber-text); }
.notice--bad { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--red-tint); color: var(--red-text); }
.notice--good { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--green-tint); color: var(--green-text); }
.notice--warn .icon, .notice--bad .icon, .notice--good .icon { color: inherit; }

/* ---- tabs ------------------------------------------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 2px 10px 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  flex: none;
  transition: color var(--fast);
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--orange); }
.tabs__item:focus-visible { outline-offset: -3px; }
.tabs__count { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* ---- menu ------------------------------------------------------------------------------------------------------------- */
.menu { position: relative; display: inline-flex; flex: none; }
.menu__veil { display: none; }
.menu__pop {
  position: fixed;
  z-index: 70;
  min-width: 200px;
  max-width: 340px;
  max-height: min(76vh, 600px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}
.menu__heading {
  padding: 4px 8px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.menu__divider { height: 1px; margin: 4px 0; background: var(--line); }
.menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ink);
  font-size: var(--fs-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__item:hover:not(:disabled), .menu__item:focus-visible { background: var(--surface-3); outline: none; }
.menu__item:disabled { opacity: .5; cursor: default; }
.menu__item.is-danger { color: var(--red-text); }
.menu__item.is-danger:hover:not(:disabled), .menu__item.is-danger:focus-visible { background: var(--red-tint); }
.menu__item.is-checked { font-weight: 600; }
.menu__icon { display: grid; place-items: center; width: 16px; color: var(--muted); flex: none; }
.menu__item.is-checked .menu__icon { color: var(--ink); }
.menu__label { flex: 1 1 auto; min-width: 0; }
.menu__hint { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.menuitem2 { display: block; }
.menuitem2 b { font-weight: 500; margin-right: 3px; }
.menuitem2 small { display: block; color: var(--muted); font-size: var(--fs-sm); }

/* ---- modal ------------------------------------------------------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(6vh, 20px) 16px 20px;
  background: var(--scrim);
  overflow-y: auto;
  animation: fade-in var(--fast) ease-out backwards;
}
.modal__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - max(6vh, 20px) - 20px);
  max-height: calc(100dvh - max(6vh, 20px) - 20px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.modal__box:focus, .modal__box:focus-visible { outline: none; }
.modal__box--sm { max-width: 420px; }
.modal__box--md { max-width: 560px; }
.modal__box--lg { max-width: 760px; }
.modal__box--bad { border-top: 2px solid var(--red-solid); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; flex: none; }
.modal__titles { min-width: 0; }
.modal__title { font-size: var(--fs-head); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.modal__sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-body); }
.modal__close { margin: -3px -6px 0 0; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.modal__text { margin-bottom: 12px; color: var(--ink-2); font-size: var(--fs-body); }
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
}

/* ---- toasts ----------------------------------------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
.toasts:empty { display: none; }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 8px 8px 8px 10px;
  border-radius: var(--r);
  background: #22262C;
  color: #E7E9EC;
  font-size: var(--fs-body);
  line-height: 1.35;
  box-shadow: var(--shadow-2);
  pointer-events: none;                 /* a toast never eats the tap meant for the button under it */
}
.toast button { pointer-events: auto; }
.toast > .icon { margin-top: 1px; }
.toast--good > .icon { color: #6FD9A3; }
.toast--bad { background: #A31F1F; color: #fff; }
.toast--bad > .icon { color: #fff; }
.toast--warn > .icon { color: #F0C274; }
.toast--info > .icon { color: #9AA3AF; }
.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__action { padding: 0; border: 0; background: none; color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.toast__close { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 3px; background: none; color: inherit; opacity: .7; flex: none; }
.toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

/* ---- data display ------------------------------------------------------------------------------------------------------ */
.tablewrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th {
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.table td { height: 34px; padding: 2px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .is-right { text-align: right; }
.table tr.is-clickable { cursor: pointer; }
.table tbody tr:hover td { background: var(--surface-2); }
.table__skel td { height: 34px; }

/* A count is plain text, wherever it lands. */
.stat { display: flex; align-items: baseline; gap: 6px; min-width: 0; text-decoration: none; color: inherit; font-size: var(--fs-body); }
.stat__value { font-weight: 600; }
.stat__value.is-good { color: var(--green-text); }
.stat__value.is-info { color: var(--blue-text); }
.stat__value.is-warn { color: var(--amber-text); }
.stat__value.is-bad { color: var(--red-text); }
.stat__value.is-orange { color: var(--ink); }
.stat__label { color: var(--ink-2); }
.stat__hint { color: var(--muted); font-size: var(--fs-sm); }
.stat--link:hover .stat__label { text-decoration: underline; text-underline-offset: 2px; }

.progress { width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.progress span { display: block; height: 100%; background: var(--idle-solid); transition: width 200ms var(--ease); }
.progress--good span { background: var(--green); }
.progress--warn span { background: var(--amber); }
.progress--bad span { background: var(--red); }
.progress--info span { background: var(--blue); }

/* Labelled fields in two columns, like a printed record. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.facts__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.facts dt { color: var(--muted); font-size: var(--fs-sm); }
.facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-body); overflow-wrap: anywhere; min-width: 0; }

.skel { display: inline-block; height: 12px; border-radius: 2px; background: var(--surface-3); }
.skelrows { display: flex; flex-direction: column; }
.skelrow { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
.skelrow__lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 16px;
  text-align: center;
}
.empty--compact { padding: 16px 12px; }
.empty__title { font-size: var(--fs-read); font-weight: 600; line-height: 1.3; }
.empty--compact .empty__title { font-size: var(--fs-body); }
.empty__body { margin-top: 2px; color: var(--muted); font-size: var(--fs-body); }
.empty--compact .empty__body { font-size: var(--fs-sm); }
.empty__action { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* ---- panic ------------------------------------------------------------------------------------------------------------- */
.panic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 30px;
  min-width: 56px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r);
  background: var(--red-solid);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: background-color var(--fast);
}
.panic:hover:not(:disabled) { background: var(--red-deep); }
.panic:disabled { opacity: .6; }
.panic__bar {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  transform: scaleX(0);
  transform-origin: left;
}
.panic.is-holding .panic__bar { transform: scaleX(1); transition: transform 1s linear; }
.panic__label { position: relative; }
.panic__pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; animation: live-dot 1.1s ease-in-out infinite; }
.panic.is-active { animation: panic-flash 1.1s steps(1) infinite; }
.panic:focus-visible { outline-offset: 2px; }

/* ---- call row ---------------------------------------------------------------------------------------------------------- */
.crow {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  transition: background-color var(--fast);
}
.crow:hover { background: var(--surface-2); }
.crow.is-selected { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--orange); }
.crow.is-closed { color: var(--ink-2); }
.crow.is-hold .crow__typetext { color: var(--muted); }

.crow__main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 2px 10px;
  color: inherit;
  text-decoration: none;
}
.crow__main:focus-visible { outline-offset: -2px; }
.crow__chip { position: relative; display: block; }
.crow__chip .chip { width: 100%; }
.crow.is-closed .crow__chip { opacity: .6; }
/* The live marker sits on the tag's corner, so the row's text stays put when a unit takes the call. */
.crow__chip .livedot { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; box-shadow: 0 0 0 1px var(--surface); }
.crow__body { display: block; min-width: 0; }
.crow__type { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-body); font-weight: 500; line-height: 16px; }
.crow__typetext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__sub { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; white-space: nowrap; }
.crow__label { flex: none; }
.crow__postal { color: var(--ink-2); flex: none; }
.crow__loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crow__side { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 44px; }
.crow__age { color: var(--ink-2); font-size: var(--fs-sm); line-height: 16px; }
.crow__state { max-width: 92px; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.crow__state--none { color: var(--amber-text); font-weight: 500; }
.crow--p1 .crow__state--none { color: var(--red-text); }
.crow__state--hold { color: var(--idle-text); font-weight: 500; }
.crow__trail { flex: none; padding-right: 8px; }

/* Call marks: flat tags beside the type, and an age that turns once an unanswered call is overdue. */
.cchips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
/* The type is the most important word in the row, so when it runs short the tag gives way, not the type. */
.crow__type .crow__typetext { flex: 0 0 auto; max-width: 100%; }
.crow__type .cchips { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
.crow .cchips .chip { display: block; flex: 0 1 auto; min-width: 0; height: 16px; padding: 0 4px; overflow: hidden; font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.cchips__more { color: var(--muted); font-size: var(--fs-sm); }
.chead__chips { display: flex; margin-top: 4px; }
.age.is-overdue { color: var(--amber-text); font-weight: 600; }
.crow--p1 .age.is-overdue, .chead .age.is-overdue { color: var(--red-text); }
.attached__primary { flex: none; }
.attached__make { flex: none; font-size: var(--fs-sm); }

/* The radio strip: one line, the newest, and the last 50 when opened. */
.radiostrip { flex: none; border-top: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.radiostrip__bar { display: flex; align-items: center; min-width: 0; }
.radiostrip__line { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); text-align: left; font-size: inherit; }
.radiostrip__line:hover { background: var(--surface-2); }
.radiostrip__line > .icon { flex: none; color: var(--muted); }
.radiostrip__line .radiostrip__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radiostrip__chev { margin-left: auto; }
.radiostrip__time { flex: none; color: var(--muted); }
.radiostrip__dept { flex: none; color: var(--muted); font-weight: 500; }
.radiostrip__mine { flex: none; height: 22px; margin-right: 8px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: inherit; }
.radiostrip__mine.is-on { background: var(--surface-3); border-color: var(--ink-2); color: var(--ink); font-weight: 600; }
.radiostrip__list { max-height: 200px; overflow-y: auto; border-bottom: 1px solid var(--line); }
.radiostrip__row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 2px 12px; line-height: 1.4; }
.radiostrip__row .radiostrip__text { color: var(--ink-2); overflow-wrap: anywhere; }

/* A new row may highlight briefly. A new P1 may draw the eye a little longer. */
.flash-new { animation: flash-new 1.6s ease-out; }
.flash-p1 { animation: flash-p1 1.2s ease-in-out 2; }

/* ---- the head of a call, its small map, and where it is ------------------------------------------------------------------ */
.chead { padding: 10px 12px 8px; }
.chead__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chead__num { flex: none; color: var(--ink-2); }
.chead__type { min-width: 0; font-size: var(--fs-head); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.chead__side { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: var(--fs-sm); }
.chead__age { display: inline-flex; align-items: center; gap: 4px; }

.cmap {
  position: relative;
  height: 180px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sea);
}
.cmap--compact { height: 148px; }
.cmap__link { position: absolute; inset: 0; display: block; }
.cmap__open {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.cmap__open:hover { background: var(--surface-2); }

.cwhere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 8px; font-size: var(--fs-read); }
.cwhere__text { min-width: 0; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.postal {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
  flex: none;
}
.postal:hover { color: var(--accent-text); text-decoration-color: currentColor; }

.cdesc {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: var(--fs-read);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 4px; }
.cfacts dt { color: var(--muted); font-size: var(--fs-sm); }
.cfacts dd { font-size: var(--fs-body); overflow-wrap: anywhere; }
.cfacts__depts { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.cdispo { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--green-text); font-size: var(--fs-body); }
.cdispo b { font-weight: 600; }

.cheading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
}
.cheading__count { color: var(--ink-2); font-weight: 500; }

.cactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.attached { border-top: 1px solid var(--line-soft); }
.attached--none { padding: 6px 0; border-top: 0; color: var(--muted); font-size: var(--fs-body); }
.attached__row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 0; border-bottom: 1px solid var(--line-soft); }
.attached__row.is-mine .attached__sign { font-weight: 600; }
.attached__sign { min-width: 56px; }
.attached__agency { color: var(--muted); font-size: var(--fs-sm); min-width: 40px; }
.attached__row .chip { margin-right: auto; }

.timeline__none { color: var(--muted); font-size: var(--fs-body); }
.timeline__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.timeline__time { color: var(--muted); font-size: var(--fs-sm); }
.timeline__text { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line; }
.timeline__text b { font-weight: 600; color: var(--ink); }
.timeline__row--note .timeline__text { color: var(--ink); }

.notebox .errornote { margin-top: 0; }
.notebox__row { display: flex; align-items: flex-end; gap: 4px; }
.notebox__input { flex: 1 1 auto; min-width: 0; min-height: 32px; max-height: 148px; resize: none; padding: 5px 8px; overflow-y: auto; }
.notebox__send { width: 32px; height: 32px; min-height: 32px; padding: 0; flex: none; }

.dispos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.dispos__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  transition: background-color var(--fast), border-color var(--fast);
}
.dispos__item:hover { background: var(--surface-2); }
.dispos__item.is-on { border-color: var(--ink-2); background: var(--surface-3); font-weight: 600; }

.callform__two { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.callform__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.callform__picked { display: inline-flex; align-items: center; gap: 4px; color: var(--green-text); font-size: var(--fs-sm); font-weight: 500; }
.callform__picked .linkbtn { margin-left: 4px; font-weight: 500; }
.callform__nopick { color: var(--muted); font-size: var(--fs-sm); }
.callform__map { position: relative; height: 300px; margin: -4px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); }
.callform__maphint {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: var(--r);
  background: rgba(17, 20, 24, .86);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.callform__radio { margin-right: auto; align-self: center; }

/* ---- dispatch board ---------------------------------------------------------------------------------------------------- */
.dx { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dx--phone { display: block; flex: 1 0 auto; }

.dxbar {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex: none;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--surface);
}
.dxbar__title { flex: none; font-size: 18px; font-weight: 600; line-height: 1.2; }
.dxcounts { min-width: 0; color: var(--ink-2); font-size: var(--fs-body); }
.dxcounts .is-bad { color: var(--red-text); font-weight: 600; }
.dxcounts .is-warn { color: var(--amber-text); font-weight: 600; }
.dxbar__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

.signalbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--red);
  border-radius: var(--r);
  background: none;
  color: var(--red-text);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--fast), color var(--fast);
}
.signalbtn:hover { background: var(--red-tint); }
.signalbtn.is-on { background: var(--red-solid); border-color: var(--red-solid); color: #fff; font-weight: 600; }
.signalbtn--compact { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
.signalbtn--compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.dxgrid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.dxgrid--three { grid-template-columns: clamp(300px, 24vw, 392px) minmax(0, 1fr) clamp(344px, 27vw, 420px); }

.dxpane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.dxpane:last-child { border-right: 0; }
.dxpane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
  min-height: 32px;
  padding: 3px 10px;
  border-bottom: 1px solid var(--line);
}
.dxpane__title {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dxpane__count { color: var(--muted); font-size: var(--fs-sm); }

.dxfilters { display: flex; flex-wrap: wrap; gap: 4px; flex: none; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dxcalls__list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.dxcalls__closed { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dxcalls__more { padding: 8px; text-align: center; }
.dxsearch { position: relative; flex: none; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dxsearch > .icon { position: absolute; left: 16px; top: 50%; margin-top: -7.5px; color: var(--muted); }
.dxsearch .input { padding-left: 26px; min-height: 28px; }

.dxdetail { background: var(--surface); }
.cdetail { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.cdetail__scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.cdetail__body { padding: 10px 12px 16px; }
.cdetail__map { padding: 0 12px 10px; }
.cdetail__note { flex: none; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.cdetail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cdetail--empty { display: grid; place-items: center; align-content: center; padding: 24px; }
.cdetail--empty .skelrows { width: 100%; }

.dxunits__body { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.dxunits--inline {
  margin: 12px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.dxunits--inline .dxunits__body { max-height: 330px; }
.dxunits__note { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: var(--fs-sm); }

.ugroup__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.ugroup__count { margin-left: auto; font-weight: 500; }

.urow {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 2px 4px 2px 10px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--fast);
}
.urow:hover { background: var(--surface-2); }
.urow.is-panic { background: var(--red-tint); box-shadow: inset 2px 0 0 var(--red-solid); }
.urow.is-stale .urow__who, .urow.is-stale .emblem { opacity: .6; }
.urow__who { min-width: 0; }
.urow__line { display: flex; align-items: center; gap: 4px; min-width: 0; line-height: 16px; }
.urow__sign { white-space: nowrap; }
.urow__name { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; }
.urow__name > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow__state { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; max-width: 150px; }
.urow .chip { height: 18px; padding: 0 5px; }
.urow__where { display: block; max-width: 100%; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow__where b { font-weight: 500; color: var(--ink-2); }
.urow__where a { color: inherit; text-decoration: none; }
.urow__where a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.urow .iconbtn { width: 24px; height: 24px; }
.urows--act .urow { grid-template-columns: 20px minmax(0, 1fr) auto 72px 24px; }
.urow__act { width: 100%; padding-left: 0; padding-right: 0; }

.dxunits__none {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--amber-tint);
  color: var(--amber-text);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.dxunits__none b { font-weight: 600; }
.dxunits__none .icon { margin-top: 1px; }

.urec { padding: 6px 10px 8px; border-bottom: 1px solid var(--line); }
.urec__label { color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
.urec__main { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 4px 0 8px; }
.urec__who { min-width: 0; }
.urec__sign { display: block; line-height: 16px; }
.urec__name { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; }
.urec__name > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urec__dist { color: var(--ink-2); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; }

.dxkeys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  flex: none;
  min-height: 26px;
  padding: 2px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dxkeys span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.dxphonehead { background: var(--surface); padding: 8px var(--gutter) 8px; border-bottom: 1px solid var(--line); }
.dxphonehead__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dxphonehead__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dxphonehead .dxcounts { display: block; margin-top: 2px; font-size: var(--fs-sm); }
.dxphonetabs { display: flex; align-items: stretch; gap: 8px; padding: 8px var(--gutter); }
.dxphonetabs .seg--block { flex: 1 1 0; min-width: 0; }
.dx--phone .dxpane { border: 0; border-top: 1px solid var(--line); overflow: visible; }
.dx--phone .dxcalls__list, .dx--phone .dxunits__body { overflow: visible; flex: none; }
.dx--phone .dxcalls__closed { flex: none; }
.dx--phone .dxfilters { position: sticky; top: calc(var(--mast-h) + var(--safe-t)); z-index: 2; background: var(--surface); padding: 4px var(--gutter); }
.dx--phone .ugroup__head { top: calc(var(--mast-h) + var(--safe-t)); padding: 0 var(--gutter); }
.dx--phone .dxsearch { padding: 4px var(--gutter); }
.dx--phone .dxsearch > .icon { left: calc(var(--gutter) + 8px); }
.dx--detail .cdetail { display: block; }
.dx--detail .cdetail__scroll { overflow: visible; background: var(--surface); }
.dx--detail .cdetail__note {
  position: sticky;
  bottom: calc(var(--tab-h) + var(--safe-b));
  z-index: 3;
}

/* ---- My Unit ---------------------------------------------------------------------------------------------------------------- */
.mdt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  align-items: start;
}
.mdt__main, .mdt__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* One line for the unit. */
.mdthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.mdthead__sign { font-size: var(--fs-head); white-space: nowrap; }
.mdthead__agency { color: var(--ink-2); white-space: nowrap; }
.mdthead__car { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdthead__where { color: var(--ink-2); white-space: nowrap; }
.mdthead__where.is-away { color: var(--muted); }
.mdthead.is-panic .mdthead__sign { color: var(--red-text); }

.mdtcall { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mdtcall__where { padding: 0 12px 10px; }
.mdtcall__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mdtcall__actions .btn { min-width: 0; padding: 0 8px; }
.mdtcall__body { padding: 8px 12px 12px; }
.mdtcall__units { color: var(--ink-2); font-size: var(--fs-body); }
.mdtcall__body .notebox { margin-top: 8px; }
.mdtcall__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-body); }

.mdtidle { padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mdtidle__title { font-size: var(--fs-head); font-weight: 600; line-height: 1.25; }
.mdtidle__body { margin: 2px 0 8px; max-width: 60ch; color: var(--muted); font-size: var(--fs-body); }

.mdtblock { min-width: 0; }
.mdtblock__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
}
.mdtblock__count { color: var(--ink-2); font-weight: 500; }
.mdtblock__hint { margin-left: auto; font-weight: 500; color: var(--red-text); }

.statusgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.statusbtn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.statusbtn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--faint); }
.statusbtn:disabled { opacity: .5; }
.statusbtn__code { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.statusbtn__label { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.3; overflow-wrap: anywhere; }
.statusbtn.is-on { border-color: var(--tone-solid); background: var(--tone-solid); color: #fff; }
.statusbtn.is-on .statusbtn__label { color: #fff; }

.runbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; position: relative; }
.runbox > .icon { position: absolute; left: 8px; top: 50%; margin-top: -8px; color: var(--muted); pointer-events: none; z-index: 1; }
.runbox .input { padding-left: 30px; }
.mdtquick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mdtquick .btn { flex: 1 1 auto; }

.mdtcalls { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mdtcalls .crow:last-child { border-bottom: 0; }
.mdtcalls__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
}
.mdtcalls__more:hover { background: var(--surface-2); }

/* ---- map ------------------------------------------------------------------------------------------------------------------------- */
.gmap {
  --k: .2;
  --tx: 0;
  --ty: 0;
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;       /* hidden can still be scrolled by focus moving to a marker, and that would tear the markers off the map */
  background: var(--sea);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.gmap:active { cursor: grabbing; }
.gmap:focus-visible { outline-offset: -3px; }
.gmap--crop { cursor: default; touch-action: auto; pointer-events: none; }
.gmap--pick, .gmap--pick:active { cursor: crosshair; }
.gmap__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 2048px;
  height: 2048px;
  max-width: none;
  transform-origin: 0 0;
  transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) scale(calc(var(--k) * 2.6147461));
  pointer-events: none;
}
.gmap__img--hi {
  width: 4096px;
  height: 4096px;
  transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) scale(calc(var(--k) * 1.3073730));
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.gmap__img--hi[data-ready] { opacity: 1; }
.gmap.is-moving .gmap__img { will-change: transform; }

.gmap__markers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gm {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  pointer-events: auto;
  transform: translate3d(calc((var(--mx) * var(--k) + var(--tx)) * 1px), calc((var(--mz) * var(--k) + var(--ty)) * 1px), 0);
  transition: transform 4.6s linear;
}
button.gm { cursor: pointer; }
.gmap.is-moving .gm { transition: none; }
.gm__shape { position: absolute; left: 0; top: 0; display: block; }
.gm__shape::before { content: ""; position: absolute; inset: -9px; }   /* a bigger target for a finger */
.gm__tag {
  position: absolute;
  left: 10px;
  top: -9px;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(17, 20, 24, .86);
  color: #fff;
  font: 500 11px/1 var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}
/* Mono is for callsigns and call numbers. "You", a postal and a player's name read in the body face. */
.gm[data-tone="me"] .gm__tag, .gm--pin .gm__tag, .gm--player .gm__tag { font-family: var(--font-body); }
.gm.is-quiet .gm__tag { display: none; }
.gm:hover .gm__tag, .gm:focus-visible .gm__tag { display: flex; }
.gm:focus-visible { outline: none; }
.gm:focus-visible .gm__shape { outline: 2px solid #fff; outline-offset: 2px; }
.gm:hover, .gm:focus-visible { z-index: 9; }

.gm--unit { z-index: 3; }
.gm--unit .gm__shape {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--mk, #7A818C);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.gm[data-tone="LEO"] { --mk: var(--map-leo); }
.gm[data-tone="FD"] { --mk: var(--map-fd); }
.gm[data-tone="DOT"] { --mk: var(--map-dot); }
.gm[data-tone="DISPATCH"] { --mk: var(--map-dispatch); }
.gm[data-tone="me"] { --mk: var(--orange); }
.gm.is-dim .gm__shape { opacity: .62; }
.gm.is-mine { z-index: 5; --mk: var(--orange); }
.gm.is-mine .gm__shape { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.gm.is-mine .gm__tag { background: #C94E00; color: #fff; left: 12px; }

.gm--call { z-index: 2; }
.gm--call .gm__shape {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 2px;
  background: var(--mk, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
  transform: rotate(45deg);
}
.gm--call .gm__tag { left: 13px; }
.gm[data-tone="p1"] { --mk: var(--map-p1); }
.gm[data-tone="p2"] { --mk: var(--map-p2); }
.gm[data-tone="p3"] { --mk: var(--map-p3); }
/* A unit's ring says its status, the fill its department. En route is a broken ring, on scene a solid one. */
.gm--unit[data-ring="good"] .gm__shape { border-color: #34C76F; }
.gm--unit[data-ring="info"] .gm__shape { border-color: #6FB1FF; }
.gm--unit[data-ring="route"] .gm__shape { border-color: #6FB1FF; border-style: dashed; }
.gm--unit[data-ring="warn"] .gm__shape { border-color: #F5B13D; }
.gm--unit[data-ring="bad"] .gm__shape { border-color: #FF5A5F; }
.gm--unit[data-ring="idle"] .gm__shape { border-color: #A6ADB8; }
.gm[data-tone="suspect"] { z-index: 6; --mk: var(--map-p1); }
.gm[data-tone="suspect"] .gm__tag { background: #B91C1C; color: #fff; font-family: var(--font-body); }
.gm.is-approx .gm__shape { border-style: dashed; }

.gm.is-pulse { z-index: 4; }
.gm.is-pulse .gm__shape::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--mk, #fff);
  border-radius: inherit;
  animation: gm-pulse 1.5s ease-out infinite;
  pointer-events: none;
}
.gm.is-selected { z-index: 8; }
.gm.is-selected .gm__shape { outline: 2px solid #fff; outline-offset: 2px; }
.gm.is-selected .gm__tag { background: #16191D; box-shadow: 0 0 0 1px #fff; }

.gm--player { z-index: 1; }
.gm--player .gm__shape {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid rgba(17, 20, 24, .7);
  border-radius: 50%;
  background: #E7E9EC;
}
.gm--player .gm__tag { display: none; left: 8px; }

.gm--pin { z-index: 7; }
.gm--pin .gm__shape {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #16191D;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.gm--pin .gm__tag { left: 12px; background: #16191D; }

.gmap__ui { pointer-events: auto; cursor: auto; z-index: 3; }
.gmap .mapcard__wrap { z-index: 5; }
.gmap__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.gmap__zoom button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  transition: background-color var(--fast);
}
.gmap__zoom button:last-child { border-bottom: 0; }
.gmap__zoom button:hover { background: var(--surface-2); }
.gmap__zoom button:focus-visible { outline-offset: -2px; }

/* The page: a small toolbar across the top, the lists in a pane on the left, the map in the rest. Nothing floats over the map but its own controls. */
.mapview {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.mapview--plain { grid-template-columns: minmax(0, 1fr); }
.mapbar {
  grid-column: 1 / -1;
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 44px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mapbar__title { font-size: 18px; font-weight: 600; line-height: 1.2; }
.mapbar__end { margin-left: auto; }
.mapbar__note { color: var(--muted); font-size: var(--fs-sm); }
.mapbar .mapcta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: auto; color: var(--muted); font-size: var(--fs-body); }

.mappane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }

.mappanel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.mappanel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mappanel__note { flex: none; padding: 4px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.mappanel__note--inline { border-top: 1px solid var(--line); margin-top: 8px; }
.mappanel__tools { padding: 8px var(--gutter) 0; }
.mappanel__grab { display: none; }

.mapjump { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mapjump__label { color: var(--ink-2); font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.mapjump__row { display: grid; grid-template-columns: 96px auto; gap: 4px; }
.mapjump__row .btn { width: 30px; padding: 0; }
.mapjump__error { flex-basis: 100%; color: var(--red-text); font-size: var(--fs-sm); }

.maplayers { display: flex; flex-wrap: wrap; gap: 4px; }
.maplayer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.maplayer:hover { background: var(--surface-2); }
.maplayer.is-on { border-color: var(--ink-2); background: var(--surface-3); color: var(--ink); font-weight: 600; }
.maplayer__count { font-weight: 500; }

.maplegend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--muted); font-size: var(--fs-sm); }
.maplegend li { display: inline-flex; align-items: center; gap: 4px; }
.maplegend .mapitem__dot { width: 10px; height: 10px; margin: 0; border: 0; box-shadow: none; }
.maplegend__call { width: 9px; height: 9px; margin: 0 1px; border-radius: 1px; background: var(--map-p1); transform: rotate(45deg); }

.mapsection__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.mapsection__none { padding: 8px 10px; color: var(--muted); font-size: var(--fs-body); }
.mapitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--fast);
}
.mapitem:hover:not(:disabled) { background: var(--surface-2); }
.mapitem:focus-visible { outline-offset: -2px; }
.mapitem.is-selected { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--orange); }
.mapitem.is-nopos { opacity: .55; }
.mapitem__text { flex: 1 1 auto; min-width: 0; display: block; }
.mapitem__title { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapitem__sub { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapitem__age { color: var(--muted); font-size: var(--fs-sm); flex: none; }
.mapitem .chip { height: 18px; padding: 0 5px; }
.mapitem__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.mapitem__dot[data-tone="LEO"] { background: var(--map-leo); }
.mapitem__dot[data-tone="FD"] { background: var(--map-fd); }
.mapitem__dot[data-tone="DOT"] { background: var(--map-dot); }
.mapitem__dot[data-tone="DISPATCH"] { background: var(--map-dispatch); }

.mapcard__wrap { position: absolute; right: 12px; top: 12px; width: 300px; max-width: calc(100% - 24px); }
.mapcard {
  padding: 8px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.mapcard.is-panic { border-color: var(--red-solid); }
.mapcard__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mapcard__head .iconbtn { margin: -4px -6px -4px auto; }
.mapcard__who { min-width: 0; flex: 1 1 auto; }
.mapcard__sign { display: block; font-size: var(--fs-read); line-height: 1.25; overflow-wrap: anywhere; }
.mapcard__name { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.mapcard__label { color: var(--ink-2); }
.mapcard__title { margin-bottom: 4px; font-size: var(--fs-head); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mapcard__chips { margin-bottom: 4px; }
.mapcard__line { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.3; }
.mapcard__line .icon { margin-top: 1px; color: var(--muted); }
.mapcard__line--bad { color: var(--red-text); font-weight: 500; }
.mapcard__line--bad .icon { color: inherit; }
.mapcard__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.mapfollow {
  position: absolute;
  right: 52px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background-color var(--fast), color var(--fast);
}
.mapfollow:hover { background: var(--surface-2); }
.mapfollow.is-on { border-color: var(--ink-2); background: var(--surface-3); font-weight: 600; }

/* ---- command bar ------------------------------------------------------------------------------------------------------------------- */
.cmd {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: max(10vh, 40px) 16px 16px;
  background: var(--scrim);
  animation: fade-in var(--fast) ease-out backwards;
}
.cmd__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(70vh, 620px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.cmd__field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.cmd__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--fs-head);
}
.cmd__input:focus, .cmd__input:focus-visible { outline: none; }
.cmd__input::placeholder { color: var(--faint); }
.cmd__esc { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); }
.cmd__esc .icon { display: none; }
.cmd__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 6px; }
.cmd__group { padding: 8px 8px 2px; color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
.cmd__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 2px 8px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ink);
  text-align: left;
}
.cmd__row.is-active { background: var(--surface-3); }
.cmd__row.is-danger .cmd__icon { color: var(--red-text); }
.cmd__icon { display: grid; place-items: center; width: 24px; color: var(--muted); flex: none; }
.cmd__row.is-active .cmd__icon { color: var(--ink); }
.cmd__text { flex: 1 1 auto; min-width: 0; }
.cmd__title { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd__mono { margin-left: 3px; color: var(--muted); }
.cmd__sub { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd__none { padding: 16px 12px; color: var(--muted); text-align: center; font-size: var(--fs-body); }
.cmd__searching { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.cmd__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  flex: none;
  padding: 4px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.cmd__foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cmd__foot-hide { margin-left: auto; }

.shortcuts li { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-body); }
.shortcuts li:last-child { border-bottom: 0; }
.shortcuts .kbd { min-width: 72px; }

/* ---- sign-in ------------------------------------------------------------------------------------------------------------------------ */
.signin {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--ground);
}
.signin__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
}
.signin__logo { width: 48px; height: 48px; border-radius: var(--r); }
.signin__title { margin-top: 12px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.signin__head { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.signin__line { margin-top: 12px; color: var(--muted); font-size: var(--fs-body); }
.signin__note { margin-top: 12px; color: var(--muted); font-size: var(--fs-body); }
.signin__reason { margin-top: 8px; color: var(--red-text); font-size: var(--fs-body); font-weight: 500; }
.signin__row { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 16px; }
.signin__row .btn, .signin__panel > .btn { width: 100%; }
.signin__panel > .btn { margin-top: 16px; }
.signin__small { margin-top: 12px; color: var(--muted); font-size: var(--fs-sm); }

.personas { width: 100%; max-width: 380px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.personas__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px 0; }
.personas__head h2 { color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
.personas__tag { color: var(--muted); font-size: var(--fs-sm); }
.personas__sub { padding: 0 12px 8px; color: var(--muted); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.persona {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 5px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--fast);
}
.persona:last-of-type { border-bottom: 0; }
.persona:hover:not(:disabled) { background: var(--surface-2); }
.persona:focus-visible { outline-offset: -2px; }
.persona:disabled { opacity: .6; }
.persona[aria-busy="true"] { background: var(--surface-3); opacity: 1; }
.persona__label { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.3; }
.persona__blurb { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.personas .errornote { margin: 8px 12px; }

/* ---- go on duty --------------------------------------------------------------------------------------------------------------------- */
.dutyroles { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); }
.dutyrole {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--fast);
}
.dutyrole:last-child { border-bottom: 0; }
.dutyrole:hover:not(:disabled) { background: var(--surface-2); }
.dutyrole:focus-visible { outline-offset: -2px; }
.dutyrole.is-closed { color: var(--muted); }
.dutyrole.is-ingame { box-shadow: inset 2px 0 0 var(--orange); background: var(--surface-2); }
.dutyrole.is-ingame .dutyrole__blurb { color: var(--ink); font-weight: 500; white-space: normal; }
.dutyrole.is-closed .emblem { opacity: .5; }
.dutyrole__emblems { display: flex; gap: 2px; flex: none; width: 64px; }
.dutyrole__label { flex: none; width: 96px; font-size: var(--fs-body); font-weight: 500; }
.dutyrole__blurb { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.dutyrole.is-closed .dutyrole__blurb { white-space: normal; }

.dutyform { display: flex; flex-direction: column; }
.dutyform__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  min-height: 24px;
  margin: -2px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.dutyform__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.dutyagencies { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); }
.dutyagency {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--fast);
}
.dutyagency:last-child { border-bottom: 0; }
.dutyagency:hover { background: var(--surface-2); }
.dutyagency input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dutyagency:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.dutyagency.is-on { background: var(--surface-3); }
.dutyagency__text { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.dutyagency__name { font-size: var(--fs-body); font-weight: 500; line-height: 1.3; }
.dutyagency__tag { color: var(--muted); font-size: var(--fs-sm); }
.dutyagency__tick { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--ink); opacity: 0; }
.dutyagency.is-on .dutyagency__tick { opacity: 1; }
.dutyform__sign { min-height: 36px; font-size: var(--fs-read); text-transform: uppercase; }
.dutyform__sign::placeholder { text-transform: none; font-weight: 400; }
.dutyform__note { margin-top: 8px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* ---- narrower desktops: the top bar gives things up in order of how much a person misses them. The status words stay to the end. ---- */
@media (max-width: 1499px) {
  .live__session, .live__queue { display: none; }
}
@media (max-width: 1379px) {
  .live__aop { display: none; }
  .unitctl__chip .chip__words { max-width: 104px; }
}
@media (max-width: 1239px) {
  .mast__search-text, .mast__search .kbd { display: none; }
  .mast__search { width: 30px; padding: 0; justify-content: center; }
  .mast__nav { margin-left: 4px; }
  .unitctl__chip .chip__words { max-width: 76px; }
  .mast__preview { display: none; }
}
@media (max-width: 1119px) {
  .live { display: none; }
  .mast__link { padding-left: 8px; padding-right: 8px; }
  .unitctl__emblem { display: none; }
}
@media (min-width: 900px) and (max-width: 1119px) {
  .mast__city { display: none; }
}
/* Three panes on a laptop: the units pane is narrow, so a unit's state drops under its name. */
@media (min-width: 1200px) and (max-width: 1499px) {
  .dxunits:not(.dxunits--inline) .urow, .dxunits:not(.dxunits--inline) .urows--act .urow {
    grid-template-columns: 20px minmax(0, 1fr) 68px 24px;
    grid-template-areas: "emblem who act menu" "emblem state act menu";
    gap: 1px 8px;
    padding: 3px 4px 3px 10px;
  }
  .dxunits:not(.dxunits--inline) .urow > .emblem { grid-area: emblem; align-self: start; margin-top: 1px; }
  .dxunits:not(.dxunits--inline) .urow__who { grid-area: who; display: flex; align-items: baseline; gap: 6px; }
  .dxunits:not(.dxunits--inline) .urow__line { flex: none; }
  .dxunits:not(.dxunits--inline) .urow__name { min-width: 0; }
  .dxunits:not(.dxunits--inline) .urow__state { grid-area: state; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; max-width: none; }
  .dxunits:not(.dxunits--inline) .urow > .urow__act { grid-area: act; }
  .dxunits:not(.dxunits--inline) .urow > .menu { grid-area: menu; }
  .dxunits:not(.dxunits--inline) .urows:not(.urows--act) .urow { grid-template-columns: 20px minmax(0, 1fr) 24px; grid-template-areas: "emblem who menu" "emblem state menu"; }
}
@media (max-width: 1099px) {
  .mdt { grid-template-columns: minmax(0, 1fr) 300px; }
  .cfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 760px) and (min-width: 900px) {
  .dxkeys { display: none; }
  .cmap { height: 148px; }
}

/* ---- phone: one column, panels edge to edge, rows and buttons at least 44 px, body text at 15 px -------------------------------------- */
@media (max-width: 899px) {
  :root {
    --mast-h: 52px;
    --fs-body: 15px;
    --fs-read: 15px;
    --fs-sm: 13px;
    --fs-tag: 12px;
    --fs-head: 16px;
    --fs-title: 18px;
  }

  .mast__bar { gap: 4px; padding: 0 8px 0 var(--gutter); }
  .mast__brand { flex: 1 1 0; gap: 6px; }
  .mast__mark { width: 20px; height: 15px; }
  .mast__names { display: block; }
  .mast__word { display: block; font-size: 13px; }
  .mast__preview { display: block; font-size: 10px; }
  .mast__grow { display: none; }
  .mast__search { width: 44px; height: 44px; padding: 0; border: 0; justify-content: center; background: none; }
  .unitctl__btn { height: 44px; padding: 0 6px 0 8px; }
  .panic { height: 44px; padding: 0 10px; font-size: 13px; }
  .avatarmenu__btn { width: 44px; height: 44px; }

  .page { padding: 12px var(--gutter) 24px; }
  .pagehead { margin-bottom: 12px; }
  .pagehead__actions .btn--ghost { padding-left: 0; }

  /* Panels sit edge to edge on phones. A screen's own lists join this with the same three lines. */
  .panel { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-left: 0; border-right: 0; border-radius: 0; }
  .panel__head, .panel__body { padding-left: var(--gutter); padding-right: var(--gutter); }
  .panel--flush .panel__body { padding-left: 0; padding-right: 0; }

  .input { min-height: 44px; padding: 8px 10px; font-size: 16px; }
  .input--area { min-height: 76px; }
  .btn, .btn--sm, .btn--lg { min-height: 44px; }
  .btn--sm { padding: 0 10px; }
  .btn--xl { min-height: 48px; }
  .seg__item, .seg--sm .seg__item { min-height: 44px; }
  .iconbtn { width: 44px; height: 44px; }
  .chiptoggle__item { min-height: 44px; }
  .tabs__item { height: 44px; }
  .linkbtn { min-height: 24px; }
  .pagehead__back, .postal, .recblock__more, .liveline, .platechip, .wrow__person, .linkbtn, .rbxid, .pname, .cmap__open, .dutyform__back, .radiostrip__mine { position: relative; }
  .pagehead__back::after, .recblock__more::after, .liveline::after, .platechip::after, .linkbtn::after, .rbxid::after, .dutyform__back::after, .cmap__open::after, .radiostrip__mine::after { content: ""; position: absolute; inset: -11px -4px; }
  .postal::after, .wrow__person::after { content: ""; position: absolute; inset: -9px -2px; }
  .pname:not(.pname--plain)::after { content: ""; position: absolute; inset: -6px -2px; }
  .cmap__open::after, .radiostrip__mine::after { inset: -6px -2px; }
  .seg--sm .seg__item:has(> .icon:only-child), .seg--sm .seg__item:has(> .sr-only) { min-width: 40px; justify-content: center; }
  .selectwrap__chev { right: 10px; }

  .banner { min-height: 44px; padding: 4px var(--gutter); font-size: var(--fs-sm); }
  .banner__text { flex: 1 1 0; }
  .banner--signal:not(.banner--list) .banner__text, .banner--panic:not(.banner--list) .banner__text { flex: 1 0 100%; order: 3; }
  .banner--signal:not(.banner--list) .banner__age, .banner--panic:not(.banner--list) .banner__age { margin-left: auto; }
  .banner--signal:not(.banner--list) .banner__actions, .banner--panic:not(.banner--list) .banner__actions { order: 4; }
  .banner__actions { margin-left: 0; width: 100%; }
  .banner__actions .btn { flex: 1 1 auto; }
  .banner--hint { padding-right: 4px; }
  .banner--hint .linkbtn { padding: 12px 2px; }
  .banner--hint .banner__text { flex: none; }

  /* Under the top bar, not above the tab bar: the buttons people are about to press live at the bottom of a phone screen. */
  .alerts { top: calc(var(--mast-h) + var(--safe-t) + 4px); bottom: auto; left: 8px; right: 8px; width: auto; max-width: none; }
  .alertcard:nth-child(n + 2) { display: none; }   /* one at a time: the newest */
  .alertcard { padding: 4px 12px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; }
  .alertcard__top { grid-column: 1 / -1; min-height: 32px; }
  .alertcard__type { grid-column: 1; margin: 0; font-size: var(--fs-body); }
  .alertcard__where { grid-column: 1; font-size: var(--fs-sm); }
  .alertcard__actions { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .alertcard__actions .btn { flex: none; min-height: 40px; padding: 0 10px; white-space: nowrap; }
  .alertcard__close { width: 44px; height: 44px; margin: -6px -10px -6px auto; }
  .toasts { right: 8px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); width: calc(100vw - 16px); }
  .toast:nth-last-child(n + 2) { display: none; }
  .toast__close { width: 32px; height: 32px; margin: -4px 0 -4px 0; }
  .has-modal .toasts { top: calc(var(--safe-t) + 8px); bottom: auto; left: 8px; right: 52px; width: auto; }   /* a sheet's buttons live at the bottom */

  .menu__veil { display: block; position: fixed; inset: 0; z-index: 69; background: var(--scrim); animation: fade-in var(--fast) ease-out backwards; }
  .menu__pop {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: 78vh;
    padding: 4px 0 calc(8px + var(--safe-b));
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    box-shadow: var(--shadow-3);
  }
  .menu__item { min-height: 48px; padding: 4px var(--gutter); gap: 12px; border-radius: 0; }
  .menu__heading { padding: 8px var(--gutter) 4px; }
  .menu__divider { margin: 4px 0; }

  .modal { align-items: flex-end; padding: 16px 0 0; }
  .modal__box, .modal__box--sm, .modal__box--md, .modal__box--lg {
    max-width: none;
    max-height: calc(100dvh - 24px);
    border-width: 1px 0 0;
    border-radius: 0;
  }
  .modal__head { padding: 12px var(--gutter) 8px; }
  .modal__close { margin: -10px -12px 0 0; }
  .modal__body { padding: 4px var(--gutter) calc(16px + var(--safe-b)); }
  .modal__foot { padding: 8px var(--gutter) calc(8px + var(--safe-b)); }
  .modal__body:has(+ .modal__foot) { padding-bottom: 12px; }
  .modal__foot .btn { flex: 1 1 auto; }
  .modal__foot .callform__radio { flex: 1 1 100%; margin: 0 0 2px; }

  .notice { flex-wrap: wrap; }
  .notice__text { flex: 1 1 calc(100% - 32px); }
  .notice__actions { flex: 1 1 100%; }
  .notice__actions .btn { flex: 1 1 auto; }

  .check__box { width: 20px; height: 20px; }
  .check { min-height: 28px; }
  .toggle { min-height: 44px; }

  .combo__item { min-height: 44px; }
  .menu__label .chip { vertical-align: middle; }

  .cmd { padding: 0; align-items: stretch; background: var(--surface); }
  .cmd__box { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .cmd__field { padding: var(--safe-t) 0 0 var(--gutter); }
  .cmd__input { font-size: 16px; height: 52px; }
  .cmd__esc { width: 44px; height: 44px; }
  .cmd__esc .kbd { display: none; }
  .cmd__esc .icon { display: block; }
  .cmd__list { padding: 2px 0 8px; }
  .cmd__group { padding: 8px var(--gutter) 2px; }
  .cmd__row { min-height: 48px; padding: 2px var(--gutter); border-radius: 0; }
  .cmd__foot { display: none; }

  .table td { height: 44px; }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__row { grid-template-columns: 112px minmax(0, 1fr); padding: 8px 0; }

  .dispos__item { min-height: 44px; padding: 0 10px; }
  .dispos__item .kbd { display: none; }
  .callform__two { grid-template-columns: minmax(0, 1fr) 110px; }
  .callform__map { height: 260px; }
  .callform__nopick { flex-basis: 100%; }

  .chead { padding: 10px var(--gutter) 8px; }
  .cactions { padding: 8px var(--gutter); gap: 8px; }
  .cactions .btn { flex: 1 1 auto; }
  .cdetail__body { padding: 10px var(--gutter) 16px; }
  .cdetail__map { padding: 0 var(--gutter) 10px; }
  .cdetail__note { padding: 8px var(--gutter); }
  .cdetail__back { min-height: 44px; padding: 0 var(--gutter); }
  .cfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmap { height: 160px; }
  .cmap--compact { height: 148px; }
  .cmap__open { height: 32px; padding: 0 8px; }
  .attached__row { min-height: 44px; }
  .notebox__send { width: 44px; height: 44px; }
  .notebox__input { min-height: 44px; padding: 10px; }
  .timeline__row { grid-template-columns: 66px minmax(0, 1fr); padding: 3px 0; }

  .crow__main { min-height: 56px; padding: 6px var(--gutter); gap: 10px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .crow:has(.crow__trail) .crow__main { padding-right: 8px; }
  .crow:has(.crow__trail) .crow__sub { flex-wrap: wrap; column-gap: 6px; }
  .crow:has(.crow__trail) .crow__loc { flex: 0 1 auto; max-width: 100%; }
  .crow__type { line-height: 20px; }
  .crow__sub { line-height: 18px; }
  .crow__age, .crow__state { line-height: 18px; }
  .crow__trail { padding-right: var(--gutter); }
  .chip { height: 22px; }
  .urow .chip { height: 22px; }
  .urow, .urows--act .urow {
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
    grid-template-areas: "emblem who action menu" "emblem state state state";
    gap: 2px 8px;
    min-height: 56px;
    padding: 6px 4px 6px var(--gutter);
  }
  .urow__act { width: auto; padding: 0 10px; }
  .urow > .emblem { grid-area: emblem; align-self: start; margin-top: 2px; }
  .urow__who { grid-area: who; }
  .urow__state { grid-area: state; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; max-width: none; }
  .urow > .btn { grid-area: action; }
  .urow > .menu { grid-area: menu; }
  .urow .iconbtn { width: 44px; height: 44px; }
  .urow__line, .urow__name { line-height: 20px; }
  .urow__where { line-height: 20px; }
  .urec { padding: 8px var(--gutter) 10px; }
  .dxunits--inline { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-left: 0; border-right: 0; border-radius: 0; }
  .dxpane__head { padding: 4px var(--gutter); min-height: 36px; }
  .radiostrip__line { min-height: 44px; padding: 0 var(--gutter); }
  .radiostrip__mine { height: 36px; margin-right: var(--gutter); }
  .radiostrip__row { padding: 4px var(--gutter); }
  .attached__make { min-height: 44px; }
  .attached__row { flex-wrap: wrap; }
  .crow .cchips .chip { height: 18px; }
  .dxunits__note, .dxunits__none { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ugroup__head { min-height: 28px; }
  .dxkeys { display: none; }

  /* My Unit: one column. display: contents lets the two desktop columns interleave in the order a phone needs. */
  .mdt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 0 16px;
  }
  .mdt__main, .mdt__side { display: contents; }
  .mdthead { order: 1; padding: 8px var(--gutter); border-width: 0 0 1px; border-radius: 0; gap: 2px 8px; }
  .mdtcall, .mdtidle { order: 2; }
  .mdtblock--status { order: 3; }
  .mdtblock--calls { order: 4; }
  .mdtblock--tools { order: 5; }
  .mdthead__car { display: none; }
  .mdtcall, .mdtcalls { border-width: 1px 0; border-radius: 0; }
  .mdtcall { border-top-width: 0; }
  .mdthead + .mdtcall { margin-top: -12px; }
  .mdtidle { border-width: 0 0 1px; border-radius: 0; padding: 10px var(--gutter) 12px; margin-top: -12px; }
  .mdtidle .btn { width: 100%; }
  .mdtcall__where { padding: 0 var(--gutter) 10px; }
  .mdtcall__actions { padding: 8px var(--gutter); }
  .mdtcall__body { padding: 8px var(--gutter) 12px; }
  .mdtcall__more { min-height: 44px; }
  .mdtblock__head { padding: 0 var(--gutter); }
  .statusgrid, .mdtblock--tools > .runbox, .mdtquick { margin-left: var(--gutter); margin-right: var(--gutter); }
  .statusgrid { gap: 8px; }
  .statusbtn { min-height: 44px; padding: 10px; }
  .runbox { gap: 8px; }
  .runbox .input { padding-left: 34px; }
  .runbox > .icon { left: 10px; }
  .mdtquick { gap: 8px; }

  .gmap__zoom { right: 8px; bottom: 56px; }
  .gmap__zoom button { width: 44px; height: 44px; }
  .mapview { position: relative; display: block; }
  .mappane { position: absolute; inset: 0; }
  .mappanel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    max-height: 70%;
    border-right: 0;
    border-top: 1px solid var(--line-strong);
  }
  .mappanel__grab {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    flex: none;
    width: 100%;
    height: 48px;
    padding: 0 var(--gutter);
    border: 0;
    background: none;
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 500;
  }
  .mappanel__grab i { display: none; }
  .mappanel__grab span { grid-column: 2; }
  .mappanel__grab .icon { grid-column: 3; justify-self: end; color: var(--muted); }
  .mappanel__body { display: none; border-top: 1px solid var(--line); }
  .mappanel.is-open .mappanel__body { display: block; }
  .mapjump { margin-bottom: 8px; }
  .mapjump__label { flex-basis: 100%; }
  .mapjump__row { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .mapjump__row .btn { width: 44px; }
  .maplayers { margin-bottom: 8px; }
  .maplayer { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .maplegend { margin-bottom: 8px; }
  .mappanel__tools { padding: 8px var(--gutter) 0; }
  .mapsection__head { padding: 0 var(--gutter); min-height: 28px; }
  .mapsection__none { padding: 8px var(--gutter); }
  .mapitem { min-height: 52px; padding: 4px var(--gutter); }
  .mapitem__title { line-height: 20px; }
  .mapitem__sub { line-height: 18px; }
  .mappanel__note--inline { padding: 8px var(--gutter); margin: 0; }
  .mapcard__wrap { left: 8px; right: 8px; top: auto; bottom: 56px; width: auto; max-width: none; }
  .mapfollow { right: auto; left: 8px; bottom: 56px; height: 44px; }
  .mapcard__head .iconbtn { margin: -6px -8px -6px auto; }

  .signin { padding: 24px 0; }
  .signin__panel, .personas { max-width: none; border-left: 0; border-right: 0; border-radius: 0; }
  .signin__panel { padding: 24px var(--gutter); }
  .personas__head, .personas__sub { padding-left: var(--gutter); padding-right: var(--gutter); }
  .persona { min-height: 56px; padding: 6px var(--gutter); }

  .dutyroles, .dutyagencies { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-left: 0; border-right: 0; border-radius: 0; }
  .dutyrole, .dutyagency { min-height: 52px; padding: 4px var(--gutter); }
  .dutyrole__emblems { width: 20px; }
  .dutyrole__emblems .emblem:nth-child(n + 2) { display: none; }
  .dutyrole__label { width: auto; min-width: 92px; }
  .dutyform__back { min-height: 44px; margin: -8px 0 4px; }
  .dutyform__sign { min-height: 44px; font-size: 16px; }

  .shortcuts .kbd { min-width: 68px; }
  .hide-phone { display: none !important; }
}

@media (max-width: 379px) {
  .mast__city { display: none; }
}

@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .mast__bar { padding: 0 4px 0 var(--gutter); }
  .mast__search { width: 40px; }
  .unitctl__btn { padding: 0 4px 0 6px; gap: 4px; }
  .panic { min-width: 50px; padding: 0 8px; }
  .crow__side { min-width: 40px; }
  .crow__main { gap: 8px; padding-right: 8px; }
  .crow__trail { padding-right: 8px; }
  .mdtcalls .crow__trail .btn { padding: 0 6px; font-size: var(--fs-tag); }
  .seg--sm .seg__item { padding: 0 5px; font-size: var(--fs-tag); }
  .banner--hint .banner__text { display: none; }
  .tabbar__item { font-size: 10.5px; }
}

/* A finger leaves :hover stuck on whatever it last touched, so on touch screens the resting look stays and the press does the talking. */
@media (hover: none) {
  .btn--primary:hover:not(:disabled) { background: var(--orange-deep); }
  .btn--secondary:hover:not(:disabled), .btn--soft:hover:not(:disabled) { background: var(--surface); border-color: var(--line-strong); }
  .btn--ghost:hover:not(:disabled) { background: none; color: var(--ink-2); }
  .iconbtn:hover { background: none; color: var(--muted); }
  .statusbtn:not(.is-on):hover:not(:disabled) { background: var(--surface); border-color: var(--line-strong); }
  .chiptoggle__item:not(.is-on):hover, .dispos__item:not(.is-on):hover, .maplayer:not(.is-on):hover { background: var(--surface); }
  .seg__item:not(.is-on):hover { background: none; color: var(--muted); }
  .dutyrole:hover:not(:disabled), .persona:hover:not(:disabled) { background: var(--surface); }
  .dutyagency:not(.is-on):hover { background: var(--surface); }
  .crow:not(.is-selected):hover, .urow:not(.is-panic):hover { background: var(--surface); }
  .crow.is-selected:hover { background: var(--surface-3); }
  .table tbody tr:hover td { background: none; }
  .mast__link:not(.is-on):hover, .mast__search:hover { background: none; }
  .gmap__zoom button:hover { background: none; }
  .mapitem:hover:not(:disabled):not(.is-selected) { background: none; }

  .btn--primary:active:not(:disabled) { background: var(--orange-press); }
  .btn--secondary:active:not(:disabled), .btn--soft:active:not(:disabled), .btn--ghost:active:not(:disabled) { background: var(--surface-3); }
  .statusbtn:active:not(:disabled) { background: var(--surface-3); }
  .statusbtn.is-on:active:not(:disabled) { background: var(--tone-solid); }
  .crow:active, .urow:active, .mapitem:active:not(:disabled) { background: var(--surface-3); }
  .gmap__zoom button:active { background: var(--surface-3); }
  .dutyrole:active:not(:disabled), .persona:active:not(:disabled) { background: var(--surface-3); }
}

/* ---- motion: a quick state change and nothing more. Panic and P1 may still draw the eye. ------------------------------------------------ */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes busy-dot { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes flash-new { 0%, 40% { background-color: var(--surface-3); } 100% { background-color: var(--surface); } }
@keyframes flash-p1 { 0%, 100% { background-color: var(--surface); } 50% { background-color: var(--red-tint); } }
@keyframes panic-flash { 0%, 100% { background-color: var(--red-solid); } 50% { background-color: var(--red-deep); } }
@keyframes gm-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Progress that carries meaning stays. */
  .panic.is-holding .panic__bar { transition-duration: 1s !important; }
  .gm { transition: none !important; }
  .flash-new { background-color: var(--surface-3); }
  .flash-p1 { background-color: var(--red-tint); }
  .livedot { animation: none !important; }
  .panic__pulse { animation: none !important; }
  .panic.is-active { animation: none !important; }
  .gm.is-pulse .gm__shape::after { opacity: .5; transform: scale(1.6); animation: none !important; }
}