/* Map page, on top of style.css (shared tokens, nav, theme button). Only the map's own tokens and layout live here. */
:root {
  /* map tokens (read by theme.js) */
  --land: #22262b; --water: #141b22; --shore: #3d4852; --roads: #4f555d; --labels: #b4b9c0;
  --coast: #8d99a6; --coast-sat: #d9dee5; --prob-map: #8fb4e8; --night-tint: 0.62 0.66 0.88;
  /* radar footprint wash (Forecast view): colour and opacity at full coverage; a lighter land */
  --radar-wash: #59616b; --radar-wash-alpha: 0.08;
}
/* light: the map's backdrop is a darker grey than the text pages' */
:root[data-theme='light'] {
  --bg: #c9ccd0;
  --land: #bfc3c8; --water: #a5b4bd; --shore: #8a969e; --roads: #989ba0; --labels: #33373d;
  --coast: #4f5a66; --coast-sat: #f4f6f8; --prob-map: #2c5fb3; --night-tint: 0.72 0.76 0.88;
  --radar-wash: #ffffff; --radar-wash-alpha: 0.12;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #c9ccd0;
    --land: #bfc3c8; --water: #a5b4bd; --shore: #8a969e; --roads: #989ba0; --labels: #33373d; --coast: #4f5a66;
    --radar-wash: #ffffff; --radar-wash-alpha: 0.12; --night-tint: 0.72 0.76 0.88;
  }
}

html, body { height: 100%; }
body { font: 400 13px/1.45 var(--font); overflow: hidden; }

.glass, .card, .timebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }

/* the shared nav floats over the full-screen map (a centred pill) */
.map-page .nav { position: fixed; left: 50%; margin: 0; transform: translateX(-50%); }

/* ---------- map ---------- */
/* The map is NOT position: fixed. iOS Safari 26 tints the strips around its floating bars from the background of fixed
   elements touching the screen edges and draws no fixed content behind its toolbar: a fixed map painted grey strips.
   In the page instead (absolute, the large viewport's height), on a root painted in the map's land colour. */
#map { position: absolute; top: 0; left: 0; right: 0; height: 100vh; background: var(--land); }
@supports (height: 100lvh) { #map { height: 100lvh; } }
html:has(body.map-page), body.map-page { background: var(--land); overscroll-behavior: none; }
.maplibregl-canvas { outline: none; }
/* as wide as its sentence up to the screen, clear of the side buttons (left: 50% alone squeezed it into half the width:
   a lone "5 s..." line) */
.boot { position: fixed; z-index: 5; top: 45%; left: 50%; transform: translateX(-50%); padding: 10px 14px; color: var(--text-dim);
        width: max-content; max-width: min(420px, calc(100vw - 112px)); text-wrap: balance; }

/* ---------- top overlay: toolbar (left), point panel (right) ---------- */
.overlay-top { position: fixed; z-index: 5; top: calc(var(--nav-h) + var(--gutter)); left: var(--gutter-l); right: var(--gutter-r); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); pointer-events: none; }
.overlay-top > * { pointer-events: auto; }
.card { padding: 10px 12px; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.toolbar { width: 300px; display: flex; flex-direction: column; gap: 9px; }
/* radar outage banner: centred under the nav (beside the controls card when it shows), full width on phones */
.outage { display: flex; align-items: flex-start; gap: 8px; max-width: 440px; margin: 0 auto; padding: 8px 12px 8px 10px;
          font-size: 12.5px; line-height: 1.4; color: var(--text); border-left: 3px solid var(--warn); }
body:has(#map.dev-split) .outage { margin-top: 46px; } /* dev mode: below the two panes' variant pickers */
.outage-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-row { display: flex; align-items: center; gap: 6px; }
.tool-row .spacer { flex: 1; }
.seg { display: flex; background: var(--surface-2); border-radius: 9px; padding: 2px; }
.seg button { flex: 1; padding: 5px 11px; border-radius: 7px; color: var(--text-dim); font-weight: 500; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked='true'] { background: var(--text); color: var(--bg); }
.seg button:disabled { color: var(--text-faint); cursor: not-allowed; }
.method-row { display: flex; align-items: center; gap: 8px; }
.method-label { color: var(--text-dim); font-size: 12px; }
.seg-sm { flex: 1; }
.seg-sm button { padding: 3px 9px; font-size: 12px; }
.pill { min-height: 28px; padding: 3px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); font-weight: 500; }
.pill:hover { color: var(--text); border-color: var(--text-faint); }
.pill[aria-pressed='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }
.view-note { margin: 0; font-size: 12px; color: var(--text-dim); }

/* map corner button (locate), above the attribution "i" */
.map-btn { position: fixed; z-index: 6; right: var(--gutter-r); bottom: calc(var(--gutter) + 48px + env(safe-area-inset-bottom)); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.map-btn:hover { color: var(--text); }
.map-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-btn::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; } /* 44 px touch target */

.panel { width: 300px; max-height: calc(100dvh - var(--nav-h) - 150px); overflow: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-toggle { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.sheet-toggle .chev { display: none; }
.sheet-grip { display: none; }
.spark-wrap { position: relative; cursor: ew-resize; touch-action: none; }
.spark-cursor { position: absolute; top: 4px; bottom: 0; width: 0; border-left: 1.5px solid var(--text); opacity: 0.75; pointer-events: none; }
.point-at { flex: none; cursor: pointer; font-family: inherit; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.panel .close { width: 24px; height: 24px; font-size: 16px; line-height: 1; }
.headline { margin: 4px 0 1px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.point-place, .point-conf { color: var(--text-dim); font-size: 12px; }
.panel #spark { display: block; width: 100%; height: 84px; margin: 8px 0 4px; }
.spark-axis { position: relative; height: 14px; font-size: 10px; color: var(--text-faint); }
.spark-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.spark-axis span.l { transform: none; }
.spark-axis span.r { transform: translateX(-100%); }
.spark-axis span.ax-now { color: var(--text-dim); font-weight: 600; }
.spark-key { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.spark-key:empty { display: none; }
.spark-key i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.meta { margin: 6px 0 0; font-size: 11px; color: var(--text-faint); }
.warn { color: var(--warn); font-weight: 600; }
.pt-marker { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(0, 0, 0, 0.5); }

/* ---------- time bar ---------- */
.bottom { position: fixed; z-index: 5; left: var(--gutter-l); right: calc(var(--gutter-r) + 34px); bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.bottom > * { pointer-events: auto; }
/* point forecast: docked on the time bar, one card with it (point.js moves the panel into .bottom), on every screen */
.bottom { flex-direction: column; align-items: center; }
.bottom .panel { width: 100%; max-width: 800px; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; box-shadow: none; }
.bottom .panel:not([hidden]) + .timebar { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid var(--border); }
/* a compact sheet on every screen: the headline line folds the rest away (point.js) */
.bottom .panel { max-height: none; overflow: visible; padding: 6px 14px 8px; }
.panel .eyebrow { display: none; }
.sheet-toggle { cursor: pointer; flex-direction: row; align-items: center; gap: 6px; min-height: 30px; }
.sheet-toggle .headline { flex: 1; min-width: 0; }
.sheet-toggle .chev { display: block; }
.panel[data-state='open'] .chev { transform: rotate(180deg); }
.panel[data-state='folded'] .sheet-body { display: none; }
.panel[data-state='folded'] .panel-head { padding-bottom: 0; }
.bottom .headline { font-size: 15px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottom .point-place, .bottom .point-conf { display: inline; font-size: 11.5px; }
.bottom .point-conf:not(:empty)::before { content: ' · '; }
.bottom .panel #spark { height: 56px; margin: 6px 0 2px; }
.bottom .spark-key { margin-top: 3px; font-size: 10.5px; }
.bottom .meta { margin-top: 3px; font-size: 10.5px; }
.timebar { position: relative; width: 100%; max-width: 800px; display: flex; align-items: center; gap: 12px; padding: 5px 16px 5px 8px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.play { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; flex: none; }
.play::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; } /* 44 px touch target */
.play .i-pause { display: none; fill: currentColor; } .play .i-play { fill: currentColor; }
.play[data-playing='1'] .i-pause { display: block; } .play[data-playing='1'] .i-play { display: none; }
.readout { display: flex; flex-direction: column; width: 136px; min-width: 136px; flex: none; line-height: 1.15; overflow: hidden; }
.clock-row { display: flex; align-items: baseline; gap: 5px; }
.clock { font-size: 17px; font-weight: 560; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tz { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.rel-row { display: flex; align-items: center; gap: 6px; min-height: 16px; }
.live { display: inline-flex; align-items: center; gap: 5px; min-height: 18px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.live i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.live:hover { color: var(--text); border-color: var(--text-dim); }
.timebar[data-live='1'] .live { color: var(--dry); border-color: color-mix(in srgb, var(--dry) 45%, transparent); background: color-mix(in srgb, var(--dry) 12%, transparent); }
.timebar[data-live='1'] .live i { background: var(--dry); border: 0; animation: live-pulse 2.4s ease-out infinite; }
.timebar[data-live='1']:not([data-live-rel='1']) .rel { display: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dry) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.rel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* fixed width: a changing label must never resize the track while scrubbing or playing */
.status { flex: none; display: inline-flex; align-items: center; gap: 6px; width: 236px; min-width: 236px; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.status .long, .status .short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dry); flex: none; }
.status[data-stale='1'] .dot { background: var(--warn); }
.status[data-stale='1'] { color: var(--warn); }
.status .short { display: none; }
.track-wrap { flex: 1; min-width: 0; padding: 0 8px; }
.track { position: relative; outline: none; -webkit-tap-highlight-color: transparent; height: 38px; cursor: pointer; touch-action: none; user-select: none; }
.track * { cursor: inherit; } /* one cursor over the whole track: no flicker between rail, ticks and markers */
.track[data-drag] { cursor: grabbing; }
.track::before { content: ''; position: absolute; inset: -10px -10px; } /* the whole track and a margin round it are the touch target */
.rail { position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: var(--surface-2); outline: 1px solid var(--border); overflow: hidden; }
.rail-past { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--dry) 22%, transparent); }
.rail-skill { position: absolute; top: 0; bottom: 0; }
.rail-done { position: absolute; inset: 0 auto 0 0; background: var(--text-dim); opacity: 0.55; }
.tick { position: absolute; top: 25px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: var(--text-faint); pointer-events: none; }
.tick i { width: 1px; height: 4px; background: currentColor; opacity: 0.7; }
.tick span { font-size: 9.5px; line-height: 1.1; margin-top: 1px; }
.now { position: absolute; top: 12px; height: 16px; width: 0; border-left: 2px solid var(--accent); margin-left: -1px; z-index: 1; pointer-events: none; }
.now span { position: absolute; top: -11px; left: 0; transform: translateX(-50%); padding: 0 3px; border-radius: 3px; line-height: 1.2; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--surface); }
.thumb { position: absolute; z-index: 2; top: 13px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--bg), 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: none; }
.track[data-drag] .thumb { box-shadow: 0 0 0 3px var(--bg), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 5px color-mix(in srgb, var(--text) 22%, transparent); }
.track:focus-visible { outline: none; }
.track:focus-visible:not([data-ptr]) .thumb { box-shadow: 0 0 0 3px var(--bg), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- attribution ---------- */
.attrib { position: fixed; z-index: 6; right: var(--gutter-r); bottom: calc(var(--gutter) + 12px + env(safe-area-inset-bottom)); }
.attrib-btn { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: italic 600 13px/1 Georgia, serif; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
/* a 40 px touch target on the button itself (a hit on its own pseudo-element is a click on the button) */
.attrib-btn::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.attrib-btn:hover, .attrib[data-pinned='1'] .attrib-btn { color: var(--text); }
/* hidden by opacity only, so the links stay reachable by keyboard; tabbing in opens it */
.attrib-list { display: flex; opacity: 0; pointer-events: none; position: absolute; right: 0; bottom: 100%; width: max-content; max-width: min(340px, calc(100vw - 24px)); flex-direction: column; gap: 3px; padding: 8px 12px; margin-bottom: 6px; font-size: 11px; line-height: 1.4; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.attrib[data-pinned='1'] .attrib-list, .attrib:has(:focus-visible) .attrib-list { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .attrib:hover .attrib-list { opacity: 1; pointer-events: auto; } }
.attrib-h { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.attrib-warn { margin-top: 3px; color: var(--text-faint); }

/* ---------- phone / narrow ---------- */
@media (max-width: 759px) {
  :root { --tb-h: 86px; } /* the two-row time bar's height (bottom sheet and corner buttons sit above it) */
  .overlay-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar { width: 100%; }
  .outage { max-width: none; margin: 0; }
  /* point forecast on phones: the sheet full width, swipe up / down (point.js), a grip to show it */
  .bottom { align-items: stretch; }
  .bottom .panel { max-width: none; padding: 2px 12px 8px; touch-action: none; }
  .sheet-grip { display: block; width: 32px; height: 4px; margin: 4px auto 2px; border-radius: 2px; background: var(--border); }
  .panel #spark { height: 48px; }
  /* time bar: row 1 = play, clock, Live, status; row 2 = the track, full width */
  .bottom { right: var(--gutter-r); }
  .timebar { max-width: none; flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding: 6px 10px 2px 8px; min-height: var(--tb-h); }
  .readout { flex-direction: row; align-items: center; gap: 8px; width: auto; min-width: 0; }
  .clock { font-size: 16px; } .tz { display: none; }
  .rel-row { min-height: 0; }
  .timebar .rel { display: none; }
  .status { flex: 1; width: auto; min-width: 0; justify-content: flex-end; font-size: 11px; }
  .status .long { display: inline; } .status .short { display: none; }
  .track-wrap { flex-basis: 100%; padding: 0 4px; }
  .tick span { display: none; } .tick.major span { display: block; }
  /* corner buttons: above the time bar, or above the sheet when it is open */
  .attrib { bottom: calc(var(--gutter) + var(--tb-h) + 12px + env(safe-area-inset-bottom)); }
  .map-btn { bottom: calc(var(--gutter) + var(--tb-h) + 48px + env(safe-area-inset-bottom)); }
  body:has(#point:not([hidden])[data-state='open']) .attrib, body:has(#point:not([hidden])[data-state='open']) .map-btn { visibility: hidden; }
  body:has(#point:not([hidden])[data-state='folded']) .attrib { bottom: calc(var(--gutter) + var(--tb-h) + 62px + env(safe-area-inset-bottom)); }
  body:has(#point:not([hidden])[data-state='folded']) .map-btn { bottom: calc(var(--gutter) + var(--tb-h) + 98px + env(safe-area-inset-bottom)); }
}
/* phone map: full screen; the nav is hidden and comes back with a swipe down from the top edge or a tap on the small
   handle, then hides again by itself (nav.js) */
@media (max-width: 759px) {
  .map-page { --nav-h: 0px; }
  /* iOS Safari 26 draws page content behind its status bar and floating toolbar only for a page that scrolls: a small
     scroll runway, the map RUNWAY px taller than the screen, and the page scrolled by RUNWAY on load (nav.js). The map
     itself takes every gesture (no page scroll), and the fixed controls stay put. */
  html:has(body.map-page) { overflow-y: scroll; scrollbar-width: none; }
  body.map-page { --runway: 62px; --bleed: 140px; min-height: calc(100lvh + var(--runway)); }
  /* experiment (2026-11-06): the bleed below must not count as content to scroll to, or Safari may draw its "more
     below" edge effect under the toolbar; overflow: clip with a clip margin still paints it */
  @supports (overflow-clip-margin: 1px) {
    body.map-page { height: calc(100lvh + var(--runway)); overflow: clip; overflow-clip-margin: var(--bleed); }
  }
  /* --bleed: iOS 26 leaves the area behind its floating toolbar out of every viewport unit, so the map runs that far
     past the bottom edge as well */
  body.map-page #map { height: calc(100lvh + var(--runway) + var(--bleed)); }
  .map-page .nav { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; }
  .map-page.nav-open .nav { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .map-page .nav-handle { display: block; position: fixed; z-index: 6; top: env(safe-area-inset-top); left: 50%; transform: translateX(-50%);
                          width: 72px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .map-page .nav-handle::before { content: ''; display: block; width: 40px; height: 5px; margin: 7px auto 0; border-radius: 3px;
                                  background: var(--text); opacity: 0.35; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .map-page.nav-open .nav-handle { visibility: hidden; }
}
@media (max-width: 380px) {
  .status { font-size: 10.5px; }
}

/* ---------- embedded preview (/map?embed=1, on the home page): the map only; its credits are under the frame ---------- */
.embed .overlay-top, .embed .bottom, .embed #locate, .embed .nav-handle, .embed .attrib { display: none !important; }
.embed { --nav-h: 0px; }

/* ---------- dev mode (?dev=1): two maps side by side, one time bar ---------- */
#map.dev-split { display: flex; }
.pane { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pane + .pane { border-left: 2px solid var(--border); }
#map .pane-map { position: absolute; inset: 0; } /* #map: maplibre-gl.css, loaded after this file, sets .maplibregl-map relative */
.pane-head { position: absolute; z-index: 4; top: calc(var(--nav-h) + var(--gutter)); display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; }
.pane:first-child .pane-head { right: var(--gutter); }
.pane:last-child .pane-head { left: var(--gutter); }
.pane-head select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; }
.pane-head .pane-note { color: var(--warn); }
.pane-head .pane-tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 760px) {
  #map.dev-split { flex-direction: column; }
  .pane + .pane { border-left: 0; border-top: 2px solid var(--border); }
  .pane:last-child .pane-head { top: var(--gutter); left: auto; right: var(--gutter); }
}
/* a frame, not a phone screen: no Safari scroll runway or bleed, or the map runs past the frame's bottom and the
   opening view sits too high in it */
body.map-page.embed { --runway: 0px; --bleed: 0px; min-height: 0; height: 100vh; }
html:has(body.embed) { overflow: hidden; }

/* iOS zooms the page when a field under 16 px takes focus (the compare view's model pickers) */
@media (pointer: coarse) { .pane-head select { font-size: 16px; } }