/* css variables for light/dark theme design systems */
:root {
  /* Common Brand Colors */
  --orange: #E8581F;
  --orange-deep: #D04818;
  --teal: #1F6B75;
  --teal-soft: #D3E7E9;
  --sun: #E29B12;
  --sun-soft: #F9EAB8;
  --bush: #2E4C2A;
  --sky: #6FA8C4;
  --hazard-yellow: #FFCC00;
  --hazard-orange: #FF9500;
  --hazard-red: #FF3B30;
  --mmi-weak: #8FD1EA;
  --mmi-light: #A8CF63;
  --mmi-moderate: #F2D34F;
  --mmi-strong: #F29A2E;
  --mmi-severe: #E55A2A;
  --mmi-extreme: #D63A2F;
  
  /* Common Layout Rules */
  --header-height: 64px;
  --sidebar-width: 420px;
  /* Fraunces everywhere: one display voice across landing + app surfaces. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-standard: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Soot Dark Mode (Default) */
body.theme-dark {
  --bg: #181511;
  --bg-lifted: #24201A;
  --bg-deep: #100E0B;
  --border: #353026;
  --text-main: #FCF6E8;
  --text-muted: #B6AE9E;
  --text-secondary: #8E8576;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 20px var(--shadow-color);
  --modal-bg: rgba(16, 14, 11, 0.8);
  --card-shadow: 0 4px 12px rgba(0,0,0,0.25);
  --active-highlight: rgba(232, 88, 31, 0.15);
  /* Brighter teal for the "in force now" chip — the brand teal is too dim on
     the near-black card background. */
  --status-active: #4DBCC9;
}

/* Paper Light Mode */
body.theme-light {
  --bg: #F7F0DD;
  --bg-lifted: #FCF8EE;
  --bg-deep: #EADFC4;
  --border: #DBCAA2;
  --text-main: #1B2030;
  --text-muted: #7A7060;
  --text-secondary: #9E917A;
  --shadow-color: rgba(27, 32, 48, 0.08);
  --shadow: 0 4px 20px var(--shadow-color);
  --modal-bg: rgba(247, 240, 221, 0.8);
  --card-shadow: 0 4px 12px rgba(27,32,48,0.06);
  --active-highlight: rgba(232, 88, 31, 0.08);
  /* The deep brand teal reads well on the cream light background. */
  --status-active: var(--teal);
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: var(--font-body);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}

/* ─────────────── LOADING SCREEN ─────────────── */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 28px;
  transition: opacity 420ms ease, visibility 420ms ease;
}

body.theme-light .site-loader {
  color: #161A22;
  background:
    radial-gradient(circle at 50% 31%, rgba(242, 182, 54, 0.2), transparent 28%),
    radial-gradient(circle at 22% 78%, rgba(74, 107, 58, 0.13), transparent 34%),
    linear-gradient(145deg, #F7F0DD 0%, #EEF0DC 52%, #D3E7E9 100%);
}

body.theme-dark .site-loader {
  color: #FCF6E8;
  background:
    radial-gradient(circle at 50% 30%, rgba(232, 88, 31, 0.22), transparent 28%),
    radial-gradient(circle at 26% 78%, rgba(44, 122, 126, 0.2), transparent 34%),
    linear-gradient(145deg, #161A22 0%, #1F312A 54%, #243B4E 100%);
}

.site-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--loader-grid);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}

body.theme-light .site-loader {
  --loader-grid:
    linear-gradient(rgba(22, 26, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 26, 34, 0.03) 1px, transparent 1px);
}

body.theme-dark .site-loader {
  --loader-grid:
    linear-gradient(rgba(252, 246, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 246, 232, 0.03) 1px, transparent 1px);
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-scene {
  position: relative;
  width: min(360px, 82vw);
  display: grid;
  justify-items: center;
  gap: 12px;
}

.loader-scene,
.loader-copy {
  z-index: 1;
}

.loader-brand-mark {
  position: relative;
  width: min(300px, 68vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.loader-brand-mark::before {
  content: none;
}

.loader-brand-mark::after {
  content: none;
}

.loader-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34));
  animation: loader-umbrella-drift 6s ease-in-out infinite;
  z-index: 2;
}

.loader-copy {
  position: absolute;
  left: 50%;
  top: calc(50% + 126px);
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.loader-copy strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1;
  letter-spacing: 0;
}

.loader-copy span {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

@keyframes loader-umbrella-drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-12px, -20px) rotate(-4deg);
  }
  50% {
    transform: translate(-4px, -10px) rotate(-1deg);
  }
  75% {
    transform: translate(-18px, -28px) rotate(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .loader-brand-mark img {
    animation: none;
    transition: none;
  }
}

/* ─────────────── HEADER ─────────────── */
.dashboard-header {
  height: var(--header-height);
  background-color: var(--bg-lifted);
  border-bottom: 1.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 10;
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.icon-pulse {
  width: 10px;
  height: 10px;
  background-color: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(232, 88, 31, 0.25);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 88, 31, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(232, 88, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 88, 31, 0); }
}

.badge-live {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--orange);
  color: #fff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dashboard-nav a {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  color: var(--text-secondary, inherit);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-nav.pill-toggle {
  background: color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--border);
}
.dashboard-nav.pill-toggle a {
  border: none;
  background: transparent;
  padding: 6px 14px;
}
.dashboard-nav.pill-toggle a.active {
  background: var(--bg-lifted);
  color: var(--text-main);
  box-shadow: 0 1px 4px var(--shadow-color);
  pointer-events: none;
}
.dashboard-nav a:hover {
  color: var(--text-primary, inherit);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
/* Phones keep the nav — /live must never be a dead end — just tighter. */
@media (max-width: 720px) {
  .dashboard-nav { gap: 4px; }
  .dashboard-nav a, .dashboard-nav.pill-toggle a {
    padding: 6px 10px;
    font-size: 12px;
  }
}

.system-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background-color: var(--bg-deep);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.healthy { background-color: var(--teal); }
.status-dot.warning { background-color: var(--sun); }
.status-dot.error { background-color: var(--orange); }

/* Theme Button toggle */
.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-standard);
}
.theme-toggle-btn:hover {
  background-color: var(--bg-deep);
}
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* Hide sun in dark mode, hide moon in light mode */
body.theme-dark .icon-sun { display: block; }
body.theme-dark .icon-moon { display: none; }
body.theme-light .icon-sun { display: none; }
body.theme-light .icon-moon { display: block; }


/* ─────────────── MAIN LAYOUT ─────────────── */
.dashboard-main {
  flex: 1;
  display: flex;
  height: calc(100vh - var(--header-height));
  position: relative;
}


/* ─────────────── SIDEBAR ─────────────── */
.sidebar-panel {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  border-right: 1.5px solid var(--border);
  background-color: var(--bg-lifted);
  display: flex;
  flex-direction: column;
  z-index: 5;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.controls-container {
  padding: 20px 24px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--transition-standard);
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-heading p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

/* Filter chips */
/* Hazard filter bar — five equal icon+label tabs on a single row. */
.category-filters-row {
  display: flex;
  gap: 6px;
}

.filter-chip {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

.filter-chip input {
  display: none;
}

.chip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 2px 8px;
  border-radius: 11px;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.chip-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.chip-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.filter-chip:hover .chip-inner {
  border-color: color-mix(in srgb, var(--chip-tint, var(--text-main)) 45%, var(--border));
  color: var(--text-main);
}

/* Active (checked) = hazard-tinted fill, icon, text and border. */
.filter-chip input:checked + .chip-inner {
  background-color: color-mix(in srgb, var(--chip-tint) 16%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--chip-tint) 55%, transparent);
  color: var(--chip-tint);
}

/* Per-hazard accent colours. */
.filter-chip[data-category="earthquake"] { --chip-tint: #E5732A; }
.filter-chip[data-category="tsunami"]    { --chip-tint: #2F80B8; }
.filter-chip[data-category="volcano"]    { --chip-tint: #D63A2F; }
.filter-chip[data-category="weather"]    { --chip-tint: #3FA39E; }
.filter-chip[data-category="civil"]      { --chip-tint: #7A6FCB; }
.filter-chip[data-category="road"]       { --chip-tint: #E8743B; }

/* Dropdown Filters */
.filters-dropdowns {
  display: flex;
  gap: 12px;
  /* Separate from the chip row above so "Min Urgency" reads as the label of
     its select, not a caption for the chips. */
  margin-top: 14px;
}

.filter-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.filter-group select {
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}
.filter-group select:focus {
  border-color: var(--text-muted);
}

/* Carries real data (counts, windows) — sentence case reads better than the
   mono-caps eyebrow treatment, especially when it wraps on phones. */
.alerts-summary-bar {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Alert List Viewport */
.alert-list-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 2px;
  color: var(--text-secondary);
}

.feed-section-header .feed-section-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.feed-section-header small {
  min-width: 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-secondary);
}

.feed-section[data-section="Immediate action"] .feed-section-label {
  color: var(--hazard-orange);
}

.feed-section[data-section="Immediate action"] .feed-section-header small {
  color: var(--hazard-orange);
  font-weight: 700;
}

.national-status-card[hidden] { display: none; }
/* Calm, information-first: a static tinted card with one accent rail. No
   shimmer/animation chrome — the content is the alarm, not the box. */
.national-status-card {
  --ns: var(--sky);
  position: relative;
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  margin: 2px 0 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ns) 8%, var(--bg-lifted));
  border: 1px solid color-mix(in srgb, var(--ns) 30%, var(--border-color));
  border-left: 4px solid var(--ns);
  color: var(--text-main);
  text-decoration: none;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.national-status-card.is-urgent { --ns: var(--hazard-orange); }
.national-status-card.is-warning { --ns: var(--hazard-orange); }
.national-status-card.is-watch { --ns: var(--hazard-yellow); }
.national-status-card.is-info { --ns: var(--sky); }
.national-status-card.is-clear { --ns: var(--status-active); }
.national-status-card.is-loading { --ns: var(--border); }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton {
  display: inline-block;
  min-height: 1em;
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 4px;
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  color: transparent !important;
  user-select: none;
}

/* One quiet kicker line: colored status word, then the summary type after a
   separator — no pill-on-pill chrome. */
.national-status-kicker-row {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}
.national-status-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ns);
}
.national-status-kicker::before {
  content: "";
  min-width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ns);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns) 22%, transparent);
}
.national-status-secondary {
  position: relative;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.national-status-secondary::before {
  content: "·";
  margin-right: 8px;
  color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
}
.national-status-card strong {
  position: relative;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-main);
}
.national-status-bullets {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.national-status-bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--text-muted);
}
.national-status-bullet .bullet-icon {
  flex-shrink: 0;
  font-size: 12px;
  padding-top: 1px;
}
.national-status-bullet .bullet-text {
  min-width: 0;
}
.national-status-card > span:not(.national-status-kicker-row):not(.national-status-bullets) {
  position: relative;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--text-muted);
}
.national-status-card small {
  position: relative;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.national-status-disclaimer {
  line-height: 1.35;
  opacity: 0.82;
}
.national-status-provenance {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.national-status-provenance[hidden] {
  display: none !important;
}

/* AI Feedback Controls */
.ai-feedback-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: gap 0.25s ease;
}
.ai-feedback-controls[hidden] {
  display: none !important;
}
.ai-feedback-controls-text {
  font-size: 11px;
  color: var(--text-secondary);
  margin-right: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}
.ai-feedback-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease, padding 0.25s ease, width 0.25s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ai-feedback-btn:hover:not(:disabled) {
  background: var(--bg-lifted);
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--text-secondary) 40%, transparent);
}
.ai-feedback-btn:disabled {
  cursor: default;
}
.ai-feedback-btn.is-active {
  background: color-mix(in srgb, var(--ns) 18%, transparent);
  color: var(--ns);
  border-color: color-mix(in srgb, var(--ns) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ns) 24%, transparent);
}
.ai-feedback-controls.voted-down .ai-feedback-btn.is-active {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 22%, transparent);
}
.ai-feedback-btn.pop {
  animation: ai-feedback-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.ai-feedback-controls.is-voted .ai-feedback-controls-text {
  color: var(--ns);
  font-weight: 700;
  animation: ai-feedback-label-in 0.35s ease;
}
.ai-feedback-controls.is-voted.voted-down .ai-feedback-controls-text {
  color: var(--orange);
}
.ai-feedback-controls.is-voted.voted-up .btn-down,
.ai-feedback-controls.is-voted.voted-down .btn-up {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
  overflow: hidden;
}
.ai-feedback-controls.is-busy .ai-feedback-btn {
  pointer-events: none;
}
.ai-feedback-controls.is-error .ai-feedback-controls-text {
  color: var(--orange);
  animation: ai-feedback-shake 0.4s ease;
}
.ai-feedback-btn svg {
  width: 14px;
  height: 14px;
}
@keyframes ai-feedback-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.24); }
  100% { transform: scale(1); }
}
@keyframes ai-feedback-label-in {
  0% { opacity: 0.35; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ai-feedback-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* AI Feedback Modal */
.feedback-modal-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
  margin-bottom: 16px;
  outline: none;
}
.feedback-modal-textarea:focus {
  border-color: var(--ns, var(--orange));
}
.feedback-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn-submit {
  background: var(--ns, var(--orange));
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.btn-submit:hover {
  filter: brightness(1.1);
}
.btn-cancel {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.btn-cancel:hover {
  background: var(--bg-deep);
}

/* Source labels render as quiet text ("GeoNet · MetService"), not pills —
   the card already carries the status colour. */
.national-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-decoration: none;
}
a.national-status-chip:hover { color: var(--text-main); text-decoration: underline; }
.national-status-chip + .national-status-chip::before {
  content: "·";
  margin: 0 7px 0 1px;
  color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .national-status-card,
  .national-status-card::before,
  .national-status-card::after {
    animation: none;
  }
}

/* Compact mode: clear / info tiers — single subtle line */
.national-status-card.is-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 2px 0 10px;
  animation: none;
  box-shadow: var(--card-shadow);
  background: color-mix(in srgb, var(--ns) 6%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--ns) 20%, var(--border-color));
  border-left-width: 3px;
}
.national-status-card.is-compact::before,
.national-status-card.is-compact::after {
  display: none;
}
.national-status-card.is-compact .national-status-kicker-row {
  flex-shrink: 0;
}
.national-status-card.is-compact .national-status-kicker {
  font-size: 10px;
  padding: 2px 7px;
}
.national-status-card.is-compact .national-status-kicker::before {
  min-width: 6px;
  height: 6px;
}
.national-status-card.is-compact strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide children that JS sets hidden — override any display rules */
.national-status-card.is-compact [hidden] {
  display: none !important;
}

/* Collapsible section header (e.g. "Earlier this week"). Rendered as a <button>
   so it's keyboard-operable; reset the native chrome to match the <div> header. */
button.feed-section-header {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: center;
}
.feed-section-header.is-collapsible:hover .feed-section-label {
  color: var(--text-secondary);
}
.feed-section-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background-color: color-mix(in srgb, var(--text-secondary) 14%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
}
.feed-section-chevron {
  font-size: 11px;
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
}
.feed-section-header[aria-expanded="true"] .feed-section-chevron {
  transform: rotate(180deg);
}
.feed-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── AGE ENCODING ──────────────────────────────────────────────────────────
   GeoNet's MMI/shaking colour is the semantic channel and must stay intact, so
   "old" is expressed only via opacity + desaturation — the hue identity of a
   moderate (yellow) or strong (orange) quake is preserved, just muted. */
.alert-card[data-age="aging"] {
  opacity: 0.88;
}
.alert-card[data-age="stale"] {
  opacity: 0.74;
  filter: saturate(0.65);
}
/* A selected/active card is always shown at full vibrancy regardless of age. */
.alert-card.active[data-age] {
  opacity: 1;
  filter: none;
}

/* (.quake-marker[data-age] decay lives in the shared map-markers.css) */

/* ── QUIET-STATE BANNER ────────────────────────────────────────────────────
   Surfaces calm-state truth ("no quakes in the last 24h") when the feed would
   otherwise lead with a days-old event. */
.feed-quiet-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: var(--bg-lifted);
  border: 1px solid var(--border);
}
.feed-quiet-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background-color: var(--sky);
}
.feed-quiet-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.feed-quiet-text strong {
  font-size: 13px;
  color: var(--text-main);
}
.feed-quiet-link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feed-quiet-link:hover {
  color: var(--text-main);
}

/* Alert Cards styling */
.alert-card {
  --alert-accent: var(--text-secondary);
  --alert-accent-soft: transparent;
  background-color: var(--bg-lifted);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  position: relative;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-standard);
  border: 1px solid transparent;
}
.alert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-color);
  background-color: var(--bg-deep);
}
.alert-card.active {
  background-color: var(--alert-accent-soft);
  border-color: var(--alert-accent);
}

.alert-card.is-immediate-action {
  border-color: color-mix(in srgb, var(--alert-accent) 42%, transparent);
  background-color: color-mix(in srgb, var(--alert-accent) 8%, var(--bg-lifted));
}

.alert-card.is-immediate-action .alert-card-rail {
  width: 6px;
}

/* Colored Rail */
.alert-card-rail {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background-color: var(--alert-accent);
}
.rail-extreme { background-color: var(--hazard-red); }
.rail-severe { background-color: var(--hazard-orange); }
.rail-moderate { background-color: var(--hazard-yellow); }
.rail-minor { background-color: var(--sky, #6FA8C4); }
.rail-info { background-color: var(--text-secondary); }

.alert-card-content {
  flex: 1;
  padding-left: 8px;
}

.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.alert-card-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
}

.alert-time {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 8px;
}

.alert-summary {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quake badge for cards */
.quake-badge {
  display: inline-flex;
  gap: 8px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  background-color: var(--alert-accent-soft);
  border: 1px solid color-mix(in srgb, var(--alert-accent) 35%, transparent);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Tags row — status chip + warning-type chip on one wrapping line. */
.alert-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
}

/* Warning-type chip — shown under the region title on area alerts so the
   generic headline ("Heavy Rain Warning - Orange") no longer leads the card. */
.alert-type-chip {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--alert-accent);
  background-color: var(--alert-accent-soft);
  border: 1px solid color-mix(in srgb, var(--alert-accent) 32%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
}

/* "In force now" / "Upcoming" status chip — tells at a glance whether an area
   alert is currently active. Active uses the app's teal (its live/healthy
   colour); upcoming is muted with a hollow dot. */
.alert-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.alert-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.alert-status--active {
  color: var(--status-active);
  background-color: color-mix(in srgb, var(--status-active) 16%, transparent);
}

.alert-status--active .alert-status-dot {
  background-color: var(--status-active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-active) 22%, transparent);
}

.alert-status--upcoming {
  color: var(--text-secondary);
  background-color: color-mix(in srgb, var(--text-secondary) 12%, transparent);
}

.alert-status--upcoming .alert-status-dot {
  background-color: transparent;
  border: 1.5px solid var(--text-secondary);
}

.alert-source {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.modal-official-link {
  margin: 10px 0 0;
}
.modal-official-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--alert-accent, var(--text-main));
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-bottom: 1px;
}
.modal-official-link a:hover {
  border-bottom-color: currentColor;
}

/* "In effect" window for area alerts (weather/tsunami/civil/volcano). Slightly
   emphasised vs the source line so the warning period reads as actionable. */
.alert-window {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}

.alert-card-compact {
  min-height: 58px;
  padding: 10px 12px 10px 14px;
  align-items: center;
  gap: 10px;
  background-color: color-mix(in srgb, var(--bg-lifted) 82%, transparent);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--border) 65%, transparent);
}

.alert-card-compact:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
}

.alert-card-compact.active {
  background-color: var(--alert-accent-soft);
  border-color: var(--alert-accent);
}

.alert-card-compact .alert-card-rail {
  top: 10px;
  bottom: 10px;
  width: 3px;
}

.compact-quake-mag {
  flex: 0 0 auto;
  width: 44px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background-color: var(--alert-accent-soft);
  border: 1px solid color-mix(in srgb, var(--alert-accent) 38%, transparent);
}

.compact-quake-mag span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
}

.compact-quake-content {
  min-width: 0;
  padding-left: 0;
}

.compact-quake-header {
  align-items: center;
  margin-bottom: 2px;
}

.compact-quake-header h3 {
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-quake-meta {
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spinner and empty states */
.alert-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  gap: 16px;
  text-align: center;
  font-size: 14px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─────────────── MAP VIEWPORT ─────────────── */
.map-viewport {
  flex: 1;
  position: relative;
  /* Trap marker/locator z-indexes (up to 1000 inside MapLibre) in their own
     stacking context so nothing from the map can paint over modals. */
  isolation: isolate;
}

#map {
  width: 100%;
  height: 100%;
}

/* Legend overlays */
.map-legend {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background-color: var(--bg-lifted);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 4;
  box-shadow: var(--shadow);
  pointer-events: none;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

/* Desktop: the legend is a static panel — hide the toggle and always show the
   body regardless of the <details> open state (mobile re-enables the toggle). */
.map-legend-toggle {
  display: none;
}
.map-legend > .map-legend-body {
  display: block;
}

/* Full-screen map toggle — mobile-only (enabled in the ≤820px block). The map
   shares the screen with the feed on desktop, so the control is hidden there. */
.map-fullscreen-toggle {
  display: none;
  position: absolute;
  bottom: 46px;
  right: 12px;
  z-index: 6;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg-lifted);
  color: var(--text-main);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.map-fullscreen-toggle:hover {
  border-color: var(--text-muted);
}
.map-fullscreen-toggle svg {
  width: 20px;
  height: 20px;
}
/* Swap the expand/collapse glyph based on the current mode. */
.map-fullscreen-toggle .icon-collapse { display: none; }
body.map-fullscreen .map-fullscreen-toggle .icon-expand { display: none; }
body.map-fullscreen .map-fullscreen-toggle .icon-collapse { display: block; }

.legend-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.legend-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.scale-box {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.scale-box.mmi-weak { background-color: rgba(143, 209, 234, 0.45); border: 1px solid var(--mmi-weak); }
.scale-box.mmi-moderate { background-color: rgba(242, 211, 79, 0.45); border: 1px solid var(--mmi-moderate); }
.scale-box.mmi-strong { background-color: rgba(242, 154, 46, 0.45); border: 1px solid var(--mmi-strong); }
.scale-box.mmi-severe { background-color: rgba(229, 90, 42, 0.5); border: 1px solid var(--mmi-extreme); }

/* Alert-area swatches — match the MetService/NEMA severity fills drawn on the
   map (yellow watch, orange warning, red emergency) plus the point marker ring. */
.scale-box.area-watch { background-color: rgba(255, 204, 0, 0.30); border: 1px solid #FFCC00; }
.scale-box.area-warning { background-color: rgba(255, 149, 0, 0.30); border: 1px solid #FF9500; }
.scale-box.area-emergency { background-color: rgba(255, 59, 48, 0.30); border: 1px solid #FF3B30; }

.legend-group + .legend-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.legend-marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #FF9500;
  box-sizing: border-box;
}

.source-disclosure {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  width: min(440px, calc(100% - 28px));
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.source-disclosure summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-lifted);
  color: var(--text-main);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.source-disclosure summary::-webkit-details-marker {
  display: none;
}

.source-disclosure[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.source-disclosure-body {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0 8px 8px 8px;
  background-color: var(--bg-lifted);
  box-shadow: var(--shadow);
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.source-disclosure-body p + p {
  margin-top: 9px;
}

.maplibregl-ctrl-attrib {
  color: var(--text-secondary);
  background: var(--bg-lifted) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.maplibregl-ctrl-attrib a {
  color: var(--text-muted);
}


/* ─────────────── DETAILED MODAL ─────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(16, 14, 11, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 520px;
  max-width: 90vw;
  background-color: var(--bg-lifted);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: color var(--transition-fast);
}
.modal-close-btn:hover {
  color: var(--text-main);
}

.modal-header {
  padding: 32px 32px 24px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.alert-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
}

.modal-title-group h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  margin-top: 8px;
  margin-bottom: 6px;
}

.modal-category-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
}

.modal-meta {
  font-size: 12.5px;
  color: var(--text-muted);
}

.modal-body {
  padding: 24px 32px 32px;
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Quake metric grids */
.quake-metrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.metric-card {
  flex: 1 1 100px;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 480px) {
  .quake-metrics-grid .metric-card {
    flex: 1 1 calc(50% - 6px);
  }
}

.metric-card .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.metric-card .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
}

.metric-card-shaking {
  gap: 3px;
}

.mmi-gauge-wrap {
  width: 74px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alert-accent, var(--text-main));
}

.mmi-gauge {
  width: 74px;
  height: 40px;
  display: block;
}

.mmi-gauge text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  fill: currentColor;
}

.shaking-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.description-card {
  background-color: var(--bg-deep);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

/* "Did you feel it?" one-tap check-in (quake modal) */
.did-you-feel {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.did-you-feel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.did-you-feel-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.did-you-feel-privacy {
  font-size: 11px;
  color: var(--text-muted);
}
.did-you-feel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.did-you-feel-btn {
  flex: 1 1 0;
  min-width: 96px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--bg-lifted);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.did-you-feel-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
}
.did-you-feel-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.did-you-feel-btn--quiet {
  color: var(--text-secondary);
}
.did-you-feel-done {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.did-you-feel-msg {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.did-you-feel-msg.is-warn { color: var(--sun); }
.did-you-feel-msg.is-success { color: var(--teal); }

.description-card h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.description-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Key Actions */
.key-actions-section h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.actions-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.actions-list li {
  position: relative;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  padding-left: 20px;
}
.actions-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Attribution row */
.attribution-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
}

.attribution-row #modal-attribution {
  min-width: 0;
  line-height: 1.45;
}

.attribution-row .badge-status {
  flex: 0 0 auto;
}

.badge-status {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--bg-deep);
}


/* Marker visuals (wrapper, quakes, alert icons, hover locator) live in the
   shared map-markers.css, linked by both /live/ and the home page. */

/* ─────────────── MAP POPUPS ─────────────── */
.maplibregl-popup-content {
  background-color: var(--bg-lifted) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: var(--shadow) !important;
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--border) !important; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--border) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--border) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--border) !important; }

.popup-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.popup-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.popup-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─────────────── RESPONSIVE LAYOUT ─────────────── */
@media (max-width: 820px) {
  body {
    overflow-x: hidden;
    height: 100dvh;
  }

  .maplibregl-popup {
    max-width: calc(100vw - 32px) !important;
  }

  .dashboard-header {
    padding: 0 14px;
  }

  .header-left .logo {
    gap: 8px;
    min-width: 0;
  }

  .logo h1 {
    font-size: 20px;
  }

  .header-right {
    gap: 8px;
  }

  .system-status-indicator {
    display: none;
  }

  .theme-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* Mobile: one natural page scroll. The map is a contextual band on top,
     then the full feed flows beneath at full width (no nested scroll). */
  .dashboard-main {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-panel {
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-right: none;
    border-top: 1.5px solid var(--border);
  }

  .controls-container {
    padding: 12px 10px;
    gap: 10px;
  }

  .sidebar-heading p {
    max-width: none;
  }

  /* Fit all five hazard chips in one row — no horizontal scroll/clipping. */
  .category-filters-row {
    gap: 5px;
  }

  .filter-chip {
    flex: 1 1 0;
    min-width: 0;
  }

  .chip-inner {
    min-height: 44px;
    padding: 6px 1px 5px;
  }

  .chip-label {
    font-size: 10px;
  }

  .filters-dropdowns {
    gap: 8px;
  }

  .filter-group select {
    min-height: 44px;
  }

  .alert-list-viewport {
    overflow: visible;
    height: auto;
    flex: none;
    padding: 6px 10px 24px;
  }

  /* Civic mobile uses panel split + nested feed scroll (live-civic.css). */
  body.live-civic .dashboard-main {
    height: calc(100dvh - var(--header-height) - var(--civic-actionbar-h, 0px));
    overflow-y: hidden;
  }

  body.live-civic .sidebar-panel {
    order: 0;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.live-civic .alert-list-viewport {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 12px;
  }

  .map-viewport {
    order: 0;
    width: 100%;
    min-width: 0;
    height: 42vh;
    min-height: 240px;
    flex: 0 0 auto;
  }

  /* Mobile: collapse the legend to a tappable "Map key" pill so it stops
     covering the (now contextual) map band. Stack it top-left under the
     "Sources & limits" pill — that corner is already UI-reserved, which keeps
     the pill off marker labels near the bottom edge. */
  .map-legend {
    left: 12px;
    top: 58px;
    bottom: auto;
    max-width: calc(100% - 24px);
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  .map-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    min-height: 32px;
    padding: 7px 11px;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-lifted);
    color: var(--text-main);
    box-shadow: var(--shadow);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .map-legend-toggle::-webkit-details-marker {
    display: none;
  }

  .map-legend[open] > .map-legend-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .map-legend > .map-legend-body {
    display: none;
  }

  .map-legend[open] > .map-legend-body {
    display: block;
    pointer-events: auto;
    margin-top: -1px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 0 10px 10px 10px;
    background-color: var(--bg-lifted);
    box-shadow: var(--shadow);
  }

  .source-disclosure {
    left: 12px;
    top: 12px;
    width: min(360px, calc(100% - 24px));
  }

  .maplibregl-ctrl button {
    width: 36px !important;
    height: 36px !important;
  }

  .modal-card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 16px;
  }

  .modal-close-btn {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }

  .modal-header {
    padding: 24px 56px 18px 24px;
  }

  .modal-body {
    padding: 18px 20px 24px;
    max-height: 68vh;
  }

  /* Show the full-screen map toggle on mobile. */
  .map-fullscreen-toggle {
    display: flex;
  }

  /* Full-screen map mode: hide the feed, let the map fill the area below the
     header. Tapping a marker opens its details over the map (live.js). */
  body.map-fullscreen .dashboard-main {
    overflow: hidden;
  }
  body.map-fullscreen .sidebar-panel {
    display: none;
  }
  body.map-fullscreen .map-viewport {
    height: 100%;
    flex: 1 1 auto;
  }
}

/* ─────────────── FELT REPORTS HEATMAP STYLING ─────────────── */
.felt-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  color: var(--text-main);
}

.switch-label input {
  display: none;
}

.switch-slider {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  background-color: var(--border);
  border-radius: 999px;
  transition: background-color var(--transition-fast);
}

.switch-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch-label input:checked + .switch-slider {
  background-color: var(--orange);
}

.switch-label input:checked + .switch-slider::before {
  transform: translateX(16px);
}

.switch-text {
  font-family: var(--font-body);
}

.felt-reports-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.felt-reports-summary-pills.status-message {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.felt-mmi-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Custom Tooltips for felt hover overlay */
.felt-hover-popup .maplibregl-popup-content {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

.felt-hover-tooltip {
  font-family: var(--font-body);
  line-height: 1.4;
  color: var(--text-muted);
}

.felt-hover-tooltip strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--orange);
}

.felt-count-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.felt-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(4px);
}

.felt-trend-badge.active {
  opacity: 1;
  transform: translateY(0);
}

.felt-trend-badge.rising {
  background-color: rgba(31, 107, 117, 0.1);
  border: 1px solid var(--teal);
  color: var(--teal);
}

.felt-trend-badge.finalised {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.felt-trend-badge.rising::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--teal);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(31, 107, 117, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(31, 107, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 107, 117, 0); }
}

@keyframes countPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); color: var(--teal); }
  100% { transform: scale(1); }
}

.count-pulse-animate {
  display: inline-block;
  animation: countPulse 0.8s ease-out;
}

/* --- Felt map mode bar (persistent map chrome; modal can close independently) --- */
.felt-map-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-lifted) 94%, transparent);
  border: 1.5px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.felt-map-bar[hidden] {
  display: none !important;
}

.felt-map-bar-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.felt-map-bar-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.felt-map-bar-meta,
.felt-map-bar-inspect {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.felt-map-bar-inspect {
  color: var(--text-main);
}

.felt-map-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.felt-map-bar-details,
.felt-map-bar-off {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-main);
}

.felt-map-bar-off {
  border-color: color-mix(in srgb, var(--orange) 45%, var(--border));
  color: var(--orange);
}

.felt-map-bar-details:hover,
.felt-map-bar-off:hover {
  filter: brightness(1.05);
}

@media (max-width: 820px) {
  .felt-map-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .felt-map-bar-actions {
    justify-content: flex-end;
  }
}

/* ─────────────── COMMUNITY FEED SEGMENTED TABS ─────────────── */
.feed-mode-tabs {
  display: flex;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.feed-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  text-align: center;
  transition: all var(--transition-fast);
}

.feed-tab:hover {
  color: var(--text-main);
}

.feed-tab.active {
  background-color: var(--bg-lifted);
  color: var(--text-main);
  box-shadow: var(--card-shadow);
}

/* ─────────────── COMMUNITY CTA CARD ─────────────── */
.community-cta-card {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--card-shadow);
  transition: border-color var(--transition-standard);
}

.community-cta-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-cta-icon {
  width: 20px;
  height: 20px;
  color: var(--status-active);
  flex-shrink: 0;
}

.community-cta-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.community-cta-card p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* "Unverified community reports" disclaimer under the check-in CTA. */
.community-unverified-note {
  margin: 10px 4px 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Inline status line in the report modal (replaces alert()). */
.report-inline-msg {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
}
.report-inline-msg:empty { display: none; }
.report-inline-msg.is-warn { color: #B7791F; }
.report-inline-msg.is-error { color: var(--orange-deep); }
.report-inline-msg.is-info { color: var(--text-secondary); }

.btn-checkin {
  background-color: var(--status-active);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  outline: none;
}

.btn-checkin:hover {
  opacity: 0.9;
}

.btn-checkin:active {
  opacity: 0.8;
}

/* ─────────────── COMMUNITY SIGNAL LIST & CARDS ─────────────── */
.community-signals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.community-signal-card {
  background-color: var(--bg-lifted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.community-signal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--shadow-color);
  border-color: color-mix(in srgb, var(--signal-color) 45%, var(--border));
}

.community-signal-card.active {
  border-color: var(--signal-color);
  background-color: color-mix(in srgb, var(--signal-color) 8%, var(--bg-lifted));
}

.community-badge-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.community-count-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--signal-color) 18%, var(--bg-deep));
  border: 1.5px solid var(--signal-color);
  color: var(--signal-color);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  display: grid;
  place-items: center;
  z-index: 2;
  position: relative;
}

/* Pulse animation for fresh reports */
.community-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--signal-color);
  opacity: 0;
  z-index: 1;
  animation: signal-pulse 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

/* (@keyframes signal-pulse comes from the shared map-markers.css) */

.community-card-info {
  flex: 1;
  min-width: 0;
}

.community-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
  gap: 8px;
}

.community-card-top h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-card-top .age {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.community-card-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Impact / all-clear / unconfirmed chips on signal cards */
.community-card-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}
.community-card-chips:empty { display: none; }
.community-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.community-chip--impact {
  color: var(--orange);
  background-color: color-mix(in srgb, var(--orange) 12%, transparent);
}
.community-chip--clear {
  color: var(--teal);
  background-color: color-mix(in srgb, var(--teal) 12%, transparent);
}
.community-chip--tentative {
  color: var(--text-muted);
  border-color: var(--border);
  font-weight: 600;
}
.community-chip--confirmed {
  color: var(--status-active);
  background-color: color-mix(in srgb, var(--status-active) 12%, transparent);
}
.community-chip--contested {
  color: var(--text-muted);
  background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

/* Disputed signals visually recede everywhere they appear.
   (The matching .community-pin/.community-area-chip rules are in the shared
   map-markers.css.) */
.community-signal-card.contested { opacity: 0.55; }

/* ── One-tap corroboration buttons (signal popup) ── */
.signal-vote-row {
  /* minmax(0,1fr) lets the buttons shrink inside the popup's max-width
     (grid items otherwise refuse to go below their content width). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.signal-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.signal-vote-btn:hover { border-color: var(--text-muted); }

.signal-vote-btn.voted.vote-confirm {
  border-color: var(--status-active);
  color: var(--status-active);
  background-color: color-mix(in srgb, var(--status-active) 10%, transparent);
}

.signal-vote-btn.voted.vote-dispute {
  border-color: var(--text-muted);
  color: var(--text-muted);
  background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.signal-vote-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
}
.signal-vote-count:empty { display: none; }

/* ─────────────── EVENT CHAT ROOM ─────────────── */
.chat-open-btn {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.chat-open-btn:hover { border-color: var(--text-muted); }
.chat-open-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.chat-open-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
  z-index: 60;
  animation: chat-slide-in 0.25s cubic-bezier(.2,.8,.2,1);
}
/* Class display rules beat the UA [hidden] rule — guard explicitly. */
.chat-panel[hidden], .chat-form[hidden], .chat-rules[hidden] { display: none !important; }
@keyframes chat-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { animation: none; }
}
/* Mobile: full-screen sheet; the page behind is scroll-locked. */
@media (max-width: 720px) {
  .chat-panel { width: 100vw; border-left: none; }
}
body.chat-open { overflow: hidden; }
.chat-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
}
.chat-header-text { min-width: 0; }
.chat-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.chat-header h3 {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  color: inherit;
}
.chat-disclaimer {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.chat-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
}
.chat-state-banner {
  padding: 10px 16px;
  background-color: color-mix(in srgb, var(--sun) 14%, transparent);
  color: var(--text-main);
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  margin-top: 24px;
}
.chat-header-meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.chat-msg {
  padding: 8px 10px;
  border-radius: 10px;
}
.chat-msg.is-own {
  background-color: color-mix(in srgb, var(--teal) 9%, transparent);
}
.chat-msg.is-flag-stub { padding: 4px 10px; }
.chat-flag-stub-text {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}
.chat-flag-btn.is-pending {
  color: var(--orange);
  border-color: var(--orange);
  opacity: 1 !important;
}
.chat-msg.is-helpful {
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
}
.chat-msg.is-system {
  background-color: color-mix(in srgb, var(--orange) 8%, transparent);
  border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0;
}
.chat-msg.is-system .chat-handle { color: var(--orange); }
.chat-system-icon { width: 14px; height: 14px; color: var(--orange); align-self: center; flex-shrink: 0; }
.chat-system-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.chat-quote {
  display: block;
  width: 100%;
  text-align: left;
  margin: 4px 0 2px;
  padding: 5px 10px;
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  background-color: color-mix(in srgb, var(--text-muted) 8%, transparent);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-quote-handle { font-weight: 700; margin-right: 5px; }
.chat-event-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  text-align: left;
}
.chat-event-chip:hover { border-color: var(--text-muted); }
.chat-event-chip[data-severity="severe"], .chat-event-chip[data-severity="extreme"] {
  border-left: 3px solid var(--orange);
}
.chat-event-chip-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.chat-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-top: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--teal) 8%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
}
.chat-attachment[hidden] { display: none !important; }
.chat-attachment-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-attachment-clear {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}
.chat-share-btn {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background-color: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chat-share-btn:hover { border-color: var(--text-muted); color: var(--text-main); }
.chat-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Flip: live chat ↔ room board */
.chat-flip-shell {
  flex: 1;
  min-height: 0;
  perspective: 1400px;
}
.chat-flip-shell[hidden] { display: none !important; }
.chat-flip-card {
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.15, 0.2, 1);
}
.chat-flip-card.is-flipped { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .chat-flip-card { transition: none; }
  .chat-flip-card:not(.is-flipped) .chat-flip-back { visibility: hidden; }
  .chat-flip-card.is-flipped .chat-flip-front { visibility: hidden; }
}
.chat-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.chat-flip-back { transform: rotateY(180deg); background-color: var(--bg); }
.chat-flip-front .chat-messages {
  flex: 1;
  min-height: 0;
}
.chat-flip-btn {
  flex-shrink: 0;
  align-self: flex-start;
  font: 800 11px var(--font-body);
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  cursor: pointer;
  white-space: nowrap;
}
.chat-flip-btn:hover { background: color-mix(in srgb, var(--teal) 20%, transparent); }
.chat-flip-btn[hidden] { display: none !important; }
.chat-board-back-head {
  flex-shrink: 0;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 8%, transparent), transparent);
}
.chat-board-back-head h4 { margin: 0; font-size: 15px; font-weight: 800; }
.chat-board-back-head p { margin: 4px 0 0; font-size: 11.5px; color: var(--text-muted); }
.chat-board-scroll { flex: 1; overflow-y: auto; padding-bottom: 4px; }
.chat-board-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background-color: var(--bg-deep);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}
.board-section { padding: 12px 16px 0; }
.board-section-title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.board-section-title.is-official { color: var(--orange); }
.board-section-title.is-community { color: var(--teal); }
.board-empty { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.board-official-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: default;
}
button.board-official-item { cursor: pointer; }
button.board-official-item:hover { background: color-mix(in srgb, var(--teal) 8%, transparent); }
.board-official-item:last-child { border-bottom: none; }
.board-when { flex-shrink: 0; width: 52px; font-size: 10px; color: var(--text-muted); line-height: 1.3; }
.board-kind { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.board-official-body p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.board-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}
.board-help-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 9px 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: transparent;
  color: var(--text-main);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.board-help-item:last-child { border-bottom: none; }
.board-help-item:hover { background-color: color-mix(in srgb, var(--teal) 8%, transparent); }
.board-rank {
  flex-shrink: 0;
  width: 26px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal);
  font: 800 10px/22px var(--font-body);
  text-align: center;
}
.board-rank.is-top, .board-rank.is-pinned {
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: var(--orange);
}
.board-help-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 3px; }
.board-help-handle { font-weight: 800; color: var(--teal); }
.board-votes { margin-left: auto; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.board-help-text { display: block; font-size: 12.5px; line-height: 1.4; }

/* Room board (legacy strip — replaced by flip-back) */
.chat-pinned {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--teal) 8%, transparent);
  max-height: 132px;
  overflow-y: auto;
}
.chat-pinned[hidden] { display: none !important; }

.chat-board-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 16px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}
.chat-board-item:last-child { border-bottom: none; }
.chat-board-item:hover { background-color: color-mix(in srgb, var(--teal) 12%, transparent); }

.chat-board-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
}
.chat-board-item.is-announcement .chat-board-label { color: var(--orange); }

.chat-board-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Moderator announcements stand apart from the bot's data notices. */
.chat-msg.is-announcement {
  border-left: 3px solid var(--orange);
  background-color: color-mix(in srgb, var(--orange) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.chat-handle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.chat-own-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.chat-handle {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
}
.chat-time {
  font-size: 11px;
  color: var(--text-muted);
}
/* Unified message actions (👍 / Reply / Flag): hover-revealed on pointer
   devices only — on touch (and narrow screens, since hover media queries lie
   under some emulations) every action is always visible with real tap
   targets. Nothing interactive may exist only behind hover. */
.chat-msg-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chat-msg-action {
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.chat-msg:hover .chat-msg-action,
.chat-msg-action:disabled,
.chat-msg-action.has-votes { opacity: 1; }
@media (hover: none), (max-width: 720px) {
  .chat-msg-action { opacity: 1; min-height: 28px; padding: 3px 12px; }
  .chat-close { width: 40px; height: 40px; }
}
.chat-vote-btn .chat-vote-count:not(:empty) { margin-left: 3px; font-weight: 700; }
.chat-text {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.chat-rules {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
}
.chat-rules h4 {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: inherit;
}
.chat-rules ul {
  margin: 0 0 12px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-rules li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.chat-rules button {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background-color: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.chat-new-msgs {
  position: absolute;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  background-color: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.chat-new-msgs[hidden] { display: none !important; }

.chat-notice {
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.chat-notice.is-warn { color: var(--sun); }
.chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}
.chat-form input:focus { border-color: var(--text-muted); }
.chat-char-count {
  font-size: 10.5px;
  color: var(--text-muted);
}
.chat-form button {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background-color: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.chat-form button:disabled { opacity: 0.5; cursor: default; }

/* Live-chat indicator chip on alert cards */
.alert-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--teal);
  background-color: color-mix(in srgb, var(--teal) 12%, transparent);
}
.alert-chat-chip svg { width: 12px; height: 12px; }

/* Latest published note on a signal card */
.community-card-note {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Notes inside the marker popup, each with a flag affordance */
.community-note-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.community-note-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.community-note-text {
  font-size: 12.5px;
  font-style: italic;
}
.community-note-flag {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.community-note-flag:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Optional note input in the check-in composer */
.report-note-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-note-field label {
  font-size: 12px;
  font-weight: 700;
}
.report-note-optional {
  font-weight: 500;
  color: var(--text-muted);
}
.report-note-field input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}
.report-note-field input:focus {
  border-color: var(--text-muted);
}
.report-note-field small {
  font-size: 11px;
  color: var(--text-muted);
}

/* Freshness decay: aging/stale signals visually recede. */
.community-signal-card[data-age="aging"] { opacity: 0.82; }
.community-signal-card[data-age="stale"] { opacity: 0.6; }
.community-signal-card[data-age="stale"] .age { font-style: italic; }

/* ─────────────── DETAILED REPORTING DIALOG ─────────────── */
.report-modal-card {
  max-width: 440px;
}

/* The check-in dialog is a quick action — tighter chrome than the detail
   modals so the first input is visible without scrolling. */
.report-modal-card .modal-header {
  padding: 22px 26px 14px;
}

.report-modal-card .modal-body {
  padding: 18px 26px 24px;
  gap: 14px;
}

.report-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Geolocation Status Bar */
.location-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
}

/* display:flex would otherwise defeat the hidden attribute */
.location-status-bar[hidden] { display: none; }

.location-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  flex-shrink: 0;
}

.location-dot.pulse {
  background-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 88, 31, 0.22);
  animation: pulse 1.8s infinite;
}

.location-dot.success {
  background-color: #2E9B5F;
  box-shadow: none;
  animation: none;
}

.location-dot.error {
  background-color: var(--hazard-red);
  box-shadow: none;
  animation: none;
}

.location-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  flex: 1;
}

/* Geolocation Search */
.location-search-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-input-wrap {
  display: flex;
  position: relative;
}

.search-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 8px;
  background-color: var(--bg-deep);
  border: 1.5px solid var(--border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.search-input-wrap input:focus {
  border-color: var(--text-muted);
}

.search-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Location mode buttons: GPS on demand + tap-the-map pin mode */
.location-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.location-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: 8px;
  background-color: var(--bg-deep);
  border: 1.5px solid var(--border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.location-option svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.location-option:hover {
  background-color: var(--bg-lifted);
  border-color: var(--text-muted);
}

.search-suggestions {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 230px;
  overflow-y: auto;
  box-shadow: var(--shadow);
  display: none;
}

.suggestion-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
  background-color: var(--bg-lifted);
  color: var(--text-main);
}

.suggestion-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.suggestion-item .suggestion-name {
  color: var(--text-main);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category chip: tells "Elephant Hill" the winery from the roads */
.suggestion-kind {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background-color: var(--bg-lifted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1.5px 8px;
}

.suggestion-item .suggestion-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-empty {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Waze-style Quick Report Grid */
.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  /* extra space above (separates from the note block), none below — the
     section's flex gap provides the heading→grid distance */
  margin-top: 6px;
}

.quick-report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.report-tile {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 6px;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all var(--transition-fast);
}

.report-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  background-color: var(--bg-lifted);
  border-color: var(--text-secondary);
}

.report-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tile-icon-container {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--transition-fast);
}

.report-tile:hover:not(:disabled) .tile-icon-container {
  transform: scale(1.08);
}

.tile-icon-container svg {
  width: 22px;
  height: 22px;
}

/* Colors mapped from design system tokens */
.tile-shaking { background-color: #7C67E8; box-shadow: 0 3px 10px rgba(124, 103, 232, 0.22); }
.tile-flooding { background-color: #0057B8; box-shadow: 0 3px 10px rgba(0, 87, 184, 0.22); }
.tile-road     { background-color: #C2410C; box-shadow: 0 3px 10px rgba(194, 65, 12, 0.22); }
.tile-power    { background-color: #7A5AF8; box-shadow: 0 3px 10px rgba(122, 90, 248, 0.22); }
.tile-trees    { background-color: #3E9566; box-shadow: 0 3px 10px rgba(62, 149, 102, 0.22); }
.tile-slip     { background-color: #92400E; box-shadow: 0 3px 10px rgba(146, 64, 14, 0.22); }
.tile-water    { background-color: #0E7490; box-shadow: 0 3px 10px rgba(14, 116, 144, 0.22); }
.tile-smoke    { background-color: #475467; box-shadow: 0 3px 10px rgba(71, 84, 103, 0.22); }
.tile-clear    { background-color: #2E9B5F; box-shadow: 0 3px 10px rgba(46, 155, 95, 0.22); }

.tile-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  text-align: center;
  line-height: 1.25;
}

/* Success Confirmation & Breakdown Chart */
.success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 4px;
}

.success-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(46, 155, 95, 0.16);
  border: 1.5px solid #2E9B5F;
  color: #2E9B5F;
  display: grid;
  place-items: center;
}

.success-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.success-subtitle {
  font-size: 13px;
  color: var(--status-active);
  font-weight: 700;
  margin-top: -6px;
}

.poll-card {
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.poll-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.poll-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poll-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poll-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.poll-row-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-main);
}

.poll-row-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--row-color) 12%, var(--bg-deep));
  color: var(--row-color);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.poll-row-icon svg {
  width: 11px;
  height: 11px;
}

.poll-row-count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--text-main);
}

.poll-bar-track {
  height: 8px;
  border-radius: 99px;
  background-color: color-mix(in srgb, var(--row-color) 12%, var(--bg-deep));
  overflow: hidden;
  position: relative;
}

.poll-bar-fill {
  height: 100%;
  border-radius: 99px;
  background-color: var(--row-color);
  width: 0; /* Animated dynamically in community.js */
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cooldown-notice {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 10px;
}

.success-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.btn-done {
  flex: 1;
  background-color: var(--border);
  color: var(--text-main);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.btn-done:hover {
  opacity: 0.9;
}

/* Community signal pins + area chips live in the shared map-markers.css. */

/* Draggable location pin shown while composing a report. Static after a
   one-shot drop-in — no looping animation. */
.report-pin {
  width: 30px;
  height: 38px;
  cursor: grab;
  animation: report-pin-drop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.report-pin:active { cursor: grabbing; }

.report-pin-head {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background-color: var(--status-active, #E04F16);
  border: 2px solid color-mix(in srgb, #fff 85%, var(--status-active, #E04F16));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.report-pin-head svg {
  width: 14px;
  height: 14px;
  color: #fff;
  transform: rotate(45deg);
}

@keyframes report-pin-drop {
  0% { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Map report FAB + pin-placement banner ── */
.map-report-fab {
  position: absolute;
  bottom: 26px;
  left: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: var(--bg-deep);
  border: 1.5px solid var(--border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.map-report-fab svg {
  width: 16px;
  height: 16px;
  color: var(--status-active, #E04F16);
}

.map-report-fab:hover {
  transform: translateY(-1px);
  border-color: var(--text-muted);
}

.pin-mode-banner {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  background-color: var(--bg-deep);
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.pin-mode-banner[hidden] { display: none; }

.pin-mode-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
}

.pin-mode-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.pin-mode-cancel:hover { color: var(--text-main); }


/* ── National tsunami zone (pinned above the feed) ──
   Loud banner for a real NZ threat (warning/marine); slim neutral strip for a
   no-threat acknowledgement / assessing state. Prominence scales with threat. */
.tsunami-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}
.tsunami-zone-item { cursor: pointer; }

.tsunami-banner {
  --tz: #FF3B30;
  position: relative;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tz) 14%, var(--bg-lifted));
  border: 1px solid color-mix(in srgb, var(--tz) 45%, transparent);
  border-left: 5px solid var(--tz);
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast);
}
.tsunami-banner.tone-warning { --tz: #FF3B30; }
.tsunami-banner.tone-marine { --tz: #FF9500; }
.tsunami-banner.tone-calm { --tz: #6FA8C4; }
.tsunami-banner.tone-neutral { --tz: #8E8E93; }
.tsunami-banner:hover { transform: translateY(-1px); }

.tsunami-banner-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tsunami-zone-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tz, #8E8E93);
  padding: 3px 9px;
  border-radius: 999px;
}
.tsunami-zone-note { font-size: 11px; font-weight: 700; color: var(--tz); }
.tsunami-zone-time { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.tsunami-banner h3 { margin: 4px 0 6px; font-size: 16px; line-height: 1.25; color: var(--text-main); }
.tsunami-zone-summary { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.tsunami-zone-cta {
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  color: var(--tz);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tz) 45%, transparent);
  padding-bottom: 1px;
}

/* ── Inline icon glyphs (replaced emoji/text glyphs) ── */
.note-inline-icon {
  vertical-align: -2px;
  margin-right: 3px;
  flex-shrink: 0;
}

.modal-close-btn,
.control-close,
.chat-close,
.chat-attachment-clear,
.mode-modal-x,
.chat-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* ── NZ Police incidents (community layer) ──
   (.community-pin.is-incident's blue provenance ring is in map-markers.css) */
.incident-source-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background-color: #1B4F9C;
  border-radius: 999px;
  padding: 2px 8px;
}

.incident-source-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
}

.community-chip--police {
  color: #fff;
  background-color: #1B4F9C;
}

.community-count-badge.incident-badge svg {
  width: 16px;
  height: 16px;
}