/* Self-hosted fonts (latin subsets of Google Fonts, SIL Open Font License): no third-party request before first paint. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin-v20.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/montserrat-latin-v31.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-mono-400-latin-v16.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-mono-500-latin-v16.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* NYC Alert console. Palette and type follow the logo: black field, white skyline and "NYC",
   logo red "ALERT" and heartbeat line, heavy geometric sans. Category tints are functional:
   routine blue, newsworthy goldenrod, breaking red. Components use semantic tokens. */
:root {
  color-scheme: dark;
  /* primitives */
  --black: #000000; --ink-950: #050505; --ink-900: #0b0b0b; --ink-850: #0f0f0f; --ink-800: #141414;
  --ink-700: #1c1c1c; --ink-600: #262626; --ink-500: #333333; --ink-400: #8a8a8a; --ink-300: #a6a6a6;
  --ink-200: #cfcfcf; --ink-100: #f2f2f2; --white: #ffffff;
  --logo-red: #e31b23; --red-text: #ff4d57; --red-deep: #3a0a0d;
  --goldenrod: #daa520; --gold-text: #f0c24b; --blue: #6aa8ff; --blue-text: #9cc3ff; --violet-text: #d3baff;
  --green: #4ade80;
  /* semantic */
  --bg: var(--ink-950); --panel: var(--ink-850); --panel2: var(--ink-800); --panel3: var(--ink-700);
  --line: var(--ink-600); --line-strong: var(--ink-500);
  --text: var(--ink-100); --bright: var(--white); --muted: var(--ink-300); --faint: var(--ink-400);
  --accent: var(--logo-red); --accent-text: var(--red-text); --focus: #ffffff; --live: var(--green);
  --cat-routine: var(--blue); --cat-newsworthy: var(--goldenrod); --cat-breaking: var(--logo-red); --cat-funny: #b48cff; --cat-first-alert: #bf40ff;
  --fire-solid: #d6322c; --ems-solid: #0f8f8a; --pd-solid: #2f62c9; --other-solid: #5c5c5c;
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", "Cascadia Mono", Consolas, monospace;
  --topbar-h: 72px; --sidebar-w: 300px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-block-start: var(--topbar-h); }
body { margin: 0; color: var(--text); background: var(--bg); font: 400 16px/1.55 var(--sans); min-height: 100dvh; display: flex; flex-direction: column; }
img { max-width: 100%; display: block; }
a { color: var(--accent-text); text-underline-position: from-font; text-decoration-thickness: from-font; }
a:hover { color: var(--bright); }
h1, h2, h3 { margin: 0 0 var(--space-3); line-height: 1.2; text-wrap: balance; font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.125rem; }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
code { font-family: var(--mono); font-size: 0.9em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .small { font-size: 0.8125rem; }
[hidden] { display: none !important; }
.eyebrow { display: block; margin: 0 0 var(--space-2); color: var(--faint); font: 600 0.6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.skip-link { position: absolute; inset-inline-start: var(--space-3); top: -48px; background: var(--accent); color: #fff; padding: var(--space-2) var(--space-3); border-radius: 6px; z-index: 100; }
.skip-link:focus { top: var(--space-3); }

/* ------------------------------------------------------------ top bar and wordmark */
.topbar { position: sticky; top: 0; z-index: 40; min-height: var(--topbar-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-4);
  padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right)); background: rgb(0 0 0 / .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent); opacity: .85; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.brand-logo { width: 48px; height: 48px; }
.wordmark { display: grid; gap: 1px; line-height: 1; }
.wordmark-text { font: 800 1.25rem/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.wm-nyc { color: var(--bright); } .wm-alert { color: var(--accent); }
.wordmark svg { width: 100%; height: 8px; display: block; }
.brand-caption { color: var(--faint); font: 600 0.625rem var(--mono); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.ticker { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 760px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.ticker-label { font: 700 0.6875rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.ticker-text { color: var(--text); text-decoration: none; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-links { display: flex; align-items: center; gap: var(--space-2); }
.top-link { color: var(--muted); text-decoration: none; font: 600 0.75rem var(--sans); padding: 8px 10px; border-radius: 6px; }
.top-link:hover, .top-link[aria-current="page"] { color: var(--bright); background: var(--panel2); }
.account-button { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; font: 800 0.75rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
.account-button:hover { background: #ff2b33; color: #fff; }
.topbar-status { display: flex; align-items: center; gap: 10px; font: 500 0.6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.system-state { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.system-state.is-live { color: var(--live); } .system-state.is-live .live-dot { background: var(--live); box-shadow: 0 0 10px rgb(74 222 128 / .7); }
.system-state.is-paused { color: var(--gold-text); } .system-state.is-paused .live-dot { background: var(--goldenrod); }
.system-state.is-error { color: var(--accent-text); } .system-state.is-error .live-dot { background: var(--accent); }
.top-divider { width: 1px; height: 18px; background: var(--line); }
.clock { color: var(--text); font-variant-numeric: tabular-nums; }
.menu-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; font-size: 18px; cursor: pointer; }
.menu-button[aria-expanded="true"] { border-color: var(--accent); background: rgb(227 27 35 / .14); }
.mobile-nav { position: fixed; z-index: 55; top: var(--menu-top, 78px); inset-inline-end: max(12px, env(safe-area-inset-right)); width: min(330px, calc(100vw - 24px)); max-height: calc(100dvh - var(--menu-top, 78px) - 12px); overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel2); box-shadow: 0 18px 55px rgb(0 0 0 / .65); }
@media (prefers-reduced-motion: no-preference) { .mobile-nav:not([hidden]) { animation: menu-in 160ms ease-out; } @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }
.mobile-nav > a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.mobile-nav > a:hover { background: var(--panel3); color: var(--bright); }
.menu-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.menu-ext { margin-inline-start: auto; color: var(--faint); font-size: 0.8125rem; }
.menu-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.mobile-nav > a.menu-donate { color: #ffd27a; }
.mobile-nav > a.menu-donate:hover { background: rgb(218 165 32 / .12); color: #ffe2a3; }
.mobile-nav > a.menu-discord { color: #b9c2ff; }
.mobile-nav > a.menu-discord:hover { background: rgb(88 101 242 / .16); color: #dde1ff; }
.menu-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; }
.menu-auth .button { width: 100%; }
.menu-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-account > div { display: grid; gap: 1px; min-width: 0; }
.menu-account .eyebrow { margin: 0; }
.menu-account strong { color: var(--bright); font: 700 0.9375rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-account-type { color: var(--muted); font-size: 0.75rem; }
.mobile-nav > a[aria-current="page"] { background: var(--panel3); color: var(--bright); box-shadow: inset 3px 0 0 var(--accent); }

/* ------------------------------------------------------------ controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.button-primary { background: var(--accent); color: #fff; } .button-primary:hover { background: #ff2b33; color: #fff; }
.button-secondary { background: var(--panel2); border-color: var(--line-strong); color: var(--text); } .button-secondary:hover { background: var(--panel3); border-color: #555; color: #fff; }
.button-small { min-height: 32px; padding: 5px 11px; font-size: 0.75rem; }
.button:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .button { transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out; } .button:not(:disabled):active { transform: scale(0.96); } }
.icon-button { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; display: grid; place-items: center; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip, .live-filter-chip { min-height: 30px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--muted); font: 600 0.75rem var(--sans); cursor: pointer; transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out; }
.filter-chip:hover, .live-filter-chip:hover { border-color: #555; color: var(--bright); }
.filter-chip.is-on, .live-filter-chip.is-on { border-color: var(--accent); background: rgb(227 27 35 / .14); color: var(--bright); }
.borough-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.borough-tab { min-height: 32px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--faint); font: 600 0.75rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.borough-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.borough-tab.is-on { color: var(--bright); border-color: #4a4a4a; background: var(--panel2); } .borough-tab.is-on::before { background: var(--live); }
.borough-reset::before { display: none; }
.audience-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.audience-button { min-height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--muted); font: 700 0.75rem var(--sans); cursor: pointer; }
.audience-button.is-on { border-color: var(--accent); background: rgb(227 27 35 / .14); color: var(--bright); }
.side-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.control-label { color: var(--faint); font: 600 0.6875rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.select { min-height: 32px; padding: 3px 30px 3px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cfcfcf' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text); appearance: none; font-size: 0.8125rem; min-width: 150px; }
.window-note { margin: 0 0 var(--space-2); padding: 6px 9px; border-radius: 6px; border: 1px solid rgb(218 165 32 / .35); background: rgb(218 165 32 / .08); color: var(--gold-text); font-size: 0.75rem; line-height: 1.45; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; font-size: 0.8125rem; color: var(--muted); }
.toggle input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.refresh-label { margin: var(--space-2) 0; color: var(--faint); font: 500 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.refresh-label i { color: var(--live); font-style: normal; font-size: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: var(--space-2); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--ink-900); color: var(--muted); }
.search-box > span { font-size: 18px; line-height: 1; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: 0.875rem var(--sans); }
.search-box kbd { border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 5px; color: var(--muted); font: 0.625rem var(--mono); }

/* ------------------------------------------------------------ dashboard layout */
.dashboard { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--space-4); width: min(1600px, 100% - 2 * max(var(--space-4), env(safe-area-inset-left))); margin: var(--space-4) auto var(--space-6); align-items: start; }
.sidebar { display: grid; gap: var(--space-3); position: sticky; top: calc(var(--topbar-h) + var(--space-3)); }
.side-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-3) var(--space-4); }
.side-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.side-head h2 { margin: 0; font-size: 1rem; } .side-head .eyebrow { margin: 0; width: 100%; }
.pill { margin-inline-start: auto; border: 1px solid var(--line-strong); border-radius: 20px; padding: 3px 8px; color: var(--muted); font: 500 0.625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.status-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); margin: var(--space-2) 0; font-size: 0.8125rem; }
.status-list dt { color: var(--faint); font: 600 0.625rem var(--mono); letter-spacing: .09em; text-transform: uppercase; align-self: center; }
.status-list dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.side-foot { margin: var(--space-2) 0 0; color: var(--faint); font-size: 0.6875rem; line-height: 1.5; }
.dashboard-main { display: grid; gap: var(--space-4); min-width: 0; }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-card { min-height: 93px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 15px; display: grid; gap: 2px; align-content: start; }
.stat-label { color: var(--faint); font: 600 0.625rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.stat-value { font: 800 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bright); }
.stat-value-text { font-size: 0.9375rem; color: var(--accent-text); padding-block: 8px; }
.stat-caption { color: var(--muted); font: 500 0.625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.top-incidents { display: none; }

/* ------------------------------------------------------------ map panel */
.incident-map-panel, .incidents-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-4); }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.panel-head h2 { margin: 0; font-size: 1.25rem; } .panel-head .eyebrow { margin-bottom: 4px; }
.panel-note { margin: 0 0 var(--space-3); color: var(--muted); font-size: 0.75rem; max-width: 70ch; }
.map-stage { position: relative; isolation: isolate; z-index: 0; height: clamp(320px, 46dvh, 560px); border-radius: 6px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--black); }
.map { position: absolute; inset: 0; background: var(--black); }
.map-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 450; margin: 0; max-width: min(90%, 440px); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: rgb(0 0 0 / .88); border: 1px solid var(--line-strong); color: var(--muted); text-align: center; font-size: 0.8125rem; }
.map-legend { display: grid; gap: var(--space-2); margin-top: var(--space-3); font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.legend-row b { color: var(--text); font-weight: 600; }
/* Legend marks are drawn upright and centered on their own box (the old tilted pins sat off kilter, owner 2026-10-30). */
.legend-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pin, #6aa8ff); border: 1.5px solid rgb(255 255 255 / .85); }
.legend-dot.level-5 { --pin: #e31b23; } .legend-dot.level-4 { --pin: #ff7a1a; } .legend-dot.level-3 { --pin: #daa520; } .legend-dot.level-2 { --pin: #6aa8ff; }
.legend-kind { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel3); border: 1px solid var(--line-strong); }
.legend-kind svg { width: 14px; height: 14px; fill: var(--bright); }
.swatch-ring { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--muted); display: inline-block; }
.leaflet-container { font: inherit; background: var(--black); }
/* .leaflet-container in front: leaflet.css loads after this file (lazily, with the map) and its white popup would win */
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background: var(--panel2); color: var(--text); box-shadow: 0 18px 55px rgb(0 0 0 / .6); }
.leaflet-container .leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: 10px; }
.leaflet-container .leaflet-popup-tip { border: 1px solid var(--line); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--bright); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.8125rem; line-height: 1.45; }
.leaflet-popup-content strong { display: block; margin: 4px 0; font-family: var(--display); font-weight: 800; }
.leaflet-popup-content .popup-meta { color: var(--muted); font: 0.6875rem var(--mono); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-control-zoom a { background: var(--panel2) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgb(0 0 0 / .8) !important; color: var(--faint) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--muted) !important; }

/* ------------------------------------------------------------ incidents panel */
.incidents-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.view-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.view-tab { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 700 0.8125rem var(--sans); cursor: pointer; }
.view-tab.is-on { color: var(--bright); border-bottom-color: var(--accent); }
.incidents-header .refresh-label { margin: 0; }
.live-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
.live-filter-row .control-label { margin-inline-end: 4px; }
.incident-scroll { display: grid; gap: 9px; max-height: min(78vh, 1100px); overflow: auto; overscroll-behavior: contain; padding-inline-end: 2px; }
.incident-scroll-page { max-height: none; overflow: visible; }
/* Live Radio Calls (owner 2026-10-31): Buff, News Media and staff */
.live-call { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.live-call.is-new { animation: live-call-in 2.4s ease-out; }
.live-call.is-playing { border-color: var(--green); }
@keyframes live-call-in { from { background: rgb(227 27 35 / .18); } to { background: var(--panel); } }
.live-call-play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--bright); cursor: pointer; font-size: .8rem; }
.live-call-play:hover, .live-call.is-playing .live-call-play { border-color: var(--green); color: var(--green); }
.live-call-meta { display: flex; gap: 10px; align-items: baseline; font: 600 0.6875rem var(--mono); letter-spacing: .08em; color: var(--faint); }
.live-call-channel { color: var(--red-text); }
/* owner 2026-11-01: EMS calls in the radio's blue (#1d5fc4), lightened to read on the dark card */
.live-call.is-ems .live-call-channel { color: #5b9bf5; }
.live-call-text { margin: 4px 0 0; color: var(--text); font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
.live-call-text.is-pending { color: var(--faint); font-style: italic; }
.feed-foot { display: flex; justify-content: center; margin-top: var(--space-3); }
.empty-state { padding: 36px var(--space-4); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); display: grid; gap: 6px; justify-items: center; }
.empty-state strong { color: var(--bright); font: 800 1.0625rem var(--display); }
.empty-state p { margin: 0; font-size: 0.8125rem; max-width: 46ch; }
.empty-state .eyebrow { margin: 0; }

/* ------------------------------------------------------------ incident card */
.incident-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px 12px 18px; background: linear-gradient(120deg, #121212, #0c0c0c); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; transition: border-color 150ms ease-out; }
@media (prefers-reduced-motion: no-preference) { .incident-card, .mini-card { animation: appear .25s ease; } @keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.incident-card::before, .mini-card::before { content: ""; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--card-accent, var(--cat-routine)); }
.category-routine { --card-accent: var(--cat-routine); }
.category-newsworthy { --card-accent: var(--cat-newsworthy); }
.category-breaking, .priority-breaking { --card-accent: var(--cat-breaking); }
.category-funny, .category-weird_unique { --card-accent: var(--cat-funny); }
.category-first_alert { --card-accent: var(--cat-first-alert); }
.incident-card:hover { border-color: #444; }
.incident-card.is-selected, .mini-card.is-selected { border-color: var(--focus); }
.incident-card.is-new, .mini-card.is-new { box-shadow: 0 0 0 1px rgb(227 27 35 / .5); }
.incident-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.incident-time { margin-inline-start: auto; color: var(--faint); font: 0.625rem var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.incident-card h3 { margin: 2px 0 0; color: var(--bright); font: 700 1.0625rem/1.35 var(--display); letter-spacing: -0.01em; }
.incident-card h3 button, .mini-card h3 button { all: unset; cursor: pointer; color: inherit; display: inline; }
.incident-card h3 button:hover, .mini-card h3 button:hover { text-decoration: underline; text-underline-offset: 3px; }
.incident-card h3 button:focus-visible, .mini-card h3 button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.incident-card > p { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.55; max-width: 850px; }
.incident-change { margin: 0; padding: 8px 10px; border-radius: 6px; background: rgb(218 165 32 / .08); border: 1px solid rgb(218 165 32 / .3); color: var(--text); font-size: 0.8125rem; line-height: 1.5; }
.incident-change b { color: var(--gold-text); font: 700 0.625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-inline-end: 6px; }
.incident-body { display: grid; gap: 12px; margin-top: 2px; }
.incident-body.has-media { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; }
.incident-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.incident-main audio { max-width: 100%; }
.incident-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-900); overflow: hidden; }
.incident-fact { padding: 10px 14px; display: grid; gap: 4px; min-width: 0; align-content: start; border-inline-start: 1px solid var(--line); margin-inline-start: -1px; }
.incident-fact dt { color: var(--faint); font: 600 0.5625rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.incident-fact dd { margin: 0; color: var(--text); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.incident-fact dd.missing { color: var(--faint); font-style: italic; }
.card-updates { display: grid; gap: 6px; min-width: 0; }
.card-updates ol { list-style: none; margin: 0; padding: 2px 0 0 16px; border-inline-start: 1px solid var(--line-strong); margin-inline-start: 4px; display: grid; gap: 9px; }
.card-update { position: relative; display: grid; gap: 2px; min-width: 0; }
.card-update::before { content: ""; position: absolute; inset-inline-start: -21px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ink-900); }
.card-update.is-latest::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgb(227 27 35 / .18); }
.card-update.is-first::before { background: var(--ink-600); }
.card-update-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-update time { color: var(--faint); font: 0.625rem var(--mono); font-variant-numeric: tabular-nums; }
.card-update strong { color: var(--text); font: 600 0.8125rem/1.35 var(--sans); }
.card-update.is-latest strong { color: var(--bright); }
.card-update-change { color: var(--muted); font-size: 0.75rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-update-kind { color: var(--faint); font: 600 0.625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.card-update.is-more button { all: unset; cursor: pointer; color: var(--accent-text); font: 600 0.75rem var(--sans); }
.card-update.is-more button:hover { text-decoration: underline; }
.card-update.is-more button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-update.is-more::before { border-style: dashed; }
#drawer-timeline li.is-major .incident-update-body { color: var(--bright); font-weight: 700; }
#drawer-timeline li.is-fold button { all: unset; cursor: pointer; color: var(--accent-text); font: 600 0.75rem var(--sans); }
#drawer-timeline li.is-fold button:hover { text-decoration: underline; } #drawer-timeline li.is-fold button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-updates-none { margin: 0; color: var(--faint); font-size: 0.75rem; }
.incident-media { margin: 0; display: grid; gap: 6px; min-width: 0; }
.card-camera { position: relative; display: block; width: 100%; aspect-ratio: 352 / 240; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--black); cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / .45); transition: border-color 150ms ease-out, transform 150ms ease-out; }
.card-camera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-camera:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .card-camera:hover { transform: translateY(-1px); } }
.card-camera::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgb(0 0 0 / .78), transparent); pointer-events: none; }
.card-camera .camera-live { bottom: 8px; left: 8px; top: auto; right: auto; z-index: 1; display: inline-flex; align-items: center; gap: 5px; }
.card-camera .camera-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .card-camera .camera-live i { animation: live-blink 1.6s ease-in-out infinite; } @keyframes live-blink { 50% { opacity: .25; } } }
.camera-live.is-idle { background: var(--ink-500); }
.camera-distance { position: absolute; z-index: 1; right: 8px; bottom: 7px; color: #fff; font: 600 0.6875rem var(--mono); letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.card-camera-skeleton { cursor: default; box-shadow: none; background: var(--ink-900); }
/* the shimmer moves a highlight with transform (compositor only): a background-position animation restyled the page every frame */
.card-camera-skeleton::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--ink-800) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .card-camera-skeleton::before { animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { transform: translateX(100%); } } }
.card-camera-skeleton::after { display: none; }
.incident-media figcaption { display: grid; gap: 1px; min-width: 0; }
.incident-media figcaption strong { color: var(--text); font: 600 0.75rem var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incident-media figcaption span { color: var(--faint); font: 0.625rem var(--mono); letter-spacing: .03em; }
.incident-unit-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.incident-unit-chip { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 5px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); color: var(--text, #e8e8e8); font: 0.6875rem var(--mono); white-space: nowrap; }
.incident-unit-more { display: inline-flex; align-items: center; padding: 3px 4px; color: var(--muted, #9a9a9a); font: 0.6875rem var(--mono); }
.incident-box-chip { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 5px; border: 1px solid rgb(227 27 35 / .5); background: var(--red-deep); color: #ffd3d5; font: 0.6875rem var(--mono); white-space: nowrap; }
.incident-audio { display: grid; gap: 6px; }
.incident-audio audio { width: 100%; height: 36px; display: block; }
.clip-download { display: inline-block; margin-block: 4px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 0.75rem; font-weight: 600; text-decoration: none; } .clip-download:hover { border-color: var(--accent); }
.incident-audio-label { color: var(--faint); font: 600 0.5625rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.incident-audio-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.listen-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--bright); background: rgba(227, 27, 35, .12); font: 700 0.6875rem var(--mono); letter-spacing: .04em; text-decoration: none; }
.listen-live:hover, .listen-live:focus-visible { background: rgba(227, 27, 35, .28); }
.listen-live:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.listen-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.listen-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(227, 27, 35, .7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .listen-live i::after { animation: listen-pulse 1.6s infinite; will-change: transform, opacity; } }
@keyframes listen-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.75); opacity: 0; } 100% { transform: scale(2.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .listen-live i { animation: none; } }
.incident-updates { border: 1px solid var(--line); border-radius: 7px; background: var(--ink-900); }
.incident-updates summary { cursor: pointer; padding: 8px 11px; color: var(--text); font: 700 0.75rem var(--sans); list-style: none; display: flex; align-items: center; gap: 8px; }
.incident-updates summary::-webkit-details-marker { display: none; }
.incident-updates summary::before { content: "▸"; color: var(--accent-text); font-size: 11px; }
.incident-updates[open] summary::before { content: "▾"; }
.incident-update-list { list-style: none; margin: 0; padding: 4px 11px 10px 22px; border-inline-start: 1px solid var(--line-strong); margin-inline-start: 14px; display: grid; gap: 10px; }
.incident-update { position: relative; display: grid; gap: 3px; }
.incident-update::before { content: ""; position: absolute; inset-inline-start: -26px; top: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--red-deep); }
.incident-update time { color: var(--faint); font: 0.625rem var(--mono); }
.incident-update-agency { display: inline-flex; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); font: 0.5625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-inline-start: 6px; }
.incident-update-headline { color: var(--bright); font: 700 0.8125rem/1.4 var(--display); }
.incident-update-body { color: var(--muted); font-size: 0.75rem; line-height: 1.6; margin: 0; }
.incident-update audio { width: 100%; height: 32px; margin-top: 4px; }
.incident-update-empty { color: var(--faint); font-size: 0.75rem; padding: 6px 11px 10px; margin: 0; }
.incident-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.incident-source { color: var(--faint); font: 0.5625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.confidence { color: var(--faint); font: 0.5625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.confidence b { color: var(--text); font-weight: 500; }
.share-row { margin-inline-start: auto; display: flex; gap: 6px; }
.share-row button, .share-row a { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--panel2); color: var(--muted); display: grid; place-items: center; cursor: pointer; text-decoration: none; font: 700 0.6875rem var(--mono); padding: 0; }
.share-row button:hover, .share-row a:hover { border-color: var(--accent); color: #fff; }
.share-row .share-wide { width: auto; padding: 0 9px; }

/* ------------------------------------------------------------ mini cards (phone top incidents) */
.mini-list { display: grid; gap: 8px; }
.mini-card { position: relative; display: grid; gap: 5px; padding: 10px 12px 10px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-900); }
.mini-card .incident-meta { gap: 5px; }
.mini-card h3 { margin: 0; color: var(--bright); font: 700 0.9375rem/1.3 var(--display); }
.mini-place { margin: 0; color: var(--muted); font-size: 0.75rem; }
.mini-updates { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; border-inline-start: 1px solid var(--line-strong); display: grid; gap: 4px; }
.mini-updates li { color: var(--text); font-size: 0.75rem; line-height: 1.4; }
.mini-updates time { color: var(--faint); font: 0.625rem var(--mono); margin-inline-end: 6px; }
.mini-updates .stage-badge { margin-inline-end: 4px; }
.see-all { display: inline-flex; margin-top: var(--space-2); color: var(--accent-text); font: 700 0.75rem var(--sans); text-decoration: none; }

/* badges */
.category-tag, .borough-tag, .presentation-badge, .call-type-badge, .stage-badge, .update-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; border: 1px solid transparent; font: 600 0.5625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.category-tag { color: var(--muted); border-color: var(--line-strong); background: transparent; }
.category-tag.routine { color: var(--blue-text); border-color: #2c4566; background: rgb(106 168 255 / .12); }
.category-tag.newsworthy { color: var(--gold-text); border-color: #6b5416; background: rgb(218 165 32 / .14); }
.category-tag.breaking { color: #ff8088; border-color: #7a1f25; background: rgb(227 27 35 / .18); }
.category-tag.funny, .category-tag.weird_unique { color: var(--violet-text); border-color: #574476; background: #20182e; }
/* FirstAlert (owner 2026-10-27: bright purple) */
.category-tag.first_alert { color: #f6e8ff; border-color: var(--cat-first-alert); background: rgb(191 64 255 / .32); box-shadow: 0 0 10px rgb(191 64 255 / .45); }
.presentation-badge { font-weight: 700; letter-spacing: .09em; color: var(--muted); border-color: var(--line-strong); }
.presentation-badge.breaking { color: #fff; border-color: var(--accent); background: var(--accent); }
.presentation-badge.developing { color: var(--gold-text); border-color: #6b5416; background: rgb(218 165 32 / .14); }
.presentation-badge.incident { color: var(--text); border-color: #444; background: var(--panel2); }
.presentation-badge.activity { color: var(--faint); border-color: var(--line-strong); background: transparent; }
.call-type-badge { border-radius: 99px; padding: 3px 7px; border-color: var(--line-strong); color: var(--muted); }
.call-type-badge.call-type-fire { border-color: #5c2c1e; background: #2a1712; color: #ff9a6b; }
.call-type-badge.call-type-ems { border-color: #24504c; background: #102624; color: #7fd8d2; }
.call-type-badge.call-type-pd { border-color: #2c3b63; background: #141b2e; color: #9cb8ff; }
.borough-tag { color: var(--muted); border-color: var(--line-strong); background: transparent; }
.borough-tag.ems { color: #5b9bf5; border-color: rgb(29 95 196 / .6); } /* FDNY EMS in the radio's blue (owner 2026-11-01) */
.update-badge { color: var(--live); border-color: #1f4d33; background: rgb(74 222 128 / .1); }
.update-badge.is-update { color: var(--gold-text); border-color: #6b5416; background: rgb(218 165 32 / .12); }
.stage-badge { border-radius: 99px; }
/* The FDNY escalation signal (owner 2026-10-30): ALL HANDS, 2ND ALARM ... the most prominent tag on the card. */
.signal-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: 800 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.signal-tag.signal-alarm-3, .signal-tag.signal-alarm-4, .signal-tag.signal-alarm-5, .signal-tag.signal-mayday { box-shadow: 0 0 10px rgb(227 27 35 / .6); }
.signal-tag.signal-working-fire, .signal-tag.signal-10-76, .signal-tag.signal-10-77, .signal-tag.signal-major-emergency { background: rgb(227 27 35 / .2); color: #ff8088; }
.stage-reported { background: #16213a; color: #9fc3ff; } .stage-confirmed { background: #33240e; color: #ffc278; } .stage-escalated { background: #44121a; color: #ff8a93; }
.stage-contained { background: #2c2810; color: #f1dc7a; } .stage-under_control { background: #0e2c1d; color: #63dbac; } .stage-clearing { background: #10292e; color: #52d6e8; }
.stage-closed { background: #1c1c1c; color: #b0b0b0; } .stage-other { background: var(--panel2); color: var(--muted); }

/* ------------------------------------------------------------ pages, form */
.view-page { padding: var(--space-6) 0 48px; }
.page-wrap { width: min(1100px, 100% - 2 * max(var(--space-4), env(safe-area-inset-left))); margin-inline: auto; }
.page-narrow { max-width: 720px; }
.page-head { margin-bottom: var(--space-5); }
.lead { color: var(--muted); font-size: 1.0625rem; max-width: 65ch; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.toolbar-search { flex: 1 1 260px; margin: 0; }
.prose h2 { margin-top: var(--space-5); } .prose ol, .prose ul { padding-inline-start: 1.25rem; color: var(--muted); } .prose li { margin-bottom: var(--space-2); } .prose li strong { color: var(--text); }
.form { display: grid; gap: var(--space-5); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } legend { font-weight: 600; margin-bottom: var(--space-3); padding: 0; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.tier-card { display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); cursor: pointer; position: relative; }
.tier-card:has(input:checked) { border-color: var(--accent); background: rgb(227 27 35 / .08); }
.tier-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tier-card input { position: absolute; inset-inline-end: var(--space-3); top: var(--space-3); width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.tier-name { font: 800 1rem var(--display); padding-inline-end: 28px; } .tier-desc { color: var(--muted); font-size: 0.875rem; }
.field { display: grid; gap: 6px; } .field > label, .field > legend { font-weight: 600; } .req { color: var(--accent-text); font-weight: 500; font-size: 0.875rem; }
.field input[type="text"], .field input[type="email"], .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: 1rem; }
.field textarea { resize: vertical; min-height: 88px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent-text); }
.field-hint { margin: 0; color: var(--muted); font-size: 0.875rem; } .field-error { margin: 0; color: var(--accent-text); font-size: 0.875rem; }
.form-error { padding: var(--space-3); border: 1px solid rgb(255 77 87 / .5); border-radius: 6px; }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.account-hook-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-row label, .field-check label { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 28px; cursor: pointer; font-weight: 400; }
.check-row input, .field-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: 0.875rem; }
.success-card { padding: var(--space-5); border: 1px solid rgb(74 222 128 / .4); border-radius: 12px; background: var(--panel); display: grid; gap: var(--space-3); justify-items: start; }

/* ------------------------------------------------------------ drawer, arrival, toasts, footer */
.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .6); z-index: 60; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(600px, 100%); z-index: 70; background: linear-gradient(150deg, #121212, #080808); border-inline-start: 1px solid var(--line-strong); box-shadow: 0 18px 55px rgb(0 0 0 / .6); padding: var(--space-4) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-5), env(safe-area-inset-bottom)) var(--space-5); overflow: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) { .drawer { animation: drawer-in 300ms ease-out; } @keyframes drawer-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.incident-headline { color: var(--bright); font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--display); letter-spacing: -0.02em; margin: 10px 0 8px; }
.drawer-meta { color: var(--muted); font: 0.625rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.drawer-change { padding: var(--space-3); border-radius: 6px; background: rgb(218 165 32 / .1); border: 1px solid rgb(218 165 32 / .35); margin-bottom: var(--space-3); }
.drawer-change b { display: block; font: 700 0.625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 2px; }
.drawer-summary { color: var(--ink-200); font-size: 0.9375rem; line-height: 1.7; max-width: 78ch; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Each action its own color so they stand out on the dark drawer (owner 2026-11-02); every pair is 4.5:1 or better */
.drawer-actions .button { flex: 1 1 auto; gap: 6px; font-size: 0.78rem; min-height: 36px; padding: 6px 11px; box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
@media (min-width: 561px) { .drawer-actions { flex-wrap: nowrap; } } /* one row in the drawer; 2 x 2 on phones */
.action-icon { width: 15px; height: 15px; flex: none; }
.action-map { background: var(--logo-red); color: #fff; } .action-map:hover { background: #c4141b; color: #fff; }
.action-copy { background: var(--gold-text); color: #111; } .action-copy:hover { background: #ffd666; color: #000; }
.action-x { background: #fff; color: #000; } .action-x:hover { background: #dcdcdc; color: #000; }
.action-fb { background: #0866ff; color: #fff; } .action-fb:hover { background: #0656e0; color: #fff; }
.drawer-section { margin-top: var(--space-5); }
.drawer-section h3 { color: var(--faint); font: 600 0.5625rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.unit-groups { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
/* Community photos and updates by members (site-r53) */
.community-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.community-photo { margin: 0; }
.community-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.community-photo figcaption { margin-top: 4px; color: var(--text); font-size: 0.75rem; overflow-wrap: anywhere; }
.community-photo figcaption span, .community-by { color: var(--muted); font-size: 0.6875rem; }
.community-by { margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; }
.community-report { margin-top: 4px; font-size: 0.75rem; }
.community-report summary { cursor: pointer; color: var(--muted); }
.community-report form { display: grid; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.community-report fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.community-chip { display: inline-flex; align-self: flex-start; margin: 6px 0 0; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--text); font: 600 0.6875rem var(--mono); letter-spacing: .04em; cursor: pointer; }
.community-chip:hover { border-color: var(--accent); }
.unit-group { display: grid; gap: 6px; }
.unit-group-label { color: var(--faint); font: 500 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.unit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel2); color: var(--text); font: 600 0.8125rem/1.3 var(--sans); white-space: nowrap; }
.unit-chip small { color: var(--faint); font: 500 0.6875rem var(--mono); }
.audio-list { display: grid; gap: var(--space-2); }
.audio-item { display: grid; gap: 4px; padding: var(--space-3); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.audio-item audio { width: 100%; height: 42px; }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.camera-tile { margin: 0; display: grid; gap: 4px; min-width: 0; }
.camera-tile.is-large { grid-column: 1 / -1; order: -1; }
.camera-view { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--black); cursor: zoom-in; }
.camera-tile.is-large .camera-view { cursor: zoom-out; }
.camera-view img { display: block; width: 100%; height: auto; aspect-ratio: 352 / 240; object-fit: cover; }
.camera-view:hover { border-color: #555; }
.camera-live { position: absolute; bottom: 6px; right: 6px; padding: 2px 6px; border-radius: 3px; background: var(--accent); color: #fff; font: 700 0.5625rem var(--mono); letter-spacing: .1em; }
.camera-tile.is-offline .camera-live { background: var(--ink-500); }
.camera-tile.is-offline img { opacity: .45; }
.camera-tile figcaption { display: grid; gap: 1px; font-size: 0.6875rem; color: var(--muted); line-height: 1.35; min-width: 0; }
.camera-tile figcaption strong { color: var(--text); font: 600 0.75rem var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-hero-camera { margin: var(--space-4) 0 0; display: grid; gap: 6px; }
.hero-frame { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--black); aspect-ratio: 352 / 240; box-shadow: 0 12px 32px rgb(0 0 0 / .5); }
.hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent); pointer-events: none; }
.hero-frame .camera-live { bottom: 10px; left: 10px; top: auto; right: auto; z-index: 1; display: inline-flex; align-items: center; gap: 5px; font-size: 0.625rem; padding: 3px 8px; }
.hero-frame .camera-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .hero-frame .camera-live i { animation: live-blink 1.6s ease-in-out infinite; } }
.hero-frame .camera-distance { right: 10px; bottom: 9px; font-size: 0.75rem; }
.drawer-hero-camera.is-offline .hero-frame img { opacity: .45; }
.drawer-hero-camera figcaption { display: grid; gap: 1px; }
.drawer-hero-camera figcaption strong { color: var(--bright); font: 700 0.9375rem var(--display); }
.drawer-hero-camera figcaption span { color: var(--muted); font-size: 0.75rem; }
.camera-view .camera-live { bottom: 6px; right: 6px; }
.camera-note { margin: var(--space-2) 0 0; color: var(--faint); font-size: 0.6875rem; }
@media (max-width: 420px) { .camera-grid { grid-template-columns: 1fr; } }
.audio-unavailable { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 0.6875rem; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-inline-start: 1px solid var(--line-strong); display: grid; gap: 14px; }
.timeline li { position: relative; display: grid; gap: 3px; font-size: 0.8125rem; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -22px; top: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--red-deep); }
.timeline time { color: var(--faint); font: 0.625rem var(--mono); }
.timeline .incident-update-headline { font-size: 0.875rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0; }
.facts div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-900); display: grid; gap: 3px; }
.facts dt { color: var(--faint); font: 600 0.5625rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.facts dd { margin: 0; color: var(--text); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.arrival { position: fixed; inset-inline-end: var(--space-4); top: calc(var(--topbar-h) + var(--space-3)); z-index: 75; width: min(380px, calc(100% - 2 * var(--space-4))); padding: var(--space-4); border-radius: var(--radius); background: var(--panel2); border: 1px solid var(--accent); box-shadow: 0 18px 55px rgb(0 0 0 / .6); display: grid; gap: 6px; }
.arrival .eyebrow { color: var(--accent-text); margin: 0; }
.arrival strong { font: 800 1rem/1.35 var(--display); }
.arrival-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.main-footer { border-top: 1px solid var(--line); padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)) max(var(--space-5), env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: var(--space-2) var(--space-5); color: var(--faint); font: 500 0.625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.footer-warn { color: var(--accent-text); }
.main-footer a { color: var(--muted); }
.served-by { opacity: .55; }
.toast-stack { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 80; display: grid; gap: var(--space-2); max-width: min(360px, calc(100% - 44px)); }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--panel3); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgb(0 0 0 / .6); font-size: 0.8125rem; display: grid; gap: 2px; }
.toast strong { font: 600 0.5625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.toast button { justify-self: start; margin-top: 4px; background: none; border: 0; color: var(--accent-text); padding: 4px 0; cursor: pointer; min-height: 24px; }
@media (prefers-reduced-motion: no-preference) { .toast, .arrival { animation: toast-in 300ms ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } }

/* ------------------------------------------------------------ admin panel */
.admin-wrap { width: min(1200px, 100% - 2 * max(var(--space-4), env(safe-area-inset-left))); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: var(--space-4); }
.admin-stats .stat-card { min-height: 0; }
.admin-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-4); margin-bottom: var(--space-4); }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.admin-section-head h2 { margin: 0; }
.admin-list { display: grid; gap: 8px; }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-900); }
.admin-row-main { display: grid; gap: 3px; min-width: 0; }
.admin-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-row-top strong { color: var(--bright); }
.admin-row-detail { margin: 0; color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.admin-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.admin-input { min-height: 32px; width: 170px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: 0.8125rem; }
.admin-status { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); font: 600 0.625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.admin-status.status-approved { color: var(--live); border-color: #1f4d33; }
.admin-status.status-declined { color: var(--accent-text); border-color: #7a1f25; }
.admin-secret { display: grid; gap: 8px; padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--goldenrod); border-radius: var(--radius); background: rgb(218 165 32 / .08); }
.admin-secret p { margin: 4px 0 0; color: var(--text); }
.admin-secret code { padding: 2px 6px; border-radius: 4px; background: var(--black); color: var(--gold-text); font-size: 0.9375rem; user-select: all; }
.password-form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); gap: var(--space-3); width: 100%; }
.password-form h3 { margin: 0; font-size: 1rem; }
@media (max-width: 700px) { .admin-row { grid-template-columns: 1fr; } .admin-actions { justify-content: flex-start; } .admin-input { width: 100%; } }

/* ------------------------------------------------------------ wide desktop: three columns
   sidebar | stats + map | Latest Incidents / Live Radio Calls (owner, 2026-10-24) */
@media (min-width: 1440px) {
  .dashboard {
    width: calc(100% - 48px);
    grid-template-columns: 300px minmax(0, 1.25fr) minmax(480px, 1fr);
    grid-template-areas: "side stats feed" "side map feed";
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    /* one screen: no page scroll; only the incident list scrolls (owner 2026-10-27) */
    height: calc(100dvh - var(--topbar-h) - 2 * var(--space-4) - var(--footer-h, 54px));
    min-height: 560px;
    margin-block: var(--space-4);
  }
  .sidebar { grid-area: side; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .dashboard-main { display: contents; }
  .stats-row { grid-area: stats; }
  .incident-map-panel { grid-area: map; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .incident-map-panel .map-stage { flex: 1 1 auto; height: auto; min-height: 180px; }
  .incidents-panel {
    grid-area: feed; align-self: start; position: sticky; top: calc(var(--topbar-h) + var(--space-3));
    display: flex; flex-direction: column; max-height: 100%;
  }
  .incidents-panel .incident-scroll { flex: 1 1 auto; max-height: none; min-height: 0; overflow: auto; }
  .incidents-panel .incident-body.has-media { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) { .topbar-links .top-link { display: none; } .ticker { max-width: none; } }
@media (max-width: 1000px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar .feed-list { grid-column: 1 / -1; }
  .incident-scroll { max-height: min(62vh, 680px); min-height: 260px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 6px; }
  .topbar-links { display: none; }
  .top-date, .top-divider { display: none; }
}
/* Phone (760 px and narrower): one column; the order is set below. */
@media (max-width: 760px) {
  .incident-body.has-media { grid-template-columns: minmax(0, 1fr); }
  .incidents-panel, .incident-map-panel, .side-block, .stats-row, .top-incidents { min-width: 0; max-width: 100%; }
  .incident-scroll, .mini-list { min-width: 0; }
  .incident-media { order: -1; }
  .dashboard { display: flex; flex-direction: column; gap: var(--space-3); }
  .sidebar, .dashboard-main { display: contents; }
  /* Phone: Audience view, then the main Latest Incidents feed, then the map and the controls. */
  .dashboard { align-items: stretch; }
  #sec-audience { order: 1; text-align: center; }
  #sec-audience .side-head { justify-content: center; }
  #sec-audience .audience-toggle { max-width: 520px; margin-inline: auto; }
  #sec-boroughs, #sec-controls { text-align: center; }
  #sec-boroughs .borough-tabs { justify-content: center; max-width: 520px; margin-inline: auto; }
  #sec-boroughs .borough-tab { justify-content: center; }
  #sec-controls > :not(.eyebrow) { max-width: 460px; margin-inline: auto; }
  #sec-controls .control-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--space-2); text-align: left; margin-bottom: 10px; }
  #sec-controls .chip-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  #sec-controls .select { width: 100%; min-width: 0; }
  #sec-controls .toggle { justify-content: center; }
  #sec-controls .refresh-label { justify-content: center; display: flex; }
  .live-filter-row { scrollbar-width: none; }
  .live-filter-row::-webkit-scrollbar { display: none; }
  .incidents-panel { order: 2; }
  .incident-map-panel { order: 3; }
  #sec-boroughs { order: 4; }
  #sec-controls { order: 5; }
  .stats-row { order: 6; }
  #sec-status { order: 7; }
  .top-incidents { display: none; }
  .incidents-panel .incident-scroll { max-height: none; min-height: 0; overflow: visible; }
  .live-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; } .live-filter-row .control-label, .live-filter-chip { flex: 0 0 auto; }
  .map-stage { height: 46dvh; min-height: 280px; }
}
@media (max-width: 560px) {
  .topbar { grid-template-columns: 1fr auto; grid-template-areas: "brand menu" "status status" "ticker ticker"; min-height: 0; padding: 8px 12px; gap: 6px; }
  .brand { grid-area: brand; } .brand-logo { width: 42px; height: 42px; } .brand-caption { display: none; }
  .menu-button { grid-area: menu; } .topbar-status { grid-area: status; font-size: 0.625rem; } .ticker { grid-area: ticker; }
  .borough-tabs, .audience-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .incident-card { padding: 13px 13px 12px 16px; }
  .incident-time { margin-inline-start: 0; width: 100%; }
  .incident-facts { grid-template-columns: 1fr; }
  .incident-fact { border-inline-start: 0; margin-inline-start: 0; border-top: 1px solid var(--line); margin-top: -1px; }
  .incident-scroll { min-height: 0; }
  .stat-value { font-size: 21px; } .stat-caption { font-size: 0.5rem; }
  .main-footer { flex-direction: column; align-items: center; gap: 6px; }
  .arrival { top: auto; bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
  .toast-stack { bottom: 170px; }
  .drawer-actions .button { flex: 1 1 45%; }
}
@media (max-width: 360px) { .stats-row { grid-template-columns: 1fr; } }

@media (hover: none) { .incident-card:hover { border-color: var(--line); } }
@media (forced-colors: active) { .incident-card, .mini-card, .filter-chip, .button, .tier-card, .borough-tab, .category-tag, .presentation-badge { border: 1px solid CanvasText; } }

/* ------------------------------------------------------------ staff console */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: 1rem; }
.field input[type="file"] { color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.console-wrap { width: min(1440px, 100% - 2 * max(var(--space-4), env(safe-area-inset-left))); }
.console-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.console-head h1 { margin: 0; }
.console-status { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font: 500 0.75rem var(--mono); }
.console-status span { display: inline-flex; align-items: center; gap: 6px; }
.console-me { color: var(--bright); }
.console-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-500); }
.console-dot.is-ok { background: var(--live); box-shadow: 0 0 0 3px rgb(74 222 128 / .15); }
.console { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.console-nav { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); display: grid; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.console-nav a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 0.875rem; }
.console-nav a:hover { color: var(--bright); background: var(--panel3); }
.console-nav a.is-on { color: var(--bright); background: var(--panel3); box-shadow: inset 3px 0 0 var(--accent); }
.console-nav-home { font-weight: 700; }
.console-nav-group { display: grid; gap: 2px; }
.console-nav-title { padding: 0 10px 4px; color: var(--faint); font: 600 0.6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.console-main { min-width: 0; }
.console-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-5); }
.console-panel-head { margin-bottom: var(--space-4); }
.console-panel-head h2 { margin: 0; font-size: 1.375rem; }
.console-panel-head .eyebrow { margin-bottom: 4px; }
.console-lead { color: var(--muted); max-width: 75ch; margin: 0 0 var(--space-4); }
.console-sub { margin: var(--space-5) 0 var(--space-3); font-size: 1rem; }
.console-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.console-tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-900); padding: var(--space-4); }
.console-tile h3 { margin: 0 0 var(--space-2); font-size: 0.9375rem; }
.console-tile ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; }
.stat-link { text-decoration: none; color: inherit; } .stat-link:hover { border-color: var(--line-strong); }
.console-filters { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
/* Transcript corrections (owner 2026-10-31) */
.console-subhead { margin: var(--space-5) 0 var(--space-3); font: 800 1rem var(--display); color: var(--bright); }
/* the latest-calls strip above Latest Incidents (owner 2026-11-01, like /widget/live's card strip): swipe or scroll */
.incident-strip { flex: none; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 2px 2px 10px; margin: 0 0 6px; }
.incident-strip[hidden] { display: none; }
.incident-strip::-webkit-scrollbar { display: none; }
.strip-card { --level: var(--line-strong); flex: 0 0 196px; scroll-snap-align: start; display: grid; align-content: start; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--level); border-radius: 10px; background: var(--panel2); color: var(--text); font: inherit;
  text-align: left; cursor: pointer; }
.strip-card:hover { border-color: var(--line-strong); border-left-color: var(--level); }
.strip-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.strip-card.breaking { --level: #e31b23; } .strip-card.developing { --level: #ff7a1a; } .strip-card.incident { --level: #daa520; } .strip-card.activity { --level: #6aa8ff; }
.strip-top { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 .6875rem/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.strip-level { color: var(--level); }
.strip-upd { padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; color: var(--gold-text, #f0b429); }
.strip-time { margin-left: auto; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.strip-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--bright); }
.strip-where { font: 600 .6875rem/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .strip-card { flex-basis: 62%; } }
.transcript-row audio { width: 100%; max-width: 520px; height: 34px; margin: 6px 0; }
.transcript-text { width: 100%; box-sizing: border-box; min-height: 64px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel2); color: var(--bright); font: 500 0.9375rem/1.45 var(--sans, inherit); resize: vertical; }
.transcript-text:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.transcript-row.is-done { border-color: rgb(74 222 128 / .45); }
.transcript-row.is-locked { opacity: .6; border-style: dashed; }
.console-filter { display: grid; gap: 4px; color: var(--muted); font-size: 0.75rem; }
.console-filter select, .admin-select { min-height: 34px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); }
.console-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 640px; }
.console-search input { flex: 1; min-width: 0; min-height: 38px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--ink-900); color: var(--text); }
.console-form { max-width: 640px; }
.console-details { margin-top: var(--space-4); border-top: 1px solid var(--line, rgb(255 255 255 / .12)); padding-top: var(--space-3); }
.console-details > summary { cursor: pointer; font-weight: 700; color: var(--bright); }
.console-details[open] > summary { margin-bottom: var(--space-3); }
.console-details code { overflow-wrap: anywhere; }
.console-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.console-two .console-form { max-width: none; }
.console-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.console-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 0.875rem; }
.console-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.console-toggle { font-weight: 600; margin-bottom: var(--space-4); }
.console-create { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-900); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.console-create summary { cursor: pointer; font-weight: 600; color: var(--bright); }
.console-create[open] summary { margin-bottom: var(--space-4); }
.console-callout { border: 1px solid var(--line-strong); border-left: 3px solid var(--blue); border-radius: var(--radius); background: var(--ink-900); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.console-callout p { margin: 4px 0 0; color: var(--muted); }
.console-callout code, .console-lead code { color: var(--gold-text); }
.console-warn { border-left-color: var(--goldenrod); }
.console-code { max-height: 280px; overflow: auto; padding: var(--space-3); border-radius: 6px; background: var(--black); border: 1px solid var(--line); color: var(--ink-200); font: 0.8125rem/1.5 var(--mono); white-space: pre; }
.console-mono { font: 0.8125rem/1.5 var(--mono) !important; }
.console-json summary { cursor: pointer; color: var(--faint); font-size: 0.75rem; }
.console-json pre { max-height: 240px; overflow: auto; margin: 6px 0 0; padding: var(--space-2); border-radius: 6px; background: var(--black); color: var(--ink-200); font: 0.75rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.console-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.console-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.console-table th { text-align: left; padding: 8px 10px; background: var(--ink-900); color: var(--faint); font: 600 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.console-table td { padding: 8px 10px; border-top: 1px solid var(--line); color: var(--text); vertical-align: top; overflow-wrap: anywhere; }
.console-ok { color: var(--live); font-weight: 600; } .console-bad { color: var(--accent-text); }
/* Plus console (site-r54): the pending count on the category, proof files inline */
/* Signed-in devices on the account page (site-r55) */
.account-sessions { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.account-session { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.account-session > span:nth-child(2) { grid-column: 1; }
.account-session > button { grid-column: 2; grid-row: 1 / span 2; }
.console-badge { display: inline-block; min-width: 18px; margin-inline-start: 6px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 0.625rem/1.5 var(--mono); text-align: center; letter-spacing: 0; vertical-align: middle; }
.courtesy-proofs { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 6px; }
.courtesy-proofs img { display: block; max-width: 220px; max-height: 160px; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; background: var(--black); }
.admin-status.status-pending { color: var(--gold-text); border-color: #6b5313; }
.og-preview { margin: 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--ink-900); }
.og-preview img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--black); }
.og-preview figcaption { display: grid; gap: 4px; padding: var(--space-3) var(--space-4); }
.og-preview figcaption span { color: var(--muted); font-size: 0.8125rem; }
.og-preview .og-host { color: var(--faint); font: 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* -------------------------------------------------------------- your account */
.account-wrap { width: min(1100px, 100% - 2 * max(var(--space-4), env(safe-area-inset-left))); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.account-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-5); min-width: 0; }
.account-card h2 { margin: 0 0 var(--space-4); font-size: 1.125rem; }
.account-card-wide { grid-column: 1 / -1; }
.account-facts { display: grid; gap: 10px; margin: 0 0 var(--space-4); }
.account-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); }
.account-facts dt { color: var(--faint); font: 600 0.6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.account-facts dd { margin: 0; color: var(--bright); overflow-wrap: anywhere; }
.account-pending { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--space-3); margin-bottom: var(--space-4); border: 1px solid #6b5313; border-radius: 6px; background: rgb(218 165 32 / .08); color: var(--text); }
.account-notice { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius); border: 1px solid var(--line-strong); }
.account-notice.is-ok { border-color: #1f4d33; background: rgb(74 222 128 / .08); }
.account-notice.is-warn { border-color: #6b5313; background: rgb(218 165 32 / .08); }
.account-notice span { color: var(--muted); }
.account-inline { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.account-inline .field { flex: 1 1 260px; margin: 0; }
.account-key { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.menu-account-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console-nav { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .console-two, .account-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .console-panel, .account-card { padding: var(--space-4); }
  .account-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .console-search { flex-wrap: wrap; }
}

.map-fit-button { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: rgb(0 0 0 / .82); color: var(--bright); font: 600 0.75rem var(--sans); cursor: pointer; }
.map-fit-button:hover { border-color: var(--accent); }
/* Map layers: subway, electric, gas, data (owner 2026-10-27) */
.map-layers { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.map-layer-button.is-on { border-color: var(--accent); background: rgb(227 27 35 / .28); }
.map-fit-button:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
.map-layers-panel { display: flex; flex-direction: column; gap: 2px; width: min(250px, 70vw); max-height: 60vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgb(10 10 12 / .94); color: var(--text); font: 0.75rem var(--sans); }
.map-layer-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 6px; cursor: pointer; }
.map-layer-row:hover { background: var(--panel2); }
.map-layer-row input { margin-top: 2px; accent-color: var(--accent); }
.map-layer-row b { display: block; font-weight: 700; color: var(--bright); }
.map-layer-row small { display: block; color: var(--muted); font-size: 0.6875rem; }
.map-layer-row.is-loading { opacity: .6; cursor: progress; }
.voltage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 4px; color: var(--muted); font: 0.625rem var(--mono); }
.voltage-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.subway-tooltip { font: 600 0.75rem var(--sans); }
.map-layer-popup { display: flex; flex-direction: column; gap: 5px; font: 0.8125rem var(--sans); }
.map-layer-popup strong { font-size: 0.875rem; }
.map-layer-source { color: var(--faint); font: 0.625rem var(--mono); }
.subway-bullets { display: flex; flex-wrap: wrap; gap: 4px; }
.subway-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 0.75rem var(--sans); }
.subway-bullet.dark { color: #000; }
.subway-access { color: var(--muted); } .subway-access.is-accessible { color: var(--green); }

.stat-online .stat-value { color: var(--logo-red); }

.top-link-mdt { color: var(--accent-text); font-weight: 700; }

/* Staff console menu: red category titles, a rule between Overview and each category (owner 2026-10-25). */
.console-nav { gap: 0; }
.console-nav-home { margin-bottom: var(--space-3); }
.console-nav-group { padding-block: var(--space-3); border-top: 1px solid var(--line-strong); }
.console-nav-group:last-child { padding-bottom: 0; }
.console-nav-title { color: var(--accent-text); padding-bottom: 6px; }
@media (max-width: 960px) { .console-nav { gap: var(--space-3); } .console-nav-group { border-top: 0; padding-block: 0; } .console-nav-home { margin-bottom: 0; } }
/* Manage user form, opened under the account row. */
.admin-row:has(.admin-edit:not([hidden])) { grid-template-columns: 1fr; }
.admin-edit { grid-column: 1 / -1; max-width: none; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.admin-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }

.register-invite { margin: 0 0 var(--space-4); padding: 10px 14px; border: 1px solid #1f4d33; border-radius: 8px; color: var(--bright); background: rgb(34 197 94 / .08); }
.register-invite.is-invalid { border-color: #6b5313; background: rgb(234 179 8 / .08); }

/* "Was this useful?" votes on cards, and the community review prompt (old dashboard parity). */
.incident-vote-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.vote-caption { color: var(--muted); font-size: 0.75rem; max-width: 52ch; }
.vote-caption b { display: block; color: var(--faint); font: 600 0.625rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.vote-status { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--text, #fff); font-weight: 600; }
.vote-live { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
:root[data-votes-live="on"] .vote-live { background: #5dffa0; box-shadow: 0 0 6px #5dffa0; }
.incident-vote-row.vote-bump .vote-status { animation: vote-bump .9s ease-out; }
@keyframes vote-bump { from { color: #ffd400; } }
@media (prefers-reduced-motion: reduce) { .incident-vote-row.vote-bump .vote-status { animation: none; } }
.vote-controls { display: inline-flex; gap: var(--space-2); }
.vote-button { display: inline-flex; align-items: center; gap: 6px; min-width: 56px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--bright); font: 600 0.8125rem var(--mono); cursor: pointer; }
.vote-button:hover:not([disabled]) { border-color: var(--accent); }
.vote-button.is-on { border-color: var(--accent); background: var(--red-deep); }
.vote-button[disabled]:not(.is-on) { opacity: .55; cursor: default; }
.community-prompt { position: fixed; inset-inline-end: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 76; width: min(360px, calc(100% - 2 * var(--space-4))); padding: var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel2); box-shadow: 0 18px 55px rgb(0 0 0 / .6); display: grid; gap: 6px; }
.community-prompt .eyebrow { color: var(--accent-text); margin: 0; }
.community-prompt strong { font: 800 1rem/1.35 var(--display); }
.community-prompt p { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.community-call { color: var(--bright); font-weight: 600; }
.community-close { position: absolute; top: 6px; inset-inline-end: 8px; border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.community-close:hover { color: var(--bright); }

/* Staff console: sitewide email editor (the message area looks like the email: white card, dark text) */
.email-editor { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--ink-900); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.25); }
.email-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--ink-850); }
.email-tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-right: 1px solid var(--line); }
.email-tool-group:last-child, .email-tool-end { border-right: 0; }
.email-tool-end { margin-left: auto; }
.email-tool { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 0.9375rem; line-height: 1; cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.email-tool:hover { background: var(--ink-800); color: var(--bright); }
.email-tool[aria-pressed="true"], .email-tool.is-open { background: rgba(227, 27, 35, 0.16); border-color: rgba(227, 27, 35, 0.45); color: var(--bright); }
.email-tool:focus-visible, .email-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.email-toolbar.is-source .email-tool:not([data-cmd="source"]), .email-toolbar.is-source .email-select { opacity: 0.35; pointer-events: none; }
.field .email-toolbar select.email-select { width: auto; min-width: 0; min-height: 32px; height: 32px; padding: 0 26px 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background-color: var(--ink-800); color: var(--text); font-size: 0.8125rem; cursor: pointer; }
.field .email-toolbar select.email-select:hover { border-color: var(--muted); }
.field .email-toolbar select.email-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field .email-toolbar select.email-select-size { width: 6.5rem; }
.email-color-tool { position: relative; grid-template-rows: 1fr 4px; padding: 4px 6px 5px; }
.email-color-letter { font-weight: 800; font-size: 0.9375rem; }
.email-color-letter.is-highlight { padding: 0 3px; border-radius: 3px; background: #fff3a3; color: #1a1a1a; }
.email-color-bar { display: block; width: 18px; height: 4px; border-radius: 2px; }
.email-pop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--ink-800); }
.email-pop-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; }
.email-pop-field { flex: 1 1 14rem; }
.field .email-editor .email-pop input[type="text"] { min-height: 36px; padding: 6px 10px; font-size: 0.9375rem; }
.email-pop-actions { display: inline-flex; gap: 6px; }
.email-swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.email-swatch { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; }
.email-swatch:hover { transform: scale(1.12); }
.email-swatch-none { background: linear-gradient(135deg, #ffffff 45%, #e31b23 45%, #e31b23 55%, #ffffff 55%); }
.email-custom-color { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8125rem; }
.field .email-editor .email-custom-color input[type="color"] { width: 32px; min-height: 0; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: none; cursor: pointer; }
.email-body { min-height: 320px; max-height: 70vh; overflow: auto; padding: 24px 28px; background: #ffffff; color: #1a1a1a; font: 16px/1.6 Arial, Helvetica, sans-serif; outline: none; caret-color: #e31b23; }
.email-body:empty::before { content: "Write your message…"; color: #9a9a9a; }
.email-body p { margin: 0 0 0.9em; }
.email-body h1, .email-body h2, .email-body h3 { margin: 0.4em 0 0.5em; line-height: 1.25; color: #111111; }
.email-body hr { border: 0; border-top: 1px solid #dddddd; margin: 1.2em 0; }
.email-body a { color: #c4141b; text-decoration: underline; }
.email-body img { max-width: 100%; height: auto; }
.email-body blockquote { margin: 0 0 0.9em 4px; padding-left: 12px; border-left: 3px solid #d0d0d0; color: #444444; }
.email-body:focus-visible { box-shadow: inset 0 0 0 2px rgba(26, 115, 232, 0.6); }
.email-source { display: block; width: 100%; min-height: 320px; padding: 14px; border: 0; background: #0b0b0b; color: #e8e8e8; font: 13px/1.5 "DM Mono", ui-monospace, monospace; resize: vertical; }
.mail-block { margin-top: var(--space-5); }
.mail-block h3 { margin: 0 0 var(--space-3); font-size: 1rem; color: var(--bright); }
.mail-block .admin-list { margin-top: var(--space-3); }
.mail-address { display: flex; align-items: stretch; }
.field .mail-address input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mail-address span { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 6px 6px 0; background: var(--ink-850); color: var(--muted); font-size: 0.9375rem; white-space: nowrap; }
.mail-usage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-usage-bar { display: inline-block; width: 140px; height: 6px; border-radius: 3px; background: var(--ink-800); overflow: hidden; }
.mail-usage-fill { display: block; height: 100%; background: var(--live); }
.mail-usage.is-full .mail-usage-fill { background: var(--accent-text); }
.console-callout.mail-warning { border-left-color: var(--gold-text); }

/* radio log lines (round 22): the call's radio traffic between published updates */
.card-update.is-radio .card-update-kind { color: var(--muted); }
.card-update.is-radio .card-update-change { color: var(--text, inherit); }
#drawer-timeline li.is-radio .incident-update-agency { color: var(--muted); }

/* Phone layout: the incident list sits above the map. Until the first cards render, the empty list keeps
   the space they will take, so the map is not pushed down when they arrive (layout shift). */
@media (max-width: 760px) { #feed:empty { min-height: 200vh; } }

/* ------------------------------------------------------------ Live Radio Feed (homepage control head) */
/* The radio takes the whole stats row, the four cards below it; where the row is wide enough (about 760 px:
   viewports from 1110 to 1439 px, and from 1750 px) it spans two columns and two rows, On the map / Online
   users beside it and Published incidents / Updates under them at half height (2fr / 1fr rows). */
.stats-row .radio-card { grid-column: 1 / -1; min-height: 0; padding: 10px 12px 12px; gap: 8px; }
.stat-compact { min-height: 0; padding: 8px 12px; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; align-content: center; }
.stat-compact .stat-label { grid-column: 1 / -1; }
.stat-compact .stat-value { font-size: clamp(18px, 1.6vw, 22px); }
.stat-compact .stat-caption { font-size: 0.5625rem; }
@media (min-width: 1110px) and (max-width: 1439.98px), (min-width: 1750px) {
  .stats-row { grid-template-rows: 2fr 1fr; }
  .stats-row .radio-card { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .stats-row .stat-card:not(.radio-card):not(.stat-compact) { min-height: 0; }
}
.radio-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.radio-card-head h2 { margin: 0; }
.radio-credit { color: var(--faint); font: 500 0.5625rem var(--mono); letter-spacing: .04em; }
.radio { --head: #1b1d20; --head-edge: #2c2f34; --lcd: #e9eef3; --lcd-ink: #0e1116; --lcd-dim: #6b7380; --lcd-bar: #1d5fc4; }
.radio-body {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; align-items: stretch;
  padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #24272b, var(--head) 40%, #141517);
  border: 1px solid var(--head-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.45);
}
.radio-side { display: grid; justify-items: center; align-content: space-between; gap: 8px; }
.radio-center { display: grid; gap: 6px; min-width: 0; }
.radio-brand { color: #c9ccd1; font: 800 0.625rem var(--display); letter-spacing: .32em; text-align: center; }
.radio-screen {
  background: var(--lcd); color: var(--lcd-ink); border-radius: 4px; border: 2px solid #0a0b0c;
  box-shadow: inset 0 0 10px rgba(0,0,0,.25); display: grid; grid-template-rows: auto 1fr auto auto; min-height: 112px; overflow: hidden;
}
.radio-status { display: flex; align-items: center; gap: 8px; padding: 3px 6px 0; font: 700 0.5625rem var(--mono); color: var(--lcd-ink); }
.radio-signal { display: inline-flex; color: var(--lcd-ink); }
/* no audio: a red X; audio playing: green bars, alternating between 3 and 4 (the fourth is the tallest) */
.radio-signal .bar { fill: #13893f; opacity: 0; }
.radio-signal .nosig { stroke: #d3202c; stroke-width: 2.2; opacity: 1; }
.radio.is-rx .radio-signal .nosig { opacity: 0; }
.radio.is-rx .radio-signal .bar { opacity: 1; }
.radio.is-rx .radio-signal .b4 { animation: radio-bar4 .9s steps(1, end) infinite; }
@keyframes radio-bar4 { 0% { opacity: 1; } 50% { opacity: 0; } }
.radio-icon { padding: 0 3px; border: 1px solid currentColor; border-radius: 2px; font-size: 0.5rem; line-height: 1.3; opacity: .25; }
.radio-icon.is-on, .radio-follow-icon { opacity: 1; }
.radio-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.radio-line {
  display: flex; align-items: center; justify-content: center; padding: 2px 6px; text-align: center;
  font: 800 clamp(1rem, 2vw, 1.4rem) var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--lcd-ink);
  white-space: nowrap; overflow: hidden;
}
.radio-bar { background: var(--lcd-bar); color: #fff; text-align: center; font: 700 0.625rem var(--mono); letter-spacing: .06em; padding: 3px 6px; min-height: 1.5em; }
.radio-softlabels { display: grid; grid-template-columns: repeat(5, 1fr); background: #d5dbe2; border-top: 1px solid #b9c1cb; }
.radio-softlabels span { text-align: center; font: 700 0.625rem var(--sans); padding: 3px 0; color: var(--lcd-ink); border-left: 1px solid #b9c1cb; }
.radio-softlabels span:first-child { border-left: 0; }
.radio-softkeys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.radio-softkeys button, .radio-small {
  height: 22px; border-radius: 5px; border: 1px solid #0b0c0d; color: #d7dade; font: 700 0.625rem var(--mono); cursor: pointer;
  background: linear-gradient(180deg, #3a3e44, #24272b); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 #0b0c0d;
}
.radio-softkeys button:active, .radio-small:active, .radio-power:active, .radio-emergency:active, .radio-knob:active { transform: translateY(1px); }
.radio-lower { display: flex; align-items: center; justify-content: space-between; }
.radio-small { width: 34px; }
.radio-led { width: 8px; height: 8px; border-radius: 50%; background: #10233a; box-shadow: inset 0 0 2px #000; }
.radio.is-rx .radio-led { background: #3fa3ff; box-shadow: 0 0 8px #3fa3ff; animation: radio-led .5s steps(1, end) infinite; }
@keyframes radio-led { 50% { opacity: .2; } } /* opacity, not box-shadow: the blink stays on the compositor */
.radio-power {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid #0b0c0d; cursor: pointer; color: #3ddc84; font-size: 1.05rem;
  background: linear-gradient(180deg, #34383d, #1e2124); box-shadow: inset 0 0 0 2px rgba(61,220,132,.55), 0 2px 0 #0b0c0d;
}
.radio-knob {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #0b0c0d; cursor: pointer;
  background: repeating-conic-gradient(#2c3035 0 6deg, #1b1e21 6deg 12deg); box-shadow: inset 0 0 0 6px #23262a, 0 3px 6px rgba(0,0,0,.6);
}
.radio-knob-small { width: 44px; height: 44px; }
.radio-knob-dial { position: absolute; inset: 0; border-radius: 50%; transition: transform .22s cubic-bezier(.3,.7,.3,1); }
.radio-knob-mark { position: absolute; left: 50%; top: 7px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 2px; background: #e6e8eb; }
.radio-port { display: grid; grid-template-columns: repeat(3, 6px); gap: 4px; padding: 8px; border-radius: 50%; background: #101113; border: 2px solid #2a2d31; }
.radio-port i { width: 6px; height: 6px; border-radius: 50%; background: #2b2e33; }
.radio-emergency {
  position: relative; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 2px solid #3a1a07;
  background: radial-gradient(circle at 35% 30%, #ff9a4d, #e35a0f 55%, #9c3a06); box-shadow: 0 2px 0 #0b0c0d;
}
/* the follow flash: a glow layer whose opacity blinks (compositor only); animating box-shadow and filter on the
   button itself restyled and repainted the page every frame while follow was on */
.radio-emergency::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(255,255,255,.2); box-shadow: 0 0 0 3px rgba(255,140,40,.55), 0 0 18px 6px rgba(255,120,20,.9);
}
.radio.is-follow .radio-emergency::after { animation: radio-follow 5s linear infinite; }
@keyframes radio-follow { 0%, 19.99% { opacity: 1; } 20%, 100% { opacity: 0; } }
.radio-pad { width: 44px; height: 44px; transform: rotate(45deg); border-radius: 8px; background: linear-gradient(135deg, #34383d, #1c1f22); border: 1px solid #0b0c0d; display: grid; place-items: center; }
.radio-pad i { width: 12px; height: 12px; border-radius: 50%; background: #111214; }
.radio.is-off .radio-screen { background: #1a1d20; }
.radio.is-off .radio-screen > * { visibility: hidden; }
.radio.is-off .radio-power { color: #4a5058; box-shadow: inset 0 0 0 2px rgba(120,120,120,.35), 0 2px 0 #0b0c0d; }
.radio button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) {
  .radio-body { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; padding: 8px; }
  .radio-knob { width: 40px; height: 40px; }
  .radio-knob-small { width: 36px; height: 36px; }
  .radio-port, .radio-pad { display: none; }
  .radio-softlabels span { font-size: 0.5625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .radio.is-rx .radio-signal .bar, .radio.is-rx .radio-led { animation: none; opacity: 1; }  /* steady 4 bars */
  .radio.is-follow .radio-emergency { animation: none; box-shadow: 0 0 0 3px rgba(255,140,40,.55); }
}

/* ------------------------------------------------------------ apx8500.nycalert.ai: the radio on its own page */
.radio-page { background: var(--bg); min-height: 100dvh; display: flex; flex-direction: column; }
.radio-page-main { flex: 1 0 auto; width: min(760px, 100% - 2 * max(16px, env(safe-area-inset-left))); margin: 0 auto; padding-block: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.radio-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.radio-page-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bright); text-decoration: none; font: 800 1.125rem var(--display); letter-spacing: .02em; }
.radio-page-brand b { color: var(--accent-text); }
.radio-page-head h1 { margin: 0; font: 800 clamp(1.25rem, 3vw, 1.75rem) var(--display); color: var(--bright); }
.radio-page-card, .radio-page-help { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--space-4); display: grid; gap: var(--space-3); }
.radio-page-card .radio-line { font-size: clamp(1.25rem, 4vw, 2rem); }
.radio-page-card .radio-screen { min-height: 150px; }
.radio-page-latest { margin: 0; color: var(--text); font-size: 0.875rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.radio-page-help dl { margin: 0; display: grid; gap: var(--space-2); }
.radio-page-help dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-3); }
.radio-page-help dt { color: var(--bright); font: 700 0.8125rem var(--sans); }
.radio-page-help dd { margin: 0; color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 520px) { .radio-page-help dl div { grid-template-columns: 1fr; gap: 2px; } }

/* OWNER 2026-10-29: "a really dark map": the Esri base tiles at half brightness, street labels and pins untouched */
.map-base-dim { filter: brightness(0.5); }

/* The sign-up prompt (app.js showSignupPrompt): signed-out visitors, after 30 seconds */
.signup-prompt { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel2);
  color: var(--text); box-shadow: 0 24px 70px rgb(0 0 0 / .7), 0 0 0 1px rgb(227 27 35 / .15); }
.signup-prompt::backdrop { background: rgb(0 0 0 / .6); }
.signup-prompt[open] { animation: signup-in 220ms ease-out; }
.signup-prompt-body { position: relative; display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-4); border-top: 3px solid var(--accent); border-radius: 14px; }
.signup-prompt-body .eyebrow { margin: 0; color: var(--accent-text); }
.signup-prompt h2 { margin: 0; color: var(--bright); font: 800 1.5rem/1.2 var(--display); }
.signup-prompt p { margin: 0; color: var(--muted); }
.signup-prompt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.signup-prompt-actions .button { flex: 1 1 160px; }
.signup-prompt-later { justify-self: center; padding: 6px 10px; border: 0; background: none; color: var(--faint); font: inherit; font-size: 0.875rem; cursor: pointer; }
.signup-prompt-later:hover { color: var(--text); }
.signup-prompt-x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.signup-prompt-x:hover { background: var(--panel3); color: var(--bright); }
.signup-prompt :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes signup-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .signup-prompt[open] { animation: none; } }
/* site-r158: actions under an app message */
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ===================================================================================== staff console, site-r159
   Owner 2026-11-07: option A (dashboard + sidebar), D (Live ops), B (Inbox, two-way), C (member table). The console
   takes the whole window: the site header and footer step aside while it is open. */
body.is-console .topbar, body.is-console .main-footer, body.is-console .mobile-nav, body.is-console .skip-link { display: none; }
body.is-console { background: var(--bg); }
.view-console { padding: 0; }
.console-gate-wrap { padding-block: var(--space-6); }
body.is-console .console-gate-wrap { display: none; }
.ci { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ci-xl { width: 34px; height: 34px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.console { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; gap: 0; align-items: stretch; }
.console-side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; border-right: 1px solid var(--line); background: #080808; }
.console-logo { display: flex; align-items: center; gap: 10px; padding: 2px 4px; text-decoration: none; }
.console-logo img { width: 30px; height: 30px; }
.console-logo b { font: 900 0.9375rem var(--display); letter-spacing: .02em; color: #fff; }
.console-logo b span { color: var(--accent); }
.console-staff { margin-left: auto; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); font: 500 0.625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.console-jump { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--faint); }
.console-jump:focus-within { border-color: var(--line-strong); }
.console-jump input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 0.8125rem var(--sans); outline: none; }
.console-jump kbd { font: 500 0.625rem var(--mono); padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--faint); }
.console-nav { position: static; display: grid; gap: 1px; padding: 0; border: 0; background: transparent; }
.console-nav .console-link { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 0.84375rem; font-weight: 500; }
.console-nav .console-link:hover { color: var(--bright); background: var(--panel3); }
.console-nav .console-link.is-on { color: var(--bright); background: var(--panel3); box-shadow: inset 2px 0 0 var(--accent); }
.console-nav .console-link.is-active { color: var(--bright); }
.console-nav .console-link .console-badge, .console-subnav .console-badge { margin-left: auto; }
.console-nav [hidden] { display: none; }
.console-subnav { display: grid; gap: 1px; margin: 2px 0 6px 25px; padding-left: 8px; border-left: 1px solid var(--line); }
.console-subnav a { display: flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 0.8125rem; }
.console-subnav a:hover { color: var(--bright); background: var(--panel3); }
.console-subnav a.is-on { color: var(--bright); background: var(--panel3); }
.console-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.console-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2a1012; color: var(--accent-text); font: 700 0.6875rem var(--sans); }
.console-me-text { display: grid; min-width: 0; font-size: 0.75rem; color: var(--faint); }
.console-me-text b { color: #fff; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-me-link { margin-left: auto; color: var(--faint); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; }
.console-me-link:hover { color: #fff; background: var(--panel3); }
.console-main { min-width: 0; padding: 22px 32px 48px; display: grid; gap: 20px; align-content: start; }
.console-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.console-top h1 { margin: 2px 0 0; font: 800 1.5rem var(--display); letter-spacing: -.01em; color: var(--bright); }
.console-status { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font: 500 0.75rem var(--mono); }
.console-status span { display: inline-flex; align-items: center; gap: 6px; }
.console-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #444; }
.console-dot.is-ok { background: var(--live); box-shadow: 0 0 0 3px rgb(74 222 128 / .14); }
.console-dot.is-warn { background: var(--goldenrod); }
.console-dot.is-bad { background: var(--accent); }
.console-dot.is-off { background: #444; }
body.is-console .console-panel { border: 0; background: transparent; padding: 0; min-width: 0; }
.console-skeleton { display: grid; gap: 12px; }
.console-skeleton span { height: 64px; border-radius: 12px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel3) 50%, var(--panel) 100%); background-size: 200% 100%; animation: console-shimmer 1.2s linear infinite; }
.console-skeleton span:first-child { height: 96px; }
@keyframes console-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .console-skeleton span { animation: none; } }

/* dashboard pieces (Overview, Live ops) */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dash-kpi { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: inherit; text-decoration: none; }
a.dash-kpi:hover { border-color: var(--line-strong); }
.dash-kpi b { font: 800 1.75rem/1 var(--display); color: var(--bright); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-label { color: var(--faint); font: 500 0.6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dash-note { color: var(--faint); font: 500 0.75rem var(--mono); }
.dash-note.is-up { color: var(--live); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-side { display: grid; gap: 18px; }
.dash-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.dash-card-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dash-card-head h2 { margin: 0; font: 700 0.875rem var(--sans); color: var(--bright); }
.dash-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.78125rem; text-decoration: none; }
a.dash-more:hover { color: #fff; }
.dash-queue { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1a1a1a; }
.dash-queue:last-child { border-bottom: 0; }
.dash-qi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel3); color: var(--muted); }
.dash-qi.tone-red { background: rgb(227 27 35 / .12); color: var(--red-text); }
.dash-qi.tone-gold { background: rgb(218 165 32 / .12); color: var(--gold-text); }
.dash-qi.tone-violet { background: rgb(180 140 255 / .1); color: var(--violet-text); }
.dash-qi.tone-blue { background: rgb(106 168 255 / .1); color: var(--blue-text); }
.dash-q-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--bright); font-weight: 600; font-size: 0.875rem; }
.dash-q-sub { color: var(--muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-clear { color: var(--faint); font-size: 0.78125rem; }
.dash-pill { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); font: 500 0.65625rem var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.dash-pill.tone-red { color: var(--red-text); border-color: rgb(227 27 35 / .45); background: rgb(227 27 35 / .08); }
.dash-pill.tone-gold { color: var(--gold-text); border-color: rgb(218 165 32 / .45); background: rgb(218 165 32 / .08); }
.dash-pill.tone-blue { color: var(--blue-text); border-color: rgb(106 168 255 / .4); background: rgb(106 168 255 / .08); }
.dash-pill.tone-green { color: var(--live); border-color: rgb(74 222 128 / .35); background: rgb(74 222 128 / .07); }
.dash-pill.tone-violet { color: var(--violet-text); border-color: rgb(180 140 255 / .4); background: rgb(180 140 255 / .08); }
.dash-systems { display: grid; grid-template-columns: 1fr 1fr; }
.dash-systems.one { grid-template-columns: 1fr; }
.dash-systems > div { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #1a1a1a; font-size: 0.8125rem; }
.dash-systems:not(.one) > div:nth-child(odd) { border-right: 1px solid #1a1a1a; }
.dash-v { margin-left: auto; color: var(--faint); font: 500 0.71875rem var(--mono); }
.dash-act { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-bottom: 1px solid #1a1a1a; font-size: 0.8125rem; color: var(--text); text-decoration: none; }
.dash-act:last-child { border-bottom: 0; }
a.dash-act:hover { background: var(--panel2); }
.dash-act time { color: var(--faint); font: 500 0.71875rem var(--mono); padding-top: 1px; }
.dash-act b { color: var(--bright); font-weight: 600; }
.dash-card .audio-unavailable { margin: 0; padding: 14px 16px; }

/* Live ops */
.live-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.live-range { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.live-range button { min-height: 32px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font: 500 0.75rem var(--mono); cursor: pointer; }
.live-range button.is-on { background: var(--panel3); color: #fff; }
.live-alert { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgb(227 27 35 / .4); background: linear-gradient(90deg, rgb(227 27 35 / .14), rgb(227 27 35 / .03)); color: var(--muted); text-decoration: none; font-size: 0.875rem; }
.live-alert .ci { color: var(--red-text); width: 20px; height: 20px; }
.live-alert b { color: #fff; }
.live-alert .button { margin-left: auto; }
.live-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.live-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.live-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font: 500 0.6875rem var(--mono); }
.live-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.live-chart-wrap { padding: 12px 16px 10px; }
.live-chart { display: block; width: 100%; height: 190px; }
.live-speed { display: grid; gap: 8px; padding: 14px 16px; }
.live-speed-row { display: flex; align-items: center; font-size: 0.8125rem; }
.live-meter { height: 6px; border-radius: 3px; background: var(--panel3); overflow: hidden; }
.live-meter i { display: block; height: 100%; }
.live-note { margin: 0 0 4px; color: var(--faint); font-size: 0.71875rem; }
.live-chart-card .live-note { padding: 0 16px 12px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* Inbox */
.inbox { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: calc(100dvh - 120px); min-height: 520px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.inbox-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #090909; }
.inbox-tools { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.inbox-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--faint); }
.inbox-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 0.8125rem var(--sans); outline: none; }
.inbox-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inbox-chip { min-height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 500 0.75rem var(--sans); cursor: pointer; }
.inbox-chip span { font: 500 0.6875rem var(--mono); opacity: .7; margin-left: 2px; }
.inbox-chip.is-on { background: #fff; color: #000; border-color: #fff; }
.inbox-items { overflow-y: auto; min-height: 0; flex: 1; }
.inbox-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid #191919; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.inbox-item:hover { background: var(--panel2); }
.inbox-item.is-on { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.inbox-unread { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.inbox-unread.is-read { background: transparent; }
.inbox-item-main { display: grid; gap: 3px; min-width: 0; }
.inbox-item-title { color: var(--bright); font-weight: 600; font-size: 0.84375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item.is-quiet .inbox-item-title { color: var(--ink-200); font-weight: 500; }
.inbox-item-preview { color: var(--muted); font-size: 0.78125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.inbox-item time { color: var(--faint); font: 500 0.6875rem var(--mono); white-space: nowrap; }
.inbox-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 24px 16px; color: var(--muted); font-size: 0.875rem; }
.inbox-detail { overflow-y: auto; min-height: 0; }
.inbox-blank { height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--faint); }
.inbox-detail-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.inbox-detail-head h2 { margin: 0; font: 700 0.9375rem var(--sans); color: var(--bright); }
.inbox-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-acts .button, .thread-reply-bar .button { display: inline-flex; align-items: center; gap: 6px; }
.inbox-detail-body { padding: 16px 20px; }
.thread { display: grid; gap: 16px; padding: 18px 20px 24px; max-width: 860px; }
.thread-from { display: flex; align-items: center; gap: 12px; }
.thread-from .console-avatar { width: 38px; height: 38px; font-size: 0.8125rem; }
.thread-from b { color: #fff; }
.thread-incident { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--ink-900); }
.thread-incident b { color: #fff; }
.thread-incident .dash-more { margin-left: 0; }
.thread-messages { display: grid; gap: 10px; }
.bubble { max-width: min(640px, 88%); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.bubble.is-member { justify-self: start; border-top-left-radius: 4px; }
.bubble.is-staff { justify-self: end; border-top-right-radius: 4px; background: #1a0b0c; border-color: rgb(227 27 35 / .35); }
.bubble-meta { color: var(--faint); font: 500 0.6875rem var(--mono); margin-bottom: 4px; }
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 0.9375rem; line-height: 1.55; }
.thread-reply { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel2); }
.thread-reply textarea { display: block; width: 100%; min-height: 96px; padding: 12px 14px; border: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--text); font: 0.9375rem/1.5 var(--sans); resize: vertical; outline: none; }
.thread-reply-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); }
.thread-reply-bar .button { margin-left: auto; }

/* Members table */
.member-bar { display: grid; gap: 10px; }
.member-bar .console-search { margin-bottom: 0; }
.member-bar .console-filters { margin-bottom: 0; }
.member-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: var(--panel); }
.member-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.member-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0c0c0c; color: var(--faint); font: 500 0.6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.member-table td { padding: 10px 14px; border-bottom: 1px solid #1a1a1a; vertical-align: middle; }
.member-table tbody tr:hover > td { background: var(--panel2); }
.member-table tr.member-detail > td { background: #0a0a0a; padding: 10px 14px 14px; }
.member-table .num { text-align: right; }
.member-table .mono { font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }
.member-who { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.member-who .console-avatar { width: 28px; height: 28px; background: var(--panel3); color: var(--muted); }
.member-who b { display: block; color: #fff; font-weight: 600; }
.member-who span { color: var(--faint); font-size: 0.75rem; }
.member-acts { display: flex; justify-content: flex-end; gap: 6px; }
.member-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--faint); font: 500 0.75rem var(--mono); }
.member-pager { display: flex; gap: 6px; }

@media (max-width: 1100px) {
  .dash-grid, .live-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .console { grid-template-columns: 1fr; }
  .console-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .console-nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .console-me { margin-top: 0; }
  .console-main { padding: 16px; }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 50dvh; }
  .dash-systems { grid-template-columns: 1fr; }
  .dash-systems:not(.one) > div:nth-child(odd) { border-right: 0; }
}