/* Layout concept: a weather-service plotting sheet. The borderless EU is one pale landmass,
   stations are plotted dots coloured by percentile, and the verdict sits in the margin
   beside the map. Below it, the station's figures run down a single left-aligned column. */
:root {
  --paper: #f2f4f3;
  --paper-2: #e8ebe9;
  --land: #dde2de;
  --land-edge: #b9c1bb;
  --ink: #1a1d1c;
  --ink-2: #4c5450;
  --ink-3: #6f7873;
  --rule: #cdd3cf;
  --gold: #a67c00;
  --focus: #c99a06;

  /* verdict levels, coldest → warmest: <p5, 5–10, 10–20, 20–50, 50–80, 80–90, 90–95, 95–100, above all */
  --l0: #0d3a75; --l5: #1f5fae; --l10: #4f8fd6; --l20: #b4cdea; --l50: #f0cdb9;
  --l80: #e88a61; --l90: #cc4a2e; --l95: #8e1d17; --l100: #4a0d2e;
  --on-dark-bin: #ffffff;
  /* chart semantics */
  --warm-line: #cc4a2e; --cold-line: #1f5fae; --warm-band: #f2c0a7; --cold-band: #a9c8ec;
  /* wet-day percentile bins (<25 … ≥99) */
  --r0: #e3f1ec; --r1: #b9dfd2; --r2: #86c6b2; --r3: #52a68e; --r4: #2a8370; --r5: #135f51; --r6: #063a33;
  --wet: #1f7a63; --dry: #a8641c;
  /* heat (EHF) and cold (ECF) factor steps */
  --h1: #fbe7a8; --h2: #f7c46c; --h3: #ef8f44; --h4: #d4502b; --h5: #94201a;
  --k1: #d6e6f6; --k2: #a9c8ec; --k3: #6fa3dd; --k4: #3772bd; --k5: #173f7a;

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.25rem;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141716; --paper-2: #1b1f1d; --land: #242a27; --land-edge: #3b433f;
    --ink: #e8ece9; --ink-2: #a8b0ac; --ink-3: #848d88; --rule: #2f3633; --gold: #e2b52c; --focus: #e7b92b;
    --l0: #8cbcff; --l5: #5b97ea; --l10: #3471c2; --l20: #26476f; --l50: #5e4033;
    --l80: #b4573b; --l90: #e8734f; --l95: #ffa585; --l100: #ffd0ea; --on-dark-bin: #111413;
    --warm-line: #e8734f; --cold-line: #5b97ea; --warm-band: #6f4436; --cold-band: #26476f;
    --r0: #1c332e; --r1: #1f4d43; --r2: #24695a; --r3: #2f8a72; --r4: #4fae92; --r5: #86d0b6; --r6: #c4eedf;
    --wet: #52b496; --dry: #d9a050;
    --h1: #4d3d1a; --h2: #7a5420; --h3: #b76a2e; --h4: #e8734f; --h5: #ffa585;
    --k1: #1d2b3d; --k2: #26476f; --k3: #3471c2; --k4: #5b97ea; --k5: #8cbcff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141716; --paper-2: #1b1f1d; --land: #242a27; --land-edge: #3b433f;
  --ink: #e8ece9; --ink-2: #a8b0ac; --ink-3: #848d88; --rule: #2f3633; --gold: #e2b52c; --focus: #e7b92b;
  --l0: #8cbcff; --l5: #5b97ea; --l10: #3471c2; --l20: #26476f; --l50: #5e4033;
  --l80: #b4573b; --l90: #e8734f; --l95: #ffa585; --l100: #ffd0ea; --on-dark-bin: #111413;
  --warm-line: #e8734f; --cold-line: #5b97ea; --warm-band: #6f4436; --cold-band: #26476f;
  --r0: #1c332e; --r1: #1f4d43; --r2: #24695a; --r3: #2f8a72; --r4: #4fae92; --r5: #86d0b6; --r6: #c4eedf;
  --wet: #52b496; --dry: #d9a050;
  --h1: #4d3d1a; --h2: #7a5420; --h3: #b76a2e; --h4: #e8734f; --h5: #ffa585;
  --k1: #1d2b3d; --k2: #26476f; --k3: #3471c2; --k4: #5b97ea; --k5: #8cbcff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; text-wrap: balance; margin: 0; }
h2 { font-size: var(--step-2); font-variation-settings: "wdth" 88; letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }
p { margin: 0; max-width: 66ch; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------- header */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-block: 14px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); font-variation-settings: "wdth" 75; letter-spacing: 0.01em; text-decoration: none; }
.wordmark span { font-weight: 400; color: var(--ink-2); }
.freshness { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.masthead-side { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) { .masthead-side { justify-content: flex-start; } }

/* ------------------------------------------------------------- overview */
.overview .wrap { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 28px 40px; padding-block: 24px 32px; }
@media (max-width: 900px) { .overview .wrap { grid-template-columns: minmax(0, 1fr); } .verdict { order: -1; } }

.map-figure { margin: 0; min-width: 0; display: grid; gap: 10px; }
.map-main { position: relative; width: 100%; aspect-ratio: 1 / 0.98; max-width: 100%; }
.map-main svg, .inset svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.eu-land { fill: var(--land); stroke: var(--land-edge); stroke-width: 0.6; stroke-linejoin: round; }
.st-dot { stroke: var(--paper); stroke-width: 1.5; }
.st-dot.stale { stroke-width: 2.2; }
.st-sel { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.st-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
/* Outermost regions: a small 4 × 2 grid laid over the empty top-left corner of the main map
   (north-east Atlantic, where no EU land is drawn). Calibrated so it stays clear of Ireland,
   Denmark and Sweden at every width. */
.map-wrap { position: relative; }
.insets { position: absolute; left: 0; top: 0; width: 36%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.inset { border: 1px solid var(--rule); border-radius: 3px; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--paper); }
.inset-name { position: absolute; left: 4px; top: 2px; right: 2px; font-size: 10px; line-height: 1.2; color: var(--ink-2); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.insets.compact .inset-name { display: none; }   /* boxes too small for a name: the tooltip has it */
.map-status { font-size: var(--step--1); color: var(--ink-2); min-height: 1.5em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.progress { flex: 1 1 160px; max-width: 280px; height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--ink-2); transition: width .2s; }

/* legend: the percentile scale doubles as the key */
.legend { display: grid; gap: 6px; }
.scale { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; }
.scale i { height: 10px; border-radius: 2px; }
.scale-labels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); font-size: 11px; color: var(--ink-2); text-align: center; }
.legend-notes { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--step--1); color: var(--ink-2); align-items: center; }
.key-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; }

/* ------------------------------------------------------------- verdict */
.verdict { display: grid; align-content: start; gap: 18px; min-width: 0; }
.picker { display: grid; gap: 4px; }
.picker label { font-size: var(--step--1); color: var(--ink-2); }
select {
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--land-edge);
  border-radius: var(--radius); padding: 8px 10px; width: 100%; max-width: 100%;
}
.question { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; font-variation-settings: "wdth" 85; line-height: 1.15; }
.answer-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.answer { font-family: var(--font-display); font-weight: 850; font-variation-settings: "wdth" 66; font-size: clamp(4.5rem, 10vw, 8.5rem); line-height: 0.86; letter-spacing: -0.02em; margin: 0; }
.answer.size-m { font-size: clamp(3.6rem, 7.4vw, 6.2rem); }
.answer.size-s { font-size: clamp(3rem, 6vw, 5rem); }
.answer-sub { font-size: var(--step-1); line-height: 1.3; max-width: 26ch; }
.gauge { width: 46px; height: 190px; }
.gauge text { font-size: 10px; fill: var(--ink-2); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.fig dt { font-size: var(--step--1); color: var(--ink-2); }
.fig dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 5.6vw, var(--step-3)); font-variation-settings: "wdth" 80; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fig dd small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-2); margin-top: 2px; }
.date-note { font-size: var(--step--1); color: var(--ink-2); }
.badge { display: inline-flex; gap: 6px; align-items: center; font-size: var(--step--1); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule); }
.badge.record { border-color: var(--warm-line); }
.badge.record.cold { border-color: var(--cold-line); }

/* ------------------------------------------------------------- unusual lists */
.unusual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
@media (max-width: 520px) { .unusual { grid-template-columns: minmax(0, 1fr); } }
.unusual h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; margin-bottom: 6px; }
.unusual ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.unusual button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 4px 6px; border-radius: 4px; font-size: var(--step--1);
}
.unusual button:hover { background: var(--paper-2); }
.unusual button:focus-visible { outline: 2px solid var(--focus); }
.unusual .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- station sections */
.station { border-top: 1px solid var(--rule); }
.station > .wrap { display: grid; gap: 0; padding-block: 8px 48px; }
.sec { display: grid; gap: 14px; padding-block: 32px; border-bottom: 1px solid var(--rule); min-width: 0; }
.sec > *, .two > *, .overview .wrap > * { min-width: 0; }
.sec:last-child { border-bottom: 0; }
.sec-head { display: grid; gap: 6px; }
.sec-head p { color: var(--ink-2); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
@media (max-width: 820px) { .two { grid-template-columns: minmax(0, 1fr); } }
.chart { width: 100%; min-width: 0; position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.caption { font-size: var(--step--1); color: var(--ink-2); max-width: 70ch; }
.loading { color: var(--ink-2); padding-block: 40px; }
.error { border-left: 3px solid var(--warm-line); padding: 8px 12px; background: var(--paper-2); }

/* chart anatomy */
.axis text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.axis path, .axis line { stroke: var(--rule); }
.grid line { stroke: var(--rule); stroke-opacity: .7; }
.grid path { display: none; }
.lbl { font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.lbl-strong { font-size: 12px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.halo { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }

/* records table */
.table-scroll { overflow-x: auto; }
table.records { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
.records th, .records td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.records thead th { font-size: var(--step--1); color: var(--ink-2); font-weight: 400; }
.records td b { font-family: var(--font-display); font-size: var(--step-1); font-variation-settings: "wdth" 85; }
.records td span { display: block; font-size: var(--step--1); color: var(--ink-2); }
.spells { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--step--1); color: var(--ink-2); }
.spells b { color: var(--ink); font-size: var(--step-0); }

/* calendars */
.cal-scroll { overflow-x: auto; padding-bottom: 4px; }
.cal { display: grid; grid-template-columns: 2.4em repeat(31, minmax(18px, 1fr)); gap: 2px; min-width: 640px; font-variant-numeric: tabular-nums; }
.cal .m { font-size: 11px; color: var(--ink-2); align-self: center; }
.cal .dh { font-size: 10px; color: var(--ink-3); text-align: center; }
.cal .c { aspect-ratio: 1; border-radius: 3px; font-size: 9.5px; display: grid; place-items: center; color: var(--ink); background: var(--paper-2); }
.cal .c.on-dark { color: var(--on-dark-bin); }
.cal .c.none { background: transparent; }
.cal .c.future { background: transparent; outline: 1px dashed var(--rule); outline-offset: -1px; }
.cal .c.latest { outline: 2px solid var(--gold); outline-offset: 1px; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--land-edge); border-radius: var(--radius); overflow: hidden; }
.seg button { font: inherit; font-size: var(--step--1); border: 0; background: transparent; color: var(--ink); padding: 6px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--land-edge); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.stat-line { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: baseline; }
.stat-line .big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); font-variation-settings: "wdth" 78; line-height: 1; }

.meta-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: var(--step--1); }
.meta-list dt { color: var(--ink-2); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; }

/* tooltip */
.tip {
  position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: var(--paper);
  padding: 7px 9px; border-radius: 5px; font-size: 12px; line-height: 1.35; max-width: 240px;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .08s;
}
.tip b { font-weight: 700; }

.footer { border-top: 1px solid var(--rule); }
.footer .wrap { padding-block: 28px 40px; display: grid; gap: 10px; font-size: var(--step--1); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------- controls bar (reference period, year) */
.controls { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding-block: 18px 6px; }
.controls label, .control-label { font-size: var(--step--1); color: var(--ink-2); }
.controls select { width: auto; padding: 5px 8px; }
.ctl { display: inline-flex; gap: 8px; align-items: center; }
.year-note { font-size: var(--step--1); color: var(--ink-2); }
.year-note button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }

/* heat calendar outlines: days inside a heatwave / cold spell of 3+ days */
.cal .c.spell { box-shadow: inset 0 0 0 2px var(--ink); }
.key-box { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.key-box.outline { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper-2); }

/* rain buckets */
.buckets { display: grid; gap: 22px; }
.bucket { display: grid; gap: 6px; }
.bucket-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; }
.bucket-head .big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); font-variation-settings: "wdth" 78; line-height: 1; font-variant-numeric: tabular-nums; }
.bucket svg { display: block; width: 100%; overflow: visible; }

/* provisional data (GHCN near-real-time feed) */
.st-prov { fill: var(--paper); pointer-events: none; }
.key-dot.key-prov { background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink-2); }
.prov-note { font-size: var(--step--1); border-left: 3px solid var(--gold); padding: 6px 10px; background: var(--paper-2); max-width: 60ch; }
.prov-chip { display: inline-block; margin-left: 6px; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gold); color: var(--ink); }
.cal .c.prov { position: relative; }
.cal .c.prov::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--gold) transparent transparent; border-top-right-radius: 3px; }