/* ========== GLOBAL LAYOUT & TYPOGRAPHY ========== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f7;
  font-size: 18px;
  overflow-x: hidden;
  color: #000;
}

@media (max-width: 600px) {
  html, body { font-size: 15px; }
}

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========== MAP WRAPPER & CARD ========== */

.map-wrapper {
  max-width: 900px;
  width: 100%;
  margin: 16px auto 0;
  padding: 12px;
}

.map-card {
  position: relative;
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid rgba(0,0,0,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.site-banner {
  background: linear-gradient(135deg, #0b4da2 0%, #1e40af 100%);
  color: #fff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* Hidden by default - only shows when has content */
.site-banner:empty {
  display: none;
}

.site-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-banner-icon svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.site-banner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-banner a:hover {
  text-decoration-thickness: 2px;
}

/* Warning variant (amber) */
.site-banner--warning {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Info variant (teal) */
.site-banner--info {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

/* Success variant (green) */
.site-banner--success {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Alert variant (red) - same as alert-bar */
.site-banner--alert {
  background: linear-gradient(135deg, #9a1f18 0%, #7f1d1d 100%);
}

@media (max-width: 480px) {
  .site-banner {
    font-size: 12px;
    padding: 8px 14px;
    gap: 8px;
  }

  .site-banner-icon svg {
    width: 14px;
    height: 14px;
  }
}

/* ========== ACCESSIBILITY ========== */

/* Skip navigation link */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: #0b4da2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-nav:focus {
  top: 0;
}

/* Focus visible styles for keyboard navigation */
*:focus-visible {
  outline: 3px solid #0b4da2;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
.nav-btn:focus-visible,
.incident-chip:focus-visible,
.map-control-btn:focus-visible,
.callerid-tab:focus-visible {
  outline: 3px solid #0b4da2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove outline for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ========== BRAND BANNER ========== */

.brand-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 24px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

.header-logo {
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.site-name {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #0b4da2;
  margin: 0;
}

.site-subtitle {
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
  color: #64748b;
  white-space: nowrap;
}

/* Nav buttons */
.banner-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.banner-nav .nav-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  color: #64748b;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.banner-nav .nav-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.2);
  color: #334155;
  transform: translateY(-1px);
}

.banner-nav .nav-icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

/* Call Center Link */
.call-center-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  width: 100%;
}

.call-center-link:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.2);
  color: #334155;
  transform: translateY(-1px);
}

.call-center-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

.call-center-link .call-label {
  display: none;
}

.call-center-link .call-number {
  white-space: nowrap;
}

.call-center-link .call-number::before {
  content: 'Call Center: ';
}

/* Content section below header */
.content-overlap {
  background: #fff;
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* Divider between header and incident section */
.content-overlap::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.12) 15%,
    rgba(0,0,0,0.12) 85%,
    transparent 100%
  );
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Mobile styles */
@media (max-width: 600px) {
  .brand-banner {
    padding: 16px 18px;
  }

  .brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .brand-group {
    gap: 12px;
    padding-right: 0;
    border-right: none;
    padding-bottom: 14px;
    position: relative;
    width: 100%;
  }

  .brand-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(0,0,0,0.1);
  }

  .header-logo {
    width: 140px;
  }

  .site-name {
    font-size: 20px;
  }

  .site-subtitle {
    font-size: 13px;
    white-space: normal;
  }

  .banner-nav {
    width: 100%;
    align-items: stretch;
  }

  .nav-buttons {
    width: 100%;
    min-width: 0;
  }

  .banner-nav .nav-btn {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 10px 12px;
    min-width: 0;
  }

  .banner-nav .nav-icon {
    width: 15px;
    height: 15px;
  }

  .banner-nav .call-center-link {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
  }
}

.card-divider {
  margin: 8px 14px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ========== INCIDENT BAR & CHIPS ========== */

.incident-strip {
  padding: 14px 18px 16px;
}

/* ========== INCIDENT BOX (Style E) ========== */

.incident-box {
  border-radius: 12px;
  overflow: hidden;
}

.incident-box--alert {
  border: 1.5px solid rgba(11,77,162,0.3);
  background: linear-gradient(135deg, #eff6ff 0%, #e8f0fe 100%);
}

.incident-box--calm {
  border: 1.5px solid rgba(11,77,162,0.15);
  background: linear-gradient(135deg, #eff6ff 0%, #e8f0fe 100%);
  box-shadow: inset 0 1px 3px rgba(11,77,162,0.06);
}

.incident-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(11,77,162,0.15);
}

.incident-box-header--alert {
  background: rgba(11,77,162,0.08);
}

.incident-box-header-icon {
  width: 16px;
  height: 16px;
  color: #0b4da2;
  flex-shrink: 0;
}

.incident-box-header-text {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0a3d7e;
}

.incident-box-body {
  padding: 12px 14px 14px;
}

.incident-box-body .incident-tip {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(11,77,162,0.6);
}

.incident-box-content-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.incident-box-footer {
  padding: 10px 14px;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.incident-box--calm .incident-box-content-row {
  padding: 14px 16px;
}

/* No incidents icon - brand blue */
.incident-box--calm .incident-none-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(11,77,162,0.1);
  border: 1px solid rgba(11,77,162,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.incident-box--calm .incident-none-icon svg {
  width: 20px;
  height: 20px;
  color: #0b4da2;
}

.incident-box--calm .incident-none-title {
  font-size: 15px;
  font-weight: 700;
  color: #0b4da2;
  margin-bottom: 2px;
}

.incident-box--calm .incident-none-body {
  font-size: 14px;
  color: #4a6fa5;
  margin: 0;
}

.incident-box--calm .incident-none-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #0b4da2;
  text-decoration: none;
  transition: color 0.2s;
}

.incident-box--calm .incident-none-cta-link:hover {
  color: #083a7a;
}

.incident-box--calm .incident-none-cta-link svg {
  width: 16px;
  height: 16px;
}

/* Hide states based on incident count - both hidden by default */
#incidentsActive {
  display: none;
}

#incidentsActive.has-incidents {
  display: block;
}

#noIncidentsMsg {
  display: none;
}

#noIncidentsMsg.is-visible {
  display: block;
}

@media (max-width: 520px) {
  .incident-box--calm .incident-box-content-row {
    padding: 12px;
    gap: 10px;
  }

  .incident-box--calm .incident-none-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .incident-box--calm .incident-none-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Legacy styles kept for backward compatibility */
.incident-strip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.incident-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}

.incident-label {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0b4da2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.incident-count-badge {
  font-weight: 700;
}

.incident-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Centered navigation below incident strip */
.incident-nav-centered {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Compact variant for 3-button navigation */
.incident-nav-centered.nav-3-buttons {
  gap: 8px;
}

.incident-nav-centered.nav-3-buttons .info-link,
.incident-nav-centered.nav-3-buttons .alert-link {
  font-size: 13px;
  padding: 8px 12px;
  gap: 6px;
  max-width: 140px;
}

.incident-nav-centered.nav-3-buttons .nav-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 520px) {
  .incident-nav-centered.nav-3-buttons {
    gap: 6px;
    padding: 8px 12px 10px;
  }

  .incident-nav-centered.nav-3-buttons .info-link,
  .incident-nav-centered.nav-3-buttons .alert-link {
    font-size: 12px;
    padding: 7px 10px;
    max-width: 110px;
  }

  .incident-nav-centered.nav-3-buttons .nav-icon {
    width: 14px;
    height: 14px;
  }
}

/* Navigation buttons - shared base styles (Option B: Soft Cards) */
.info-link,
.alert-link {
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(11,77,162,0.2);
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  color: #0b4da2;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  max-width: 180px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(11,77,162,0.1);
}

/* HOVER: Deeper gradient with lift */
.info-link:hover,
.alert-link:hover {
  background: linear-gradient(135deg, #e0edff 0%, #d4e4fc 100%);
  border-color: rgba(11,77,162,0.35);
  box-shadow: 0 4px 14px rgba(11,77,162,0.18);
  transform: translateY(-2px);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.info-label-full,
.alert-label {
  font-size: 14px;
}

.info-label-short,
.alert-label-short {
  font-size: 14px;
  display: none;
}

/* Tablet */
@media (max-width: 700px) {
  .info-label-full { display: none; }
  .info-label-short { display: inline; }
}

/* Mobile */
@media (max-width: 520px) {
  .incident-strip {
    padding: 8px 12px 12px;
  }

  .incident-strip-top {
    gap: 6px;
  }

  .incident-label {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .incident-count-badge {
    padding: 3px 10px;
    font-size: 14px;
  }

  .incident-tip {
    font-size: 13px;
  }

  .incident-actions {
    gap: 5px;
  }

  .incident-nav-centered {
    padding: 10px 12px 12px;
    gap: 8px;
  }

  .info-link,
  .alert-link {
    padding: 9px 12px;
    gap: 6px;
    border-radius: 8px;
    font-size: 13px;
    max-width: 160px;
  }

  .nav-icon {
    width: 16px;
    height: 16px;
  }

  .info-label-short {
    font-size: 13px;
  }

  .alert-label { display: none; }
  .alert-label-short {
    display: inline;
    font-size: 13px;
  }
}

/* Small mobile */
@media (max-width: 420px) {
  .incident-strip {
    padding: 8px 10px 10px;
  }

  .incident-bar-left {
    gap: 6px;
  }

  .incident-label {
    font-size: 14px;
  }

  .incident-count-badge {
    padding: 3px 8px;
    font-size: 13px;
  }

  .incident-tip {
    font-size: 12px;
  }

  .incident-actions {
    gap: 4px;
  }

  .info-link,
  .alert-link {
    padding: 8px 10px;
    gap: 5px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 140px;
  }

  .nav-icon {
    width: 15px;
    height: 15px;
  }

  .info-label-short,
  .alert-label-short {
    font-size: 12px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .info-label-short { display: none; }
  .info-link {
    padding: 8px;
  }
  .nav-icon {
    width: 16px;
    height: 16px;
  }
}

.incident-tip {
  font-size: 14px;
  color: #64748b;
  margin: 4px 0 8px 2px;
  font-weight: 400;
}

.incident-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.incident-chip {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1.5px solid rgba(11,77,162,0.25);
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  white-space: nowrap;
}

@keyframes chipGlow {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(11,77,162,0.08);
  }
  50% {
    box-shadow: 0 2px 16px rgba(11,77,162,0.2), 0 0 0 2px rgba(11,77,162,0.08);
  }
}

/* Blue ! warning icon */
.incident-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0b4da2;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(11,77,162,0.3);
}

/* Hover: lift and emphasize */
.incident-chip:hover {
  background: #f0f6ff;
  border-color: rgba(11,77,162,0.4);
  box-shadow: 0 4px 12px rgba(11,77,162,0.12);
  transform: translateY(-1px);
}

.incident-chip.active {
  background: linear-gradient(135deg, #0b4da2 0%, #0a3d7e 100%);
  border-color: #0b4da2;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(11,77,162,0.3);
  animation: none;
}

.incident-chip.active .incident-chip-icon {
  background: #fff;
  color: #0b4da2;
  box-shadow: none;
}

/* Incident chip responsive styles */
@media (max-width: 520px) {
  .incident-chips {
    gap: 8px;
  }

  .incident-chip {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    gap: 10px;
  }

  .incident-chip-icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .incident-chip {
    padding: 10px 12px;
    font-size: 14px;
    gap: 8px;
  }

  .incident-chip-icon {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

/* No Active Incidents Card */
.incident-none {
  display: none;
  margin-top: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid rgba(11, 77, 162, 0.2);
  border-radius: 10px;
}

.incident-none.is-visible {
  display: block;
}

.incident-none-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.incident-none-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0b4da2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.incident-none-icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.incident-none-text {
  flex: 1;
  min-width: 0;
}

.incident-none-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.incident-none-body {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: 2px 0 0 0;
}

.incident-none-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 38px;
  margin-top: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  border: 1px solid rgba(11,77,162,0.2);
  border-radius: 10px;
  color: #0b4da2;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11,77,162,0.1);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.incident-none-cta-link:hover {
  background: linear-gradient(135deg, #e0edff 0%, #d4e4fc 100%);
  border-color: rgba(11,77,162,0.35);
  box-shadow: 0 4px 14px rgba(11,77,162,0.18);
  transform: translateY(-2px);
}

.incident-none-cta-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 520px) {
  .incident-none {
    padding: 10px 12px;
  }

  .incident-none-content {
    gap: 8px;
  }

  .incident-none-icon {
    width: 26px;
    height: 26px;
  }

  .incident-none-icon svg {
    width: 14px;
    height: 14px;
  }

  .incident-none-title {
    font-size: 12px;
  }

  .incident-none-body {
    font-size: 12px;
  }

  .incident-none-cta-link {
    margin-left: 34px;
    padding: 5px 10px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .incident-none-cta-link {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ========== MAP CONTAINER & LEGEND ========== */

.map-key-merged {
  padding: 14px 18px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: center;
}

.map-key-merged .legend-title {
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.map-key-merged .legend-items {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.map-key-merged .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .map-key-merged {
    padding: 12px 12px 14px;
  }

  .map-key-merged .legend-items {
    gap: 8px;
  }

  .map-key-merged .legend-item {
    font-size: 12px;
    padding: 5px 10px;
  }
}

.legend-tip {
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}

.legend-icon-road {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d60000;
  flex-shrink: 0;
}

.legend-icon-road::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 3px;
  background: #fff;
  transform: translateY(-50%);
  border-radius: 2px;
}

.legend-icon-info {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0078d4;
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.legend-icon-warning {
  position: relative;
  width: 18px;
  height: 18px;
  background: #f6e05e;
  transform: rotate(45deg);
  border: 1px solid #c7b100;
  flex-shrink: 0;
}

.legend-icon-warning::after {
  content: "!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(-45deg);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
}

main {
  display: block;
  width: 100%;
}

/* ========== EVAC SET/GO ROW & BOXES ========== */

.evac-row {
  display: flex;
  gap: 16px;
  max-width: 900px;
  width: 100%;
  padding: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px auto 18px;
}

.evac-box {
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.25);
  flex: 1;
  min-width: 260px;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fff;
}

.evac-box-set {
  border: 3px solid rgba(180,150,0,0.9);
  box-shadow: 0 0 10px rgba(180,150,0,0.45);
}

.evac-box-go {
  border: 3px solid rgba(0,120,0,0.9);
  box-shadow: 0 0 12px rgba(0,120,0,0.55);
  animation: goPulse 2.5s ease-in-out infinite alternate;
  will-change: box-shadow;
}

@keyframes goPulse {
  from { box-shadow: 0 0 8px rgba(0,120,0,0.4); }
  to { box-shadow: 0 0 18px rgba(0,160,0,0.8); }
}

.evac-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}

.evac-body {
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.evac-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.zone-chip,
.no-zones-chip {
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 15px;
  color: #1e293b;
  border: 1px solid rgba(0,0,0,0.15);
}

/* SET box zone chips - amber tint */
.evac-box-set .zone-chip {
  background: rgba(140,110,0,0.15);
  border-color: rgba(120,90,0,0.3);
}

/* GO box zone chips - green tint */
.evac-box-go .zone-chip {
  background: rgba(0,90,0,0.15);
  border-color: rgba(0,70,0,0.3);
}

/* No zones chip styling */
.no-zones-chip {
  background: #f8fafc;
  border: 1px dashed rgba(0,0,0,0.2);
  color: #64748b;
  font-style: italic;
  font-weight: 600;
}

.evac-note {
  margin-top: 10px;
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
}

/* ========== INCIDENT PANEL & STATUS HTML ========== */

.incident-panel {
  max-width: 900px;
  width: 100%;
  padding: 0 12px 20px;
  margin: 0 auto 20px;
  font-size: 18px;
  line-height: 1.6;
}

.incident-panel a {
  color: #0b4da2;
  font-weight: 700;
  text-decoration: underline;
}

.status-html {
  font-size: 15px;
  line-height: 1.6;
}

.status-html a {
  color: #0b4da2;
  font-weight: 700;
  text-decoration: underline;
}

.status-html a:hover {
  color: #083b7c;
}

.status-html h1,
.status-html h2,
.status-html h3 {
  margin: 12px 0 6px;
  font-weight: 700;
  font-size: 18px;
  color: #0f172a;
}

.status-html .status-card,
.status-html .card,
.status-html .card-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  border: 1.5px solid rgba(0,0,0,0.18);
  margin: 12px 0;
  padding: 12px 16px;
  background: #fff;
}

.status-timestamp {
  font-size: 14px;
  margin-top: 10px;
  color: #444;
  opacity: 0.8;
  text-align: center;
  padding: 0 10px;
}

.source-label {
  font-style: italic;
  opacity: 0.9;
}

/* ========== STATUS CARD STYLES (JSON-generated) ========== */

.status-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.1);
  margin: 12px 0;
  background: #fff;
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  border-bottom: 1px solid rgba(11,77,162,0.1);
}

.status-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0b4da2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status-card-icon svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.status-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0b4da2;
}

.status-card-subtitle {
  font-size: 13px;
  color: #64748b;
}

.status-card-body {
  padding: 16px 18px;
}

.status-link-row {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.status-link-row .status-label {
  font-weight: 600;
  color: #475569;
  margin-right: 6px;
}

.status-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.status-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.status-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-section-title svg {
  color: #0b4da2;
  flex-shrink: 0;
}

.status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.status-value {
  font-size: 15px;
  line-height: 1.5;
  color: #1f2937;
}

.status-value div {
  margin-bottom: 2px;
}

.status-value div:last-child {
  margin-bottom: 0;
}

.no-data {
  color: #6b7280;
  font-style: italic;
}

.maps-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f0f6ff;
  color: #0b4da2;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.maps-link:hover {
  background: #e0edff;
  text-decoration: none;
}

.maps-link svg {
  color: #0b4da2;
}

.status-card-empty,
.status-card-error {
  text-align: center;
  padding: 24px 18px;
}

.status-card-empty p,
.status-card-error p {
  margin: 0;
  color: #475569;
}

.status-card-error {
  background: #fef2f2;
  border-color: #fecaca;
}

.status-card-error .status-card-title {
  color: #b91c1c;
}

@media (max-width: 600px) {
  .status-card {
    padding: 14px 14px;
  }

  .status-card-title {
    font-size: 18px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .status-section-title {
    font-size: 13px;
  }

  .status-section-title svg {
    width: 16px;
    height: 16px;
  }

  .status-value {
    font-size: 14px;
  }

  .status-row {
    flex-direction: column;
    gap: 8px;
  }

  .maps-link {
    align-self: flex-start;
  }
}

@media (max-width: 600px) {
  .evac-row { flex-direction: column; }
  .evac-box { min-width: 0; }

  .evac-zones {
    gap: 6px;
    margin-top: 10px;
  }

  .zone-chip,
  .no-zones-chip {
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 6px;
  }
}

/* ========== HOMEPAGE CONTENT (INFO PAGE) ========== */

.home-wrapper {
  max-width: 900px;
  margin: 8px auto 0;
  padding: 0;
}
.primary-pill,
.secondary-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
  margin-right: 6px;
  cursor: pointer;
}

.primary-pill {
  background: #0b4da2;
  border: 1px solid #0b4da2;
  color: #fff;
}

.secondary-pill {
  background: #fff;
  border: 1px solid #0b4da2;
  color: #0b4da2;
}

.primary-pill:hover,
.secondary-pill:hover {
  box-shadow: 0 0 0 2px rgba(11,77,162,0.3);
}

/* ========== LPC ALERTS OVERLAY MODAL ========== */

.codered-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1400;
}

.codered-overlay.is-open {
  display: flex;
}

.codered-dialog {
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.5);
  position: relative;
  overflow: hidden;
}

.codered-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  padding-right: 48px;
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  border-bottom: 1px solid rgba(11,77,162,0.1);
}

.codered-header::before {
  content: '';
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0b4da2;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.codered-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.codered-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0b4da2;
  line-height: 1.3;
}

.codered-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.3;
}

.codered-body {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

.codered-body p {
  margin: 0 0 8px;
}

.codered-body p:last-child {
  margin-bottom: 0;
}

.codered-actions {
  padding: 0 20px 18px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.codered-actions .primary-pill,
.codered-actions .secondary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.codered-actions .primary-pill {
  background: linear-gradient(135deg, #0b4da2 0%, #1565c0 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(11,77,162,0.3);
}

.codered-actions .primary-pill:hover {
  box-shadow: 0 4px 14px rgba(11,77,162,0.4);
  transform: translateY(-2px);
}

.codered-actions .secondary-pill {
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  border: 1px solid rgba(11,77,162,0.2);
  color: #0b4da2;
  box-shadow: 0 2px 8px rgba(11,77,162,0.1);
}

.codered-actions .secondary-pill:hover {
  background: linear-gradient(135deg, #e0edff 0%, #d4e4fc 100%);
  box-shadow: 0 4px 14px rgba(11,77,162,0.18);
  transform: translateY(-2px);
}

.codered-actions .btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .codered-header {
    padding: 12px 16px;
    padding-right: 44px;
    gap: 10px;
  }

  .codered-header::before {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-size: 18px 18px;
  }

  .codered-title {
    font-size: 15px;
  }

  .codered-subtitle {
    font-size: 12px;
  }

  .codered-body {
    padding: 14px 16px;
  }

  .codered-actions {
    padding: 0 16px 16px;
    flex-wrap: wrap;
  }

  .codered-actions .primary-pill,
  .codered-actions .secondary-pill {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }
}

.codered-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(11,77,162,0.1);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b4da2;
  transition: background 0.2s, transform 0.1s;
}

.codered-close:hover {
  background: rgba(11,77,162,0.2);
  transform: translateY(-1px);
}

/* ========== ANNOUNCEMENT OVERLAY ========== */

.announcement-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1500;
}

.announcement-overlay.is-open {
  display: flex;
}

.announcement-dialog {
  max-width: 560px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.5);
  position: relative;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.announcement-header {
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  padding: 16px 20px;
  padding-right: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(11,77,162,0.1);
}

.announcement-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0b4da2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.announcement-icon-wrap svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.announcement-logo {
  width: 56px;
  height: auto;
  flex-shrink: 0;
}

.announcement-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.announcement-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0b4da2;
  line-height: 1.3;
}

.announcement-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.3;
}

.announcement-badge {
  display: none;
}

.announcement-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.announcement-content {
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
}

.announcement-content p {
  margin: 0 0 12px;
}

.announcement-content p:last-child {
  margin-bottom: 0;
}

.announcement-content strong {
  color: #111827;
}

.announcement-contact-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 8px;
}

.announcement-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
  margin-bottom: 6px;
}

.announcement-contact-row:last-child {
  margin-bottom: 0;
}

.announcement-contact-row svg {
  width: 16px;
  height: 16px;
  color: #64748b;
  flex-shrink: 0;
}

.announcement-contact-row a {
  color: #0b4da2;
  text-decoration: none;
  font-weight: 600;
}

.announcement-contact-row a:hover {
  text-decoration: underline;
}

.announcement-footer {
  padding: 16px 24px 20px;
  background: #fafbfc;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.announcement-footer .primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(135deg, #0b4da2 0%, #1565c0 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(11,77,162,0.3);
}

.announcement-footer .primary-pill:hover {
  box-shadow: 0 4px 14px rgba(11,77,162,0.4);
  transform: translateY(-2px);
}

.announcement-footer .secondary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.announcement-footer .secondary-pill:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.announcement-footer .btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.announcement-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(148,163,184,0.2);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: background 0.2s, transform 0.1s;
  z-index: 10;
}

.announcement-close:hover {
  background: rgba(148,163,184,0.35);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .announcement-header {
    padding: 14px 16px;
    padding-right: 40px;
    gap: 12px;
  }

  .announcement-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .announcement-icon-wrap svg {
    width: 18px;
    height: 18px;
  }

  .announcement-logo {
    width: 48px;
  }

  .announcement-title {
    font-size: 15px;
  }

  .announcement-subtitle {
    font-size: 12px;
  }

  .announcement-body {
    padding: 14px 16px;
  }

  .announcement-footer {
    padding: 14px 16px 16px;
    flex-direction: column;
  }

  .announcement-footer .primary-pill,
  .announcement-footer .secondary-pill {
    width: 100%;
    justify-content: center;
  }
}

/* ========== ANNOUNCEMENT KEY MESSAGE ========== */

.announcement-key-message {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.announcement-key-message-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #d97706;
}

.announcement-key-message-text {
  font-size: 14px;
  line-height: 1.5;
  color: #92400e;
}

.announcement-key-message-text strong {
  color: #78350f;
}

/* ========== ANNOUNCEMENT PRIMARY CTA ========== */

.announcement-primary-cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0b4da2 0%, #1565c0 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(11, 77, 162, 0.3);
  transition: all 0.2s;
  margin-bottom: 16px;
}

.announcement-primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 77, 162, 0.4);
}

/* ========== ANNOUNCEMENT ACCORDION ========== */

.announcement-accordion {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.announcement-accordion-item {
  border-bottom: 1px solid #e2e8f0;
}

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

.announcement-accordion-trigger {
  width: 100%;
  padding: 14px 16px;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  transition: background 0.2s;
}

.announcement-accordion-trigger:hover {
  background: #f1f5f9;
}

.announcement-accordion-trigger-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-accordion-icon {
  width: 20px;
  height: 20px;
  color: #0b4da2;
  flex-shrink: 0;
}

.announcement-accordion-label {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.announcement-accordion-chevron {
  width: 18px;
  height: 18px;
  color: #94a3b8;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.announcement-accordion-item.is-open .announcement-accordion-chevron {
  transform: rotate(180deg);
}

.announcement-accordion-content {
  display: none;
  padding: 0 16px 16px;
  background: #fff;
}

.announcement-accordion-item.is-open .announcement-accordion-content {
  display: block;
}

.announcement-accordion-text {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.announcement-accordion-text + .announcement-accordion-text {
  margin-top: 10px;
}

.announcement-accordion-text strong {
  color: #1e293b;
}

/* Caller ID inside accordion */
.announcement-accordion-callerid-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.announcement-accordion-callerid-card {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.announcement-accordion-callerid-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 4px;
}

.announcement-accordion-callerid-value {
  font-size: 15px;
  font-weight: 700;
  color: #0b4da2;
  font-family: 'SF Mono', 'Menlo', monospace;
}

.announcement-accordion-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  background: #0b4da2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.announcement-accordion-download-btn:hover {
  background: #0a4291;
}

.announcement-accordion-download-btn svg {
  width: 16px;
  height: 16px;
}

/* Contact inside accordion */
.announcement-accordion-contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.announcement-accordion-contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #475569;
}

.announcement-accordion-contact-item svg {
  width: 16px;
  height: 16px;
  color: #64748b;
}

.announcement-accordion-contact-item a {
  color: #0b4da2;
  text-decoration: none;
  font-weight: 600;
}

.announcement-accordion-contact-item a:hover {
  text-decoration: underline;
}

@media (max-width: 400px) {
  .announcement-accordion-callerid-cards {
    grid-template-columns: 1fr;
  }
}

/* ========== ANNOUNCEMENT ALERT BUTTON ========== */

.announcement-alert-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}

.announcement-alert-btn.is-active {
  display: flex;
}

.announcement-alert-btn svg {
  width: 22px;
  height: 22px;
  color: #dc2626;
  transition: all 0.2s ease;
}

.announcement-alert-btn:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.announcement-alert-btn:hover svg {
  color: #b91c1c;
}

/* Notification dot */
.announcement-alert-btn::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-radius: 50%;
  border: 2px solid #fff;
  animation: announcement-pulse 2s ease-in-out infinite;
}

@keyframes announcement-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.85;
  }
}

/* When announcement has been viewed, keep it red but stop pulsing */
.announcement-alert-btn.is-viewed::after {
  animation: none;
}

@media (max-width: 600px) {
  .announcement-alert-btn {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
  }

  .announcement-alert-btn svg {
    width: 20px;
    height: 20px;
  }

  .announcement-alert-btn::after {
    width: 10px;
    height: 10px;
    top: 4px;
    right: 4px;
  }
}

/* ========== TRIANGLE TIMELINE STYLES (INFO PAGE) ========== */

.preview-container {
  max-width: 100%;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
}

.preview-frame {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  padding: 18px 18px 26px;
}

.evac-stages {
  margin-top: 4px;
}

.stage-header-main {
  text-align: center;
  margin-bottom: 12px;
}

.stage-tagline {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 4px;
}

.stage-headline {
  font-size: 22px;
  font-weight: 800;
  color: #0b4da2;
}

.stage-subhead {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  text-align: center;
  margin: 20px 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.stage-header-main .stage-body {
  font-size: 15px;
  color: #111827;
}

/* ========== RSG CARD LAYOUT ========== */

.rsg-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rsg-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rsg-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  border: 1.5px solid rgba(0,0,0,0.06);
}

.rsg-stripe {
  width: 8px;
  flex-shrink: 0;
}

.rsg-stripe--ready { background: #c62828; }
.rsg-stripe--set { background: #b09200; }
.rsg-stripe--go { background: #007800; }

.rsg-card--ready {
  background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
  border-color: rgba(198,40,40,0.2);
}

.rsg-card--set {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border-color: rgba(176,146,0,0.2);
}

.rsg-card--go {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: rgba(0,120,0,0.2);
}

.rsg-content {
  padding: 20px 24px;
  flex: 1;
}

.rsg-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.rsg-card .rsg-title {
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.rsg-card--ready .rsg-title { color: #b91c1c; }
.rsg-card--set .rsg-title { color: #8a7000; }
.rsg-card--go .rsg-title { color: #007800; }

.rsg-card .rsg-label {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.rsg-card .rsg-body {
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
}

.rsg-card .rsg-body p {
  margin: 0 0 6px;
}

.rsg-card .rsg-body p:last-child {
  margin-bottom: 0;
}

.rsg-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rsg-bullets li {
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  padding-left: 18px;
  position: relative;
}

.rsg-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.rsg-card--ready .rsg-bullets li::before { background: rgba(185,28,28,0.4); }

/* RSG Mobile */
@media (max-width: 600px) {
  .rsg-pair {
    grid-template-columns: 1fr;
  }

  .rsg-content {
    padding: 16px 18px;
  }

  .rsg-card .rsg-title {
    font-size: 20px;
  }

  .rsg-card .rsg-label {
    font-size: 13px;
  }

  .rsg-card .rsg-body,
  .rsg-bullets li {
    font-size: 14px;
  }

  .rsg-header {
    gap: 8px;
    margin-bottom: 8px;
  }

  .stage-headline {
    font-size: 20px;
  }
}

/* ========== PAST INCIDENTS TABLE ========== */

.past-incidents-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(0,0,0,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
}

.past-incidents-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.past-incidents-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.past-incidents-icon-wrap svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* Legacy icon class for backwards compatibility */
.past-incidents-icon {
  color: #fff;
  flex-shrink: 0;
}

.past-incidents-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.past-incidents-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.past-incidents-subtitle {
  font-size: 13px;
  color: #64748b;
}

.past-incidents-body {
  padding: 0;
  overflow-y: auto;
  max-height: 220px;
}

.past-incidents-body table {
  min-width: 100%;
}

.past-incidents-body thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
}

.past-incidents-loading,
.past-incidents-error {
  padding: 20px 18px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.past-incidents-error {
  color: #b3261e;
}

.past-incidents-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 18px;
  background: #fffbeb;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
}

.past-incidents-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f59e0b;
}

@media (max-width: 600px) {
  .past-incidents-header {
    padding: 12px 14px;
  }

  .past-incidents-icon-wrap {
    width: 32px;
    height: 32px;
  }

  .past-incidents-icon-wrap svg {
    width: 16px;
    height: 16px;
  }

  .past-incidents-title {
    font-size: 15px;
  }

  .past-incidents-subtitle {
    font-size: 12px;
  }

  .past-incidents-disclaimer {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ========== CALLER ID OVERLAY ========== */

.callerid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1400;
}

.callerid-overlay.is-open {
  display: flex;
}

.callerid-dialog {
  max-width: 520px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.5);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.callerid-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
  padding: 14px 20px;
  padding-right: 48px;
  border-bottom: 1px solid rgba(11,77,162,0.1);
}

.callerid-header::before {
  content: '';
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0b4da2;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.callerid-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.callerid-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0b4da2;
  line-height: 1.3;
}

.callerid-subtitle {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.3;
}

.callerid-body {
  padding: 16px 20px;
}

.callerid-intro {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 16px;
}

.callerid-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.callerid-number-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.callerid-number-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 6px;
}

.callerid-number-value {
  font-size: 18px;
  font-weight: 800;
  color: #0b4da2;
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.callerid-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.callerid-tab {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.callerid-tab:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.callerid-tab.is-active {
  border-color: #0b4da2;
  background: #f0f6ff;
  color: #0b4da2;
}

.callerid-tab svg {
  width: 20px;
  height: 20px;
}

.callerid-instructions {
  display: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
}

.callerid-instructions.is-visible {
  display: block;
}

.callerid-instructions-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.callerid-instructions-title svg {
  width: 18px;
  height: 18px;
  color: #0b4da2;
}

.callerid-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.callerid-steps li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.callerid-steps li:last-child {
  margin-bottom: 0;
}

.callerid-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: #0b4da2;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.callerid-steps code {
  background: #e0edff;
  color: #0b4da2;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-size: 13px;
  font-weight: 600;
}

/* Download Contact Card Section */
.callerid-download {
  margin-top: 20px;
  text-align: center;
}

/* Top variant - appears before manual instructions */
.callerid-download--top {
  margin-top: 0;
  margin-bottom: 0;
}

.callerid-download--top .callerid-download-btn {
  width: 100%;
}

.callerid-download-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.callerid-download-divider::before,
.callerid-download-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.callerid-download-divider span {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Manual instructions divider */
.callerid-manual-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 16px;
}

.callerid-manual-divider::before,
.callerid-manual-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.callerid-manual-divider span {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.callerid-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #0b4da2 0%, #1565c0 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11,77,162,0.3);
  transition: all 0.2s;
}

.callerid-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11,77,162,0.4);
}

.callerid-download-btn svg {
  width: 20px;
  height: 20px;
}

.callerid-download-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #64748b;
}

.callerid-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.callerid-note svg {
  width: 18px;
  height: 18px;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}

.callerid-footer {
  padding: 16px 24px 20px;
  background: #fafbfc;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: flex-end;
}

.callerid-footer .secondary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.callerid-footer .secondary-pill:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.callerid-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(148,163,184,0.16);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  transition: background 0.2s, transform 0.1s;
}

.callerid-close:hover {
  background: rgba(148,163,184,0.3);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .callerid-numbers {
    grid-template-columns: 1fr;
  }

  .callerid-tabs {
    flex-direction: column;
  }

  .callerid-header {
    padding: 16px 18px;
    padding-right: 44px;
  }

  .callerid-body {
    padding: 16px 18px;
  }

  .callerid-instructions {
    padding: 14px 16px;
  }

  .callerid-footer {
    padding: 14px 18px 18px;
  }
}

/* ========== SCROLL INDICATOR ========== */

.scroll-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(11,77,162,0.25);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(11,77,162,0.08);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.scroll-indicator.is-visible {
  opacity: 1;
  visibility: visible;
}

.scroll-indicator:hover {
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(11,77,162,0.35);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(11,77,162,0.12);
}

.scroll-indicator-text {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scroll-indicator-icon {
  width: 20px;
  height: 20px;
  color: #0b4da2;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Hide on very small screens where it might obstruct content */
@media (max-height: 500px) {
  .scroll-indicator {
    bottom: 12px;
    padding: 8px 14px;
    gap: 4px;
  }
  
  .scroll-indicator-text {
    font-size: 11px;
  }
  
  .scroll-indicator-icon {
    width: 18px;
    height: 18px;
  }
}

/* Compact version for mobile */
@media (max-width: 480px) {
  .scroll-indicator {
    padding: 8px 14px;
    gap: 4px;
    bottom: 16px;
  }
  
  .scroll-indicator-text {
    font-size: 11px;
  }
  
  .scroll-indicator-icon {
    width: 18px;
    height: 18px;
  }
}

/* ========== LOADING STATES ========== */

/* Map loading overlay */
.map-loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8f4f8 0%, #f0f4f8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
}

.map-loading.is-hidden {
  display: none;
}

.map-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(11, 77, 162, 0.15);
  border-top-color: #0b4da2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.map-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.map-loading-subtext {
  font-size: 12px;
  color: #6b7280;
  margin-top: -8px;
}

/* Skeleton loading for content areas */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text-sm {
  height: 12px;
  width: 60%;
}

.skeleton-chip {
  height: 36px;
  width: 140px;
  border-radius: 20px;
  display: inline-block;
  margin: 4px;
}

/* Loading state for data panels */
.loading-placeholder {
  padding: 20px;
  text-align: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-placeholder-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(11, 77, 162, 0.15);
  border-top-color: #0b4da2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-placeholder-text {
  font-size: 14px;
  font-weight: 500;
}

/* Incident chips loading state */
.incident-chips-loading {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Past incidents table loading */
.past-incidents-loading {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.past-incidents-error {
  padding: 24px;
  text-align: center;
  color: #dc2626;
  font-size: 14px;
}