/* Layout: full-bleed chart (map) with a threat sheet - bottom sheet on phones, left panel on wide screens.
   Palette from nautical charts: chart-paper ground, navy ink, chart magenta for "you" and controls.
   Alert levels use the reserved status colours, always paired with a word and an icon. */
:root {
  --paper: #f2f5f6;
  --panel: #ffffff;
  --ink: #0f2433;
  --ink-2: #4a5d6b;
  --rule: #d6dee3;
  --magenta: #a8186f;
  --magenta-ink: #ffffff;
  --sea: #2a78d6;
  --st-watch: #fab219;
  --st-watch-ink: #3d2b00;
  --st-warning: #ec835a;
  --st-warning-ink: #3f1608;
  --st-storm: #d03b3b;
  --st-storm-ink: #ffffff;
  --st-none: #0ca30c;
  --st-none-ink: #ffffff;
  --sw-on: #0ca30c; --sw-on-ink: #ffffff; --sw-off: #d03b3b; --sw-off-ink: #ffffff;
  --sw-night: #3c3f9a; --sw-night-bg: #e9e9f8; --sw-bar-night: #2c2f78;
  --live: #f04438;                  /* the dot that says live: bright enough on white and on navy */
  /* icons as masks (any colour): the alerts switch's bell, bell struck out and moon; the radar time's clock turning back */
  --i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1z'/%3E%3C/svg%3E");
  --i-bell-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M1 1l22 22' stroke='%23000' stroke-width='6'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1z'/%3E%3Cpath d='M3 3l18 18' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.6 15.2A8.6 8.6 0 0 1 8.8 3.4a8.9 8.9 0 1 0 11.8 11.8z'/%3E%3C/svg%3E");
  --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 6px 24px rgb(15 36 51 / 0.14);
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 10px;
  --sheet-w: 400px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a141c; --panel: #102030; --ink: #e4ecf1; --ink-2: #9bb0bf; --rule: #22394b;
    --magenta: #e2589f; --magenta-ink: #1a0611; --sea: #4b95e8;
    --shadow: 0 6px 24px rgb(0 0 0 / 0.5);
    --sw-on: #1fae3f;
    --sw-night: #a9adff; --sw-night-bg: #1f2350; --sw-bar-night: #343a8f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a141c; --panel: #102030; --ink: #e4ecf1; --ink-2: #9bb0bf; --rule: #22394b;
  --magenta: #e2589f; --magenta-ink: #1a0611; --sea: #4b95e8;
  --shadow: 0 6px 24px rgb(0 0 0 / 0.5);
  --sw-on: #1fae3f;
  --sw-night: #a9adff; --sw-night-bg: #1f2350; --sw-bar-night: #343a8f;
  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; }

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  background: var(--panel); border-bottom: 1px solid var(--rule); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 6px; }
.brand-mark { width: 22px; height: 22px; fill: var(--magenta); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.02em; }
.brand-badge, .brand-words { display: none; }     /* the new look's (end of this file) */
.status { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.radar-time { font-family: var(--font-data); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { font-family: var(--font-data); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; background: var(--magenta); color: var(--magenta-ink); }
.top-actions { display: flex; gap: 6px; }
.icon-btn { min-width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--rule); background: transparent; cursor: pointer; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; fill: var(--ink); }
.icon-btn.lang { font-family: var(--font-data); font-weight: 500; font-size: 13px; }

/* stage */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; --legend-w: 0px; --legend-panel: min(290px, 78vw); }
.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; }

.map-tools { position: absolute; top: 10px; right: calc(var(--legend-w) + max(10px, env(safe-area-inset-right, 0px))); transition: right 0.25s ease; display: flex; flex-direction: column; gap: 6px; z-index: 3; align-items: flex-end; }
.tool { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px; cursor: pointer; box-shadow: var(--shadow); font-size: 13.5px; }
.tool.active { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.tool { display: inline-flex; align-items: center; gap: 6px; }
.tool svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (max-width: 600px) {
  .tool { padding: 7px; font-size: 12.5px; }
  .tool .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool svg { width: 20px; height: 20px; }
  .rt-label { display: none; }
}
@media (max-width: 480px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brand-mark { width: 26px; height: 26px; }
}

/* 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); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow);
  font-size: 12.5px; transition: transform 0.25s ease; }
@media (min-width: 900px) { .legend { bottom: 12px; } }
.legend.closed { transform: translateX(calc(100% + 12px)); }
.legend-body { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 14px; transition: visibility 0s; }
.legend.closed .legend-body { visibility: hidden; transition: visibility 0s 0.25s; }
.legend-tab { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); width: 30px; padding: 12px 0 14px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-right: 0;
  border-radius: 8px 0 0 8px; box-shadow: -4px 4px 14px rgb(15 36 51 / 0.12); 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); }
.legend.closed .legend-tab { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.legend-hint { margin: 0 0 4px; color: var(--ink-2); }
.legend-title { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 12px 0 2px; }
.lg-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.legend-title + .lg-item { border-top: 0; }
.lg-key { display: grid; gap: 4px; min-width: 0; transition: opacity 0.2s; }
.lg-item.off .lg-key { opacity: 0.35; }
.lg-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px;
  background: transparent; cursor: pointer; font-size: 12px; white-space: nowrap; }
.lg-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.lg-item.off .lg-toggle { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-ink); }
.ramp { height: 10px; border-radius: 3px; background: linear-gradient(90deg, #cde2fb, #86b6ef, #3987e5, #1c5cab, #0d366b); }
.ramp-labels { display: flex; justify-content: space-between; color: var(--ink-2); }
.sev, .key { display: flex; align-items: center; gap: 8px; }
.sev i { width: 22px; height: 12px; border-radius: 3px; border: 2.5px solid; }
.sev-1 i { border-color: var(--st-watch); }
.sev-2 i { border-color: var(--st-warning); }
.sev-3 i { border-color: var(--st-storm); }
/* the July v2 trial: purple storm outlines, rounded, thicker when stronger (app.js STRENGTH_*) */
.legend.trial .sev { display: grid; grid-template-columns: 22px 1fr; gap: 0 8px; }
.legend.trial .sev-hint { grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.legend.trial .sev i { border-radius: 7px; }
.legend.trial .sev-1 i { border-color: #b39ddb; border-width: 2.7px; }
.legend.trial .sev-2 i { border-color: #7e57c2; border-width: 3.9px; }
.legend.trial .sev-3 i { border-color: #3c1078; border-width: 5.1px; }
.key i { width: 22px; height: 12px; border-radius: 3px; }
.key-swath { background: rgb(208 59 59 / 0.18); border: 1px solid rgb(208 59 59 / 0.5); }
.key-fc { border: 2px dashed var(--ink-2); }
.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 dots by age, as on the map (made from app.js LI_COLORS / LI_ALPHA): two columns of three */
.li-ages { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 3px 12px; justify-content: start;
  font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; }
.li-ages .key { gap: 6px; white-space: nowrap; }
.key i.li-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.8px rgb(0 0 0 / 0.4); }
.li-ages.plain i.li-dot { box-shadow: none; }   /* no outline on the map either (NEVERA_LIGHTNING_OUTLINE=0) */
/* the map's star picture (app.js starCanvas); NEVERA_LIGHTNING_STAR=0: dots */
.li-ages.star i.li-dot { width: 14px; height: 14px; margin: -1px; border-radius: 0; box-shadow: none;
  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; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; width: min(330px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px;
  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) {
  /* 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 rgba(168, 24, 111, 0.22);
  border-top-color: var(--magenta); animation: map-spin 0.9s linear infinite; }
.map-wait-text { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px;
  padding: 4px 10px; font-size: 13px; box-shadow: var(--shadow); }
@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; grid-template-columns: 44px 1fr auto auto; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 3px 6px 3px 3px; }
.timebar.past { border-color: var(--magenta); }
.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; }
.timebar input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--magenta); }
/* a fixed width, also when empty at live: if the label came and went, the slider would change width under the
   pointer and flip between live and the past while dragging near the right end (owner, 1 Nov 2026).
   12ch = the longest label, "prije 55 min" */
.tb-ago { width: 12ch; text-align: right; font-family: var(--font-data); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.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; }
.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 { background: var(--magenta); border-color: var(--magenta); color: #fff; cursor: pointer; }
/* Live next to play, hour marks under the slider, "live" at live (owner, 2 Nov 2026; NEVERA_TIMEBAR_MARKS=0: before) */
.tb-ticks { display: none; position: relative; height: 15px; }
.tb-ticks span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 5px; line-height: 1;
  font-family: var(--font-data); font-size: 11px; white-space: nowrap; color: var(--ink-2); }
.tb-ticks span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: currentColor; }
.timebar.marks { grid-template-columns: 44px auto 1fr auto; 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-column: 3; grid-row: 1; align-self: end; }
.timebar.marks .tb-ticks { display: block; grid-column: 3; grid-row: 2; }
.timebar.marks .tb-ago { grid-column: 4; grid-row: 1 / span 2; width: 10ch; }   /* the longest: "55 min ago" */
html[lang="hr"] .timebar.marks .tb-ago { width: 12ch; }                          /* "prije 55 min" */
.timebar.trial .tb-ago { text-align: center; }        /* v2 trial: in the middle of the space after the slider */
.timebar.marks.past .tb-live:hover { background: color-mix(in srgb, var(--magenta) 75%, #fff);
  border-color: color-mix(in srgb, var(--magenta) 75%, #fff); }
@media (min-width: 900px) {
  .timebar { left: calc(var(--sheet-w) + 24px + (100% - var(--sheet-w) - 24px - var(--legend-w)) / 2); bottom: 26px; z-index: 4;
    width: max(300px, min(560px, calc(100% - var(--sheet-w) - var(--legend-w) - 64px))); 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; gap: 14px; align-content: start;
}
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 4px auto 0; }
@media (min-width: 900px) {
  .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); border-radius: 14px; padding: 16px; }
  .grab { display: none; }
  .map-tools { right: calc(var(--legend-w) + 12px); }
  .legend { top: 12px; right: 12px; }
}

/* warnings not working: above the card, in the storm colour, so it cannot be missed */
.outage { display: grid; gap: 3px; padding: 11px 14px; border-radius: 12px; background: var(--st-storm); color: var(--st-storm-ink); }
.outage b { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: 0.02em; 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-radius: 12px; border: 1px solid var(--rule); overflow: hidden; }
.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; gap: 12px; align-items: center; padding: 12px 14px; background: var(--lvl); color: var(--lvl-ink); }
.threat[data-level="unknown"] .threat-head { background: transparent; }
.threat-icon { width: 34px; height: 34px; fill: currentColor; }
.threat-level { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.threat-sub { font-size: 14px; margin-top: 3px; text-wrap: balance; }
.eta { text-align: right; line-height: 1; }
.eta-num { font-family: var(--font-display); font-weight: 700; font-size: 44px; font-variant-numeric: tabular-nums; }
.eta-unit { display: block; font-family: var(--font-data); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 10px 14px; gap: 8px 14px; border-top: 1px solid var(--rule); }
.facts div { min-width: 0; }
.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-family: var(--font-data); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.advice { margin: 0; padding: 0 14px 12px; font-size: 14.5px; }
.li-near { margin: 0; padding: 8px 14px 10px; border-top: 1px solid var(--rule); font-size: 14px; }
.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; }

.section-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 6px; }
.official { display: grid; gap: 6px; }
.outlook { display: grid; gap: 4px; }
.outlook-head { margin: 0; font-weight: 700; padding-left: 10px; border-left: 3px 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; font-size: 13.5px; color: var(--ink-2); }
.outlook-row input { width: 18px; height: 18px; accent-color: var(--magenta); }
.outlook-on { display: flex; gap: 8px; align-items: center; }
.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); }

.alerts-box { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--rule); border-radius: 12px; }
.alerts-text { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.alerts-text span { font-family: var(--font-data); font-size: 13px; color: var(--ink-2); }
.alerts-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mute-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.mute-row select { padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.hint { margin: 0; font-size: 13px; color: var(--ink-2); }
.btn { border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); padding: 8px 14px; cursor: pointer; font-weight: 700; }
.btn.primary { background: var(--magenta); color: var(--magenta-ink); border-color: var(--magenta); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.55; cursor: default; }

.replay-bar { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--magenta) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--magenta) 35%, var(--rule)); }
.replay-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.replay-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.replay-controls input[type="range"] { width: 100%; accent-color: var(--magenta); }
.replay-time { font-family: var(--font-data); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.replay-point { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.replay-point select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); }
.replay-eval { margin: 0; font-size: 13.5px; }

/* 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; border-radius: 12px; background: color-mix(in srgb, var(--magenta) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--magenta) 35%, var(--rule)); }
.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 input { 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; }
.sim-pick .btn { padding: 6px 14px; }
.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); }
.sim-none { margin: 0; font-size: 12.5px; color: var(--ink-2); }

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

.replays-dialog { border: 1px solid var(--rule); border-radius: 14px; padding: 0; background: var(--panel); color: var(--ink); width: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.replays-dialog::backdrop { background: rgb(10 20 28 / 0.45); }
.dialog-inner { padding: 18px; display: grid; gap: 12px; }
.dialog-inner h2 { font-family: var(--font-display); font-size: 24px; margin: 0; }
.dialog-lead { margin: 0; color: var(--ink-2); }
.replay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.replay-item { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: transparent; cursor: pointer; }
.replay-item:hover { border-color: var(--magenta); }
.replay-item b { font-size: 15px; }
.replay-item span { font-size: 13px; color: var(--ink-2); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; z-index: 20; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }

.place-label { font: 600 11.5px/1 var(--font-body); color: var(--ink-2); text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); pointer-events: none; white-space: nowrap; }
.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 new look (?look=new)
   Owner, 3 Nov 2026. Skipper Hotline's style (skipperhotline.eu, its offers and documents): 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; the status always fills the bottom ~20 % (--peek, set by app.js) and slides up for
   the details. Buttons are navy, copper only an accent (it is too close to the orange warning); the status colours
   stay for the alert levels. */
:root.look-new {
  --paper: #eef1f6; --panel: #ffffff; --ink: #142849; --ink-2: #5a6578; --rule: #e1e6ee;
  --magenta: #142849; --magenta-ink: #ffffff;
  --navy: #142849; --navy-deep: #0d1c35; --copper: #b56022; --copper-soft: #d98a4e;
  --tint: rgb(20 40 73 / 0.07); --glass: rgb(255 255 255 / 0.88); --glass-line: rgb(20 40 73 / 0.09);
  --shadow: 0 8px 28px rgb(13 28 53 / 0.16); --shadow-sm: 0 2px 12px rgb(13 28 53 / 0.14);
  --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;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root.look-new: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);
  }
}
:root.look-new[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);
}
.look-new #app { position: relative; }
.look-new .glassy, .look-new .topbar, .look-new .status, .look-new .tool, .look-new .timebar, .look-new .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 */
.look-new .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));
  height: 56px; padding: 0 6px 0 8px; gap: 10px; border-radius: 18px; box-shadow: var(--shadow); }
.look-new .brand-mark, .look-new .brand-name { display: none; }
.look-new .brand { gap: 10px; }
/* Skipper Hotline's own mark (icons/skipper-hotline-mark.svg, from skipperhotline.eu); on a white tile in the dark */
.look-new .brand-badge { display: grid; place-items: center; width: 38px; height: 40px; border-radius: 11px; }
.look-new .brand-badge img { width: 30px; height: 40px; display: block; }
@media (prefers-color-scheme: dark) { :root.look-new:not([data-theme="light"]) .brand-badge { background: #fff; } }
:root.look-new[data-theme="dark"] .brand-badge { background: #fff; }
.look-new .brand-words { display: grid; gap: 4px; line-height: 1; }
.look-new .brand-words b { font: 700 20px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.look-new .brand-words small { font: 600 9.5px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); }
/* tried in the July v2 test (config.py brand_neverisk, 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) */
.look-new .brand-words.neverisk b span { font-weight: 400; }
.look-new .brand-words.neverisk small { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); }
.look-new .brand-words.neverisk a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; padding: 6px 0; }
@media (max-width: 389px) {   /* phones 360-375 px wide: a smaller anchor and second line, so the buttons beside it fit */
  .look-new.neverisk .topbar .brand { gap: 7px; }
  .look-new.neverisk .topbar .brand-badge { width: 32px; }
  .look-new.neverisk .topbar .brand-badge img { width: 26px; height: 35px; }
  .look-new.neverisk .topbar .brand-words small { font-size: 10.5px; letter-spacing: 0; }
}
.look-new .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); }
.look-new .radar-time { font: 500 12.5px/1.2 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.look-new .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 */
.look-new .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); }
.look-new .status.past { background: #b56022; border-color: #b56022; }
.look-new .status.past .radar-time, .look-new .status.past .rt-label { color: #fff; }
.look-new .status.past .rt-label, .look-new .status.past .rt-hm { font-weight: 700; }
.look-new .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; }
.look-new .chip { font: 700 10px/1 var(--font-display); letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px; background: var(--copper); color: #fff; }
.look-new .top-actions { margin-left: auto; gap: 2px; align-items: center; }   /* the alerts pill is shorter than the buttons */
.look-new .icon-btn { min-width: 42px; height: 42px; border: 0; border-radius: 13px; }
.look-new .icon-btn:hover { background: var(--tint); }
.look-new .icon-btn svg { width: 21px; height: 21px; fill: var(--ink); }
.look-new .icon-btn.lang { font: 700 14px/1 var(--font-display); letter-spacing: 0.12em; }

/* round map buttons on the right, under the bar; the legend behind the third */
.look-new .map-tools { top: calc(82px + env(safe-area-inset-top, 0px)); gap: 10px; }
.look-new .tool { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; color: var(--ink); box-shadow: var(--shadow-sm); }
.look-new .tool .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.look-new .tool svg { width: 21px; height: 21px; }
.look-new .tool.active { background: #142849; color: #fff; border-color: #142849; }
.look-new .legend { top: calc(82px + env(safe-area-inset-top, 0px)); border-radius: 18px; box-shadow: var(--shadow); }
.look-new .stage { --legend-panel: min(306px, 80vw); }   /* wide enough for each note on one line (below) */
.look-new .legend-body { padding: 8px 12px 12px; }
.look-new .legend .section-title { padding-right: 40px; line-height: 32px; margin-bottom: 2px; }   /* level with the X */
.look-new .legend-tab, .look-new .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; }
.look-new .legend-tab span { display: none; }
.look-new .lg-toggle { border-radius: 999px; }
.look-new .lg-item.off .lg-toggle { background: #142849; border-color: #142849; color: #fff; }
/* a symbol, a word or two and the eye, with a note under each (owner, 4 Nov 2026; app.js newLegend). 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 */
.look-new #legend { bottom: auto; max-height: calc(100% - 160px - var(--peek, 0px)); display: flex; flex-direction: column; }   /* #: over the phone rule below */
.look-new .legend-body { height: auto; min-height: 0; flex: 1 1 auto; }
.look-new .legend-hint, .look-new .legend-title { display: none; }
.look-new .lg-item { grid-template-columns: 58px 1fr 32px; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.look-new .lg-item[data-show="radar"] { border-top: 0; }
.look-new .lg-key { display: contents; }   /* its symbols, words and notes sit in the item's grid */
.look-new .lg-item.off :is(.lg-sym, .lg-lb, .lg-note) { opacity: 0.35; }
.look-new .lg-sym { grid-column: 1; display: flex; align-items: center; gap: 5px; }
.look-new .lg-lb { grid-column: 2; }
.look-new .lg-sym .ramp { flex: 1; height: 9px; }
.look-new .lg-sym > i { width: 22px; height: 12px; border-radius: 3px; }
.look-new .lg-lb b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.look-new .lg-lb small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.look-new .lg-key .lg-note { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.look-new .lg-key .lg-note:not(:last-child) { margin-bottom: 6px; }
.look-new .lg-rings { display: flex; gap: 4px; }
.look-new .lg-rings i { display: block; width: 15px; height: 11px; border: 2.5px solid; border-radius: 4px; }
.look-new .lg-rings i:nth-child(1) { border-color: var(--st-watch); }
.look-new .lg-rings i:nth-child(2) { border-color: var(--st-warning); }
.look-new .lg-rings i:nth-child(3) { border-color: var(--st-storm); }
.look-new .lg-rings.trial i { border-radius: 6px; }
.look-new .lg-rings.trial i:nth-child(1) { border-color: #b39ddb; border-width: 2px; }
.look-new .lg-rings.trial i:nth-child(2) { border-color: #7e57c2; border-width: 3px; }
.look-new .lg-rings.trial i:nth-child(3) { border-color: #3c1078; border-width: 4px; }
.look-new .lg-sym .li-ages { display: flex; gap: 4px; padding: 2px 5px; border-radius: 6px; background: #142849; }   /* white stars: on navy */
.look-new .lg-toggle { grid-column: 3; grid-row: 1; width: 32px; min-height: 32px; padding: 0; justify-content: center; }
.look-new .lg-toggle span { display: none; }
.look-new .lg-toggle svg { width: 17px; height: 17px; }
.look-new .dcheck { top: calc(82px + env(safe-area-inset-top, 0px)); border-radius: 18px; border-color: var(--glass-line); }
.look-new .map-wait-ring { border-color: rgb(20 40 73 / 0.18); border-top-color: #142849; }
.look-new .map-wait-text { border-radius: 999px; padding: 6px 14px; }

/* the time slider: a glass strip right above the status */
.look-new .timebar { border-radius: 16px; box-shadow: var(--shadow-sm); }
.look-new .timebar.past { border-color: var(--ink); }
.look-new .tb-live { font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
/* "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) */
.look-new .timebar, .look-new .timebar.marks { grid-template-columns: 44px 1fr; padding-right: 14px; }
.look-new .timebar.marks input[type="range"], .look-new .timebar.marks .tb-ticks { grid-column: 2; }
.look-new .timebar .tb-ago, .look-new .timebar .tb-live { display: none; }
.look-new .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); }
.look-new .timebar.marks.past .tb-live:hover { background: color-mix(in srgb, var(--navy) 85%, #fff); border-color: var(--glass-line); }
.look-new .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) { .look-new .timebar.past .tb-live { animation: none; } }
.look-new .tb-ago, .look-new .tb-ticks span { font-family: var(--font-body); }

/* the status panel */
.look-new .sheet { gap: 12px; border-color: var(--rule); }
.look-new .threat { border: 0; border-radius: 0; overflow: visible; }
.look-new .threat-head { gap: 12px; padding: 12px 14px; border-radius: 18px; }
.look-new .threat[data-level="none"] .threat-head, .look-new .threat[data-level="unknown"] .threat-head { background: transparent; color: var(--ink); padding: 8px 2px 2px; }
.look-new .threat-icon { width: 46px; height: 46px; padding: 10px; border-radius: 14px; background: rgb(255 255 255 / 0.28); }
.look-new .threat[data-level="none"] .threat-icon { background: color-mix(in srgb, var(--st-none) 13%, transparent); color: var(--st-none); }
.look-new .threat[data-level="unknown"] .threat-icon { background: var(--tint); color: var(--ink-2); }
.look-new .threat-level { font: 700 24px/1.05 var(--font-display); letter-spacing: 0.03em; text-wrap: balance; }   /* two even lines, never one word alone */
.look-new .threat-sub { font-size: 14px; margin-top: 4px; }
.look-new .threat[data-level="none"] .threat-sub, .look-new .threat[data-level="unknown"] .threat-sub { color: var(--ink-2); }
.look-new .eta-num { font: 700 40px/1 var(--font-display); }
.look-new .eta-unit { font: 600 11px/1 var(--font-display); letter-spacing: 0.14em; }
.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); }
#chip-dhmz.has-warn::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-watch); box-shadow: 0 0 0 2px var(--panel); }
.look-new .facts { margin: 14px 0 0; padding: 0; gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.look-new .facts div { padding: 10px 14px; border-top: 1px solid var(--rule); }
.look-new .facts div:nth-child(-n+2) { border-top: 0; }
.look-new .facts div:nth-child(even) { border-left: 1px solid var(--rule); }
.look-new .facts dt { font: 600 10.5px/1.2 var(--font-display); letter-spacing: 0.14em; }
.look-new .facts dd { margin-top: 4px; font: 500 15px/1.25 var(--font-body); color: var(--ink); }
.look-new .li-near { border-top: 0; padding: 12px 2px 0; }
.look-new .advice { margin-top: 12px; 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; }
.look-new .section-title, .look-new .eyebrow { font: 600 11.5px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin: 0 0 8px; }
.look-new .alerts-box { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; }
.look-new .alerts-text strong { font: 600 13px/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.look-new .alerts-text span { font-family: var(--font-body); }
.look-new .btn { border-radius: 12px; padding: 11px 18px; font: 600 13px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.look-new .outage { border-radius: 18px; }
.look-new .outage b { font-family: var(--font-display); letter-spacing: 0.06em; font-size: 20px; }
.look-new .replay-bar, .look-new .sim-bar { border-radius: 16px; }
.look-new .attrib { font-size: 11px; }
.look-new .toast { border-radius: 14px; background: #0d1c35; color: #fff; }
.look-new .replays-dialog { border: 0; border-radius: 22px; }
.look-new .dialog-inner h2 { font: 700 22px/1.1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.look-new .replay-item { border-radius: 14px; }
.look-new .replay-item:hover { border-color: var(--ink); }

@media (max-width: 899px) {
  /* the sheet slid down to its top --peek; .open: all of it, with the top of the map still in view */
  .look-new .sheet { max-height: calc(100% - 78px - 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); }
  .look-new .sheet.open { transform: none; overflow-y: auto; touch-action: pan-y; }
  .look-new .sheet.open .grab, .look-new .sheet.open .threat-head { touch-action: none; }
  .look-new .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); }
  .look-new .grab::before { content: ""; position: absolute; inset: -12px -70px; }      /* a bigger target for the thumb */
  .look-new .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); }
  .look-new .legend { bottom: calc(var(--peek, 20vh) + 78px); }
  .look-new .maplibregl-ctrl-bottom-right { bottom: calc(var(--peek, 20vh) + 66px); }
  .look-new .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }   /* zoom with two fingers */
  .look-new .toast { bottom: calc(var(--peek, 20vh) + 78px); }
}
@media (min-width: 900px) {
  .look-new .sheet { top: calc(78px + env(safe-area-inset-top, 0px)); border-radius: 20px; }
  .look-new #app:has(.topbar.has-bar) .sheet { top: calc(136px + env(safe-area-inset-top, 0px)); }   /* under the alerts bar */
  .look-new #chip-details { display: none; }
}

/* whether this phone gets storm alerts (owner, 3 Nov 2026: "obvious and idiot proof"): a switch in the bar, always in
   view. Its shape and icon say on or off, and its colour as before (owner, after trying navy and grey: on green, off
   red): on, the knob on the right of a green track, with a bell; off, on the left of a red
   one, the bell struck out; off until the morning report, a moon and the time. Off also shows a bar under it, which moves the radar time
   down */
.look-new .alert-state:not([hidden]) { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; height: 32px;
  padding: 0 3px 0 11px; margin-right: 4px; border: 0; border-radius: 999px; cursor: pointer; background: var(--sw-on);
  color: var(--sw-on-ink); font: 700 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.look-new .alert-state:not([data-state="on"]) { flex-direction: row-reverse; padding: 0 11px 0 3px; background: var(--sw-off);
  color: var(--sw-off-ink); }
.look-new .alert-state[data-state="paused"] { background: var(--sw-night-bg); color: var(--sw-night); box-shadow: inset 0 0 0 1.5px currentColor; }
.as-knob { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.as-knob::before { content: ""; width: 16px; height: 16px; background: var(--sw-on);
  -webkit-mask: var(--i-bell) center / contain no-repeat; mask: var(--i-bell) center / contain no-repeat; }
[data-state="off"] .as-knob::before { background: var(--sw-off); -webkit-mask-image: var(--i-bell-off); mask-image: var(--i-bell-off); }
[data-state="paused"] .as-knob::before { background: var(--sw-night); -webkit-mask-image: var(--i-moon); mask-image: var(--i-moon); }
.look-new .alert-state.icon-only { width: 52px; padding: 0 3px; }   /* the knob alone, still on its side of the track */
.look-new .brand { flex: none; white-space: nowrap; }   /* the name never squeezed: the switch goes knob-only instead */
.look-new .alert-state.icon-only span { display: none; }
.look-new .alert-bar[data-state="off"] { background: var(--sw-off); color: var(--sw-off-ink); }
.look-new .alert-bar[data-state="paused"] { background: var(--sw-bar-night); color: #fff; }
.look-new .alert-bar:not([hidden])::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--i-bell-off) center / contain no-repeat; mask: var(--i-bell-off) center / contain no-repeat; }
.look-new .alert-bar[data-state="paused"]::before { -webkit-mask-image: var(--i-moon); mask-image: var(--i-moon); }
.look-new .alert-bar:not([hidden]) { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; align-items: center;
  gap: 10px; min-height: 50px; padding: 8px 8px 8px 14px; border-radius: 14px; box-shadow: var(--shadow-sm);
  font: 500 13.5px/1.25 var(--font-body); }
.look-new .alert-bar b { margin-right: 3px; font: 700 15px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.look-new .alert-bar-btn { flex: none; margin-left: auto; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff; color: #142849; font: 700 12.5px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.look-new .topbar.has-bar .status { top: calc(100% + 66px); }
.ap-choices { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ap-choice { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: start; padding: 14px 16px;
  border: 2px solid var(--rule); border-radius: 16px; cursor: pointer;
  background: var(--panel); color: var(--ink); font: inherit; text-align: left; }
.ap-choice b { grid-column: 2; display: flex; align-items: flex-start; gap: 9px; font: 700 18px/1.1 var(--font-display);
  letter-spacing: 0.06em; text-transform: uppercase; }
.ap-choice { --c: var(--sw-on); }   /* the switch's colours and icons; no small switches here: a switch asks to be
                                    flipped, these are picked (owner, 3 Nov 2026) */
.ap-choice[data-state="paused"] { --c: var(--sw-night); }
.ap-choice[data-state="off"] { --c: var(--sw-off); }
.ap-ico { grid-row: 1 / span 2; width: 22px; height: 22px; background: var(--c);   /* level with the title's first line */
  -webkit-mask: var(--i-bell) center / contain no-repeat; mask: var(--i-bell) center / contain no-repeat; }
.ap-choice[data-state="paused"] .ap-ico { -webkit-mask-image: var(--i-moon); mask-image: var(--i-moon); }
.ap-choice[data-state="off"] .ap-ico { -webkit-mask-image: var(--i-bell-off); mask-image: var(--i-bell-off); }
.ap-choice[hidden] { display: none; }
#alert-pop-title { white-space: normal; line-height: 1.3; }
.ap-choice span { grid-column: 2; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.ap-choice[aria-pressed="true"] b::after { content: "✓"; margin-left: auto; font-size: 20px; }
.ap-choice[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--panel)); }
.ap-note { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* 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); }
.look-new .outlook-head { font-size: 16px; line-height: 1.3; border-left-width: 4px; }
.look-new .outlook-body { font-size: 14px; line-height: 1.55; }
/* 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-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-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) */
.rp-what { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 7px;
  border: 0; border-radius: 15px; background: var(--tint); color: var(--ink); font: 600 13px/1 var(--font-body);
  white-space: nowrap; cursor: pointer; }
.rp-what::before { content: "?"; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid currentColor;
  border-radius: 50%; font: 700 11px/1 var(--font-body); }
.rp-what::after { content: "▾"; font-size: 11px; color: var(--ink-2); transition: transform 0.2s; }
.rp-what[aria-expanded="true"]::after { transform: rotate(180deg); }
.details-what { display: grid; gap: 8px; margin-top: 12px; }        /* in Details, under the storm facts */
.rp-what-text { padding: 11px 13px; border-radius: 14px; background: var(--tint); animation: dhmz-fade 0.2s ease-out; }
.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), each alert as its phone notification on top,
   and the list of days. The map buttons and the radar time make room for the bar */
.look-new .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; }
.look-new .topbar.has-demo .alert-bar:not([hidden]), .look-new .topbar.has-demo .status { top: calc(100% + 66px); }
.look-new .topbar.has-demo.has-bar .status { top: calc(100% + 124px); }
.look-new #app:has(.topbar.has-demo) .map-tools, .look-new #app:has(.topbar.has-demo) .legend { top: calc(140px + env(safe-area-inset-top, 0px)); }
.look-new #app:has(.topbar.has-demo) #legend { max-height: calc(100% - 218px - var(--peek, 0px)); }
/* 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") */
.look-new.in-demo #timebar { display: none !important; }
.look-new .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, .replay-point) { 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; }
.rp-what.demo-open::before { content: ""; width: 0; height: 0; margin-left: 4px; border: 0; border-radius: 0;
  border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.rp-what.demo-open::after { content: none; }
.rp-what.terms-open::before { content: "§"; }
.rp-what.terms-open::after { content: none; }

/* 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-lang { margin-left: auto; }
.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; }
.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; }
.welcome-agree { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-top: 4px; padding: 14px;
  border: 2px solid var(--rule); border-radius: 16px; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.welcome-agree input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); cursor: pointer; }
.welcome-agree:has(input:checked) { border-color: var(--navy); }
.welcome .welcome-hint { color: var(--st-storm); font-weight: 600; font-size: 14px; }
.welcome-card > .btn { width: 100%; }
.welcome .welcome-demo { height: 64px; margin-top: 6px; font-size: 16px; }
.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 .welcome-start { height: 50px; }
.welcome .btn[aria-disabled="true"] { opacity: 0.45; }

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