:root {
  --ink: #1c2430;
  --muted: #5b6675;
  --border: #dde2e8;
  --panel-bg: #ffffff;
  --warn-bg: #fff6e5;
  --warn-border: #e8c674;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: #f4f6f8;
}

header#banner {
  position: relative;
  /* Higher than Leaflet's own pane z-indices (up to 700 for popups), so
     content that overflows the header - like the index combobox's
     dropdown - always paints above the map instead of being clipped by
     it. */
  z-index: 900;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

#banner-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#banner h1 {
  margin: 0;
  font-size: 1.1rem;
}

#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.filter-field {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-field select {
  font-size: 0.85rem;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: white;
  color: var(--ink);
}

.filter-field select:disabled {
  background: #f0f2f4;
  color: var(--muted);
}

.combobox {
  position: relative;
}

#indice-input {
  font-size: 0.85rem;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: white;
  color: var(--ink);
  width: 220px;
}

#indice-input:disabled {
  background: #f0f2f4;
  color: var(--muted);
}

#indice-listbox {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 30;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
  font-size: 0.82rem;
  min-width: 100%;
  width: max-content;
  /* Also capped relative to the viewport (not just a fixed 460px) so
     it can never force a page-wide horizontal scrollbar on a narrow
     window, on top of the left/right flip in positionIndexListbox(). */
  max-width: min(460px, calc(100vw - 32px));
}

#indice-listbox[hidden] {
  display: none;
}

.combobox-option {
  padding: 5px 10px;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox-option:hover,
.combobox-option.highlighted {
  background: #eef4fb;
}

.combobox-empty {
  padding: 5px 10px;
  color: var(--muted);
  font-style: italic;
}

.help-button {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.help-button:hover {
  background: #eef4fb;
  color: #2f6fb2;
  border-color: #bcd4ee;
}

.help-button:disabled {
  cursor: default;
  opacity: 0.5;
}

#index-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 36, 48, 0.45);
  padding: 24px;
}

#index-help-overlay[hidden] {
  display: none;
}

#index-help-overlay:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#index-help-modal {
  background: white;
  border-radius: 8px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

#index-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#index-help-title {
  margin: 0;
  font-size: 1.15rem;
}

#index-help-close {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}

#index-help-close:hover {
  color: var(--ink);
}

#index-help-intro {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 10px 0 16px;
}

.index-help-category {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.index-help-category:first-child {
  border-top: none;
}

.index-help-category h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: var(--ink);
}

.index-help-category p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.index-help-category .index-help-codes {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #8a93a1;
  font-family: monospace;
}

.pilot-anomaly {
  margin: -8px 0 12px;
  font-size: 0.85rem;
  color: #a1450f;
  font-weight: 600;
}

#map-period-note {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}

#banner-subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

#banner-warning {
  max-width: 640px;
}

main {
  display: flex;
  flex: 1;
  min-height: 0;
  margin-bottom: 20px;
}

#map-container {
  position: relative;
  flex: 1;
}

#map {
  position: absolute;
  inset: 0;
}

#map-loading {
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

#map-loading[hidden] {
  display: none;
}

#map-loading:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 246, 248, 0.55);
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(47, 111, 178, 0.25);
  border-top-color: #2f6fb2;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

#panel {
  width: 360px;
  padding: 16px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

#panel-empty p {
  color: var(--muted);
  font-size: 0.9rem;
}

#panel-name {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

#panel-annual {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--muted);
}

#panel-distribution-chart-wrap {
  position: relative; /* anchors the loading overlay */
}

#panel-distribution-chart {
  cursor: crosshair;
}

#panel-distribution-chart:focus-visible {
  outline: 2px solid #2f6fb2;
  outline-offset: 2px;
}

#panel-distribution-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}

.distribution-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.distribution-legend-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.panel-caption {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

#panel-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--muted);
}

.leaflet-popup-content {
  font-size: 0.85rem;
}

#legend {
  background: white;
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 200px;
}

/* The classed-demo legend needs more horizontal room than the plain
   gradient bar - it's now guaranteed at least 6 squares (see
   computeClassBoundaries's minClasses), sometimes more for
   wide-ranging indices, and unlike the gradient bar it must stay on
   one row for the boundary ticks underneath to line up with the
   seams between squares. */
#legend.legend-classed {
  max-width: 320px;
}

#legend .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

.pilot-warning {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8rem;
  margin-top: 8px;
}

.index-formula-box {
  max-width: 640px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #eef4fb;
  border: 1px solid #bcd4ee;
  border-radius: 4px;
  font-size: 0.8rem;
}

.index-formula-box p {
  margin: 0;
}

.index-formula-box p + p {
  margin-top: 3px;
}

#index-formula-name {
  font-weight: 600;
  color: var(--ink);
}

#index-formula-value {
  color: var(--ink);
}

#index-formula-reference {
  color: var(--muted);
  font-size: 0.75rem;
}

/* Shared gradient-bar-with-mid-tick markup (buildGradientBarHtml in
   app.js) - used both by the main map's Leaflet legend control (one
   instance) and the per-scenario comparison box legends (multiple
   instances at once), hence classes rather than ids. */
.gradient-bar {
  position: relative; /* anchors the mid-value tick mark below */
  width: 100%;
  height: 10px;
  border-radius: 2px;
  margin: 4px 0 2px;
}

.legend-mid-tick {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translateX(-1px);
}

.gradient-bar-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.7rem;
}

.legend-mid-label {
  color: var(--muted);
}

#legend-caption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

/* Classed-demo legend (buildClassedLegendHtml in app.js) - a row of
   flat-color squares instead of the gradient-bar above, with boundary
   values (not "x-y" ranges) as ticks underneath each seam between
   squares, same layout idea as the distribution chart's x-axis ticks.
   Parallel to .gradient-bar, not a replacement, so it can be dropped
   cleanly if the demo doesn't stick. */
.legend-class-wrap {
  margin: 4px 0 2px;
}

.legend-class-row {
  display: flex;
  gap: 1px;
}

.legend-class-swatch {
  flex: 1 1 auto;
  min-width: 14px;
  height: 14px;
  border-radius: 2px;
}

.legend-class-ticks {
  position: relative;
  height: 12px;
  margin-top: 2px;
}

.legend-class-ticks span {
  position: absolute;
  top: 0;
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(-50%);
}

.legend-class-ticks span:first-child {
  transform: translateX(0);
}

.legend-class-ticks span:last-child {
  transform: translateX(-100%);
}

#legend-classed-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e3e6ea;
  font-size: 0.68rem;
  color: var(--muted);
  cursor: pointer;
}

#comparison-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}

#comparison-boxes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.comparison-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}

.comparison-box-image-wrap {
  position: relative;
  /* Fixed, not just min - the 5 zones have very different raw pixel
     aspect ratios (e.g. Castilla y Leon is wide/short, Douro is
     narrow), so letting the image dictate the box's height meant the
     two boxes were rarely the same height and, combined with the rest
     of the panel above them, often didn't both fit on screen at once
     - defeating the point of comparing them. A fixed height (image
     letterboxed via object-fit: contain) keeps both boxes the same,
     predictable size instead. */
  height: 190px;
  background: #eef1f4;
  border-radius: 4px;
  overflow: hidden;
}

.comparison-box-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.comparison-box-image[hidden] {
  display: none;
}

/* Generic "spinner centered over its (position: relative) parent"
   overlay - used by the comparison box images and the distribution
   chart, both of which depend on the same async scenario fetch. */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-overlay[hidden] {
  display: none;
}

.comparison-box-point-marker {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b22821;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.comparison-box-point-marker[hidden] {
  display: none;
}

.comparison-box-legend {
  margin-top: 6px;
}

.comparison-box-stats {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}