/*
 * Alcove components. Uses ONLY tokens from tokens.css (no hard-coded colors).
 * Spec: docs/GUI.md + docs/BRAND.md. Live examples: /styleguide.html
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--surface); color: var(--text);
  font: 400 var(--size-14)/1.5 var(--font-sans);
}
h1, h2, h3, .view-title { font-family: var(--font-serif); font-weight: 500; line-height: 1.25; margin: 0 0 var(--space-3); }
h1, .view-title { font-size: var(--size-24); }
h2 { font-size: var(--size-20); }
h3 { font-size: var(--size-16); }
p { margin: 0 0 var(--space-3); }
a { color: var(--brand); text-underline-offset: 2px; }
code, .mono, time, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.small { font-size: var(--size-12); }
.serif { font-family: var(--font-serif); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.icon-lg { width: 22px; height: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-4);
  font: 500 var(--size-14)/1 var(--font-sans);
  border-radius: var(--radius-control); border: var(--border-width) solid var(--border-strong);
  background: var(--surface-raised); color: var(--text); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--text); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { filter: brightness(1.1); border-color: var(--brand); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-quiet { border-color: transparent; background: transparent; }
.btn-quiet:hover { border-color: var(--border); }
.btn-icon { padding: 0; width: 36px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- forms ---------- */
.field { margin: 0 0 var(--space-4); }
.field label, .label { display: block; margin: 0 0 var(--space-1); font-size: var(--size-13); font-weight: 500; color: var(--text); }
.field .hint { font-size: var(--size-12); color: var(--text-muted); margin-top: var(--space-1); }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=tel], input[type=url], input[type=time],
input[type=datetime-local], input[type=number], input:not([type]), select, textarea {
  width: 100%; min-height: 36px; padding: var(--space-2) var(--space-3);
  font: 400 var(--size-14)/1.4 var(--font-sans); color: var(--text);
  background: var(--surface-raised); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control);
}
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.error, .form-error { color: var(--danger); font-size: var(--size-13); margin: var(--space-2) 0 0; min-height: 1.3em; }

/* ---------- cards, panels, tables ---------- */
.card {
  background: var(--surface-raised); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
}
/* One tile density for every view (Trenton 2026-10-19, the compact one): tile headings 16 px, 8 px under them. */
.card h2 { font-size: var(--size-16); margin-bottom: var(--space-2); }
.card p { margin: 0 0 var(--space-1); }
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.table { width: 100%; border-collapse: collapse; background: var(--surface-raised); font-size: var(--size-14); }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); vertical-align: middle; }
.table th { font-weight: 500; font-size: var(--size-13); color: var(--text-muted); background: var(--table-head); }
/* Trenton 2026-10-20: rows of data light up slightly under the mouse. */
.table tbody tr:hover > td { background: var(--row-hover); }
.table tbody tr:hover > td.empty { background: none; }
.table td.num, .table th.num { text-align: right; }
.table td.center, .table th.center { text-align: center; }
.table th.num, .table th.mono { font-family: var(--font-sans); }
.divider { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-4) 0; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
dl.facts dd { min-width: 0; overflow-wrap: anywhere; }
dl.facts dt { color: var(--text-muted); } dl.facts dd { margin: 0; }

/* ---------- status chips: always color + shape/icon + word ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 8px;
  font: 500 var(--size-12)/1 var(--font-sans);
  border-radius: 999px; border: var(--border-width) solid transparent; white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; flex: none; }
.chip.solid { background: var(--c); color: var(--c-on); }
.chip.outline { background: var(--surface-raised); color: var(--text); border: 1.5px solid var(--c); }
.chip.outline svg { color: var(--c); }
.chip.dashed { background: transparent; color: var(--text-muted); border: 1.5px dashed var(--c); }
[data-theme="high-contrast"] .chip { border: 2px solid #000; }
.c-p1 { --c: var(--p1); --c-on: var(--p1-on); }
.c-event { --c: var(--brand); --c-on: var(--on-brand); }
.c-p2 { --c: var(--p2); --c-on: var(--p2-on); }
.c-p3 { --c: var(--p3); --c-on: var(--p3-on); }
.c-srp-hold { --c: var(--srp-hold); --c-on: var(--srp-hold-on); }
.c-srp-secure { --c: var(--srp-secure); --c-on: var(--srp-secure-on); }
.c-srp-lockdown { --c: var(--srp-lockdown); --c-on: var(--srp-lockdown-on); }
.c-srp-evacuate { --c: var(--srp-evacuate); --c-on: var(--srp-evacuate-on); }
.c-srp-shelter { --c: var(--srp-shelter); --c-on: var(--srp-shelter-on); }
.c-unit-active { --c: var(--unit-active); --c-on: var(--unit-active-on); }
.c-unit-available { --c: var(--unit-available); --c-on: var(--unit-available-on); }
.c-unit-oos { --c: var(--unit-oos); --c-on: var(--unit-oos-on); }
.c-trail-1 { --c: var(--trail-1); --c-on: var(--trail-1-on); }
.c-trail-2 { --c: var(--trail-2); --c-on: var(--trail-2-on); }
.c-trail-3 { --c: var(--trail-3); --c-on: var(--trail-3-on); }

/* SRP banner: the building-level state, impossible to miss, always worded */
.srp-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-card);
  background: var(--c); color: var(--c-on); font: 500 var(--size-16)/1.3 var(--font-sans);
}
.srp-banner .icon { width: 24px; height: 24px; }
.srp-banner .state { font-weight: 600; letter-spacing: .02em; }
[data-theme="high-contrast"] .srp-banner { border: 2px solid #000; }

/* Neutral badge (counts, labels; NOT status) */
.badge { display: inline-block; white-space: nowrap; padding: 1px 8px; border-radius: 999px; font-size: var(--size-12); border: var(--border-width) solid var(--border); color: var(--text-muted); }

/* ---------- toasts (undo) ---------- */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: var(--space-5); transform: translateX(-50%); display: grid; gap: var(--space-2); width: min(520px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-overlay);
}
.toast .msg { flex: 1; }
.toast button { background: transparent; color: inherit; border: var(--border-width) solid currentColor; border-radius: var(--radius-control); padding: 4px 10px; font: 500 var(--size-13) var(--font-sans); cursor: pointer; }

/* ---------- dialogs (security actions) ---------- */
dialog.dialog {
  width: min(480px, calc(100vw - 32px)); padding: 0; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-overlay);
}
dialog.dialog::backdrop { background: rgba(28, 34, 48, .45); }
.dialog-body { padding: var(--space-5); }
.dialog-body h2 { margin-bottom: var(--space-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border); }

/* ---------- menus (context and header) ---------- */
/* Above the map's cards (Leaflet panes go up to 1000), so a unit's status menu opens over a map card. */
.menu {
  position: absolute; z-index: 1100; min-width: 220px; padding: var(--space-1);
  background: var(--surface-raised); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control); box-shadow: var(--shadow-overlay);
}
.menu button, .menu a { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--text); font: 400 var(--size-14) var(--font-sans); text-align: left; text-decoration: none; border-radius: 4px; cursor: pointer; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--surface); }
.menu .menu-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--size-12); color: var(--text-muted); }
.menu hr { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-1) 0; }
.menu [aria-checked="true"]::after { content: "✓"; margin-left: auto; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-rows: var(--header-height) 1fr auto; grid-template-columns: var(--nav-width) 1fr; grid-template-areas: "header header" "nav main" "nav footer"; min-height: 100vh; }
.app-header {
  grid-area: header; position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4); background: var(--surface-raised); border-bottom: var(--border-width) solid var(--border);
}
.brandbar { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.org-logo { height: calc(var(--header-height) - 12px); max-width: 200px; width: auto; object-fit: contain; }
.org-name { font: 500 var(--size-16)/1.2 var(--font-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.alcove-wordmark {
  display: inline-block; height: 16px; aspect-ratio: 355.6 / 104.8; background-color: var(--text-muted);
  -webkit-mask: url("/brand/alcove-wordmark-currentcolor.svg") center / contain no-repeat;
  mask: url("/brand/alcove-wordmark-currentcolor.svg") center / contain no-repeat;
}
.header-search { position: relative; }
.header-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.header-search input { padding-left: 34px; }
.clock { text-align: center; line-height: 1.2; }
.clock .date { font-size: var(--size-13); color: var(--text-muted); }
.clock time { font-size: var(--size-20); font-weight: 500; }
.header-right { display: flex; align-items: center; gap: var(--space-1); }
.user-button { display: flex; flex-direction: column; align-items: flex-end; padding: 2px var(--space-3); border-radius: var(--radius-control); border: var(--border-width) solid transparent; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: right; }
.user-button:hover { border-color: var(--border); }
.user-button .who { font-weight: 500; }
.user-button .where { font-size: var(--size-12); color: var(--text-muted); }
.app-nav { grid-area: nav; position: sticky; top: var(--header-height); align-self: start; height: calc(100vh - var(--header-height)); overflow: auto; padding: var(--space-4) var(--space-3); border-right: var(--border-width) solid var(--border); background: var(--surface); }
.app-nav .nav-group { margin-bottom: var(--space-4); }
.app-nav .nav-heading { padding: 0 var(--space-3) var(--space-2); font-size: var(--size-12); color: var(--text-muted); }
.app-nav a, .app-nav span.soon { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
.app-nav a:hover { background: var(--surface-raised); }
.app-nav a[aria-current="page"] { background: var(--surface-raised); border: var(--border-width) solid var(--border); font-weight: 500; }
.app-nav span.soon { color: var(--text-muted); cursor: default; }
.app-nav span.soon .badge { margin-left: auto; }
.app-main { grid-area: main; padding: var(--space-5) var(--space-6); min-width: 0; }
.app-footer { grid-area: footer; padding: var(--space-4) var(--space-6); font-size: var(--size-12); color: var(--text-muted); border-top: var(--border-width) solid var(--border); }
.view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.support-banner { position: sticky; top: 0; z-index: 41; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--text); color: var(--surface); font-size: var(--size-13); }
.support-banner button { margin-left: auto; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 2px 10px; cursor: pointer; font: inherit; }
.nav-toggle { display: none; }
/* The arrow just outside the left menu's edge (wide screens). */
.nav-edge {
  position: fixed; z-index: 39; top: calc(var(--header-height) + var(--space-3)); left: calc(var(--nav-width) - 1px);
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 32px; padding: 0;
  border: var(--border-width) solid var(--border); border-left: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.nav-edge:hover { color: var(--text); background: var(--surface-raised); }
.nav-edge .icon { width: 16px; height: 16px; }
.app.nav-hidden .nav-edge { left: 0; }
.app.nav-hidden { grid-template-columns: 0 1fr; }
.app.nav-hidden .app-nav { display: none; }

.user-button .only-small { display: none; }
.app > * { min-width: 0; }

@media (max-width: 900px) {
  .app, .app.nav-hidden { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; }
  .nav-toggle { display: inline-flex; }
  .nav-edge { display: none; }
  .app-header { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); padding: 0 var(--space-2); }
  .clock .date { display: none; }
  .clock time { font-size: var(--size-16); }
  .app-nav { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 45; width: auto; height: calc(100vh - var(--header-height)); border-right: 0; }
  .app-nav.open, .app.nav-hidden .app-nav.open { display: block; }
  .app-main { padding: var(--space-4); }
  .org-name { max-width: 140px; }
}
@media (max-width: 600px) {
  .alcove-wordmark, .header-right .hide-small { display: none; }
  .user-button .who, .user-button .where { display: none; }
  .user-button .only-small { display: inline-flex; }
  .user-button { padding: 0; width: 36px; height: 36px; align-items: center; justify-content: center; }
  .header-right { gap: 0; }
}

/* ---------- admin screens ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.toolbar .field { margin: 0; }
.toolbar .grow { flex: 1 1 240px; }
.toolbar select, .toolbar input:not([type=checkbox]) { min-width: 150px; }
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.table-wrap .table { border-radius: var(--radius-card); }
.table-wrap .table tr:last-child td { border-bottom: 0; }
.table a.rowlink { color: var(--text); font-weight: 500; text-decoration: none; }
.table a.rowlink:hover { text-decoration: underline; }
.table .sub { display: block; font-size: var(--size-12); color: var(--text-muted); }
.table .sub.found { color: var(--text); overflow-wrap: anywhere; }
.table .found-in { font-weight: 600; color: var(--brand); }
.search-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.search-info > span { flex: 1 1 280px; min-width: 0; }
.board-filter[hidden] { display: none; }
/* Photos on incidents: small square thumbnails; click for the full photo. */
.thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.thumb { width: 72px; height: 72px; padding: 0; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--surface-raised); cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-full { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto var(--space-3); border-radius: var(--radius-control); }
@media print { .thumb { width: 120px; height: 120px; } }
.table .empty { text-align: center; color: var(--text-muted); padding: var(--space-6); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); color: var(--text-muted); font-size: var(--size-13); }
.badge-state { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.badge-state .icon { width: 13px; height: 13px; }
.badge-state.state-disabled, .badge-state.state-suspended { border-color: var(--border-strong); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stack { display: grid; gap: var(--space-3); }
.stack > * { min-width: 0; } /* a wide table scrolls in its own box instead of widening the page (2026-10-21) */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.section-head h2, .section-head h3 { margin: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-1) 0; border-bottom: var(--border-width) solid var(--border); }
.list > li:last-child { border-bottom: 0; }
.list .main { flex: 1 1 220px; min-width: 0; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--space-3); font-size: var(--size-13); }
dialog.dialog-wide { width: min(640px, calc(100vw - 32px)); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.checklist { max-height: 180px; overflow: auto; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); display: grid; gap: var(--space-1); }
.setup-code { font: 500 var(--size-24)/1.3 var(--font-mono); letter-spacing: .06em; padding: var(--space-3); text-align: center; background: var(--surface); border: var(--border-width) dashed var(--border-strong); border-radius: var(--radius-control); user-select: all; }
/* permission checklist (role editor): tick box, name, plain-language description */
fieldset.perm-group { border: 0; padding: 0; margin: var(--space-4) 0 0; min-width: 0; }
fieldset.perm-group legend { font-weight: 500; padding: 0; margin-bottom: var(--space-1); }
.perm { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border); }
.perm:last-child { border-bottom: 0; }
.perm input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--brand); }
.perm label { cursor: pointer; margin: 0; font-weight: 400; }
.perm .perm-name { font-weight: 500; }
.perm .perm-about { display: block; color: var(--text-muted); font-size: var(--size-13); }
.perm input:disabled + label { cursor: default; }
/* incident page: narrative on the left, everything else on the right */
.incident-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .incident-cols { grid-template-columns: minmax(0, 1fr); } }
.print-only, .print-inline { display: none; }

/* ---------- printing an incident (Print or save as PDF) ----------
   Tight and plain: a one-line heading with the organization's name, the title,
   the facts in two columns, then the timeline as a compact two-column list. */
@page { margin: 12mm 14mm; }
@media print {
  .app-header, .app-nav, .nav-edge, .app-footer, .support-banner, .toasts, .no-print, .menu, dialog { display: none !important; }
  html, body { background: #fff !important; }
  body { font-size: 9.5pt; line-height: 1.35; color: #000; }
  .app { display: block !important; }
  .app-main { padding: 0 !important; }
  .print-only { display: block; }
  .print-inline { display: inline; }
  .print-head { display: flex; justify-content: space-between; gap: 12px; font-size: 8.5pt; padding-bottom: 4px; margin-bottom: 8px; border-bottom: 1.5px solid #000; }
  .stack { gap: 0; }
  .view-header { margin: 0 0 6px !important; align-items: flex-start; }
  .view-title { font-size: 15pt; margin: 0 !important; }
  .view-header .mono, .view-header .muted { font-size: 9pt; color: #333; }
  .chip, .badge { font-size: 8pt; padding: 0 6px; border: 1px solid #555; background: none !important; color: #000 !important; }
  .card { border: 0; border-radius: 0; background: none; padding: 0; margin: 0; }
  .card h2 { font: 600 8pt/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: #333; border-bottom: 1px solid #999; padding-bottom: 2px; margin: 10px 0 4px; }
  .section-head { margin: 0; }
  /* the facts first, side by side; then the timeline across the full width */
  .incident-cols { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .incident-cols > .stack { order: -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
  #details { grid-column: 1 / -1; }
  dl.facts { grid-template-columns: max-content 1fr max-content 1fr; gap: 1px 10px; }
  dl.facts dt { color: #333; }
  .list > li { padding: 1px 0; border: 0; gap: 0 8px; }
  .list .small, .small { font-size: 8.5pt; }
  .muted { color: #333 !important; }
  .timeline > li { grid-template-columns: 34mm 1fr; gap: 8px; padding: 2px 0; border-bottom: 0.5px solid #ccc; break-inside: avoid; }
  .timeline .when { font-size: 8pt; color: #000; }
  .timeline .who { color: #333; line-height: 1.2; }
  .timeline > li.private { background: none; border-left: 2px solid #000; padding-left: 6px; }
  p { margin: 2px 0; }
  .watermark { opacity: .06; }
}

/* the incident board: tighter rows, row actions */
.table-compact td { padding-top: 6px; padding-bottom: 6px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions .btn { min-height: 30px; min-width: 30px; padding: 4px; }
.btn-small { min-height: 28px; padding: 2px 10px; font-size: var(--size-13); }
.unit-line { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.unit-line + .unit-line { margin-top: 2px; }
.unit-line .btn-icon { min-height: 26px; min-width: 26px; padding: 2px; }
/* incident page (spacing is the same as every page since 2026-10-19) */
.incident-cols > * { min-width: 0; }
.tight-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card .btn-icon.btn-quiet, .drawer .btn-icon.btn-quiet { min-height: 28px; width: 28px; padding: 2px; }
#check-back { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Details tile: status and timer / where / when / numbers, separated by a rule */
.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.status-row #check-back { margin-left: auto; min-width: 0; }
.status-row #check-back select { min-width: 0; flex: 0 1 auto; }
.status-row select { padding-left: var(--space-2); padding-right: var(--space-1); }
.status-row #check-back { gap: var(--space-1); }
@media (min-width: 481px) { .status-row { flex-wrap: nowrap; } }
.facts-rule { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-2) 0; }
.category-line { margin: 0; overflow-wrap: anywhere; display: flex; justify-content: space-between; gap: var(--space-3); }
/* Details tile (Trenton 2026-10-20): every label right-aligned in one column, so all the values line up. */
#details dl.facts { grid-template-columns: 8.75rem minmax(0, 1fr); }
#details dl.facts dt { text-align: right; }
/* An action written as underlined text ("Add a location", "Add case number", "Make this person a User"). */
.link-button.text-action { font-weight: 400; font-size: var(--size-13); text-decoration: underline; }
/* A drop-down the size of a small button (a person's part on an incident). */
select.select-small { width: auto; min-height: 28px; padding: 2px 28px 2px 8px; font-size: var(--size-13); }
/* An item's photo at the left of its row, or a "no picture" mark (Trenton 2026-10-21). */
.item-row { align-items: flex-start; }
.item-thumb { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--radius-control); border: var(--border-width) solid var(--border); overflow: hidden; padding: 0; background: var(--surface); cursor: pointer; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb.empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: default; }
.item-thumb-count { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 11px; line-height: 16px; }
.person-number { display: inline-block; min-width: 1.4em; color: var(--text-muted); font-weight: 600; }
#persons .link-button { font-weight: 400; } /* person names not bold (Trenton 2026-10-21) */
/* a name that opens the person's card */
.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; text-align: left; text-underline-offset: 2px; }
.link-button:hover, .link-button:focus-visible { text-decoration: underline; }
/* a unit status chip that opens the status menu */
button.chip { cursor: pointer; font-family: var(--font-sans); }
button.chip .caret { width: 10px; height: 10px; margin-left: -2px; }
/* person card */
.person-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.avatar { width: 96px; height: 96px; border-radius: var(--radius-control); object-fit: cover; background: var(--surface); border: var(--border-width) solid var(--border); display: grid; place-items: center; font: 500 var(--size-24)/1 var(--font-sans); color: var(--text-muted); }
.avatar.small { width: 56px; height: 56px; font-size: var(--size-16); }
@media (max-width: 480px) { .person-card { grid-template-columns: 1fr; } }
/* quick picks (open and recent incidents) in a dialog */
.pick-list { display: grid; gap: 2px; max-height: 260px; overflow: auto; margin-bottom: var(--space-3); }
.pick-list button { display: block; width: 100%; text-align: left; background: none; border: var(--border-width) solid transparent; border-radius: var(--radius-control); padding: 6px 8px; font: inherit; color: var(--text); cursor: pointer; }
.pick-list button:hover, .pick-list button:focus-visible { border-color: var(--border-strong); background: var(--surface); }
/* check-back timer */
.badge.check-back { font-family: var(--font-mono); color: var(--text); border-color: var(--border-strong); }
.badge.check-back.check-due { background: var(--text); color: var(--surface-raised); border-color: var(--text); font-weight: 500; }
/* The date-and-time pop-up is drawn by the browser, which gives it no visible edge on a light page.
   Asking for the browser's dark pop-up makes it stand apart; the box itself keeps Alcove's colors. */
:root:not([data-theme="dark"]) input[type="datetime-local"] { color-scheme: dark; }
:root:not([data-theme="dark"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); }
/* sortable table headings */
th button.sort { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
th button.sort:hover { text-decoration: underline; }
th[aria-sort="ascending"] button.sort::after { content: " \2191"; }
th[aria-sort="descending"] button.sort::after { content: " \2193"; }
/* bell with a count of new alerts */
.bell { position: relative; }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 500 11px/16px var(--font-sans); text-align: center; }
/* incident page */
.prose { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: 168px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border); }
.timeline > li:last-child { border-bottom: 0; }
.timeline .when { color: var(--text-muted); font: 400 var(--size-12)/1.5 var(--font-mono); }
/* automatic lines (status, people, units...) are tinted, so written entries stand out at a glance */
.timeline > li.automatic .prose { color: var(--brand); }
.timeline > li.automatic { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.timeline.written-only > li.automatic { display: none; }
.timeline .who { font-family: var(--font-sans); }
.timeline .entry-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.timeline .entry-line .btn { margin-top: -4px; flex: none; }
/* a hidden (coordinator) note: subdued, so it reads as sensitive and apart from the record */
.timeline > li.private { background: var(--surface); border-left: 3px solid var(--border-strong); padding-left: var(--space-3); color: var(--text-muted); }
.timeline > li.private .prose { font-style: italic; }
.mention-list { border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-raised); margin-top: 4px; padding: 4px; display: grid; gap: 2px; }
.mention-list button { text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 4px; cursor: pointer; font: inherit; color: var(--text); }
.mention-list button:hover, .mention-list button:focus, .mention-list button.active { background: var(--surface); outline: none; }
.mention-list button.active { font-weight: 500; }
@media (max-width: 700px) { .timeline > li { grid-template-columns: 1fr; gap: 0; } }
details.disclosure > summary { cursor: pointer; font-weight: 500; padding: var(--space-1) 0; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } .hide-narrow { display: none; } }

/* ---------- watermark: deters photographing screens (4–5% opacity) ---------- */
.watermark { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045; background-repeat: repeat; }
@media print { .watermark { opacity: .08; } }

/* ---------- sign-in pages ---------- */
.auth { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .lockup { display: block; height: 44px; width: auto; margin: 0 0 var(--space-5); }
.auth-card .wordmark { display: block; height: 22px; width: auto; margin: 0 0 var(--space-4); }
.auth-card .sub { color: var(--text-muted); margin: 0 0 var(--space-5); }
.auth-footer { margin-top: var(--space-5); text-align: center; font-size: var(--size-12); color: var(--text-muted); }
.steps { margin: 0 0 var(--space-4); padding-left: 20px; color: var(--text-muted); }
.steps strong { color: var(--text); }
.qr { display: block; margin: 0 auto var(--space-3); background: #FFFFFF; border-radius: var(--radius-control); padding: 6px; border: var(--border-width) solid var(--border); }
.manual { font-size: var(--size-13); color: var(--text-muted); margin-bottom: var(--space-2); }
.manual code { display: block; margin-top: var(--space-2); padding: var(--space-2); background: var(--surface); border-radius: 4px; color: var(--text); word-break: break-all; letter-spacing: .05em; }
.codes { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: var(--font-mono); }
.codes li { background: var(--surface); padding: 6px 8px; border-radius: 4px; text-align: center; }
.alt { text-align: center; margin: var(--space-3) 0 0; font-size: var(--size-13); }

/* Logo files have fixed colors: show the reversed version on the dark theme. */
/* (!important: must win over component rules such as .auth-card .lockup { display: block }) */
.on-dark { display: none !important; }
[data-theme="dark"] .on-light { display: none !important; }
[data-theme="dark"] img.on-dark { display: block !important; }

/* Reversed logo files sit on ink; keep the dark sign-in card ink so they blend in. */
[data-theme="dark"] .auth-card { background: var(--surface); }

/* ---------- Standard Response Protocols ---------- */
.srp-area { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.srp-area:empty { display: none; }
.srp-banner { flex-wrap: wrap; }
.srp-banner a { color: inherit; font-weight: 600; }
.srp-extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-left: auto; font-size: var(--size-14); }
.srp-drill { border: 1.5px solid currentColor; border-radius: 999px; padding: 0 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--size-12); }
.srp-instructions { flex-basis: 100%; font-weight: 500; }
.srp-911 { font-weight: 600; }
/* a board row with an active SRP: tinted red, with the SRP's own chip */
tr.srp-row > td { background: color-mix(in srgb, var(--p1) 12%, var(--surface-raised)); }
tr.srp-row > td:first-child { box-shadow: inset 4px 0 0 var(--p1); }
.srp-chip { margin-top: 4px; }
.srp-list { gap: var(--space-3); }
.srp-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 4px; }
/* SRP tile and timeline lines */
.srp-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.srp-types label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--radius-control); background: var(--c); color: var(--c-on); font-weight: 600; cursor: pointer; border: 3px solid transparent; }
.srp-types input { position: absolute; opacity: 0; pointer-events: none; }
.srp-types label:has(input:checked) { border-color: var(--text); outline: 2px solid var(--surface-raised); outline-offset: -5px; }
.srp-types label:has(input:focus-visible) { outline: 2px solid var(--text); }
.timeline li.srp-line .prose { font-weight: 600; }

/* ---- map (step 7) ---------------------------------------------------------------------------- */
.app.popout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; }
.app.popout .app-nav, .app.popout .nav-toggle, .app.popout .nav-edge { display: none; }
.map-header { align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.map-header .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.map-toggles { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-right: var(--space-2); }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); height: calc(100vh - var(--header-height) - 190px); min-height: 420px; }
.map-layout.popout { height: calc(100vh - var(--header-height) - 150px); }
.map-canvas { border: var(--border-width) solid var(--border); border-radius: var(--radius-card, 8px); overflow: hidden; min-height: 420px; background: var(--surface); }
.map-panel { overflow: auto; display: grid; align-content: start; gap: var(--space-4); }
.map-section h2 { font-size: var(--size-16, 1rem); margin: 0 0 var(--space-2); }
.map-section .list li { padding: 0; }
.map-section li.srp { box-shadow: inset 4px 0 0 var(--p1); }
.map-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; text-align: left; padding: 6px 8px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-control); }
div.map-row { cursor: default; }
button.map-row:hover { background: var(--surface-raised); }
.map-row-title { font-weight: 500; }
.map-row-sub { flex-basis: 100%; }
/* A list row: the chip, then what it is with where (smaller) underneath (Trenton 2026-10-16). */
.map-row-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.map-row-text .map-row-sub { flex-basis: auto; }
@media (max-width: 900px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .map-canvas { height: 60vh; }
}
/* markers: Alcove's own chips on the map */
.map-marker-host { background: none; border: 0; }
.map-marker { position: absolute; left: 0; top: 0; white-space: nowrap; }
.map-above { transform: translate(-50%, calc(-100% - 2px)); }
.map-below { transform: translate(-50%, calc(6px + var(--stack, 0) * 30px)); }
.map-center { transform: translate(-50%, -50%); }
.map-building, .map-incident { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--text); border: var(--border-width) solid var(--border-strong); box-shadow: 0 1px 3px rgb(0 0 0 / .25); font-size: var(--size-13); font-family: var(--font-sans); line-height: 1.6; }
.map-building .icon { width: 14px; height: 14px; }
.map-building.has-srp { border-width: 2px; border-color: var(--text); padding: 2px 8px 2px 3px; font-weight: 600; }
.map-building.has-srp .chip { font-size: var(--size-12); }
.map-incident { padding: 1px 8px 1px 2px; }
.map-incident .chip { font-size: var(--size-12); }
.map-incident.srp { box-shadow: 0 0 0 2px var(--p1), 0 1px 3px rgb(0 0 0 / .25); }
.map-units { color: var(--text-muted); }
.map-pin { display: inline-flex; color: var(--p1); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
.map-pin .icon { width: 34px; height: 34px; stroke-width: 2.25; fill: var(--surface-raised); }
.leaflet-marker-icon:focus-visible .map-marker > * { outline: 2px solid var(--text); outline-offset: 2px; }
.area-part h3 { font-size: var(--size-14); margin: 0 0 4px; }
.list.compact li { padding: 2px 0; }
.map-draw-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 20px); }
.incident-map-searchers[hidden] { display: none; }
.incident-map-searchers { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.searcher-list { display: flex; flex-wrap: wrap; gap: 6px; }
.searcher { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: var(--border-width) solid var(--border); border-radius: 999px; font-size: var(--size-13); }
.searched { display: grid; text-align: right; white-space: nowrap; }
.searched strong { font-size: var(--size-16); }
.incident-map-canvas { height: 320px; border-radius: var(--radius-control); overflow: hidden; border: var(--border-width) solid var(--border); }
.map-popup { display: grid; gap: 4px; min-width: 220px; font-family: var(--font-sans); }
.map-popup-title { font-weight: 600; }
.map-popup-units { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.map-popup .btn { justify-self: start; margin-top: 4px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-raised); color: var(--text); }
.leaflet-container { font-family: var(--font-sans); background: var(--surface); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); }
/* dark themes: darken the map pictures so the screen isn't a bright patch at night */
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.map-person { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 999px; background: var(--surface-raised); color: var(--text); border: 2px solid var(--trail, var(--text)); box-shadow: 0 1px 3px rgb(0 0 0 / .3); font: 600 var(--size-12)/1.5 var(--font-sans); }
.map-person .icon { width: 14px; height: 14px; color: var(--trail, var(--text)); }
.map-person.you { box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 5px var(--trail, var(--text)); }
.map-person.stale { opacity: .55; border-style: dashed; }
.map-popup .unit-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.map-popup .tight-row { display: flex; gap: 6px; flex-wrap: wrap; }
.trail-swatch { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.location-btn.on { color: var(--brand); }
.location-btn.on::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.location-btn { position: relative; }
.map-canvas { position: relative; }
.map-canvas.picking .leaflet-container, .map-canvas.picking { cursor: crosshair; }
.map-pick-hint { position: absolute; z-index: 1000; top: 10px; left: 50%; transform: translateX(-50%); background: var(--surface-raised); color: var(--text); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); padding: 6px 12px; box-shadow: 0 2px 6px rgb(0 0 0 / .25); font-size: var(--size-14); }
.map-comment { min-width: 0; flex: 1; }
.map-status-row { display: flex; align-items: center; gap: 6px; }
.map-status { padding: 2px 6px; min-height: 0; }
.map-what { font-weight: 500; }
.search-party-row { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.search-party-row .tight-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.search-party-row select { flex: 1; min-width: 12em; }
.search-party-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .sp-layout { grid-template-columns: 1fr; } }
.sp-map { height: 55vh; min-height: 320px; }
.sp-share-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sp-share-buttons .btn { flex: 1; min-height: 48px; justify-content: center; }
.sp-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.person-head { display: flex; align-items: center; gap: var(--space-3); }
.person-head .avatar { width: 72px; height: 72px; }
.map-pick { height: 380px; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); margin: var(--space-2) 0; }

/* ---------- calendar (Trenton 2026-10-16) ---------- */
.cal-header .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.segmented { display: inline-flex; }
.segmented .btn { border-radius: 0; }
.segmented .btn:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.segmented .btn:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.segmented .btn + .btn { margin-left: -1px; }
.segmented .btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); }
.cal-dow { padding: 4px 6px; font-size: var(--size-12); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border); background: var(--surface-raised); }
.cal-cell, .cal-col { min-height: 112px; padding: 4px; border-right: var(--border-width) solid var(--border); border-bottom: var(--border-width) solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-cell:nth-child(7n), .cal-col:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.cal-cell.other .cal-daynum { color: var(--text-muted); }
.cal-cell.today .cal-daynum, .cal-col.today .cal-colhead { background: var(--brand); color: var(--on-brand); border-radius: 999px; padding: 0 7px; }
.cal-daynum, .cal-colhead { align-self: flex-start; font-weight: 500; }
.cal-week .cal-col { min-height: 360px; }
.cal-item { display: block; padding: 1px 4px 1px 6px; border-left: 4px solid var(--c, var(--brand)); border-radius: 3px; background: color-mix(in srgb, var(--c, var(--brand)) 9%, transparent);
  color: var(--text); text-decoration: none; font-size: var(--size-12); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item:hover { text-decoration: underline; }
.cal-item.ended { opacity: .7; }
.cal-item.cal-event { --c: var(--brand); }
.cal-item.cal-p1 { --c: var(--p1); }
.cal-item.cal-p2 { --c: var(--p2); }
.cal-item.cal-p3 { --c: var(--p3); }
.cal-time { color: var(--text-muted); }
.cal-day .cal-item { white-space: normal; font-size: var(--size-14); padding: 4px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-chip { font-size: var(--size-12); }
.cal-allday { display: grid; gap: 4px; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--border); }
.cal-hour { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-2); border-top: var(--border-width) solid var(--border); padding: 4px 0; min-height: 34px; }
.cal-hourlist { display: grid; gap: 4px; }
@media (max-width: 700px) {
  .cal-month .cal-item .cal-what { display: none; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-week .cal-col { min-height: 0; border-right: 0; }
}
@media print {
  .cal-cell, .cal-col { min-height: 0; break-inside: avoid; }
  .cal-item { white-space: normal; background: none; }
  .cal-more { display: none; }
}

/* ---------- People: flags (Trenton 2026-10-16) ---------- */
.badge.flag { margin: 1px 2px 1px 0; }
.badge.flag-group { display: inline-flex; align-items: center; gap: 3px; }
.badge.flag-group .icon { width: 12px; height: 12px; }
.badge.flag-caution { border-color: var(--p2); color: var(--text); background: color-mix(in srgb, var(--p2) 14%, transparent); }
.badge.flag-critical { border-color: var(--p1); color: var(--text); background: color-mix(in srgb, var(--p1) 14%, transparent); } /* not bold (Trenton 2026-10-21) */
.facts-actions { margin-top: var(--space-3); }

/* ---------- Home: happening today, messages (Trenton 2026-10-16) ---------- */
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.today-group h3 { font-size: var(--size-14); margin: 0 0 6px; }
.today-row { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; color: var(--text); padding: 4px 0; }
.today-row:hover .today-text strong { text-decoration: underline; }
.today-text { display: grid; min-width: 0; }
.message summary { cursor: pointer; padding: 4px 0; }
.message.unread summary strong { color: var(--brand); }
.message-body { white-space: pre-wrap; margin: 8px 0 4px; }
.badge.system { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat { display: grid; }
.stat strong { font-size: var(--size-20); }
.alerts-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .alerts-top { grid-template-columns: 1fr; } }
.hours-row input[type=time] { width: auto; }
.building-map-canvas { height: 240px; border-radius: var(--radius, 6px); overflow: hidden; }
.hours-days { flex-wrap: wrap; margin: 8px 0; }

/* Calendar: building hours as bars on a 24-hour track (Trenton 2026-10-16) */
.hours-bar { display: grid; grid-template-columns: minmax(0, auto) minmax(60px, 1fr); align-items: center; gap: 6px; font-size: var(--size-12); }
.hours-bar.full { grid-template-columns: 200px 1fr; font-size: var(--size-13); padding: 2px 0; }
.cal-cell .hours-bar, .cal-col .hours-bar { grid-template-columns: 1fr; gap: 1px; }
.hours-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hours-track { position: relative; height: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 4px; }
.hours-bar.full .hours-track { height: 20px; }
/* Day view (Trenton 2026-10-16): one line per building; each period its own shade, see-through, with
   overlaps striped and outlined; names alternate top and bottom so overlapping labels stay readable. */
.hours-bar.full .hours-track.one-line { height: 36px; }
.hours-seg.s1 { background: color-mix(in srgb, var(--trail-2, #0E9384) 55%, transparent); }
.hours-seg.s2 { background: color-mix(in srgb, var(--trail-1, #6941C6) 55%, transparent); }
.hours-seg.s3 { background: color-mix(in srgb, var(--trail-3, #DD2590) 55%, transparent); }
.hours-seg.named { line-height: 16px; padding-top: calc(var(--label-row, 0) * 17px + 1px); font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .9); } /* readable on every shade (2026-10-21) */
.hours-overlap { position: absolute; top: 0; bottom: 0; pointer-events: auto; border-left: 2px solid var(--text); border-right: 2px solid var(--text);
  background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--text) 14%, transparent) 6px 8px); pointer-events: none; }
.hours-bar.full .hours-name.link-button { text-align: left; }
.hours-seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--on-brand); font-size: 11px; line-height: 20px; padding: 0 4px; overflow: hidden; white-space: nowrap; }
.cal-hours { display: grid; gap: 4px; margin-bottom: var(--space-4); position: relative; }
/* "Now" on today's day view (Trenton 2026-10-16, seventh review): a thin line over the building bars with the time under it,
   and a line among the hour's items. */
.cal-now-tracks { position: absolute; left: 206px; right: 0; top: 0; bottom: 0; pointer-events: none; }
.cal-now-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--danger, #c62828); }
.hours-scale .cal-now-text { color: var(--danger, #c62828); font-weight: 600; white-space: nowrap; }
/* The building bars: 10 at a time, the rest by scrolling (Trenton 2026-10-19). */
.cal-bars { display: grid; gap: 4px; position: relative; }
.dup-group .dup-person { line-height: 1.5; }
.dup-groups > li.dup-group + li.dup-group { border-top: var(--border-width) solid var(--border-strong); }
#dup-inspect tr.dup-match > td { color: var(--brand); font-weight: 500; }
/* Organization alerts (Trenton 2026-10-21): room under the two "Everyone" boxes; Sent inside the Use tile. */
.alerts-everyone { display: grid; gap: 2px; margin-bottom: var(--space-3); }
.checklist .check-all { font-weight: 600; border-bottom: var(--border-width) solid var(--border); padding-bottom: 4px; }
.alert-sent { max-height: 420px; overflow-y: auto; }
.alert-sent-row { font-weight: 500; }
.load-more-row { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.load-more-row select { width: auto; }
/* A person's archive (Trenton 2026-10-21): the value in the brand blue, dates and who in gray. */
.archive-row .archive-value { color: var(--brand); }
.archive-row.changed .archive-value, .archive-row.removed .archive-value, .archive-row.ended .archive-value { color: var(--brand); opacity: .85; }
.unit-timeline > li.unit-event { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.unit-event-time { color: var(--text-muted); }
.unit-event.status .main { font-weight: 500; }
#unit-day .actions input[type=date] { width: auto; }
/* Map (Trenton 2026-10-21): compact list rows with a color square; the "Inside" window's parts full width. */
.map-row.compact { padding: 3px 6px; gap: 6px; flex-wrap: nowrap; }
.map-row.compact .map-row-text { line-height: 1.25; }
.map-row.compact .map-row-title, .map-row.compact .map-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); }
.map-section .list li + li { border-top-color: color-mix(in srgb, var(--border) 60%, transparent); }
.area-actions { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--border); }
.area-parts { display: grid; gap: var(--space-3); }
.area-parts .area-part .section-head { margin-bottom: 2px; }
/* The Map's zoom slider, under + and − (Trenton 2026-10-21). */
.map-zoom-slider { background: var(--surface-raised); border: 2px solid rgba(0, 0, 0, .2); border-radius: 4px; padding: 6px 4px; display: grid; place-items: center; }
.map-zoom-slider input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 120px; margin: 0; padding: 0; accent-color: var(--brand); }
#sl-code::placeholder { text-transform: none; }
.cal-bars-inner { display: grid; gap: inherit; position: relative; }
.cal-bars.full.limited { max-height: 440px; overflow-y: auto; }
.cal-cell .cal-bars, .cal-col .cal-bars { gap: 1px; }
.cal-cell .cal-bars.limited, .cal-col .cal-bars.limited { max-height: 230px; overflow-y: auto; }
.hours-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hours-name-wrap .hours-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.open-now { color: var(--text); border-color: var(--border-strong); flex: none; }
.open-now-word { font-weight: 600; }
/* Units: off duty rows are also shaded (Trenton 2026-10-19), so they stand apart at a glance. */
tr.unit-off-duty > td { background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.cal-now-line { display: flex; align-items: center; gap: 6px; color: var(--danger, #c62828); }
.cal-now-line::before { content: ''; flex: 1; order: 2; border-top: 2px solid currentColor; }
.hours-scale { position: relative; height: 16px; margin-left: 206px; }
.hours-scale span { position: absolute; transform: translateX(-50%); }
@media print { .hours-seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Organization settings: name and logos (Trenton 2026-10-16) */
.org-name-big { font: 500 var(--size-20)/1.3 var(--font-serif); margin: 0 0 var(--space-3); }
.logo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.logo-slot { display: grid; gap: 6px; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); }
.logo-dark { background: #1d2939; color: #fff; }
.logo-dark .small.muted { color: #d0d5dd; }
.logo-preview { max-height: 64px; max-width: 100%; object-fit: contain; justify-self: start; }
.logo-preview.empty { font-size: var(--size-13); opacity: .7; }
/* A vehicle's page (seventh review). */
.vehicle-head { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.vehicle-photo { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius-control); border: var(--border-width) solid var(--border); }
.vehicle-photo.empty { display: grid; place-items: center; color: var(--text-muted); }
.searcher-vehicle { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
/* Areas of interest (seventh review). */
.interest-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .interest-layout { grid-template-columns: 1fr; } }
.interest-map { height: 560px; border-radius: var(--radius-control); overflow: hidden; }
.interest-kind { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); }
.interest-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Deactivated rows are subdued (seventh review fixes). */
tr.muted td, li.muted .main { opacity: 0.55; }
.pick-list button[aria-pressed="true"] { border-color: var(--brand); background: var(--surface); font-weight: 600; }

.unit-sharing { width: 24px; padding-left: 0; padding-right: 0; color: var(--brand); }

/* Building page (seventh review fixes): details left, map above operations right. */
.building-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .building-top { grid-template-columns: 1fr; } }
.facts-rule { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-3) 0; }
.feature-lines { display: grid; gap: 2px; }
.feature-line { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.feature-line input { margin: 0; }
/* Area of interest window: large, so trails and areas can be drawn accurately (Trenton 2026-10-16). */
dialog.dialog:has(#ai-map) { width: min(1200px, 96vw); max-width: none; }
/* The Add window fits the screen without scrolling (Trenton 2026-10-21): the map takes what the rest leaves. */
#ai-map { height: max(200px, calc(100vh - 430px)); margin: var(--space-1) 0; }
.interest-form .field { margin-bottom: var(--space-2); }
.interest-form .three-col { grid-template-columns: 1fr 200px 1.4fr; }
.interest-form textarea { min-height: 0; height: 40px; }
.interest-draw { flex-wrap: wrap; align-items: center; }
.interest-photo-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.interest-photo { position: relative; display: inline-block; }
.interest-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-control); display: block; }
.interest-photo .btn { position: absolute; top: -6px; right: -6px; background: var(--surface-raised); border-radius: 999px; }
.interest-photos { display: flex; gap: 4px; margin-top: 6px; }
.interest-photos .item-photo-thumb img { width: 48px; height: 48px; object-fit: cover; }

/* "Who can see this": the first few, then "Show all" (Trenton 2026-10-16). */
#people-listed.who-collapsed > li:nth-child(n + 6) { display: none; }

/* The organization's splash screen after signing in (eighth review). */
.splash-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6, 32px); background: var(--bg, var(--surface)); }
.splash-wrap { max-width: 640px; width: 100%; }
.splash-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); margin-bottom: var(--space-3); }
.splash-mark { width: 40px; height: 40px; }
.splash-word { height: 22px; background-color: var(--text); }
.about-brand { display: flex; align-items: center; gap: var(--space-3); }
.about-card { max-width: 760px; }
.splash-card { width: 100%; text-align: left; }
/* .card p sets a small margin; this one needs the room above the buttons (Trenton 2026-10-20). */
.splash-card .splash-text { white-space: pre-wrap; font-size: var(--size-16); line-height: 1.5; margin: var(--space-3) 0 var(--space-6); }
.splash-card > .actions { justify-content: flex-end; }
#person-no-account { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.inline-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0; }
.inline-field label { margin: 0; color: var(--text-muted); }

/* Units view (ninth review): off duty units below a line, subdued. */
.units-divider td { border-top: 2px solid var(--border-strong, var(--border)); padding-top: var(--space-3); font-size: var(--size-12, 12px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
tr.unit-off-duty > td { opacity: .55; }
tr.unit-off-duty:hover > td, tr.unit-off-duty:focus-within > td { opacity: 1; }

/* Menus (ninth review): plain notes, read items subdued, a second line; the bell as a wider card. */
.menu .menu-note { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--size-14, 14px); max-width: 320px; }
.menu .menu-muted { color: var(--text-muted); }
.menu .menu-sub { display: block; font-size: var(--size-12, 12px); color: var(--text-muted); margin-left: auto; padding-left: var(--space-3); white-space: nowrap; }
.menu.bell-card { min-width: 320px; max-width: min(420px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; }
.menu.bell-card a, .menu.bell-card button { white-space: normal; text-align: left; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.pager[hidden] { display: none; }

/* Ninth review: Leaflet's own layers (z-index 400–1000) stay inside the map, under the sticky header,
   menus, and toasts. */
.leaflet-container { isolation: isolate; }
.flag-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
.flag-badges .badge { font-size: var(--size-12); }
.card-more hr { margin: var(--space-3) 0; border: 0; border-top: var(--border-width) solid var(--border); }
.card-more .label { font-size: var(--size-12, 12px); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.card-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-line > span { display: grid; gap: 2px; }
.card-incidents { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.card-incidents li { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }

/* A check-back timer at the bottom of an incident's chip on the map (ninth review). */
.map-incident .map-check-back { display: block; margin-top: 2px; }
.map-incident .map-check-back .badge { font-size: var(--size-12); }
/* Toasts above maps and dialogs' maps (ninth review: stacked toasts were behind the map). */
.toasts { z-index: 1200; }

/* The person page: the same spacing as every page since 2026-10-19; its short lists have no rules between lines. */
.person-page .list.compact > li { border-bottom: 0; }
.person-page .small-head { font-size: var(--size-14, 14px); margin: 0; }
.contact-type { display: inline-block; min-width: 92px; }
/* A photo viewer with arrows (Items, People). */
.gallery { display: grid; gap: var(--space-2); justify-items: center; }
.gallery-img { max-width: 100%; max-height: 65vh; border-radius: var(--radius-control); background: var(--surface-sunken, var(--surface)); }
.gallery-nav { display: flex; align-items: center; gap: var(--space-3); }

/* An item (ninth review): its photos in a tile at the upper right. */
/* The item page (Trenton 2026-10-21): tiles in one column; photos inside Details; custody as from → to rows. */
.item-page { max-width: var(--page-width); }
/* A photo whose file is missing on the server (2026-10-21): an empty gray box, not a broken-image icon. */
img.img-missing { visibility: visible; background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-raised) 6px, var(--surface-raised) 12px); color: transparent; outline: 1px dashed var(--border-strong); }
/* Organization usage (Trenton 2026-10-21): compact tiles. */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--space-3); align-items: start; }
.usage-tile h3 { font-size: var(--size-14); margin: var(--space-3) 0 var(--space-2); }
.usage-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.usage-stat { min-width: 84px; }
.usage-num { font-size: var(--size-20); font-weight: 500; font-variant-numeric: tabular-nums; }
.usage-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.usage-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: var(--space-2); align-items: center; font-size: var(--size-13); }
.usage-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-bar { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; background: var(--brand); }
.usage-bar-val { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.usage-heat { display: grid; grid-template-columns: 2.4em repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10px; color: var(--text-muted); }
.usage-heat-cell { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--brand) calc(var(--a) * 100%), var(--surface)); }
.usage-heat-day { align-self: center; }
@media (max-width: 700px) { .usage-grid { grid-template-columns: minmax(0, 1fr); } }
.item-photo-strip { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.item-photo-thumb { width: 120px; height: 90px; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); cursor: zoom-in; }
.item-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.custody-rows > li.custody-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.custody-arrow { color: var(--text-muted); }
@media (max-width: 700px) { .custody-rows > li.custody-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .custody-notes { grid-column: 1 / -1; } }
.item-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--space-4); align-items: start; }
.item-cols > :last-child { grid-row: 1; grid-column: 2; }
@media (max-width: 900px) { .item-cols { grid-template-columns: minmax(0, 1fr); } .item-cols > :last-child { grid-row: auto; grid-column: auto; order: -1; } }
.item-photo { display: grid; gap: var(--space-2); justify-items: center; }
.item-photo-open { border: 0; padding: 0; background: none; cursor: zoom-in; }
.item-photo img { max-width: 100%; max-height: 360px; border-radius: var(--radius-control); }
.custody-list > li > .icon { align-self: flex-start; margin-top: 3px; color: var(--text-muted); }

/* Relationship Graph (2026-10-16). Colours come from the tokens; the canvas reads them in graph.js. */
.graph-toolbar { align-items: flex-end; flex-wrap: wrap; }
.graph-search { position: relative; }
.graph-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 320px; overflow: auto; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); }
.graph-result { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; color: var(--text); cursor: pointer; font: inherit; }
.graph-result:hover, .graph-result:focus { background: var(--surface); outline: none; }
.graph-filters { align-self: flex-end; }
.graph-filters > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.graph-filters { position: relative; }
.graph-filter-cols { position: absolute; right: 0; top: 100%; z-index: 40; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); width: max-content; max-width: min(640px, 90vw);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); }
.graph-filter-cols fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.graph-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .graph-cols { grid-template-columns: minmax(0, 1fr); } }
.graph-stage { position: relative; }
.graph-canvas { height: 68vh; min-height: 420px; background: var(--surface); border: var(--border-width, 1px) solid var(--border); border-radius: var(--radius-card); }
.graph-canvas:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.graph-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); color: var(--text-muted); pointer-events: none; }
.graph-empty .icon { width: 40px; height: 40px; }
.graph-panel { max-height: 68vh; overflow: auto; }
.graph-panel h2 { font-size: var(--size-16); margin: 0; }
.graph-panel h3 { font-size: var(--size-14, 14px); margin: var(--space-3) 0 var(--space-1); }
.graph-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--space-2); color: var(--text-muted); }
.graph-legend-title { font-weight: 500; }
.graph-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.graph-swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid; border-radius: 3px; }
.graph-line { display: inline-block; width: 22px; height: 0; border-top-width: 2px; margin-right: 6px; vertical-align: middle; }
.graph-line-solid { border-top-style: solid; } .graph-line-dashed { border-top-style: dashed; } .graph-line-dotted { border-top-style: dotted; }
.graph-menu-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* ---- Drawer (UI review 2026-10-17): a side panel for a list or a setting. Not modal (toasts, menus work). */
.drawer-shade { position: fixed; inset: 0; z-index: 48; background: rgba(28, 34, 48, .35); }
dialog.drawer { position: fixed; z-index: 49; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); height: 100vh; max-height: none; max-width: none;
  display: flex; flex-direction: column; padding: 0; border: 0; border-left: var(--border-width) solid var(--border); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-overlay); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border); }
.drawer-head h2 { margin: 0; font-size: var(--size-16); }
.drawer-hint { margin: 0; padding: var(--space-3) var(--space-4) 0; }
.drawer-body { flex: 1; overflow: auto; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.drawer-body h3 { margin: var(--space-2) 0 0; font-size: var(--size-14); }
/* A wide table scrolls inside its own box; the drawer never widens past its edge (2026-10-21). */
.drawer-body > * { min-width: 0; }
.drawer-body > hr, .dialog hr { width: 100%; border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-2) 0; }
#dup-rescan { white-space: nowrap; flex: none; }
.drawer-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border); }
.drawer-body .is-off { opacity: .5; }
/* The list manager: Add at the top, one ⋯ menu per row. */
.list-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.list-manager-head p { margin: 0; }
table.list-manager td.menu-col, table.list-manager th.menu-col { width: 1%; text-align: right; padding-top: 2px; padding-bottom: 2px; }
.role-picker-wrap { display: grid; gap: var(--space-1); }
.checklist.role-picker { max-height: 240px; }

/* ---- Organization settings: groups of summary rows (UI review 2026-10-17). */
.settings-groups { display: grid; gap: var(--space-4); max-width: var(--page-width); }
.settings-group h2 { font-size: var(--size-16); margin: 0 0 var(--space-2); }
.settings-rows { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-card, 10px); background: var(--surface-raised); }
.setting-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); min-height: 48px; }
.setting-row + .setting-row { border-top: var(--border-width) solid var(--border); }
.setting-row .setting-name { font-weight: 500; }
.setting-row .setting-value { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.setting-row .setting-action { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 640px) {
  .setting-row { grid-template-columns: minmax(0, 1fr) auto; }
  .setting-row .setting-value { grid-column: 1; grid-row: 2; white-space: normal; }
  .setting-row .setting-action { grid-column: 2; grid-row: 1 / span 2; }
}
/* A switch: a checkbox drawn as a track (still a real checkbox for keyboard and screen readers). */
input.switch { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; margin: 0; flex: none; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-raised); transition: left .12s; }
input.switch:checked { background: var(--brand); }
input.switch:checked::after { left: 18px; }
input.switch:disabled { opacity: .5; cursor: default; }
.list-manager-head .btn { white-space: nowrap; flex: none; }

/* ---- Incident page (UI review 2026-10-17) ---- */
.incident-header { align-items: flex-start; margin-bottom: var(--space-3); }
.incident-header .view-title { margin-bottom: var(--space-1); }
.incident-chips { justify-content: flex-end; margin-bottom: var(--space-2); }
#incident-actions { justify-content: flex-end; flex-wrap: wrap; }
.title-timer { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.title-timer select { width: auto; min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
/* A split button: the action, and an arrow for its menu, joined. */
.split-button { display: inline-flex; }
.split-button > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-button > .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: rgba(255, 255, 255, .35); width: 32px; min-width: 32px; padding: 0; }
.split-button > .btn:not(.btn-primary) + .btn { border-left-color: var(--border-strong); margin-left: -1px; }
/* The header's SRP button while one is active: filled red, with the word (never colour alone). */
.btn-srp-active { background: var(--danger); border-color: var(--danger); color: var(--on-brand); }
.btn-srp-active:hover { filter: brightness(1.1); }
/* The right column: one unit, Details then the sections, ruled off (no accordion: Trenton 2026-10-19). */
.incident-side { display: grid; gap: 0; align-content: start; }
.side-section { padding: var(--space-2) 0; }
.side-section:first-child { padding-top: 0; }
.side-section:last-child { padding-bottom: 0; }
.side-section + .side-section { border-top: var(--border-width) solid var(--border); }
.side-section .section-head { margin-bottom: 0; min-height: 28px; }
.side-section .section-head + * { margin-top: var(--space-1); }
.side-section h2 { font-size: var(--size-16); margin: 0; }
.srp-line-item + .srp-line-item { margin-top: var(--space-1); }
.srp-line-item .chip { vertical-align: middle; }
/* The map's tools, icon buttons in its head. */
.map-tools { display: flex; align-items: center; gap: 2px; }
.incident-map-canvas.expanded { height: 560px; }
#incident-map-note:empty { display: none; }
#incident-map-note { display: block; margin-top: var(--space-1); }
.srp-line-item > .actions { margin-top: var(--space-1); }
/* The incident's left column tabs (UI review 2026-10-17): Timeline and People. */
.tabs { display: flex; gap: var(--space-1); }
.tab { border: 0; background: none; padding: var(--space-1) var(--space-2); font: 500 var(--size-16)/1.25 var(--font-serif); color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.tab:hover { color: var(--text); }
/* The People tab: the people on the incident at the left, the picked one's panel at the right. */
.people-tab { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
@media (max-width: 720px) { .people-tab { grid-template-columns: 1fr; } }
.people-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.people-pick button { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--space-2); border: var(--border-width) solid transparent; border-radius: var(--radius-control); background: none; color: var(--text); font: inherit; cursor: pointer; }
.people-pick button:hover { background: var(--surface); }
.people-pick button[aria-pressed="true"] { border-color: var(--brand); background: var(--surface); }
.people-pick .name { font-weight: 500; }
.person-panel { display: grid; gap: var(--space-2); align-content: start; min-width: 0; align-self: stretch; border-left: var(--border-width) solid var(--border); padding-left: var(--space-3); }
/* A line between the People buttons and the person's details (Trenton 2026-11-08); above them on a narrow screen. */
@media (max-width: 720px) { .person-panel { border-left: 0; padding-left: 0; border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); } }
.person-panel-head { font-weight: 500; }
.record-part + .record-part { border-top: var(--border-width) solid var(--border); padding-top: var(--space-2); }
.record-part h3 { font-size: var(--size-14); }
.record-part dl.facts select { width: auto; min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
.record-part dl.facts select { max-width: 100%; }

/* The Trespassed chip (Trenton 2026-10-19): neutral ink with an icon and the word; details on hover or focus. */
.badge.flag-trespass { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--text); border-color: var(--text); font-weight: 600; cursor: help; }
.badge.flag-trespass .icon { width: 12px; height: 12px; }
/* A flag with a description (Trenton 2026-10-20) shows it the same way. */
.badge.flag[data-tip] { position: relative; cursor: help; }
.badge.flag[data-tip]:hover::after, .badge.flag[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 1300; left: 0; top: calc(100% + 6px); min-width: 220px; max-width: 360px; white-space: pre-line;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--text); color: var(--surface); font: 400 var(--size-13)/1.4 var(--font-sans); box-shadow: var(--shadow-overlay); }

/* The person page (Trenton 2026-10-19): a header, then tabs, each one tile of ruled sections in one column. */
.person-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.person-header .avatar { width: 72px; height: 72px; }
.person-header .view-title { margin: 0 0 var(--space-1); }
.person-header #person-flag-badges { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.person-header-actions { align-self: start; }
@media (max-width: 720px) { .person-header { grid-template-columns: auto minmax(0, 1fr); } .person-header-actions { grid-column: 1 / -1; } }
.person-tabs { border-bottom: var(--border-width) solid var(--border); flex-wrap: wrap; }
.person-tab { max-width: var(--page-width); display: grid; align-content: start; }
.person-tab > .side-section { padding: var(--space-2) 0; }
.person-tab > .side-section:first-child { padding-top: 0; }
.person-tab > .side-section + .side-section { border-top: var(--border-width) solid var(--border); }
.person-tab > .side-section h2 { font-size: var(--size-16); margin: 0; }
.person-tab > .side-section > .section-head { margin-bottom: 0; min-height: 28px; }
.person-tab > .side-section > .section-head + * { margin-top: var(--space-1); }
.person-tab > .side-section > h2 { margin-bottom: var(--space-1); }
.person-header, .person-tabs { max-width: var(--page-width); }
/* Settings and detail pages (Alcove.shell({ width: 'standard' })): every tile the standard width, left-aligned. */
.app-main.view-standard > :not(.srp-area), .app-main.view-standard .stack > .card, .app-main.view-standard .stack > section { max-width: var(--page-width); }
/* Incident board (Trenton 2026-10-20): status as plain text; closed and canceled rows subdued. */
.table tr.row-closed > td { color: var(--text-muted); background: var(--surface); } /* the hidden-note gray (2026-10-20) */
.table tr.row-closed a.rowlink { color: var(--text-muted); font-weight: 400; }
.table tr.row-closed .chip, .table tr.row-closed .badge { filter: saturate(.55); }
/* A dialog's Delete sits at the left of its buttons (Trenton 2026-10-20). */
.dialog-actions .dialog-remove { margin-right: auto; }
.btn-danger-text { color: var(--danger); }
/* Trenton 2026-10-20: text under a section's title sits a few pixels in from the title. */
.side-section > :not(.section-head):not(hr):not(h2):not(.no-indent), .record-part > :not(.section-head) { margin-left: 6px; }
.record-part .about-facts { margin-top: var(--space-1); }
/* Person page (Trenton 2026-10-20): what a detail was before, under it; three fields in a row (City, State, ZIP). */
.hist { margin-top: 2px; }
.hist-line { font-size: var(--size-12); color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.hist-was { text-decoration: line-through; text-decoration-color: var(--pebble); }
.hist-more > summary { font-size: var(--size-12); color: var(--text-muted); cursor: pointer; }
.btn-tiny { min-height: 22px; width: 22px; height: 22px; padding: 0; }
.btn-tiny svg { width: 12px; height: 12px; }
.three-col { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 700px) { .three-col { grid-template-columns: 1fr; } }
.srp-tick { white-space: nowrap; margin: 0 var(--space-2); }
/* Where a notification rule applies (Trenton 2026-10-20): a drop-down of checkboxes. */
.place-pick { position: relative; display: inline-block; }
.place-pick > summary { list-style: none; max-width: 260px; }
.place-pick > summary::-webkit-details-marker { display: none; }
.place-pick > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-menu { position: absolute; z-index: 30; right: 0; min-width: 260px; max-height: 320px; overflow: auto; margin-top: 4px; padding: var(--space-2) var(--space-3);
  background: var(--surface-raised); border: var(--border-width) solid var(--border); border-radius: 6px; box-shadow: var(--shadow-overlay); }
/* The chain of custody window (Trenton 2026-10-21): who has it now, a line, then where it is going. */
#cu-now { margin-bottom: var(--space-2); }
.custody-going { font-size: var(--size-14); margin: var(--space-2) 0 var(--space-2); }
/* A map inside a scrolling page (the incident page): the wheel zooms only with Shift held (Trenton 2026-10-21). */
.map-wheel-hint { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, #000 40%, transparent); color: #fff; font-size: var(--size-16); font-weight: 500; }
.map-wheel-hint[hidden] { display: none; }
#cal-building-type { width: auto; } /* the whole kind's name shows (2026-10-21) */

/* Incident Reports (Trenton 2026-10-22): a compact form, three fields to a row; persons with their procedures on one line each */
.report-form .field { margin-bottom: var(--space-2); }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-3); }
.report-grid input, .report-grid select { width: 100%; }
@media (max-width: 700px) { .report-grid { grid-template-columns: 1fr; } }
.report-ticks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.report-other { display: flex; align-items: center; gap: var(--space-2); font-size: var(--size-14); }
.report-other input { width: 220px; }
.report-persons { display: flex; flex-direction: column; gap: var(--space-1); }
.report-person { border: var(--border-width) solid var(--border); border-radius: var(--radius-control); padding: var(--space-1) var(--space-2); }
.report-person > .tight-row { justify-content: flex-start; }
.report-person .grow { flex: 1; }
.report-proc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 2px 0 2px var(--space-4); }
.report-proc select, .report-proc input { width: auto; }
.report-proc select { min-width: 180px; }
.report-search { margin-top: var(--space-2); max-width: 420px; }
.report-search input { width: 100%; }
.report-results:empty { display: none; }
#rp-narrative { width: 100%; }
dl.report-facts { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
@media (max-width: 700px) { dl.report-facts { grid-template-columns: max-content minmax(0, 1fr); } }
#rp-incident .btn { vertical-align: middle; }
.report-incident { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
dl.report-facts .report-facts-rule { grid-column: 1 / -1; width: 100%; }
@media (max-width: 700px) { dl.report-facts .report-spacer { display: none; } }
.report-read h2 { font-size: var(--size-15, 15px); margin: var(--space-3) 0 var(--space-2); }
.report-narrative { white-space: pre-wrap; line-height: 1.5; }
.report-signed { border-top: var(--border-width) solid var(--border); padding-top: var(--space-2); margin-top: var(--space-4); }
@media print {
  .report-read .print-head { display: flex; }
  dl.report-facts { grid-template-columns: max-content 1fr max-content 1fr !important; }
  .report-persons-table { font-size: 8.5pt; }
  .report-persons-table th, .report-persons-table td { padding: 2px 6px; }
}

/* User page (Trenton 2026-10-22): account chip left of the email; photo at the tile's top right with "Edit photo" under it. */
.user-subline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.profile-card { display: flex; gap: var(--space-4); align-items: flex-start; }
.profile-card .profile-main { flex: 1; min-width: 0; }
.profile-card .profile-photo { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: none; }
.avatar.profile-large { width: 120px; height: 120px; font-size: var(--size-24); }
.profile-photo .link-button { font-weight: 400; font-size: var(--size-13); text-decoration: underline; }
@media (max-width: 560px) { .avatar.profile-large { width: 80px; height: 80px; } }

/* Incident reports board (Trenton 2026-10-22): the search box and Advanced search at the right of the tabs. */
.reports-search { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; flex: 1 1 320px; max-width: 520px; }
.reports-search input { flex: 1; min-width: 0; }
#reports-search-summary:not(:empty) { margin-bottom: var(--space-2); }
#reports-table td:nth-child(1), #reports-table td:nth-child(2) { white-space: nowrap; }

/* Second review of 2026-10-22: room between a window's title and its first fields; the row button that opens a drawer. */
.dialog-spaced { padding-top: var(--space-3); }
.table td.row-actions, .table th.row-actions { width: 1%; white-space: nowrap; text-align: right; }
/* In a table they stay table cells (Trenton 2026-10-22: as flex boxes the header cell came out boxed, unshaded). */
.table td.row-actions, .table th.row-actions { display: table-cell; }
.table td.row-actions > * + * { margin-left: 2px; }
.report-title { margin-bottom: var(--space-4); }
.report-form h1.report-title { margin-top: 0; }
.report-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.custody-row .custody-edit { align-self: start; }
.report-items { display: grid; gap: var(--space-2); }
.report-item { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 14rem) auto; gap: var(--space-2); align-items: center; }
.report-item:has(> .mono) { grid-template-columns: auto minmax(0, 1fr) auto 1fr auto; }
@media (max-width: 700px) { .report-item, .report-item:has(> .mono) { grid-template-columns: 1fr auto; } .report-item > :not(.btn) { grid-column: 1; } }
.report-photos { align-items: center; }
.report-photo { position: relative; }
.report-photo > .btn { position: absolute; top: 2px; right: 2px; background: var(--surface); }
.report-photos > label.btn { gap: var(--space-2); }
.graph-zoom { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; display: flex; align-items: center; gap: var(--space-1);
  background: var(--surface-raised); border: var(--border-width, 1px) solid var(--border); border-radius: var(--radius-card); padding: 2px var(--space-1); }
.graph-zoom input[type=range] { width: 120px; accent-color: var(--brand); }
.graph-result-recent { display: block; }
/* Person page aliases (Trenton 2026-10-22): the alias, then its dates to the right. */
.alias-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
/* Person Edit window (Trenton 2026-10-22): room under the title, a rule before Kind, room under Kind. */
.dialog-body .person-form { margin-top: var(--space-3); }
.form-rule { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-2) 0 var(--space-4); }
.pf-kind-row { margin-bottom: var(--space-3); }
/* Unit page (Trenton 2026-10-22): details half the width, the photo tile beside it. */
.unit-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }
.unit-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.unit-photo-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.unit-photo { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-control); border: var(--border-width) solid var(--border); background: var(--surface); }
.unit-photo.empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.unit-photo.empty .icon { width: 40px; height: 40px; }
@media (max-width: 800px) { .unit-top { grid-template-columns: 1fr; } }
/* The incident page's map (Trenton 2026-10-22): the rest of the organization's buildings and incidents, quieter. */
.map-building.other, .map-incident.other { opacity: .78; }
.map-incident.other { cursor: pointer; }
.form-subhead { font: 600 var(--size-14)/1.3 var(--font-sans); margin: 0 0 var(--space-2); }
/* Vehicle page header (Trenton 2026-10-22: like the person page). */
.vehicle-header .vehicle-photo { width: 96px; height: 72px; }
/* The PSV unit, at the bottom right of the New incident window (Trenton 2026-10-22). */
.psv-row { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; }
.psv-row[hidden] { display: none; }
.psv-row label { font-weight: 500; white-space: nowrap; }
/* Incident report form (Trenton 2026-10-22): the reporter as a line, item rows with a thumbnail, plain names, small add-a-person fields. */
.report-reporter { margin: 0; align-self: center; }
.report-reporter .label { font-weight: 600; }
.report-grid-people { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.report-items { display: grid; gap: var(--space-2); }
.report-item-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.report-item-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-control); border: var(--border-width) solid var(--border); display: block; }
.report-item-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--surface); opacity: .7; }
.report-item-thumb.empty .icon { width: 20px; height: 20px; }
.report-person-name { font-weight: 400; }
.link-button.plain { font-weight: 400; }
.input-small, select.input-small { min-height: 30px; padding: 2px 8px; font-size: var(--size-13); width: auto; }
.report-add-person { justify-content: flex-start; }
.report-add-person #rp-person-search { max-width: 22rem; }
/* Modules and prohibited tags (Trenton 2026-10-22). */
.badge.badge-ok { border-color: var(--brand); color: var(--brand); }
.badge.badge-warn { border-color: var(--p2, #b45309); color: var(--text); }

/* Clean up → Alert subscribers: one line per building, each with its own turn-off bell (Trenton 2026-10-23). */
.cleanup-alerts { display: flex; flex-direction: column; gap: 2px; }
.cleanup-alert { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Incident Persons: the part drop-down, and "Incident report: Witness" right-aligned under it (Trenton 2026-10-23). */
.person-part { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* Idle sign-out notice (Trenton 2026-10-23): bottom centre, above everything. */
.idle-notice { position: fixed; left: 50%; bottom: var(--space-6, 24px); transform: translateX(-50%); z-index: 3000; max-width: min(480px, calc(100vw - 32px));
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  padding: var(--space-4, 16px); display: flex; gap: var(--space-3, 12px); align-items: center; }
.idle-notice p { margin: 0; }

/* Aphys → Error log: likely causes inside the row (Trenton 2026-10-23). */
.error-causes { margin: 0; padding-left: 1.1em; font-size: var(--size-13); }
.error-causes li + li { margin-top: 2px; }


/* ---- Mobile View (Trenton 2026-10-23): units' phone and tablet screen; js/mobile.js ------------------------
   The shell's header, menu and footer are out of sight (their workings still run). Big touch targets (48 px),
   the status banner in the unit status colors, the map filling what is left. Tablet landscape: map left, rows right. */
.app.mobile-mode { display: block; min-height: 100dvh; }
.app.mobile-mode > .app-header, .app.mobile-mode > .app-nav, .app.mobile-mode > .nav-edge, .app.mobile-mode > .app-footer, .app.mobile-mode .srp-area { display: none; }
.app.mobile-mode > .app-main { padding: 0; max-width: none; }
.mv { display: flex; flex-direction: column; height: 100dvh; background: var(--bg, var(--surface)); }
.mv-top { display: flex; align-items: stretch; gap: 0; padding-top: env(safe-area-inset-top); background: var(--unit-oos); }
.mv-status { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); border: 0; text-align: left; cursor: pointer;
  font: 700 var(--size-18, 18px)/1.2 var(--font-sans); background: var(--unit-oos); color: var(--unit-oos-on); }
.mv-status[data-look="available"] { background: var(--unit-available); color: var(--unit-available-on); }
.mv-status[data-look="active"] { background: var(--unit-active); color: var(--unit-active-on); }
.mv-status:disabled { cursor: default; }
.mv-status-unit { font-size: var(--size-14, 14px); opacity: .9; }
.mv-status-name { flex: 1; }
.mv-top:has(.mv-status[data-look="available"]) { background: var(--unit-available); }
.mv-top:has(.mv-status[data-look="active"]) { background: var(--unit-active); }
.mv-icon { width: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.mv-top .mv-icon { color: #fff; }
.mv-top:has(.mv-status[data-look="available"]) .mv-icon, .mv-top:has(.mv-status[data-look="active"]) .mv-icon { color: inherit; }
.mv-icon .icon { width: 24px; height: 24px; }
.mv-icon.on { box-shadow: inset 0 -3px 0 currentColor; }
.mv-assigned { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.mv-assigned[hidden] { display: none; }
.mv-assigned-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: var(--text); text-align: left; padding: 4px 0; cursor: pointer; }
.mv-assigned-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mv-assigned-actions, .mv-incident-actions, .mv-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mv-srp .srp-banner { margin: 0; border-radius: 0; }
.mv-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mv-map-wrap { position: relative; flex: 1 1 55%; min-height: 180px; }
.mv-map { position: absolute; inset: 0; }
.mv-chips { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); z-index: 500; display: flex; gap: 6px; overflow-x: auto; }
.mv-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-raised); color: var(--text-muted); font: 600 var(--size-13)/1 var(--font-sans); white-space: nowrap; box-shadow: 0 1px 3px rgb(0 0 0 / .2); cursor: pointer; }
.mv-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mv-chip .icon { width: 16px; height: 16px; }
/* Directions on the map (Trenton 2026-10-24): the next turn, then what's left and End. */
.mv-nav { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-4); z-index: 500; padding: var(--space-2) var(--space-3);
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.mv-nav[hidden] { display: none; }
.mv-nav p { margin: 0; }
.mv-nav-turn { display: flex; align-items: center; gap: var(--space-3); }
.mv-nav-turn > .icon { width: 28px; height: 28px; color: var(--brand); flex: none; }
.mv-nav-next { font: 700 var(--size-16, 16px)/1.3 var(--font-sans); }
.mv-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.mv-nav-foot .btn, .mv-nav > .btn { min-height: 40px; }
.mv-bottom { flex: 1 1 45%; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--surface); }
.mv-tabs { display: flex; border-bottom: 1px solid var(--border); }
.mv-tabs button { flex: 1; min-height: 44px; border: 0; background: none; color: var(--text-muted); font: 600 var(--size-14, 14px)/1 var(--font-sans); cursor: pointer; }
.mv-tabs button.on { color: var(--text); box-shadow: inset 0 -3px 0 var(--brand); }
.mv-rows-wrap { flex: 1; min-height: 0; display: flex; }
.mv-rows { flex: 1; min-width: 0; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.mv-side { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-left: 1px solid var(--border);
  background: var(--surface-raised); color: var(--brand); cursor: pointer; }
.mv-side-text { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 var(--size-13)/1 var(--font-sans); letter-spacing: .02em; }
.mv-row { border-bottom: 1px solid var(--border); }
.mv-row-main { width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.mv-row-main.static { cursor: default; }
.mv-row.open { background: var(--surface-raised); }
.mv-row-actions { padding: 0 var(--space-3) var(--space-3); }
.mv-row-actions .btn, .mv-assigned-actions .btn, .mv-incident-actions .btn { min-height: 44px; }
.mv-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mv-row-text strong, .mv-row-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-unit-no { min-width: 3ch; font-weight: 700; }
.mv-empty { padding: var(--space-4); }
.mv-shade { position: fixed; inset: 0; z-index: 2000; background: rgb(0 0 0 / .45); }
.mv-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; max-height: 85dvh; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--text);
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgb(0 0 0 / .3); padding-bottom: env(safe-area-inset-bottom); }
.mv-sheet.big { top: max(env(safe-area-inset-top), 24px); max-height: none; }
.mv-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.mv-sheet-head h2 { margin: 0; font-size: var(--size-18, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-sheet-body { overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); }
.mv-sheet-list { display: flex; flex-direction: column; gap: var(--space-2); }
.mv-status-choice { min-height: 56px; border-radius: 10px; border: 2px solid transparent; font: 700 var(--size-16, 16px)/1 var(--font-sans); cursor: pointer;
  background: var(--unit-oos); color: var(--unit-oos-on); }
.mv-status-choice[data-look="available"] { background: var(--unit-available); color: var(--unit-available-on); }
.mv-status-choice[data-look="active"] { background: var(--unit-active); color: var(--unit-active-on); }
.mv-status-choice.current { border-color: var(--text); outline: 2px solid var(--surface-raised); outline-offset: -4px; }
.mv-big-tabs { display: flex; margin-bottom: var(--space-3); }
.mv-big-tabs .btn { flex: 1; min-height: 44px; }
.mv-big-body h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--size-14, 14px); }
.mv-incident-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.mv-incident-actions { margin: var(--space-3) 0; }
.mv-timeline h3 { font-size: var(--size-14, 14px); margin: var(--space-3) 0 var(--space-1); }
.mv-timeline p { margin: 0 0 var(--space-1); }
.mv-blocked { padding: var(--space-5) var(--space-4); }
/* A tablet held sideways: the map on the left, the rows on the right. */
@media (min-width: 900px) and (orientation: landscape) {
  .mv-body { flex-direction: row; }
  .mv-map-wrap { flex: 1 1 62%; }
  .mv-bottom { flex: 0 0 38%; border-top: 0; border-left: 1px solid var(--border); }
  .mv-sheet { left: auto; right: var(--space-4); bottom: var(--space-4); width: min(560px, 50vw); border-radius: 14px; }
  .mv-sheet.big { top: var(--space-6); }
}

/* My account → Text alerts (Trenton 2026-10-25): the opt-in box shown to the phone companies. */
.sms-consent { border: 1.5px solid var(--border-strong); border-radius: var(--radius-card); padding: var(--space-3); margin: var(--space-3) 0; background: var(--surface-raised); max-width: 72ch; }
.sms-consent p { margin: var(--space-2) 0 0; }
.sms-consent-tick { display: flex; gap: var(--space-2); align-items: center; font-size: var(--size-16); cursor: pointer; }
.sms-consent-tick input { width: 22px; height: 22px; flex: none; margin: 0; }
.plain-list { list-style: none; padding: 0; margin: var(--space-1) 0; display: grid; gap: var(--space-1); max-width: 72ch; }

/* My account → Notifications: Install Alcove on this phone (2026-10-26, docs/plans/PWA_PUSH.md). */
.install-steps { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); max-width: 72ch; counter-reset: step; }
.install-steps li { display: flex; gap: var(--space-3); align-items: center; counter-increment: step; }
.install-steps li::before { content: counter(step); flex: none; width: 24px; font-weight: 500; color: var(--text-muted); text-align: right; }
.install-pic { flex: none; width: 112px; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--brand); font-size: var(--size-12); }
.install-pic .icon { width: 26px; height: 26px; }
.install-pic img { width: 44px; height: 44px; border-radius: 10px; }

/* ---- Tips: the public "Share a concern" page (2026-10-30) ---- */
.tip-body { background: var(--surface); }
.tip-inline body { min-height: 0; } /* inside a website: as tall as the form, so the frame fits it */
.tip-page { max-width: 640px; margin: 0 auto; padding: var(--space-4); display: grid; gap: var(--space-4); }
.tip-safety { border: 1px solid var(--border); border-left: 4px solid var(--danger); background: var(--surface-raised); border-radius: var(--radius-md, 8px); padding: var(--space-3) var(--space-4); }
.tip-safety p { margin: 0.25em 0; }
.tip-safety a { font-weight: 600; }
.tip-crisis { border-left-width: 8px; }
.tip-head { display: flex; align-items: center; gap: var(--space-3); }
.tip-head img { height: 48px; width: auto; }
.tip-head h1 { margin: 0; }
.tip-org { margin: 0; color: var(--text-muted); }
.tip-form .req { font-weight: 400; font-size: var(--size-12); color: var(--text-muted); }
.tip-form .hint-inline { font-weight: 400; color: var(--text-muted); }
.tip-who { border: 0; padding: 0; margin: 0; }
.tip-who legend { font-weight: 600; margin-bottom: var(--space-2); }
.tip-who .check { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-1) 0; }
.tip-code { font-size: 1.4em; letter-spacing: 0.06em; }
.tip-follow summary { cursor: pointer; font-weight: 600; }
.tip-thread { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.tip-thread li { border: 1px solid var(--border); border-radius: var(--radius-md, 8px); padding: var(--space-2) var(--space-3); }
.tip-thread li p { margin: 0.25em 0 0; white-space: pre-wrap; }
.tip-thread .from-staff { background: var(--table-head); }
.tip-foot { font-size: var(--size-12); color: var(--text-muted); text-align: center; }

/* Tips: the staff page */
#tips-table .chip, #tips-table .badge, .tip-head-line .chip, .tip-head-line .badge { margin-left: var(--space-2); }
.tip-details { white-space: pre-wrap; }
.tip-photos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tip-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md, 8px); border: 1px solid var(--border); }
.tip-thread .tip-note { background: var(--row-hover); }
.tip-thread .tip-system p { color: var(--text-muted); }
.tip-widget-code { white-space: pre-wrap; word-break: break-all; background: var(--table-head); padding: var(--space-2); border-radius: var(--radius-md, 8px); }
/* Tip Managers (2026-11-07): alert type toggles (off = struck and muted), tier gaps, the widget color swatch. */
.tip-alert-types { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.tip-alert-type { color: var(--text-muted); opacity: 0.45; position: relative; }
.tip-alert-type.on { color: var(--brand); opacity: 1; }
.tip-alert-type:not(.on)::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; border-top: 2px solid currentColor; transform: rotate(-35deg); }
.tip-priority-chip { cursor: pointer; font-variant-numeric: tabular-nums; }
.tip-priority h3 { margin: var(--space-2) 0 var(--space-1); }
.tip-tier-gap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.tip-tier-gap hr { flex-basis: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); }
.tip-tier-gap label { display: inline; margin: 0; font-weight: normal; }
.tip-tier-gap select { width: auto; min-width: 0; }
.tip-manager-note { font-family: var(--font-sans, inherit); }
.tip-color-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; }
#tip-widget-color { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; background: none; }

/* Menu icon colors (Preferences, 2026-10-30; off by default): one color per kind of page, from the status palette. */
.app-nav.nav-colored a[data-tone="alert"] .icon { color: var(--p1); }
.app-nav.nav-colored a[data-tone="time"] .icon { color: var(--srp-secure); }
.app-nav.nav-colored a[data-tone="field"] .icon { color: var(--unit-available); }
.app-nav.nav-colored a[data-tone="people"] .icon { color: var(--trail-1); }
.app-nav.nav-colored a[data-tone="admin"] .icon { color: var(--trail-2); }
.app-nav.nav-colored a[data-tone="platform"] .icon { color: var(--trail-3); }
.app-nav.nav-colored a[data-tone="home"] .icon { color: var(--brand); }

/* A list of names and what they are, in plain weight (report side panel, 2026-10-30). */
dl.plain-facts dt { font-weight: 400; color: var(--text); }

/* Map: a person's photo at the left of their card (2026-10-30). */
.map-popup.with-photo { display: flex; gap: var(--space-2); align-items: flex-start; }
.map-popup-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); }

/* Custom alert types (2026-10-30): black and white, beside the five SRP colors. */
.c-srp-black { --c: #111418; --c-on: #FFFFFF; }
.c-srp-white { --c: #FFFFFF; --c-on: #1C2230; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Alert type icon choice (2026-10-30) */
.icon-pick { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.icon-choice { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); cursor: pointer; }
.icon-choice input { margin: 0; }

/* Printed documents (2026-10-30): the organization's header and footer on every page, the watermark across it. */
@media print {
  .doc-header { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 12px; align-items: center; font-size: 8.5pt; border-bottom: 1px solid #000; padding-bottom: 3px; background: #fff; }
  .doc-header img { height: 28px; width: auto; }
  .doc-footer { position: fixed; bottom: 0; left: 0; right: 0; font-size: 8pt; border-top: 1px solid #000; padding-top: 3px; background: #fff; }
  .doc-footer .doc-number { font-size: 7.5pt; }
  body.doc-has-header .app-main { padding-top: 46px !important; }
  body.doc-has-footer .app-main { padding-bottom: 40px !important; }
  .doc-watermark { position: fixed; inset: 0; z-index: 999; pointer-events: none; background-repeat: repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-rich p, .doc-rich div { margin: 0; }
}

/* A small rich-text box (document header and footer, 2026-10-30). */
.rich-tools { display: flex; gap: 2px; margin-bottom: 2px; }
.rich-edit { min-height: 4em; border: 1px solid var(--border-strong); border-radius: var(--radius-md, 8px); padding: var(--space-2); background: var(--surface-raised); }
.rich-edit:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Tips (review 2026-11-08): each part its own tile; the tip's words in a box right under Received; space under
   "Include photos" in the Export window. */
.tips-tiles > .card .section-head { margin-bottom: var(--space-2); }
.tips-tiles > .card h2 { margin: 0; }
.tips-tiles > .card > h2 + p { margin-top: var(--space-1); }
.tip-details { border: var(--border-width) solid var(--border); border-radius: var(--radius-md, 8px); background: var(--surface); padding: var(--space-2) var(--space-3); margin: var(--space-1) 0 var(--space-3); }
.tx-photos-line { margin-bottom: var(--space-3); }