/* cloudiusz — the public weather map. One full-height map with glass panels floating over it.
   Tokens follow docs/DESIGN.md ("Night sky"): a deep navy ground, one amber accent, one sky-blue
   secondary. Spacing is a 4px scale; every panel carries the same inner padding; text has three
   roles (display / label / body). The only colours not from the tokens are the mask colours,
   which come from MaskPreset and are painted inline, and the layer swatches inside the chips. */

:root {
  color-scheme: dark;
  --ground: #0B1020; --surface: rgba(18,24,44,.90); --surface-solid: #121A2E; --surface2: #1B2540;
  --line: rgba(148,163,210,.18); --line-strong: rgba(148,163,210,.32); --line-hi: rgba(255,255,255,.06);
  --text: #ECEFF7; --muted: #97A2BF; --faint: #5F6A87;
  --sun: #F5B342; --sun-strong: #FFC662; --sun-ink: #FFE3AE; --sky: #5FB8FF; --good: #34D399; --warn: #FBBF24; --bad: #F87171;
  --viz-grid: rgba(148,163,210,.12); --viz-axis: rgba(148,163,210,.28); --viz-ink: #ECEFF7; --viz-muted: #97A2BF;
  --display: 'Bricolage Grotesque', 'Avenir Next', Helvetica, Arial, sans-serif;
  --body: Manrope, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --pad: 16px; --gap: 12px; --edge: 20px;
  --r-panel: 16px; --r-card: 12px; --r-ctl: 10px; --r-chip: 999px;
  --shadow: 0 1px 0 var(--line-hi) inset, 0 12px 32px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 0 var(--line-hi) inset, 0 6px 18px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 120ms; --t: 200ms; --t-slow: 360ms;
  --left-w: 340px; --card-w: 380px;
  --peek: 84px;    /* height of the collapsed bottom sheet on phones */
  --tl-h: 144px;   /* height of the timeline panel; the forecast and meteogram pad their end by it */
  --bar: env(safe-area-inset-bottom, 0px);  /* how far the app runs past the usable bottom edge, see .xp below */
}
* { box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--body); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
/* touch-action keeps browser pinch/double-tap zoom off the chrome so a pinch is either Leaflet's (the
   map sets its own touch-action) or nothing; panning stays allowed so the scrollable panes still scroll,
   and overscroll-behavior stops them scroll-chaining into the page. */
.xp { position: fixed; inset: 0; overflow: hidden; background: var(--ground); touch-action: pan-x pan-y; }
/* iOS Safari sizes a fixed, inset: 0 element to the small viewport, so the app stops dead at the top of
   the translucent bottom toolbar. Made 100lvh tall it runs on underneath (the map shows through the
   blur), and everything anchored to the bottom is lifted by the difference, --bar, which puts it back
   on the visible bottom edge: above the toolbar in Safari's bottom-bar layout, and on the screen edge
   where the bar is at the top (iPad, Android, the top-bar setting) or there is no bar at all. As a
   home-screen app there is no toolbar but the home indicator, so the bottom safe-area inset is part
   of --bar too; the status bar is drawn over the page there, hence the top inset on the top strip. */
@supports (height: 100lvh) {
  :root { --bar: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px)); }
  .xp { bottom: auto; height: 100lvh; }
}
.xp-pane, .xp-suggest, .xp-layers, .xp-scroll { overscroll-behavior: contain; }
.xp-map { position: absolute; inset: 0; background: var(--ground); }
.xp-muted { color: var(--muted); }
.xp :focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.xp .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0; }

/* ── Text roles ─────────────────────────────────────────────────────────────────────────────── */
.xp-lbl, .xp-facts dt, .xp-table th { font-family: var(--body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
.xp-lbl-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: var(--s1); }

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────── */
@keyframes xpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes xpSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes xpPulse { 0% { opacity: .9; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); } }
@keyframes xpShimmer { to { background-position: -200% 0; } }
@keyframes xpDraw { to { stroke-dashoffset: 0; } }
@keyframes xpFadeIn { from { opacity: 0; } }
@keyframes xpGrow { from { transform: scaleY(0); } }
body.is-ready .xp-left > *, body.is-ready .xp-card, body.is-ready .xp-timeline, body.is-ready .xp-footer { animation: xpIn var(--t-slow) var(--ease) both; }
body.is-ready .xp-left > :nth-child(2) { animation-delay: 60ms; }
body.is-ready .xp-left > :nth-child(3) { animation-delay: 120ms; }
body.is-ready .xp-card { animation-delay: 90ms; }
body.is-ready .xp-timeline { animation-delay: 180ms; }
body.is-ready .xp-footer { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ── Leaflet chrome. Leaflet adds .leaflet-touch on every pointer-capable browser, so its own
   .leaflet-touch rules must be out-specified here, not just re-declared. ───────────────────── */
.leaflet-container { background: var(--ground); font-family: inherit; }
.leaflet-bottom .leaflet-control, .leaflet-top .leaflet-control { margin: 0; }
/* Attribution is rendered by the page itself (.xp-footer on desktop, the card's footer on smaller screens). */
.leaflet-container .leaflet-control-attribution { display: none; }
.leaflet-touch .leaflet-bar, .leaflet-bar { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); border-radius: var(--r-ctl); overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; background: transparent; color: var(--text); border-bottom: 1px solid var(--line); transition: background var(--t), color var(--t); }
.leaflet-touch .leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-touch .leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:last-child { border-radius: 0; }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: rgba(148,163,210,.12); color: #fff; }
.leaflet-bar a:focus-visible { outline: 2px solid var(--sun); outline-offset: -2px; }
.leaflet-bar a.leaflet-disabled, .leaflet-bar a.leaflet-disabled:hover { background: transparent; color: var(--faint); cursor: default; }
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out, .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: 500 22px/40px var(--body); text-indent: 0; }
.leaflet-top.leaflet-right { top: var(--edge); right: calc(var(--card-w) + var(--edge) * 2); }
.leaflet-bottom.leaflet-left { bottom: calc(var(--edge) + var(--bar)); left: var(--edge); }
.leaflet-bottom.leaflet-right { bottom: calc(var(--edge) + var(--bar)); right: var(--edge); }
/* The OSM basemap is drawn for a light page; inverting it gives the dark ground the weather colours were designed for. */
.xp-basemap { filter: invert(1) hue-rotate(200deg) brightness(.72) contrast(.9) saturate(.25); }
.leaflet-pane.xp-fade { transition: opacity 260ms ease; }

/* Selected-point pin: a pulsing amber dot, no image assets needed. */
.xp-pin { position: relative; }
.xp-pin::before, .xp-pin::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.xp-pin::before { width: 14px; height: 14px; background: var(--sun); border: 3px solid var(--ground); box-shadow: 0 0 0 2px rgba(245,179,66,.55), 0 0 18px rgba(245,179,66,.6); }
.xp-pin::after { width: 14px; height: 14px; border: 2px solid var(--sun); animation: xpPulse 1.8s ease-out infinite; }

/* ── Panels ─────────────────────────────────────────────────────────────────────────────────── */
.xp-panel { background: var(--surface); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); color: var(--text); }
.xp-left { position: absolute; left: var(--edge); top: calc(var(--edge) + env(safe-area-inset-top, 0px)); width: var(--left-w); display: flex; flex-direction: column; gap: var(--gap); z-index: 500; max-height: calc(100% - var(--edge) * 2 - 140px); }
.xp-section { padding: var(--pad); }
.xp-section + .xp-section { border-top: 1px solid var(--line); }
.xp-section > .xp-lbl { margin-bottom: var(--s3); }

/* Brand bar */
.xp-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s2) var(--s3) var(--pad); min-height: 64px; }
.xp-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #fff; text-decoration: none; line-height: 1; }
.xp-mark svg { width: 28px; height: 28px; flex: 0 0 auto; }
.xp-brand-actions { display: flex; align-items: center; gap: var(--s1); }
.xp-linkbtn { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 var(--s3); border-radius: var(--r-ctl); min-height: 40px; transition: background var(--t), color var(--t); }
.xp-linkbtn:hover { color: #fff; background: rgba(148,163,210,.10); }
.xp-linkbtn.inline { padding: 0; min-height: 0; font-size: inherit; font-weight: 600; color: var(--muted); border-radius: 2px; }
.xp-linkbtn.inline:hover { background: none; color: var(--sun-ink); }

/* Buttons and chips */
.xp button, .xp select, .xp input[type=search] { font: inherit; }
.xp .xp-chip, .xp .xp-iconbtn { background: rgba(148,163,210,.08); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 0 14px; height: 36px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast), box-shadow var(--t); }
.xp .xp-chip:hover, .xp .xp-iconbtn:hover { background: rgba(148,163,210,.16); color: #fff; border-color: var(--line-strong); }
.xp .xp-chip:active, .xp .xp-iconbtn:active { transform: scale(.97); }
.xp .xp-chip[aria-checked=true], .xp .xp-chip[aria-pressed=true] { background: rgba(245,179,66,.14); border-color: rgba(245,179,66,.7); color: var(--sun-ink); }
.xp .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.xp .xp-iconbtn { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: var(--r-ctl); }
.xp-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xp-ico.sm { width: 18px; height: 18px; }
.xp .xp-play .xp-ico { fill: currentColor; stroke: none; }

/* Search */
.xp-search { padding: var(--s2); transition: border-color var(--t), box-shadow var(--t); }
.xp-search:focus-within { border-color: rgba(245,179,66,.6); box-shadow: var(--shadow), 0 0 0 3px rgba(245,179,66,.12); }
.xp-search-row { display: flex; align-items: center; gap: var(--s2); }
.xp-search-row > .xp-ico { color: var(--muted); flex: 0 0 auto; margin-left: var(--s2); }
.xp #xpQ { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #fff; padding: 0; font-size: 15px; min-height: 40px; }
.xp #xpQ::placeholder { color: var(--faint); }
.xp #xpQ:focus { outline: none; }
.xp #xpQ::-webkit-search-cancel-button { -webkit-appearance: none; }
.xp-suggest { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); max-height: 300px; overflow: auto; }
.xp-suggest li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 0 var(--s2) 0 calc(var(--s2) + 28px); border-radius: var(--r-ctl); cursor: pointer; font-size: 14px; min-height: 40px; transition: background var(--t-fast); }
.xp-suggest li[aria-selected=true], .xp-suggest li:hover { background: rgba(245,179,66,.12); }
.xp-suggest li .xp-muted { font-size: 11px; white-space: nowrap; color: var(--faint); }
.xp-suggest li.xp-suggest-action { color: var(--sky); justify-content: center; padding-left: var(--s2); }
.xp-suggest li.xp-suggest-empty { color: var(--faint); cursor: default; }
.xp-suggest li.xp-suggest-empty:hover { background: transparent; }
.xp-recent { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s2) 0 0 calc(var(--s2) + 28px); }
.xp-recent .xp-chip { height: 30px; font-size: 12px; padding: 0 var(--s3); }
.xp-note { margin: var(--s2) 0 0 calc(var(--s2) + 28px); font-size: 12px; color: var(--muted); }

/* Layers panel */
.xp-layers { overflow: auto; padding: 0; }
.xp-layers-row { display: flex; gap: var(--s2); align-items: flex-start; }
.xp-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.xp-legend { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.xp-legend span { flex: 1; }
.xp-legend-row { display: flex; align-items: baseline; gap: var(--s2); margin-top: 6px; }
.xp-legend-labels { flex: 1 1 auto; display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.xp-legend-unit { font-size: 11px; color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.xp-ctl-grid { display: flex; flex-direction: column; gap: var(--s3); }
.xp-ctl { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 24px; font-size: 13px; color: var(--muted); }
.xp-ctl input[type=range] { width: 150px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; --fill: 80%; }
.xp-ctl input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sun) var(--fill), var(--line-strong) var(--fill)); }
.xp-ctl input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.xp-ctl input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sun); }
.xp-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ground); box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform var(--t-fast); }
.xp-ctl input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ground); }
.xp-ctl input[type=range]:hover::-webkit-slider-thumb, .xp-ctl input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.xp-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: 0 0 auto; }
.xp-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.xp-switch i { position: absolute; inset: 0; border-radius: 10px; background: var(--line-strong); transition: background var(--t); }
.xp-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform var(--t) var(--ease); }
.xp-switch input:checked + i { background: var(--sun); }
.xp-switch input:checked + i::after { transform: translateX(16px); }
.xp-switch input:disabled + i { opacity: .4; }
.xp-switch input:focus-visible + i { outline: 2px solid var(--sun); outline-offset: 2px; }
.xp .xp-layers-toggle { display: none; }

/* ── Location card (desktop: a right-hand panel; phones: a bottom sheet, see below) ────────── */
.xp-card { position: absolute; right: var(--edge); top: calc(var(--edge) + env(safe-area-inset-top, 0px)); bottom: calc(var(--edge) + var(--bar)); width: var(--card-w); z-index: 500; display: flex; flex-direction: column; overflow: hidden; }
.xp-sheet-handle { display: none; }
.xp-card-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) var(--pad); min-height: 64px; border-bottom: 1px solid var(--line); }
.xp-place { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xp-place h2 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; margin-left: -6px; color: #fff; }
.xp-place p { margin: 0; font-size: 12px; color: var(--faint); }
.xp-card-actions { display: flex; gap: var(--s1); flex: 0 0 auto; }
.xp-peek, .xp #xpSheetToggle, .xp #xpSheetClose { display: none; }
#xpCardBody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.xp-status { padding: 0 var(--pad); font-size: 12px; color: var(--muted); }
.xp-status:not(:empty) { padding: var(--s3) var(--pad) 0; }
.xp-status.bad { color: var(--bad); }
.xp-pane { flex: 1 1 auto; overflow: auto; padding: var(--pad); -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: var(--s4); transition: opacity var(--t); }
.xp-pane::-webkit-scrollbar { width: 8px; }
.xp-pane::-webkit-scrollbar-thumb { background: rgba(148,163,210,.18); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.xp-pane::-webkit-scrollbar-thumb:hover { background-color: rgba(148,163,210,.32); }
.xp-pane.xp-dim { opacity: .55; }

/* Hero */
.xp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.xp-hero-main { display: flex; gap: var(--s3); align-items: center; grid-column: 1; min-width: 0; }
.xp-hero-main.is-changing { animation: xpSwap 160ms var(--ease) both; }
.xp-hero-text { min-width: 0; }
.xp-hero-icon { width: 60px; height: 60px; flex: 0 0 auto; color: var(--sky); transition: color var(--t); }
.xp-hero-icon svg { width: 60px; height: 60px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xp-hero.is-empty .xp-hero-icon { color: var(--faint); }
.xp-hero-temp { font-family: var(--display); font-size: 56px; font-weight: 800; color: #fff; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.xp-hero-unit { font-size: 20px; color: var(--muted); margin: 8px 0 0 3px; font-weight: 600; letter-spacing: 0; }
.xp-hero-desc { font-size: 15px; color: var(--text); margin-top: var(--s1); font-weight: 600; }
.xp-hero-desc::first-letter { text-transform: uppercase; }
.xp-hero-when { font-size: 12px; margin-top: 2px; color: var(--muted); }
.xp-hero.is-loading .xp-hero-temp, .xp-hero.is-loading .xp-hero-desc, .xp-hero.is-loading .xp-hero-when { color: transparent !important; background: linear-gradient(90deg, var(--surface2), #243052, var(--surface2)); background-size: 200% 100%; animation: xpShimmer 1.4s linear infinite; border-radius: 6px; }
.xp-hero.is-loading .xp-hero-unit { color: transparent; }
.xp-compass { grid-column: 2; grid-row: 1; width: 76px; text-align: center; }
.xp-compass svg { width: 64px; height: 64px; display: block; margin: 0 auto; }
.xp-compass-ring { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.xp-compass-n { fill: var(--faint); font-size: 12px; text-anchor: middle; font-weight: 700; }
.xp-compass-arrow { fill: var(--sun); transform-origin: 50px 50px; transition: transform var(--t-slow) var(--ease), opacity var(--t); }
.xp-compass-arrow circle { fill: var(--ground); }
.xp-compass-val { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.xp-compass-val strong { display: block; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.xp-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.xp-facts div { background: rgba(148,163,210,.06); border: 1px solid rgba(148,163,210,.10); border-radius: var(--r-card); padding: 10px 12px; min-width: 0; overflow: hidden; }
.xp-facts dt { margin-bottom: var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-facts dd { margin: 0; font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.xp-facts dd small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 3px; }

/* Verdict strips: one row per mask, one cell per hour. Colour is doubled by the title text and
   the check glyph in the row label, so the strip is never colour-alone. */
.xp-verdicts { display: grid; gap: var(--s1); }
.xp-verdict { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--s2); font-size: 11px; color: var(--muted); }
.xp-verdict .lbl { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-verdict .cells { display: flex; gap: 1px; height: 10px; }
.xp-verdict .cells i { flex: 1; border-radius: 1px; background: var(--surface2); display: block; cursor: pointer; transition: transform var(--t-fast); }
.xp-verdict .cells i:hover { transform: scaleY(1.4); }
.xp-verdict .cells i.on { background: var(--c); }
.xp-verdict .cells i.na { background: repeating-linear-gradient(45deg, var(--surface2) 0 2px, var(--surface-solid) 2px 4px); }
.xp-verdict .cells i.cur { outline: 1px solid var(--text); outline-offset: -1px; }

/* Charts: inline SVG, recessive hairline grid, 2px lines, ≤ 24px bars with 3px rounded caps. */
.xp-charts { display: grid; gap: var(--s2); }
.xp-charts-empty { margin: 0; padding: var(--s5) var(--s3); text-align: center; font-size: 13px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.xp-chart { position: relative; background: rgba(148,163,210,.05); border: 1px solid rgba(148,163,210,.10); border-radius: var(--r-card); padding: var(--s3) 14px var(--s2); }
.xp-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: 12px; color: var(--muted); margin-bottom: var(--s2); }
.xp-chart-head strong { color: var(--text); font-weight: 700; }
.xp-chart-legend { display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.xp-chart-legend i { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 1px; }
.xp-chart-legend i.rect { height: 8px; width: 8px; border-radius: 2px; }
.xp-chart svg { display: block; width: 100%; height: 92px; overflow: visible; }
.xp-chart .grid line { stroke: var(--viz-grid); stroke-width: 1; }
.xp-chart .axis text { fill: var(--viz-muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.xp-chart .zero line { stroke: var(--viz-axis); stroke-width: 1; }
.xp-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xp-chart .ln.draw { animation: xpDraw 700ms var(--ease) forwards; }
.xp-chart .area { opacity: .14; }
.xp-chart .area.fade { animation: xpFadeIn 500ms var(--ease) both; }
.xp-chart .bar { transform-box: fill-box; transform-origin: bottom; }
.xp-chart .bar.grow { animation: xpGrow 400ms var(--ease) both; }
.xp-chart .mk { stroke: var(--surface-solid); stroke-width: 2; }
.xp-chart .xh { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.xp-chart .xh.cur { stroke: var(--sun); transition: transform var(--t-fast) linear; }
.xp-chart .xh.hov { transition: opacity var(--t-fast); }
.xp-chart .lbl text { fill: var(--viz-ink); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface-solid); stroke-width: 3px; stroke-linejoin: round; }
.xp-chart .hit { fill: transparent; cursor: crosshair; }
.xp-tip { position: absolute; top: 36px; z-index: 5; pointer-events: none; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 6px 10px; font-size: 11px; color: var(--text); box-shadow: var(--shadow-sm); min-width: 124px; opacity: 0; transform: translateY(4px); transition: opacity var(--t-fast), transform var(--t-fast); }
.xp-tip.show { opacity: 1; transform: none; }
.xp-tip .t { color: var(--muted); margin-bottom: 3px; }
.xp-tip .r { display: flex; justify-content: space-between; gap: 12px; }
.xp-tip .r span { display: inline-flex; align-items: center; gap: 6px; }
.xp-tip .r strong { font-variant-numeric: tabular-nums; }

/* Hour table */
.xp-table-wrap { font-size: 12px; }
.xp-table-wrap summary { cursor: pointer; color: var(--muted); font-weight: 700; min-height: 36px; display: flex; align-items: center; gap: var(--s2); list-style: none; border-radius: var(--r-ctl); padding: 0 var(--s2); margin: 0 calc(var(--s2) * -1); transition: background var(--t), color var(--t); }
.xp-table-wrap summary::-webkit-details-marker { display: none; }
.xp-table-wrap summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t); margin-left: 2px; }
.xp-table-wrap[open] summary::before { transform: rotate(45deg); }
.xp-table-wrap summary:hover { background: rgba(148,163,210,.08); color: var(--text); }
.xp-scroll { overflow: auto; max-width: 100%; }
.xp-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: var(--s1); }
.xp-table th { text-align: left; font-size: 10px; padding: 6px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-solid); }
.xp-table td { padding: 5px 6px; border-bottom: 1px solid rgba(148,163,210,.08); white-space: nowrap; color: var(--text); transition: background var(--t-fast); }
.xp-table tr { cursor: pointer; }
.xp-table tr:hover td { background: rgba(148,163,210,.06); }
.xp-table tr.cur td { background: rgba(245,179,66,.12); }
.xp-table td.num { text-align: right; }

/* Attribution inside the card and the desktop bottom strip */
/* On desktop the bottom strip carries the attribution; on the sheet it lives at the end of the card. */
.xp-attrib { display: none; margin: auto 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); line-height: 1.5; }
.xp-attrib a { color: var(--muted); text-decoration: none; }
.xp-attrib a:hover { color: var(--sun-ink); }
.xp-footer { position: absolute; left: var(--edge); bottom: calc(var(--edge) + var(--bar)); z-index: 450; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); pointer-events: none; max-width: var(--left-w); }
.xp-footer > * { pointer-events: auto; }
.xp-attrib-strip { display: inline-block; padding: 7px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 11px; line-height: 1.5; color: var(--faint); }
.xp-attrib-strip a { color: var(--muted); text-decoration: none; transition: color var(--t); }
.xp-attrib-strip a:hover { color: var(--sun-ink); }
.xp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border-radius: var(--r-chip); color: var(--muted); font-weight: 600; font-size: 12px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast); }
.xp-badge:hover { color: #fff; border-color: var(--line-strong); }
.xp-badge:active { transform: scale(.97); }
.xp-badge b { color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 14px; }

/* ── Timeline ──────────────────────────────────────────────────────────────────────────────── */
.xp-timeline { position: absolute; left: calc(var(--left-w) + var(--edge) * 2); right: calc(var(--card-w) + var(--edge) * 2); bottom: calc(var(--edge) + var(--bar)); z-index: 600; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "controls label" "rail rail"; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) var(--pad); background: var(--surface); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.xp-tl-controls { grid-area: controls; display: flex; align-items: center; gap: var(--s2); }
.xp-tl-controls select { height: 36px; padding: 0 28px 0 12px; font-size: 12px; font-weight: 600; background: rgba(148,163,210,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A2BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--text); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color var(--t), background-color var(--t); }
.xp-tl-controls select:hover { border-color: var(--line-strong); }
.xp-tl-controls .xp-chip { height: 36px; padding: 0 14px; font-size: 12px; }
.xp .xp-play { width: 40px; height: 40px; border-radius: var(--r-chip); background: var(--sun); color: var(--ground); border-color: var(--sun); box-shadow: 0 4px 14px rgba(245,179,66,.35); }
.xp .xp-play:hover { background: var(--sun-strong); color: var(--ground); border-color: var(--sun-strong); }
.xp-tl-rail { grid-area: rail; position: relative; height: 56px; }
.xp-tl-ticks { position: absolute; left: 0; right: 0; top: 0; height: 56px; pointer-events: none; }
.xp-tl-ticks i { position: absolute; top: 22px; width: 1px; height: 12px; background: var(--line); }
.xp-tl-ticks i.six { top: 20px; height: 16px; background: var(--line-strong); }
.xp-tl-ticks i.day { top: 16px; height: 24px; background: var(--muted); }
.xp-tl-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 14px; }
.xp-tl-ticks span.first { transform: none; }
.xp-tl-ticks span.last { transform: translateX(-100%); }
.xp-tl-ticks span.day { color: var(--text); font-weight: 700; }
.xp-tl-window { position: absolute; left: 0; right: 0; top: 21px; height: 14px; background: rgba(245,179,66,.10); border-radius: 3px; pointer-events: none; }
.xp-tl-now { position: absolute; top: 16px; width: 2px; height: 24px; background: var(--good); pointer-events: none; border-radius: 1px; }
.xp-tl-now::after { content: "now"; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--good); font-weight: 700; letter-spacing: .04em; }
.xp-tl-verdict { position: absolute; left: 0; right: 0; top: 38px; height: 4px; pointer-events: none; }
.xp-tl-verdict i { position: absolute; top: 0; height: 100%; border-radius: 1px; }
.xp-tl-rail input[type=range] { position: absolute; left: 0; right: 0; top: 10px; width: 100%; margin: 0; height: 36px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; --fill: 0%; }
.xp-tl-rail input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sun) var(--fill), var(--line-strong) var(--fill)); }
.xp-tl-rail input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.xp-tl-rail input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sun); }
.xp-tl-rail input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ground); box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform var(--t-fast); }
.xp-tl-rail input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ground); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.xp-tl-rail input[type=range]:hover::-webkit-slider-thumb, .xp-tl-rail input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.xp-tl-rail input[type=range]:focus-visible { outline: none; }
.xp-tl-rail input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sun-ink); outline-offset: 2px; }
.xp-tl-label { grid-area: label; font-size: 13px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xp-tl-label .xp-muted { display: block; font-size: 11px; font-weight: 500; }
.xp-tl-label .pill { margin-left: 6px; }

/* Empty state, toast, pills */
.xp-empty { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 700; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5) var(--s6); max-width: calc(100% - 32px); box-shadow: var(--shadow); }
.xp-empty h2 { margin: 0 0 6px; color: #fff; font-size: 18px; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.xp-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.xp-toast { position: absolute; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -8px); opacity: 0; z-index: 800; background: var(--surface-solid); border: 1px solid rgba(245,179,66,.6); color: var(--sun-ink); border-radius: var(--r-ctl); padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow); max-width: calc(100% - 32px); transition: opacity var(--t), transform var(--t) var(--ease); }
.xp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.xp .pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; background: rgba(148,163,210,.15); color: var(--muted); vertical-align: middle; }

/* About dialog */
.cz-about { border: 1px solid var(--line); border-radius: 20px; background: var(--surface-solid); color: var(--text); padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), overlay var(--t) allow-discrete, display var(--t) allow-discrete; }
.cz-about[open] { opacity: 1; transform: none; }
.cz-about.closing { opacity: 0; transform: translateY(12px) scale(.98); }
@starting-style { .cz-about[open] { opacity: 0; transform: translateY(12px) scale(.98); } }
.cz-about::backdrop { background: rgba(5,8,18,.6); backdrop-filter: blur(6px); transition: opacity var(--t); }
.cz-about.closing::backdrop { opacity: 0; }
.cz-about-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.cz-about-head { display: flex; align-items: center; justify-content: space-between; }
.cz-about h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.cz-about p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cz-pakumi { display: flex; flex-direction: column; gap: 10px; padding: var(--pad); border-radius: 14px; background: rgba(245,179,66,.08); border: 1px solid rgba(245,179,66,.28); }
.cz-pakumi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cz-pakumi .xp-lbl { color: var(--sun); }
.cz-pakumi-logo { display: block; height: 30px; width: auto; flex: none; }
.cz-pakumi p { color: var(--text); }
.cz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 44px; border-radius: var(--r-card); background: var(--sun); color: var(--ground); font-weight: 700; font-size: 14px; text-decoration: none; border: 0; font-family: inherit; cursor: pointer; transition: background var(--t), transform var(--t-fast); }
.cz-btn:hover { background: var(--sun-strong); }
.cz-btn:active { transform: scale(.98); }
.cz-btn.sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--r-ctl); }
.cz-privacy { display: flex; flex-direction: column; gap: 10px; padding: var(--pad); border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
.cz-privacy .xp-lbl { color: var(--sky); }
.cz-privacy p { color: var(--text); }
.cz-privacy code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; color: var(--sun-ink); }
.cz-link { display: inline-flex; align-items: center; gap: var(--s1); color: var(--sky); font-weight: 600; font-size: 13px; text-decoration: none; transition: color var(--t); }
.cz-link:hover { color: #fff; }
.cz-link .xp-ico { transition: transform var(--t); }
.cz-link:hover .xp-ico { transform: translateX(3px); }

/* Privacy note: a cookie banner with nothing to consent to. Amber on purpose — it is the one loud thing on the page.
   Docked at the bottom, just above the timeline, on every breakpoint. */
.cz-note { position: absolute; left: 50%; bottom: calc(var(--tl-h) + var(--edge) * 2 + var(--bar)); transform: translateX(-50%) translateY(8px); z-index: 650; display: flex; align-items: center; gap: var(--s3); width: min(560px, calc(100% - var(--edge) * 2)); padding: 12px 12px 12px 16px; border-radius: var(--r-panel); background: var(--sun); color: var(--ground); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 32px rgba(5,8,18,.45), var(--shadow-sm); opacity: 0; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.cz-note.show { opacity: 1; transform: translateX(-50%); }
.cz-note.hide { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.cz-note > .xp-ico { flex: none; color: var(--ground); }
.cz-note p { flex: 1 1 200px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ground); text-wrap: pretty; }
.cz-note-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.cz-note-link { color: var(--ground); font-weight: 700; font-size: 13px; text-decoration: none; padding: 0 var(--s1); border-bottom: 1px solid rgba(11,16,32,.35); transition: border-color var(--t); }
.cz-note-link:hover { border-color: var(--ground); }
.cz-note .cz-btn { background: var(--ground); color: var(--sun); }
.cz-note .cz-btn:hover { background: var(--surface-solid); }
.cz-note :focus-visible { outline-color: var(--ground); }
@media (max-width: 760px) {
  .cz-note { bottom: calc(var(--peek) + var(--tl-h) + var(--edge) * 3 + var(--bar)); flex-wrap: wrap; padding: 14px; }
  .cz-note p { flex-basis: calc(100% - 20px - var(--s3)); }
  .cz-note-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cz-note, .cz-note.show, .cz-note.hide { transition: none; transform: translateX(-50%); } }
.cz-credits { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--faint); border-top: 1px solid var(--line); padding-top: 14px; }
.cz-credits a { color: var(--muted); text-decoration: none; }
.cz-credits a:hover { color: var(--sun-ink); }

/* ── Tablet: the left column narrows and the card becomes a sheet. ─────────────────────────── */
@media (max-width: 1100px) {
  :root { --left-w: 300px; }
  .xp #xpSheetToggle, .xp #xpSheetClose { display: inline-flex; }
  .leaflet-top.leaflet-right { right: var(--edge); }
  .xp-timeline { right: var(--edge); }
  .xp-footer { display: none; }
  .xp-attrib { display: block; }
  .xp-card { left: calc(var(--left-w) + var(--edge) * 2); right: var(--edge); width: auto; top: auto; bottom: calc(166px + var(--bar)); max-height: 50%; transition: max-height var(--t-slow) var(--ease); }
  .xp-card:not(.open) { max-height: 64px; }
  .xp-card:not(.open) .xp-card-head { border-bottom: 0; }
  .xp-card.open .xp-card-actions #xpSheetToggle { display: none; }
  .xp-card:not(.open) .xp-card-actions #xpSheetClose { display: none; }
}

/* ── Phones: a top strip (brand + search + layer chips), the card as a bottom sheet that peeks
   above the timeline, the zoom control tucked bottom-right, everything ≥ 44px tall. ───────── */
@media (max-width: 760px) {
  :root { --edge: 12px; --pad: 14px; }
  .xp-left { left: var(--edge); right: var(--edge); top: calc(var(--edge) + env(safe-area-inset-top, 0px)); width: auto; gap: var(--s2); max-height: none; }
  .xp-brand { padding: var(--s2) var(--s2) var(--s2) var(--pad); min-height: 56px; }
  .xp-mark { font-size: 20px; }
  .xp-search { padding: 6px; }
  .xp-suggest li, .xp-recent, .xp-note { padding-left: calc(6px + 28px); }
  .xp-layers { overflow: visible; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .xp-layers .xp-section { padding: 0; border-top: 0; }
  .xp-layers .xp-legend-wrap, .xp-layers .xp-masks-wrap, .xp-layers .xp-ctl-grid { display: none; }
  .xp-layers.open { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-height: 52vh; overflow: auto; animation: xpIn var(--t) var(--ease) both; }
  .xp-layers.open .xp-section { padding: var(--pad); }
  .xp-layers.open .xp-section + .xp-section { border-top: 1px solid var(--line); }
  .xp-layers.open .xp-legend-wrap, .xp-layers.open .xp-masks-wrap { display: block; }
  .xp-layers.open .xp-ctl-grid { display: flex; }
  .xp-layers .xp-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .xp-layers .xp-chips::-webkit-scrollbar { display: none; }
  .xp-layers.open .xp-chips { flex-wrap: wrap; padding: 0; }
  .xp-layers:not(.open) .xp-chip { background: var(--surface); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .xp-layers:not(.open) .xp-chip[aria-checked=true] { background: rgba(38,33,26,.94); border-color: var(--sun); color: var(--sun-ink); }
  .xp .xp-layers-toggle { display: inline-flex; flex: 0 0 auto; background: var(--surface); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .xp-layers.open .xp-layers-toggle { background: rgba(245,179,66,.14); border-color: var(--sun); color: var(--sun-ink); }

  .xp-card { position: absolute; left: 0; right: 0; top: auto; bottom: var(--bar); width: auto; max-height: 78vh; height: 78vh; border-radius: 20px 20px 0 0; border-bottom: 0; background: rgba(18,24,44,.97); transform: translateY(calc(100% - var(--peek))); transition: transform .32s var(--ease); }
  .xp-card.open { transform: none; z-index: 650; }
  .xp-card.dragging { transition: none; }
  .xp-sheet-handle { display: flex; justify-content: center; padding: 10px 0 2px; cursor: grab; touch-action: none; }
  .xp-sheet-handle:active { cursor: grabbing; }
  .xp-sheet-handle i { width: 40px; height: 4px; border-radius: 2px; background: rgba(148,163,210,.35); }
  .xp-card-head { padding: 2px var(--pad) var(--s3); min-height: 0; border-bottom: 0; }
  .xp-card.open .xp-card-head { border-bottom: 1px solid var(--line); }
  .xp-place h2 { font-size: 18px; }
  .xp-card:not(.open) .xp-card-head { height: calc(var(--peek) - 24px); }
  .xp-card:not(.open) .xp-card-actions #xpSheetClose { display: none; }
  .xp-card.open .xp-card-actions #xpSheetToggle { display: none; }
  .xp:has(.xp-card.open) .leaflet-control-zoom, .xp:has(.xp-card.open) .xp-timeline { visibility: hidden; }
  .xp-peek { align-items: center; gap: 10px; }
  .xp-card:not(.open) .xp-peek { display: flex; }
  .xp-card:not(.open) .xp-card-actions .xp-iconbtn:not(#xpSheetToggle) { display: none; }
  .xp-peek-temp { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
  .xp-peek-icon { width: 28px; height: 28px; color: var(--sky); }
  .xp-peek-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .xp-attrib { padding-bottom: var(--s2); }

  .xp-timeline { left: var(--edge); right: var(--edge); bottom: calc(var(--peek) + var(--edge) + var(--bar)); gap: var(--s2) var(--s3); padding: var(--s3) var(--pad); }
  .xp-tl-label { font-size: 12px; }
  .leaflet-top.leaflet-right { top: auto; bottom: calc(var(--peek) + 148px + var(--bar)); right: var(--edge); }
  .xp-footer { display: none; }
}
@media (max-width: 380px) {
  .xp-mark span { display: none; }
  .xp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── View switcher: three icon segments in a 40px control, an amber pill slides to --i. ───── */
.xp-nav { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 2px; --seg: 36px; --i: 0; background: rgba(148,163,210,.08); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.xp-nav::before { content: ""; position: absolute; top: 2px; left: 2px; width: var(--seg); height: calc(100% - 4px); border-radius: 8px; background: rgba(245,179,66,.14); box-shadow: inset 0 0 0 1px rgba(245,179,66,.7); transform: translateX(calc(var(--i) * var(--seg))); transition: transform var(--t) var(--ease); }
.xp-nav a { position: relative; z-index: 1; width: var(--seg); height: 100%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 8px; text-decoration: none; transition: color var(--t); }
.xp-nav a:hover { color: #fff; }
.xp-nav a[aria-current=page] { color: var(--sun-ink); }
.xp-nav a:focus-visible { outline-offset: -2px; }

/* ── Views: data-view on <main> decides which chrome is on screen; the map view is untouched. ── */
.xp-view { display: none; position: absolute; inset: 0; left: calc(var(--left-w) + var(--edge) * 2); z-index: 400; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tl-h) - var(--edge) * 2 - var(--bar)), transparent calc(100% - var(--edge) - var(--bar))); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tl-h) - var(--edge) * 2 - var(--bar)), transparent calc(100% - var(--edge) - var(--bar))); }
.xp[data-view=forecast] #xpForecast, .xp[data-view=meteogram] #xpMeteogram { display: block; }
.xp:not([data-view=map]) .xp-map, .xp:not([data-view=map]) .xp-card, .xp:not([data-view=map]) .xp-layers, .xp:not([data-view=map]) #xpLocate { display: none; }
.xp:not([data-view=map]) .xp-timeline { right: var(--edge); }
.xp-view-inner { max-width: 960px; margin: 0 auto; padding: var(--edge) var(--edge) calc(var(--tl-h) + var(--edge) * 2 + var(--bar)); display: flex; flex-direction: column; gap: var(--s4); }
.xp-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.xp-view-head .xp-place h2 { font-size: 28px; white-space: normal; }
.xp-view-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sun); margin: 0 0 var(--s1); }
.xp-view-meta { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.xp-charts-tall .xp-chart-head { flex-wrap: wrap; }
body.is-ready .xp-view { animation: xpIn var(--t-slow) var(--ease) both; animation-delay: 60ms; }
.xp-view.is-entering { animation: xpIn var(--t) var(--ease) both; }
.xp-view .xp-attrib { display: block; }
.xp-view .xp-charts-empty { padding: var(--s6) var(--s4); }

/* ── Forecast: hero for the chosen hour, day cards, hour rows. ────────────────────────────── */
.xp-fc-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: center; padding: var(--pad) var(--s5); background: rgba(148,163,210,.05); border: 1px solid rgba(148,163,210,.10); border-radius: var(--r-panel); }
.xp-fc-hero .xp-hero-icon, .xp-fc-hero .xp-hero-icon svg { width: 96px; height: 96px; }
.xp-fc-hero .xp-hero-temp { font-size: 88px; }
.xp-fc-hero .xp-hero-unit { font-size: 26px; margin-top: 12px; }
.xp-fc-hero .xp-hero-desc { font-size: 17px; }
.xp-fc-hero .xp-hero-when { font-size: 13px; }
.xp-fc-hero .xp-facts { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.xp-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); }
.xp-day { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); background: rgba(148,163,210,.06); border: 1px solid rgba(148,163,210,.12); border-radius: var(--r-card); color: var(--muted); cursor: pointer; text-align: left; font: inherit; min-height: 44px; transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast); }
.xp-day:hover { background: rgba(148,163,210,.12); color: #fff; }
.xp-day:active { transform: scale(.98); }
.xp-day[aria-selected=true] { background: rgba(245,179,66,.14); border-color: rgba(245,179,66,.7); color: var(--sun-ink); }
.xp-day .d { white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.01em; }
.xp-day .d small { font-weight: 500; font-family: var(--body); font-size: 12px; color: var(--muted); margin-left: 5px; letter-spacing: 0; }
.xp-day .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.xp-day .ic { width: 36px; height: 36px; color: var(--sky); flex: 0 0 auto; }
.xp-day .ic svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xp-day .hl { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; color: #fff; font-family: var(--display); letter-spacing: -.02em; }
.xp-day .hl span { color: var(--muted); font-weight: 600; font-size: 14px; font-family: var(--body); margin-left: 4px; }
.xp-day .m { font-size: 11px; font-variant-numeric: tabular-nums; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.xp-day .m b { color: var(--text); font-weight: 700; }
.xp-day .flags { display: flex; gap: 4px 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.xp-day .flags span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.xp-hours { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(148,163,210,.10); border-radius: var(--r-card); overflow: hidden; background: rgba(148,163,210,.03); }
.xp-hour { white-space: nowrap; display: grid; grid-template-columns: 56px 32px 56px 110px 120px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s4); border-bottom: 1px solid rgba(148,163,210,.08); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--t-fast); }
.xp-hour:last-child { border-bottom: 0; }
.xp-hour:hover { background: rgba(148,163,210,.06); }
.xp-hour.cur { background: rgba(245,179,66,.12); box-shadow: inset 3px 0 0 var(--sun); }
.xp-hour.past { color: var(--muted); }
.xp-hour.past .tp, .xp-hour.past .ic { opacity: .55; }
.xp-hour.na { color: var(--faint); }
.xp-hour .t { font-weight: 700; }
.xp-hour .ic { width: 28px; height: 28px; color: var(--sky); }
.xp-hour .ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xp-hour .tp { font-size: 16px; font-weight: 700; color: #fff; }
.xp-hour .pr { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.xp-hour .pr i { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.xp-hour .pr i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--sky); border-radius: 2px; }
.xp-hour .wd { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.xp-hour .wd svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.xp-hour .wd small { color: var(--faint); font-size: 11px; }
.xp-hour .ds { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-hour .ds::first-letter { text-transform: uppercase; }
.xp-hour .vd { display: flex; gap: 4px; min-width: 24px; justify-content: flex-end; }
.xp-hour .vd i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.xp-hours-head { display: grid; grid-template-columns: 56px 32px 56px 110px 120px minmax(0, 1fr) auto; gap: var(--s3); padding: 8px var(--s4); border-bottom: 1px solid var(--line); }

/* ── Meteogram: six tall charts sharing one crosshair. ─────────────────────────────────────── */
.xp-charts-tall { gap: var(--s3); }
.xp-charts-tall .xp-chart { padding: var(--s3) var(--s4) var(--s2); }
.xp-charts-tall .xp-chart svg { height: 150px; }
.xp-charts-tall .xp-tip { top: 40px; }
.xp-chart-cur { color: var(--sun-ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.xp-chart .xh.now { stroke: var(--good); stroke-dasharray: 2 3; }
.xp-chart .axis text.hr { fill: var(--faint); }

@media (min-width: 761px) and (max-width: 1100px) {
  .xp-brand .xp-mark span { display: none; }
}
@media (max-width: 1100px) {
  .xp-fc-hero .xp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xp-days { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--edge) * -1); padding: 2px var(--edge); scrollbar-width: none; }
  .xp-days::-webkit-scrollbar { display: none; }
  .xp-day { flex: 0 0 148px; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .xp-view { left: 0; padding-top: calc(var(--top-h, 128px) + var(--s3)); }
  .xp-view-inner { padding: 0 var(--edge) calc(var(--tl-h) + var(--edge) * 2 + var(--bar)); gap: var(--s3); }
  .xp:not([data-view=map]) .xp-timeline { bottom: calc(var(--edge) + var(--bar)); }
  .xp-view-head .xp-place h2 { font-size: 22px; }
  .xp-fc-hero { padding: var(--pad); gap: var(--s3) var(--s4); }
  .xp-fc-hero .xp-hero-icon, .xp-fc-hero .xp-hero-icon svg { width: 64px; height: 64px; }
  .xp-fc-hero .xp-hero-temp { font-size: 64px; }
  .xp-fc-hero .xp-hero-unit { font-size: 20px; margin-top: 8px; }
  .xp-hour, .xp-hours-head { grid-template-columns: 48px 28px 48px minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2); padding: 0 var(--s3); }
  .xp-hours-head { padding: 8px var(--s3); }
  .xp-hour .ds, .xp-hours-head .ds { display: none; }
  .xp-hour .pr i { width: 32px; }
}

/* iOS Safari zooms the page when a focused field is under 16px and never quite zooms back out.
   Last so it wins over the desktop sizes above. */
@media (pointer: coarse) { .xp #xpQ, .xp-tl-controls select { font-size: 16px; } }