/* Forecast Hungary — highway signage design system, Hungarian cut
 *
 * Sibling to Forecast Ireland, Forecast Germany and Forecast Euro, and readable as
 * one network: the same paper ground, Overpass / Overpass Mono, guide-sign panel,
 * exit chips, card grid and timeline, with EB Garamond Italic as the atlas voice.
 * (Most of the rules below are Forecast Ireland's, recoloured; the Hungarian
 * additions follow them.)
 *
 * The colour is the tricolour's — piros, fehér, zöld:
 *   - the panel is the flag's **green**, greyer and more olive than Ireland's
 *     national-route green, so the two never read as one site;
 *   - the working accent is **Danube blue**, for rules, timeline and live badges;
 *   - the flag's **red** marks the model plate in the header and the live
 *     things on the plate, and the three stripes run under the masthead.
 *
 * Fonts are subset with Latin Extended-A: ő and ű are letters, not decoration.
 */

:root {
  --paper: #e6e5de;
  --card: #ffffff;
  --ink: #161714;
  --ink2: #45473f;

  /* flag green — the guide-sign panel */
  --sign: #3c6a47;
  --sign-dk: #274a30;
  --sign-tx: #ffffff;
  --sign-sub: #d4e6d6;

  /* Danube blue — the working accent. Kept under the network's old name so
     shared rules pick it up unchanged. */
  --motorway: #1e5d8c;
  --motorway-dk: #164770;
  --motorway-sub: #cfe0ef;

  --blue: #1e5d8c;
  --navy: #133f60;
  --blue-sub: #cfe0ef;

  /* flag red — the route plate and what is live */
  --route: #ce2939;
  --route-dk: #a51d2b;
  --route-lt: #ffd6d9;

  --line: #c8c8bf;
  --line2: #e3e3dc;
  --mut: #80827a;
  --amber: #f2ac14;

  /* warning levels, as HungaroMet colours them */
  --w-yellow: #ffd100;
  --w-orange: #ff8c00;
  --w-red: #e0202a;

  --figure: #0c1210;
  --figure-line: #233a2a;
  --figure-tx: #e3ece5;
  --figure-mut: #93ab99;

  --shadow: 0 6px 22px rgba(15, 35, 20, .09);
  --shadow-hi: 0 10px 26px rgba(15, 35, 20, .16);

  --font: 'Overpass', Helvetica, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --atlas-font: 'EB Garamond', Garamond, Georgia, serif;
  --maxw: 1180px;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }

/* ── thin utility bar ─────────────────────────────────── */
.util {
  background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 16px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover { color: var(--sign-sub); text-decoration: none; }
.util a[aria-current="page"] { color: var(--sign-sub); }

/* ── province strip ───────────────────────────────────────
   A second tier of the top navigation, because a province is a destination people
   return to and the models are not — you look up Ontario far more often than you
   choose between HRDPS and RDPS. Sits directly under the utility bar and shares its
   geometry so the two read as one masthead.

   Short forms rather than full names: thirteen provinces at full length wrap on any
   laptop, and "Sask." is unambiguous to every Canadian in a way that a truncated
   "Saskatch…" is not. The full name is the link's title. */
.provbar {
  background: var(--sign-dk); color: var(--sign-sub);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.provbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.provbar .lbl {
  font: 700 9px var(--mono-font); letter-spacing: .14em;
  color: rgba(255, 255, 255, .55); white-space: nowrap;
}
.provbar .lnks { display: flex; gap: 4px; flex-wrap: wrap; }
.provbar a {
  font: 800 11px var(--font); letter-spacing: .02em; color: #fff;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.provbar a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.provbar a[aria-current="page"] { background: #fff; color: var(--sign-dk); }

/* ── guide sign panel ─────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .9),
              0 10px 30px rgba(0, 0, 0, .16);
}
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead img { width: 62px; height: 62px; flex: none; display: block; }
.word {
  font-weight: 900; font-size: clamp(28px, 5.4vw, 50px); line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.word .yl { color: var(--sign-sub); }
.tag {
  margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px);
  color: var(--sign-sub); letter-spacing: .01em;
}

/* The route plate (inherited; Hungary uses .nplate below).
   The real sign is white Transport lettering on motorway blue inside a white
   keyline — the "M 6" confirmation plate — so this one is motorway blue on the
   navy panel, outlined in white, rather than the solid white shield the
   Trans-Canada marker uses. */
.shield {
  background: var(--motorway); color: #fff; border: 2.5px solid #fff;
  border-radius: 6px; padding: 5px 11px 6px; text-align: center; line-height: 1;
  flex: none; display: inline-block; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.shield .a { font-size: 8px; font-weight: 700; letter-spacing: .16em; color: var(--motorway-sub); display: block; }
.shield .b { font-size: 20px; font-weight: 900; letter-spacing: .04em; display: block; color: #fff; }
.shield .c { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--motorway-sub); display: block; }

/* Junction-style chips — Britain numbers junctions, not exits. */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--sign-sub); }
.mm {
  background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: #fff;
}
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln {
  height: 3px; flex: 1;
  background: repeating-linear-gradient(90deg, var(--motorway) 0 18px, transparent 18px 34px);
}
.rule h2 {
  margin: 0; color: var(--motorway); font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ── cards ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0; overflow: hidden; display: block; color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); text-decoration: none; }
.card .chead {
  background: var(--motorway); color: #fff; padding: 9px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--blue); }
.card .chead.red { background: var(--sign); }
.card .chead .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--motorway-sub); }
.card .chead.blue .k { color: var(--blue-sub); }
.card .chead.red .k { color: var(--sign-sub); }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

/* ── controls ─────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--motorway); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: #08488a; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-go { background: var(--blue); color: #fff; border-color: #08488a; font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: #0b6bc4; color: #fff; }

select, input[type="text"], input[type="search"] {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font);
  font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary
   as `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it — which is how the wind options first shipped visible while switched off.
   Restore it once, globally, rather than re-winning the argument per component. */
[hidden] { display: none !important; }

label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. Shared by
   every model viewer, because a forecast loop is a forecast loop whether the frames
   are HRDPS hours or GDPS days.

   The range is index-based, so every frame gets equal width and the thumb always
   lands on one, and ticks are drawn on frames rather than at arbitrary clock times.
   Labels therefore thin out across a run exactly where its cadence coarsens. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--motorway); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel,
   not under the ends of the groove the thumb never reaches. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut);
  white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the accent green;
   the hours within that day are hairlines. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--motorway); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill. Sits between the scrubber and the tick strip, so the thing that says
   "the loop is ready" is directly under the thing you drag. It fades out once full
   rather than staying as chrome nobody needs. */
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2);
  overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%);
  background: var(--motorway); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
.tl-ends { display: flex; justify-content: space-between; gap: 10px;
  font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── buffer policy chrome ──────────────────────────────────
   New with the converged maptimeline.js. The buffer bar's dashed tail is the part of
   the run deliberately not fetched (see Timeline.buffer); LOAD ALL beside the frame
   counter fetches it, and says what that costs. The button is created by the module,
   so there is no markup for it here — only these rules. */
.tl-buffer { position: relative; }
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em;
           font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--sign); color: var(--sign); }


/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--motorway); color: #fff; border-color: var(--motorway); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all. Greyed as a block rather
   than hidden: a control that quietly vanishes reads as a bug, one that is greyed out
   reads as an answer, and a control strip that changes length as you switch models is
   disorienting. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

/* Breadcrumbs and drill chips are anchors now, not buttons, so places can be
   middle-clicked into a new tab and right-click-copied. They still have to look
   exactly like the controls they replaced — an underline on hover is the browser's
   idea, not ours. */
a.crumb, a.chip { text-decoration: none; display: inline-block; }
a.crumb:hover, a.chip:hover { text-decoration: none; }
.crumb.on { color: var(--ink); text-decoration: underline;
            text-decoration-color: var(--sign); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }

/* Unit toggle — a segmented control, but a primary one, so it is a touch larger
   than the speed menu and uses the maple red rather than the accent green. Two
   buttons rather than a menu: it is a binary people flip back and forth, and a
   select turns one click into two. */
#units button { font: 800 12px var(--mono-font); padding: 6px 11px; }
#units button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }

/* The wind overlay sits above the map and takes no pointer events — the map still
   drags and the value probe still reads through it. */
#wind-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
#wind-mode button { font: 700 10.5px var(--mono-font); padding: 5px 8px; }
#wind-mode button.on { background: var(--motorway); border-color: var(--motorway); color: #fff; }

/* ── misc ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge-live { background: var(--motorway); color: #fff; }
.badge-new { background: var(--sign); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }

.dim { color: var(--ink2); }
.faint { color: var(--mut); }

.site-footer {
  border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px;
  color: var(--ink2); font-size: 12px; font-weight: 600; background: #ddd8ce;
}
.site-footer a { color: var(--navy); font-weight: 800; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff;
  padding: 9px 14px; z-index: 200; font-weight: 800;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── wind options ─────────────────────────────────────────
   Sub-controls of the wind mode segment, and styled to read as subordinate to it:
   indented under a rule, smaller labels, and hidden outright when the active mode
   has nothing for them to change. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
             padding-left: 9px; border-left: 2px solid var(--line2); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Forecast Hungary — the Hungarian additions
   ═══════════════════════════════════════════════════════════════════════════ */

.atlas { font-family: var(--atlas-font); font-style: italic; }
.hu { font-family: var(--atlas-font); font-style: italic; font-weight: 500; }
.prose p { font-size: 14.5px; font-weight: 600; line-height: 1.62; color: var(--ink2); margin: 0 0 12px; }
.prose a, a.inl { color: var(--motorway); font-weight: 800; }
.prose h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sign); }
.prose ul { margin: 0 0 12px 18px; padding: 0; color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 1.6; }
.dim { color: var(--ink2); }
.faint { color: var(--mut); }

/* the tricolour under the masthead */
.tricolour { height: 5px; background: linear-gradient(180deg, var(--route) 0 33.4%, #fff 33.4% 66.7%, var(--sign) 66.7%); }

/* ── the sign: Hungarian above English ── */
.sign .hu-line { display: block; font: italic 500 clamp(15px, 2.6vw, 21px) var(--atlas-font); color: #fff; opacity: .92; letter-spacing: .01em; margin-bottom: 3px; line-height: 1.15; }
.word .yl { color: #fff; text-decoration: underline; text-decoration-color: var(--route); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.signhead .mark { flex: none; width: 66px; height: 66px; border-radius: 50%; background: var(--sign-dk); display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px #fff; }
.signhead .mark svg { width: 42px; height: 42px; }
/* the model plate: red keylined, like a route number */
.nplate { flex: none; background: var(--route); border: 2.5px solid #fff; border-radius: 5px; padding: 5px 10px 4px; text-align: center; min-width: 104px; line-height: 1; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.nplate .a { display: block; font: 800 8px var(--mono-font); letter-spacing: .16em; color: var(--route-lt); }
.nplate .b { display: block; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: .02em; margin: 4px 0 3px; }
.nplate .c { display: block; font: 700 8px var(--mono-font); letter-spacing: .12em; color: var(--route-lt); }
.mm .hu { color: var(--sign-sub); font-size: 12.5px; margin-left: 5px; font-weight: 500; }
.mm b { color: #fff; background: var(--route); border-radius: 3px; padding: 0 5px; margin-right: 4px; }

/* ── the plate ── */
.platewrap { position: relative; }
.plate {
  position: relative; background: #d6dcc6; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-hi);
}
.plate svg { display: block; width: 100%; height: auto; }
#plateMap .grat path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .7; stroke-dasharray: 3 5; }
#plateMap .tick { font: 700 9.5px var(--mono-font); fill: rgba(30, 40, 30, .55); letter-spacing: .06em; }
/* the neighbours: the same relief, under a paper veil */
#plateMap .nb path { fill: rgba(240, 238, 230, .50); stroke: rgba(70, 70, 60, .35); stroke-width: .6; }
#plateMap .near { font: 800 10.5px var(--font); letter-spacing: .3em; fill: rgba(60, 64, 56, .55); pointer-events: none; }
#plateMap .near-en { font: italic 500 11px var(--atlas-font); letter-spacing: .06em; fill: rgba(60, 64, 56, .5); pointer-events: none; }
#plateMap .riv path { fill: none; stroke: rgba(48, 104, 150, .62); stroke-linejoin: round; stroke-linecap: round; }
#plateMap .riv path.w1 { stroke-width: 1.7; stroke: rgba(40, 96, 145, .78); }
#plateMap .riv path.w2 { stroke-width: 1.1; }
#plateMap .riv path.w3 { stroke-width: .85; }
#plateMap .riv path.duna, #plateMap .riv path.tisza { stroke-width: 2; stroke: rgba(36, 92, 140, .82); }
#plateMap .lake path { fill: rgba(150, 192, 222, .97); stroke: rgba(48, 104, 150, .6); stroke-width: .5; }
#plateMap .rlabel text { font: italic 500 12px var(--atlas-font); fill: #2b5c84; letter-spacing: .12em; paint-order: stroke; stroke: rgba(255, 255, 255, .55); stroke-width: 2.4px; pointer-events: none; }
#plateMap .rlabel text.lk { font-size: 12.5px; letter-spacing: .08em; fill: #1f5279; }
#plateMap .land text { font-family: var(--atlas-font); font-style: italic; fill: rgba(60, 52, 32, .5); text-anchor: middle; pointer-events: none; }
#plateMap .cty path { fill: rgba(255, 255, 255, 0); stroke: rgba(40, 55, 40, .38); stroke-width: .7; stroke-dasharray: 2.5 2.5; transition: fill .15s; }
#plateMap .cty a:hover path, #plateMap .cty a:focus path { fill: rgba(255, 255, 255, .22); stroke: var(--sign-dk); stroke-width: 1.6; stroke-dasharray: none; }
#plateMap .cty path.w-yellow { fill: rgba(255, 209, 0, .38); stroke: rgba(170, 130, 0, .7); stroke-dasharray: none; }
#plateMap .cty path.w-orange { fill: rgba(255, 140, 0, .42); stroke: rgba(180, 90, 0, .8); stroke-dasharray: none; }
#plateMap .cty path.w-red { fill: rgba(224, 32, 42, .40); stroke: rgba(150, 10, 20, .85); stroke-dasharray: none; }
#plateMap .border { fill: none; stroke: rgba(30, 32, 28, .78); stroke-width: 1.5; stroke-linejoin: round; }
#plateMap .border-hi { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 4; stroke-linejoin: round; }
#plateMap .clabel text { font: 800 8.5px var(--font); letter-spacing: .2em; fill: rgba(35, 48, 35, .45); text-anchor: middle; pointer-events: none; text-transform: uppercase; }
#plateMap .pl { cursor: pointer; }
#plateMap .pl .dot { fill: var(--ink); stroke: #fff; stroke-width: 1.6; }
#plateMap .pl.capital .dot { fill: var(--route); stroke-width: 2; }
#plateMap .pl.lake .dot { fill: #2f6f9f; }
#plateMap .pl.peak .dot { fill: #7a4b24; }
#plateMap .pl:hover .dot, #plateMap .pl:focus .dot { stroke: var(--route); stroke-width: 3; }
#plateMap .pl text { font: 800 12px var(--font); fill: #10150f; paint-order: stroke; stroke: rgba(255, 255, 255, .88); stroke-width: 3.2px; stroke-linejoin: round; }
#plateMap .pl text.cap { font-weight: 900; letter-spacing: .06em; }
#plateMap .pl text.val { font: 800 11.5px var(--mono-font); fill: var(--motorway-dk); }
#plateMap .scale text { font: 700 9.5px var(--mono-font); fill: #22301f; letter-spacing: .08em; }
.platehint {
  position: absolute; left: 12px; top: 12px; max-width: 300px; pointer-events: none; opacity: 0;
  transition: opacity .12s; background: rgba(8, 20, 12, .9); color: var(--figure-tx);
  border: 1px solid var(--figure-line); border-radius: 6px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; font-weight: 600;
}
.platehint.on { opacity: 1; }
.platehint b { font-size: 14px; color: #fff; }
.platehint .en { color: var(--sign-sub); font-family: var(--atlas-font); font-style: italic; }
.platehint .v { font-family: var(--mono-font); color: #bfe6ff; }
.platehint .faint { color: var(--figure-mut); }
.legendrow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink2); align-items: center; }
.legendrow .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; border: 1.6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.legendrow .tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #7a4b24; vertical-align: 0; margin-right: 5px; }
.ctlrow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.ctlrow .lab { font: 700 9.5px var(--mono-font); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.seg button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }
.seg.acc button.on { background: var(--motorway); border-color: var(--motorway-dk); }

/* ── the model cards ── */
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 14px 16px; }
.mcard .who { font: 800 9.5px var(--mono-font); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.mcard h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 900; letter-spacing: -.005em; }
.mcard h3 .km { font: 800 11px var(--mono-font); color: #fff; background: var(--motorway); border-radius: 3px; padding: 2px 6px; margin-left: 6px; vertical-align: 3px; letter-spacing: .06em; }
.mcard p { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink2); }
.mcard .facts { font: 700 10.5px var(--mono-font); color: var(--ink2); letter-spacing: .04em; line-height: 1.6; }
a.mcard { display: block; color: inherit; transition: transform .14s, border-color .14s; }
a.mcard:hover { text-decoration: none; border-color: var(--sign); transform: translateY(-1px); }
.mcard.soon { border-style: dashed; }
.mcard .badge { display: inline-block; font: 800 9px var(--mono-font); letter-spacing: .14em; padding: 2px 6px; border-radius: 3px; background: var(--line2); color: var(--ink2); border: 1px solid var(--line); }

/* ── towns index and town pages ── */
.townlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.towncard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; box-shadow: var(--shadow); color: inherit; }
a.towncard:hover { text-decoration: none; border-color: var(--sign); transform: translateY(-1px); }
.towncard .nm { font-weight: 900; font-size: 15px; }
.towncard .hu { display: block; font-size: 13.5px; color: var(--ink2); }
.towncard .meta { font: 700 10px var(--mono-font); color: var(--mut); letter-spacing: .08em; margin-top: 4px; text-transform: uppercase; }
.towncard .now { font: 800 13px var(--mono-font); color: var(--motorway-dk); margin-top: 6px; }
.provhead { margin: 22px 0 8px; font: 900 13px var(--font); letter-spacing: .16em; color: var(--sign); text-transform: uppercase; }
.provhead .hu { text-transform: none; letter-spacing: .02em; font-size: 15px; color: var(--ink2); margin-left: 8px; }

.townhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; }
.townhead h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.townhead .en-name { display: block; font: italic 500 clamp(18px, 3vw, 24px) var(--atlas-font); color: var(--sign); margin-bottom: 4px; }
.townhead .where { font: 700 11px var(--mono-font); color: var(--mut); letter-spacing: .1em; text-transform: uppercase; }
.nowgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.nowgrid .k { font: 700 9.5px var(--mono-font); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.nowgrid .v { font: 900 26px var(--font); line-height: 1.15; }
.nowgrid .v small { font-size: 13px; font-weight: 700; color: var(--ink2); margin-left: 3px; }
.nowgrid .s { font: 700 11px var(--mono-font); color: var(--ink2); }
.meteo { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 10px 4px; overflow-x: auto; }
.meteo svg { display: block; min-width: 720px; width: 100%; height: auto; }
.meteo .ax { font: 700 10px var(--mono-font); fill: var(--mut); }
.meteo .axl { font: 800 9.5px var(--mono-font); letter-spacing: .12em; fill: var(--ink2); }
.meteo .grid { stroke: var(--line2); stroke-width: 1; }
.meteo .day { stroke: var(--line); stroke-width: 1; }
.meteo .now { stroke: var(--w-red); stroke-width: 1.4; stroke-dasharray: 3 3; }
.meteo .dayl { font: 800 11px var(--font); fill: var(--ink); letter-spacing: .06em; }
.meteo .src { font: 700 9px var(--mono-font); fill: var(--mut); letter-spacing: .08em; }
.meteo .srcband { fill: var(--line2); }
.meteo .t2 { fill: none; stroke: #d0452b; stroke-width: 2.2; stroke-linejoin: round; }
.meteo .td { fill: none; stroke: #2f8f5b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.meteo .alt { fill: none; stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
.meteo .ws { fill: none; stroke: var(--motorway); stroke-width: 2; }
.meteo .gust { fill: none; stroke: var(--motorway); stroke-width: 1; stroke-dasharray: 3 2; }
.meteo .bar { fill: #3f86c8; }
.meteo .mslp { fill: none; stroke: #6a5a8c; stroke-width: 1.6; }
.meteo .cloud { fill: #9aa3a8; }
.meteo .barb { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.meteo .zero { stroke: #6fa8dc; stroke-width: 1; stroke-dasharray: 2 2; }
.daystrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.dayc { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; box-shadow: var(--shadow); }
.dayc .d { font: 900 12px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.dayc .dhu { font: italic 500 12.5px var(--atlas-font); color: var(--ink2); display: block; }
.dayc .t { font: 900 20px var(--font); margin-top: 4px; }
.dayc .t .lo { font-size: 14px; color: var(--mut); font-weight: 800; margin-left: 4px; }
.dayc .m { font: 700 11px var(--mono-font); color: var(--ink2); margin-top: 3px; line-height: 1.5; }
.hrtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--card); }
.hrtable th, .hrtable td { padding: 5px 8px; border-bottom: 1px solid var(--line2); text-align: right; white-space: nowrap; }
.hrtable th { font: 800 9.5px var(--mono-font); letter-spacing: .1em; color: var(--mut); text-transform: uppercase; position: sticky; top: 0; background: var(--card); }
.hrtable td { font-family: var(--mono-font); font-weight: 700; }
.hrtable td:first-child, .hrtable th:first-child { text-align: left; }
.hrtable tr.day td { background: var(--line2); font-family: var(--font); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.tablewrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.twarn { margin: 14px 0 0; }

/* the four models on the town pages: the spine's source strip, the comparison lines,
   the table's model column — one colour each, everywhere */
.meteo .alt { fill: none; stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
.meteo .alt.wrf { stroke: #8a4fb3; stroke-dasharray: 5 3; }
.meteo .alt.iconeu { stroke: var(--motorway); stroke-dasharray: 2 2.5; }
.meteo .alt.ecmwf { stroke: #2f8f5b; stroke-dasharray: 7 2 2 2; }
.meteo .srcband.arome { fill: rgba(206, 41, 57, .28); }
.meteo .srcband.iconeu { fill: rgba(30, 93, 140, .28); }
.meteo .srcband.ecmwf { fill: rgba(47, 143, 91, .28); }
.meteo .src { fill: var(--ink2); }
.key { display: inline-block; width: 16px; height: 0; border-top: 2px dashed; vertical-align: 3px; }
.key.wrf { border-color: #8a4fb3; }
.key.iconeu { border-color: var(--motorway); border-top-style: dotted; }
.key.ecmwf { border-color: #2f8f5b; }
.hrtable td.srcc { font: 800 9.5px var(--mono-font); letter-spacing: .08em; text-align: left; }
.hrtable td.srcc.arome { color: var(--route-dk); }
.hrtable td.srcc.iconeu { color: var(--motorway-dk); }
.hrtable td.srcc.ecmwf { color: #2f8f5b; }
.hrtable td small { color: var(--mut); font-weight: 700; }
.dayc .srcl { font: 700 9px var(--mono-font); letter-spacing: .08em; color: var(--mut); margin-top: 5px; text-transform: uppercase; }
.townhead .en-name:empty { display: none; }

/* Light only: the network rule is never a dark page theme (no dark media-query
   override, no toggle). */
:root { color-scheme: light; }

@media (max-width: 620px) {
  .rule .sub { display: none; }
  .util .long { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The explorer — Forecast Russia's rules (Africa's before it), on this palette.
   Appended; nothing above is changed. Field picks are Danube blue, the model in
   use flag green, the framed region flag red.
   ═══════════════════════════════════════════════════════════════════════════ */

.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono-font); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.crumbs a { color: var(--motorway); }
.crumbs .sep { color: var(--line); }
.sign-tight { padding: 16px 20px 15px; }
.sign-tight .signhead > img { width: 52px; height: 52px; }

.xp { margin-top: 18px; }

/* ── the control bars ─────────────────────────────────── */
.xp-bar {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 15px; box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}
.xp-bar2 { margin-top: 9px; padding: 10px 15px; }
.xp-grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-grow { flex: 1 1 320px; }
.xp-desc { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--mut);
  line-height: 1.4; }

/* The model picker. Three buttons, each carrying the centre that made the model and
   the resolution it runs at — because on this page "which model" and "whose model"
   are the same question, and the answer is the reason to click. */
.mdls { display: flex; gap: 7px; flex-wrap: wrap; }
.mdl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 7px;
  padding: 7px 13px 6px; cursor: pointer; font-family: var(--font); color: var(--ink2);
  transition: border-color .12s, background .12s, color .12s; line-height: 1.15;
}
.mdl .n { font-size: 15px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); }
.mdl .c { font-family: var(--mono-font); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; color: var(--mut); }
.mdl .r { font-family: var(--mono-font); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; color: var(--mut); }
.mdl:hover:not(:disabled) { border-color: var(--sign); }
.mdl.on { background: var(--sign); border-color: var(--sign-dk); }
.mdl.on .n, .mdl.on .c, .mdl.on .r { color: #fff; }
.mdl.on .c, .mdl.on .r { color: var(--sign-sub); }
.mdl.dead { opacity: .4; cursor: not-allowed; }

/* The field picker. A field the active model does not publish is greyed rather than
   removed — see the note in explorer.js. */
.flds { display: flex; gap: 5px; flex-wrap: wrap; }
.fld {
  font: 800 11.5px var(--font); letter-spacing: .02em; background: var(--card);
  color: var(--ink2); border: 1px solid var(--line); border-radius: 5px;
  padding: 6px 11px; cursor: pointer; transition: .12s;
}
.fld:hover:not(:disabled) { border-color: var(--motorway); color: var(--ink); }
.fld.on { background: var(--motorway); border-color: var(--motorway-dk); color: #fff; }
.fld.off { opacity: .35; cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

.rgns { display: flex; gap: 5px; flex-wrap: wrap; }
.rgn {
  font: 700 11px var(--mono-font); letter-spacing: .04em; text-transform: uppercase;
  background: var(--card); color: var(--ink2); border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 12px; cursor: pointer; transition: .12s;
}
.rgn:hover { border-color: var(--motorway); color: var(--motorway-dk); }

#opacity { width: 150px; accent-color: var(--sign); }

/* ── the map stage ────────────────────────────────────── */
.xp-stage {
  position: relative; margin-top: 11px; border-radius: 10px; overflow: hidden;
  background: #0a0e14; border: 1px solid #223142;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
#map { width: 100%; height: min(74vh, 820px); min-height: 420px; }

/* MapLibre's own chrome, re-dressed to the site rather than left as its default blue */
.maplibregl-ctrl-group { border-radius: 6px !important; box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; }
.maplibregl-ctrl-scale { background: rgba(10,14,20,.6) !important; border-color: rgba(255,255,255,.4) !important;
  color: #dfe6ea !important; font-family: var(--mono-font) !important; font-size: 10px !important; }

.xp-hud {
  position: absolute; top: 12px; left: 12px; right: 12px; display: flex;
  justify-content: space-between; align-items: flex-start; gap: 12px;
  pointer-events: none; z-index: 2;
}
.xp-stamp {
  background: rgba(10, 14, 20, .82); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px; padding: 7px 12px; color: #fff; line-height: 1.15;
}
.xp-stamp .sv { display: block; font: 900 17px var(--mono-font); letter-spacing: .02em; }
.xp-stamp .sf { display: block; font: 700 10.5px var(--mono-font); letter-spacing: .1em;
  color: #9fc4e0; margin-top: 2px; }

.xp-read {
  background: rgba(10, 14, 20, .82); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px; padding: 7px 12px; text-align: right; min-width: 120px;
}
.xp-read:empty { display: none; }
.xp-read .pv { display: block; font: 900 19px var(--mono-font); color: #fff; }
.xp-read .pv.dim { color: #6f8496; }
.xp-read .pxy { display: block; font: 700 10px var(--mono-font); letter-spacing: .06em;
  color: #9fb3c4; margin-top: 2px; }

.xp-attrib {
  position: absolute; bottom: 0; right: 0; z-index: 2;
  background: rgba(10, 14, 20, .74); color: #b9c9d6; border-radius: 6px 0 0 0;
  padding: 5px 11px; font: 700 10px var(--mono-font); letter-spacing: .05em;
  text-transform: uppercase;
}
.xp-attrib a { color: #9fc4e0; }

/* The pinned point for the compare readout. A ring rather than a filled dot: whatever
   is under it is the thing being measured, and a solid marker hides it. */
.pinmark {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(10, 14, 20, .75);
  background: transparent; cursor: crosshair;
}

.xp-offset {
  margin: 9px 0 0; font: 700 12px var(--font); color: var(--route-dk);
  background: #fbe9eb; border: 1px solid #e9a7ae; border-radius: 6px;
  padding: 8px 12px;
}

/* ── legend and compare ───────────────────────────────── */
.xp-legend, .xp-compare {
  margin-top: 11px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 15px; box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}
.lg-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 9px; }
.lg-t { font-size: 14.5px; font-weight: 900; letter-spacing: -.01em; }
.lg-u { font-family: var(--mono-font); font-size: 11px; font-weight: 700;
  color: var(--mut); margin-left: 5px; }

.lg-bar { height: 15px; border-radius: 3px; border: 1px solid var(--line);
  overflow: hidden; }
/* A banded table draws hard steps and a continuous ramp draws a gradient, from the
   same stop array — the only thing that differs is whether the colour is allowed to
   interpolate, which is exactly the difference between the two products. */
.lg-bar.banded { display: flex; }
.lg-bar.banded span { flex: 1 1 0; }
.lg-ax { display: flex; justify-content: space-between; margin-top: 4px;
  font: 700 10px var(--mono-font); color: var(--mut); }

.cmp-rows { display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cmp-empty { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 600;
  color: var(--mut); }
.cmp {
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px;
  background: var(--paper2); display: flex; flex-direction: column; gap: 1px;
}
/* The model currently drawn on the map is marked, so the column you are reading is
   tied to the picture you are looking at. */
.cmp.on { border-color: var(--sign); background: #fff;
  box-shadow: inset 3px 0 0 var(--sign); }
.cmp .cm { font-family: var(--mono-font); font-size: 10px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--mut); }
.cmp .cv { font-size: 21px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.cmp .cs { font-family: var(--mono-font); font-size: 10px; font-weight: 700;
  color: var(--mut); }

/* The explorer fades in once the catalogs are in and the first frame is placed —
   without it the page shows a working map with no field on it for a beat, which reads
   as broken rather than as loading. */
.xp-stage, .xp-legend, .xp-compare, .timeline { transition: opacity .3s ease; }
body:not(.ready) .xp-legend, body:not(.ready) .xp-compare { opacity: .45; }

@media (max-width: 700px) {
  #map { height: 62vh; }
  .xp-hud { top: 8px; left: 8px; right: 8px; }
  .xp-stamp .sv { font-size: 14px; }
}

/* The map's own failure state. MapLibre needs WebGL2 and some machines do not have it;
   the rest of the page is still worth reading, so the frame says what happened instead
   of sitting black and empty. */
.xp-nomap {
  margin: 0; padding: 40px 30px; text-align: center; color: #b9c9d6;
  font-size: 14px; font-weight: 700; line-height: 1.6; max-width: 560px;
  margin-inline: auto;
}

/* ── the explorer's second tier of controls ───────────────
   Everything above the fold is the reading instrument — model, field, run, time. The
   rest is how the map *looks*, which matters and is not what anyone opens the page
   for, so it folds away behind one summary. Open it and it is all there; leave it shut
   and the map is bigger. */
.xp-more {
  margin-top: 9px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, .07); overflow: hidden;
}
.xp-more > summary {
  cursor: pointer; padding: 10px 15px; font-family: var(--mono-font);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink2); list-style: none; display: flex; align-items: center; gap: 8px;
}
.xp-more > summary::-webkit-details-marker { display: none; }
.xp-more > summary::before { content: "▸"; color: var(--sign); font-size: 13px; }
.xp-more[open] > summary::before { content: "▾"; }
.xp-more > summary:hover { color: var(--sign); }
.xp-bar3 { border: 0; border-top: 1px solid var(--line2); border-radius: 0;
  box-shadow: none; gap: 24px; }

.xp-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xp-inline select { max-width: 168px; }

/* A checkbox and its word, as one target. Used for the boundary overlays and the
   Smooth switch — both are on/off facts about the picture rather than settings, so
   they read as a list of things that are or are not drawn. */
.switch {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--ink2);
  letter-spacing: 0; text-transform: none;
}
.switch input { accent-color: var(--sign); margin: 0; cursor: pointer; }
.switch:hover { color: var(--ink); }
.switch input:disabled { cursor: not-allowed; }
.switch:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.overlay-box {
  display: grid; gap: 3px 14px; grid-template-columns: repeat(2, minmax(120px, 1fr));
}

/* Sub-controls of the wind mode segment, styled as subordinate to it: indented under
   a rule, smaller labels, and absent outright when the mode has nothing for them to
   change — barbs have no seeding and no animation speed. */
.wind-opts {
  display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
  padding-left: 9px; border-left: 2px solid var(--line2);
}
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }

/* The wind overlay is a canvas of its own above the map, because a streamline
   animation composites frame to frame and must not be cleared by MapLibre's redraw.
   It takes no pointer events, so the map still drags and the probe still reads
   through it. */
#wind-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* MapLibre's attribution, re-dressed to the site. It carries OpenStreetMap and
   whichever imagery basemap is on, and both of those are conditions of use. */
.maplibregl-ctrl-attrib {
  background: rgba(10, 14, 20, .74) !important; color: #b9c9d6 !important;
  font-family: var(--mono-font) !important; font-size: 10px !important;
}
.maplibregl-ctrl-attrib a { color: #9fc4e0 !important; }

@media (max-width: 860px) {
  .overlay-box { grid-template-columns: 1fr; }
  .xp-bar3 { gap: 16px; }
}

/* ── Forecast Hungary's explorer additions ── */
:root { --paper2: #f3f2ec; }
.rgn.on { background: var(--route); border-color: var(--route-dk); color: #fff; }
.rgn.on:hover { color: #fff; }
.rgn.cty { font-size: 10px; padding: 4px 10px; letter-spacing: .02em; text-transform: none; font-family: var(--font); font-weight: 800; }
.xp-counties { margin-top: 7px; }
.xp-counties > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px var(--mono-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.xp-counties > summary::-webkit-details-marker { display: none; }
.xp-counties > summary::before { content: "▸"; color: var(--route); font-size: 12px; }
.xp-counties[open] > summary::before { content: "▾"; }
.xp-counties > summary .hu { text-transform: none; letter-spacing: .02em; font-size: 12px; color: var(--mut); }
.xp-counties .rgns { margin-top: 7px; }
.mdl.dead .r { color: var(--route); }
.mdl.dead { background: var(--paper2); border-style: dashed; }
.xp-status { font: 700 11.5px var(--font); color: var(--ink2); }
.xp-status:empty { display: none; }
.sign-tight .signhead .mark { width: 52px; height: 52px; }
.sign-tight .signhead .mark svg { width: 34px; height: 34px; }
.card .chead.green { background: var(--sign); }
.card .chead.green .k { color: var(--sign-sub); }
.card .chead.route { background: var(--route); }
.card .chead.route .k { color: var(--route-lt); }
.stamp { font-family: var(--mono-font); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
/* MapLibre's own attribution sits above the explorer's model strip, not under it */
.xp-stage .maplibregl-ctrl-bottom-right { bottom: 24px; }
/* the pointer readout clears MapLibre's zoom buttons in the top-right corner */
.xp-stage .xp-hud { right: 58px; }
/* the stamp, the readout and the credit strip stay above the wind canvas */
.xp-stage .xp-hud, .xp-stage .xp-attrib { z-index: 5; }