@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Casebound app — civic-forensic light system (see DESIGN.md).
   Paper chrome; dark stays only on content that earns it: map tiles, footage
   frames, and evidence surfaces. Same token names as before, new values. */
:root {
  --bg: #F6F4EF;            /* paper */
  --panel: #FFFFFF;         /* card */
  --panel-2: #F1EEE6;       /* inset rows / inputs */
  --border: #D9D3C7;
  --text: #101A26;          /* ink */
  --muted: #66707C;
  --navy: #142838;          /* institutional navy — police-side identity */
  --accent: #A96F0E;        /* amber ink: links, focus, active tabs */
  --accent-2: #D99A2B;      /* amber: primary actions (ink text on top) */
  --granted: #2E7D4F;       /* a grant IS consent — green */
  --hit: #A96F0E;           /* matches / sightings */
  --warn: #A96F0E;
  --available: #6b7683;
  --danger: #B3402F;        /* brick */
  --ok: #2E7D4F;
  --radius: 8px;
  --shadow: 0 1px 0 rgba(16, 26, 38, 0.05), 0 1px 3px rgba(16, 26, 38, 0.07);
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

h1, h2, h3 { margin: 0; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 12px; }
h3 { font-size: 15px; margin-bottom: 8px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 19px; font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; }
.brand .sub { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.actor { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.actor label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.actor input { width: 180px; }

.notice {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; padding: 8px 20px;
}
.notice strong { color: var(--text); }

.layout {
  display: grid;
  grid-template-columns: 300px 1fr 360px;
  gap: 14px; padding: 14px; align-items: start;
  height: calc(100vh - 108px);
}
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; height: 100%; }
.col-map { min-height: 0; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.map-panel { display: flex; flex-direction: column; height: 100%; padding: 12px; }

.form { display: flex; flex-direction: column; gap: 10px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
input, select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="range"] { padding: 0; accent-color: var(--accent); border: none; background: none; }
input[type="datetime-local"], input[type="number"] { font-variant-numeric: tabular-nums; }

.btn:focus-visible, .tab:focus-visible, .mode-tab:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

.btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #1A1200; }
.btn.primary:hover { background: #C98D22; border-color: #C98D22; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); width: 100%; }
.btn.danger:hover { background: rgba(179, 64, 47, 0.08); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.case-list li {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer;
  background: var(--panel-2); transition: border-color 0.15s;
}
.case-list li:hover { border-color: var(--accent); }
.case-list li.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.case-list .cid { font-weight: 600; }
.case-list .meta { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.pill { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pill.open { background: rgba(46, 125, 79, 0.12); color: var(--ok); }
.pill.closed { background: rgba(102, 112, 124, 0.12); color: var(--muted); }
.pill.warn { background: rgba(169, 111, 14, 0.12); color: var(--warn); }

.extend-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.extend-row.expired { border-top-color: rgba(169, 111, 14, 0.4); }
.extend-row .expired-note { flex-basis: 100%; color: var(--warn); font-size: 12px; }
.extend-row select { width: auto; }

.probe-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.probe-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 2px solid var(--warn); }

/* ---- case page ---- */
.case-page { padding: 18px 22px 40px; max-width: 1200px; margin: 0 auto; }
.cp-error { color: var(--danger); }
.cp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cp-title { display: flex; align-items: center; gap: 10px; }
.cp-title h1 { font-family: var(--sans); font-weight: 750; font-size: 25px; letter-spacing: -0.01em; margin: 0; }
.cp-auth { color: var(--muted); font-size: 13px; }
.cp-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cp-addphoto { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cp-addphoto input[type="text"] { width: auto; flex: 1; min-width: 140px; }
.cp-addphoto .file-btn { flex: none; }

.cp-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .cp-kpis { grid-template-columns: repeat(3, 1fr); } }
.cp-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.cp-kpi-n { font-family: var(--mono); font-size: 25px; font-weight: 400; font-variant-numeric: tabular-nums; }
.cp-kpi-n.blue { color: var(--accent); } .cp-kpi-n.warn { color: var(--warn); } .cp-kpi-n.amber { color: var(--hit); }
.cp-kpi-l { color: var(--muted); font-size: 12px; margin-top: 2px; }

.cp-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cp-grid { grid-template-columns: 1fr; } }
.cp-col { display: flex; flex-direction: column; gap: 16px; }
.cp-card h2 { margin-bottom: 10px; }
.cp-detail { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cp-detail:last-child { border-bottom: none; }
.cp-detail .k { color: var(--muted); min-width: 120px; }

.cp-refs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cp-refs figure { margin: 0; text-align: center; }
.cp-refs img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 2px solid var(--warn); display: block; }
.cp-refs figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; max-width: 96px; }
.cp-ref-none { color: var(--muted); font-size: 12px; align-self: center; }

.cp-map { height: 320px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
/* Full-size map: fill the viewport above everything else. `position` needs
   !important because Leaflet pins `position: relative` inline on the container. */
.cp-map.is-fullscreen { position: fixed !important; inset: 0; width: 100vw; height: 100vh; z-index: 4000; border-radius: 0; border: 0; }
body.cp-map-open { overflow: hidden; }

.cp-timeline { list-style: none; margin: 0; padding: 0; }
.cp-timeline li { display: flex; gap: 12px; padding: 2px 0; }
.cp-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-top: 5px; flex: none; position: relative; }
.cp-timeline li:not(:last-child) .cp-tl-dot::after { content: ''; position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 1px; height: 26px; background: var(--border); }
.cp-tl-open .cp-tl-dot, .cp-tl-grant .cp-tl-dot, .cp-tl-approve .cp-tl-dot { background: var(--ok); }
.cp-tl-search .cp-tl-dot, .cp-tl-request .cp-tl-dot, .cp-tl-canvass .cp-tl-dot { background: var(--accent); }
.cp-tl-match .cp-tl-dot, .cp-tl-probe .cp-tl-dot { background: var(--hit); }
.cp-tl-deny .cp-tl-dot, .cp-tl-close .cp-tl-dot, .cp-tl-purge .cp-tl-dot { background: var(--danger); }
.cp-tl-extend .cp-tl-dot { background: var(--warn); }
.cp-tl-text { font-size: 13px; }
.cp-tl-at { font-size: 11px; color: var(--muted); }
.cp-timeline li > div { padding-bottom: 8px; }

.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-req, .cp-sight, .cp-grant { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); font-size: 13px; }
.cp-sight .ts, .cp-grant .ts { color: var(--muted); font-size: 11.5px; }
/* An unconfirmed lead reads as provisional until a human confirms it. */
.cp-sight.is-lead { border-style: dashed; border-color: rgba(169, 111, 14, 0.5); }
.cp-sight-right { display: flex; align-items: center; gap: 8px; flex: none; }
/* Case-page canvass sits under the map; danger zone spans the page below the grid. */
.cp-canvass { margin-top: 10px; }
.cp-danger { margin-top: 16px; }

/* ---- cases hub ---- */
.cases-hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cases-hub-title { font-family: var(--sans); font-weight: 750; font-size: 25px; letter-spacing: -0.01em; margin: 0 0 4px; }
.big-btn { font-size: 15px; padding: 11px 20px; }
.review-pointer { border-left: 2px solid var(--accent); padding: 6px 0 6px 12px; margin: 0 0 12px; }

/* ---- modal / overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(16, 26, 38, 0.45); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(16,26,38,0.22); animation: modal-in 0.18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-family: var(--sans); font-weight: 750; font-size: 18px; margin: 0; text-transform: none; letter-spacing: -0.01em; color: var(--text); }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.icon-btn:hover { color: var(--text); }
.modal-body { padding: 8px 20px 4px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.step:last-of-type { border-bottom: none; }
.step-n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; }
.step-body { display: flex; flex-direction: column; gap: 8px; }
.step-body h3 { margin: 2px 0 2px; font-size: 15px; }
.nc-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-times label:last-child { grid-column: 1 / -1; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 18px; }
.modal-foot #nc-status { flex: 1; }

.dash-case { cursor: pointer; position: relative; }
.dash-case:hover { border-color: var(--accent); }
.dash-case .dash-open { display: block; color: var(--accent); font-size: 12px; font-weight: 600; margin-top: 4px; }

.map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); }
.legend i.mk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
i.mk.available { background: var(--available); }
i.mk.pending { background: transparent; border: 1.5px dashed var(--granted); }
i.mk.granted { background: var(--granted); }
i.mk.hit { background: var(--hit); }

.map-wrap { position: relative; flex: 1; min-height: 0; background: #111822; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#map { width: 100%; height: 100%; }
.map-hint { color: var(--muted); font-size: 11.5px; margin: 8px 2px 0; }

/* Leaflet, themed for the dark UI */
.leaflet-container { background: #111822; font-family: var(--sans); font-size: 12px; }
.leaflet-control-zoom a {
  background: var(--panel-2); color: var(--text); border-color: var(--border);
}
.leaflet-control-zoom a:hover { background: var(--panel); color: var(--accent); }
.leaflet-bar { border-color: var(--border); }
/* Case-map tool buttons (full-size + Google Maps) and the base-layer switcher.
   The `a.cp-map-tool` specificity + width/height:auto override Leaflet's default
   26px square `.leaflet-bar a` styling. */
.cp-map-tools { display: flex; flex-direction: column; }
.cp-map-tools a.cp-map-tool {
  display: block; width: auto; height: auto; padding: 5px 9px;
  background: var(--panel-2); color: var(--text); text-align: left;
  font: 600 12px var(--sans); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--border); line-height: 1.4;
}
.cp-map-tools a.cp-map-tool:last-child { border-bottom: 0; }
.cp-map-tools a.cp-map-tool:hover { background: var(--panel); color: var(--accent); }
/* Segmented base-layer switch: Dark · Satellite · Streets. */
.cp-layerswitch {
  display: flex; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
.cp-layerswitch .cp-layerbtn {
  padding: 5px 11px; background: transparent; color: var(--muted); border: 0;
  border-right: 1px solid var(--border); font: 600 12px var(--sans);
  cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.cp-layerswitch .cp-layerbtn:last-child { border-right: 0; }
.cp-layerswitch .cp-layerbtn:hover { color: var(--text); background: var(--panel); }
.cp-layerswitch .cp-layerbtn.active { background: var(--accent); color: #04121f; }
/* Per-camera detail modal (reuses .overlay/.modal). No raw sample photo is
   shown — a labelled placeholder stands in for the demo footage. */
.cam-modal { max-width: 460px; }
.cam-modal h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 6px; }
.cam-frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 120px; border-radius: 8px; border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, #0a0f16, #0a0f16 12px, #0d131b 12px, #0d131b 24px);
  margin: 10px 0; overflow: hidden;
}
.cam-frame-icon { font-size: 34px; color: var(--muted); opacity: 0.5; }
.cam-frame-tag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px;
  background: rgba(6, 9, 13, 0.85); color: var(--muted); font-size: 11px; line-height: 1.3;
}
.cam-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
/* New Case modal: description + attestation */
#newcase-form textarea { width: 100%; resize: vertical; margin-top: 6px; }
.nc-attest { background: rgba(169, 111, 14, 0.08); border-left: 2px solid var(--accent); padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); margin: 0 0 10px; }
/* Owner request context — what they're being asked to consent to */
.req-context { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 10px 12px; margin: 8px 0; }
.req-ctx-title { font-weight: 700; font-size: 14px; }
.req-ctx-meta { display: flex; gap: 8px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.ctx-chip { background: var(--accent-2); color: #1A1200; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.req-ctx-summary { font-size: 13px; color: var(--text); margin: 6px 0; }
.req-ctx-officer { font-size: 12px; color: var(--muted); margin-top: 4px; }
.req-attest { font-size: 12px; color: var(--ok); margin-top: 6px; }
.leaflet-control-attribution {
  background: rgba(13, 19, 27, 0.8); color: var(--muted); font-size: 10px;
}
.leaflet-control-attribution a { color: #6d87a8; }
.leaflet-control-scale-line {
  background: rgba(13, 19, 27, 0.7); color: #8fa3b8; border-color: #8fa3b8;
  font-variant-numeric: tabular-nums;
}
.leaflet-tooltip.cam-tooltip {
  background: #0d131b; color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; box-shadow: var(--shadow); font-size: 12px; padding: 5px 9px;
  white-space: nowrap;
}
.leaflet-tooltip.cam-tooltip::before { display: none; }
.leaflet-interactive { cursor: pointer; }

/* movement trail */
.trail-pin {
  background: var(--warn); color: #1a1200; border: 2px solid #0d131b; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 1px var(--warn);
}
.trail-summary { color: var(--warn); font-size: 12.5px; margin: 8px 2px 0; }

.canvass-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.canvass-bar > div { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.canvass-bar select { width: auto; min-width: 96px; }

.cam-pulse { pointer-events: none; }
.cam-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #f0a53d; animation: cam-pulse 1.8s ease-out infinite;
}
@keyframes cam-pulse {
  0% { transform: scale(0.55); opacity: 0.8; }
  75% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cam-pulse::after { animation: none; opacity: 0.35; }
}

.case-summary { font-size: 13px; line-height: 1.5; }
.case-summary.muted { color: var(--muted); }
.case-summary .k { color: var(--muted); }
.case-summary b { color: var(--text); }

.tabs-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tab {
  background: none; border: none; color: var(--muted); padding: 8px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-body { overflow-y: auto; }

/* Synthetic demo path is optional scaffolding — collapsed so the real Footage
   Review path is the obvious one. */
.demo-tools { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 0 12px; }
.demo-tools > summary { cursor: pointer; padding: 10px 2px; font-weight: 600; font-size: 13px; color: var(--muted); user-select: none; }
.demo-tools > summary:hover { color: var(--text); }
.demo-tools[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.demo-tools > *:last-child { margin-bottom: 12px; }
.dev-block { background: rgba(169, 111, 14, 0.06); border: 1px dashed rgba(169, 111, 14, 0.4); border-radius: 8px; padding: 10px; }
.dev-head { font-weight: 700; font-size: 13px; }
.badge { background: var(--hit); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; font-weight: 800; }
.row { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.results, .grants, .audit { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.results li {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel-2);
}
.results li:hover { border-color: var(--hit); }
.results .cam { font-weight: 600; }
.results .ts { color: var(--muted); font-size: 11.5px; }
.score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hit); }
.grants li, .audit li { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); font-size: 12.5px; }
.audit li .a { font-weight: 700; }
.audit li .d { font-family: var(--mono); color: var(--muted); font-size: 10.5px; margin-top: 2px; word-break: break-word; }
.audit .a.search { color: var(--accent); }
.audit .a.ingest_face { color: var(--hit); }
.audit .a.close_case, .audit .a.purge_case { color: var(--danger); }
.audit .a.open_case, .audit .a.grant_access { color: var(--ok); }

.danger-panel { border-color: rgba(229, 83, 75, 0.4); }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow); z-index: 1000; font-size: 13px;
  animation: toast-in 0.22s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast.err { border-color: var(--danger); }
.toast.ok { border-color: var(--ok); }

.empty { color: var(--muted); font-size: 12.5px; padding: 8px 0; }

/* ---- mode tabs ---- */
.mode-tabs { display: flex; align-items: center; gap: 6px; padding: 8px 20px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.mode-tab {
  background: none; border: none; color: var(--muted); padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mode-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.mode-note {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2);
}
.mode-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.mode-note[data-state="idle"]::before { background: var(--available); }
.mode-note[data-state="loading"]::before { animation: status-blink 1.2s ease-in-out infinite; }
.mode-note[data-state="ready"]::before { background: var(--ok); }
.mode-note[data-state="error"]::before { background: var(--danger); }
@keyframes status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .mode-note[data-state="loading"]::before { animation: none; } }

.mode-panel { padding: 14px; }
.mode-panel > .notice { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }

.notice-warn {
  background: rgba(169, 111, 14, 0.07);
  border-color: rgba(169, 111, 14, 0.45) !important;
}
.notice-warn strong { color: var(--warn); }
.notice-warn code { font-family: var(--mono); font-size: 11.5px; color: var(--text); }

/* ---- footage review ---- */
.probe-state {
  margin: -6px 0 14px; font-size: 12.5px; color: var(--muted);
  border-left: 2px solid var(--border); padding-left: 12px;
}
.probe-state.has-probe { color: var(--warn); border-left-color: var(--warn); }
.k-match { color: var(--warn); }
.k-by { color: var(--muted); }
.det-row { cursor: pointer; }
.det-row:hover { border-color: var(--warn); }
.det-row.is-match { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.det-row.is-match .cam { color: var(--warn); }
.det-row.is-match .score { color: var(--warn); }
.k-contact { color: #1E7F88; }
.det-row.is-contact { border-color: #1E7F88; }
.det-row.is-contact .cam { color: #1E7F88; }
.review-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px;
}
.review-bar select { width: auto; min-width: 170px; }
.review-bar #review-status { flex: 1 1 220px; }
label.inline.checkbox { flex-direction: row; align-items: center; gap: 6px; }
label.inline.checkbox input { width: auto; }
.review-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .review-grid { grid-template-columns: 1fr; } }
.review-stage { padding: 12px; }
.cctv-frame {
  position: relative; background: #05070a; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
}
.cctv-frame canvas { max-width: 100%; height: auto; display: block; }
/* burned-in DVR overlays */
.cctv-osd {
  position: absolute; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  color: #e8eef5; text-shadow: 0 0 4px #000, 0 1px 2px #000; pointer-events: none;
}
.cctv-osd-tl { top: 8px; left: 10px; }
.cctv-osd-tr { top: 8px; right: 10px; }
.cctv-osd-bl { bottom: 8px; left: 10px; color: #9fb3c8; }
.cctv-empty { position: absolute; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }

/* ---- live recognition ---- */
.session-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.session-bar .sep { color: var(--muted); font-size: 12px; }
.session-bar select { width: auto; min-width: 200px; }
.session-bar input { width: 200px; }
.session-bar #session-status { flex: 1 1 260px; min-width: 220px; }
.live-grid { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; height: calc(100vh - 220px); }
.video-panel { display: flex; flex-direction: column; height: 100%; }
.video-wrap { position: relative; flex: 1; min-height: 0; background: #05070a; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#webcam { max-width: 100%; max-height: 100%; display: block; }
#overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.video-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.video-empty p { margin: 0; }
.video-stat { position: absolute; left: 10px; bottom: 10px; background: rgba(5,7,10,0.8); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.video-controls { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
label.inline input[type="range"] { width: 160px; }

.work-panel { height: 100%; overflow-y: auto; }
.enroll { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.enroll-actions { display: flex; gap: 8px; }
.file-btn { text-align: center; cursor: pointer; flex: 1; }
.file-btn input { display: none; }
.watchlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.watchlist li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--panel-2); }
.watchlist img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--panel-2); }
.watchlist .wl-name { flex: 1; font-weight: 600; }
.watchlist .wl-rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.watchlist .wl-rm:hover { color: var(--danger); }
.match-log { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.match-log li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-left: 3px solid var(--ok); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }

@media (max-width: 1000px) {
  .live-grid { grid-template-columns: 1fr; height: auto; }
  .layout { grid-template-columns: 1fr; height: auto; }
  /* With an auto-height layout the flex chain that sizes the map collapses to
     0px; pin the map to the canvas aspect ratio instead. */
  .col { height: auto; }
  .map-panel { height: auto; }
  .map-wrap { flex: none; aspect-ratio: 10 / 7; }
}

/* ---- login ---- */
.login-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px; }
.login-head { text-align: center; margin-bottom: 28px; }
.login-head .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.login-head h1 { font-size: 28px; margin: 10px 0 4px; font-family: var(--serif); font-weight: 600; }
.login-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .login-grid { grid-template-columns: 1fr; } }
.role-desc { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: -4px 0 12px; }

/* ---- role chooser (first screen) ---- */
.role-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 720px) { .role-chooser { grid-template-columns: 1fr; } }
.role-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 18px; cursor: pointer; color: var(--text); font: inherit;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.role-card:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--panel-2); }
.role-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.role-title { font-family: var(--sans); font-weight: 750; font-size: 19px; letter-spacing: -0.01em; line-height: 1.2; }
.role-body { color: var(--muted); font-size: 13px; line-height: 1.55; flex: 1; margin: 2px 0 10px; }
.role-card .go { color: var(--accent); font-weight: 700; font-size: 14px; }
.chooser-foot { text-align: center; margin-top: 18px; color: var(--muted); font-size: 13px; }

.picker-panel, .join-panel { max-width: 460px; margin: 0 auto; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); font-weight: 600; }
.back-link:hover { color: var(--accent); }
.login-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.login-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--panel-2); cursor: pointer; transition: border-color .15s; }
.login-list li:hover { border-color: var(--accent); }
.login-list .go { color: var(--accent); font-weight: 600; font-size: 13px; }
.login-foot { text-align: center; margin-top: 24px; }
.login-foot + .login-foot { margin-top: 10px; }
.landing-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.landing-link:hover { text-decoration: underline; }

#google-signin { margin-bottom: 6px; }
#google-btn { display: flex; justify-content: center; margin: 2px 0 12px; }
.or-divider {
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
}
.or-divider::before, .or-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* ---- camera-owner onboarding ---- */
.join-bullets { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.join-bullets li {
  position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.join-bullets li::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-weight: 800; }
.join-bullets b { color: var(--text); }
.join-form { margin-top: 14px; }
#join-map { height: 200px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
.police-link { color: var(--muted); font-weight: 600; }
.police-link:hover { color: var(--accent); }
.police-panel { max-width: 420px; margin: 14px auto 0; }

/* ---- topbar identity ---- */
.whoami { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.role-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--navy); color: #F6F4EF; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.role-tag.owner { background: var(--ok); color: #fff; }
.small-btn { padding: 5px 10px; font-size: 12px; }
.points-badge { background: rgba(169,111,14,.10); color: var(--warn); border: 1px solid rgba(169,111,14,.4); padding: 3px 10px; border-radius: 999px; font-weight: 700; }

/* ---- dashboard ---- */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: border-color 0.15s;
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.kpi-box:hover { border-color: var(--accent); }
.kpi-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Non-navigating KPI tiles (informational — the cases list is right below). */
.kpi-box.static { cursor: default; }
.kpi-box.static:hover { border-color: var(--border); }
.kpi-n { font-family: var(--mono); font-size: 27px; font-weight: 400; font-variant-numeric: tabular-nums; }
.kpi-n.blue { color: var(--accent); } .kpi-n.warn { color: var(--warn); }
.kpi-l { color: var(--muted); font-size: 12px; margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-list li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); }

/* ---- requests ---- */
.req-grid, .points-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .req-grid, .points-grid { grid-template-columns: 1fr; } }
.portal-col { max-width: 760px; margin: 0 auto; }
.req-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.req-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--panel-2); }
.req-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.req-msg { margin: 6px 0; font-style: italic; color: var(--muted); }
.win-chip {
  display: inline-block; margin: 6px 0 2px; padding: 4px 10px;
  background: rgba(169, 111, 14, 0.08); border: 1px solid rgba(169, 111, 14, 0.35);
  border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.access-none { margin: 6px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.req-pill.private { background: rgba(102, 112, 124, 0.12); color: var(--muted); }
.req-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; }
.req-pill.pending { background: rgba(169,111,14,.12); color: var(--warn); }
.req-pill.approved { background: rgba(46,125,79,.12); color: var(--ok); }
.req-pill.denied { background: rgba(179,64,47,.12); color: var(--danger); }
.thread { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.msg { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); }
.msg.owner { border-left: 3px solid var(--ok); }
.msg.police { border-left: 3px solid var(--navy); }
.reply { display: flex; gap: 8px; margin-top: 8px; }
.reply input { flex: 1; }
.req-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn.approve { background: var(--ok); border-color: var(--ok); color: #fff; flex: 1; }
.btn.deny { background: transparent; border-color: var(--danger); color: var(--danger); flex: 1; }
textarea { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; font-family: inherit; resize: vertical; }
.tab-badge { background: var(--warn); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }

/* ---- points ---- */
.points-hero { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.points-hero #points-total { font-family: var(--mono); font-size: 38px; font-weight: 400; color: var(--warn); }
/* Points shop */
.shop-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shop-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.shop-item.locked { opacity: 0.6; }
.shop-icon { font-size: 26px; line-height: 1; flex: none; }
.shop-body { flex: 1; min-width: 0; }
.shop-name { font-weight: 700; }
.shop-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.shop-cost { font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
#points-ledger b.spent { color: var(--muted); }

.earn-chips { display: flex; gap: 10px; margin: 4px 0 14px; }
.earn-chip {
  flex: 1; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--panel-2); font-size: 12px; color: var(--muted); line-height: 1.45;
}
.earn-chip b { color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.earn-pts { font-family: var(--mono); font-size: 19px; font-weight: 400; color: var(--warn); font-variant-numeric: tabular-nums; }

.linklike {
  background: none; border: none; padding: 0; color: var(--accent);
  font: inherit; font-weight: 600; cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.linklike.police-link { color: var(--muted); }
.linklike.police-link:hover { color: var(--accent); }

/* ---- Tier 0 owner upload page (upload.html) ---- */
.up-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px 64px; }
.up-head { margin-bottom: 28px; }
.up-head .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 20px; }
.up-wrap h1 { font-family: var(--sans); font-weight: 750; font-size: 27px; letter-spacing: -0.01em; margin: 0 0 12px; }
.up-lede { font-size: 16px; color: var(--text); margin: 0 0 20px; line-height: 1.6; }
.up-assure { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.up-assure li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.up-assure li::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-weight: 800; }
.up-assure b { color: var(--text); }
.up-drop {
  border: 2px dashed var(--border); border-radius: 12px; background: var(--panel);
  padding: 36px 24px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.up-drop:hover, .up-drop.over { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 6%, var(--panel)); }
.up-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-drop[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.up-drop-icon { font-size: 34px; color: var(--accent-2); line-height: 1; }
.up-drop-title { font-weight: 700; font-size: 16px; margin: 10px 0 6px; }
.up-picked { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.up-picked li { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.up-picked .muted { font-family: var(--mono); font-size: 11.5px; }
#up-form-extra { margin-top: 18px; display: grid; gap: 14px; }
.up-device-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.up-send { font-size: 15px; padding: 12px 20px; }
.up-status { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.up-status.ok { color: var(--ok); }
.up-status.warn { color: #8F620F; }
.up-status.err { color: var(--danger); }
.up-done { text-align: center; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.up-done-check { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.up-done h2 { font-family: var(--sans); font-weight: 750; font-size: 20px; margin: 0 0 8px; }
.up-foot { margin-top: 28px; }
.up-foot a { color: var(--accent); }

/* owner "share footage" link generator in the portal */
.up-link-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.up-link-out { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.up-link-out input { font-family: var(--mono); font-size: 11.5px; }

/* ===== live streaming (camera-connect-calgary §04) ===== */
.req-pill.live { background: rgba(179, 64, 47, 0.14); color: var(--danger); }
.req-pill.closed { background: rgba(102, 112, 124, 0.12); color: var(--muted); }
.live-chip { font: 700 11px var(--mono); color: var(--danger); letter-spacing: 0.05em; margin-left: 6px; }
.gl-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: gl-pulse 1.2s ease-in-out infinite; }
@keyframes gl-pulse { 50% { opacity: 0.35; } }

/* go-live publisher page (reuses the upload page shell) */
.gl-stage { position: relative; background: #101923; border-radius: var(--radius); overflow: hidden; margin: 14px 0 10px; }
.gl-stage video { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #101923; }
.gl-osd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #E8ECF0; font: 12px var(--mono); background: linear-gradient(transparent, rgba(16, 25, 35, 0.85)); }
.gl-count { margin-left: auto; font-weight: 700; }
.gl-controls { display: flex; gap: 10px; }
.gl-controls .btn { flex: 1; }

/* case-page live panel */
.cp-live-mint { display: grid; gap: 8px; margin-bottom: 12px; }
.cp-live-mint-row { display: flex; gap: 8px; }
.cp-live-mint-row input[type="text"], .cp-live-mint-row select { flex: 1; min-width: 0; }
.cp-live-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }

/* live viewer modal */
.lv-stage { position: relative; background: #101923; border-radius: 6px; overflow: hidden; }
.lv-stage video { display: block; width: 100%; max-height: 56vh; object-fit: contain; }
.lv-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* area-select on the case map */
.cp-areabar { margin-top: 8px; }
.leaflet-container.is-drawing { cursor: crosshair; }
.cp-areasel-box { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); padding: 12px 14px; }
.cp-areasel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cp-areasel-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 220px; overflow-y: auto; }
.cp-areasel-list li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.cp-areasel-list li:last-child { border-bottom: 0; }
.cp-areasel-row { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.cp-areasel-list.is-off li { display: flex; justify-content: space-between; opacity: 0.6; }
.cp-areasel-box textarea { width: 100%; margin: 6px 0; }
.cp-areasel-actions { display: flex; gap: 8px; align-items: center; }

/* mandatory reference photos in the new-case modal */
.req-star { font: 700 11px var(--mono); color: var(--danger); text-transform: uppercase; letter-spacing: 0.05em; }
.nc-photos { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.nc-photo { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); padding: 6px 8px; }
.nc-photo img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.nc-photo-ph { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.nc-photo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.nc-photo-state { font: 11px var(--mono); color: var(--muted); }
.nc-photo.ok .nc-photo-state { color: var(--ok); }
.nc-photo.failed .nc-photo-state { color: var(--danger); }
.nc-photo-rm { flex: none; }
.nc-share { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; cursor: pointer; }
.nc-share input { margin-top: 3px; }

/* shared sought-person photos inside an owner's request card */
.req-photos { margin: 10px 0; }
.req-photos figure { display: inline-block; margin: 0 8px 4px 0; text-align: center; }
.req-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 2px solid var(--accent-2); }
.req-photos figcaption { font: 11px var(--mono); color: var(--muted); margin-top: 2px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* portal: add-a-camera + linked accounts + helper config */
.panel-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.addcam { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); padding: 12px 14px; margin: 10px 0; }
.addcam-map { height: 240px; border-radius: 6px; margin: 8px 0; }
.addcam-actions { display: flex; gap: 8px; align-items: center; }
.helper-config { border: 1px dashed var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; background: var(--panel); }
.helper-config input { width: 100%; font-family: var(--mono); font-size: 11.5px; }
.helper-config label { display: block; margin: 6px 0; }
.ring-device { display: flex; justify-content: space-between; align-items: center; }

/* real reference-face search on the case page */
.cp-refsearch { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; border: 1px dashed var(--border); border-radius: 6px; background: var(--panel-2); padding: 10px 12px; margin-bottom: 10px; }
.cp-refsearch .grow { flex: 1; min-width: 180px; }
.cp-refsearch input[type="range"] { width: 120px; }