/* === Design System Variables === */
:root {
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --bg-tertiary: #21262D;
  --bg-card: #1C2128;
  --accent-blue: #58A6FF;
  --accent-red: #F85149;
  --accent-orange: #D29922;
  --accent-green: #3FB950;
  --accent-cyan: #22d3ee;
  --accent-purple: #BC8CFF;
  --text-primary: #E6EDF3;
  --text-secondary: #8B949E;
  --text-muted: #484F58;
  --border-default: #30363D;
}

/* === Splash Screen === */
@keyframes splashIconSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes splashIconPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes splashTitleIn {
  from { opacity: 0; letter-spacing: 8px; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: 3px; filter: blur(0); }
}
@keyframes splashBarPulse {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes splashFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; pointer-events: none; }
}
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0D1117;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: none;
}
.splash-overlay.splash-done {
  animation: splashFadeOut 0.6s ease forwards;
}
.splash-content {
  text-align: center;
}
.splash-icon {
  font-size: 56px;
  color: #58A6FF;
  animation: splashIconSpin 2.4s ease-in-out, splashIconPulse 2s ease-in-out 2.4s infinite;
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(88, 166, 255, 0.5));
}
.splash-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #E6EDF3;
  text-transform: uppercase;
  animation: splashTitleIn 1s ease 0.3s both;
  margin-bottom: 8px;
}
.splash-subtitle {
  font-size: 13px;
  color: #8B949E;
  margin-bottom: 20px;
  animation: splashTitleIn 0.8s ease 0.6s both;
}
.splash-status {
  font-size: 11px;
  color: #58A6FF;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  margin-bottom: 16px;
  min-height: 16px;
  transition: opacity 0.3s;
}
.splash-bar {
  width: 200px;
  height: 3px;
  background: #21262D;
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}
.splash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #58A6FF, #BC8CFF, #22d3ee, #58A6FF);
  background-size: 200% 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease-out;
  animation: splashBarPulse 1.5s linear infinite;
}

/* === Scenario Loading Overlay === */
.scenario-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scenario-loading-overlay.active {
  display: flex;
  opacity: 1;
}
.scenario-loading-content {
  text-align: center;
  padding: 32px 48px;
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid #30363D;
  border-radius: 12px;
}
.scenario-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #21262D;
  border-top-color: #58A6FF;
  border-radius: 50%;
  animation: splashIconSpin 1s linear infinite;
  margin: 0 auto 16px;
}
.scenario-loading-text {
  font-size: 14px;
  color: #E6EDF3;
  font-weight: 500;
}
.scenario-loading-detail {
  font-size: 11px;
  color: #8B949E;
  margin-top: 6px;
}

/* === Skeleton Loading Animation === */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #21262D 25%, #30363D 50%, #21262D 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

/* === Tab Transition Animation === */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-pane.active {
  animation: fadeSlideIn 0.35s ease-out;
}

/* === Palantir Dark Theme Overrides === */

/* Globale Basis */
html, body {
  background-color: #0D1117 !important;
  color: #E6EDF3 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.bslib-page-fill, .bslib-page-fill > .container-fluid,
.bslib-page-fill > .row, .bslib-page-fill > .row > [class*="col-"] {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Header Bar */
@keyframes headerGradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.3)); }
  50%      { filter: drop-shadow(0 0 16px rgba(88, 166, 255, 0.55)); }
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(180deg, #161B22 0%, #13161d 100%);
  border-bottom: none;
  margin-bottom: 0;
  position: relative;
}
.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #58A6FF, #BC8CFF, #22d3ee, #58A6FF, transparent);
  background-size: 300% 100%;
  animation: headerGradientShift 8s linear infinite;
  opacity: 0.6;
}
.header-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.header-logo {
  font-size: 26px;
  color: #58A6FF;
  animation: logoGlow 3s ease-in-out infinite;
}
.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #E6EDF3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.header-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #8B949E;
  letter-spacing: 0.3px;
  margin-left: 4px;
}
.header-info-icon {
  position: relative;
  display: inline-block;
  font-size: 11px;
  color: #58A6FF;
  cursor: help;
  margin-left: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.header-info-icon:hover,
.header-info-icon:focus {
  opacity: 1;
  outline: none;
}

/* Dark-theme tooltip: instant on hover/focus, replaces native `title`. */
.header-info-icon[data-tooltip]::after,
.header-info-icon[data-tooltip]::before {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  z-index: 10000;
}
.header-info-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  max-width: 320px;
  background: rgba(13, 17, 23, 0.97);
  color: #E6EDF3;
  border: 1px solid #30363D;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1px;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.header-info-icon[data-tooltip]::before {
  content: "";
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 6px solid transparent;
  border-bottom-color: #30363D;
}
.header-info-icon[data-tooltip]:hover::after,
.header-info-icon[data-tooltip]:hover::before,
.header-info-icon[data-tooltip]:focus::after,
.header-info-icon[data-tooltip]:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
@media (max-width: 900px) {
  .header-info-icon[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-4px);
    min-width: 180px;
    max-width: 260px;
  }
  .header-info-icon[data-tooltip]:hover::after,
  .header-info-icon[data-tooltip]:focus::after {
    transform: translateX(0) translateY(0);
  }
  .header-info-icon[data-tooltip]::before {
    left: auto;
    right: 6px;
    transform: translateY(-4px);
  }
  .header-info-icon[data-tooltip]:hover::before,
  .header-info-icon[data-tooltip]:focus::before {
    transform: translateY(0);
  }
}
.header-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.header-controls .form-group { margin-bottom: 0; }
.header-controls .selectize-input {
  background: #21262D !important;
  border-color: #30363D !important;
  color: #E6EDF3 !important;
  min-width: 100px;
  font-size: 13px;
}

/* Navigation Sidebar — scrollable so all tabs are always reachable */
.bslib-navs-pill-list > .nav-pills,
.bslib-page-fill > .row > .col-sm-2 > .nav-pills {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #30363D transparent;
}
.bslib-navs-pill-list > .nav-pills::-webkit-scrollbar { width: 4px; }
.bslib-navs-pill-list > .nav-pills::-webkit-scrollbar-thumb { background: #30363D; border-radius: 2px; }

.nav-pills .nav-link {
  color: #8B949E !important;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visual separator before info tabs */
.nav-pills .nav-item:has(+ .nav-item > .nav-link[data-value="glossary"]),
.nav-pills > .nav-item > .nav-link[data-value="glossary"] {
  margin-top: 8px;
}
.nav-pills > li:nth-child(6) {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #30363D;
}
.nav-pills .nav-link:hover {
  background: rgba(88, 166, 255, 0.08) !important;
  color: #E6EDF3 !important;
  transform: translateX(3px);
}
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #58A6FF, #4090E0) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(88, 166, 255, 0.3);
  transform: scale(1.02);
}

/* Cards — Glasmorphism */
.card, .bslib-card {
  background: rgba(22, 27, 34, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.card-header {
  background: rgba(28, 33, 40, 0.8) !important;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5) !important;
  color: #E6EDF3 !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* KPI Value Boxes — Glasmorphism */
.bslib-value-box {
  background: rgba(28, 33, 40, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}
.bslib-value-box .value-box-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
}

/* Selectize / Dropdowns */
.selectize-dropdown {
  background: rgba(22, 27, 34, 0.98) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  margin-top: 4px !important;
  overflow: hidden;
}
.selectize-dropdown .option {
  color: #C9D1D9 !important;
  padding: 8px 12px !important;
  font-size: 12px;
  transition: background 0.1s ease;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: rgba(88, 166, 255, 0.08) !important;
  color: #E6EDF3 !important;
}
.selectize-input {
  border-radius: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.selectize-input.focus {
  border-color: #58A6FF !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15) !important;
}

/* Slider */
.irs--shiny .irs-bar {
  background: linear-gradient(90deg, #58A6FF, #79C0FF);
  border-radius: 3px;
  height: 4px;
  top: 28px;
}
.irs--shiny .irs-handle {
  border: 2px solid #58A6FF;
  background: #0d1117;
  width: 16px;
  height: 16px;
  top: 22px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
  cursor: grab;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.irs--shiny .irs-handle:hover {
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.5);
  transform: scale(1.15);
}
.irs--shiny .irs-handle:active { cursor: grabbing; }
.irs--shiny .irs-line {
  background: #21262D;
  border-radius: 3px;
  height: 4px;
  top: 28px;
}
.irs--shiny .irs-min, .irs--shiny .irs-max {
  color: #484F58;
  background: transparent;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.irs--shiny .irs-single {
  color: #E6EDF3;
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
}
.irs--shiny .irs-grid-pol { background: #30363D; }
.irs--shiny .irs-grid-text { color: #484F58; font-size: 9px; }

/* Timeline play/reset buttons */
.timeline-container .btn-sm {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.timeline-container .btn-sm:first-of-type {
  background: linear-gradient(135deg, #58A6FF, #4A8FBF) !important;
  border: none !important;
  color: #fff !important;
}
.timeline-container .btn-sm:first-of-type:hover {
  background: linear-gradient(135deg, #79C0FF, #58A6FF) !important;
  box-shadow: 0 2px 12px rgba(88, 166, 255, 0.4);
  transform: scale(1.08);
}
.timeline-container .btn-sm:last-of-type {
  background: rgba(33, 38, 45, 0.8) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  color: #6E7681 !important;
}
.timeline-container .btn-sm:last-of-type:hover {
  color: #C9D1D9 !important;
  border-color: #484F58 !important;
  transform: scale(1.08);
}

/* plotly Dark */
.js-plotly-plot .plotly .main-svg { background: transparent !important; }
.js-plotly-plot .modebar {
  background: transparent !important;
}
.js-plotly-plot .modebar-btn {
  color: #484F58 !important;
  transition: color 0.15s ease;
}
.js-plotly-plot .modebar-btn:hover {
  color: #8B949E !important;
}
.js-plotly-plot .modebar-btn.active {
  color: #58A6FF !important;
}

/* Timeline */
.timeline-container {
  background: linear-gradient(180deg, #13161d 0%, #161B22 100%);
  border-top: 1px solid rgba(48, 54, 61, 0.6);
  padding: 10px 20px 8px;
  isolation: isolate;
}
.timeline-hint {
  text-align: center;
  font-size: 11px;
  color: #8B949E;
  margin-top: 2px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.timeline-hint span {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 10px;
  color: #79C0FF;
}

/* KPI Footer */
.kpi-footer {
  display: flex;
  justify-content: space-around;
  padding: 12px 20px 10px;
  background: linear-gradient(180deg, #111518 0%, #0d1117 100%);
  border-top: 1px solid rgba(48, 54, 61, 0.4);
  position: relative;
}
.kpi-item {
  text-align: center;
  position: relative;
  padding: 4px 12px;
}
.kpi-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, #30363D, transparent);
}
.kpi-item:last-child::after { display: none; }
.kpi-label {
  font-size: 9px;
  color: #6E7681;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #E6EDF3;
  transition: color 0.2s ease, opacity 0.15s ease;
  line-height: 1.1;
}
.kpi-item:hover .kpi-value {
  color: #79C0FF;
}
.kpi-delta {
  font-size: 12px;
  font-weight: 600;
}
.kpi-delta.positive { color: #F85149; }
.kpi-delta.negative { color: #3FB950; }
.kpi-ci {
  font-size: 8px;
  color: #484F58;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
  letter-spacing: 0.1px;
}
.kpi-download {
  position: absolute;
  right: 12px;
  top: -32px;
}
.kpi-footer a.shiny-download-link.kpi-download-btn,
.kpi-download-btn,
.kpi-download-btn.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  background: rgba(33, 38, 45, 0.8) !important;
  border: 1px solid #30363D !important;
  color: #8B949E !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.kpi-download-btn:hover,
.kpi-footer a.shiny-download-link.kpi-download-btn:not(.disabled):hover {
  color: #58A6FF !important;
  border-color: #58A6FF !important;
  background: rgba(88, 166, 255, 0.08) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(48, 54, 61, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(72, 79, 88, 0.7); }
::-webkit-scrollbar-corner { background: transparent; }

/* Loading Spinner Override */
.shiny-spinner-output-container .load-container {
  background: transparent !important;
}

/* Tab content fill + smooth transitions */
.tab-content, .tab-pane {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.tab-pane {
  animation: tabFadeIn 0.3s ease;
}

/* ============================================================
   MOBILE/TABLET CRITICAL FIX: tab-content + page-fill height
   ------------------------------------------------------------
   On desktop the navset_pill_list renders sidebar (col-sm-2) +
   content (col-sm-10) side by side in a flex row, both inheriting
   100vh from .bslib-page-fill — so .tab-content { height: 100% }
   resolves correctly.

   On mobile (max-width: 1024px) the row switches to
   flex-direction: column and both columns become full-width and
   stack vertically. The content column then has NO defined height
   from its parent — height: 100% on .tab-content / .tab-pane
   collapses to 0px and every tab appears as an empty black area.
   This is the symptom seen on iOS Safari (iPhone 14, iPad, Safari
   on small viewports): header + tab pills visible, everything
   below is a blank container.

   Fix: on mobile, tab-content/tab-pane must size to their content
   (height: auto) with a sensible minimum so cards fill the
   viewport. Page-fill loses its 100vh hard cap so the page can
   actually scroll past one screen.
   ============================================================ */
@media (max-width: 1024px) {
  html, body {
    height: auto !important;
    min-height: 100vh;
  }
  .bslib-page-fill,
  .bslib-page-fill > .container-fluid,
  .bslib-page-fill > .row,
  .bslib-page-fill > .container-fluid > .row {
    height: auto !important;
    min-height: auto !important;
  }
  .bslib-page-fill {
    min-height: 100vh !important;
  }
  .tab-content,
  .tab-pane,
  .bslib-page-fill .tab-content,
  .bslib-page-fill .tab-pane {
    height: auto !important;
    min-height: 0;
  }
  .tab-content {
    min-height: 60vh;
  }
  .tab-pane.active {
    display: block !important;
  }
  /* Cards inside tabs need a sensible minimum so they are visibly
     present on mobile even when their inner content has not yet
     calculated a height (e.g. globe still initialising). */
  .bslib-page-fill .tab-pane.active .bslib-card,
  .bslib-page-fill .tab-pane.active .card {
    min-height: 380px;
  }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Safari / WebKit: Font Awesome inside native <button> (map toggles, KPI download, …) */
button i.fas,
button i.fa-solid,
button.map-toggle-btn i[class*="fa-"],
button.kpi-download-btn i[class*="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}
button i.fab,
button i.fa-brands {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Globe View: Palantir-Grade Enhancements
   ============================================================ */

/* Glow effect for focused arcs */
.glow-arc {
  filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.6));
}

/* Pulse marker animation */
.pulse-marker {
  position: relative;
}
.pulse-marker::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #58A6FF;
  transform: translate(-50%, -50%);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { width: 10px; height: 10px; opacity: 1; }
  100% { width: 40px; height: 40px; opacity: 0; }
}

/* --- Country Info Panel (slide-over) --- */
.country-info-panel {
  position: absolute;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100%;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(48, 54, 61, 0.3);
  z-index: 500;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}
.country-info-panel.panel-open {
  right: 0 !important;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(28, 33, 40, 0.95) 0%, rgba(22, 27, 34, 0.9) 100%);
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
  flex-shrink: 0;
}
.panel-title {
  font-size: 17px;
  font-weight: 700;
  color: #E6EDF3;
  letter-spacing: 0.3px;
}
.panel-subtitle {
  font-size: 11px;
  color: #6E7681;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
.panel-close-btn {
  background: rgba(33, 38, 45, 0.6);
  border: 1px solid rgba(48, 54, 61, 0.5);
  color: #6E7681;
  font-size: 18px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.panel-close-btn:hover {
  background: rgba(248, 81, 73, 0.1);
  color: #F85149;
  border-color: rgba(248, 81, 73, 0.3);
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Panel Sections */
.panel-section {
  border-bottom: 1px solid rgba(33, 38, 45, 0.8);
}
.section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  color: #8B949E;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  user-select: none;
  transition: background 0.15s ease;
  transition: background 0.15s;
}
.section-toggle:hover {
  background: #1C2128;
  color: #E6EDF3;
}
.section-toggle .fa, .section-toggle .fas, .section-toggle .far {
  width: 16px;
  text-align: center;
  color: #58A6FF;
  font-size: 11px;
}
.section-title {
  flex: 1;
  font-weight: 600;
}
.toggle-indicator {
  font-size: 9px;
  transition: transform 0.2s;
}
.section-content {
  padding: 4px 16px 10px 16px;
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
  opacity: 1;
}
.section-collapsed .section-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.section-collapsed .toggle-indicator {
  transform: rotate(0deg);
}

/* Info Rows */
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
  gap: 6px;
}
.info-label {
  color: #8B949E;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-label[title] {
  cursor: help;
  border-bottom: 1px dotted #484F58;
}
.info-sparkline {
  flex: 0 0 70px;
}
.sparkline-svg {
  display: block;
}
.info-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  text-align: right;
  min-width: 60px;
  flex-shrink: 0;
}

/* Info Bar (progress) */
.info-bar-track {
  flex: 1;
  height: 4px;
  background: #21262D;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 8px;
}
.info-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Correlation Bars */
.corr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
}
.corr-label {
  color: #8B949E;
  width: 120px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.corr-bar-track {
  flex: 1;
  height: 6px;
  background: #21262D;
  border-radius: 3px;
  overflow: hidden;
}
.corr-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.corr-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  min-width: 40px;
  text-align: right;
}

/* Badges */
.badge-trapped {
  background: rgba(248, 81, 73, 0.2);
  color: #F85149;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.badge-not-trapped {
  background: rgba(63, 185, 80, 0.2);
  color: #3FB950;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* --- Map Legend (gradient) --- */
.map-legend {
  position: absolute;
  bottom: 16px;
  left: 12px;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 10px 14px 8px;
  border-radius: 10px;
  border: 1px solid rgba(48, 54, 61, 0.4);
  z-index: 460;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.legend-title {
  font-size: 9px;
  color: #6E7681;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  font-weight: 600;
}
.legend-gradient {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #8B0000, #C41E3A, #D44A4A, #2D333B, #4A8FBF, #58A6FF, #79C0FF);
  transition: background 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.legend-title, .legend-labels span {
  transition: opacity 0.3s ease;
}
.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #484F58;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* --- Map Status Bar --- */
.map-status-bar {
  position: absolute;
  bottom: 16px;
  right: 12px;
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(48, 54, 61, 0.3);
  font-size: 10px;
  color: #484F58;
  z-index: 460;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #30363D;
  display: inline-block;
}
.status-dot.live {
  background: #3FB950;
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
  animation: status-pulse 2.5s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(63, 185, 80, 0.3); }
  50% { opacity: 0.7; box-shadow: 0 0 8px rgba(63, 185, 80, 0.15); }
}
.status-item {
  font-family: 'JetBrains Mono', monospace;
  color: #6E7681;
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* --- Map Controls Bar (floating top-left) --- */
.map-controls-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 470;
  display: flex;
  gap: 6px;
  align-items: center;
}
.map-view-toggle {
  display: flex;
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid rgba(48, 54, 61, 0.5);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.map-toggle-btn {
  background: transparent;
  border: none;
  color: #6E7681;
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: fit-content;
  font-weight: 500;
  letter-spacing: 0.2px;
  position: relative;
}
.map-toggle-btn:hover {
  color: #C9D1D9;
  background: rgba(88, 166, 255, 0.06);
}
.map-toggle-btn.active {
  background: rgba(88, 166, 255, 0.15);
  color: #79C0FF;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 #58A6FF;
}
.choropleth-var-box {
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid rgba(48, 54, 61, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2px 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.choropleth-var-box .form-group {
  margin-bottom: 0;
}
.choropleth-var-box select,
.choropleth-var-box .form-control {
  background: #21262D !important;
  border: 1px solid #30363D !important;
  color: #E6EDF3 !important;
  font-size: 12px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.choropleth-var-box select:focus {
  border-color: #58A6FF !important;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.3) !important;
  outline: none;
}
.choropleth-var-box select option {
  background: #21262D;
  color: #E6EDF3;
}
.world-view-btn {
  background: rgba(13, 17, 23, 0.8) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #6E7681;
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.world-view-btn:hover {
  color: #C9D1D9;
  background: rgba(88, 166, 255, 0.06) !important;
  border-color: rgba(88, 166, 255, 0.3) !important;
}
.country-search-box {
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid rgba(48, 54, 61, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2px 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.country-search-box .form-group {
  margin-bottom: 0;
}
.country-search-box .selectize-input {
  background: #21262D !important;
  border: 1px solid #30363D !important;
  color: #E6EDF3 !important;
  font-size: 12px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}
.country-search-box .selectize-input.focus {
  border-color: #58A6FF !important;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.3) !important;
}
.country-search-box .selectize-dropdown {
  background: #21262D !important;
  border: 1px solid #30363D !important;
  border-radius: 6px !important;
  margin-top: 2px;
}
.country-search-box .selectize-dropdown .option {
  color: #E6EDF3 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}
.country-search-box .selectize-dropdown .option:hover,
.country-search-box .selectize-dropdown .option.active {
  background: #30363D !important;
}

/* --- Leaflet Flat Map Dark Theme --- */
.leaflet-interactive { transition: fill 0.5s ease, fill-opacity 0.3s ease; }
.leaflet-container {
  background: #0D1117 !important;
}
.leaflet-control-zoom {
  border: none !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
.leaflet-control-zoom a {
  background: rgba(13, 17, 23, 0.85) !important;
  color: #6E7681 !important;
  border-color: rgba(48, 54, 61, 0.3) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 14px !important;
  transition: all 0.15s ease;
}
.leaflet-control-zoom a:hover {
  background: rgba(33, 38, 45, 0.9) !important;
  color: #C9D1D9 !important;
}

/* --- Flat Map: Animated Arc Dots ---
   The flow-duration is decoupled from the fade-in via a CSS custom property
   so the JS can drive only the flow speed without slowing the fade-in. */
.flat-arc-animated {
  stroke-linecap: round !important;
  --dash-offset: -18px;
  --flow-duration: 800ms;
  animation: flat-arc-flow var(--flow-duration, 800ms) linear infinite;
  will-change: stroke-dashoffset;
}
@keyframes flat-arc-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: var(--dash-offset, -18px); }
}
@keyframes flat-arc-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.flat-arc-fadein {
  animation:
    flat-arc-fadein 400ms ease forwards,
    flat-arc-flow var(--flow-duration, 800ms) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .flat-arc-animated, .flat-arc-fadein { animation: none !important; }
}

/* --- Globe.gl Styles --- */

/* Globe container */
[id$="-globe_container"] canvas {
  border-radius: 8px;
}

/* Tooltip on hover (polygons + arcs) */
.globe-tooltip {
  background: rgba(13, 17, 23, 0.92);
  color: #E6EDF3;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(48, 54, 61, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* globe.gl renders tooltips inside a .scene-tooltip container */
.scene-tooltip {
  z-index: 1000 !important;
}

/* Arc click popup */
.globe-arc-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(13, 17, 23, 0.95);
  color: #E6EDF3;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid rgba(48, 54, 61, 0.4);
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  z-index: 600;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(88, 166, 255, 0.05);
  animation: popupFadeIn 0.2s ease-out;
}
@keyframes popupFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.globe-arc-popup .popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  cursor: pointer;
  color: #8B949E;
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s;
}
.globe-arc-popup .popup-close:hover {
  color: #E6EDF3;
}
.globe-arc-popup .popup-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  padding-right: 20px;
}
.globe-arc-popup .popup-value {
  font-size: 13px;
  color: #8B949E;
}
.globe-arc-popup .popup-value span {
  font-family: 'JetBrains Mono', monospace;
}

/* Globe.gl label override (scene-tooltip) */
.scene-tooltip {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* === Info Modal Styles (Dark Theme) === */
.modal.fade .modal-dialog {
  transform: scale(0.95) translateY(20px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}
.modal-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content {
  background: #161B22 !important;
  border: 1px solid #30363D !important;
  color: #E6EDF3 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
}
.modal-header {
  background: #1C2128 !important;
  border-bottom: 1px solid #30363D !important;
  border-radius: 12px 12px 0 0 !important;
  position: relative;
}
.modal-header .modal-title {
  color: #E6EDF3 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-header .btn-close, .modal-header .close {
  color: #8B949E !important;
  opacity: 0.8;
}
.modal-footer {
  background: #1C2128 !important;
  border-top: 1px solid #30363D !important;
  border-radius: 0 0 12px 12px !important;
}
.modal-footer .btn {
  background: #21262D !important;
  border: 1px solid #30363D !important;
  color: #E6EDF3 !important;
  border-radius: 6px !important;
  transition: all 0.2s;
}
.modal-footer .btn:hover {
  border-color: #58A6FF !important;
  color: #58A6FF !important;
}
.modal-body {
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Header info buttons */
.header-info-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-right: 8px;
}
.header-icon-btn {
  color: #8B949E !important;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  text-decoration: none !important;
}
.header-icon-btn:hover {
  color: #E6EDF3 !important;
  background: #21262D;
}

/* Inline SVG in header (Safari-safe; no webfont inside <button>) */
.header-icon-svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  vertical-align: middle;
}

/* Glossary Cards */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}
.glossary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  border-left: 3px solid #58a6ff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.glossary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.glossary-term {
  font-weight: 700;
  color: #58a6ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.glossary-def {
  color: #8b949e;
  font-size: 13px;
  line-height: 1.5;
}

/* Data Sources Table — 5 clean columns (inside rp-table-wrapper) */
.ds-row {
  display: grid;
  grid-template-columns: 22px 95px 1fr 1fr 80px;
  gap: 4px 10px;
  padding: 7px 2px;
  border-bottom: 1px solid #21262D;
  font-size: 11px;
  align-items: center;
  line-height: 1.35;
}
.ds-row:hover { background: rgba(88, 166, 255, 0.04); }
.ds-row.ds-header {
  font-weight: 700;
  color: #8B949E;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
  border-bottom: 2px solid #30363D;
  position: sticky;
  top: 0;
  background: #161B22;
  z-index: 1;
  padding: 6px 2px;
}
.ds-row.ds-header:hover { background: #161B22; }
.ds-cell { color: #E6EDF3; }
.ds-num { color: #484F58; text-align: center; font-size: 10px; }
.ds-pillar { color: #58A6FF; font-weight: 600; font-size: 10px; }
.ds-name { color: #E6EDF3; font-size: 11px; }
.ds-name a { color: #58A6FF !important; text-decoration: none !important; }
.ds-name a:hover { text-decoration: underline !important; color: #79C0FF !important; }
.ds-vars { color: #8B949E; font-family: 'JetBrains Mono', monospace; font-size: 10px; word-break: break-word; }
.ds-period { color: #E6EDF3; white-space: nowrap; font-size: 10px; }
.ds-space { color: #8B949E; font-size: 10px; }
.ds-note { border-top: 1px solid #30363D; padding-top: 12px; }

/* Info Overlay Panel (Glossary, Data Sources, Methodology, Downloads) */
.info-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: rgba(13, 17, 23, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.info-overlay.overlay-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Safari/WebKit: stop background scroll + paint glitches while overlay is open */
html.mse-info-overlay-open,
body.mse-info-overlay-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
}
.info-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid #30363D;
  background: #161B22;
  flex-shrink: 0;
}
.info-overlay-header h3 {
  color: #E6EDF3;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.info-overlay-close {
  background: transparent;
  border: 1px solid #30363D;
  color: #8B949E;
  font-size: 24px;
  width: 36px; height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.info-overlay-close:hover {
  color: #E6EDF3;
  border-color: #58A6FF;
  background: rgba(88, 166, 255, 0.1);
}
.info-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: #30363D transparent;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.info-overlay-body::-webkit-scrollbar { width: 6px; }
.info-overlay-body::-webkit-scrollbar-thumb { background: #30363D; border-radius: 3px; }
/* Backdrop click area behind content */
.info-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Header icon buttons (native title tooltip only — Safari glitches with ::after on <button>) */
.header-icon-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #8B949E !important;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.header-icon-btn:hover {
  color: #58A6FF !important;
  border-color: #30363D !important;
  background: rgba(88, 166, 255, 0.08) !important;
}
.header-icon-btn.panel-active {
  color: #58A6FF !important;
  border-color: #58A6FF !important;
  background: rgba(88, 166, 255, 0.12) !important;
}

/* Download rows in overlay panel */
.dl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #21262D;
  transition: background 0.15s;
}
.dl-row:hover { background: rgba(88, 166, 255, 0.05); }
.dl-info { flex: 1; }
.dl-info strong { color: #E6EDF3; font-size: 13px; display: block; }
.dl-desc { color: #8B949E; font-size: 11px; }
/* Downloads overlay: clear pill buttons (no tiny icon-only affordance) */
.info-overlay-body a.shiny-download-link.dl-btn,
.info-overlay-body a.btn.dl-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #E6EDF3 !important;
  background: linear-gradient(180deg, #2D333B 0%, #21262D 100%) !important;
  border: 1px solid #484F58 !important;
  border-radius: 8px !important;
  flex-shrink: 0;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.info-overlay-body a.shiny-download-link.dl-btn:not(.disabled):hover,
.info-overlay-body a.btn.dl-btn:not(.disabled):hover {
  color: #58A6FF !important;
  border-color: #58A6FF !important;
  background: #21262D !important;
}
.info-overlay-body a.shiny-download-link.dl-btn.disabled,
.info-overlay-body a.btn.dl-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
}

.dl-btn {
  background: #21262D !important; border: 1px solid #30363D !important;
  color: #8B949E !important; padding: 4px 10px !important; font-size: 12px !important;
  border-radius: 4px !important; flex-shrink: 0;
}
.dl-btn:hover { color: #58A6FF !important; border-color: #58A6FF !important; }

/* Scenario cockpit chord download */
a.shiny-download-link.scenario-dl-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #E6EDF3 !important;
  background: #21262D !important;
  border: 1px solid #484F58 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
a.shiny-download-link.scenario-dl-btn:not(.disabled):hover {
  border-color: #58A6FF !important;
  color: #58A6FF !important;
}

/* Info tab content styling (used inside overlay) */
.info-tab-content {
  padding: 0 !important;
}
.info-tab-content h3 {
  color: #E6EDF3;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #30363D;
}

@media (max-width: 900px) {
  .ds-row {
    grid-template-columns: 22px 1fr;
    gap: 2px;
  }
  .ds-pillar, .ds-vars, .ds-period { display: none; }
}

/* Methods Pipeline — vertical timeline (architecture box style) */
.method-pipeline {
  margin-bottom: 40px;
  padding: 32px 24px 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  border: 1px solid #30363D;
  border-radius: 6px;
}
.pl-timeline {
  position: relative;
  padding-left: 36px;
}
.pl-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, #58A6FF 0%, #1F6FEB 100%);
  border-radius: 1px;
}
.pl-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
}
.pl-step:last-child { margin-bottom: 4px; }
.pl-num {
  position: absolute;
  left: -36px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1F6FEB;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 0 3px #161B22;
}
.pl-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.pl-icon {
  color: #58A6FF;
  font-size: 14px;
  flex-shrink: 0;
}
.pl-title {
  font-size: 13px;
  font-weight: 600;
  color: #E6EDF3;
  white-space: nowrap;
}
.pl-desc {
  font-size: 11px;
  color: #8B949E;
  line-height: 1.35;
  align-self: center;
}

/* Methods Sections (matches Scenarios Guide details) */
.method-section {
  margin-bottom: 16px;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
  background: #161b22;
}
.method-section-header {
  background: #161b22;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #E6EDF3;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.method-section-header:hover { background: #1c2333; color: #e6edf3; }
.method-toggle {
  font-size: 10px;
  color: #58a6ff;
  transition: transform 0.2s;
}
.method-section-body {
  padding: 20px;
  background: #161b22;
  border-top: 1px solid #30363d;
}
/* Display math block (MathJax typesets the inner \[...\]).
   Styling is container-only; font/color must NOT override MathJax output. */
.method-formula {
  display: block;
  background: #0d1117;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid #30363D;
  border-left: 3px solid #58A6FF;
  color: #E6EDF3;
  margin: 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  line-height: 1.55;
}
.method-formula.math-block { font-size: 14px; }
/* MathJax v2 output spans: keep them aligned with the dashboard palette and
   let them scale with the container, not with JetBrains Mono etc. */
.method-formula .MathJax,
.method-formula .MathJax_Display {
  color: #E6EDF3 !important;
  font-family: 'Latin Modern Math', 'STIX Two Math', 'Cambria Math', serif !important;
}
.method-formula .MathJax_Display { margin: 0 !important; }
/* Inline math inside tables, list items and notes inherits the surrounding
   text color rather than being painted link-blue. */
.method-section .MathJax {
  color: inherit !important;
  font-family: 'Latin Modern Math', 'STIX Two Math', 'Cambria Math', serif !important;
}
.method-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}
.method-table th {
  background: #21262D;
  color: #8B949E;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #30363D;
}
.method-table td {
  padding: 6px 10px;
  color: #E6EDF3;
  border-bottom: 1px solid #21262D;
}
.method-table .method-highlight td {
  background: rgba(88, 166, 255, 0.08);
  font-weight: 600;
}
.method-list {
  margin: 6px 0;
  padding-left: 20px;
  color: #E6EDF3;
  font-size: 12px;
  line-height: 1.7;
}
.method-list code {
  color: #79C0FF;
  font-family: 'JetBrains Mono', monospace;
}
.method-note {
  color: #8B949E;
  font-size: 12px;
  margin: 6px 0;
  font-style: italic;
}

/* --- Corridor Table (reactable in panel) --- */
.country-info-panel .rt-table {
  background: transparent !important;
}
.country-info-panel .rt-thead {
  background: #1C2128 !important;
}
.country-info-panel .rt-th {
  border-bottom: 1px solid #30363D !important;
}
.country-info-panel .rt-td {
  border-bottom: 1px solid #161B22 !important;
}
.country-info-panel .rt-tr:hover .rt-td {
  background: rgba(88, 166, 255, 0.06) !important;
}
.country-info-panel .rt-filter {
  background: #21262D !important;
  color: #E6EDF3 !important;
  border: 1px solid #30363D !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  margin-top: 2px !important;
}
.country-info-panel .rt-search {
  background: #21262D !important;
  color: #E6EDF3 !important;
  border: 1px solid #30363D !important;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
  width: 100%;
  margin-bottom: 6px;
}
.country-info-panel .rt-pagination {
  border-top: 1px solid #21262D !important;
  padding: 4px 0 !important;
}
.country-info-panel .rt-pagination button {
  background: transparent !important;
  color: #8B949E !important;
  border: 1px solid #30363D !important;
  border-radius: 3px !important;
  font-size: 11px !important;
}
.country-info-panel .rt-pagination button:hover {
  background: #21262D !important;
  color: #E6EDF3 !important;
}
.country-info-panel .rt-pagination button[disabled] {
  opacity: 0.3 !important;
}
.country-info-panel .rt-page-info {
  color: #8B949E !important;
  font-size: 11px !important;
}
.country-info-panel .rt-page-size-select {
  background: #21262D !important;
  color: #E6EDF3 !important;
  border: 1px solid #30363D !important;
  border-radius: 3px !important;
  font-size: 11px !important;
}
.country-info-panel .rt-no-data {
  color: #484F58 !important;
  font-size: 12px !important;
}

/* --- Locked Scenarios --- */

/* Locked KPI overlay in Scenario Cockpit */
.locked-kpi-wrapper {
  position: relative;
}
.locked-kpi-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #484F58;
  font-size: 13px;
  gap: 4px;
  z-index: 2;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.locked-kpi-overlay .fa, .locked-kpi-overlay .fas {
  font-size: 18px;
  margin-bottom: 2px;
}

/* Compact radio buttons in card headers */
.card-header .radio-inline,
.card-header .shiny-input-radiogroup {
  margin: 0;
  padding: 0;
}
.card-header .radio-inline + .radio-inline {
  margin-left: 8px;
}
.card-header .form-group {
  margin-bottom: 0;
}

/* Value-Box readability on dark theme */
.bslib-value-box .value-box-title,
.bslib-value-box .value-box-value {
  color: #E6EDF3 !important;
}
.bslib-value-box .value-box-area p {
  color: #C9D1D9 !important;
}

/* Footer */
.dashboard-footer {
  text-align: center;
  padding: 12px 0;
  margin-top: 24px;
  color: #484F58;
  font-size: 12px;
  letter-spacing: 0.3px;
  border-top: 1px solid #30363D;
}
.footer-copyright {
  margin-bottom: 4px;
}
.footer-disclaimer {
  font-size: 11px;
  color: #6E7681;
}
.footer-disclaimer .footer-sep {
  color: #30363D;
}
/* Domestic migration warning */
.domestic-warning {
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.4);
  border-radius: 6px;
  padding: 10px 16px;
  color: #D29922;
  font-size: 13px;
  margin-bottom: 12px;
  text-align: center;
}

.footer-license {
  color: #6E7681;
  font-size: 10px;
  font-weight: 500;
}
.footer-version {
  color: #484F58;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.footer-disclaimer .footer-link,
.footer-disclaimer a.action-button {
  color: #6E7681 !important;
  text-decoration: underline;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 11px !important;
  cursor: pointer;
}
.footer-disclaimer .footer-link:hover,
.footer-disclaimer a.action-button:hover {
  color: #58A6FF !important;
}

/* ============================================================
   Professional Polish — v0.2
   ============================================================ */

/* Header Select Groups: labeled dropdowns */
.header-select-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  transition: opacity 0.25s ease, max-width 0.35s ease, margin 0.35s ease, padding 0.35s ease;
  opacity: 1;
  max-width: 220px;
  /* NOTE: do NOT set overflow:hidden here in the visible state — it clips the
     selectize dropdown popup so the SSP / Scenario menus look "broken" (they
     open in the DOM but the option list is invisible). overflow:hidden is
     applied only on .is-hidden below, where it is needed for the collapse
     animation. */
}

/* Contextual hide: Shiny toggles .is-hidden via toggleHeaderFilters message.
   Uses max-width collapse (not display:none) for smooth transitions and to
   keep the header layout stable when filters appear/disappear on tab change. */
.header-select-group.is-hidden {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
/* Language selector hidden until a second locale ships.
   Input stays in DOM (so input$global_lang keeps firing) — only UI is hidden.
   To re-enable: remove `lang-hidden` from the class list in app.R. */
.header-select-group.lang-hidden {
  display: none !important;
}
.header-select-label {
  /* Bumped from 9px → 10.5px and lightened the colour token. The 9 px
     baseline was effectively unreadable on a normal-DPR desktop monitor,
     and the ⓘ tooltip sat almost on top of the label text. */
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8B949E;
  font-weight: 600;
  padding-left: 2px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Header icon buttons: hover + tooltip refinement */
.header-icon-btn {
  transition: all 0.2s ease;
  position: relative;
}
.header-icon-btn:hover {
  background: rgba(88, 166, 255, 0.12) !important;
  border-color: rgba(88, 166, 255, 0.3) !important;
  transform: translateY(-1px);
}
.header-icon-btn:active {
  transform: translateY(0);
}

/* Sidebar: refined nav with subtle left accent */
.nav-pills .nav-link {
  padding: 10px 16px !important;
  margin-bottom: 1px;
  font-size: 13px !important;
  font-weight: 500;
  color: #8B949E !important;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0 !important;
  letter-spacing: 0.15px;
  transition: all 0.15s ease;
}
.nav-pills .nav-link:hover {
  color: #C9D1D9 !important;
  background: rgba(88, 166, 255, 0.04) !important;
}
.nav-pills .nav-link.active {
  border-left: 2px solid #58A6FF !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(88, 166, 255, 0.08) !important;
  color: #E6EDF3 !important;
  font-weight: 600;
}
.nav-pills .nav-link i {
  width: 18px;
  text-align: center;
  margin-right: 8px;
  opacity: 0.6;
  font-size: 12px;
}
.nav-pills .nav-link.active i {
  opacity: 1;
  color: #58A6FF;
}

/* Cards: refined depth and glass */
.card, .bslib-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(48, 54, 61, 0.35) !important;
}
.card-header {
  padding: 10px 16px !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: #8B949E !important;
  font-weight: 600 !important;
  border-bottom-color: rgba(48, 54, 61, 0.3) !important;
}

/* KPI Value Boxes: subtle hover lift */
.bslib-value-box {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bslib-value-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Plotly chart titles: sentence case instead of ALL CAPS */
.js-plotly-plot .gtitle {
  text-transform: none !important;
}

/* KPI polish overrides */
.kpi-label {
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 0.8px;
}

/* Footer: refined professional look */
.dashboard-footer {
  padding: 14px 20px !important;
  background: #0D1117;
  border-top: 1px solid #21262D !important;
}
.footer-copyright {
  font-size: 12px;
  color: #6E7681;
  font-weight: 500;
}
.footer-version {
  font-size: 10px;
  color: #484F58;
  background: rgba(88, 166, 255, 0.08);
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid rgba(88, 166, 255, 0.15);
  font-family: 'JetBrains Mono', monospace;
}

/* Reactable tables: refined */
.rt-table {
  font-size: 12px !important;
  border-collapse: separate;
  border-spacing: 0;
}
.rt-thead {
  background: rgba(28, 33, 40, 0.6) !important;
}
.rt-th {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 9px !important;
  color: #6E7681 !important;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4) !important;
  padding: 8px 10px !important;
}
.rt-td {
  color: #C9D1D9 !important;
  border-bottom: 1px solid rgba(33, 38, 45, 0.6) !important;
  padding: 6px 10px !important;
  transition: background 0.1s ease;
}
.rt-tr:hover .rt-td {
  background: rgba(88, 166, 255, 0.04) !important;
}
.rt-pagination {
  border-top: 1px solid rgba(48, 54, 61, 0.3) !important;
  padding: 6px 0 !important;
}
.rt-pagination button {
  background: transparent !important;
  color: #6E7681 !important;
  border: 1px solid rgba(48, 54, 61, 0.4) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  transition: all 0.15s ease;
}
.rt-pagination button:hover {
  background: rgba(88, 166, 255, 0.06) !important;
  color: #C9D1D9 !important;
}
.rt-page-info {
  color: #484F58 !important;
  font-size: 10px !important;
}

/* bslib full-screen button: refined glass look */
.bslib-full-screen-enter {
  background: rgba(13, 17, 23, 0.7) !important;
  border: 1px solid rgba(48, 54, 61, 0.4) !important;
  color: #484F58 !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
}
.card:hover .bslib-full-screen-enter,
.bslib-card:hover .bslib-full-screen-enter {
  opacity: 0.7 !important;
}
.bslib-full-screen-enter:hover {
  opacity: 1 !important;
  color: #58A6FF !important;
  border-color: rgba(88, 166, 255, 0.3) !important;
  background: rgba(88, 166, 255, 0.08) !important;
}

/* Modal/Dialog: refined borders */
.modal-content {
  background: rgba(22, 27, 34, 0.98) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(48, 54, 61, 0.3) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.modal-header {
  border-bottom-color: rgba(48, 54, 61, 0.4) !important;
}
.modal-footer {
  border-top-color: rgba(48, 54, 61, 0.4) !important;
}

/* Smooth focus states for accessibility */
*:focus-visible {
  outline: 2px solid #58A6FF;
  outline-offset: 2px;
}

/* Globe controls bar: glass consistency handled in base rule */

/* === Shiny Disconnected Overlay: hide & auto-reconnect === */
#shiny-disconnected-overlay {
  display: none !important;
}
.shiny-output-error {
  color: #F85149 !important;
  font-size: 12px;
}

/* ============================================================
   DESKTOP BASELINE: Header select sizing + touch targets
   ============================================================ */
.header-select-group {
  min-width: 140px;
  max-width: 260px;
  flex: 1 1 auto;
}

/* Smooth transitions for responsive layout changes */
.dashboard-header,
.header-controls,
.map-controls-bar,
.kpi-footer,
.country-info-panel {
  transition: padding 0.2s ease, gap 0.2s ease;
}

/* Ensure touch-friendly targets on all devices */
@media (hover: none) and (pointer: coarse) {
  .map-toggle-btn {
    min-height: 36px;
    min-width: 36px;
  }
  .nav-pills .nav-link {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .selectize-input {
    min-height: 36px;
  }
  .kpi-download-btn, .dl-btn {
    min-height: 44px;
  }
}

/* ============================================================
   RESPONSIVE: Tablets (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .dashboard-header {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .header-left { gap: 8px; }
  .header-title {
    font-size: 13px;
    letter-spacing: 0.8px;
  }
  .header-subtitle { display: none; }
  .header-controls {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .header-select-group {
    min-width: 120px;
    max-width: none;
    flex: 1 1 0;
  }
  .header-controls .selectize-input {
    min-width: 0;
    font-size: 12px;
  }

  /* Sidebar → horizontal scrollable tabs */
  .well .nav-pills,
  .col-sm-2 .nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 2px;
    padding: 4px 4px 6px;
    max-height: none;
  }
  .well .nav-pills .nav-link,
  .col-sm-2 .nav-pills .nav-link {
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 10px;
  }
  .nav-section-header { display: none !important; }
  .well, .col-sm-2.well {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0;
    margin-bottom: 0;
  }

  /* Sidebar column stacks vertically */
  .col-sm-2, .col-md-2,
  .col-sm-10, .col-md-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
  }
  .row:has(> .col-sm-2) {
    display: flex;
    flex-direction: column;
  }

  /* Globe height reduced */
  .card-body > div[style*="height: 600px"] {
    height: 450px !important;
  }

  /* KPI footer: 3 columns */
  .kpi-footer .row { flex-wrap: wrap !important; }
  .kpi-footer .row > .col,
  .kpi-footer .row > [class*="col-"],
  .kpi-footer .row > [class*="col "] {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    min-width: 0 !important;
    margin-bottom: 6px;
  }
  .kpi-value { font-size: 14px; }
  .kpi-label { font-size: 8px; line-height: 1.15; }
  .bslib-value-box .value-box-value { font-size: 20px; }

  /* Country info panel narrower */
  .country-info-panel { width: 300px; }

  /* Map controls: wrap, search moves to second row */
  .map-controls-bar {
    flex-wrap: wrap;
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  .country-search-box {
    flex: 1 1 100%;
    order: 10;
  }
  .country-search-box .selectize-input {
    font-size: 11px;
    min-height: 28px;
  }
  .choropleth-var-box {
    flex: 0 1 auto;
    max-width: 160px;
  }
  .choropleth-var-box select {
    font-size: 11px;
    padding: 3px 6px;
  }

  /* Map legend: collapsible on mobile so it doesn't cover the map.
     Default = small 36x36 pill with an info icon. Tap to expand. */
  .map-legend {
    max-width: 38px;
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.18s ease,
                background 0.2s ease;
    background: rgba(13, 17, 23, 0.92);
    border-color: rgba(88, 166, 255, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
                0 0 0 2px rgba(88, 166, 255, 0.12);
    -webkit-tap-highlight-color: transparent;
  }
  .map-legend > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .map-legend::before {
    content: "i";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #58A6FF;
    pointer-events: none;
    line-height: 1;
    transition: opacity 0.18s ease;
  }
  .map-legend.expanded {
    max-width: min(82vw, 240px);
    width: auto;
    height: auto;
    padding: 10px 14px 8px !important;
    cursor: default;
    background: rgba(13, 17, 23, 0.95);
  }
  .map-legend.expanded > * {
    opacity: 1;
    pointer-events: auto;
  }
  .map-legend.expanded::before {
    opacity: 0;
  }
  .map-legend .legend-title { font-size: 9px; }
  .map-legend .legend-labels { font-size: 9px; }
  /* Hide secondary helper text on mobile to keep expanded legend short */
  .map-legend [id*="legend_particles"],
  .map-legend [id*="legend_hint"] {
    display: none !important;
  }

  /* Status bar: shrink so it does not stack against legend */
  .map-status-bar {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Resource pages */
  .resource-page { padding: 28px 20px 36px; }
  .hero-stats { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .hero-stat { flex: 0 1 auto; min-width: 140px; }
  .rp-card-grid { grid-template-columns: repeat(2, 1fr); }

  /* Analysis modules: charts keep reasonable height */
  .plotly.html-widget { min-height: 200px; }

  /* Corridor origin/dest selects: responsive */
  .corridor-header-selects {
    flex-wrap: wrap;
    gap: 8px;
  }
  .corridor-header-selects .form-group { width: 45%; }

  /* bslib layout_columns: reduce gap on tablet */
  .bslib-grid { gap: 12px !important; }
}

/* ============================================================
   RESPONSIVE: Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Header: full-width stacking */
  .dashboard-header { padding: 6px 10px; }
  .header-left { gap: 6px; }
  .header-logo { font-size: 20px; }
  .header-title { font-size: 11px; letter-spacing: 0.5px; }
  .header-controls {
    gap: 4px;
    width: 100%;
  }
  .header-controls .form-group { margin-bottom: 0; }
  .header-select-group { min-width: 0; flex: 1 1 0; }
  .header-select-label { font-size: 8px; }
  .header-info-buttons { gap: 4px; }
  .header-icon-btn {
    font-size: 13px !important;
    padding: 3px 5px !important;
  }
  .header-info-icon { display: none; }

  /* Nav pills: scrollable, compact, no icons */
  .nav-pills .nav-link {
    font-size: 10px;
    padding: 5px 8px;
  }
  .nav-pills .nav-link .fa,
  .nav-pills .nav-link .fas,
  .nav-pills .nav-link .far {
    display: none;
  }

  /* Globe: smaller */
  .card-body > div[style*="height: 600px"] {
    height: 340px !important;
  }

  /* KPI footer: 3 columns, smaller text */
  .kpi-footer { flex-wrap: wrap; padding: 6px 4px; }
  .kpi-footer .row { flex-wrap: wrap !important; }
  .kpi-footer .row > .col,
  .kpi-footer .row > [class*="col-"],
  .kpi-footer .row > [class*="col "] {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    min-width: 0 !important;
    margin-bottom: 4px;
  }
  .kpi-value { font-size: 12px; }
  .kpi-label { font-size: 7px; line-height: 1.1; }
  .kpi-ci { font-size: 6px; }

  /* Cards: full width, less chrome */
  .card, .bslib-card { border-radius: 4px; }
  .card-header {
    font-size: 11px;
    padding: 6px 10px !important;
  }
  .bslib-value-box .value-box-value { font-size: 18px; }

  /* Map controls: very compact */
  .map-controls-bar {
    flex-wrap: wrap;
    gap: 3px !important;
    padding: 4px 6px !important;
  }
  .map-toggle-btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  .country-search-box { display: none; }
  .choropleth-var-box { display: none; }
  .world-view-btn span { display: none; }
  .map-toggle-btn[id*="present"] { display: none; }

  /* Country info panel: full width slide-in overlay */
  .country-info-panel {
    width: 100%;
    max-width: 100%;
    right: -100%;
  }
  .country-info-panel.panel-open { right: 0 !important; }

  /* Timeline: compact */
  .timeline-container { padding: 6px 8px; }
  .timeline-hint { font-size: 9px; }

  /* Footer */
  .dashboard-footer { padding: 6px 0; font-size: 10px; }
  .footer-disclaimer { font-size: 9px; }

  /* Modal dialogs: near full width */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
  .modal-lg { max-width: calc(100% - 16px) !important; }

  /* Pipeline timeline: compact */
  .pl-timeline { padding-left: 32px; }
  .pl-num { left: -32px; width: 26px; height: 26px; font-size: 12px; }
  .pl-title { font-size: 12px; }
  .pl-desc { font-size: 10px; }

  /* Plotly charts: horizontal scroll */
  .js-plotly-plot { overflow-x: auto; }

  /* Splash screen */
  .splash-icon { font-size: 36px; }
  .splash-title { font-size: 16px; }
  .splash-subtitle { font-size: 11px; }

  /* Methods sections */
  .method-section-header { padding: 8px 10px; font-size: 12px; }
  .method-section-body { padding: 8px 10px; }
  .method-formula { font-size: 12px; padding: 10px 12px; overflow-x: auto; text-align: left; }
  .method-formula.math-block { font-size: 12px; }

  /* Resource pages */
  .resource-page { padding: 20px 14px 32px; }
  .resource-page__title { font-size: 1.4rem; }
  .resource-page__description { font-size: 0.9rem; }
  .hero-stats { flex-direction: column; align-items: center; }
  .hero-stat { padding: 12px 20px; width: 100%; max-width: 280px; }
  .rp-card-grid, .glossary-grid { grid-template-columns: 1fr; }
  .rp-impact-box { flex-direction: column; }
  .about-body { padding: 20px 16px; }
  .citation-box { padding: 14px 16px; }
  .access-policy { flex-direction: column; gap: 8px; }
  .dl-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 8px;
  }
  .nav-section-header { font-size: 0.55rem; padding: 0.75rem 0.75rem 0.25rem; }
  .kpi-download-btn, .dl-btn { width: 100%; text-align: center; }

  /* Reactable tables: horizontal scroll */
  .reactable { overflow-x: auto; }
  .rt-table { min-width: 400px; }

  /* Analysis modules: stack columns on mobile */
  .bslib-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Corridor selects: full width on mobile */
  .corridor-header-selects {
    flex-direction: column;
    gap: 6px;
  }
  .corridor-header-selects .form-group { width: 100%; }

  /* Chart heights: prevent too-tall charts on mobile */
  .plotly.html-widget { max-height: 300px; }
  .card-body .leaflet { max-height: 280px; }

  /* Value boxes: single column stack */
  .bslib-value-box { margin-bottom: 6px; }
  .bslib-value-box .value-box-grid { gap: 4px; }

  /* Counterfactual sliders: single column */
  .cf-sliders { grid-template-columns: 1fr !important; }

  /* Scenario guide iframe: adapt height */
  .resource-page--embedded iframe {
    height: calc(100vh - 90px) !important;
  }
}

/* ============================================================
   RESPONSIVE: Small phones (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .dashboard-header { padding: 5px 8px; }
  .header-title { font-size: 9px; letter-spacing: 0; }
  .header-logo { font-size: 18px; }
  .header-controls {
    gap: 3px;
  }
  .header-select-group { min-width: 0; }
  .header-select-label { font-size: 7px; }
  .header-controls .selectize-input {
    min-width: 0;
    font-size: 10px;
    padding: 2px 6px !important;
  }

  /* Globe: minimal height */
  .card-body > div[style*="height: 600px"] {
    height: 260px !important;
  }

  /* KPI: 2 columns on very small screens */
  .kpi-footer .row > .col,
  .kpi-footer .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .kpi-value { font-size: 11px; }
  .kpi-label { font-size: 6.5px; }

  /* Map controls: icons only */
  .map-controls-bar .map-toggle-btn span { display: none; }
  .map-controls-bar .map-toggle-btn .fa,
  .map-controls-bar .map-toggle-btn .fas {
    margin-right: 0;
  }
  .map-toggle-btn[id*="present"] { display: none; }

  /* Nav pills: even more compact */
  .nav-pills .nav-link { font-size: 9px; padding: 4px 6px; }

  /* Timeline slider label: smaller */
  .timeline-container .irs--shiny .irs-grid-text { font-size: 7px !important; }

  /* Resource pages */
  .resource-page__title { font-size: 1.2rem; }
  .hero-stat .stat-number { font-size: 1.3rem; }
  .hero-stat .stat-label { font-size: 0.65rem; }

  /* Analysis: even tighter */
  .bslib-grid { gap: 6px !important; }
  .card-body { padding: 8px !important; }
}

/* ============================================================
   RESPONSIVE: Landscape phones
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .dashboard-header { padding: 4px 10px; }
  .header-logo { font-size: 16px; }
  .header-title { font-size: 10px; }
  .nav-pills .nav-link { padding: 4px 8px; font-size: 9px; }

  .card-body > div[style*="height: 600px"] {
    height: 55vh !important;
  }
  .kpi-footer { padding: 4px; }
  .kpi-footer .row > .col,
  .kpi-footer .row > [class*="col-"] {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
  }
  .timeline-container { padding: 4px 8px; }
}

/* ============================================================
   SIDEBAR SECTION HEADERS (EXPLORE, ANALYZE, RESOURCES, ABOUT)
   ============================================================ */
.nav-section-header {
  font-size: 0.575rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #484F58;
  padding: 16px 16px 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(48, 54, 61, 0.25);
  user-select: none;
}
.nav-pills > li:first-child .nav-section-header {
  border-top: none;
  margin-top: 0;
  padding-top: 8px;
}

/* ============================================================
   RESOURCE PAGES (Methodology, Data Sources, Glossary, Downloads, About, Updates)
   Design system aligned with Scenarios Guide
   ============================================================ */
.resource-page--embedded {
  padding: 0;
  max-width: 100%;
}
.resource-page--embedded iframe {
  display: block;
}
.resource-page {
  padding: 40px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeSlideIn 0.35s ease-out;
  color: #e6edf3;
  line-height: 1.6;
}

/* Hero header — matching Scenarios Guide */
.resource-page__header {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
}
.resource-page__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #e6edf3;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}
.resource-page__description {
  font-size: 1.1rem;
  color: #8b949e;
  max-width: 800px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

/* Key stat badges — hero section */
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.hero-stat {
  display: inline-block;
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid rgba(48, 54, 61, 0.4);
  border-radius: 10px;
  padding: 16px 28px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.hero-stat .stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #d29922;
  display: block;
}
.hero-stat .stat-label {
  font-size: 0.85rem;
  color: #8b949e;
  display: block;
}
.hero-stat.blue .stat-number { color: #58a6ff; }
.hero-stat.green .stat-number { color: #3fb950; }
.hero-stat.red .stat-number { color: #f85149; }
.hero-stat.purple .stat-number { color: #bc8cff; }

/* Section headers */
.rp-section-header {
  margin-top: 48px;
  margin-bottom: 24px;
}
.rp-section-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #e6edf3;
}
.rp-section-header p {
  color: #8b949e;
  font-size: 0.95rem;
}

/* Card base — used across all resource pages */
.rp-card {
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid rgba(48, 54, 61, 0.35);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  border-color: rgba(48, 54, 61, 0.6);
}
.rp-card--static:hover {
  transform: none;
  box-shadow: none;
}
.rp-card--accent-blue { border-top: 3px solid #58a6ff; }
.rp-card--accent-green { border-top: 3px solid #3fb950; }
.rp-card--accent-orange { border-top: 3px solid #d29922; }
.rp-card--accent-red { border-top: 3px solid #f85149; }
.rp-card--accent-purple { border-top: 3px solid #bc8cff; }

/* Card grid */
.rp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

/* Impact / callout boxes */
.rp-impact-box {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.rp-impact-card {
  flex: 1;
  min-width: 280px;
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid rgba(48, 54, 61, 0.35);
  border-radius: 10px;
  padding: 24px;
  border-left: 3px solid #d29922;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rp-impact-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.rp-impact-card h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: #e6edf3;
}
.rp-impact-card .impact-number {
  font-size: 2rem;
  font-weight: 700;
  color: #d29922;
  margin-bottom: 8px;
}
.rp-impact-card p {
  font-size: 0.88rem;
  color: #8b949e;
}
.rp-impact-card.blue { border-left-color: #58a6ff; }
.rp-impact-card.blue .impact-number { color: #58a6ff; }
.rp-impact-card.green { border-left-color: #3fb950; }
.rp-impact-card.green .impact-number { color: #3fb950; }
.rp-impact-card.red { border-left-color: #f85149; }
.rp-impact-card.red .impact-number { color: #f85149; }

/* Styled table wrapper (matching Scenarios Guide data-table-wrapper) */
.rp-table-wrapper {
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid rgba(48, 54, 61, 0.35);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 40px;
  overflow-x: auto;
}
.rp-table-wrapper h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: #e6edf3;
}
.rp-table-wrapper .table-note {
  font-size: 0.8rem;
  color: #6e7681;
  margin-bottom: 16px;
}
.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.rp-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid #30363d;
  color: #8b949e;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rp-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #30363d;
  color: #e6edf3;
}
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tr:hover { background: #1c2333; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table .highlight-cell { font-weight: 700; }

/* Collapsible details — matching Scenarios Guide */
.rp-details {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  margin-bottom: 16px;
}
.rp-details summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: #8b949e;
  user-select: none;
  list-style: none;
}
.rp-details summary::-webkit-details-marker { display: none; }
.rp-details summary::before {
  content: '\25b6';
  display: inline-block;
  margin-right: 10px;
  font-size: 0.7rem;
  color: #58a6ff;
  transition: transform 0.2s;
}
.rp-details[open] summary::before {
  transform: rotate(90deg);
}
.rp-details summary:hover { color: #e6edf3; }
.rp-details[open] summary { border-bottom: 1px solid #30363d; }
.rp-details .details-content {
  padding: 20px;
  font-size: 0.88rem;
  color: #8b949e;
}
.rp-details .details-content p { margin-bottom: 12px; }
.rp-details .details-content code {
  background: #0d1117;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
  color: #58a6ff;
}

/* Architecture box */
.rp-arch-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 32px;
  margin-bottom: 40px;
}
.rp-arch-box h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-align: center;
  color: #e6edf3;
}

/* Download section card groups */
.rp-dl-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.rp-dl-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #30363d;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Page footer */
.rp-page-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #30363d;
  text-align: center;
  font-size: 0.8rem;
  color: #6e7681;
}
.rp-page-footer a {
  color: #58a6ff;
  text-decoration: none;
}
.rp-page-footer a:hover { text-decoration: underline; }

/* Legacy compatibility */
.resource-page h3 {
  color: #e6edf3;
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px 0;
}
.resource-page h4 {
  color: #58a6ff;
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0 8px 0;
}
.resource-page p {
  color: #8b949e;
  line-height: 1.7;
  font-size: 13px;
}
.resource-page a {
  color: #58a6ff;
  text-decoration: none;
}
.resource-page a:hover {
  text-decoration: underline;
}

/* ============================================================
   CITATION BOX (Downloads page)
   ============================================================ */
.citation-box {
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.citation-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-blue);
  font-size: 14px;
  margin-bottom: 12px;
}
.citation-box__content {
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.citation-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
}
.citation-box__license {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ============================================================
   ACCESS POLICY LEGEND (Downloads page)
   ============================================================ */
.access-policy {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border-default);
}
.access-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.access-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.access-dot--free { background: var(--accent-green); }
.access-dot--request { background: var(--accent-orange); }
.access-dot--unavailable { background: var(--accent-red); }

/* Download section titles with access dots */
.dl-section-title {
  color: var(--accent-blue);
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Download rows */
.dl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
  transition: background 0.15s;
}
.dl-row:hover {
  background: rgba(88, 166, 255, 0.04);
}
.dl-row--restricted {
  opacity: 0.85;
}
.dl-info {
  flex: 1;
  min-width: 0;
}
.dl-info strong {
  color: var(--text-primary);
  font-size: 13px;
  display: block;
}
.dl-desc {
  color: var(--text-secondary);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.dl-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--text-muted) !important;
  color: #C9D1D9 !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s;
}
.dl-btn:hover {
  color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  background: var(--bg-secondary) !important;
}
.dl-btn--request {
  background: rgba(210, 153, 34, 0.1) !important;
  border-color: var(--accent-orange) !important;
  color: var(--accent-orange) !important;
}
.dl-btn--request:hover {
  background: rgba(210, 153, 34, 0.2) !important;
}
.dl-request-note {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 14px 12px;
  border-left: 3px solid var(--accent-orange);
  margin-bottom: 12px;
}

/* ============================================================
   UPDATES & CHANGELOG PAGE
   ============================================================ */
.updates-section-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
}
.updates-changelog {
  margin-bottom: 40px;
}
.changelog-entry {
  position: relative;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  border-left: 3px solid var(--accent-blue);
}
.changelog-version {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-blue);
  background: rgba(88, 166, 255, 0.1);
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.changelog-date {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 10px;
}
.changelog-entry ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}
.changelog-entry li {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 2px;
}
.updates-roadmap {
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.updates-roadmap h4 {
  margin-top: 16px;
}
.updates-roadmap ul {
  padding-left: 20px;
}
.updates-roadmap li {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 4px;
}

/* ============================================================
   ABOUT PAGE — Professional Redesign
   ============================================================ */
.about-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
}

/* Profile Card — hero identity block */
.about-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.85) 0%, rgba(13, 17, 23, 0.85) 100%);
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.about-profile-avatar {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #58a6ff 0%, #3fb950 100%);
  box-shadow: 0 6px 20px rgba(88, 166, 255, 0.28);
  user-select: none;
}
.about-profile-info {
  flex: 1 1 auto;
  min-width: 0;
}
.about-profile-name {
  font-size: 1.55rem;
  font-weight: 700;
  color: #e6edf3;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.about-profile-role {
  font-size: 0.95rem;
  color: #58a6ff;
  margin-top: 4px;
  font-weight: 500;
}
.about-profile-affil {
  font-size: 0.82rem;
  color: #8b949e;
  margin-top: 8px;
}
.about-profile-affil-sep {
  margin: 0 8px;
  color: #484f58;
}
.about-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.about-profile-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #79c0ff;
  background: rgba(56, 139, 253, 0.1);
  border: 1px solid rgba(56, 139, 253, 0.28);
  border-radius: 20px;
  text-transform: uppercase;
}

/* Mission pull-quote */
.about-pullquote {
  margin: 32px 0;
  padding: 22px 28px;
  border-left: 3px solid #58a6ff;
  background: rgba(22, 27, 34, 0.45);
  border-radius: 0 12px 12px 0;
}
.about-pullquote-q {
  font-size: 1.15rem;
  font-weight: 600;
  color: #e6edf3;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.about-pullquote-a {
  font-size: 0.92rem;
  color: #8b949e;
  line-height: 1.65;
  margin: 0;
}

/* Numbered sections */
.about-section {
  display: flex;
  gap: 22px;
  margin: 0 0 16px 0;
  padding: 22px 26px;
  background: rgba(22, 27, 34, 0.55);
  border: 1px solid rgba(48, 54, 61, 0.45);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.about-section:hover {
  border-color: rgba(88, 166, 255, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.about-section-num {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: #58a6ff;
  opacity: 0.55;
  letter-spacing: -0.02em;
  min-width: 36px;
  line-height: 1.3;
}
.about-section-body {
  flex: 1 1 auto;
  min-width: 0;
}
.about-section-body h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.about-section-body p {
  color: #8b949e;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}
.about-section-body p + p { margin-top: 10px; }
.about-section-body strong { color: #e6edf3; font-weight: 600; }

/* Sign-off block */
.about-signoff {
  margin-top: 36px;
  padding: 24px 20px;
  text-align: center;
  border-top: 1px solid rgba(48, 54, 61, 0.45);
}
.about-signoff-greet {
  font-size: 0.9rem;
  color: #8b949e;
  font-style: italic;
  margin: 0 0 6px 0;
}
.about-signoff-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}
.about-signoff-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #58a6ff;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 20px;
  transition: background 0.2s ease, color 0.2s ease;
}
.about-signoff-mail:hover {
  background: rgba(88, 166, 255, 0.1);
  color: #79c0ff;
  text-decoration: none;
}

/* Responsive — stack profile card on narrow screens */
@media (max-width: 640px) {
  .about-profile {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
  }
  .about-profile-tags { justify-content: center; }
  .about-profile-affil { text-align: center; }
  .about-section {
    flex-direction: column;
    gap: 6px;
    padding: 20px;
  }
  .about-section-num { opacity: 0.5; }
  .about-pullquote {
    padding: 18px 20px;
    margin: 24px 0;
  }
  .about-pullquote-q { font-size: 1.02rem; }
}

/* ============================================================
   MathJax Dark Theme Overrides
   ============================================================ */
.MathJax, .MathJax_Display, mjx-container {
  color: var(--text-primary) !important;
}
mjx-container[jax="CHTML"] {
  color: var(--text-primary) !important;
}

/* ============================================================
   Bug #15 / Audit M2: Prevent time slider ticks from overlapping
   ============================================================ */
.timeline-container .irs--shiny .irs-grid-text,
.hotspot-slider-wrap .irs--shiny .irs-grid-text {
  font-size: 9px !important;
}
.hotspot-slider-wrap .irs--shiny .irs-grid-text:nth-child(even) {
  /* Only show every second tick label — 17 labels from 2020-2100
     overlap at typical card widths. */
  display: none;
}
.hotspot-slider-wrap .irs--shiny .irs-min,
.hotspot-slider-wrap .irs--shiny .irs-max {
  font-size: 10px !important;
}
@media (max-width: 1200px) {
  .timeline-container .irs--shiny .irs-grid-text:nth-child(odd) {
    display: none;
  }
  .hotspot-slider-wrap .irs--shiny .irs-grid-text:nth-child(4n+1),
  .hotspot-slider-wrap .irs--shiny .irs-grid-text:nth-child(4n+3) {
    display: none;
  }
}

/* ============================================================
   Bug #16: KPI value word-break on small screens
   ============================================================ */
.kpi-value {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Sidebar nav scroll on desktop */
.bslib-page-sidebar .sidebar .nav-pills {
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}

/* Elasticity controls spacing */
.card-body .btn-primary + .plotly {
  margin-top: 8px;
}

/* ============================================================
   Bug #19: Corridor table column headers
   ============================================================ */
.rt-th {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* No horizontal overflow on page body */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ============================================================
   MOBILE: Prevent page scroll hijack on globe drag (H3, H4)
   ============================================================ */
[id$="globe_container"],
[id$="globe_container"] canvas,
[id$="deck_container"],
[id$="deck_container"] canvas {
  touch-action: none;
  overscroll-behavior: contain;
}

/* ============================================================
   GLOBE FALLBACK TOAST
   ------------------------------------------------------------
   Shown when WebGL is unavailable, the context is lost (iOS
   Safari memory cap), or any other init failure forces an
   automatic switch to the 2D Leaflet view.
   ============================================================ */
.globe-fallback-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 99999;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  background: rgba(22, 27, 34, 0.96);
  border: 1px solid #FBBF24;
  border-radius: 10px;
  color: #E6EDF3;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(251, 191, 36, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
  pointer-events: none;
}
.globe-fallback-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.globe-fallback-toast strong {
  color: #FBBF24;
  font-weight: 600;
}
.globe-fallback-toast .reason {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: #8B949E;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   MOBILE/TABLET: iOS form auto-zoom prevention (H2)
   ------------------------------------------------------------
   Any input < 16px triggers Safari's zoom-on-focus on iPhone
   AND iPad. Scoped to touch devices so desktop compact UX
   (12 px) is preserved.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .header-controls .selectize-input,
  .header-controls .selectize-dropdown,
  .header-controls input[type="text"],
  .header-controls input[type="search"],
  .header-controls select,
  .header-controls .form-control,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea,
  .selectize-input input,
  .selectize-input {
    font-size: 16px !important;
  }
}

/* ============================================================
   MOBILE: Tap highlight — replace iOS default grey flash (M4)
   ============================================================ */
* {
  -webkit-tap-highlight-color: rgba(88, 166, 255, 0.18);
}
button, a, [role="button"], .nav-link, .selectize-input,
.map-toggle-btn, .header-icon-btn, .kpi-download-btn, .dl-btn {
  -webkit-tap-highlight-color: rgba(88, 166, 255, 0.22);
}

/* ============================================================
   MOBILE: Touch-target sizing (M1, M2)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .panel-close-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .header-icon-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 10px !important;
    font-size: 15px !important;
  }
  .footer-disclaimer .footer-link {
    padding: 6px 8px;
    display: inline-block;
  }
  /* Nav-pill tap area: ensure comfortable touch even in compact mode */
  .nav-pills .nav-link {
    min-height: 44px;
    padding: 10px 14px !important;
  }
}

/* ============================================================
   MOBILE: Horizontal nav scroll affordance (M3)
   ------------------------------------------------------------
   Fade-out gradient on the right edge cues horizontal scroll.
   ============================================================ */
@media (max-width: 1024px) {
  .well, .col-sm-2.well {
    position: relative;
  }
  .well::after, .col-sm-2.well::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right,
      rgba(13,17,23,0) 0%,
      rgba(13,17,23,0.85) 100%);
    pointer-events: none;
    z-index: 5;
  }
  .well .nav-pills,
  .col-sm-2 .nav-pills {
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
  }
  .well .nav-pills .nav-link,
  .col-sm-2 .nav-pills .nav-link {
    scroll-snap-align: start;
  }
}

/* ============================================================
   MOBILE: Dynamic viewport height for iOS Safari URL-bar (M5)
   ------------------------------------------------------------
   100vh on mobile Safari includes the URL bar; 100dvh adjusts
   as the bar hides/reappears. Progressive enhancement.
   ============================================================ */
@media (max-width: 768px) {
  .resource-page--embedded iframe {
    height: calc(100vh - 90px) !important;
    height: calc(100dvh - 90px) !important;
  }
}

/* ============================================================
   MOBILE: Safe-area insets for iPhone notches (L1)
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  .dashboard-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .dashboard-footer {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .country-info-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   Globe section divider (between globe + matrix)
   ============================================================ */
.globe-section-divider {
  margin: 28px 0 14px 0;
  padding: 0;
  position: relative;
}
.globe-section-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(88,166,255,0) 0%,
    rgba(88,166,255,0.35) 20%,
    rgba(88,166,255,0.35) 80%,
    rgba(88,166,255,0) 100%);
  z-index: 0;
}
.globe-section-divider__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: #0D1117;
  border: 1px solid rgba(88,166,255,0.4);
  border-radius: 20px;
  margin-left: 16px;
}
.globe-section-divider__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(88,166,255,0.15);
  border: 1px solid rgba(88,166,255,0.4);
  border-radius: 50%;
  color: #58A6FF;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
}
.globe-section-divider__title {
  color: #E6EDF3;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.globe-section-divider__hint {
  color: #8B949E;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
}
@media (max-width: 900px) {
  .globe-section-divider__hint { display: none; }
}

/* ============================================================
   Regional Migration Matrix
   ============================================================ */
.region-matrix-card {
  background: rgba(13,17,23,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #21262D !important;
  border-radius: 10px !important;
  margin-top: 12px;
}
.region-matrix-header {
  background: rgba(22,27,34,0.7) !important;
  border-bottom: 1px solid #21262D !important;
  padding: 10px 16px !important;
}
.region-analysis-box {
  background: linear-gradient(135deg, rgba(22,27,34,0.8) 0%, rgba(13,17,23,0.9) 100%);
  border: 1px solid #21262D;
  border-left: 3px solid #58A6FF;
  border-radius: 8px;
  padding: 16px 18px;
}
.region-analysis-title {
  font-size: 13px;
  font-weight: 700;
  color: #E6EDF3;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.region-analysis-box p {
  font-size: 12.5px;
  color: #C9D1D9;
  line-height: 1.65;
  margin-bottom: 6px;
}
.region-analysis-box p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Audit M7: Leaflet legend styling (Hotspot Monitor MPI map)
   ============================================================ */
.leaflet-container .legend.mse-leaflet-legend,
.leaflet-container .legend {
  background: rgba(13, 17, 23, 0.92) !important;
  color: #E6EDF3 !important;
  border: 1px solid #30363D !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.leaflet-container .legend .info-title,
.leaflet-container .legend strong {
  color: #79C0FF !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
  margin-bottom: 4px;
}
.leaflet-container .legend i {
  width: 16px !important;
  height: 12px !important;
  margin-right: 6px !important;
  border-radius: 2px !important;
  opacity: 0.9 !important;
}

/* ============================================================
   COMPARE Cluster — Scenario Lab / Corridor Lab / Hotspot Ranking
   ============================================================ */
.compare-scenarios-page,
.compare-corridor-page,
.compare-hotspot-page {
  padding: 16px 20px 24px;
  max-width: 1680px;
  margin: 0 auto;
  color: var(--text-primary);
}
.compare-header {
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.compare-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.compare-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 900px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.compare-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: flex-end;
}
.compare-control { display: flex; flex-direction: column; gap: 4px; }
.compare-ctrl-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 0;
}
.compare-footnote {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding: 10px 12px;
  background: rgba(88,166,255,0.05);
  border-left: 3px solid var(--accent-blue);
  border-radius: 3px;
}
.compare-info-note {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  color: var(--text-secondary);
  text-align: center;
}

/* --- Scenario Lab grid (3 columns x 2 rows) --- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(360px, auto);
  gap: 14px;
}
@media (max-width: 1100px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.compare-cell-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
  gap: 10px;
}
.compare-cell-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}
.compare-cell-total {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.compare-cell-header.scenario-baseline          { border-left: 3px solid #8B949E; padding-left: 9px; margin-left: -12px; }
.compare-cell-header.scenario-baseline_plus     { border-left: 3px solid #2563EB; padding-left: 9px; margin-left: -12px; }
.compare-cell-header.scenario-adaptation_success{ border-left: 3px solid #16A34A; padding-left: 9px; margin-left: -12px; }
.compare-cell-header.scenario-fragmentation     { border-left: 3px solid #D97706; padding-left: 9px; margin-left: -12px; }
.compare-cell-header.scenario-climate_extreme   { border-left: 3px solid #DC2626; padding-left: 9px; margin-left: -12px; }

.compare-cell--summary .compare-cell-header {
  border-left: 3px solid var(--accent-blue);
  padding-left: 9px;
  margin-left: -12px;
}

.delta-hint { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }
.delta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 2px;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.delta-row:last-child { border-bottom: none; }
.delta-label { color: var(--text-primary); }
.delta-value { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 600; }
.delta-value.delta-positive { color: #F85149; }
.delta-value.delta-negative { color: #3FB950; }
.delta-value.delta-neutral  { color: var(--text-secondary); }

/* --- Corridor Lab / Fan chart legend grid --- */
.compare-legend-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.compare-legend-cell {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  grid-template-areas:
    "swatch label value"
    ".      delta delta";
  align-items: center;
  gap: 3px 10px;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 12px;
}
.legend-swatch  { grid-area: swatch; width: 12px; height: 12px; border-radius: 3px; }
.legend-label   { grid-area: label; color: var(--text-primary); font-weight: 600; }
.legend-value   { grid-area: value; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.legend-delta   { grid-area: delta; font-size: 10.5px; color: var(--text-muted); }

/* ============================================================
   v0.5.8 — Global UI Polish (Header / Footer / Sidebar / KPI / Toolbar)
   All styles in this block are additive and override nothing that the
   existing layout relies on. Each sub-section is scoped by a unique
   wrapper class (added in app.R) so the original styling is preserved if
   this block is removed.
   ============================================================ */

/* ---------- 1. Sidebar section accent colours -----------------
   Each section (EXPLORE / COMPARE / RESOURCES / ABOUT) gets a coloured
   2px left accent bar and a matching label tint. Gives the user a quick
   spatial cue which area of the app they are currently in. */
.nav-section-header {
  position: relative;
  padding-left: 20px !important;
}
.nav-section-header::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.45;
}
.nav-section--explore   { color: #58A6FF !important; }  /* blue    */
.nav-section--compare   { color: #A371F7 !important; }  /* violet  */
.nav-section--resources { color: #3FB950 !important; }  /* green   */
.nav-section--about     { color: #D29922 !important; }  /* amber   */

/* ---------- 2. Header mini-status (centre block) --------------
   Lives in the middle of .dashboard-header and shows the current global
   PERIOD and TOTAL at a glance — the two values that are NOT visible in
   the SSP/Scenario dropdowns on the right. SSP and Scenario pills used to
   live here too, but they duplicated the dropdowns visually and caused
   the centre block to wrap onto a second row on Globe View. They are now
   hidden by default; the dropdowns are the single source of truth.
   Values are populated client-side from JS. */
.header-midstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.hm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: #C9D1D9;
}
.hm-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E7681;
}
.hm-value {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 600;
  color: #E6EDF3;
  font-variant-numeric: tabular-nums;
}
.hm-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6E7681;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.hm-pill--ssp   .hm-dot { background: #58A6FF; }
.hm-pill--scn   .hm-dot { background: #A371F7; }
.hm-pill--total { background: rgba(63, 185, 80, 0.08); border-color: rgba(63, 185, 80, 0.25); }
.hm-pill--total .hm-value { color: #3FB950; }

/* Hide SSP + Scenario pills entirely — they duplicated the dropdowns and
   caused the header-midstatus to wrap on Globe View at common desktop
   widths (~1024–1440 px). The DOM nodes are kept so the JS updater keeps
   working; toggling them back on is a one-line CSS revert. */
.header-midstatus .hm-pill--ssp,
.header-midstatus .hm-pill--scn { display: none !important; }

@media (max-width: 1100px) {
  .header-midstatus .hm-pill--year { display: none; }
}
@media (max-width: 900px) {
  .header-midstatus { display: none; }
}

/* ---------- 3. Connection indicator ---------------------------
   Small pulsating dot in the very top-right corner of the viewport. It
   turns amber while Shiny is reconnecting and red after a permanent
   disconnect — much subtler than the default grey overlay that Shiny
   would otherwise drop over the whole page. */
.conn-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  z-index: 9999;
  pointer-events: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.conn-ok     { background: #3FB950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.6); }
.conn-warn   { background: #D29922; box-shadow: 0 0 8px rgba(210, 153, 34, 0.75);
               animation: conn-pulse 1.2s ease-in-out infinite; }
.conn-error  { background: #F85149; box-shadow: 0 0 10px rgba(248, 81, 73, 0.8);
               animation: conn-pulse 0.8s ease-in-out infinite; }
@keyframes conn-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

/* ---------- 4. Footer — 3-column layout + cite button ---------
   Overrides the older single-row footer with a proper flex layout so
   copyright is left-aligned, meta/links are centred, and the version
   pill sits on the right — similar to documentation sites (MDN, Vercel
   docs). Non-destructive: the older .dashboard-footer rules still apply
   for anything we don't override here. */
.dashboard-footer--3col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 10px 20px !important;
}
.dashboard-footer--3col .footer-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dashboard-footer--3col .footer-col--center {
  justify-content: center;
  gap: 10px;
  color: #6E7681;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.dashboard-footer--3col .footer-col--right {
  justify-content: flex-end;
}
.dashboard-footer--3col .footer-sep {
  color: #30363D;
  user-select: none;
}
.dashboard-footer--3col .footer-copyright {
  margin-bottom: 0;
  color: #8B949E;
  font-weight: 500;
  font-size: 12px;
}
.dashboard-footer--3col .footer-link {
  color: #8B949E !important;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  padding: 2px 0 !important;
}
.dashboard-footer--3col .footer-link:hover {
  color: #58A6FF !important;
  border-bottom-color: rgba(88, 166, 255, 0.5);
}
.dashboard-footer--3col .footer-link--accent {
  color: #58A6FF !important;
  font-weight: 600;
}
.dashboard-footer--3col .footer-link--accent .fa-quote-right {
  margin-right: 4px;
  font-size: 10px;
}
.footer-version-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: 999px;
}
.footer-version-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3FB950;
  box-shadow: 0 0 4px rgba(63, 185, 80, 0.6);
}
.dashboard-footer--3col .footer-version {
  font-size: 10.5px;
  color: #8B949E;
  background: none;
  border: none;
  padding: 0;
}
@media (max-width: 820px) {
  .dashboard-footer--3col {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .dashboard-footer--3col .footer-col { justify-content: center; }
  .dashboard-footer--3col .footer-col--center { order: 2; }
  .dashboard-footer--3col .footer-col--right  { order: 3; }
}

/* ---------- 5. Cite modal styling -----------------------------
   Copy-paste friendly code blocks for APA / BibTeX / CFF. Each block
   has its own "Copy" button; success state is toggled by custom.js. */
.cite-intro {
  color: #8B949E;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.55;
}
.cite-block {
  margin-bottom: 14px;
  border: 1px solid #30363D;
  border-radius: 8px;
  overflow: hidden;
  background: #0D1117;
}
.cite-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #161B22;
  border-bottom: 1px solid #30363D;
}
.cite-block__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B949E;
}
.cite-copy-btn {
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.25);
  color: #58A6FF;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cite-copy-btn:hover {
  background: rgba(88, 166, 255, 0.16);
  border-color: rgba(88, 166, 255, 0.45);
}
.cite-copy-btn.copied {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.45);
  color: #3FB950;
}
.cite-copy-btn .fa-copy { margin-right: 3px; font-size: 10px; }
.cite-block__body {
  margin: 0;
  padding: 12px 14px;
  background: #0D1117;
  color: #C9D1D9;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cite-footer {
  padding-top: 8px;
  font-size: 11.5px;
  color: #6E7681;
  border-top: 1px solid #21262D;
  margin-top: 8px;
}
.cite-footer a {
  color: #58A6FF;
  text-decoration: none;
}
.cite-footer a:hover { text-decoration: underline; }

/* ---------- 6. Info-icons: stronger contrast + hover ----------
   The little "ⓘ" next to SSP Pathway / Scenario / etc. used to almost
   blend into the dark background. Bumping opacity and adding a subtle
   circle outline on hover makes them discoverable without being noisy. */
.header-info-icon {
  color: #6E7681;
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  cursor: help;
  margin-left: 4px;
  font-size: 12px;
}
.header-info-icon:hover,
.header-info-icon:focus {
  color: #58A6FF;
  opacity: 1;
  transform: scale(1.1);
  outline: none;
}

/* ---------- 7. Toolbar group dividers -------------------------
   Visual separation between the view-mode group (3D/2D, Countries/
   Regions, Reset, Presentation), the spatial-focus group (Country
   search), and the display group (Choropleth variable). Small vertical
   rule keeps the toolbar scannable even on wider screens. */
.map-controls-bar .country-search-box,
.map-controls-bar .choropleth-var-box {
  position: relative;
}
.map-controls-bar .country-search-box::before,
.map-controls-bar .choropleth-var-box::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(48, 54, 61, 0) 0%,
    rgba(48, 54, 61, 0.85) 50%,
    rgba(48, 54, 61, 0) 100%);
  pointer-events: none;
}

/* ---------- 8. KPI footer: dividers + icons + deltaPlaceholder -------
   Subtle vertical rules between the 6 KPI cells, a tiny icon next to
   each label, and an explicit "First period" placeholder colour when
   the delta value is a dash (populated by JS on 2020). */
.kpi-footer .kpi-item {
  position: relative;
}
/* Subtle divider between adjacent KPI cells. bslib's layout_columns renders
   each cell as a direct child of a grid wrapper; apply the divider to every
   cell except the first. */
.kpi-footer .bslib-layout-columns > *:not(:first-child) .kpi-item::before,
.kpi-footer > div > *:not(:first-child) .kpi-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(48, 54, 61, 0) 0%,
    rgba(48, 54, 61, 0.65) 50%,
    rgba(48, 54, 61, 0) 100%);
  pointer-events: none;
}
.kpi-delta.kpi-delta--placeholder {
  color: #484F58 !important;
  font-style: italic;
  font-weight: 400;
  font-size: 0.9em;
}

/* ---------- 9. Globe card: desktop padding --------------------
   Gives the globe some breathing room vs. the card edge on large
   screens (>= 1280px). On tablet and mobile we stay at 0 to maximise
   the map surface. */
@media (min-width: 1280px) {
  .bslib-card > .card-body:has(#globe-globe_container),
  .bslib-card > .card-body:has(#globe-flat_map) {
    padding: 8px !important;
  }
}

/* ---------- 10. Tab typography tweaks -------------------------
   Slightly larger pill text (13px) and a more subtle letter-spacing
   so tabs feel less "shouty". Kept at Mixed Case (as bslib outputs) for
   readability; only the CSS size/weight is retouched. */
.nav-pills .nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.nav-pills .nav-link.active {
  font-weight: 600;
}

/* ---------- 11. Keyboard-shortcut hints (desktop only) --------
   Shown as small "1…9" keycaps to the right of the first nine nav
   pills. We don't emit them in HTML; a single CSS data-* pull keeps the
   sidebar clean. JS sets the data-shortcut attribute on pills.

   Layout note: the flex container is applied to ALL pills (not just the
   ones with [data-shortcut]) so that pills WITH a keycap and pills
   WITHOUT a keycap share the exact same icon/label geometry. Previously
   only [data-shortcut] pills were flex with justify-content:space-between,
   which pushed their label into the middle of the row, while non-shortcut
   pills (Scenarios Guide, Data Sources, Glossary, Downloads, About,
   Updates) fell back to default block layout with a left-aligned label —
   producing a hard visual break halfway down the sidebar. The new rule
   keeps the icon left, the label left (immediately after the icon) and
   pushes the keycap (when present) to the right edge via margin-left:auto. */
@media (min-width: 992px) {
  .nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Inside the flex container, gap:8px already handles the icon → label
     gutter, so the legacy margin-right:8px on the <i> element would
     double-count and push the label 16 px to the right. Reset it here. */
  .nav-pills .nav-link > i {
    margin-right: 0;
  }
  .nav-pills .nav-link[data-shortcut]::after {
    content: attr(data-shortcut);
    display: inline-block;
    min-width: 16px;
    margin-left: auto;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 9.5px;
    color: #6E7681;
    background: rgba(110, 118, 129, 0.12);
    border: 1px solid rgba(110, 118, 129, 0.25);
    border-radius: 3px;
    text-align: center;
    line-height: 1.2;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .nav-pills .nav-link.active[data-shortcut]::after {
    color: #58A6FF;
    border-color: rgba(88, 166, 255, 0.35);
    background: rgba(88, 166, 255, 0.08);
    opacity: 1;
  }
}

/* ---------- 12. Resource page breadcrumb ----------------------
   When the user lands on a secondary page (Methodology, Data Sources,
   About, Updates, …) we prepend a tiny "<SECTION>  ›  <PAGE>" crumb so
   they know where they are within the information architecture. The
   parent section ("RESOURCES" or "ABOUT") is set by JS as data-section
   so About/Updates correctly read "ABOUT › Updates" instead of the
   previous (wrong) "RESOURCES › Updates". Only renders when both
   attributes are populated. */
.resource-page[data-crumb]:not([data-crumb=""])[data-section]:not([data-section=""])::before {
  content: attr(data-section) "  \203A  " attr(data-crumb);
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E7681;
  margin-bottom: 6px;
  font-weight: 600;
  opacity: 0.7;
}
/* Backwards-compat: if section attribute hasn't been written yet
   (e.g. JS still loading) fall back to the old "Resources" string for
   the green-section pages so we never render a bare crumb. */
.resource-page[data-crumb]:not([data-crumb=""]):not([data-section])::before {
  content: "Resources  \203A  " attr(data-crumb);
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E7681;
  margin-bottom: 6px;
  font-weight: 600;
  opacity: 0.7;
}
/* Embedded (iframe) resource pages are visual containers only; skip
   the breadcrumb there to avoid a double header. */
.resource-page--embedded[data-crumb]:not([data-crumb=""])::before,
.resource-page--embedded[data-crumb]:not([data-crumb=""])[data-section]:not([data-section=""])::before {
  display: none;
}

/* ---------- 13. Sidebar nav: graceful wrapping --------------------
   Pills like "Scenario Cockpit" / "Model Performance" don't fit the
   sidebar in a single line at the default 13 px / 16 px padding. Rather
   than truncating or shrinking the font we let the label wrap onto a
   second line (balanced for visual symmetry) and tighten line-height so
   two-line pills don't dwarf the single-line ones. The icon stays
   vertically aligned to the top of the first line and the keycap stays
   pinned to the right edge thanks to flex from rule 11.

   These wrap-time alignment tweaks apply to ALL pills (not just the ones
   with a keycap) so single-line non-shortcut pills like "About" or
   "Updates" share the exact same icon baseline as their wrapped
   shortcut neighbours. */
.nav-pills .nav-link {
  text-wrap: balance;
  line-height: 1.25;
  white-space: normal;
}
@media (min-width: 992px) {
  .nav-pills .nav-link {
    align-items: flex-start;
  }
  .nav-pills .nav-link > i {
    margin-top: 2px;
  }
  .nav-pills .nav-link[data-shortcut]::after {
    margin-top: 2px;
    flex-shrink: 0;
  }
}

/* ---------- 14. KPI card labels: balanced wrap --------------------
   Long KPI card labels ("Adaptation Success", "Fragmentation",
   "Total Migration") were either getting cut off mid-word or pushing
   the value-row down inconsistently between cards. Allow a balanced
   wrap with a tight line-height so a 2-line label is the same total
   height as a 1-line label sitting on its own row. */
.value-box .value-box-title,
.value-box .bslib-value-box-title,
.bslib-value-box .value-box-title {
  text-wrap: balance;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- 15. Header SSP / Scenario dropdowns ------------------
   Long SSP labels ("SSP2 — Middle of the Road") were being truncated
   to "SSP2 — Middle of the Roa…" inside the header dropdown on tabs
   that still expose them (Scenario Cockpit, Model Performance, Hotspot
   Ranking). Bumping the min-width of the select gives the long label
   room to breathe without breaking the right-aligned header layout. */
.header-select-wrap .form-control,
.header-select-wrap select.shiny-bound-input {
  min-width: 200px;
}
@media (max-width: 1280px) {
  .header-select-wrap .form-control,
  .header-select-wrap select.shiny-bound-input {
    min-width: 170px;
  }
}