/* Cyberdyne Intelligence — design system
   Dark "command center" by default, full light theme via
   :root[data-theme="light"]. Priority colors are fixed meanings across
   the app: critical red, high orange, medium amber, low blue. */

:root {
  --bg: #06080e;
  --surface: #0c1019;
  --surface-2: #111726;
  --surface-3: #172033;
  --sidebar: #080b13;
  --line: rgba(148, 163, 196, 0.11);
  --line-strong: rgba(148, 163, 196, 0.22);
  --text: #e9edf7;
  --text-2: #a4aec3;
  --text-3: #6c7589;
  --accent: #6e8cff;
  --accent-2: #2dd4ee;
  --accent-text: #9db2ff;
  --accent-soft: rgba(110, 140, 255, 0.14);
  --accent-ring: rgba(110, 140, 255, 0.45);
  --grad: linear-gradient(135deg, #7c93ff 0%, #4f7bff 45%, #22c7e6 100%);
  --crit: #ff5d6c;
  --high: #ff9f45;
  --med: #f2c14b;
  --low: #5c8dff;
  --ok: #35d39a;
  --warn: #f2c14b;
  --danger: #ff5d6c;
  --tag-danger: #ff8a95;
  --tag-hazard: #ffc56b;
  --tag-corporate: #c4a6ff;
  --tag-people: #6fe0f1;
  --tag-geo: #9db2ff;
  --tag-entity: #6ee7b7;
  --tag-custom: #b7bfd1;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 24px 64px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line-strong);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 252px;
  --font: 'Geist', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f5fa;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #edf0f7;
  --sidebar: #fbfcfe;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.16);
  --text: #0d1321;
  --text-2: #4a5468;
  --text-3: #7a8397;
  --accent: #4d69ff;
  --accent-2: #0ea5c6;
  --accent-text: #3451e6;
  --accent-soft: rgba(77, 105, 255, 0.1);
  --accent-ring: rgba(77, 105, 255, 0.35);
  --grad: linear-gradient(135deg, #5b73ff 0%, #3d5cff 45%, #0aa6c9 100%);
  --crit: #e5384b;
  --high: #e67a12;
  --med: #c99a06;
  --low: #3d6fe8;
  --ok: #0f9f6e;
  --tag-danger: #c42a3c;
  --tag-hazard: #9a5c00;
  --tag-corporate: #6d3fd1;
  --tag-people: #0b7486;
  --tag-geo: #3451e6;
  --tag-entity: #0c7a55;
  --tag-custom: #4a5468;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
  --shadow-pop: 0 24px 64px -20px rgba(15, 23, 42, 0.3), 0 0 0 1px var(--line-strong);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(110, 140, 255, 0.09), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(45, 212, 238, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(77, 105, 255, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); color: var(--text); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 5px;
  line-height: 1.5;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.muted { color: var(--text-3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: 600 0.88rem/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(79, 123, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary:hover { background: var(--grad); filter: brightness(1.08); }
/* cursor: not-allowed, not "progress" — a disabled button means the action
   isn't available, not that it's loading (progress reads as "still
   working", which made an unavailable button look stuck/broken). */
.btn[disabled], .btn-primary[disabled] { filter: grayscale(0.6) brightness(0.8); opacity: 0.6; cursor: not-allowed; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 0.82rem; }
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font: 600 0.84rem/1 var(--font);
  cursor: pointer;
  transition: all 0.15s;
}

.add-btn:hover { border-style: solid; border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

.remove-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  font: 600 0.82rem/1 var(--font);
  cursor: pointer;
}

.remove-btn:hover { color: var(--danger); background: rgba(255, 93, 108, 0.1); }

/* ------------------------------------------------------------- inputs */

input[type="text"], input[type="password"], input[type="number"], input[type="url"],
input[type="email"], input[type="search"], select, textarea {
  font: 400 0.92rem/1.4 var(--font);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 40px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}

textarea { resize: vertical; width: 100%; }
select { cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field > span, .field-label { font-size: 0.84rem; font-weight: 600; color: var(--text-2); }
.field input, .field textarea, .field select { width: 100%; }
.field-hint { font-size: 0.8rem; color: var(--text-3); margin: 2px 0 0; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field-grid .field { margin-top: 0; }

input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }

/* switch — a checkbox that looks like an iOS-style toggle */
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-top: 16px; }
.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  margin: 1px 0 0;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s var(--ease);
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(17px); }
.switch-text { display: flex; flex-direction: column; gap: 2px; }
.switch-text b { font-weight: 600; font-size: 0.9rem; }
.switch-text small { color: var(--text-3); font-size: 0.8rem; }

/* toggle chips — checkboxes that read as pill buttons */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { position: relative; cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.chip-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
  transition: all 0.15s;
  user-select: none;
}
.chip-toggle span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.15s;
}
.chip-toggle:hover span { border-color: var(--accent-ring); color: var(--text); }
.chip-toggle input:checked + span { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-text); }
.chip-toggle input:checked + span::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.chip-toggle .needs-names { color: var(--warn); font-weight: 700; }

/* ------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  background: var(--surface-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { color: var(--ok); background: rgba(53, 211, 154, 0.1); border-color: rgba(53, 211, 154, 0.3); }
.badge-warn { color: var(--warn); background: rgba(242, 193, 75, 0.1); border-color: rgba(242, 193, 75, 0.3); }
.badge-plain::before { display: none; }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font: 600 0.75rem/1 var(--mono);
}

.tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: default;
}
.tier-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tier-critical { color: var(--crit); background: color-mix(in srgb, var(--crit) 14%, transparent); }
.tier-high { color: var(--high); background: color-mix(in srgb, var(--high) 14%, transparent); }
.tier-medium { color: var(--med); background: color-mix(in srgb, var(--med) 14%, transparent); }
.tier-low { color: var(--low); background: color-mix(in srgb, var(--low) 14%, transparent); }
.tier-critical.tier-pill::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 25%, transparent); animation: glow 1.8s ease-in-out infinite; }

.tier-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--low); }
.tier-dot.tier-critical { background: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 22%, transparent); }
.tier-dot.tier-high { background: var(--high); }
.tier-dot.tier-medium { background: var(--med); }
.tier-dot.tier-low { background: var(--low); }

@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
  background: var(--surface-3);
  color: var(--tag-custom);
}
.tag-danger { color: var(--tag-danger); background: color-mix(in srgb, var(--tag-danger) 12%, transparent); }
.tag-hazard { color: var(--tag-hazard); background: color-mix(in srgb, var(--tag-hazard) 12%, transparent); }
.tag-corporate { color: var(--tag-corporate); background: color-mix(in srgb, var(--tag-corporate) 12%, transparent); }
.tag-people { color: var(--tag-people); background: color-mix(in srgb, var(--tag-people) 12%, transparent); }
.tag-geo { color: var(--tag-geo); background: color-mix(in srgb, var(--tag-geo) 12%, transparent); }
.tag-entity { color: var(--tag-entity); background: color-mix(in srgb, var(--tag-entity) 12%, transparent); }
.tag-custom { color: var(--tag-custom); }

/* -------------------------------------------------------------- shell */

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px 14px;
  background: color-mix(in srgb, var(--sidebar) 88%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(12px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s var(--ease), flex-basis 0.2s var(--ease), padding 0.2s var(--ease);
  z-index: 30;
}

.sb-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent-text); filter: drop-shadow(0 0 10px rgba(110, 140, 255, 0.35)); }
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sb-name { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; }
.sb-tagline { margin-top: 1px; font-size: 0.56rem; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-client {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
}
.sb-client small { color: var(--text-3); font-weight: 500; margin-left: auto; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(53, 211, 154, 0.6); animation: pulse-ring 2.2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(53, 211, 154, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(53, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 211, 154, 0); } }

.sb-label { font-size: 0.66rem; font-weight: 700; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 12px 6px; white-space: nowrap; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 500 0.88rem/1 var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-kbd { margin-left: auto; }

.sb-footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; }
.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.sb-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user-text b { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-text small { font-size: 0.72rem; color: var(--text-3); text-transform: capitalize; }
.sidebar-logout:hover { color: var(--danger); background: rgba(255, 93, 108, 0.08); }
.sidebar-toggle svg { transition: transform 0.2s var(--ease); }

@media (min-width: 881px) {
  :root[data-sidebar="collapsed"] { --sidebar-w: 72px; }
  :root[data-sidebar="collapsed"] .sidebar { padding-left: 12px; padding-right: 12px; }
  :root[data-sidebar="collapsed"] .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  :root[data-sidebar="collapsed"] .sb-brand-text,
  :root[data-sidebar="collapsed"] .sb-label,
  :root[data-sidebar="collapsed"] .nav-label,
  :root[data-sidebar="collapsed"] .nav-kbd,
  :root[data-sidebar="collapsed"] .sb-user-text,
  :root[data-sidebar="collapsed"] .sb-client span,
  :root[data-sidebar="collapsed"] .sb-client small { display: none; }
  :root[data-sidebar="collapsed"] .sb-client { justify-content: center; margin: 0 0 10px; padding: 10px 0; }
  :root[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }
  :root[data-sidebar="collapsed"] .sb-user { justify-content: center; padding: 8px 0; }
  :root[data-sidebar="collapsed"] .sidebar-toggle svg { transform: rotate(180deg); }
}

.mobile-header { display: none; }

.main { flex: 1; min-width: 0; padding: 26px 34px 120px; max-width: 1840px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.eyebrow { margin: 0 0 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.page-head h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.page-sub { margin: 6px 0 0; color: var(--text-2); font-size: 0.9rem; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  min-width: 250px;
  padding: 0 10px 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-3);
  font: 400 0.88rem/1 var(--font);
  cursor: pointer;
  transition: border-color 0.15s;
}
.search-trigger:hover { border-color: var(--accent-ring); color: var(--text-2); }
.search-trigger svg { width: 15px; height: 15px; }
.search-trigger kbd { margin-left: auto; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.status-pill.is-running { color: var(--accent-text); border-color: var(--accent-ring); background: var(--accent-soft); }
.status-pill.is-running .pulse-dot { background: var(--accent); animation: spin-dot 1s linear infinite; box-shadow: none; }
@keyframes spin-dot { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }

/* ------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px 0;
}
.card-head h2 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.card-meta { font-size: 0.8rem; color: var(--text-3); }
.card-body { padding: 16px 18px 18px; }

.tab-section { display: none; animation: fade-up 0.25s var(--ease); }
.tab-section.active { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ toasts */

.toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-pop);
  font-size: 0.88rem;
  line-height: 1.45;
  animation: toast-in 0.3s var(--ease);
}
.toast::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.toast-success::before { background: var(--ok); }
.toast-error::before { background: var(--danger); }
.toast-msg { flex: 1; }
.toast-close { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.toast-close:hover { color: var(--text); background: var(--surface-2); }
.toast.is-leaving { animation: toast-out 0.25s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

.new-hits-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent-ring);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.9rem;
  animation: fade-up 0.3s var(--ease);
}

/* ------------------------------------------------------- setup steps */

.setup-card { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 52px 16px 18px; margin-bottom: 18px; }
#setupDismiss { position: absolute; top: 12px; right: 12px; }
.setup-intro { flex: 1 1 220px; }
.setup-intro b { display: block; font-size: 0.95rem; }
.setup-intro small { color: var(--text-3); }
.setup-progress { height: 5px; margin-top: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.setup-progress i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.setup-steps { display: flex; flex-wrap: wrap; gap: 8px; flex: 3 1 420px; }
.setup-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: 500 0.84rem/1 var(--font);
  cursor: pointer;
}
.setup-step:hover { border-color: var(--accent-ring); }
.setup-step .step-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.setup-step.done { color: var(--text-3); cursor: default; }
.setup-step.done .step-check { background: var(--ok); border-color: var(--ok); }
.setup-step.done .step-check::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

/* --------------------------------------------------------------- KPIs */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }

.kpi { position: relative; padding: 16px 18px; overflow: hidden; }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.kpi-label svg { width: 15px; height: 15px; color: var(--text-3); }
.kpi-value { margin-top: 10px; font: 700 2rem/1 var(--font); letter-spacing: -0.03em; font-feature-settings: "tnum"; }
.kpi-value.kpi-value-sm { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.25; }
.kpi-sub { margin-top: 6px; font-size: 0.78rem; color: var(--text-3); }
.kpi-crit .kpi-value { color: var(--crit); }
.spark { position: absolute; right: 14px; top: 16px; width: 96px; height: 34px; overflow: visible; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sparkFill); stroke: none; }

.mix-bar { display: flex; gap: 3px; height: 7px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.mix-seg { height: 100%; min-width: 3px; border: 0; padding: 0; cursor: pointer; transition: filter 0.15s; }
.mix-seg:hover { filter: brightness(1.2); }
.mix-seg.tier-critical { background: var(--crit); }
.mix-seg.tier-high { background: var(--high); }
.mix-seg.tier-medium { background: var(--med); }
.mix-seg.tier-low { background: var(--low); }

/* ----------------------------------------------------- ops grid (map) */

.ops-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; margin-bottom: 16px; align-items: stretch; }
.ops-grid.map-expanded { grid-template-columns: minmax(0, 1fr); }
.ops-grid.map-expanded .feed-card { display: none; }

.map-card { display: flex; flex-direction: column; min-width: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.76rem; color: var(--text-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-critical { background: var(--pin-critical, var(--crit)); }
.legend-unsure { width: 10px; height: 10px; background: transparent; border: 2px solid var(--text-3); }
.legend-high { background: var(--pin-high, var(--high)); }
.legend-medium { background: var(--pin-medium, var(--med)); }
.legend-low { background: var(--pin-low, var(--low)); }
.legend-ring { width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed var(--pin-watch, var(--accent)); display: inline-block; }

.map-wrap { position: relative; flex: 1; margin: 14px; margin-top: 12px; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); min-height: 460px; }
.event-map { position: absolute; inset: 0; }
.ops-grid.map-expanded .map-wrap { min-height: 72vh; }
/* Full screen (body.map-full): the map card covers the window. Below the
   alert drawer (70), palette (80) and toasts (90), so they still open over it. */
body.map-full { overflow: hidden; }
body.map-full .map-card { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; border: 0; }
body.map-full .map-stage, body.map-full .map-wrap { flex: 1; min-height: 0; }
body.map-full .map-wrap { margin: 0 10px 10px; }
body.map-full #mapExpandBtn, body.map-full .impact-panel { display: none; }  /* shapes stay drawn on the map */

.map-controls { position: absolute; left: 12px; top: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.map-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: 600 0.8rem/1 var(--font);
  cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
}
.map-ctrl svg { width: 15px; height: 15px; }
.map-ctrl:hover { border-color: var(--accent-ring); }
.map-ctrl[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-text); }

/* Map search: find an address / place / coordinates, drop a temporary pin,
   and list what's nearby. */
.map-search { position: relative; flex: 0 1 320px; min-width: 220px; }
.map-search-bar {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px;
  border-radius: 9px; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
}
.map-search-bar:focus-within { border-color: var(--accent-ring); }
.map-search-bar > svg { width: 15px; height: 15px; color: var(--text-2); flex: none; }
.map-search-bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 500 0.85rem var(--font); padding: 0; height: 100%; }
.map-search-bar input:focus { outline: none; box-shadow: none; }
.map-search-go { flex: none; height: 26px; padding: 0 10px; border-radius: 7px; border: 0; background: var(--accent); color: #fff; font: 600 0.78rem var(--font); cursor: pointer; }
.map-search-go:disabled { opacity: 0.6; cursor: progress; }
.map-search-card {
  position: absolute; top: 40px; left: 0; width: min(340px, calc(100vw - 48px)); max-height: 360px; overflow: auto;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop); font-size: 0.84rem; z-index: 6;
}
.map-search-card h4 { margin: 0 0 2px; font-size: 0.92rem; padding-right: 30px; }
.map-search-card .msc-close {
  position: sticky; top: 0; float: right; margin: -4px -4px 0 0; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; z-index: 1;
}
.map-search-card .msc-close:hover { background: var(--surface-2, rgba(127, 127, 127, 0.15)); color: var(--text); }
.map-search-card .msc-close:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.map-search-card .msc-close svg { width: 14px; height: 14px; }
.map-search-card .msc-meta { color: var(--text-2); font-size: 0.78rem; margin-bottom: 8px; }
.map-search-card .msc-head { margin: 10px 0 4px; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.map-search-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.map-search-card li { display: flex; justify-content: space-between; gap: 10px; }
.map-search-card li span:last-child { white-space: nowrap; color: var(--text-2); }
.map-search-card li a { color: var(--text); text-decoration: none; }
.map-search-card li a:hover { text-decoration: underline; }
.map-search-card .msc-inside { color: var(--accent-text); font-weight: 600; }
.map-search-card .msc-actions { display: flex; gap: 6px; margin-top: 10px; }
.map-search-card .msc-error { color: var(--danger); }
.search-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff5d6c; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.45); cursor: pointer; }

.basemap-menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 250px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  animation: fade-up 0.18s var(--ease);
}
.basemap-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 500 0.85rem/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}
.basemap-option:hover, .basemap-option:focus-visible { background: var(--surface-2); }
.basemap-option[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); }
.basemap-option small { display: block; margin-top: 2px; color: var(--text-3); font-size: 0.74rem; font-weight: 400; }
.swatch { width: 38px; height: 28px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--line-strong); }
.swatch-auto { background: linear-gradient(135deg, #10141f 50%, #e9edf3 50%); }
.swatch-dark { background: radial-gradient(circle at 30% 40%, #2b3346 0 18%, transparent 19%), #11151f; }
.swatch-light { background: radial-gradient(circle at 30% 40%, #d7dce5 0 18%, transparent 19%), #f2f4f7; }
.swatch-streets { background: linear-gradient(90deg, transparent 45%, #f6c56b 45% 55%, transparent 55%), linear-gradient(0deg, transparent 40%, #fff 40% 50%, transparent 50%), #b9dca5; }
.swatch-terrain { background: radial-gradient(circle at 30% 30%, #ffffff 0 12%, transparent 30%), linear-gradient(135deg, #cfd5cc, #8f9a88 60%, #5f6b5b); }
.swatch-topo { background: repeating-radial-gradient(circle at 60% 60%, #d9c8a4 0 3px, #efe6cf 3px 6px); }
.swatch-satellite { background: radial-gradient(circle at 35% 40%, #3f6b3a 0 22%, transparent 23%), radial-gradient(circle at 70% 70%, #6b5a3a 0 18%, transparent 19%), #0f2c4a; }

.map-fallback { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--text-3); }

.maplibregl-popup-content {
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  backdrop-filter: blur(14px);
  color: var(--text);
  border-radius: 12px !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 14px 16px !important;
  font-family: var(--font);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface) !important; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface) !important; }
.maplibregl-popup-close-button { color: var(--text-3); font-size: 18px; padding: 4px 8px; }
.maplibregl-popup-close-button:hover { background: transparent !important; color: var(--text); }
.maplibregl-ctrl-group { background: color-mix(in srgb, var(--surface) 90%, transparent) !important; border-radius: 9px !important; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6) !important; border: 1px solid var(--line-strong); overflow: hidden; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
:root:not([data-theme="light"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.9); }
/* .maplibregl-compact repeat outranks MapLibre's own compact rule, which forces black text */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { font-size: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent) !important; color: var(--text-3); }
.maplibregl-ctrl-attrib a { color: var(--text-2); }

/* map stage: the map plus the floating impact-area editor */
.map-stage { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.legend-area { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: rgba(255, 93, 108, 0.3); border: 1.5px solid var(--crit); }

.draw-toolbar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.7);
}
.draw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 600 0.78rem/1 var(--font);
  cursor: pointer;
}
.draw-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.draw-btn:hover { background: var(--surface-2); color: var(--text); }
.draw-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.draw-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.draw-sep { width: 1px; height: 20px; margin: 0 3px; background: var(--line-strong); }
.export-control { position: relative; }
.export-menu {
  position: absolute;
  bottom: 42px;
  left: 0;
  width: 290px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  animation: fade-up 0.18s var(--ease);
}
.export-menu button {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 600 0.85rem/1.25 var(--font);
  text-align: left;
  cursor: pointer;
}
.export-menu button svg { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); flex-shrink: 0; }
.export-menu button:hover, .export-menu button:focus-visible { background: var(--surface-2); outline: none; }
.export-menu small { display: block; margin-top: 2px; color: var(--text-3); font-size: 0.74rem; font-weight: 400; }
.export-title { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.export-title input { height: 34px; font-size: 0.85rem; text-transform: none; letter-spacing: 0; }

.draw-hint {
  position: absolute;
  top: 56px;
  left: 12px;
  right: 12px;
  width: fit-content;
  max-width: 560px;
  margin: 0 auto;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-pop);
  font-size: 0.82rem;
  font-weight: 500;
  animation: fade-up 0.18s var(--ease);
}
.draw-hint span { flex: 1; min-width: 0; }
.draw-hint .btn { flex-shrink: 0; }
.map-wrap.is-drawing { box-shadow: inset 0 0 0 2px var(--accent); border-color: var(--accent); }

.ann-editor {
  position: absolute;
  top: 26px;
  right: 60px;
  z-index: 8;
  width: 320px;
  max-height: calc(100% - 52px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
  animation: fade-up 0.2s var(--ease);
}
.ann-editor-head { display: flex; align-items: center; gap: 10px; }
.ann-editor-head b { flex: 1; font-size: 0.98rem; }
.ann-editor-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); }
.ann-editor-icon svg { width: 17px; height: 17px; }
.ann-editor .field { gap: 6px; }
.ann-editor textarea { min-height: 64px; resize: vertical; }
.ann-radius { display: flex; align-items: center; gap: 10px; }
.ann-radius input[type="range"] { flex: 1; accent-color: var(--accent); }
.ann-radius input[type="number"] { width: 84px; height: 34px; }
.ann-radius span { color: var(--text-3); font-size: 0.84rem; }
.ann-colors { display: flex; gap: 8px; }
.ann-colors button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.ann-colors button[aria-checked="true"] { border-color: var(--swatch); box-shadow: inset 0 0 0 3px var(--surface); }
.ann-colors button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.ann-stats { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.8rem; }
.ann-stats div { display: flex; justify-content: space-between; gap: 12px; }
.ann-stats span { color: var(--text-3); }
.ann-stats b { font-weight: 600; font-family: var(--mono); font-size: 0.76rem; text-align: right; }
.ann-help { margin: 4px 0 0; color: var(--text-3); font-size: 0.75rem; }
.ann-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-actions .btn-primary { flex: 1 0 100%; }
.ann-meta { margin: 0; color: var(--text-3); font-size: 0.74rem; }
.ann-meta:empty { display: none; }
.btn-danger { color: var(--crit); }
.btn-danger:hover { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }

.impact-panel { margin: 0 14px 14px; }
.impact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.impact-head h3 { margin: 0; font-size: 0.88rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.impact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.impact-row { display: flex; align-items: stretch; gap: 6px; }
.impact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.impact-item:hover { border-color: var(--accent-ring); }
.impact-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  text-decoration: none;
}
.impact-export:hover { border-color: var(--accent-ring); color: var(--accent-text); }
.impact-export svg { width: 15px; height: 15px; }
.impact-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--swatch); }
.impact-dot.impact-polygon { border-radius: 3px; background: color-mix(in srgb, var(--swatch) 35%, transparent); border: 2px solid var(--swatch); box-shadow: none; }
.impact-dot.impact-radius { background: color-mix(in srgb, var(--swatch) 35%, transparent); border: 2px solid var(--swatch); box-shadow: none; }
.impact-text { display: flex; flex-direction: column; min-width: 0; }
.impact-text b { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impact-text small { color: var(--text-3); font-size: 0.74rem; }
.impact-empty { margin: 0; color: var(--text-3); font-size: 0.82rem; line-height: 1.5; }

.map-popup-title { font-weight: 700; font-size: 0.95rem; padding-right: 20px; }
.map-popup-note { font-size: 0.75rem; color: var(--text-3); margin-top: 3px; }
.map-popup-address { font-size: 0.84rem; color: var(--text-2); margin-top: 4px; line-height: 1.35; }
.map-popup-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.map-popup-list li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.84rem; line-height: 1.4; }
.map-popup-list .tier-pill { height: 20px; font-size: 0.64rem; padding: 0 7px; margin-right: 6px; vertical-align: 1px; }
.map-popup-list a { color: var(--text); font-weight: 500; }
.map-popup-list a:hover { color: var(--accent-text); }
.map-popup-meta { font-size: 0.74rem; color: var(--text-3); margin-top: 3px; text-transform: capitalize; }
.map-popup .btn { width: 100%; margin-top: 10px; }
.map-popup-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.map-popup-body { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 0.82rem; line-height: 1.45; white-space: pre-wrap; max-height: 140px; overflow-y: auto; }
.map-popup-actions { display: flex; gap: 6px; }
.map-popup-byline { margin-top: 6px; font-size: 0.72rem; color: var(--text-3); }
.maplibregl-popup { z-index: 7; }  /* above the drawing toolbar */
.map-popup-actions .btn { flex: 1; }

.listen-page { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.listen-back { display: inline-block; margin-bottom: 14px; color: var(--text-2); font-size: 0.88rem; }
.listen-card { padding: 22px; }
.listen-card h1 { margin: 12px 0 6px; font-size: 1.5rem; letter-spacing: -0.02em; }
.listen-where { margin: 0 0 4px; font-weight: 600; }
.listen-meta { margin: 0; color: var(--text-3); font-size: 0.82rem; }
.listen-narrative { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); line-height: 1.5; }
.listen-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.listen-list li { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.listen-transcript { margin: 6px 0 8px; font-size: 0.95rem; line-height: 1.45; }
.listen-list audio, .listen-card > audio { width: 100%; height: 36px; }
.listen-foot { margin-top: 16px; color: var(--text-3); font-size: 0.78rem; line-height: 1.5; }

.usage-card { margin-bottom: 16px; }
.usage-controls { display: flex; gap: 8px; align-items: center; }
.usage-controls select { height: 32px; width: auto; }
.inline-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inline-table tfoot td { border-top: 1px solid var(--line-strong); }

.sort-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.sort-btn::after { content: "↕"; opacity: 0.3; font-size: 0.9em; }
.sort-btn:hover { color: var(--text); }
.sort-btn:hover::after { opacity: 0.7; }
th[aria-sort="descending"] .sort-btn, th[aria-sort="ascending"] .sort-btn { color: var(--accent-text); }
th[aria-sort="descending"] .sort-btn::after { content: "↓"; opacity: 1; }
th[aria-sort="ascending"] .sort-btn::after { content: "↑"; opacity: 1; }
.sort-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; }
.seg-sm .seg-btn { height: 28px; padding: 0 10px; font-size: 0.76rem; }
.feed-card .card-head { gap: 10px; flex-wrap: wrap; }

.sources-mark { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 0.7rem; font-weight: 650; white-space: nowrap; }
.source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.source-list li { padding: 8px 10px; border-radius: 9px; background: var(--surface-2); font-size: 0.85rem; line-height: 1.35; }
.source-list a { color: var(--text); font-weight: 550; }
.source-list a:hover { color: var(--accent-text); }
.source-list small { display: block; margin-top: 3px; color: var(--text-3); font-size: 0.74rem; }

.twofa-status { margin: 0 0 12px; font-size: 0.88rem; color: var(--text-2); line-height: 1.5; }
.twofa-status b { color: var(--text); }
.twofa-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.twofa-row input { flex: 1 1 200px; }
.twofa-setup .seg { margin-bottom: 10px; }
.twofa-methods .seg-btn { cursor: pointer; }
.twofa-methods input { position: absolute; opacity: 0; pointer-events: none; }
.twofa-methods .seg-btn:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.twofa-methods .seg-btn:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.twofa-methods .seg-btn:has(input:focus-visible) { outline: 2px solid var(--accent-ring); }
.code-input { font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.3em; text-align: center; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 0.84rem; cursor: pointer; text-decoration: underline; }
.inline-form { display: inline; margin-left: 6px; }

.pin-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pin-color-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 0.85rem; cursor: pointer; }
.pin-color-row input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pin-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pin-color-row input[type="color"]::-webkit-color-swatch { border: 2px solid var(--line-strong); border-radius: 50%; }
.pin-color-row input[type="color"]::-moz-color-swatch { border: 2px solid var(--line-strong); border-radius: 50%; }

/* feed */
.feed-card { display: flex; flex-direction: column; min-width: 0; }
.feed { list-style: none; margin: 0; padding: 10px 8px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 560px; }
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.feed-item:hover { background: var(--surface-2); }
.feed-item .tier-dot { margin-top: 6px; }
.feed-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feed-title { font-size: 0.88rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.76rem; color: var(--text-3); }
.feed-meta span + span::before { content: "·"; margin-right: 8px; }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; color: var(--text-3); }
.empty-state svg { width: 42px; height: 42px; color: var(--text-3); opacity: 0.7; }
.empty-state b { color: var(--text); font-size: 0.98rem; }
.empty-state p { margin: 0; max-width: 360px; font-size: 0.86rem; }
.empty-state .btn { margin-top: 8px; }

/* ------------------------------------------------------------- table */

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.search-field { position: relative; flex: 1 1 240px; }
.search-field svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-field input { width: 100%; padding-left: 36px; }
.search-field kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 600 0.8rem/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--line); }
.seg-btn .tier-dot { width: 7px; height: 7px; }
.seg-btn .seg-count { font-family: var(--mono); font-size: 0.74rem; color: var(--text-3); }

.place-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-ring);
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 600 0.8rem/1 var(--font);
  cursor: pointer;
}
.place-chip svg { width: 12px; height: 12px; }
.table-count { font-size: 0.8rem; color: var(--text-3); white-space: nowrap; }
.toolbar-spacer { flex: 1; }

.table-wrap { overflow: auto; max-height: 680px; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr { transition: background 0.12s; }
tbody tr:last-child td { border-bottom: 0; }
.hit-row { cursor: pointer; }
.hit-row:hover { background: var(--surface-2); }
.hit-row.is-selected { background: var(--accent-soft, var(--surface-2)); }
.hit-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hit-row td:first-child { box-shadow: inset 3px 0 0 transparent; }
.hit-row[data-priority="CRITICAL"] td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.hit-row[data-priority="HIGH"] td:first-child { box-shadow: inset 3px 0 0 var(--high); }
.hit-row[data-priority="MEDIUM"] td:first-child { box-shadow: inset 3px 0 0 var(--med); }
.hit-row[data-priority="LOW"] td:first-child { box-shadow: inset 3px 0 0 var(--low); }
.cell-time { white-space: nowrap; font-family: var(--mono); font-size: 0.8rem; color: var(--text-2); }
.cell-time small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-3); }
.cell-title { min-width: 300px; max-width: 560px; }
.title-link { color: var(--text); font-weight: 550; line-height: 1.4; }
.title-link:hover { color: var(--accent-text); }
.title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ai-mark { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.7rem; font-weight: 700; }
.ai-mark svg { width: 11px; height: 11px; }
/* Escalation watch: stories that climbed in priority recently */
.rising-mark { display: inline-flex; align-items: center; margin-top: 4px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(234, 122, 30, 0.16); color: #f0943f; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.rising-card { border-color: rgba(234, 122, 30, 0.45); }
.rising-card h2 { color: #f0943f; }
.rising-list { list-style: none; margin: 0; padding: 4px 18px 14px; display: grid; gap: 10px; }
.rising-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.rising-list small { grid-column: 2; }
.place-link { border: 0; padding: 0; background: none; color: var(--text); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; border-bottom: 1px dashed var(--line-strong); }
.place-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.cell-muted { color: var(--text-2); }
.delay-headline { margin: 0 0 12px; font-size: 0.95rem; }
.delay-headline b { font-size: 1.15rem; }
.cell-dim { color: var(--text-3); font-size: 0.8rem; }
.no-results td { text-align: center; padding: 36px; color: var(--text-3); }

/* ------------------------------------------------------------ drawer */

.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(3, 5, 10, 0.5); backdrop-filter: blur(3px); animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(520px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.7);
  animation: slide-in 0.28s var(--ease);
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; }
.drawer-title { margin: 12px 0 0; font-size: 1.2rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.drawer-section { margin-top: 22px; }
.drawer-section h3 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 0; font-size: 0.87rem; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); word-break: break-word; }
.factor { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 12px; margin-top: 9px; font-size: 0.84rem; }
.factor-label { color: var(--text-2); }
.factor-bar { display: flex; gap: 4px; }
.factor-bar i { flex: 1; height: 7px; border-radius: 3px; background: var(--surface-3); }
.factor-bar i.on { background: var(--grad); }
.factor-val { font-family: var(--mono); color: var(--text-2); text-align: right; }
.score-line { margin-top: 12px; font-size: 0.82rem; color: var(--text-3); }
.brief { padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-ring); font-size: 0.88rem; line-height: 1.6; }
.brief small { display: block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); }
.drawer-actions .btn { flex: 1 1 auto; }
.drawer-actions .btn.is-held { color: var(--accent); border-color: var(--accent); }
.drawer-preserve { padding: 0 18px 14px; display: grid; gap: 8px; }
.retention-last { margin: 8px 0 0; font-size: 13px; }
.retention-hold-on { margin: 0 0 10px; }
.retention-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.retention-form .field { flex: 1 1 280px; margin: 0; }

/* ----------------------------------------------------------- palette */

.palette-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(3, 5, 10, 0.55); backdrop-filter: blur(4px); animation: fade 0.15s; }
.palette {
  width: min(640px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: pop 0.2s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(0.97) translateY(-6px); } }
.palette-input-wrap { display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.palette-input-wrap svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.palette-input-wrap input { flex: 1; border: 0; background: transparent; box-shadow: none; min-height: 52px; font-size: 1rem; padding: 0; }
.palette-input-wrap input:focus { box-shadow: none; background: transparent; }
.palette-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.palette-group { padding: 10px 10px 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; }
.palette-item svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.palette-item .pi-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .pi-hint { font-size: 0.76rem; color: var(--text-3); white-space: nowrap; }
.palette-item.active { background: var(--accent-soft); color: var(--accent-text); }
.palette-item.active svg { color: var(--accent-text); }
.palette-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 0.88rem; }
.palette-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--text-3); }

/* --------------------------------------------------------- configure */

.config-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.config-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.config-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-size: 0.86rem; font-weight: 500; }
.config-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.config-nav a.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.config-nav .step-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3); font: 600 0.7rem/1 var(--mono); color: var(--text-3); flex-shrink: 0; }
.config-nav a.active .step-num { background: var(--accent); color: #fff; }

.config-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-section { scroll-margin-top: 20px; padding: 20px 22px 22px; }
.cfg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cfg-head h2 { margin: 0; font-size: 1.02rem; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.cfg-head h2 svg { width: 18px; height: 18px; color: var(--accent-text); }
.cfg-head p { margin: 4px 0 0; color: var(--text-3); font-size: 0.84rem; }
.cfg-tools { display: flex; align-items: center; gap: 6px; }

.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.source-card { position: relative; cursor: pointer; }
.source-card input { position: absolute; opacity: 0; pointer-events: none; }
.source-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 14px 14px 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  transition: all 0.15s;
}
.source-card-body::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  transition: all 0.15s;
}
.source-card:hover .source-card-body { border-color: var(--accent-ring); }
.source-card input:checked + .source-card-body { border-color: var(--accent-ring); background: var(--accent-soft); }
.source-card input:checked + .source-card-body::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.source-card input:focus-visible + .source-card-body { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.source-name { font-weight: 650; font-size: 0.9rem; }
.source-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.4; }
.source-licence { align-self: flex-start; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.licence-unclear { color: #8a5a00; background: #fff1cc; }
.licence-no { color: #fff; background: var(--danger); }
:root:not([data-theme="light"]) .licence-unclear { color: #f2c14b; background: color-mix(in srgb, #f2c14b 16%, transparent); }
.licence-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.licence-cleared { color: #fff; background: #2f9e6e; }
.licence-unclear.licence-pill, .licence-pill.licence-unclear { color: #8a5a00; background: #fff1cc; }
:root:not([data-theme="light"]) .licence-pill.licence-unclear { color: #f2c14b; background: color-mix(in srgb, #f2c14b 16%, transparent); }
.licence-not_allowed { color: #fff; background: var(--danger); }
.registry-table td { vertical-align: top; font-size: 0.84rem; }
.registry-terms { margin-top: 4px; max-width: 380px; font-size: 0.78rem; line-height: 1.4; }
.registry-edit[open] { min-width: 260px; }
.registry-form { display: grid; gap: 8px; margin-top: 8px; }
.source-badge { align-self: flex-start; margin-top: auto; font-size: 0.7rem; font-weight: 600; color: var(--text-3); }

.row-list { display: flex; flex-direction: column; gap: 8px; }
.location-row, .recipient-row, .local-feed-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.location-row input, .location-row select, .recipient-row input, .recipient-row select, .local-feed-row input { background: var(--surface); }
.location-country-select { flex: 0 1 180px; }
.autocomplete-wrap { position: relative; flex: 2 1 180px; }
.autocomplete-wrap input { width: 100%; }
.location-row input[name="location_address"] { flex: 2 1 200px; }
.radius-field { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 0.84rem; }
.location-row.is-pinned { border-color: var(--accent-ring); }
.pin-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.74rem; font-weight: 650; white-space: nowrap; }
.pin-badge svg { width: 13px; height: 13px; }
.pin-label-input { flex: 2 1 200px; }
.pin-coords { font-family: var(--mono); font-size: 0.76rem; color: var(--text-3); white-space: nowrap; }
.radius-field input { width: 86px; }
.recipient-row input[name="recipient_email"] { flex: 2 1 200px; }
.recipient-row input[name="recipient_categories"] { flex: 3 1 220px; }
.recipient-row select { flex: 0 1 160px; }
.local-feed-row input[name="local_feed_name"] { flex: 1 1 180px; }
.local-feed-row input[name="local_feed_url"] { flex: 2 1 260px; }
.row-list-empty { padding: 14px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--text-3); font-size: 0.85rem; text-align: center; }
.row-list-empty:not(:only-child) { display: none; }

.autocomplete-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 240px; overflow-y: auto; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); }
.autocomplete-suggestions:empty { display: none; }
.autocomplete-item { padding: 9px 12px; font-size: 0.87rem; cursor: pointer; }
.autocomplete-item:hover { background: var(--accent-soft); color: var(--accent-text); }

details.help { margin-top: 14px; border-radius: 10px; font-size: 0.84rem; }
details.help summary { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 600; cursor: pointer; list-style: none; border-radius: 6px; padding: 2px 0; }
details.help summary::-webkit-details-marker { display: none; }
details.help summary svg { width: 14px; height: 14px; }
details.help summary:hover { color: var(--accent-text); }
details.help[open] summary { color: var(--accent-text); }
details.help .help-body { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); line-height: 1.6; }
details.help .help-body p { margin: 0 0 8px; }
details.help .help-body p:last-child { margin-bottom: 0; }
details.help code { font-family: var(--mono); font-size: 0.82em; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: var(--accent-text); }

.range-row { display: flex; align-items: center; gap: 16px; }
.range-value { min-width: 92px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font: 600 0.9rem/1 var(--mono); text-align: center; }

.save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
}
.save-bar-text { font-size: 0.84rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.save-bar-actions { display: flex; gap: 8px; }

/* ------------------------------------------------------ integrations */

.integration-grid { display: grid; gap: 12px; }
details.integration { overflow: hidden; }
.integration-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.integration-head::-webkit-details-marker { display: none; }
.integration-head:hover { background: var(--surface-2); }
.integration-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.integration-icon svg { width: 20px; height: 20px; }
.integration-text { flex: 1; min-width: 0; }
.integration-text b { display: block; font-size: 0.95rem; }
.integration-text small { color: var(--text-3); font-size: 0.82rem; }
.integration-chevron { width: 18px; height: 18px; color: var(--text-3); transition: transform 0.2s var(--ease); flex-shrink: 0; }
details.integration[open] .integration-chevron { transform: rotate(180deg); }
.integration-body { padding: 4px 18px 20px; border-top: 1px solid var(--line); }
.integration-body form { padding-top: 16px; }
.sub-block { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.sub-block h3 { margin: 0 0 4px; font-size: 0.9rem; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* ----------------------------------------------------------- settings */

.settings-grid { display: grid; gap: 14px; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: 600 0.86rem/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.option-card:hover { border-color: var(--accent-ring); }
.option-card[aria-pressed="true"], .option-card.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.option-card .swatch { width: 100%; height: 54px; border-radius: 8px; }
.theme-preview { width: 100%; height: 54px; border-radius: 8px; border: 1px solid var(--line-strong); }
.theme-preview-system { background: linear-gradient(135deg, #0c1019 50%, #f3f5fa 50%); }
.theme-preview-light { background: linear-gradient(#ffffff 0 30%, #eef1f7 30%); }
.theme-preview-dark { background: linear-gradient(#111726 0 30%, #06080e 30%); }
.shortcut-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; margin: 0; }
.shortcut-list div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.87rem; }
.shortcut-list dt { color: var(--text-2); }
.shortcut-list dd { margin: 0; display: flex; gap: 4px; }

/* -------------------------------------------------------------- admin */

.role-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.role-legend div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 0.84rem; color: var(--text-2); }
.role-legend b { display: block; margin-bottom: 4px; color: var(--text); }
.inline-table { border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.inline-table td { vertical-align: middle; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; align-items: start; }

/* --------------------------------------------- company profile chips */

.profile-grid { align-items: start; }
.profile-field > label span { display: block; }
.chip-box {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); cursor: text;
}
.chip-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.name-chip {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text); font-size: 0.82rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.name-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-chip-x { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 1rem; line-height: 1; cursor: pointer; }
.name-chip-x:hover { background: var(--surface-3); color: var(--text); }
.chip-input { flex: 1; min-width: 120px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 2px !important; height: auto !important; color: var(--text); font: inherit; font-size: 0.86rem; outline: none; }
.query-preview { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-3); word-break: break-word; }
.query-preview code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--accent-text); }
.query-preview .qp-note { color: var(--text-3); }

.profile-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-block-head h3 { margin: 0; font-size: 0.95rem; }
.profile-block-head p { margin: 4px 0 12px; font-size: 0.8rem; color: var(--text-3); line-height: 1.5; max-width: 760px; }
.exec-list { display: grid; gap: 10px; margin-bottom: 10px; }
.exec-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.exec-row-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.exec-unique { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.exec-aliases { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; }
.exec-aliases-label { font-size: 0.76rem; color: var(--text-3); }
.exec-aliases .chip-box { min-height: 38px; background: var(--surface); }
.exec-empty { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-3); }
.ga-list { display: grid; gap: 8px; margin-bottom: 10px; }
.ga-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.ga-steps { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 880px) {
  .exec-row-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .exec-aliases { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ga-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ earthquake sliders */

.quake-summary { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 0.86rem; font-weight: 550; }
.quake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quake-rule { padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.quake-rule h3 { margin: 0; font-size: 0.92rem; }
.quake-desc { margin: 4px 0 12px; font-size: 0.78rem; color: var(--text-3); line-height: 1.45; min-height: 2.3em; }
.quake-field { display: grid; gap: 4px; margin-bottom: 12px; }
.quake-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--text-2); }
.quake-label output { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.95rem; font-weight: 650; color: var(--text); }
.quake-field input[type="range"] { height: 22px; }
.quake-scale { font-size: 0.72rem; color: var(--text-3); min-height: 1.2em; }
.quake-global { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 24px; align-items: center; margin-top: 14px; padding-top: 14px; }
.quake-global .quake-field { margin-bottom: 0; }
.quake-global.is-off .quake-field { opacity: 0.45; }
.config-nav-sub { padding-left: 22px; font-size: 0.85em; }
@media (max-width: 1100px) { .quake-grid, .quake-global { grid-template-columns: minmax(0, 1fr); } .quake-desc { min-height: 0; } }

/* ------------------------------------------------------------ topics */

.topic-preview { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 0.84rem; }
.topic-table { display: grid; gap: 8px; container-type: inline-size; }
.topic-row { display: grid; grid-template-columns: 38px minmax(0, 1.25fr) minmax(170px, 1fr) minmax(256px, 1.05fr) 96px; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.topic-row.is-off > :not(.topic-switch) { opacity: 0.5; }
.topic-head { padding: 0 14px 2px; border: 0; background: none; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.topic-switch { margin: 0; }
.topic-name b { display: block; font-size: 0.92rem; }
.topic-name small { display: block; color: var(--text-3); font-size: 0.76rem; line-height: 1.4; }
.topic-row > select { width: 100%; }
.topic-fixed { font-size: 0.84rem; color: var(--text-2); }
.urg { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px 8px; align-items: center; font-size: 0.74rem; color: var(--text-3); }
.urg select { height: 32px; font-size: 0.82rem; font-weight: 600; border-left: 3px solid var(--line); }
.urg select option { color: var(--text); font-weight: 400; }
.urg select.u-critical { color: var(--crit); border-left-color: var(--crit); }
.urg select.u-high { color: var(--high); border-left-color: var(--high); }
.urg select.u-medium { color: var(--med); border-left-color: var(--med); }
.urg select.u-low { color: var(--low); border-left-color: var(--low); }
.urg .u-fixed { padding-left: 4px; font-size: 0.8rem; font-weight: 600; color: var(--med); }
.topic-row .vol { font-size: 0.78rem; color: var(--text-3); line-height: 1.35; }
.topic-row .vol b { color: var(--text); font-size: 0.95rem; }
.crit-rule { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, var(--line)); background: color-mix(in srgb, var(--crit) 6%, transparent);
  font-size: 0.8rem; color: var(--text-2); line-height: 1.5; }
.crit-rule .tier-dot { margin-top: 6px; }
.site-distance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.location-row .location-short { flex: 1 1 150px; }

/* dashboard: topic tabs, filters, why lines, votes (overhaul stage 5) */
.dash-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 10px; border-bottom: 1px solid var(--line); }
.dash-tab { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-2);
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.dash-tab:hover { color: var(--text); }
.dash-tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.dash-tab-count { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: 0.72rem; color: var(--text-2); }
.dash-filters { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dash-filter { display: inline-flex; gap: 8px; align-items: center; font-size: 0.78rem; color: var(--text-3); }
.dash-filter select { min-width: 160px; }
.dash-filter-label { font-size: 0.78rem; color: var(--text-3); margin-left: 6px; }
.dash-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dash-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  font: inherit; font-size: 0.78rem; cursor: pointer; }
.dash-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-text); }
.dash-note { flex: 1 1 260px; font-size: 0.74rem; color: var(--text-3); text-align: right; }
.noise-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.noise-strip > div { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 0.76rem; color: var(--text-3); }
.noise-strip b { display: block; font-size: 1.2rem; color: var(--text); }
.why-line { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 0.76rem; color: var(--text-2); }
.why-line svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
.vote { display: inline-flex; gap: 4px; margin-top: 6px; }
.vote-btn { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--text-3);
  font: inherit; font-size: 0.7rem; cursor: pointer; }
.vote-btn:hover { color: var(--text); border-color: var(--text-3); }
.vote-btn[data-vote="up"][aria-pressed="true"] { background: color-mix(in srgb, #2fb67c 18%, transparent); border-color: #2fb67c; color: #2fb67c; }
.vote-btn[data-vote="down"][aria-pressed="true"] { background: color-mix(in srgb, var(--crit) 14%, transparent); border-color: var(--crit); color: var(--crit); }
@media (max-width: 880px) { .noise-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-note { text-align: left; } }

/* admin: editing a user's role */
.user-actions { display: inline-flex; gap: 6px; align-items: flex-start; justify-content: flex-end; }
.user-edit summary { list-style: none; cursor: pointer; }
.user-edit summary::-webkit-details-marker { display: none; }
.user-edit-panel { display: grid; gap: 10px; margin-top: 8px; padding: 12px 14px; min-width: 300px; max-width: 420px;
  text-align: left; white-space: normal; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.user-edit-panel .field-hint { display: block; }

/* admin: deleting a client */
.client-delete summary { list-style: none; cursor: pointer; }
.client-delete summary::-webkit-details-marker { display: none; }
.client-delete-panel { margin-top: 8px; padding: 12px 14px; max-width: 460px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--crit) 40%, var(--line)); background: color-mix(in srgb, var(--crit) 6%, var(--surface));
  font-size: 0.8rem; line-height: 1.5; white-space: normal; }
.client-delete-panel p { margin: 0 0 8px; }
.client-delete-panel ul { margin: 0 0 10px; padding-left: 18px; color: var(--text-2); }
.client-delete-panel .btn svg { width: 14px; height: 14px; }
.client-delete-form { display: grid; gap: 8px; }

/* site import */
.import-box { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.import-head { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.import-head b { display: block; font-size: 0.92rem; }
.import-head small { display: block; color: var(--text-3); font-size: 0.8rem; margin-top: 2px; max-width: 640px; }
.import-pick { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.import-pick svg { width: 15px; height: 15px; }
.import-preview { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.import-preview.is-busy { opacity: 0.55; pointer-events: none; }
.import-summary { margin: 0 0 10px; font-size: 0.88rem; }
.import-summary .good { color: var(--ok, #2fb67c); }
.import-mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.import-note { margin: 12px 0 6px; font-size: 0.78rem; color: var(--text-3); }
.import-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.import-table th { text-align: left; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.import-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.import-table td b { display: block; font-weight: 600; }
.import-table td small { display: block; color: var(--text-3); font-size: 0.72rem; }
.import-table td input { width: 100%; min-width: 90px; background: var(--surface); }
.import-table td.mono { font-family: var(--mono); font-size: 0.74rem; color: var(--text-2); white-space: nowrap; }
.import-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-2); max-height: 220px; overflow: auto; }
.import-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.import-actions select { max-width: 340px; }
.imported-sites { margin-top: 14px; }
.imported-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.imported-count { flex: 1 1 220px; font-size: 0.86rem; font-weight: 600; }
.imported-search { flex: 0 1 220px; background: var(--surface); }
.imported-rows { max-height: 520px; overflow: auto; }
.imported-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.imported-foot .imported-save { margin-left: auto; }

/* who gets what */
.people-switch { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.people-list { display: grid; gap: 12px; }
.person { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.person-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.person-top .person-name { flex: 1 1 160px; background: var(--surface); }
.person-top .person-email { flex: 2 1 240px; background: var(--surface); }
.person-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 18px; }
.pfield { display: grid; gap: 6px; align-content: start; }
.pfield > label { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.person-chips { gap: 6px; }
.person-chips .chip-toggle span { font-size: 0.78rem; text-transform: none; }
.chip-toggle.is-off { opacity: 0.5; }
.person-timing { display: flex; gap: 8px; flex-wrap: wrap; }
.site-chooser-tools { display: flex; gap: 6px; margin-bottom: 6px; }
.site-chooser-tools input { flex: 1 1 160px; background: var(--surface); }
.site-chooser-list { max-height: 180px; overflow: auto; padding: 2px; }
.site-chooser-list label[hidden] { display: none; }
.person-timing select { flex: 1 1 140px; }
.person-timing .person-near { flex: 1 1 100%; }
.person-timing .person-near span { text-transform: none; }
.person-says { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-3); }
.people-empty { margin: 0; color: var(--text-3); font-size: 0.86rem; }
@media (max-width: 1100px) { .person-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 860px) {
  .topic-row { grid-template-columns: 38px minmax(0, 1fr) minmax(150px, 1fr); }
  .topic-row .urg, .topic-row .vol { grid-column: 2 / -1; }
  .topic-head { display: none; }
}

/* --------------------------------------------------------------- auth */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 540px); }

/* Brand panel: a stage built around the logo artwork. The artwork is drawn
   on pure black, so the panel IS that black (#010205), "screen" drops any
   remaining black, and a radial mask dissolves the image's edges -- no
   rectangle anywhere. It stays dark in light mode too: it's artwork, not UI. */
.auth-brand {
  --brand-blue: #1f6bff;
  --brand-cyan: #38c8ff;
  --text: #e9edf7; --text-2: #a4aec3; --text-3: #6c7589;
  --line: rgba(80, 140, 255, 0.035);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  gap: 18px;
  padding: 40px 56px 44px;
  overflow: hidden;
  text-align: center;
  color: var(--text);
  border-right: 1px solid rgba(80, 140, 255, 0.12);
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(31, 107, 255, 0.05), transparent 70%),
    radial-gradient(45% 35% at 85% 100%, rgba(56, 200, 255, 0.04), transparent 70%),
    #000103;
}
.auth-brand::after {  /* survey grid radiating from the globe */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 62%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-hud { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(56, 160, 255, 0.45); z-index: 1; }
.auth-hud.tl { top: 22px; left: 22px; border-top-width: 1.5px; border-left-width: 1.5px; }
.auth-hud.tr { top: 22px; right: 22px; border-top-width: 1.5px; border-right-width: 1.5px; }
.auth-hud.bl { bottom: 22px; left: 22px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.auth-hud.br { bottom: 22px; right: 22px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: #7ea6e8;
}
.auth-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-cyan);
  box-shadow: 0 0 0 0 rgba(56, 200, 255, 0.6); animation: authPing 2.4s ease-out infinite;
}
/* Sign-in page: a neon-green live dot beside "Secure client portal", like the homepage's. */
.auth-brand .auth-eyebrow .live-dot {
  background: #39ff7a; box-shadow: 0 0 6px #39ff7a, 0 0 0 0 rgba(57, 255, 122, 0.6);
  animation-name: authPingGreen;
}
@keyframes authPingGreen {
  0% { box-shadow: 0 0 6px #39ff7a, 0 0 0 0 rgba(57, 255, 122, 0.6); }
  80%, 100% { box-shadow: 0 0 6px #39ff7a, 0 0 0 9px rgba(57, 255, 122, 0); }
}

.auth-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 0; }
.auth-glow {
  position: absolute; left: 50%; top: 46%; width: min(52vh, 62%); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(31, 107, 255, 0.12) 0%, rgba(31, 107, 255, 0.04) 45%, transparent 70%);
  filter: blur(18px); animation: authBreathe 7s ease-in-out infinite;
}
.auth-logo-hero {
  position: relative; display: block;
  width: auto; height: auto; max-width: 100%; max-height: min(56vh, 520px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
}

/* Live globe (static/js/login-globe.js): a canvas draws the spinning globe
   where the logo's globe sits; the logo image then shows only its lettering
   band, filtered to its bright pixels (#logoText). Without JavaScript the
   plain image shows as before. */
.auth-logo-live { position: relative; display: grid; place-items: center; max-width: 100%; }
.auth-globe {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0;
  transition: opacity 0.8s ease;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}
.auth-logo-live.is-live .auth-globe { opacity: 1; }
/* Drag to spin (login-globe.js): a grab cursor over the globe; sideways swipes turn it on
   touch screens while up/down still scrolls the page. */
.auth-logo-live.is-live { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.auth-logo-live.is-grabbable { cursor: grab; }
.auth-logo-live.is-dragging { cursor: grabbing; }
.auth-logo-live.is-live .auth-logo-hero {
  filter: url(#logoText);
  -webkit-mask-image: linear-gradient(to bottom, transparent 45.6%, #000 46.4%, #000 53.4%, transparent 54.2%);
  mask-image: linear-gradient(to bottom, transparent 45.6%, #000 46.4%, #000 53.4%, transparent 54.2%);
}
/* The thin subtitle, divider and tagline sit on plain black in the image, so they need no
   hard cut: a second copy with a gentle brightness-to-alpha filter keeps them crisp. */
.auth-logo-sub, .auth-tagline { display: none; }
.auth-logo-live.is-live .auth-logo-sub {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; filter: url(#logoSub);
}
/* Subtitle and divider stay put. */
.auth-logo-live.is-live .auth-logo-sub {
  -webkit-mask-image: linear-gradient(to bottom, transparent 55.2%, #000 55.9%, #000 64.4%, transparent 65%);
  mask-image: linear-gradient(to bottom, transparent 55.2%, #000 55.9%, #000 64.4%, transparent 65%);
}
/* The tagline, set as real text under the globe (below the crosshair's end square), sized to
   the logo by login-globe.js (--logo-w), with a soft glow and flanking rules. */
.auth-logo-live.is-live .auth-tagline {
  display: flex; align-items: center; justify-content: center; gap: 1.1em;
  position: absolute; left: 0; right: 0; top: 90.6%; transform: translateY(-50%);
  margin: 0; pointer-events: none; white-space: nowrap;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500;
  font-size: max(10px, calc(var(--logo-w, 600px) * 0.0205));
  --tag-ls: 0.42em; letter-spacing: var(--tag-ls); text-transform: uppercase;
  color: #dbe7ff; text-shadow: 0 0 10px rgba(56, 140, 255, 0.65), 0 0 2px rgba(150, 200, 255, 0.5);
  animation: auth-tag-in 1.2s 0.4s ease both;
}
.auth-logo-live.is-live .auth-tagline::before,
.auth-logo-live.is-live .auth-tagline::after {
  content: ""; width: 3.2em; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(90, 165, 255, 0.85));
}
.auth-logo-live.is-live .auth-tagline::after {
  background: linear-gradient(270deg, transparent, rgba(90, 165, 255, 0.85));
  margin-left: calc(-1 * var(--tag-ls));  /* letter-spacing leaves a gap after the last letter */
}
@keyframes auth-tag-in { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
@media (max-width: 600px) {
  .auth-logo-live.is-live .auth-tagline { --tag-ls: 0.3em; gap: 0.7em; }
  .auth-logo-live.is-live .auth-tagline::before, .auth-logo-live.is-live .auth-tagline::after { width: 1.4em; }
}
@media (prefers-reduced-motion: reduce) { .auth-logo-live.is-live .auth-tagline { animation: none; } }

.auth-hero { max-width: 600px; }
.auth-hero h1 { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 650; text-wrap: balance; }
.auth-hero h1 span { white-space: nowrap; }
.auth-hero h1 span {
  background: linear-gradient(90deg, #4d8bff 0%, var(--brand-blue) 35%, var(--brand-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-hero p { margin: 12px auto 0; max-width: 500px; color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }

.auth-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 4px 0 0; padding: 0; list-style: none;
  color: var(--text-2); font-size: 0.8rem;
}
.auth-points li {
  display: flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(80, 140, 255, 0.18); background: rgba(31, 107, 255, 0.06);
}
.auth-points svg { width: 16px; height: 16px; color: var(--brand-cyan); flex-shrink: 0; }

/* Sign-in side: follows the light/dark theme. */
.auth-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 36px 72px;
  background: radial-gradient(70% 45% at 50% 0%, rgba(31, 107, 255, 0.07), transparent 70%), var(--bg);
}
.auth-card {
  position: relative; width: 100%; max-width: 400px; padding: 34px 32px 28px;
  border-radius: 18px; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(31, 107, 255, 0.05);
  backdrop-filter: blur(8px);
}
.auth-card::before {  /* thin brand edge along the top of the card */
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #1f6bff 30%, #38c8ff 70%, transparent);
}
.auth-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
}
.auth-badge svg { width: 13px; height: 13px; }
.auth-card h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.02em; }
.auth-card > p { margin: 6px 0 24px; color: var(--text-3); }
.auth-card .btn { width: 100%; height: 46px; margin-top: 22px; }
.auth-card .btn-primary { background: linear-gradient(135deg, #1f6bff 0%, #2a8cff 50%, #22c3ee 100%); box-shadow: 0 10px 30px -10px rgba(31, 107, 255, 0.7); }
.auth-card .btn-primary:hover { filter: brightness(1.08); }
.auth-card .toast { margin-bottom: 16px; box-shadow: none; border: 1px solid var(--line-strong); animation: none; }
.auth-foot { margin-top: 18px; font-size: 0.8rem; color: var(--text-3); line-height: 1.5; }
/* Live radio setup (Integrations → Broadcastify) */
.radio-block { margin-top: 18px; }
/* Report status panel: a spinner while building/sending, then the result (stays put). */
.report-status { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2, rgba(127, 127, 127, 0.08)); font-size: 0.86rem; line-height: 1.45; }
.report-status[hidden] { display: none; }  /* display:flex above would otherwise beat the hidden attribute */
.report-status small { color: var(--text-2); }
.report-status.is-ok { border-color: color-mix(in srgb, var(--success, #1f9d55) 55%, transparent);
  background: color-mix(in srgb, var(--success, #1f9d55) 10%, transparent); }
.report-status.is-warn { border-color: color-mix(in srgb, var(--warn, #b7791f) 55%, transparent);
  background: color-mix(in srgb, var(--warn, #b7791f) 10%, transparent); }
.report-status.is-error { border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent); }
.report-status-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.8rem; color: #fff; background: var(--text-3); }
.report-status.is-ok .report-status-icon { background: var(--success, #1f9d55); }
.report-status.is-warn .report-status-icon { background: var(--warn, #b7791f); }
.report-status.is-error .report-status-icon { background: var(--danger); }
.report-spinner { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent);
  animation: report-spin 0.8s linear infinite; }
@keyframes report-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .report-spinner { animation-duration: 2.4s; } }
/* Demo workspace banner (ops/seed_demo.py): sample data, said up front. */
.demo-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warn, #b7791f) 45%, transparent);
  background: color-mix(in srgb, var(--warn, #b7791f) 10%, transparent); font-size: 0.86rem; line-height: 1.45; color: var(--text); }
.demo-banner svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warn, #b7791f); }
/* Configure → Client reports: one card per report, each laid out as labelled steps. */
.report-card { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.report-card-head { display: flex; align-items: flex-start; gap: 12px; }
.report-card-head .badge { margin-left: auto; flex: none; }
.report-card-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); }
.report-card-icon svg { width: 18px; height: 18px; }
.report-card-title { min-width: 0; flex: 1; }
.report-card-title h3 { margin: 0; font-size: 0.98rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.report-card-title p { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-3); max-width: 720px; }
.report-format { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px;
  color: var(--text-2); border: 1px solid var(--line-strong); }
.report-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.report-step-label { display: block; margin-bottom: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); }
.report-step .field-hint { display: block; margin-top: 6px; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.report-tile { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.report-tile:has(input:checked) { border-color: var(--accent-ring); background: var(--accent-soft); }
.email-chips { background: var(--surface); }
.report-split { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr); gap: 18px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.report-pane { min-width: 0; }
.report-pane:only-child { grid-column: 1 / -1; }  /* viewers get Download only */
.report-pane + .report-pane { padding-left: 18px; border-left: 1px solid var(--line); }
@media (max-width: 720px) {
  .report-card { padding: 14px; }
  .report-card-head { flex-wrap: wrap; }
  .report-card-head .badge { margin-left: 0; }  /* wraps under the title instead of squeezing it */
  .report-card-icon { display: none; }
  .report-card-title { flex-basis: 100%; }
  .report-split { grid-template-columns: 1fr; }
  .report-pane + .report-pane { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .police-report-download { width: 100%; justify-content: center; }
}
.x-accounts-field { grid-column: 1 / -1; }  /* up to 100 chips + the check table: the whole row */
.x-chip-box { max-height: 220px; overflow: auto; }
.x-chip-note { display: block; margin-top: 4px; }
.name-chip.x-chip-ok { border-color: color-mix(in srgb, var(--success, #1f9d55) 60%, transparent); }
.name-chip.x-chip-ok .name-chip-text::before { content: "● "; color: var(--success, #1f9d55); }
.name-chip.x-chip-quiet { border-color: color-mix(in srgb, var(--warn, #b7791f) 60%, transparent); }
.name-chip.x-chip-quiet .name-chip-text::before { content: "● "; color: var(--warn, #b7791f); }
.name-chip.x-chip-missing, .name-chip.x-chip-suspended { border-color: color-mix(in srgb, var(--danger) 70%, transparent); }
.name-chip.x-chip-missing .name-chip-text, .name-chip.x-chip-suspended .name-chip-text { text-decoration: line-through; color: var(--danger); }
.x-check-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.x-check-results { margin-top: 10px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.x-check-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.x-check-table td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.x-check-table .x-status { font-weight: 700; white-space: nowrap; }
.x-check-table .x-ok { color: var(--success, #1f9d55); }
.x-check-table .x-quiet { color: var(--warn, #b7791f); }
.x-check-table .x-missing, .x-check-table .x-suspended { color: var(--danger); }
.addon-cap { display: block; margin: 4px 0; }
#addonsCard td { vertical-align: top; }
#addonsCard td small.cell-muted { display: block; }
.radio-master { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.radio-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 12px; }
.radio-steps li.done > b::after { content: " ✓"; color: var(--accent); }
.radio-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 2px; }
.radio-inline-form input[type="text"], .radio-inline-form input[type="password"] { flex: 1 1 180px; min-width: 0; }
.radio-sites { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; margin: 6px 0; }
.radio-sites > small:first-child { grid-column: 1 / -1; }

/* Terms of Service page */
.legal-doc { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; line-height: 1.65; color: var(--text); }
.legal-doc h1 { font-size: 2rem; margin: 4px 0 6px; }
.legal-doc h2 { font-size: 1.05rem; margin: 30px 0 8px; }
.legal-doc p, .legal-doc li { font-size: 0.95rem; color: var(--text-2); }
.legal-doc b { color: var(--text); }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc li { margin: 4px 0; }
.legal-brand { margin: 0; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); }
.legal-meta { margin: 0 0 24px; font-size: 0.85rem; }
.legal-callout { padding: 12px 14px; border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 6px; }
.legal-draft { margin: 0 0 24px; padding: 14px 18px; border: 1px dashed var(--accent-ring); border-radius: 10px; background: var(--accent-soft); }
.legal-draft p, .legal-draft li { font-size: 0.88rem; }
@media print {
  .legal-doc { padding: 0; color: #000; }
  .legal-doc p, .legal-doc li, .legal-doc b, .legal-doc h1, .legal-doc h2 { color: #000; }
}
.auth-legal { position: absolute; bottom: 24px; left: 0; right: 0; margin: 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-3); }

@keyframes authBreathe { 0%, 100% { opacity: 0.75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes authPing { 0% { box-shadow: 0 0 0 0 rgba(56, 200, 255, 0.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(56, 200, 255, 0); } }

/* --------------------------------------------------------- responsive */

@media (max-width: 1280px) {
  .ops-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-grid { grid-template-columns: minmax(0, 1fr); }
  .feed { max-height: 420px; }
  .config-layout { grid-template-columns: minmax(0, 1fr); }
  .config-nav { position: sticky; top: 0; z-index: 15; flex-direction: row; overflow-x: auto; padding: 8px 0; background: var(--bg); }
  .config-nav a { white-space: nowrap; }
}

@media (max-width: 880px) {
  body { font-size: 14px; }
  .app { flex-direction: column; }
  .cfg-section, .card { scroll-margin-top: 72px; }
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--sidebar) 90%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .mobile-header .logo-mark { width: 28px; height: 28px; }
  .mobile-header b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-header .spacer { flex: 1; }

  .sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
    background: color-mix(in srgb, var(--sidebar) 92%, transparent);
  }
  .sb-brand, .sb-client, .sb-label, .sb-footer { display: none; }
  .sb-nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .nav-item { flex-direction: column; justify-content: center; gap: 4px; height: 52px; width: auto; flex: 1; padding: 0 4px; font-size: 0.66rem; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item.active { background: transparent; }
  .nav-item.active::before { left: 25%; right: 25%; top: -7px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .nav-label { max-width: 100%; }
  .nav-kbd { display: none; }

  .main { padding: 18px 14px 100px; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 1.45rem; }
  .page-actions { width: 100%; }
  .search-trigger { display: none; }
  .page-actions .btn-primary { flex: 1; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 1.6rem; }
  .spark { width: 64px; top: 14px; right: 10px; }
  .map-wrap { min-height: 360px; margin: 10px; }
  .draw-btn span { display: none; }
  .map-ctrl-text { display: none; }
  .map-controls { gap: 6px; }
  .map-ctrl { padding: 0 10px; }
  .draw-btn { padding: 0 9px; height: 36px; }
  .draw-btn svg { width: 18px; height: 18px; }
  .export-menu { width: min(290px, calc(100vw - 60px)); }
  .draw-hint { top: 54px; font-size: 0.78rem; }
  .ann-editor { position: static; width: auto; max-height: none; margin: 0 10px 10px; box-shadow: none; border: 1px solid var(--line-strong); }
  .impact-panel { margin: 0 10px 12px; }
  .impact-list { grid-template-columns: minmax(0, 1fr); }
  .toolbar { padding: 12px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; justify-content: center; padding: 0 6px; }
  .toasts { top: auto; bottom: 80px; right: 12px; left: 12px; width: auto; }
  .save-bar { bottom: 78px; }
  .cfg-section { padding: 16px; }
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-brand { padding: 26px 20px 22px; gap: 10px; grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid rgba(80, 140, 255, 0.12); }
  .auth-hud { width: 16px; height: 16px; }
  .auth-hud.tl, .auth-hud.tr { top: 14px; }
  .auth-hud.bl, .auth-hud.br { bottom: 14px; }
  .auth-hud.tl, .auth-hud.bl { left: 14px; }
  .auth-hud.tr, .auth-hud.br { right: 14px; }
  .auth-eyebrow { font-size: 0.6rem; letter-spacing: 0.26em; }
  .auth-logo-hero { max-height: 34vh; }
  .auth-hero h1 { font-size: 1.35rem; }
  .auth-hero p, .auth-points { display: none; }
  .auth-panel { justify-content: flex-start; padding: 24px 16px 64px; }
  .auth-card { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------- comms */

.comms-subnav { margin-bottom: 16px; }
.comms-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(242, 193, 75, 0.35); background: rgba(242, 193, 75, 0.08); font-size: 0.86rem; }
.comms-notice > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--warn); }
.comms-notice div { flex: 1; }
.comms-notice p { margin: 0 0 4px; }
.comms-notice p:last-child { margin-bottom: 0; }
.comms-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.comms-col, .comms-stack { display: grid; gap: 14px; min-width: 0; }
.comms-vars { margin-top: 16px; }
.comms-vars .field { margin-top: 0; }
.comms-alert-ref { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 8px 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 0.86rem; font-weight: 600; }
.comms-alert-ref > svg { width: 16px; height: 16px; flex-shrink: 0; }
.comms-alert-ref span { flex: 1; min-width: 0; }
.comms-alert-area { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-2); }
.comms-alert-area .comms-radius { width: 72px; flex: 0 0 72px; }
.comms-alert-area > span { white-space: nowrap; }
.comms-people { display: grid; gap: 2px; max-height: 220px; overflow: auto; margin-top: 6px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.comms-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 0.88rem; }
.comms-person:hover { background: var(--surface-2); }
.comms-person span { flex: 1; min-width: 0; }
.comms-person input { accent-color: var(--accent); width: 16px; height: 16px; }
.comms-preview { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.comms-preview p { margin: 0; }
.comms-preview p + p { margin-top: 6px; }
.comms-reach { font-size: 0.92rem; }
.comms-warn { color: var(--warn); font-size: 0.84rem; }
.chip-toggle.is-disabled { opacity: 0.45; cursor: not-allowed; }
.chip-toggle span svg { width: 14px; height: 14px; }
.comms-table td { vertical-align: top; }
.comms-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.comms-row-actions { white-space: nowrap; text-align: right; }
.comms-ch { display: inline-flex; margin-right: 6px; color: var(--text-2); }
.comms-ch svg { width: 15px; height: 15px; }
.comms-snippet { color: var(--text-2); max-width: 420px; }
.comms-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.comms-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 4px 0 16px; }
.comms-kpis .kpi { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 14px; }
.comms-kpis .kpi-value { font-size: 1.5rem; margin-top: 6px; }
.kpi-ok .kpi-value { color: var(--ok); }
.comms-filter { margin-bottom: 12px; }
.tally { display: grid; gap: 5px; min-width: 170px; }
.tally-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--surface-3, var(--line)); }
.tally-seg.is-safe { background: var(--ok); }
.tally-seg.is-help { background: var(--crit); }
.tally-seg.is-wait { background: var(--line-strong); }
.tally small { font-size: 0.76rem; color: var(--text-3); }
.ans-safe { color: var(--ok); }
.ans-help { color: var(--crit); }
.is-help-row td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.comms-errors { margin: 8px 0 0; padding-left: 18px; font-size: 0.84rem; color: var(--text-2); max-height: 220px; overflow: auto; }
.comms-actions { gap: 8px; }
.comms-table .tag { margin: 0 4px 4px 0; }

@media (max-width: 1100px) {
  .comms-grid { grid-template-columns: minmax(0, 1fr); }
}

.geofix { margin-top: 10px; }
.geofix-toggle { font-size: 0.82rem; }
.geofix-form { margin-top: 8px; }
.geofix-row { display: flex; gap: 8px; flex-wrap: wrap; }
.geofix-row input { flex: 1 1 200px; }
.geofix-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conf-unsure { color: var(--warn); font-weight: 600; }
.conf-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; color: var(--text-2); background: rgba(242, 193, 75, 0.1); border: 1px solid rgba(242, 193, 75, 0.3); }
.review-page { max-width: 920px; margin: 0 auto; padding: 24px 16px 60px; }
.review-summary { display: grid; gap: 10px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.review-item { margin-bottom: 12px; }
.review-item.is-done { opacity: 0.55; }
.review-title { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.review-title a { color: var(--text); text-decoration: none; }
.review-title a:hover { color: var(--accent-text); }
.review-text { margin: 10px 0 0; font-size: 0.84rem; color: var(--text-2); }
.review-kv { margin: 12px 0; }
.review-form { display: flex; flex-wrap: wrap; gap: 8px; }
.review-form input { flex: 1 1 240px; }