:root {
  --clr-error:    var(--clr-danger, var(--clr-data-red, var(--pal-red)));
  --clr-sel:      var(--clr-primary-h, var(--clr-data-purple, var(--pal-purple))); /* selected country fill */
  --clr-map-bg:   #dbeafe;
  --panel-h:      680px;
}

body.dark,
html.dark body {
  --clr-error:    var(--clr-danger, var(--clr-data-red, var(--pal-red)));
  --clr-sel:      var(--clr-primary-h, var(--clr-data-purple, var(--pal-purple)));
  --clr-map-bg:   #0f1725;
}

body {
  font-size: var(--txt-ui);
}
.header-controls { flex-shrink: 0; }

/* Shared controls and flag icons live in /assets/shared/controls.css. */

/* ── Main two-column layout ─────────────────────────────────────── */
.intro-panel {
  margin: 0 0 1rem;
}

main {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 410px;
  grid-template-rows: auto auto;
  gap: .35rem 1rem;
  align-items: stretch;
}
.panel-map     { grid-column: 1; grid-row: 1; }
.panel-selector { grid-column: 2; grid-row: 1; }
.tool-data-meta.tool-data-meta-inline {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
  margin: 0;
  padding: .15rem .15rem 0;
  font-size: var(--txt-xs);
  line-height: 1.35;
  text-align: left;
}

/* ── Panels ─────────────────────────────────────────────────────── */
.panel {
  overflow: hidden;
}

.panel-map,
.panel-selector {
  display: flex;
  flex-direction: column;
  min-height: var(--panel-h);
  max-height: var(--panel-h);
}

.panel-header {
  gap: .75rem;
}

/* ── Map ────────────────────────────────────────────────────────── */
#map {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--clr-map-bg);
}

.map-unavailable {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--clr-muted);
  font-size: var(--txt-md);
}

.map-legend {
  padding: .45rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--txt-xs);
  color: var(--clr-muted);
  border-top: 1px solid var(--clr-border);
}

.legend-gradient {
  flex: 1;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(to right, #d73027, #fdad61, #ffffbf, #d9ef8b, #91cf60, #1a9850);
}

.legend-selected { margin-left: .5rem; color: var(--clr-primary); font-weight: var(--txt-w-semibold); }

/* Income swatch (round, used in legend + income results table) */
.income-swatch {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  vertical-align: middle;
  margin-right: .35rem;
}
body.dark .income-swatch {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
/* Hoverable swatch in income results table — acts as a chart-legend proxy */
.income-row { cursor: default; }
.income-row .income-swatch { cursor: pointer; }
.income-row.is-dimmed { opacity: .45; }

/* HDI chip tinted by HDI ramp (set --hdi-color inline). */
.cb-meta-chip--by-hdi {
  --hdi-color: #9ca3af;
  background: color-mix(in srgb, var(--hdi-color) 35%, transparent);
  color: color-mix(in srgb, var(--hdi-color) 75%, var(--clr-text) 25%);
  border: 1px solid color-mix(in srgb, var(--hdi-color) 60%, transparent);
}
body.dark .cb-meta-chip--by-hdi {
  color: color-mix(in srgb, var(--hdi-color) 60%, white 40%);
}

/* HDI chip tinted by income group (set --income-color inline). */
.cb-meta-chip--by-income {
  --income-color: #9ca3af;
  background: color-mix(in srgb, var(--income-color) 18%, transparent);
  color: color-mix(in srgb, var(--income-color) 70%, var(--clr-text) 30%);
  border: 1px solid color-mix(in srgb, var(--income-color) 50%, transparent);
}
body.dark .cb-meta-chip--by-income {
  color: color-mix(in srgb, var(--income-color) 65%, white 35%);
}

/* Compact income-group abbreviation chip (LI / LMI / UMI / HI) */
.cb-meta-chip--inc-abbr {
  --income-color: #9ca3af;
  font-size: .68rem;
  padding: 1px 5px;
  font-weight: var(--txt-w-semibold, 600);
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--income-color) 38%, transparent);
  color: color-mix(in srgb, var(--income-color) 78%, var(--clr-text) 22%);
  border: 1px solid color-mix(in srgb, var(--income-color) 62%, transparent);
}
body.dark .cb-meta-chip--inc-abbr {
  color: color-mix(in srgb, var(--income-color) 70%, white 30%);
}

/* Income flag (●) for groups outside CI in income table */
.income-flag {
  color: var(--clr-status-warning, #d97706);
  font-weight: var(--txt-w-bold, 700);
  margin-left: .25rem;
}
.income-count {
  color: var(--clr-muted);
  font-weight: normal;
  font-size: .9em;
}
.income-summary-line {
  font-size: var(--txt-sm);
  color: var(--clr-muted);
  margin: 0 0 .55rem;
}
.income-excluded {
  margin-top: .5rem;
  font-size: var(--txt-sm);
  color: var(--clr-status-warning, #d97706);
  line-height: var(--txt-lh-body);
}

/* ── Selector panel blocks ──────────────────────────────────────── */
.panel-block {
  padding: .75rem 1rem;
}
.panel-block h2 { font-size: var(--txt-base); font-weight: var(--txt-w-semibold, 600); margin-bottom: .35rem; }

.input-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

#country-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: .5rem .6rem;
  font-size: var(--txt-sm-plus);
  min-height: 78px;
  resize: vertical;
}

.input-row .btn-inline-action {
  min-width: 84px;
}

/* Error box */
.error-box {
  margin-top: .5rem;
  background: var(--clr-alert-bg);
  border: 1px solid var(--clr-alert-border);
  border-radius: 4px;
  padding: .45rem .65rem;
  font-size: var(--txt-sm);
  color: var(--clr-error);
}

.controls-top,
.controls-bottom {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.controls-top {
  margin-bottom: .45rem;
}

.controls-bottom {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: .45rem;
}

.selection-count { font-size: var(--txt-md); margin-right: auto; }
.selection-count strong { color: var(--clr-primary); }

.sort-label {
  font-size: var(--txt-sm);
  color: var(--clr-muted);
}

.sort-box {
  padding: .3rem .45rem;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  font-size: var(--txt-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
}
.sort-box:focus { outline: 2px solid var(--clr-primary); border-color: transparent; }

.search-box {
  padding: .3rem .55rem;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--txt-sm-plus);
  min-width: 0;
  width: auto;
  flex: 1 1 0;
}
.search-box:focus { outline: 2px solid var(--clr-primary); border-color: transparent; }

.search-box::placeholder {
  color: var(--clr-muted);
}

/* ── Results section ────────────────────────────────────────────── */
.tool-data-meta {
  max-width: 1400px;
  margin: .25rem auto .8rem;
  padding: 0 1.25rem;
  color: var(--clr-muted);
  font-size: var(--txt-sm);
  line-height: var(--txt-lh-body);
}

.tool-data-meta p {
  margin: 0;
}

.tool-data-meta p + p {
  margin-top: .2rem;
}

.tool-data-meta a {
  color: var(--clr-primary);
  text-decoration: none;
}

.tool-data-meta a:hover,
.tool-data-meta a:focus-visible {
  text-decoration: underline;
}

#results {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}

.results-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.card-stats,
.card-chart,
.card-roc,
.card-income-stats,
.card-income-chart {
  min-height: 480px;
}

.card-chart .chart-wrap,
.card-roc .chart-wrap,
.card-income-chart .chart-wrap {
  flex: 1 1 auto;
  min-height: 420px;
}

/* Income tab grid: summary card + bar chart side-by-side */
.income-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 56.25em) {
  .income-grid { grid-template-columns: 1fr; }
}

/* Run block: simulation iterations input + status line */
.run-block {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.run-config-row {
  display: block;
}
.sim-iter-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: var(--txt-sm);
  color: var(--clr-muted);
  min-width: 0;
}
.sim-iter-row label {
  font-size: var(--txt-xs);
  color: var(--clr-muted);
  font-weight: var(--txt-w-regular, 400);
}
.sim-iter-row input[type="number"] {
  width: 100%;
  padding: .3rem .5rem;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--txt-sm);
  -moz-appearance: textfield;
  appearance: textfield;
}
.sim-iter-row input[type="number"]::-webkit-outer-spin-button,
.sim-iter-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sim-iter-row input[type="number"]:focus {
  outline: 2px solid var(--clr-primary);
  border-color: transparent;
}
.chip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .35rem;
  align-self: center;
  font-size: var(--txt-xs);
  color: var(--clr-muted);
  line-height: 1.35;
  min-width: 0;
}
.chip-legend strong {
  color: var(--clr-text);
  font-weight: var(--txt-w-semibold, 600);
  margin-right: .15rem;
}
.run-block .btn-primary { margin: 0; }
/* Wrapper is the flex child — takes only button height, no extra.
   Status text is absolutely positioned below the button; nothing in
   the flow moves when it appears or disappears. */
.run-btn-wrap {
  position: relative;
}
.run-btn-wrap .sim-progress {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: .15rem;
  min-height: 0;
  pointer-events: none;
}


/* Tabbed results shell — give the panel some breathing room */
.results-tabs-shell .shared-tabbed-panel {
  padding-top: 1rem;
}

.card {
  padding: 1rem;
}

.card-headline {
  gap: .65rem;
  margin-bottom: .55rem;
}

/* Stats table */
#stats-table .sig { color: var(--clr-status-success); font-weight: var(--txt-w-bold, 700); }
#stats-table .non-sig { color: var(--clr-muted); }

.interpretation {
  margin-top: .55rem;
  font-size: var(--txt-sm-plus);
  color: var(--clr-muted);
  line-height: var(--txt-lh-body);
  border-top: 0;
  padding-top: 0;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--clr-overlay-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal {
  background: var(--clr-surface);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-modal);
}
.modal h3 { font-size: var(--txt-base-plus); font-weight: var(--txt-w-bold, 700); margin-bottom: .5rem; }
.modal p  { font-size: var(--txt-md); color: var(--clr-muted); margin-bottom: .6rem; }
.modal ul {
  list-style: none;
  margin-bottom: .75rem;
  max-height: 200px;
  overflow-y: auto;
}
.modal ul li {
  padding: .3rem .5rem;
  background: var(--clr-alert-bg);
  border-radius: 4px;
  color: var(--clr-error);
  font-size: var(--txt-md);
  margin-bottom: 3px;
}

body.dark .leaflet-tooltip {
  background: var(--clr-tooltip-bg);
  color: var(--clr-tooltip-text);
  border: 1px solid var(--clr-tooltip-border);
}
body.dark .leaflet-tooltip-top:before { border-top-color: var(--clr-tooltip-border); }
.modal-suggestions {
  font-size: var(--txt-sm);
  color: var(--clr-muted);
  font-style: normal;
  line-height: var(--txt-lh-tight);
}
.modal .btn-primary { width: auto; margin-top: .5rem; }

/* .chart-modal core now provided by shared app-shell.css */
.chart-modal-help {
  color: var(--clr-muted);
  font-size: var(--txt-sm);
  margin-bottom: .55rem;
  padding: .35rem .55rem;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  background: var(--clr-bg);
}

#chart-modal-canvas {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 10px;
}

.footer-credits {
  padding-top: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 56.25em) {
  .content-shell {
    margin: .75rem auto;
  }

  main {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .panel-map,
  .panel-selector {
    min-height: initial;
    max-height: initial;
  }
  #map {
    min-height: 340px;
    height: 340px;
    flex: initial;
  }
  .checkbox-wrapper {
    flex: initial;
    max-height: 280px;
    min-height: 220px;
  }
  .results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 31.25em) {
  .input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-inline-action {
    width: 100%;
  }

  #map             { height: 260px; }
  .controls-row    { gap: .3rem; }
  .search-box      { min-width: 84px; }
  .chart-modal {
    width: min(96vw, 680px);
    height: min(84dvh, 720px);
    border-radius: 14px;
    padding: .75rem .75rem .85rem;
  }
  .chart-modal-help {
    font-size: var(--txt-xs);
    margin-bottom: .45rem;
  }
}

/* Map color-mode toggle (HDI / Income) */
.map-color-toggle { margin-left: auto; }
.map-color-toggle .btn-ghost.is-active {
  background: var(--clr-primary);
  color: #fff;
}
.income-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.income-swatch--low          { background: #ea643f; }
.income-swatch--lower_middle { background: #ffeba8; }
.income-swatch--upper_middle { background: #c7e780; }
.income-swatch--high         { background: #56b458; }

/* Income table: align numeric column headers with their values. */
#income-table thead th:nth-child(2),
#income-table thead th:nth-child(3),
#income-table tbody td.shared-cell-num { text-align: right; }
#income-table tbody td:first-child { white-space: nowrap; }