/* ==========================================================
   ALERTWATCH WORLD
   V0.1 Dashboard
   ========================================================== */

:root {
  --background: #05090e;
  --panel: #0b121a;
  --panel-hover: #101a25;
  --border: #25313e;

  --text: #f1f5f9;
  --muted: #8fa0b2;

  --blue: #2492ff;
  --green: #30d977;

  --extreme: #e53935;
  --severe: #ef7d00;
  --moderate: #e2b714;
  --minor: #2d7bd8;
}


/* ==========================================================
   RESET
   ========================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(
      circle at top,
      #0a1520 0%,
      #05090e 35%,
      #030609 100%
    );

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ==========================================================
   HEADER
   ========================================================== */

.utc-clock {
  min-width: 110px;

  display: flex;
  flex-direction: column;

  text-align: right;

  font-size: 12px;
}

#utc-date {
  margin-top: 3px;

  color: var(--muted);
}


/* ==========================================================
   TICKER
   ========================================================== */

.ticker {
  min-height: 38px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px 18px;
  padding: 8px 18px;

  background: #03070b;

  border-bottom: 1px solid var(--border);

  font-size: 11px;
}

.ticker-label {
  flex: 0 1 auto;
  overflow-wrap: anywhere;

  padding: 4px 8px;

  color: #55aaff;

  background: rgba(36, 146, 255, 0.12);

  border: 1px solid rgba(36, 146, 255, 0.5);
  border-radius: 4px;

  font-weight: 700;
}

.ticker-content {
  flex: 1 1 600px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px 15px;

  overflow-wrap: anywhere;

  color: #d7e0e8;
}

.ticker-divider {
  flex-shrink: 0;
  width: 1px;
  height: 18px;

  background: #26323d;
}




/* ==========================================================
   SUMMARY CARDS
   ========================================================== */

.summary-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 145px), 1fr));

  gap: 10px;

  padding: 12px 16px;
}

.summary-card {
  min-height: 102px;

  padding: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 25, 35, 0.98),
      rgba(8, 14, 20, 0.98)
    );

  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18);
}

.summary-label {
  color: #cbd5df;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.3px;
}

.summary-value {
  margin-top: 5px;

  font-size: 29px;
  font-weight: 700;
}

.summary-note {
  margin-top: 6px;

  color: var(--muted);

  font-size: 11px;
}

.extreme-card {
  border-top: 2px solid var(--extreme);
}

.severe-card {
  border-top: 2px solid var(--severe);
}

.moderate-card {
  border-top: 2px solid var(--moderate);
}


/* ==========================================================
   FILTERS
   ========================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  gap: 14px;

  margin: 0 16px 10px;

  padding: 8px;

  background: #080d13;

  border: 1px solid var(--border);
  border-radius: 8px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.filter-button {
  min-height: 44px;
  padding: 7px 12px;

  color: #d3dde6;

  background: #0d141c;

  border: 1px solid #2b3744;
  border-radius: 6px;

  cursor: pointer;

  font-size: 11px;
}

.filter-button:hover {
  background: #15202b;
}

.filter-button.active {
  color: white;

  background: #1769c2;

  border-color: #3898ff;
}

.severity-filter {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.severity-key {
  min-height: 44px;
  border: 1px solid transparent;
  font-family: inherit;
  padding: 6px 9px;

  border-radius: 5px;

  font-size: 10px;
  font-weight: 700;
}

.severity-key.extreme {
  color: #ffb4b1;

  background: rgba(229, 57, 53, 0.2);
}

.severity-key.severe {
  color: #ffbe72;

  background: rgba(239, 125, 0, 0.2);
}

.severity-key.moderate {
  color: #ffe36c;

  background: rgba(226, 183, 20, 0.2);
}


/* ==========================================================
   PANELS
   ========================================================== */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 2.3fr)
    minmax(280px, 0.9fr);

  gap: 10px;

  padding: 0 16px;
}

.panel {
  overflow: hidden;

  background: rgba(7, 13, 19, 0.98);

  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.22);
}

.panel-header {
  flex-wrap: wrap;
  gap: 8px;
  min-height: 54px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 14px;

  background:
    linear-gradient(
      180deg,
      #0d161f,
      #090f16
    );

  border-bottom: 1px solid var(--border);
}

.panel-header h2 {
  margin: 0;

  font-size: 13px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.3px;
}

.panel-subtitle {
  color: var(--muted);

  font-size: 10px;
}

.map-status {
  color: var(--green);

  font-size: 10px;
  font-weight: 700;
}


/* ==========================================================
   MAP
   ========================================================== */

.map-panel {
  position: relative;
}

#map {
  container-type: size;
  width: 100%;
  height: min(590px, calc(100dvh - 80px));

  background: #081019;
}

/*
   Prototype dark-map effect.

   This only affects the map tiles.
   Alert polygons and markers remain unaffected.
*/

.leaflet-tile-pane {
  filter:
    brightness(0.68)
    invert(1)
    contrast(1.25)
    hue-rotate(180deg)
    saturate(0.7);
}

.leaflet-control-zoom a {
  color: white !important;

  background: #111b25 !important;

  border-color: #30404f !important;
}

.leaflet-control-attribution {
  color: #9aa9b8 !important;

  background:
    rgba(5, 10, 15, 0.78) !important;
}

.leaflet-control-attribution a {
  color: #72b7ff !important;
}

.map-legend {
  position: absolute;

  z-index: 500;

  left: 12px;
  bottom: 12px;

  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  padding: 8px 10px;

  background:
    rgba(4, 9, 14, 0.9);

  border: 1px solid #334150;
  border-radius: 6px;

  font-size: 10px;

  pointer-events: none;
}

.legend-item {
  display: flex;
  align-items: center;

  gap: 5px;
}

.legend-colour {
  width: 11px;
  height: 11px;

  border-radius: 2px;
}

.legend-extreme {
  background: var(--extreme);
}

.legend-severe {
  background: var(--severe);
}

.legend-moderate {
  background: var(--moderate);
}

.legend-minor {
  background: var(--minor);
}


/* ==========================================================
   RIGHT ALERT PANEL
   ========================================================== */

.major-alerts-panel {
  min-height: 645px;
}

.empty-state {
  min-height: 550px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 30px;

  text-align: center;
}

.empty-icon {
  margin-bottom: 12px;

  color: #708297;

  font-size: 38px;
}

.empty-state h3 {
  margin: 0 0 8px;

  color: #dce5ed;

  font-size: 15px;
}

.empty-state p {
  max-width: 260px;

  margin: 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.6;
}


/* ==========================================================
   LOWER DASHBOARD
   ========================================================== */

.lower-grid {
  display: grid;
  align-items: stretch;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 0.9fr)
    minmax(0, 1fr);

  gap: 10px;

  padding: 10px 16px;
}

.lower-panel {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.lower-panel .panel-header {
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
}

/* Keep headings visible and long lists/table expansions inside their cards. */
.lower-panel > :last-child {
  flex: 1;
  min-height: 0;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 0 0 10px 10px;
}

.lower-panel > :last-child:focus-visible {
  outline: 2px solid #a7d9ff;
  outline-offset: -3px;
}

@media (max-width: 1050px) {
  .ticker-divider { display: none; }
}

.country-ranking-scope, .country-ranking-note {
  color: #9aabba;
  font-size: 12px;
  line-height: 1.5;
}

.country-ranking-content { padding: 12px 14px 16px; }
.country-ranking-note { margin: 0 0 12px; }
#country-ranking-status, #latest-alert-status { color: #9aabba; font-size: 13px; line-height: 1.5; margin: 5px 0; }
#country-ranking-list { list-style: none; margin: 0; padding: 0; }
.country-ranking-row {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 10px 0;
  border-bottom: 1px solid #1b2936;
  font-size: 13px;
  line-height: 1.4;
}
.country-ranking-rank { color: #9aabba; font-variant-numeric: tabular-nums; }
.country-ranking-name { overflow-wrap: anywhere; }
.country-ranking-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.country-ranking-bar { grid-column: 2 / 4; height: 3px; border-radius: 2px; background: #487b9f; }
#country-ranking-toggle {
  display: none;
  margin-top: 12px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #54738e;
  border-radius: 6px;
  background: #101a25;
  color: #e7eef5;
  font: inherit;
  cursor: pointer;
}
#country-ranking-toggle:focus-visible { outline: 2px solid #a7d9ff; outline-offset: 3px; }
@media (max-width: 700px) {
  #country-ranking-list:not(.is-expanded) .country-ranking-row:nth-child(n+6) { display: none; }
  #country-ranking-toggle:not([hidden]) { display: inline-block; }
}

.latest-alert-scope, .latest-alert-country, .latest-alert-time { color: #9aabba; font-size: 12px; line-height: 1.5; }
.latest-alert-content { padding: 12px 14px 16px; }
#latest-alert-list { list-style: none; padding: 0; margin: 0; }
.latest-alert-row { border-bottom: 1px solid #1b2936; }
.latest-alert-button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; min-width: 0; padding: 12px 4px; border: 0; border-radius: 4px;
  background: transparent; color: #e7eef5; font: inherit; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.latest-alert-button > span, .latest-alert-button > time { max-width: 100%; }
.latest-alert-button:hover { background: #172432; }
.latest-alert-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.latest-alert-area { font-size: 13px; line-height: 1.5; color: #bac7d4; }
#latest-alert-toggle {
  display: none; margin-top: 12px; min-height: 44px; padding: 8px 14px;
  border: 1px solid #54738e; border-radius: 6px; background: #101a25;
  color: #e7eef5; font: inherit; cursor: pointer;
}
.latest-alert-button:focus-visible, #latest-alert-toggle:focus-visible { outline: 2px solid #a7d9ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #map .leaflet-popup { transition: none; }
}
@media (max-width: 700px) {
  #latest-alert-list:not(.is-expanded) .latest-alert-row:nth-child(n+7) { display: none; }
  #latest-alert-toggle:not([hidden]) { display: inline-block; }
}

.activity-content { padding: 12px 14px 16px; }
.activity-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.activity-note { margin: 3px 0; color: #9aabba; font-size: 12px; line-height: 1.4; }
#activity-status, #activity-inspection { margin: 5px 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
#activity-status.is-stale { color: #e2c789; }
#activity-plot { width: 100%; min-width: 0; }
#activity-plot svg { display: block; width: 100%; height: 160px; overflow: visible; }
.activity-grid { stroke: #25313e; stroke-width: 1; }
.activity-axis { fill: #9aabba; font-size: 10px; font-family: inherit; }
.activity-line { fill: none; stroke: #7cb8e3; stroke-width: 2; }
.activity-point { fill: #0b121a; stroke: #7cb8e3; stroke-width: 2; cursor: pointer; }
.activity-point.is-selected { fill: #d7edff; }
.activity-point:focus-visible { outline: none; stroke: #fff; stroke-width: 4; }
.activity-single-label { fill: #e7eef5; font-size: 12px; }
#activity-data { margin-top: 5px; font-size: 12px; }
#activity-data summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
#activity-data summary:focus-visible { outline: 2px solid #a7d9ff; outline-offset: 2px; }
#activity-data table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 8px; overflow-wrap: anywhere; }
#activity-data caption { text-align: left; padding: 5px; color: #9aabba; }
#activity-data th, #activity-data td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #25313e; font-weight: normal; }
#activity-data th { font-weight: 600; }
#activity-data th:last-child, #activity-data td:last-child { text-align: right; width: 35%; }


/* ==========================================================
   FOOTER
   ========================================================== */




/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

  .summary-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .major-alerts-panel {
    min-height: 300px;
  }

  .empty-state {
    min-height: 240px;
  }

  .lower-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {



  .summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .severity-filter {
    flex-wrap: wrap;
  }

  #map {
    height: min(480px, calc(100dvh - 80px));
  }

  .map-legend {
    right: 10px;
  }



}


@media (max-width: 430px) {

  .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));

    padding:
      8px;
  }

  .dashboard-grid,
  .lower-grid {
    padding-left: 8px;
    padding-right: 8px;
  }

  .filter-bar {
    margin-left: 8px;
    margin-right: 8px;
  }

}
/* ==========================================================
   ALERT MAP POPUPS
   ========================================================== */

.alertwatch-leaflet-popup .leaflet-popup-content-wrapper {
  overflow: hidden;

  color: #e7eef5;

  background: #091119;

  border: 1px solid #344354;
  border-radius: 9px;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.55);
}

.alertwatch-leaflet-popup .leaflet-popup-content {
  /* Leaflet measures this final width before positioning and autopanning.
     Leave room for wrapper borders, map edges and the anchored tip. */
  width: min(330px, calc(100cqw - 24px)) !important;
  max-height: min(340px, calc(100cqh - 164px), calc(100dvh - 200px));
  overflow-y: auto;
  overflow-wrap: anywhere;

  margin: 0;
}

.alertwatch-leaflet-popup .leaflet-popup-tip {
  /* Preserve Leaflet's triangle dimensions despite the page-wide reset. */
  box-sizing: content-box;
  background: #091119;

  border:
    1px solid #344354;
}

.alertwatch-leaflet-popup .leaflet-popup-close-button {
  top: 7px !important;
  right: 8px !important;

  color: #aab8c5 !important;

  font-size: 21px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 6px;
  background: #091119;
}

.alertwatch-leaflet-popup .leaflet-popup-close-button:hover {
  color: white !important;
}


/* Popup content */

.alert-popup {
  overflow: hidden;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.alert-popup-severity {
  display: inline-block;

  margin:
    14px
    60px
    7px
    14px;

  padding:
    4px
    7px;

  border-radius:
    4px;

  color: white;

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.4px;
}

.alert-popup-severity.severity-extreme {
  background:
    #b52d2a;
}

.alert-popup-severity.severity-severe {
  background:
    #b65f00;
}

.alert-popup-severity.severity-moderate {
  color:
    #171400;

  background:
    #d4ab10;
}

.alert-popup-severity.severity-minor {
  background:
    #276cb6;
}

.alert-popup-headline {
  margin:
    0
    14px
    4px;

  padding-right:
    16px;

  color:
    #ffffff;

  font-size:
    17px;

  line-height:
    1.25;
}

.alert-popup-location {
  margin:
    0
    14px
    12px;

  color:
    #90a6ba;

  font-size:
    12px;
}


/* Metadata */

.alert-popup-metadata {
  padding:
    10px
    14px;

  background:
    #0c161f;

  border-top:
    1px solid #24313e;

  border-bottom:
    1px solid #24313e;
}

.alert-popup-row {
  display:
    grid;

  grid-template-columns:
    62px
    minmax(0, 1fr);

  gap:
    8px;

  margin:
    4px
    0;

  font-size:
    11px;

  line-height:
    1.4;
}

/* Keep the longer source-update label on one line without changing other sources. */
.alert-popup-metadata-canadian-marine .alert-popup-row {
  grid-template-columns: 88px minmax(0, 1fr);
}

.alert-popup-label {
  color:
    #718699;

  font-weight:
    700;

  text-transform:
    uppercase;
}

.alert-popup-value {
  color:
    #d8e2eb;
}


/* Description and instructions */

.alert-popup-section {
  padding:
    11px
    14px;
}

.alert-popup-instruction-section {
  padding-top:
    0;
}

.alert-popup-section-title {
  margin-bottom:
    4px;

  color:
    #7ebdff;

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.3px;
}

.alert-popup-description {
  margin:
    0;

  color:
    #bdc9d5;

  font-size:
    11px;

  line-height:
    1.5;
}
/* ==========================================================
   MAJOR ALERTS RIGHT NOW
   ========================================================== */

.major-alert-list {
  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 10px;
}


/* Individual major alert */

.major-alert-card {
  position: relative;

  padding: 12px;

  background:
    linear-gradient(
      135deg,
      #0e1821,
      #091119
    );

  border:
    1px solid #283746;

  border-left:
    4px solid #68798a;

  border-radius:
    7px;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}


.major-alert-card:hover {
  background:
    #111e29;

  transform:
    translateX(2px);
}


/* Severity borders */

.major-alert-card.major-extreme {
  border-left-color:
    var(--extreme);
}


.major-alert-card.major-severe {
  border-left-color:
    var(--severe);
}


.major-alert-card.major-moderate {
  border-left-color:
    var(--moderate);
}


.major-alert-card.major-minor {
  border-left-color:
    var(--minor);
}


/* Alert top line */

.major-alert-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 8px;

  margin-bottom: 8px;
}


.major-alert-badge {
  padding:
    3px
    6px;

  border-radius:
    4px;

  color:
    white;

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.3px;
}


.major-alert-badge.badge-extreme {
  background:
    #b52d2a;
}


.major-alert-badge.badge-severe {
  background:
    #b65f00;
}


.major-alert-badge.badge-moderate {
  color:
    #171400;

  background:
    #d4ab10;
}


.major-alert-badge.badge-minor {
  background:
    #276cb6;
}


.major-alert-country {
  overflow:
    hidden;

  color:
    #73889d;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* Alert text */

.major-alert-headline {
  margin:
    0
    0
    4px;

  color:
    #f4f7fa;

  font-size:
    13px;

  line-height:
    1.3;
}


.major-alert-area {
  color:
    #9dafbf;

  font-size:
    11px;

  line-height:
    1.35;
}


.major-alert-expiry {
  margin-top:
    8px;

  color:
    #647b90;

  font-size:
    9px;

  text-transform:
    uppercase;
}


/* Empty fallback */

.major-alert-empty {
  padding:
    45px
    20px;

  color:
    #74879a;

  text-align:
    center;

  font-size:
    12px;
}
/* ==========================================================
   ACTIVE FILTER STATES
   ========================================================== */

.severity-key {
  cursor: pointer;

  user-select: none;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease;
}


.severity-key:hover {
  transform:
    translateY(-1px);
}


.severity-key.selected {
  box-shadow:
    0 0 0 2px #ffffff;

  opacity:
    1;
}


.severity-key.extreme.selected {
  box-shadow:
    0 0 0 2px var(--extreme);
}


.severity-key.severe.selected {
  box-shadow:
    0 0 0 2px var(--severe);
}


.severity-key.moderate.selected {
  box-shadow:
    0 0 0 2px var(--moderate);
}
/* ==========================================================
   MAJOR ALERT MAP INTERACTION
   ========================================================== */

.major-alert-card[role="button"] {
  cursor: pointer;
}


.major-alert-card[role="button"]:hover {
  border-right-color:
    #405469;

  border-top-color:
    #405469;

  border-bottom-color:
    #405469;
}


.major-alert-card[role="button"]:focus-visible {
  outline:
    2px solid
    var(--blue);

  outline-offset:
    2px;
}

/* ==========================================================
   DATA FRESHNESS
   ========================================================== */

.dataset-freshness {
  font-weight: 700;

  transition:
    color 0.2s ease;
}


.dataset-freshness.freshness-fresh {
  color: var(--green);
}


.dataset-freshness.freshness-aging {
  color: var(--moderate);
}


.dataset-freshness.freshness-stale {
  color: var(--extreme);
}


.dataset-freshness.freshness-unknown {
  color: #7f91a3;
}

/* ==========================================================
   MINOR + UNKNOWN VISUAL CONSISTENCY
   ========================================================== */

/* Top-right severity controls */
.severity-key.minor {
  background: rgba(45, 123, 216, 0.18);
  border-color: rgba(45, 123, 216, 0.45);
  color: #dbeafe;
}

.severity-key.unknown {
  background: rgba(123, 138, 153, 0.18);
  border-color: rgba(123, 138, 153, 0.45);
  color: #f3f4f6;
}

/* Selected-state emphasis */
.severity-key.minor.selected {
  box-shadow: 0 0 0 2px #2d7bd8;
}

.severity-key.unknown.selected {
  box-shadow: 0 0 0 2px #7b8a99;
}

/* Map legend */
.legend-colour.legend-minor {
  background: #2d7bd8;
}

/* Force Unknown legend swatch */
.legend-unknown {
  background-color: #7b8a99 !important;
}

/* Inset map/popup rings remain visible inside Leaflet's clipping boundary. */
.filter-button:focus-visible, .severity-key:focus-visible {
  outline: 2px solid #a7d9ff;
  outline-offset: 3px;
}
#map:focus-visible,
.alertwatch-leaflet-popup .leaflet-popup-content:focus-visible,
.alertwatch-leaflet-popup .leaflet-popup-close-button:focus-visible {
  outline: 2px solid #a7d9ff;
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .major-alert-card, .severity-key { transition: none; }
}