:root {
  color-scheme: dark;
  --bg: #0b1315;
  --panel: #121d20;
  --panel-2: #17252a;
  --paper: #f0e5c8;
  --paper-strong: #fff7dc;
  --ink-soft: #c9bda0;
  --muted: #8f887a;
  --hairline: rgba(240, 229, 200, 0.14);
  --grid: rgba(240, 229, 200, 0.08);
  /* Score bands, validated ordinal amber ramp on --panel (high -> low). */
  --band-5: #f6dc94;
  --band-4: #dfb05a;
  --band-3: #b98738;
  --band-2: #8a6128;
  --band-1: #6f5126;
  --band-ink: #1c1509;
  /* Chart series, validated categorical trio on --panel. */
  --series-temp-high: #d95926;
  --series-temp-low: #3987e5;
  --series-sea: #199e70;
  --series-rain: #3987e5;
  /* Status palette (advisory badges) — reserved, never a series. */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --topbar-h: 64px;
  /* Globe surface. The sphere must read as an object against the void, so the
     ocean carries real colour and the void behind the canvas is darker than
     anything on the globe. Both stay cool and low-chroma so the amber score
     discs remain the only warm thing on screen. */
  --void: #05090a;
  --ocean: #0d222a;
  --land: #2a444c;
  --coast: rgba(240, 229, 200, 0.22);
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif;
  --serif: Georgia, "Noto Serif", "Songti SC", serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  background:
    radial-gradient(circle at 72% 12%, rgba(223, 176, 90, 0.07), transparent 30rem),
    radial-gradient(circle at 12% 80%, rgba(57, 135, 229, 0.05), transparent 26rem),
    linear-gradient(155deg, #0a1214, #101c1f 55%, #0b1315);
}

button, a { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--paper-strong);
  outline-offset: 3px;
}

.season-app { min-height: 100vh; }

/* ---------- top bar ---------- */

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--hairline);
}

.home-link {
  justify-self: start;
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.home-link:hover { color: var(--paper); }

.atlas-name {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}
.atlas-name span { color: var(--muted); letter-spacing: 0.08em; }

.top-actions { justify-self: end; }

.text-button {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
}
.text-button:hover { color: var(--paper-strong); border-color: var(--paper); }

/* ---------- layout ---------- */

/* Globe first: the map takes the whole middle column at full viewport height,
   controls go to a fixed left rail, the record stays right. Each column
   scrolls on its own so the sphere never scrolls out of view. */
.explorer {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 400px;
  height: calc(100vh - var(--topbar-h));
}

.control-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px 22px 30px;
  overflow-y: auto;
  border-right: 1px solid var(--hairline);
}

.map-panel { min-width: 0; height: 100%; }

.rail-label {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.intro { max-width: 620px; }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--band-4);
}

h1 {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.12;
  font-weight: 400;
  color: var(--paper-strong);
}

.dek {
  margin: 0;
  max-width: 54ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- control deck ---------- */

.control-deck {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 37, 42, 0.85), rgba(18, 29, 32, 0.85));
  padding: 14px 16px;
  margin-bottom: 18px;
}

.month-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.month-cell {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 8px 0 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-align: center;
  line-height: 1.25;
}
.month-cell small { display: block; font-size: 10px; opacity: 0.75; }
.month-cell:hover { color: var(--paper); background: rgba(240, 229, 200, 0.05); }
.month-cell.is-active {
  color: var(--band-ink);
  background: var(--band-4);
  border-color: var(--band-5);
  font-weight: 600;
}

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

.activity-chips { display: flex; flex-direction: column; gap: 5px; }

.chip {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 7px 12px;
  text-align: left;
}
.chip:hover { color: var(--paper-strong); border-color: var(--paper); }
.chip.is-active {
  color: var(--band-ink);
  background: var(--band-5);
  border-color: var(--band-5);
  font-weight: 600;
}

.score-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
}
.legend-ramp { display: flex; gap: 2px; }
.legend-step { width: 22px; height: 10px; border-radius: 3px; }
.legend-null {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--muted);
}

.legend-extent {
  width: 20px;
  height: 11px;
  border-radius: 3px;
  background: rgba(138, 97, 40, .38);
  box-shadow: 0 0 4px 1px rgba(138, 97, 40, .5);
}

/* ---------- map ---------- */

.map-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--void);
}

#map { height: 100%; }

.maplibregl-canvas-container canvas { outline: none; }

.projection-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(11, 19, 21, 0.72);
  backdrop-filter: blur(6px);
}

.projection-option {
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.projection-option.is-active {
  background: var(--paper-strong);
  color: #0b1315;
  font-weight: 650;
}

.map-hint {
  position: absolute;
  right: 14px;
  bottom: 10px;
  margin: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  pointer-events: none;
}

.map-message {
  position: absolute;
  inset: auto 14px 10px 14px;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--status-warning);
}

.dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--band-ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.dot:hover { transform: scale(1.12); }
.dot.is-selected { box-shadow: 0 0 0 2.5px var(--paper-strong); }
.dot.is-glowing { box-shadow: 0 0 22px 2px rgba(246, 220, 148, 0.45); }
.dot.is-glowing.is-selected {
  box-shadow: 0 0 22px 2px rgba(246, 220, 148, 0.45), 0 0 0 2.5px var(--paper-strong);
}
.dot.is-null {
  width: 14px;
  height: 14px;
  background: transparent !important;
  border: 2px solid var(--muted);
  color: transparent;
}
.dot-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.provenance {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.provenance p {
  margin: 0;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- detail sheet ---------- */

.detail-sheet {
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--hairline);
  background: linear-gradient(180deg, #131f22, #101a1d);
  padding: 30px 26px 40px;
}

.entity-label {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--band-4);
}

.detail-sheet h2 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper-strong);
}

.detail-sheet h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-empty .summary,
.sheet-empty .empty-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.empty-note { border-top: 1px solid var(--hairline); padding-top: 14px; }

.seed-links { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.seed-links button {
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.seed-links button:hover { border-color: var(--band-4); }
.seed-links .seed-score {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.sheet-header { display: flex; justify-content: space-between; gap: 14px; }
.place { margin: 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.sheet-close {
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  align-self: flex-start;
  padding: 2px 8px;
}
.sheet-close:hover { color: var(--paper-strong); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: none;
}
.badge .badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.badge.is-advisory:hover { border-color: var(--paper); }

.score-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--panel);
  padding: 16px;
  margin-bottom: 22px;
}
.score-disc {
  flex: none;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--band-ink);
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.score-disc.is-null { color: var(--muted); background: transparent; border: 2px dashed var(--muted); font-size: 14px; }
.score-band { margin: 0 0 4px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--paper-strong); }
.score-context { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.score-event {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--band-5);
}

.breakdown { margin-bottom: 24px; }
.breakdown-row {
  display: grid;
  grid-template-columns: 86px 1fr 30px;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.breakdown-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(240, 229, 200, 0.09);
  overflow: hidden;
}
.breakdown-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--band-4);
}
.breakdown-row .value { text-align: right; font-variant-numeric: tabular-nums; color: var(--paper); }
.breakdown-note { margin: 10px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.6; color: var(--muted); }

.year-section { margin-bottom: 24px; }

.score-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}
.strip-cell {
  height: 34px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--band-ink);
  font-variant-numeric: tabular-nums;
}
.strip-cell.is-null { border: 1px dashed var(--hairline); color: var(--muted); }
.strip-cell.is-active { box-shadow: 0 0 0 2px var(--paper-strong); }
.strip-cell:hover { filter: brightness(1.12); }

.chart { margin-bottom: 8px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis-label, .chart text {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chart .series-label { font-size: 10.5px; font-weight: 600; }

.data-table { margin-top: 6px; font-family: var(--sans); }
.data-table summary { font-size: 11.5px; color: var(--muted); cursor: pointer; letter-spacing: 0.06em; }
.table-scroll { overflow-x: auto; margin-top: 8px; }
.data-table table { border-collapse: collapse; font-size: 11px; color: var(--ink-soft); min-width: 100%; }
.data-table th, .data-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table th { color: var(--muted); font-weight: 500; }

.month-facts { margin-bottom: 24px; }
.month-facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fact {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(18, 29, 32, 0.6);
}
.fact dt { font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 4px; }
.fact dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.fact.is-warning dd { color: var(--status-warning); }
.fact .fact-flag { display: block; font-size: 10px; color: var(--status-warning); }

.events { margin-bottom: 24px; }
.event-item { margin-bottom: 12px; }
.event-name { margin: 0 0 6px; font-family: var(--sans); font-size: 12.5px; color: var(--paper); }
.event-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.event-month-cell {
  height: 8px;
  border-radius: 2px;
  background: rgba(240, 229, 200, 0.08);
}
.event-month-cell.is-on { background: var(--series-sea); }
.event-note { margin: 6px 0 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.6; color: var(--muted); }

.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { margin-bottom: 6px; font-family: var(--sans); font-size: 11.5px; line-height: 1.5; }
.sources a { color: var(--ink-soft); text-decoration-color: var(--hairline); }
.sources a:hover { color: var(--paper-strong); }
.verify-flag { color: var(--status-warning); font-size: 10px; letter-spacing: 0.06em; }

/* ---------- tooltip ---------- */

.viz-tooltip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  background: #0d1517;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 11px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--paper);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  max-width: 240px;
}
.viz-tooltip .tt-title { font-weight: 600; margin-bottom: 3px; }
.viz-tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-soft); }
.viz-tooltip .tt-row b { color: var(--paper); font-weight: 500; font-variant-numeric: tabular-nums; }
.viz-tooltip .tt-mark { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .explorer { grid-template-columns: 1fr; height: auto; }
  .control-rail {
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .month-strip { grid-template-columns: repeat(6, 1fr); }
  .activity-chips { flex-direction: row; flex-wrap: wrap; }
  .chip { border-radius: 999px; }
  .provenance { margin-top: 0; }
  .detail-sheet {
    height: auto;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
  .map-stage { height: 62vh; min-height: 420px; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 16px; grid-template-columns: auto 1fr auto; }
  .atlas-name span { display: none; }
  .month-strip { gap: 2px; }
  .month-facts dl { grid-template-columns: repeat(2, 1fr); }
}