/* Light theme tokens; dark tokens below apply for the system setting (auto) or a manual choice. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2329;
  --muted: #5f6973;
  --line: #d9dee3;
  --accent: #1c64b4;
  --hit: #d6336c;
  --bar: #8aa9c9;
  --band: rgba(28, 100, 180, 0.18);
  --warn-bg: #fff4d6;
  --warn: #7a5000;
  --c-precip: #0b7fa8;
  --c-tmax: #d03a2c;
  --c-tmin: #2f4fc4;
  --c-wind: #7a3fc8;
  --c-snow: #6b7480;
  --c-terrain: #8a6a2f;
  --c-tc: #e8590c;
  --tc-td: #4f8fc0;
  --tc-ts: #12a39b;
  --tc-c1: #c9a000;
  --tc-c2: #f08c00;
  --tc-c3: #e8590c;
  --tc-c4: #d6336c;
  --tc-c5: #8e2ea8;
  --map-sea: #dbe6ed;
  --map-coast: #2f3337;
  --map-border: #50565c;
  --map-state: #8a8f94;
  --map-water: #4f7590;
  --map-grid: rgba(30, 40, 50, 0.22);
  --map-label: #1d2329;
  --map-halo: rgba(255, 255, 255, 0.85);
  --map-mask: rgba(110, 115, 120, 0.55);
  --map-sel: #d6336c;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15191d;
    --surface: #1e2328;
    --text: #e3e7eb;
    --muted: #9aa4ad;
    --line: #353c43;
    --accent: #6aa7ea;
    --hit: #f06595;
    --bar: #5d7a99;
    --band: rgba(106, 167, 234, 0.22);
    --warn-bg: #3b3220;
    --warn: #f0c46a;
    --c-precip: #3ab4dc;
    --c-tmax: #ff6f5e;
    --c-tmin: #7f9bff;
    --c-wind: #b48cf2;
    --c-snow: #b3bcc6;
    --c-terrain: #c9a35c;
    --c-tc: #ff922b;
    --tc-td: #74b4e6;
    --tc-ts: #3fd4cb;
    --tc-c1: #f2d13b;
    --tc-c2: #ffb347;
    --tc-c3: #ff8a4c;
    --tc-c4: #ff6b9a;
    --tc-c5: #d184f0;
    --map-sea: #1c242b;
    --map-coast: #c9ced3;
    --map-border: #a2abb3;
    --map-state: #6c757d;
    --map-water: #6f93ad;
    --map-grid: rgba(220, 230, 240, 0.2);
    --map-label: #e8ecef;
    --map-halo: rgba(15, 18, 22, 0.85);
    --map-mask: rgba(150, 155, 160, 0.45);
    --map-sel: #f06595;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15191d;
  --surface: #1e2328;
  --text: #e3e7eb;
  --muted: #9aa4ad;
  --line: #353c43;
  --accent: #6aa7ea;
  --hit: #f06595;
  --bar: #5d7a99;
  --band: rgba(106, 167, 234, 0.22);
  --warn-bg: #3b3220;
  --warn: #f0c46a;
  --c-precip: #3ab4dc;
  --c-tmax: #ff6f5e;
  --c-tmin: #7f9bff;
  --c-wind: #b48cf2;
  --c-snow: #b3bcc6;
  --c-terrain: #c9a35c;
  --c-tc: #ff922b;
  --tc-td: #74b4e6;
  --tc-ts: #3fd4cb;
  --tc-c1: #f2d13b;
  --tc-c2: #ffb347;
  --tc-c3: #ff8a4c;
  --tc-c4: #ff6b9a;
  --tc-c5: #d184f0;
  --map-sea: #1c242b;
  --map-coast: #c9ced3;
  --map-border: #a2abb3;
  --map-state: #6c757d;
  --map-water: #6f93ad;
  --map-grid: rgba(220, 230, 240, 0.2);
  --map-label: #e8ecef;
  --map-halo: rgba(15, 18, 22, 0.85);
  --map-mask: rgba(150, 155, 160, 0.45);
  --map-sel: #f06595;
}
/* Each weather type has its own colour: tabs, the strip across the top, and the charts. */
body[data-var="precip"] { --var: var(--c-precip); }
body[data-var="tmax"] { --var: var(--c-tmax); }
body[data-var="tmin"] { --var: var(--c-tmin); }
body[data-var="wind"] { --var: var(--c-wind); }
body[data-var="snow"] { --var: var(--c-snow); }
body[data-var="terrain"] { --var: var(--c-terrain); }
body[data-var="tc"] { --var: var(--c-tc); }
body[data-var] {
  --accent: var(--var);
  --hit: var(--var);
  --bar: color-mix(in srgb, var(--var) 42%, var(--surface));
  --band: color-mix(in srgb, var(--var) 20%, transparent);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: #e03131; }
.warn { color: var(--warn); }
button, select, input { font: inherit; color: inherit; }
select, input { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
button { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.theme select { color: var(--text); font-size: 13px; }

/* index */
.index { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.index-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.index-head p { color: var(--muted); max-width: 60ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 24px 0; }
.tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px; text-decoration: none; color: inherit; }
.tile:hover { border-color: var(--accent); }
.tile h2 { font-size: 18px; margin-bottom: 6px; color: var(--accent); }
.tile p { margin: 0; color: var(--muted); }
.tile { border-top: 4px solid var(--tile, var(--line)); }
.tile h2 { color: var(--tile, var(--accent)); }
.tile.soon { opacity: 0.6; }
.tile.soon h2 { color: var(--tile, var(--muted)); }
.index-foot { color: var(--muted); font-size: 12px; }

/* explorer */
.explorer { display: flex; flex-direction: column; overflow: hidden; }
.bar { padding: 6px 14px 8px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.bar h1 { font-size: 21px; }
.index-head h1 { font-size: 42px; line-height: 1.15; }
.home { text-decoration: none; font-size: 18px; }
.title { display: flex; flex-direction: column; gap: 1px; flex: 1 1 280px; min-width: 0; }
.subtitle { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.index-head .subtitle { font-size: 14px; margin: 4px 0 0; }
.period { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.period.warn { color: var(--warn); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.tabs button { border: 0; background: transparent; padding: 4px 11px; border-radius: 4px; }
.tabs button.on { background: var(--accent); color: #fff; }
.bar-row .keys { margin-left: auto; position: relative; font-size: 12px; }
.keys summary { list-style: none; cursor: pointer; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.keys summary::-webkit-details-marker { display: none; }
.keys[open] summary { color: var(--text); border-color: var(--accent); }
.keys-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 8px 10px; white-space: nowrap; }
.keys-pop table { border-collapse: collapse; margin-top: 4px; }
.keys-pop td { padding: 2px 6px 2px 0; }
.keys-pop kbd { font: 600 11px ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; background: var(--bg); }
.var-strip { height: 7px; margin: 0 -14px; background: var(--var, var(--accent)); }
.controls { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.controls label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.controls select { color: var(--text); font-size: 13px; }
.layout { flex: 1; display: flex; min-height: 0; }
.map-wrap { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; }
.map-canvas { display: block; touch-action: none; cursor: default; }
.map-canvas:active { cursor: grabbing; }
.map-tools { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; align-items: flex-start; }
.layers { position: relative; }
.layers summary { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px; cursor: pointer; }
.layers summary::-webkit-details-marker { display: none; }
.layers summary::after { content: " ▾"; color: var(--muted); }
.layers-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 220px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.layers-menu label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.layers-menu .range { flex-direction: column; align-items: stretch; gap: 2px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.goto { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.goto input { width: 230px; }
.legend { position: absolute; left: 10px; bottom: 26px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: min(460px, calc(100% - 70px)); }
.legend-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.legend-title { font-size: 12px; }
.legend-bar { display: flex; height: 12px; }
.legend-bar span { flex: 1; }
.legend-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.legend-ticks.months span { flex: 1; text-align: center; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); padding: 8px 12px; border-radius: 6px; }
.status:empty { display: none; }
.panel { width: clamp(400px, 33vw, 720px); flex: none; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 12px 14px 24px; }
.forecast { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.forecast label { display: flex; align-items: center; gap: 6px; }
.forecast input { width: 90px; }
#panel-body h2 { font-size: 15px; margin-bottom: 6px; }
#panel-body h3 { font-size: 13px; margin: 14px 0 4px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.export { display: inline-flex; gap: 3px; flex: none; }
.export button { font-size: 10px; padding: 1px 5px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.export button:hover { color: var(--accent); border-color: var(--accent); }
.flags p { background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 6px 8px; margin: 6px 0; font-size: 12px; }
.result { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.result p { margin: 4px 0; }
.result .big { font-size: 26px; font-weight: 600; color: var(--hit); }
.result .big span { font-size: 14px; color: var(--muted); font-weight: 400; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 10px; }
.chart .bar { fill: var(--bar); }
.chart .bar.hit { fill: var(--hit); }
.chart .threshold { stroke: var(--hit); stroke-width: 1.5; stroke-dasharray: 5 3; }
.chart .band { fill: var(--band); }
.chart .median { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .record { fill: var(--text); }
.chart .month-mark { fill: var(--line); opacity: 0.5; }
.chart .val { fill: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .val.off-scale { fill: var(--hit); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.chart .val.rec { fill: var(--muted); font-weight: 600; }
.chart .whisker { stroke: var(--text); stroke-width: 1; opacity: 0.55; fill: none; }
.chart .median-dot { fill: var(--accent); }
.chart-key { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; }
.chart-key .k { display: inline-block; width: 14px; height: 8px; margin-right: 3px; vertical-align: middle; }
.k.band { background: var(--band); }
.k.median { height: 2px; background: var(--accent); }
.k.record { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.k.col { background: var(--bar); }
.k.whisker { width: 7px; height: 9px; border: 1px solid var(--muted); border-left: 0; border-right: 0; background: linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat; }
.k.threshold { height: 0; border-top: 2px dashed var(--hit); }
.detail { margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 10px; }
.detail summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.facts { margin: 8px 0; padding-left: 18px; }
.facts li { margin: 3px 0; }
table { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 6px; }
th, td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); }
td:last-child, th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.points td, table.points th { text-align: right; font-variant-numeric: tabular-nums; }
table.points td:nth-child(-n+2), table.points th:nth-child(-n+2) { text-align: left; }

@media (max-width: 800px) {
  .explorer { overflow: auto; }
  .layout { flex-direction: column; }
  .map-wrap { flex: none; height: 60vh; }
  .panel { width: 100%; border-left: 0; border-top: 1px solid var(--line); }
  .goto { top: 48px; left: 10px; right: auto; }
  .goto input { width: 180px; }
  .bar-row .keys { margin-left: 0; }
}

/* tropical cyclones */
.controls label.check { color: var(--text); }
.cat { display: inline-block; min-width: 34px; text-align: center; border-radius: 3px; padding: 0 4px; font-size: 10.5px; font-weight: 600; color: #fff; }
.cat-td { background: var(--tc-td); } .cat-ts { background: var(--tc-ts); } .cat-c1 { background: var(--tc-c1); color: #1d2329; }
.cat-c2 { background: var(--tc-c2); color: #1d2329; } .cat-c3 { background: var(--tc-c3); } .cat-c4 { background: var(--tc-c4); } .cat-c5 { background: var(--tc-c5); }
table.matrix td, table.matrix th { text-align: right; font-variant-numeric: tabular-nums; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; }
table.matrix tr.on td:first-child { font-weight: 600; }
table.matrix td.on { background: color-mix(in srgb, var(--var) 22%, transparent); font-weight: 600; }
.ana-form { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.ana-form label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.ana-form input[type="number"] { width: 64px; }
table.analogues td { vertical-align: top; }
table.analogues tr[data-s] { cursor: pointer; }
table.analogues tr[data-s]:hover td { background: color-mix(in srgb, var(--var) 8%, transparent); }
table.analogues tr.picked td { background: color-mix(in srgb, var(--var) 18%, transparent); }
.tile.tc h2 { color: var(--c-tc); }
.date-pick { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.cal-btn { display: inline-flex; align-items: center; padding: 3px 5px; color: var(--muted); }
.cal-btn:hover { color: var(--text); }
.cal-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.ana-form select { max-width: 100%; }
#ana-detail > summary { margin-bottom: 4px; }

/* Settings (units) menu: sits beside the keys button */
.bar-row .keys.settings { margin-left: 0; }
.keys.settings summary { font-size: 14px; line-height: 1; padding: 2px 5px; }
.unit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; color: var(--muted); }
.unit-row select { min-width: 80px; }

/* Rarity, last occurrence, ENSO / IOD */
.result .rarity b { color: var(--text); }
.result .last { border-top: 1px solid var(--line); padding-top: 4px; }
.info { cursor: help; color: var(--muted); margin-left: 4px; font-size: 11px; }
.legend-note { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 46ch; }
table.climate td, table.climate th { text-align: right; font-variant-numeric: tabular-nums; }
table.climate td:first-child, table.climate th:first-child { text-align: left; }
table.climate td:first-child[title] { cursor: help; text-decoration: underline dotted var(--line); }
table.climate tr.all td { color: var(--muted); }
table.climate tr.on td:first-child { font-weight: 600; }
.sig { font-weight: 600; color: var(--text); }
.nonsig { color: var(--muted); }
.sig .star { color: var(--accent); font-weight: 400; }

/* Analogue tick boxes */
table.analogues tr.off td:not(:first-child) { opacity: .45; }
table.analogues tr.off { cursor: default; }
table.analogues .ana-on { margin: 0; cursor: pointer; }
.ana-ticks { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.ana-ticks button { font-size: 11px; padding: 1px 6px; }
.ana-form #ana-limit { width: 4em; }

/* Wind rose bands: light to strong, from the page accent (works in both themes) */
.chart .rose-1 { fill: color-mix(in srgb, var(--var) 18%, var(--surface)); }
.chart .rose-2 { fill: color-mix(in srgb, var(--var) 34%, var(--surface)); }
.chart .rose-3 { fill: color-mix(in srgb, var(--var) 50%, var(--surface)); }
.chart .rose-4 { fill: color-mix(in srgb, var(--var) 68%, var(--surface)); }
.chart .rose-5 { fill: var(--var); }
.chart .rose-6 { fill: color-mix(in srgb, var(--var) 70%, var(--text)); }
.chart .rose-7 { fill: color-mix(in srgb, var(--var) 40%, var(--text)); }
.chart path[class^="rose-"] { stroke: var(--surface); stroke-width: 0.5; }
.avg-toggle { display: inline-flex; margin-right: 6px; }
.avg-toggle button { font-size: 10px; padding: 1px 6px; color: var(--muted); font-weight: 600; border-radius: 0; }
.avg-toggle button:first-child { border-radius: 4px 0 0 4px; }
.avg-toggle button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.avg-toggle button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.avg-toggle button:hover:not([aria-pressed="true"]) { color: var(--accent); }