/* Neverisk, a web page (owner, 8 Nov 2026: "a proper, working and clean web version only"), in Skipper Hotline's
   style (skipperhotline.eu, its offers and documents; owner, 3 Nov 2026): navy and copper, Roboto and Roboto
   Condensed, spaced capital labels, white cards with thin lines. The map fills the screen and the bar and buttons
   float over it; on a phone the status fills the bottom of the screen (--peek, set by app.js) and slides up for the
   details, on a larger screen it is a panel on the left. Buttons are navy, copper only an accent (it is too close to
   the orange warning); the status colours are for the alert levels, always with a word and an icon.
   (--magenta: the controls' colour, navy since the restyle; the name stayed.) */
:root {
  --paper: #eef1f6;
  --panel: #ffffff;
  --ink: #142849;
  --ink-2: #5a6578;
  --rule: #e1e6ee;
  --magenta: #142849;
  --magenta-ink: #ffffff;
  --st-watch: #fab219;
  --st-watch-ink: #3d2b00;
  --st-warning: #ec835a;
  --st-warning-ink: #3f1608;
  --st-storm: #d03b3b;
  --st-storm-ink: #ffffff;
  --st-none: #15803d;               /* the deeper green of the Today / Now tags everywhere (owner, 9 Nov 2026: "Yes, match it") */
  --st-none-ink: #ffffff;
  --live: #f04438;                  /* the dot that says live: bright enough on white and on navy */
  /* the radar time's clock turning back, as a mask (any colour) */
  --i-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v4l2 2'/%3E%3Cpath d='M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5'/%3E%3C/svg%3E");
  --shadow: 0 8px 28px rgb(13 28 53 / 0.16);
  --font-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-data: Roboto, "Segoe UI", system-ui, sans-serif;
  --shadow-sm: 0 2px 12px rgb(13 28 53 / 0.14);
  --navy: #142849;
  --copper: #b56022;
  --tint: rgb(20 40 73 / 0.07);
  --glass: rgb(255 255 255 / 0.88);
  --glass-line: rgb(20 40 73 / 0.09);
  --sheet-w: 400px;
  --band: 34px;                     /* the navy band at the foot of the top bar */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #08111f; --panel: #111d31; --ink: #e9eef6; --ink-2: #9aa9bf; --rule: #22324b;
    --magenta: #e9eef6; --magenta-ink: #0d1c35; --copper: #d98a4e; --tint: rgb(233 238 246 / 0.08);
    --glass: rgb(17 29 49 / 0.86); --glass-line: rgb(233 238 246 / 0.1);
    --shadow: 0 8px 28px rgb(0 0 0 / 0.5); --shadow-sm: 0 2px 12px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #08111f; --panel: #111d31; --ink: #e9eef6; --ink-2: #9aa9bf; --rule: #22324b;
  --magenta: #e9eef6; --magenta-ink: #0d1c35; --copper: #d98a4e; --tint: rgb(233 238 246 / 0.08);
  --glass: rgb(17 29 49 / 0.86); --glass-line: rgb(233 238 246 / 0.1);
  --shadow: 0 8px 28px rgb(0 0 0 / 0.5); --shadow-sm: 0 2px 12px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font: 15px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { height: 100%; display: flex; flex-direction: column; position: relative; }

/* top bar */
.topbar { display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; }
.status { display: flex; align-items: center; min-width: 0; }
.radar-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { text-transform: uppercase; }
.top-actions { display: flex; margin-left: auto; gap: 2px; align-items: center; }
.icon-btn { background: transparent; cursor: pointer; display: grid; place-items: center; min-width: 42px; height: 42px;
  border: 0; border-radius: 13px; }
.icon-btn.lang { font: 700 14px/1 var(--font-display); letter-spacing: 0.12em; }

/* stage */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden;
  --legend-w: 0px; --legend-panel: min(306px, 80vw); }   /* the legend: wide enough for each note on one line */
.stage.legend-open { --legend-w: calc(var(--legend-panel) + 10px); }
.maplibregl-ctrl-bottom-right { right: var(--legend-w); transition: right 0.25s ease; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* round map buttons on the right, under the bar; the legend behind the third */
.map-tools { position: absolute; z-index: 3; top: calc(82px + var(--band, 0px) + env(safe-area-inset-top, 0px));
  right: calc(var(--legend-w) + max(10px, env(safe-area-inset-right, 0px))); transition: right 0.25s ease;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.tool { cursor: pointer; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.tool svg { fill: currentColor; flex: none; }
@media (max-width: 600px) {
  .tool { font-size: 12.5px; }
}

/* legend: a panel on the right, open by default; the vertical tab on its side slides it off to the right and back */
.legend { position: absolute; z-index: 3; top: 10px; right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--sheet-h, 0px) + 66px); width: var(--legend-panel); font-size: 12.5px; transition: transform 0.25s ease; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) { .legend { bottom: 12px; top: 12px; right: 12px; } }
.legend.closed { transform: translateX(calc(100% + 12px)); }
.legend-body { overflow-y: auto; overscroll-behavior: contain; transition: visibility 0s; padding: 8px 12px 12px; height: auto;
  min-height: 0; flex: 1 1 auto; }
.legend.closed .legend-body { visibility: hidden; transition: visibility 0s 0.25s; }
.legend-tab { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.legend-tab span { writing-mode: vertical-rl; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.legend-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
.legend.closed .legend-tab svg { transform: rotate(180deg); }
.lg-item { display: grid; align-items: center; grid-template-columns: 58px 1fr 32px; gap: 4px 10px; padding: 6px 0;
  border-top: 1px solid var(--rule); }
.lg-key { gap: 4px; min-width: 0; transition: opacity 0.2s; display: contents; }   /* its symbols, words and notes: in the item's grid */
.lg-item.off .lg-key { opacity: 0.35; }
.lg-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule);
  background: transparent; cursor: pointer; font-size: 12px; white-space: nowrap; border-radius: 999px;
  grid-column: 3; grid-row: 1; width: 32px; min-height: 32px; padding: 0; justify-content: center; }
.lg-toggle svg { fill: currentColor; }
.ramp { height: 10px; border-radius: 3px; background: linear-gradient(90deg, #cde2fb, #86b6ef, #3987e5, #1c5cab, #0d366b); }
.key-arrow { background: linear-gradient(var(--ink), var(--ink)) 2px 50% / 13px 2px no-repeat,
  conic-gradient(from 240deg at 100% 50%, var(--ink) 0 60deg, transparent 0) 13px 50% / 8px 10px no-repeat; }
/* lightning: the map's star (app.js starCanvas) now, 20 minutes and an hour ago, white on navy */
.li-ages { display: flex; gap: 4px; padding: 2px 5px; border-radius: 6px; background: #142849; }
.li-ages .key { display: flex; }
.li-ages i.li-dot { width: 14px; height: 14px; margin: -1px; background: center / contain no-repeat; }
.lg-note { font-size: 12px; color: var(--ink-2); }

/* data check when the app opens: each source draws a tick or a cross in turn */
.dcheck { position: absolute; z-index: 5; top: calc(122px + var(--band, 0px) + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translateX(-50%); width: min(330px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  cursor: pointer; transition: opacity 0.35s, transform 0.35s; }
.dcheck.out { opacity: 0; transform: translate(-50%, -8px); }
.dcheck-x { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.dcheck-x:hover { background: var(--rule); }
.dcheck-x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.dcheck .section-title { padding-right: 40px; }
.dcheck ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dcheck li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; opacity: 0.3; transition: opacity 0.2s; }
.dcheck li.done { opacity: 1; }
.dcheck li b { font-size: 13.5px; font-weight: 600; min-width: 0; }
.dcheck li small { font-size: 12px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.dcheck li svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dcheck li circle { stroke-dasharray: 57; stroke-dashoffset: 57; transition: stroke-dashoffset 0.35s ease-out; }
.dcheck li path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.25s ease-out 0.3s; }
.dcheck li.done circle, .dcheck li.done path { stroke-dashoffset: 0; }
.dcheck li[data-s="ok"] svg { color: var(--st-none); }
.dcheck li[data-s="partial"] svg { color: #c98a00; }
.dcheck li[data-s="missing"] svg { color: var(--st-storm); }
.dcheck-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  /* at the left of the map, so it stays clear of the map buttons next to the legend */
  .dcheck { left: calc(var(--sheet-w) + 36px); transform: none; }
  .dcheck.out { transform: translateY(-8px); }
}

/* waiting circle over the map: the server's first radar picture, or a picture that is still loading */
.map-wait { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.map-wait-ring { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgb(20 40 73 / 0.18); border-top-color: #142849;
  animation: map-spin 0.9s linear infinite; }
.map-wait-text { background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  font-size: 13px; box-shadow: var(--shadow); border-radius: 999px; padding: 6px 14px; }
@keyframes map-spin { to { transform: rotate(360deg); } }

/* time slider: the last 12 hours on the map; on a phone it sits just above the storm card */
.timebar { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(var(--sheet-h, 0px) + 10px);
  width: min(560px, calc(100vw - 32px)); display: grid; gap: 6px; align-items: center;
  padding: 3px 6px 3px 3px; }
.tb-play { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.tb-play:hover { background: var(--rule); }
.tb-play svg { width: 22px; height: 22px; fill: currentColor; }
/* 28 px to catch a thumb, drawn in the 16 px the slider had */
.timebar input[type="range"] { width: 100%; min-width: 0; height: 28px; margin: -6px 0; accent-color: var(--magenta); cursor: pointer; }
.tb-live { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid transparent; background: transparent; color: var(--st-storm);
  font: inherit; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: default;
  font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.tb-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.timebar.past .tb-live { cursor: pointer; }
/* hour marks under the slider (owner, 2 Nov 2026) */
.tb-ticks { display: none; position: relative; height: 15px; pointer-events: none; }
.tb-ticks span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 5px; line-height: 1;
  font-size: 11px; white-space: nowrap; color: var(--ink-2); font-family: var(--font-body); }
.tb-ticks span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: currentColor; }
.timebar.marks { row-gap: 0; padding-bottom: 2px; }
.timebar.marks .tb-play { grid-column: 1; grid-row: 1 / span 2; }
.timebar.marks .tb-live { grid-column: 2; grid-row: 1 / span 2; }
.timebar.marks input[type="range"] { grid-row: 1; align-self: end; }
.timebar.marks .tb-ticks { display: block; grid-row: 2; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .timebar { left: calc(var(--sheet-w) + 24px + (100% - var(--sheet-w) - 24px - var(--legend-w)) / 2); bottom: 40px; z-index: 4;   /* above the map's credits */
    width: max(300px, min(560px, calc(100% - var(--sheet-w) - var(--legend-w) - 120px)));   /* clear of the zoom buttons */
    transition: left 0.25s ease, width 0.25s ease; }
}

/* sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 62%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border-top: 1px solid var(--rule); border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: grid; align-content: start;
}
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 4px auto 0; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .sheet { top: 12px; bottom: 12px; left: max(12px, env(safe-area-inset-left, 0px)); right: auto; width: var(--sheet-w); max-height: none; border: 1px solid var(--rule); padding: 16px; }
  .grab { display: none; }
  .map-tools { right: calc(var(--legend-w) + 12px); }
}
/* a phone on its side: the panel beside the map as on a wide screen, narrower, and zoom with two fingers */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --sheet-w: min(400px, 44vw); }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }
}

/* warnings not working: above the card, in the storm colour, so it cannot be missed */
.outage { display: grid; gap: 3px; padding: 11px 14px; background: var(--st-storm); color: var(--st-storm-ink);
  border-radius: 18px; }
.outage b { font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.outage span { font-size: 14.5px; text-wrap: pretty; }

/* threat card: the summary comes first */
.threat { --lvl: var(--rule); --lvl-ink: var(--ink); border: 0; border-radius: 0; overflow: visible; }
.threat[data-level="none"] { --lvl: var(--st-none); --lvl-ink: var(--st-none-ink); }
.threat[data-level="watch"] { --lvl: var(--st-watch); --lvl-ink: var(--st-watch-ink); }
.threat[data-level="warning"] { --lvl: var(--st-warning); --lvl-ink: var(--st-warning-ink); }
.threat[data-level="in_storm"] { --lvl: var(--st-storm); --lvl-ink: var(--st-storm-ink); }
.threat-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: var(--lvl); color: var(--lvl-ink);
  gap: 12px; padding: 12px 14px; border-radius: 18px; }
.threat-icon { fill: currentColor; width: 46px; height: 46px; padding: 10px; border-radius: 14px;
  background: rgb(255 255 255 / 0.28); }
.threat-level { font: 700 24px/1.05 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase;
  text-wrap: balance; }   /* two even lines, never one word alone */
.threat-sub { text-wrap: balance; font-size: 14px; margin-top: 4px; }
.eta { text-align: right; line-height: 1; }
.eta-num { font: 700 40px/1 var(--font-display); }
.eta-unit { display: block; text-transform: uppercase;
  font: 600 11px/1 var(--font-display); letter-spacing: 0.14em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0;
  padding: 0; gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.facts div { min-width: 0; padding: 10px 14px; border-top: 1px solid var(--rule); }
.facts dt { text-transform: uppercase; color: var(--ink-2); font: 600 10.5px/1.2 var(--font-display);
  letter-spacing: 0.14em; }
.facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font: 500 15px/1.25 var(--font-body); color: var(--ink); }
.advice { margin: 12px 0 0; font-size: 14.5px; padding: 12px 14px; border-radius: 14px;
  border-left: 3px solid var(--copper); background: color-mix(in srgb, var(--copper) 9%, var(--panel));
  color: var(--ink); scroll-margin: 12px; }
.li-near { margin: 0; font-size: 14px; border-top: 0; padding: 12px 2px 0; }
.li-near::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: #ffe14d; border: 1px solid rgb(0 0 0 / 0.45); vertical-align: 1px; }
.li-near[data-close="1"] { font-weight: 600; }
.official { display: grid; gap: 6px; }
.outlook { display: grid; gap: 4px; }
.outlook-head { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.3; padding-left: 10px; border-left: 4px solid var(--rule); }
.outlook-head[data-chance="possible"] { border-left-color: var(--st-watch); }
.outlook-head[data-chance="likely"] { border-left-color: var(--st-warning); }
.outlook-body { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.warn { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.warn-badge { font-family: var(--font-data); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.warn-badge.l2 { background: var(--st-watch); color: var(--st-watch-ink); }
.warn-badge.l3 { background: var(--st-warning); color: var(--st-warning-ink); }
.warn-badge.l4 { background: var(--st-storm); color: var(--st-storm-ink); }
.warn-text { font-size: 13.5px; }
.warn-none { font-size: 13.5px; color: var(--ink-2); }
.bulletin { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); border-left: 3px solid var(--rule); padding-left: 10px; }
.bulletin strong { color: var(--ink); }
.src-link { font-size: 13px; color: var(--magenta); }
.btn { border: 1px solid var(--rule); background: var(--panel); cursor: pointer; border-radius: 12px;
  padding: 11px 18px; font: 600 13px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.btn.primary { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.btn:disabled { opacity: 0.55; cursor: default; }
.sim-harbour { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.sim-harbour select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); }

/* time-travel test: the chosen moment ±12 h, with the harbour's card level under the slider and its alerts */
.sim-bar { display: grid; gap: 6px; padding: 10px 12px 12px; background: color-mix(in srgb, var(--magenta) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--magenta) 35%, var(--rule)); border-radius: 16px; }
.sim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sim-head b { font-family: var(--font-display); font-size: 19px; }
.sim-rel { font-family: var(--font-data); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.sim-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.sim-pick label { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.sim-pick :is(input, select) { min-width: 0; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; }
/* the copy online (site.py): its five days in place of the date and time picker */
.sim-bar.site .sim-pick { display: none; }
.sim-days { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.sim-days[hidden] { display: none; }
.sim-days span { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); }
.sim-day { flex: 1 1 auto; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sim-day[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-ink); }
.sim-time { font-family: var(--font-data); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sim-controls { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px; align-items: center; }
.sim-track { position: relative; padding: 9px 0 10px; }
.sim-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--magenta); display: block; }
.sim-marks { position: absolute; left: 8px; right: 8px; bottom: 0; height: 7px; border-radius: 2px; background-color: var(--rule); }
.sim-ticks { position: absolute; left: 8px; right: 8px; top: 0; height: 8px; }
.sim-ticks i { position: absolute; top: 0; width: 0; height: 0; transform: translateX(-4px); border: 4px solid transparent; border-top: 7px solid var(--c, var(--ink)); border-bottom: 0; }
.sim-marks .sel { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--magenta); }
.sim-speed { height: 34px; min-width: 42px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.sim-ends { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; font-family: var(--font-data); font-size: 11.5px; color: var(--ink-2); }
.sim-ends span:last-child { text-align: right; }
.sim-back { border: 1px solid var(--magenta); border-radius: 14px; background: transparent; color: var(--magenta); font: inherit; font-weight: 500; padding: 3px 10px; cursor: pointer; }
.sim-back:disabled { opacity: 0.5; cursor: default; }
.sim-alerts-head { font-size: 13px; font-weight: 700; margin-top: 2px; }
.sim-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 210px; overflow-y: auto; }
.sim-alerts button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--rule); border-left: 4px solid var(--c, var(--rule)); background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.sim-alerts button:hover { border-color: var(--magenta); border-left-color: var(--c, var(--rule)); }
.sim-alerts .at { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.sim-alerts b { font-weight: 700; }
.sim-alerts small { grid-column: 2; color: var(--ink-2); font-size: 12px; }
.sim-alerts li.future button { opacity: 0.55; }
.sim-alerts li.now button { box-shadow: 0 0 0 2px var(--magenta); }

.attrib { color: var(--ink-2); display: grid; gap: 2px; font-size: 11px; }

.toast { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 14px; background: #0d1c35; color: #fff; box-shadow: var(--shadow); }
.storm-popup { font-family: var(--font-body); color: #0f2433; }
.storm-popup b { font-family: var(--font-display); font-size: 17px; }
.storm-popup .mono { font-family: var(--font-data); font-size: 12.5px; }

/* the bar, the radar time, the map buttons, the time slider and the legend: frosted glass over the map */
.topbar, .status, .tool, .timebar, .legend {
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }

/* the bar: anchor and name on the left, buttons on the right; the radar time in a small pill under it */
.topbar { position: absolute; z-index: 6; top: calc(10px + env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  padding: 0 6px 0 8px; gap: 10px; border-radius: 18px; box-shadow: var(--shadow); }
/* Skipper Hotline's own mark (icons/skipper-hotline-mark.svg, from skipperhotline.eu); on a white tile in the dark */
.brand-badge { display: grid; place-items: center; width: 38px; height: 40px; border-radius: 11px; }
.brand-badge img { width: 30px; height: 40px; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-badge { background: #fff; } }
:root[data-theme="dark"] .brand-badge { background: #fff; }
.brand-words { display: grid; gap: 4px; line-height: 1; }
.brand-words b { font: 700 20px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.brand-words small { font: 600 9.5px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); }
/* the name (owner, 4 Nov 2026): Neve + bold risk, and "from Skipper Hotline Assistance" with the name a link to its
   site (the padding makes it easier to tap without moving anything) */
.brand-words b span { font-weight: 400; }
.brand-words > * { justify-self: start; white-space: nowrap; }
.brand-words .brand-sub { font: 600 10px/1 var(--font-display); letter-spacing: 0; color: var(--ink-2); }
.brand-words .brand-from { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); }
.brand-words a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; padding: 6px 0; }
/* the top bar's navy band (index.html brand-band): its lines roll up in turn, about 5.5 s each; 16 px text (owner,
   9 Nov 2026: "the most important part of the app ... make that text bigger") */
.topbar { height: calc(56px + var(--band)); padding-bottom: var(--band); }
.brand-band { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band); overflow: hidden; display: block;
  border-radius: 0 0 18px 18px; background: #142849; color: #fff; text-align: center; text-decoration: none;
  font: 500 16px/var(--band) var(--font-body); }
.bb-roll { display: block; animation: bb-roll 18s ease-in-out infinite; }
.bb-roll > span { display: block; height: var(--band); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.brand-band b { color: #f29a4a; font-weight: 700; }
.brand-band .bb-name { text-decoration: underline; text-underline-offset: 3px; }
@keyframes bb-roll { 0%, 30% { transform: translateY(0); } 33.3%, 63.3% { transform: translateY(-25%); }
  66.7%, 96.7% { transform: translateY(-50%); } 100% { transform: translateY(-75%); } }
@media (max-width: 389px) {   /* phones 360-375 px wide: a smaller anchor and second line, so the buttons beside it fit */
  .topbar .brand { gap: 7px; }
  .topbar .brand-badge { width: 32px; }
  .topbar .brand-badge img { width: 26px; height: 35px; }
  .topbar .brand-words small { font-size: 10.5px; letter-spacing: 0; }
  /* and narrower buttons */
  .topbar { gap: 6px; }
  .topbar .icon-btn { min-width: 34px; }
}
.status { position: absolute; top: calc(100% + 8px); left: 0; margin: 0; max-width: calc(100% - 64px); gap: 7px;
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.radar-time { font: 500 12.5px/1.2 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-label { display: inline; color: var(--ink-2); }
/* live: a red dot before "Live radar" (none while warnings are not working), and on "Back to live" (owner, 4 Nov
   2026: "change green to red dot"; the usual sign for live). On the time slider: solid copper with
   a clock turning back and white "Radar 05:45 · 3:45 h ago", so it can't be taken for live; copper, not red, which
   means storms and warnings off. The light theme's copper in both themes: the dark theme's is too light for white */
.status.live:not(.stale) .rt-label::before { content: ""; display: inline-block; width: 8px; height: 8px;
  margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--live); }
.status.past { background: #b56022; border-color: #b56022; }
.status.past .radar-time, .status.past .rt-label { color: #fff; }
.status.past .rt-label, .status.past .rt-hm { font-weight: 700; }
.status.past .radar-time::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px;
  vertical-align: -3px; background: currentColor; -webkit-mask: var(--i-history) center / contain no-repeat;
  mask: var(--i-history) center / contain no-repeat; }
.chip { font: 700 10px/1 var(--font-display); letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px; background: var(--copper); color: #fff; }
.icon-btn:hover { background: var(--tint); }
.icon-btn svg { width: 21px; height: 21px; fill: var(--ink); }

.tool { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; color: var(--ink); box-shadow: var(--shadow-sm); }
.tool .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tool svg { width: 21px; height: 21px; }
/* on (following, picking, legend or slider open): filled in the controls' colour, navy in the light look and white in
   the dark one; the dark look's navy was the glass's own colour, so on and off looked alike (owner, 13 Nov 2026: "in
   dark theme colors are too close, you can't see which features are open/active") */
.tool.active { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.legend { top: calc(82px + var(--band, 0px) + env(safe-area-inset-top, 0px)); border-radius: 18px; box-shadow: var(--shadow); }
.legend .section-title { padding-right: 40px; line-height: 32px; margin-bottom: 2px; }   /* level with the X */
.legend-tab, .legend.closed .legend-tab { top: 8px; right: 12px; transform: none; z-index: 1; width: 32px; height: 32px; padding: 0;
  justify-content: center; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); box-shadow: none; }
.legend-tab span { display: none; }
.lg-item.off .lg-toggle { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-ink); }
/* a symbol, a word or two and the eye, with a note under each (owner, 4 Nov 2026; index.html). The notes run
   the full width, under the eye too, so each fits on one line and the legend on a phone without scrolling (owner,
   4 Nov 2026); it scrolls only where the screen is short */
#legend { bottom: auto; max-height: calc(100% - 160px - var(--peek, 0px)); display: flex; flex-direction: column; }   /* #: over the phone rule below */
.lg-item[data-show="radar"] { border-top: 0; }
.lg-item.off :is(.lg-sym, .lg-lb, .lg-note) { opacity: 0.35; }
.lg-sym { grid-column: 1; display: flex; align-items: center; gap: 5px; }
.lg-lb { grid-column: 2; }
.lg-sym .ramp { flex: 1; height: 9px; }
.lg-sym .area-ramp { opacity: 0.32; background: linear-gradient(90deg, #e0182d 15%, #ff7f00, #ffc400 85%); }   /* as on the map */
.lg-sym > i { width: 22px; height: 12px; border-radius: 3px; }
.lg-lb b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.lg-lb small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.lg-key .lg-note { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.lg-key .lg-note:not(:last-child) { margin-bottom: 6px; }
/* storm strengths: purple outlines, rounded, thicker when stronger, as on the map (app.js STRENGTH_*) */
.lg-rings { display: flex; gap: 4px; }
.lg-rings i { display: block; width: 15px; height: 11px; border: 2px solid; border-radius: 6px; }
.lg-rings i:nth-child(1) { border-color: #b39ddb; border-width: 2px; }
.lg-rings i:nth-child(2) { border-color: #7e57c2; border-width: 3px; }
.lg-rings i:nth-child(3) { border-color: #3c1078; border-width: 4px; }
.lg-toggle span { display: none; }
.lg-toggle svg { width: 17px; height: 17px; }
/* under "Live radar", not behind it (owner, 4 Nov 2026), wherever the demo bar puts it */
#app:has(.topbar.has-demo) .dcheck { top: calc(180px + var(--band, 0px) + env(safe-area-inset-top, 0px)); }
.demo-paused { position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex;
  align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 16px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: var(--shadow); font-weight: 600; white-space: nowrap; }
.demo-resume { display: inline-flex; align-items: center; gap: 6px; }
.demo-resume svg { width: 16px; height: 16px; fill: currentColor; }

/* the time slider: a glass strip right above the status */
.timebar { border-radius: 16px; box-shadow: var(--shadow-sm); }
.timebar.past { border-color: var(--ink); }
/* "live" said once (owner, 3 Nov 2026): the radar time on top says it, so at live the slider is only play, the slider
   and its hour marks; moved back, a navy "Back to live" rises from behind the middle of the slider, its lower part
   tucked under the bar (clipped; grid-area auto: placed against the whole bar, not the slider's column). Above it, not in the bar: a button that came and went in the bar would change the
   slider's width under the finger (1 Nov 2026) */
.timebar, .timebar.marks { grid-template-columns: 44px 1fr; padding-right: 14px; }
.timebar.marks input[type="range"], .timebar.marks .tb-ticks { grid-column: 2; }
.timebar .tb-live { display: none; }
.timebar.past .tb-live { display: block; position: absolute; grid-area: auto; left: 50%; bottom: calc(100% - 12px);
  height: 44px; padding: 0 18px 12px; border-radius: 16px; transform: translateX(-50%);
  background: var(--navy); border-color: var(--glass-line); color: #fff; box-shadow: var(--shadow-sm);
  clip-path: inset(-12px -12px 12px -12px); animation: tb-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.timebar.marks.past .tb-live:hover { background: color-mix(in srgb, var(--navy) 85%, #fff); border-color: var(--glass-line); }
.timebar .tb-live::before { background: var(--live); }
@keyframes tb-rise {
  from { transform: translate(-50%, 32px); clip-path: inset(-12px -12px 44px -12px); }
  to { transform: translate(-50%, 0); clip-path: inset(-12px -12px 12px -12px); } }
@media (prefers-reduced-motion: reduce) { .timebar.past .tb-live { animation: none; } }

/* the status panel */
.sheet { gap: 12px; border-color: var(--rule); }
.threat[data-level="none"] .threat-head, .threat[data-level="unknown"] .threat-head { background: transparent; color: var(--ink); padding: 8px 2px 2px; }
.threat[data-level="none"] .threat-icon { background: color-mix(in srgb, var(--st-none) 13%, transparent); color: var(--st-none); }
.threat[data-level="unknown"] .threat-icon { background: var(--tint); color: var(--ink-2); }
.threat[data-level="none"] .threat-sub, .threat[data-level="unknown"] .threat-sub { color: var(--ink-2); }
.sheet-chips { display: flex; gap: 8px; padding: 12px 0 0; overflow-x: auto; scrollbar-width: none; }
.sheet-chips::-webkit-scrollbar { display: none; }
.sheet-chips .chip-btn { flex: 1 1 0; justify-content: center; height: 44px; }   /* equal halves of the row (owner, 3 Nov 2026) */
.chip-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap;
  font: 600 12.5px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.chip-btn:hover { background: var(--tint); }
.chip-btn.primary { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-ink); }
.chip-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.sheet.open #chip-details svg { transform: rotate(180deg); }
/* "Today" and, folded, "Now": one line each, a solid tag in the line's colour with spaced capitals (like the SIMULATION
   tag), then the words, on a white line with a hairline edge (owner, 9 Nov 2026: the tinted line with a dot "looks like
   typical AI default and cheap. make it look premium", then "B, colour tag"). Green, yellow (a DHMZ yellow warning
   stays yellow), red; grey while the report loads. The tags' own red is a little deeper than the map's, to carry white letters. */
.strip { --c: var(--ink-2); --c-on: var(--panel); display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 40px;
  padding: 6px 14px 6px 6px; border: 1px solid var(--rule); border-radius: 11px; cursor: pointer; text-align: left;
  background: var(--panel); box-shadow: 0 1px 2px rgb(13 28 53 / 0.06); color: var(--ink); font: 500 13.5px/1.25 var(--font-body); }
.strip[data-c="ok"], .today-more[data-c="ok"] { --c: var(--st-none); --c-on: var(--st-none-ink); }
.strip[data-c="maybe"], .today-more[data-c="maybe"] { --c: #f2b01e; --c-on: #3d2b00; }
.strip[data-c="bad"], .today-more[data-c="bad"] { --c: #c42f2f; --c-on: #ffffff; }
.strip b { flex: none; min-width: 64px; padding: 7px 9px 6px; border-radius: 7px; text-align: center; background: var(--c);
  color: var(--c-on); font: 700 11.5px/1 var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; }
.strip.quiet b { min-width: 0; }   /* the one green line of a quiet day is alone: no other tag to line up with */
.strip span { min-width: 0; text-wrap: balance; }   /* the longest Croatian lines on a narrow phone take two lines rather than
   being cut off; min-width 0 on the line keeps a long one from widening the whole panel (a grid) past the screen */
.strip.today::after { content: ""; flex: none; margin-left: auto; width: 7px; height: 7px; border: solid var(--ink-2);
  border-width: 2px 2px 0 0; transform: rotate(45deg); }   /* a tap opens the report */
.sheet.folded .strip.today::after { content: none; }
.sheet.folded .strip.today.merged { display: none; }       /* a quiet day: the Now line says both */
.sheet.folded :is(.threat-head, .sheet-chips, .nopos-btns) { display: none; }
.threat-head > div { min-width: 0; }
.threat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.threat-long { margin: 12px 0 0; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
/* no position yet: the whole sentence, then its two buttons side by side, on a phone and on a computer */
/* no position: red, as a warning (owner, 13 Nov 2026: "make it as a red warning"), over the grey of "unknown" */
.threat.nopos { --lvl: var(--st-storm); --lvl-ink: var(--st-storm-ink); }
.threat.nopos .threat-head { background: var(--lvl); color: var(--lvl-ink); padding: 10px 13px; }
.threat.nopos .threat-icon { background: rgb(255 255 255 / 0.22); color: inherit; }
.threat.nopos .threat-sub { color: inherit; white-space: normal; text-wrap: balance; }
.nopos-btns { display: flex; gap: 8px; padding: 12px 0 0; }
.nopos-btns .chip-btn { flex: 1 1 0; justify-content: center; height: 44px; padding: 0 10px; }
.nopos-btns[hidden] { display: none; }
.facts div:nth-child(-n+2) { border-top: 0; }
.facts div:nth-child(even) { border-left: 1px solid var(--rule); }
.section-title, .eyebrow { font: 600 11.5px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin: 0 0 8px; }
.outage b { font-family: var(--font-display); letter-spacing: 0.06em; font-size: 20px; }

@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  /* the sheet slid down to its top --peek; .open: all of it, with the top of the map still in view */
  .sheet { max-height: calc(100% - var(--top-clear, calc(78px + var(--band, 0px) + env(safe-area-inset-top, 0px)))); overflow: hidden; border: 0; border-radius: 24px 24px 0 0;
    padding-top: 4px; box-shadow: 0 -6px 30px rgb(13 28 53 / 0.18); touch-action: none;
    transform: translateY(calc(100% - var(--peek, 20vh))); transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet.open { transform: none; overflow-y: auto; touch-action: pan-y; }
  .sheet.open .grab, .sheet.open .threat-head { touch-action: none; }
  .grab { position: relative; width: 38px; height: 5px; border-radius: 3px; margin: 6px auto 0; cursor: pointer;
    background: color-mix(in srgb, var(--ink) 20%, transparent); }
  .grab::before { content: ""; position: absolute; inset: -12px -70px; }      /* a bigger target for the thumb */
  .timebar { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); width: auto;
    transform: none; bottom: calc(var(--peek, 20vh) + 10px); }
  .legend { bottom: calc(var(--peek, 20vh) + 78px); }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--peek, 20vh) + 66px); }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }   /* zoom with two fingers */
  .toast { bottom: calc(var(--peek, 20vh) + 78px); }
  .grab { margin-top: 5px; }
}
/* phones, upright or on their side: a slimmer status and buttons, so more of the map stays free to pan and zoom
   (owner, 8 Nov 2026) */
@media (max-width: 899px), (orientation: landscape) and (max-height: 500px) {
  .sheet { gap: 8px; }
  .threat-head { gap: 10px; padding: 8px 12px; border-radius: 16px; }
  .threat-icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; }
  .threat-level { font-size: 19px; }
  .threat-sub { font-size: 13.5px; line-height: 1.3; margin-top: 2px; }
  .eta-num { font-size: 30px; }
  .sheet-chips { padding-top: 8px; }
  .sheet-chips .chip-btn { height: 36px; }
  .threat-level { font-size: 17px; }
  .sheet.alarm .threat-head { padding: 11px 14px; }
  .sheet.alarm .threat-icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; }
  .sheet.alarm .threat-level { font-size: 22px; }
  .sheet.alarm .threat-sub { font-size: 14.5px; font-weight: 500; }
  .sheet.alarm .eta-num { font-size: 36px; }
  /* the time slider: open from the start, the clock button puts it away (app.js setTimeOpen) */
  #app:not(.time-open) #timebar { display: none; }
  #btn-time svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .outage { padding: 8px 12px; border-radius: 16px; }
  .outage b { font-size: 16px; }
  .outage span { font-size: 13.5px; }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .sheet { top: calc(78px + var(--band, 0px) + env(safe-area-inset-top, 0px)); border-radius: 20px; }   /* under the top bar */
  #chip-details, .sheet-chips { display: none; }
}
/* a large screen has room for the time slider: no clock button (a phone on its side keeps it, as the slider is hidden there) */
@media (min-width: 900px) and (min-height: 501px) {
  #btn-time { display: none; }
}
.brand { flex: none; white-space: nowrap; }

/* this morning's DHMZ report */
.dhmz-pop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
  background: rgb(13 28 53 / 0.4); animation: dhmz-fade 0.25s ease-out; }
.dhmz-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 8px; padding: 18px 18px 14px; border-radius: 24px; background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 60px rgb(13 28 53 / 0.35); animation: dhmz-up 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* the title and its date on one line (owner, 3 Nov 2026; dhmzTitle makes it smaller where it would not fit) */
.dhmz-title { margin: 0; padding-right: 44px; font: 700 21px/1.6 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhmz-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tint);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dhmz-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dhmz-body { display: grid; gap: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.dhmz-body .section-title { color: var(--ink-2); }
/* the report in four areas (owner, 3 Nov 2026): NAVTEX, DHMZ, ECMWF, direction; a coloured edge for the level */
.outlook.has-report > .section-title,
.outlook.has-report > .outlook-head,
.outlook.has-report > .outlook-body,
.dhmz-body.has-report #official { display: none; }
.report { display: grid; gap: 8px; }
.rp { display: grid; gap: 3px; padding: 9px 11px 10px 12px; border-radius: 14px; background: var(--tint); border-left: 4px solid var(--rule); }
.rp[data-level="possible"] { border-left-color: var(--st-watch); }
.rp[data-level="likely"] { border-left-color: var(--st-warning); }
.rp[data-level="severe"] { border-left-color: var(--st-storm); }
.rp[data-level="dir"] { border-left-color: var(--navy, var(--ink)); grid-template-columns: 1fr auto; column-gap: 12px; }
.rp-src { margin: 0; font: 700 11.5px/1.25 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.rp-head { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
.rp[data-level="none"] .rp-head { font-weight: 500; }
.rp-where { margin: 0; font-size: 14px; line-height: 1.45; }
.rp-where .warn-badge { vertical-align: 1px; }
.rp-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rp[data-level="dir"] > :not(.rp-compass) { grid-column: 1; }
.rp-compass { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.rp-compass svg { display: block; width: 72px; height: 72px; }
.cp-ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.cp-wedge { fill: color-mix(in srgb, var(--copper, var(--ink)) 32%, transparent); }
.cp-arrow { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.cp-head, .cp-you { fill: var(--ink); }
.rp-compass text { font: 700 9.5px var(--font-display); fill: var(--ink-2); text-anchor: middle; }
.rp-sure { display: flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.rp-dots { display: inline-flex; gap: 2px; }
.rp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.rp-dots i.on { background: var(--ink); }
.rp-passed { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
/* what the three sources say, one row each: the source's name big, so it is clear these are three reports (owner,
   3 Nov 2026), a dot in the colour of its level with its word, and one detail line (NAVTEX's opens to the warning) */
.rp-table { padding: 8px 12px 2px; border-radius: 14px; background: var(--tint); }
.rp-cap { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); }
.rp-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); }
.rp-name { font: 800 15.5px/1.3 var(--font-display); letter-spacing: 0.04em; color: var(--ink); }
.rp-name small { display: block; font: 500 12px/1.3 var(--font-body, inherit); letter-spacing: 0; color: var(--ink-2); }
.rp-verdict { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 15.5px; line-height: 1.3; font-weight: 700; }
.rp-row[data-level="none"] .rp-verdict { font-weight: 500; }
.rp-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-2); box-sizing: border-box; }
.rp-row[data-level="possible"] .rp-dot { background: var(--st-watch); border-color: var(--st-watch); }
.rp-row[data-level="likely"] .rp-dot { background: var(--st-warning); border-color: var(--st-warning); }
.rp-row[data-level="severe"] .rp-dot { background: var(--st-storm); border-color: var(--st-storm); }
.rp-detail { margin: 1px 0 0 18px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.rp-line { color: var(--ink); }                 /* what is warned of: the gusts, a wind warning */
/* NAVTEX and ECMWF still loading (app.js renderReportWait): a small spinning circle in place of the dot */
.rp-wait { margin-top: 12px; }
.rp-spin { flex: none; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--rule);
  border-top-color: var(--ink); animation: map-spin 0.8s linear infinite; }
.rp-wait .rp-verdict { color: var(--ink-2); }
.rp-more summary { list-style: none; cursor: pointer; }
.rp-more summary::-webkit-details-marker { display: none; }
.rp-more summary::after { content: " ▸"; }
.rp-more[open] summary::after { content: " ▾"; }
.rp-more p { margin: 6px 0 0 18px; font-size: 13.5px; line-height: 1.45; }
.rp-more .rp-note { margin-top: 3px; }
/* the summary on top: the safe side of the three, in the colour of its level (owner, 3 Nov 2026) */
.rp-sum { --lvl: var(--st-none); --lvl-ink: var(--st-none-ink); display: grid; gap: 2px; padding: 10px 13px 11px; border-radius: 14px;
  background: var(--lvl); color: var(--lvl-ink); }
.rp-sum[data-level="possible"] { --lvl: var(--st-watch); --lvl-ink: var(--st-watch-ink); }
.rp-sum[data-level="likely"] { --lvl: var(--st-warning); --lvl-ink: var(--st-warning-ink); }
.rp-sum[data-level="severe"] { --lvl: var(--st-storm); --lvl-ink: var(--st-storm-ink); }
.rp-sum-head { margin: 0; font: 700 21px/1.2 var(--font-display); }
.rp-sum-head b { text-transform: uppercase; letter-spacing: 0.03em; }
.rp-sum-where { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.rp-sum-coast { margin: 0 0 2px; font: 700 11.5px/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }   /* no position: whose report this is */
.rp-sum-dir { margin: 3px 0 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.rp-sum-arrow svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.rp-sum-arrow .ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.6; }
/* "What is nevera?" just under the summary, and the short explanation it opens under it (owner, 4 Nov 2026) */
/* the Help box (owner, 10 Nov 2026, in place of loose grey buttons that were "out of style"): rows on one tinted card,
   like "What the three sources say": an icon, the name, a short line under it, an arrow */
.help-box { display: grid; border-radius: 14px; background: var(--tint); overflow: hidden; }
.help-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0;
  border-top: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.help-box > .help-row:first-child { border-top: 0; }
.help-row:hover, .help-row:active { background: var(--tint); }
.help-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint);
  font: 700 15px/1 var(--font-body); }
.help-ic[data-icon="what"]::before { content: "?"; }
.help-ic[data-icon="terms"]::before { content: "§"; }
.help-ic[data-icon="demo"]::before { content: ""; margin-left: 3px; border-left: 11px solid var(--copper);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.help-words { display: grid; gap: 2px; min-width: 0; }
.help-words b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.help-words small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.help-chev { margin-left: auto; padding-left: 4px; font-size: 18px; line-height: 1; color: var(--ink-2); transition: transform 0.2s; }
.help-row[aria-expanded="true"] .help-chev { transform: rotate(180deg); }
/* the three fields of the opened panel and of the panel beside the map (owner, 10 Nov 2026: "this is hard to follow and
   chaotic ... it should be 3 distinguished fields"): Forecast, Right now, Help, each a tinted card under a copper title.
   Slid down, the panel stays as it was: the Today line and the status, no titles */
.field { display: grid; gap: 7px; min-width: 0; }
.field[hidden] { display: none; }
.field-cap { margin: 0; font: 600 11.5px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper); }
.sheet:not(.full) :is(#f-report, #f-now) > .field-cap { display: none; }
.report-card { display: grid; min-width: 0; }
.today-more { display: none; }
.sheet.full .report-card { border-radius: 14px; overflow: hidden; background: var(--tint); }
.sheet.full .report-card .strip { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 8px 12px 8px 8px; }
.sheet.full .strip.today::after { content: none; }           /* the button under it carries the arrow */
/* "Read full daily report" with an arrow down: a solid bar in the day's colour (yellow when nevera is possible) */
.sheet.full .today-more:not([hidden]) { display: flex; }
.today-more { --c: var(--ink-2); --c-on: var(--panel); align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 0 14px; border: 0; background: var(--c); color: var(--c-on); cursor: pointer;
  font: 700 12.5px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.today-more span { min-width: 0; line-height: 1.2; text-wrap: balance; }   /* the Croatian words on a narrow phone: two lines */
.today-more svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.today-more:hover { filter: brightness(1.06); }
.sheet.full .threat { padding: 6px 10px 12px; border-radius: 14px; background: var(--tint); }
.sheet.full .threat:is([data-level="none"], [data-level="unknown"]) .threat-head { padding: 4px 2px 2px; }
.sheet.full .threat:is([data-level="watch"], [data-level="warning"], [data-level="in_storm"]) { padding-top: 10px; }
.details-what { margin: 0; }
.rp-what-text { padding: 0 14px 12px 53px; animation: dhmz-fade 0.2s ease-out; }   /* opened under its row, in line with its words */
.rp-what-text p { margin: 0 0 7px; font-size: 14px; line-height: 1.45; }
.rp-what-text p:last-child { margin: 0; font-weight: 600; }
.dhmz-empty { display: grid; gap: 12px; }
.dhmz-empty > p { margin: 0; color: var(--ink-2); }
.dhmz-example { display: grid; gap: 8px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 16px; }
.dhmz-example .tag { justify-self: start; padding: 4px 8px; border-radius: 999px; background: var(--tint); color: var(--ink-2);
  font: 700 10px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.dhmz-ok { width: 100%; height: 44px; margin-top: 2px; }
@keyframes dhmz-fade { from { opacity: 0; } }
@keyframes dhmz-up { from { opacity: 0; transform: translateY(24px) scale(0.98); } }

/* the stormy-day demo (owner, 4 Nov 2026; app.js startDemo): a striped copper bar under the top bar the whole time
   (copper says "not live", as the radar time does on the time slider). The map buttons and the radar time make room
   for the bar */
.demo-bar:not([hidden]) { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; align-items: center;
  gap: 10px; min-height: 50px; padding: 6px 6px 6px 8px; border-radius: 14px; box-shadow: var(--shadow-sm); color: #fff;
  background: repeating-linear-gradient(135deg, #b56022 0 14px, #9e521b 14px 28px); }
.demo-tag { flex: none; padding: 6px 8px; border-radius: 8px; background: #fff; color: #b56022;
  font: 700 14px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.demo-words { display: grid; gap: 4px; min-width: 0; }
.demo-words b { font: 700 15px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.demo-words small { font: 500 12.5px/1.15 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-btn { flex: none; display: grid; place-items: center; height: 36px; min-width: 36px; padding: 0 12px; border: 0; border-radius: 10px;
  background: #fff; color: #142849; cursor: pointer; font: 700 12.5px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
#demo-exit { margin-left: auto; }
.demo-btn svg { width: 20px; height: 20px; fill: currentColor; }
.topbar.has-demo .status { top: calc(100% + 66px); }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {   /* on the map beside the panel, not over it */
  .status, .demo-bar:not([hidden]) { left: calc(var(--sheet-w) + 14px); }
  .status { max-width: calc(100% - var(--sheet-w) - 78px); }
}
#app:has(.topbar.has-demo) .map-tools, #app:has(.topbar.has-demo) .legend { top: calc(140px + var(--band, 0px) + env(safe-area-inset-top, 0px)); }
#app:has(.topbar.has-demo) #legend { max-height: calc(100% - 218px - var(--peek, 0px)); }
/* a phone upright or on its side, and a screen too narrow for the panel, the map and the legend side by side: no room
   to move the map buttons, the time slider and the map's credits aside for the legend, so it lies over them, under
   the radar time and the demo bar (--top-clear, app.js syncPeek), until it is closed */
@media (max-width: 599px), (orientation: landscape) and (max-height: 500px), (min-width: 900px) and (max-width: 1199px) {
  .stage.legend-open { --legend-w: 0px; }
  .legend { z-index: 5; }
  #app #legend, #app:has(.topbar.has-demo) #legend { top: var(--top-clear, calc(118px + var(--band, 0px)));
    max-height: calc(100% - var(--top-clear, 160px) - var(--peek, 0px) - 12px); }
}
/* the demo's own time slider in the place of the app's (owner, 4 Nov 2026: "like a movie with a dot you can slide back
   and forth showing a time, write a full date with a year and add play/pause button") */
.in-demo #timebar { display: none !important; }
.demo-time { grid-template-columns: 44px 1fr; gap: 4px; padding: 6px 14px 4px 4px; }
.demo-track { display: grid; gap: 3px; min-width: 0; }
.demo-when { font-size: 13px; line-height: 1.2; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-when b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* the phone view of the demo: only its alerts beside the phone (app.js startDemo) */
.sim-bar.demo-side :is(.sim-rel, .sim-pick, .sim-time, .sim-controls, .sim-ends, .sim-harbour) { display: none; }
.demo-ends { display: flex; justify-content: space-between; font-size: 11px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.demo-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.demo-end-btns { display: grid; gap: 8px; margin-top: 4px; }
.demo-end-btns .btn { width: 100%; height: 44px; }

/* the first opening (owner, 4 Nov 2026): what nevera is, the terms to agree to, and the demo with a big button. A page
   of its own on a phone, a card over the dimmed app on a larger screen */
.welcome { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: var(--paper);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
.welcome-card { max-width: 520px; margin: 0 auto; display: grid; gap: 12px; color: var(--ink); }
@media (min-width: 640px) {
  .welcome { background: rgb(13 28 53 / 0.5); }
  .welcome-card { margin: 24px auto; padding: 30px 32px; border-radius: 24px; background: var(--panel); box-shadow: 0 24px 60px rgb(13 28 53 / 0.35); }
}
.welcome-brand { margin-bottom: 4px; }
.welcome-brand .welcome-theme { margin-left: auto; }   /* then the language, both at the right */
.welcome-title { margin: 0; font: 700 25px/1.12 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.welcome-h { margin: 12px 0 0; font: 600 11.5px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); }
.welcome p { margin: 0; font-size: 15px; line-height: 1.5; }
.welcome .welcome-strong { font-weight: 600; }
.what-black { font-weight: 900; }            /* the wind apps sentence, in Roboto Black (owner, 12 Nov 2026) */
.welcome-terms { display: grid; gap: 10px; margin: 0; padding: 14px 16px 14px 34px; border-radius: 16px; background: var(--tint);
  font-size: 14px; line-height: 1.45; }
/* the box to tick, hard to miss (owner, 12 Nov 2026: "User has to click it on his own … make it way more obvious"):
   a big copper box in a copper-edged card until it is ticked, then a filled copper box with a white tick */
.welcome-agree { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: center; margin-top: 4px; padding: 16px;
  border: 2px solid var(--copper); border-radius: 16px; background: rgb(217 138 78 / 0.12); font-size: 15px; font-weight: 600;
  line-height: 1.4; cursor: pointer; }
.welcome-agree input { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; margin: 0; border: 3px solid var(--copper);
  border-radius: 8px; background: var(--panel); cursor: pointer; }
.welcome-agree input:checked { background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.welcome-agree input:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.welcome-agree:has(input:checked) { background: transparent; }
.welcome .wl-agreed { padding: 14px 16px; border-radius: 16px; background: var(--tint); font-weight: 600; }
.welcome .welcome-hint { color: var(--st-storm); font-weight: 600; font-size: 14px; }
.wl-step { display: grid; gap: 12px; }
.welcome-card > .btn, .wl-step > .btn { width: 100%; }
.welcome .welcome-demo { height: 56px; font-size: 15px; }   /* under "Visit skipperhotline.eu", which stays the big one */
.welcome-demo span::before { content: ""; display: inline-block; margin-right: 10px; vertical-align: -1px;
  border-left: 12px solid currentColor; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; }
.welcome .welcome-demo-sub { margin-top: -4px; text-align: center; font-size: 13px; color: var(--ink-2); }
.welcome .btn[aria-disabled="true"] { opacity: 0.45; }
/* the welcome in three steps (D53); "Terms of use" in Details shows the terms alone, without the dots or Back */
.welcome.wl-terms-only .wl-dots, .welcome.wl-terms-only .wl-back { display: none; }
.wl-dots { display: flex; justify-content: center; gap: 6px; margin: -2px 0 4px; }
.wl-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--rule); transition: width 0.2s, background 0.2s; }
.wl-dots i.on { width: 24px; background: var(--copper); }
.wl-step .welcome-h + .welcome-title { margin-top: -4px; }
.wl-how { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wl-how li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 10px 12px 10px 10px;
  border-radius: 12px; background: var(--tint); font-size: 14.5px; line-height: 1.4; }
.wl-how b { padding: 7px 4px 6px; border-radius: 7px; text-align: center; background: var(--magenta); color: var(--magenta-ink);
  font: 700 11.5px/1 var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; }
.wl-key { display: grid; gap: 4px; padding: 13px 16px 14px; border-radius: 14px; border-left: 4px solid var(--copper);
  background: var(--tint); font-size: 14.5px; line-height: 1.45; }
.wl-key b { font: 700 17px/1.2 var(--font-display); letter-spacing: 0.02em; }
.wl-more { justify-self: start; display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none;
  cursor: pointer; color: var(--copper); font: 600 14.5px/1.2 var(--font-body); text-decoration: underline;
  text-underline-offset: 3px; }
.wl-more::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
.wl-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.welcome .wl-next, .welcome .wl-go { height: 50px; }
.welcome .wl-agree-go { height: 56px; margin-top: 4px; font-size: 15px; }
.welcome .wl-visit { display: grid; place-items: center; height: 64px; margin-top: 6px; font-size: 16px; text-decoration: none; }
.wl-back { justify-self: center; padding: 8px 18px; border: 0; background: none; cursor: pointer; color: var(--ink-2);
  font: 600 13px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }

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