/**
 * Shared event-card styles — the single source of truth for hazard feed-card
 * appearance, paired with live/event-card.js. Linked by BOTH the /live
 * dashboard and the home page so the two surfaces stay identical.
 *
 * Theme-agnostic: every colour comes from CSS custom properties supplied by the
 * host page's theme (--bg-lifted, --text-main, --border, --status-active, …) so
 * the same markup renders correctly on /live (soot-dark or civic-paper) and on
 * the home feed (civic paper). --alert-accent / --alert-accent-soft are set
 * inline per card by the renderer. Do NOT hardcode token defaults here, or the
 * card would stop following each page's light/dark theme.
 */

/* ── Age decay ──────────────────────────────────────────────────────────────
   Older quakes fade rather than recolour: GeoNet's MMI/shaking hue is the
   semantic channel and must stay intact, so age is opacity + desaturation. */
.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;
}

/* ── Card shell ─────────────────────────────────────────────────────────── */
.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;
  min-width: 0; /* let flex child shrink below content width so long chat/summary
                   lines clip with ellipsis instead of overflowing the card */
  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-body);
  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;
}

/* Location chip — for life-safety emergencies the headline becomes the card
   title, so the affected place moves here (pin + locality) to keep "where"
   obvious without burying it in the summary. */
.alert-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-main);
  background-color: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.alert-place-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--alert-accent);
}

/* "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);
}

/* "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);
}

/* ── Compact quake row ──────────────────────────────────────────────────── */
.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;
}

/* ── Slim hazard-led card ────────────────────────────────────────────────────
   The everyday unit of the type-grouped feed: rail + hazard icon +
   "Type · Severity" title, one-line region, one-line window/action meta.
   Shares .alert-card so hover/selection/age/delegated-click behaviour applies. */
.alert-card-slim {
  padding: 11px 12px 11px 18px;
  gap: 10px;
  align-items: flex-start;
}
.alert-card-slim .alert-card-rail {
  top: 10px;
  bottom: 10px;
}
.slim-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  background-color: var(--alert-accent-soft);
  color: var(--alert-accent);
}
.slim-icon svg {
  width: 16px;
  height: 16px;
}
.slim-content {
  padding-left: 0;
}
.slim-header {
  margin-bottom: 2px;
  align-items: baseline;
}
.slim-header h3 {
  font-size: 14px;
  line-height: 1.3;
}
.slim-sev {
  color: color-mix(in srgb, var(--alert-accent) 72%, var(--text-main));
}
.slim-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-left: 8px;
}
.slim-status--active { color: var(--status-active); }
.slim-status--upcoming { color: var(--text-secondary); }
.slim-region {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slim-meta {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slim-near {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--status-active);
}
.slim-near svg {
  width: 11px;
  height: 11px;
}

/* Notable (felt) quake rows get card-level emphasis vs the translucent browse rows. */
.alert-card-compact.compact-notable {
  background-color: var(--bg-lifted);
  box-shadow: var(--card-shadow);
}
.alert-card-compact.compact-notable .compact-quake-header h3 {
  font-size: 15px;
}

/* ── Triage strip ────────────────────────────────────────────────────────────
   One line that answers "is anything serious?" — counted pills per hazard
   group; each jumps to its section. The quiet pill is the calm resting state. */
.triage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 12px;
}
.triage-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-main);
  background-color: var(--bg-lifted);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}
.triage-pill svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.triage-pill.is-quake {
  color: color-mix(in srgb, var(--mmi-strong) 80%, var(--text-main));
  background-color: color-mix(in srgb, var(--mmi-moderate) 16%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--mmi-moderate) 45%, transparent);
}
.triage-pill.is-warning {
  color: color-mix(in srgb, var(--hazard-orange) 72%, var(--text-main));
  background-color: color-mix(in srgb, var(--hazard-orange) 13%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--hazard-orange) 42%, transparent);
}
.triage-pill.is-watch {
  color: color-mix(in srgb, var(--hazard-yellow) 60%, var(--text-main));
  background-color: color-mix(in srgb, var(--hazard-yellow) 12%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--hazard-yellow) 40%, transparent);
}
.triage-pill.is-road {
  color: color-mix(in srgb, var(--sky) 70%, var(--text-main));
  border-color: color-mix(in srgb, var(--sky) 42%, transparent);
}
.triage-pill.is-quiet {
  color: var(--text-muted);
  box-shadow: none;
  background-color: color-mix(in srgb, var(--bg-lifted) 60%, transparent);
}
.triage-pill.is-allclear {
  color: var(--status-active);
  background-color: color-mix(in srgb, var(--status-active) 10%, var(--bg-lifted));
  border-color: color-mix(in srgb, var(--status-active) 35%, transparent);
}
.triage-pill:focus-visible {
  outline: 2px solid var(--status-active);
  outline-offset: 1px;
}

/* ── Feed group headers ("Weather · 12") ─────────────────────────────────── */
.feed-group-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ── Fold: collapsible family inside a group ────────────────────────────────
   (snowfall passes, minor quakes, storm news, "+N more roads") */
.feed-fold {
  background-color: var(--bg-lifted);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.feed-fold-head {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px 11px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text-main);
}
.feed-fold-head .alert-card-rail {
  top: 10px;
  bottom: 10px;
}
.feed-fold-head .slim-icon {
  margin: 0;
}
.feed-fold-main {
  flex: 1;
  min-width: 0;
}
.feed-fold-main h3 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}
.feed-fold-main .feed-fold-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-fold-count {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
  background-color: var(--alert-accent-soft, color-mix(in srgb, var(--text-secondary) 12%, transparent));
  border-radius: 999px;
  padding: 3px 9px;
}
.feed-fold-chevron {
  flex: none;
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
}
.feed-fold-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}
.feed-fold.is-open .feed-fold-chevron {
  transform: rotate(180deg);
}
.feed-fold-head:focus-visible {
  outline: 2px solid var(--status-active);
  outline-offset: -2px;
}
.feed-fold-body {
  padding: 0 10px 9px;
}
.feed-fold-body .alert-card {
  margin-bottom: 6px;
  box-shadow: none;
  background-color: color-mix(in srgb, var(--bg-deep) 45%, transparent);
}
.feed-fold-body .alert-card:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .feed-fold-chevron { transition: none; }
}

/* Rows inside a fold (snow passes): badge + name + meta + when. */
.fold-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
}
.fold-row:last-of-type {
  border-bottom: 0;
}
.fold-row-badge {
  flex: none;
  min-width: 46px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 6px;
  background-color: var(--alert-accent-soft, color-mix(in srgb, var(--text-secondary) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--alert-accent, var(--text-secondary)) 32%, transparent);
}
.fold-row-name {
  font-weight: 700;
  white-space: nowrap;
}
.fold-row-meta {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fold-row-when {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* News rows inside the single "In the news" fold. */
.fold-news-row {
  display: block;
  padding: 7px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-main);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fold-news-row:last-of-type { border-bottom: 0; }
.fold-news-row:hover { text-decoration: underline; }
.fold-news-row .fold-news-src { font-weight: 800; color: var(--text-secondary); }
.fold-news-row .fold-news-time { color: var(--text-secondary); white-space: nowrap; }

/* ── Road micro-rows (first 3 + "+N more roads") ────────────────────────── */
.road-list {
  background-color: var(--bg-lifted);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.road-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
}
.road-row svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--alert-accent, var(--sky));
}
.road-row .road-route {
  font-weight: 700;
  white-space: nowrap;
}
.road-row .road-stretch {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.road-row .road-cause {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.road-row .slim-near { margin-right: 0; }
.road-more {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--status-active);
}
.road-more svg {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
}
.road-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.road-more:focus-visible {
  outline: 2px solid var(--status-active);
  outline-offset: -2px;
}

/* ── Near me / All NZ toggle (injected into the alerts summary bar) ───────── */
.near-me-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
}
.near-me-toggle svg {
  width: 12px;
  height: 12px;
}
.near-me-toggle.is-on {
  color: var(--status-active);
  background-color: color-mix(in srgb, var(--status-active) 12%, transparent);
  border-color: color-mix(in srgb, var(--status-active) 40%, transparent);
}

/* 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; }

/* ── Detail quake metrics grid + MMI gauge ──────────────────────────────────
   Shared by the /live detail modal and the home detail sheet so a quake reads
   the same on both: magnitude / shaking gauge / depth / felt cards. Pairs with
   renderMmiGauge + renderVolcanoGauge in format.js. Theme-token driven. */
.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);
}

/* AI-extracted forecast figures on feed cards (compact chips). */
.alert-forecast {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
.alert-forecast-chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--alert-accent-soft, rgba(0, 0, 0, 0.05));
  color: var(--text-main);
  white-space: nowrap;
}
.alert-forecast-chip b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "Latest nearby" — the freshest community message, surfaced on the card so the
   alert reflects the live human pulse before you even open it. */
.alert-chat-latest {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--bg-deep, rgba(12, 59, 46, 0.06));
  font-size: 12.5px;
  color: var(--text-main);
}
.alert-chat-latest svg { width: 14px; height: 14px; color: var(--civic-ok, #0F6E56); flex: none; }
.alert-chat-latest .acl-msg {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-chat-latest .acl-meta { color: var(--text-secondary); white-space: nowrap; font-size: 11px; }

/* Related news coverage on the card — RNZ (and other) headlines the backend
   matched to this event. Restored from the old /live/now cards. Compact list;
   the detail popup shows the full set. */
.alert-news {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line, rgba(0, 0, 0, 0.12));
}
.alert-news-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.alert-news-label svg { width: 13px; height: 13px; flex: none; color: color-mix(in srgb, var(--text-secondary) 80%, transparent); }
.alert-news-list {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alert-news-link {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-main);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.alert-news-link:hover { text-decoration: underline; }
.alert-news-source { font-weight: 800; color: var(--text-secondary); }
.alert-news-time { color: var(--text-secondary); white-space: nowrap; }
.alert-news-more {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}

.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-body);
  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);
}

/* ── Map-marker popup ───────────────────────────────────────────────────────
   Inner content of the MapLibre marker popup (built by live/map-popup.js),
   shared by the /live and home maps. The popup container chrome
   (.maplibregl-popup-content) is themed per page. */
.popup-title {
  font-family: var(--font-body);
  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;
}