/* White, open workspace. The island is the primary visual. */
:root {
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f4f5f5;
  --ink:#1c2328; --muted:#61696e; --line:#e5e8e9;
  --sea:#0b4f6c; --sea-soft:#e8f0f4;
  --mares:#9a6a0c; --mares-soft:#fbf1dc;
  --crowd:#0b4f6c; --crowd-off:#e0e6e9;
  --great:#0b6e64; --good:#0f8a7e; --okay:#62b0a2; --okay-ink:#06332e; --fair:#e2a72e; --fair-ink:#46300a; --poor:#e5582a; --cold:#4f8fb0; --warm:#e07a52;
  --shadow:0 8px 32px #12202a0a;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:var(--font-body); --font-data:var(--font-body);
  --map-paper:#ffffff; --map-land:#f7f6e9; --map-ink:#3d4f5a; --map-sea-ink:#8fa8ad;
  --radius:10px; --radius-sm:6px;
  --gutter-l:max(28px,env(safe-area-inset-left,0px)); --gutter-r:max(28px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html {scroll-behavior:smooth;scroll-padding-top:86px}
body {margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a {color:var(--sea)}
button,input,select {font:inherit;color:inherit}
button {touch-action:manipulation}
:focus-visible {outline:2px solid var(--sea);outline-offset:4px;border-radius:4px}
.num {font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.wrap {max-width:1440px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
h1,h2,h3 {margin:0;text-wrap:balance}
h2 {font:500 clamp(27px,3vw,36px)/1.1 var(--font-display);letter-spacing:-.045em}
h3 {font:500 17px/1.3 var(--font-body)}
.eyebrow {font:500 11px/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.muted {color:var(--muted)}
.small {font-size:13px}
.topbar {position:sticky;top:0;z-index:40;background:#fffffff5;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .wrap {display:flex;align-items:center;gap:30px;min-height:60px}
.brand {display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;text-decoration:none;color:var(--ink);min-width:0}
.brand b {font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.055em;white-space:nowrap;align-self:end;overflow:hidden;text-overflow:ellipsis}
.brand-mark {flex:none;grid-row:1/3}
/* One quiet line under the wordmark, beside the logo, so the bar keeps its height. */
.brand-tag {grid-column:2;align-self:start;font-size:12px;line-height:1.05;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tag-more::before {content:" · "}
.brand-name {white-space:pre}
.brand-slot {display:inline-block;position:relative;line-height:1.1}
.brand-slot > span {display:block}
.brand-domain {margin-left:8px;font:700 13px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:0;color:var(--sea)}
.topnav {display:flex;gap:28px;margin-left:auto}
.topnav a {font-size:13px;white-space:nowrap;text-decoration:none;color:var(--muted);padding:19px 0 17px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.topnav a[aria-current] {color:var(--ink);border-color:var(--sea)}
.topnav a:hover {color:var(--ink);border-color:var(--line)}
.lang {display:flex;flex-shrink:0;margin-left:16px}
.lang-select {display:block;appearance:none;-webkit-appearance:none;min-height:36px;padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23646b65' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;font-size:13px;font-weight:500;cursor:pointer}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.now {padding-block:6px 0;animation:arrive .65s .08s both}
.now-head {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:0 4px}
.now-head h2 {font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.3}
.status-line {font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;max-width:60%}
.dot {width:5px;height:5px;border-radius:50%;background:var(--good);flex-shrink:0}
.dot.warn {background:var(--fair)}
.dot.err {background:var(--poor)}
.now-grid {display:grid;grid-template-columns:.75fr .85fr 1.35fr 1.25fr 2fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile {display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:1px;align-items:baseline;padding:6px 24px;min-width:0;align-content:start}
.tile:first-child {padding-left:0}
.tile:last-child {padding-right:0}
.tile + .tile {border-left:1px solid var(--line)}
.tile .k {font-size:13px;color:var(--muted);display:block;margin-bottom:0}
.tile .v {font:400 22px/1.1 var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.tile .v small {font-size:13px;color:var(--muted);margin-left:3px;letter-spacing:0}
.tile .s {grid-column:1/-1;font-size:13px;color:var(--muted);margin-top:0}
.tile .s svg {width:11px;height:11px;vertical-align:middle}
.windname {color:#535b60}
.top5 {grid-column:1/-1;display:flex;gap:12px;margin-top:0;overflow:hidden}
.chip {display:inline-flex;align-items:center;gap:5px;padding:0;font-size:13px;white-space:nowrap;border:0;background:none;cursor:pointer;color:var(--muted)}
.chip:nth-child(n+3) {display:none}
.chip:hover {color:var(--sea)}
/* The map itself has no enclosing card, ocean rectangle or permanent sidebar. */
.mapsec {max-width:none;padding-block:8px 18px}
.mapbox {position:relative;height:clamp(480px,calc(100svh - var(--map-top,170px) - 12px),1280px);background:white;isolation:isolate}
/* Car access at a glance: a column left of the map from 1240px (narrower, the map's bottom controls
   would collide), a folded strip above it below that. */
.glance {font-size:13px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--panel);min-width:0}
.glance summary {list-style:none;display:grid;gap:9px}
.glance summary::-webkit-details-marker {display:none}
.glance-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.glance-title {font:500 11px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.glance-live {display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:normal}
.gchips {display:flex;flex-wrap:wrap;gap:6px}
.gchip {display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border-radius:var(--radius-sm);font-size:14px;font-weight:500}
.gchip b {font:600 20px/1 var(--font-data)}
.gchip.open,.gword.open {background:color-mix(in srgb,var(--good) 13%,var(--panel));color:var(--great)}
.gchip.bus,.gword.bus {background:var(--mares-soft);color:var(--mares)}
.gchip.closed,.gword.closed {background:color-mix(in srgb,var(--poor) 13%,var(--panel));color:color-mix(in srgb,var(--poor) 80%,var(--ink))}
.gchip.unknown,.gword.unknown {background:var(--panel-2);color:var(--muted)}
.glance-next {margin:9px 0 2px;font-size:12px;color:var(--muted)}
.garea {display:grid;border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.garea-name {font-size:11px;color:var(--muted);padding:2px 0}
.grow {display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:7px;align-items:center;width:calc(100% + 12px);min-height:32px;margin:0 -6px;padding:4px 6px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;font-size:14px;text-align:left;color:var(--ink);cursor:pointer}
.grow:hover {background:var(--panel-2)}
a.grow {text-decoration:none}
/* The access-section row a summary row points to flashes on arrival. */
.arow.flash {animation:arow-flash 1.8s ease-out}
@keyframes arow-flash {0%,35% {background:var(--sea-soft)} 100% {background:transparent}}
.grow svg {color:var(--muted)}
.grow-name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gword {font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.glance-key {display:grid;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.glance-key span {display:grid;grid-template-columns:14px minmax(0,1fr);gap:7px;align-items:start}
.glance-key svg {margin-top:1px}
.glance-more {display:inline-block;margin-top:10px;font-size:13px;color:var(--sea);text-decoration:none}
.glance-more:hover {text-decoration:underline}
@media(min-width:1240px) {
 .mapsec {display:grid;grid-template-columns:248px minmax(0,1fr);gap:14px}
 .mapsec > .anchor {position:absolute}
 /* Compact, its top level with the layer menu; scrolls only if the map is shorter than it. */
 .glance {align-self:start;margin-top:2px;max-height:calc(100% - 14px);overflow-y:auto;scrollbar-width:thin}
 .glance-in .gchips {margin-top:10px}
 /* A selected beach takes the whole box; the summary steps aside. */
 .mapsec:has(.mapbox.has-selection) {grid-template-columns:minmax(0,1fr)}
 .mapsec:has(.mapbox.has-selection) .glance {display:none}
}
@media(max-width:1239px) {
 .glance {margin-bottom:10px}
 .glance summary {cursor:pointer}
 .glance-head::after {content:'';width:7px;height:7px;margin-left:auto;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px)}
 .glance[open] .glance-head::after, .glance details[open] .glance-head::after {transform:rotate(-135deg)}
 .glance-live {margin-left:auto}
}
#map-canvas {position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab}
#map-canvas.dragging {cursor:grabbing}
.imap-terrain {position:absolute;left:0;top:0;width:1400px;height:1100px;max-width:none;transform-origin:0 0;pointer-events:none;overflow:visible}
.imap.moving .imap-terrain {will-change:transform}
.imap-leaders,.pin-label {transition:opacity .18s}
.imap.zooming .imap-leaders,.imap.zooming .pin:not(.sel) .pin-label {opacity:0}
.imap canvas {position:absolute;inset:0;display:block;pointer-events:none}
.imap-pins {position:absolute;inset:0;pointer-events:none}
.imap-pins {z-index:4}
.imap-overlay {position:absolute;inset:0;pointer-events:none;z-index:6}
.imap-ui {pointer-events:auto;position:absolute}
.imap-pick {position:absolute;left:0;top:0;z-index:7;pointer-events:none;background:#fffffff5;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;display:grid;gap:2px;box-shadow:var(--shadow);white-space:nowrap}
.imap-pick b {font-size:14px;font-weight:500}
.imap-pick i {font-style:normal;color:var(--sea)}
/* The hit area stays 36px wide while the visual marker remains discreet. */
.pin {position:absolute;left:-18px;top:-18px;width:36px;height:36px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;border-radius:50%}
.pin-dot {position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:var(--pin,#9aa3a8);border:2px solid white;box-shadow:0 1px 5px #12202a40;font:500 10px/1 var(--font-data);color:var(--pin-ink,white);transition:transform .2s,box-shadow .2s}
.pin-text {display:grid;place-items:center}
.far .pin-dot {width:9px;height:9px;border-width:1.5px;box-shadow:0 1px 3px #12202a25}
.far .pin-text {opacity:0}
.far .pin:hover .pin-dot,.far .pin:focus-visible .pin-dot,.far .pin.sel .pin-dot {width:22px;height:22px}
.far .pin:hover .pin-text,.far .pin:focus-visible .pin-text,.far .pin.sel .pin-text {opacity:1}
.pin:hover .pin-dot,.pin.sel .pin-dot,.pin:focus-visible .pin-dot {transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 4px #ffffff80,0 1px 7px #12202a40}
.pin.sel {z-index:5}
/* The selected beach: a thin ink ring, a faint pulse and its name on a dark tag. */
.pin.sel .pin-dot {transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 1.5px white,0 0 0 3px var(--ink),0 2px 8px #12202a40}
.pin.sel .pin-dot::before {content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:pin-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes pin-pulse {from{transform:scale(.8);opacity:.3}to{transform:scale(1.45);opacity:0}}
.pin.restricted .pin-dot::after {content:'';position:absolute;right:-3px;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--mares);border:1px solid white}
.imap-leaders {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.imap-leaders>g {fill:none;stroke:#8c9aa2;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
.pin-label {position:absolute;display:block;height:18px;white-space:nowrap;font:400 11.5px/18px var(--font-body);color:#3d4f5a;text-align:center;text-shadow:0 0 3px white,0 0 3px white;background:transparent;pointer-events:auto;opacity:1;cursor:pointer}
.pin:hover .pin-label,.pin:focus-visible .pin-label,.pin.sel .pin-label {color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pin.sel .pin-label {width:auto!important;padding:0 5px;border-radius:var(--radius-sm);background:var(--ink);color:white;font-weight:500;text-shadow:none;text-decoration:none}
/* Layers above; beach display and navigation below. */
.wl-menu {top:2px;left:50%;transform:translateX(calc(-50% - var(--island-shift,0px)));display:flex;gap:3px;max-width:100%;padding:4px;border:1px solid var(--line);border-radius:var(--radius);background:#fffffff5;box-shadow:0 2px 8px #12202a04;overflow-x:auto;scrollbar-width:none}
.wl-menu button {display:flex;align-items:center;gap:6px;border:0;background:none;padding:8px 11px;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .2s}
.wl-menu button svg {width:14px;height:14px}
.wl-menu button:hover {background:var(--panel-2)}
.wl-menu button[aria-pressed='true'] {background:var(--sea-soft);color:var(--sea)}
.imap-top {left:0;right:190px;top:auto;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pin-key {display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-height:36px;padding:4px 12px;font-size:12px;color:var(--muted);background:#fffffff2;border:1px solid var(--line);border-radius:var(--radius);pointer-events:none}
.pin-key span {display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pin-key .key-dot {width:7px;height:7px}
.pin-key-time {padding-left:14px;border-left:1px solid var(--line)}
.seg {display:flex;align-items:center;gap:2px;padding:3px;background:#fffffff2;border:1px solid var(--line);border-radius:var(--radius)}
.seg-label {font-size:12px;color:var(--muted);padding:0 7px}
.seg button {background:none;border:0;padding:6px 8px;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.seg button[aria-pressed='true'] {background:var(--sea-soft);color:var(--sea)}
.zoomctl {right:0;bottom:12px;display:flex;background:#fffffff2;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.zoomctl button {width:34px;height:32px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.zoomctl button+button {border-left:1px solid var(--line)}
.zoomctl button:hover {background:var(--panel-2)}
/* Fullscreen map: the real API where it exists, a pinned box on iPhone Safari which has none. */
.mapbox:fullscreen,.mapbox.pseudo-full {width:100%;height:100%;margin:0;border-radius:0;background:white}
.mapbox.pseudo-full {position:fixed;inset:0;z-index:1000;height:100dvh}
html.map-full,html.map-full body {overflow:hidden}
.timeline {left:50%;right:auto;bottom:62px;width:min(660px,90%);transform:translateX(calc(-50% - var(--island-shift,0px)));display:flex;gap:12px;align-items:center;background:#fffffff5;border:1px solid var(--line);border-radius:var(--radius);padding:9px 15px 7px 9px;box-shadow:var(--shadow)}
.timeline .play {width:32px;height:32px;border-radius:50%;border:0;background:var(--ink);color:white;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.tl-main {flex:1;min-width:0;display:grid;gap:2px}
.tl-head {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap}
.tl-head b {font-weight:500}
.tl-legend {display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.tl-bar {width:100px;height:5px;border-radius:4px}
#tl-range {width:100%;margin:2px 0;accent-color:var(--sea)}
.tl-days {position:relative;height:12px;font-size:11px;color:var(--muted)}
.tl-days span {position:absolute;white-space:nowrap;border-left:1px solid var(--line);padding-left:3px}
.tl-now {position:absolute;top:-20px;width:2px;height:10px;background:var(--sea);border-radius:1px}
.sheet {position:absolute;right:0;top:55px;bottom:56px;width:360px;z-index:10;overflow-y:auto;background:#fffffff7;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 40px #12202a0d;overscroll-behavior:contain;animation:sheet-in .25s both}
.sheet-empty {padding:28px 22px;color:var(--muted)}
.sheet-empty h3 {color:var(--ink);font-size:22px;margin-bottom:8px}
.key-dot {width:5px;height:5px;border-radius:50%;display:inline-block}
.key-dot.great {background:var(--great)}.key-dot.good {background:var(--good)}.key-dot.okay {background:var(--okay)}.key-dot.fair {background:var(--fair)}.key-dot.poor {background:var(--poor)}
@keyframes arrive {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheet-in {from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
/* Sheet content reads as one column; a wide sheet puts "today" beside "the place", the photo heading the place column so the score stays above the fold. */
.sheet {container-type:inline-size}
.detail-col {display:contents}
.detail-head {order:-2}.scorebig {order:-1}
.detail-today>:not(.scorebig) {order:1}
.detail-place>:not(.gallery,.detail-webcam,.access-plan,.access-banner) {order:2}
@container (min-width:440px) and (max-width:719px) {.detail .gallery-slide {aspect-ratio:16/9}}
@container (min-width:720px) {
 .detail {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 28px;padding:24px 28px 32px}
 .detail-head {grid-column:1/-1}
 .detail-head h3 {font-size:36px}
 .detail-col {display:grid;gap:18px;align-content:start;min-width:0}
}
/* Wide screens: a selection splits the map box, map on the left and the beach beside it. */
@media(min-width:1000px) {
 .mapbox.has-selection {--sheet-w:clamp(540px,56%,940px)}
 .has-selection #map-canvas {right:calc(var(--sheet-w) + 16px);container-type:inline-size}
 .has-selection .sheet {top:0;bottom:0;width:var(--sheet-w);background:white;backdrop-filter:none}
 @container (max-width:720px) {
  .wl-menu {flex-wrap:wrap;justify-content:center;width:max-content}
  .wl-menu button {padding:8px 9px}
  .wl-menu button svg {display:none}
  .imap-top {right:190px;flex-wrap:wrap;gap:6px}
  .pin-key {flex-wrap:wrap;gap:2px 10px;padding-block:6px}
  .pin-key-time {border:0;padding-left:0}
  .timeline {bottom:106px}
 }
 @container (max-width:560px) {.wl-menu {display:grid;grid-template-columns:repeat(4,auto)}}
}
@media(min-width:1600px) {.wrap{max-width:1512px;--gutter-l:40px;--gutter-r:40px}.mapsec{max-width:none}}
@media(max-width:1100px) {.topnav{gap:20px}.topbar .wrap{gap:18px}.lang{margin-left:6px}.tile{display:block;padding-inline:18px}.now-grid{grid-template-columns:.7fr .8fr 1.3fr 1.3fr 1.6fr}.chip:nth-child(n+2){display:none}}
@media(max-width:800px) {html{scroll-padding-top:112px}.topbar .wrap{flex-wrap:wrap;row-gap:0}.brand{flex:1 1 0}.brand-tag{width:0;min-width:100%}.topnav{order:3;flex:0 0 100%;margin:0;gap:22px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}.topnav::-webkit-scrollbar{display:none}.topnav a{padding:11px 0 10px;white-space:nowrap}.lang{margin-left:auto}.now-grid{grid-template-columns:.7fr .8fr 1.5fr 1.3fr}.tile.wide{display:none}.wl-menu button{padding:8px}.wl-menu{width:max-content;max-width:100%}.wl-menu button svg{display:none}.sheet{width:340px}.mapbox{height:700px}.tile{padding-inline:15px}}
@media(max-width:560px) {
 :root{--gutter-l:20px;--gutter-r:20px}
 .topbar .wrap{min-height:54px;gap:12px}.brand b{font-size:17px}.brand-tag{font-size:11px}.brand-tag-more{display:none}.brand-domain{display:none}.brand-mark{width:26px;height:auto}
 .now-head{align-items:start}.now-head h2{font-size:12px}.status-line{font-size:11px;text-align:right;max-width:58%}
 .now-grid{grid-template-columns:.75fr .85fr 1.4fr}.tile{display:block;padding:9px 13px}.tile .k{margin-bottom:3px}.tile .s{margin-top:3px}.tile:nth-child(4){display:none}.tile .v{font-size:22px}.tile .k{font-size:12px}.tile .s{font-size:11px}.tile .s svg{display:none}
 .mapsec{padding-top:8px;padding-bottom:18px}.mapbox{height:540px;margin-inline:-8px}#map-canvas{touch-action:pan-y}
 .wl-menu{top:0;left:0;transform:none;width:100%;max-width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 9px;gap:2px}.wl-menu button{font-size:12px;padding:7px 10px}
 .imap-top{left:7px;right:7px;bottom:12px;gap:6px 4px;justify-content:space-between;flex-wrap:wrap}.pin-key{order:-1;flex:0 0 100%;max-width:calc(100% - 132px);flex-wrap:wrap;gap:2px 10px;font-size:11px}.pin-key-time{border:0;padding-left:0}.seg-label{display:none}.seg button{font-size:11px;padding:7px}.seg{gap:0}.zoomctl{right:7px;bottom:55px}.zoomctl button{width:29px;height:29px}
 .timeline{bottom:94px;width:94%;padding:7px}.tl-head{font-size:12px}.tl-bar{width:65px}.tl-legend{font-size:11px}
 .sheet{position:relative;top:0;right:auto;bottom:auto;width:100%;max-height:560px;margin-top:10px;background:white;backdrop-filter:none;animation:arrive .25s both}.mapbox.has-selection{height:auto;padding-top:540px}.has-selection #map-canvas{height:540px;bottom:auto}
 .mapbox:is(:fullscreen,.pseudo-full){height:100dvh;overflow-y:auto}.mapbox:is(:fullscreen,.pseudo-full).has-selection{padding-top:65dvh}.mapbox:is(:fullscreen,.pseudo-full).has-selection #map-canvas{height:65dvh}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ── Detail ──────────────────────────────────────────────── */
.detail { padding: 20px 20px 28px; display: grid; gap: 18px; }
.detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.detail-head h3 { font:500 28px/1.08 var(--font-display); }
.detail-head .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
/* Header shortcut to the webcam modal; keeps its label where the table's pill collapses to an icon. */
.detail-cams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-cams .row-cam { padding: 0 10px 0 8px; }
.detail-cams .row-cam > span { display: inline; }
.closebtn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; }
.scorebig { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px 14px; background: var(--panel-2); border-radius: var(--radius); }
.score-now { flex: 0 0 100%; display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.ring { --p: 0; --c: var(--good); width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; flex-shrink: 0; }
.ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; font: 600 19px/1 var(--font-data); }
.score-why { display: grid; gap: 8px; min-width: 0; flex: 1; }
.score-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.score-factors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.score-factors .pill { gap: 5px; padding: 3px 9px 3px 7px; }
.score-factors svg { flex: none; }
@media (max-width: 480px) { .score-why { display: contents; } .score-factors { flex: 0 0 100%; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--great); }
.pill.fair { background: color-mix(in srgb, var(--fair) 22%, transparent); color: var(--fair-ink); }
.pill.poor { background: color-mix(in srgb, var(--poor) 14%, transparent); color: color-mix(in srgb, var(--poor) 75%, var(--ink)); }
.pill.mares { background: var(--mares-soft); color: var(--mares); }
.pill.sea { background: var(--sea-soft); color: var(--sea); }
.pill.neutral { background: var(--panel-2); color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.metric { background: var(--panel); padding: 10px 12px; min-width: 0; }
.metric .k { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.metric .v { font: 500 19px/1.25 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric .v small { font-size: 13px; color: var(--muted); }
.windarrow { display: inline-block; transition: transform 0.3s; }
.block h4 { margin: 0 0 8px; font: 500 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font: 11px var(--font-data); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .nowline { stroke: var(--ink); stroke-dasharray: 1.5 2.5; stroke-width: 1; }
.forecast-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.forecast-heading h4 { margin: 0; font-size: 17px; font-weight: 600; }
.forecast-heading > span, .forecast-date { font-size: 13px; color: var(--muted); }
.forecast-charts { display: grid; gap: 16px; }
.forecast-rain { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.forecast-rain b { color: var(--ink); font-weight: 500; }
.forecast-heading > span { margin-left: auto; }
.forecast-toggle { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--sea); font-size: 17px; line-height: 1; cursor: pointer; align-self: center; }
.forecast-toggle:hover { border-color: var(--sea); }
.forecast-toggle:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.forecast-charts[data-forecast-toggle] { cursor: zoom-in; }
.is-3days .forecast-charts[data-forecast-toggle] { cursor: zoom-out; gap: 12px; }
.forecast-rain.days span { display: flex; gap: 6px; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
.fact { display: flex; gap: 10px; align-items: start; min-width: 0; }
.fact svg { flex-shrink: 0; color: var(--sea); margin-top: 2px; }
.fact .k { font-size: 13px; color: var(--muted); display: block; }
.fact .v { font-size: 15px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flags .pill { font-weight: 500; }
.note { font-size: 13px; color: var(--muted); }
.medusa-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--good), var(--fair), var(--poor)); position: relative; margin: 8px 0 4px; }
.medusa-bar i { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--ink); transform: translateX(-2px); }
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.btn:hover { border-color: var(--sea); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Photo gallery: snap strip in the sheet, full-size lightbox */
.gallery { display: grid; gap: 6px; margin: 0; }
.gallery-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: zoom-in; aspect-ratio: 3 / 2; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-slide:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
.gallery-nav { position: absolute; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 999px; border: 0; background: #ffffffe0; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px #12202a26; transition: opacity .15s; }
.gallery-nav.prev { left: 8px; } .gallery-nav.next { right: 8px; }
.gallery-nav:disabled { opacity: 0; pointer-events: none; }
.gallery-count { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: #202721b3; color: #fff; font-size: 12px; }
.photo-credit { font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.photo-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--ink); text-decoration-color: currentColor; }
.lightbox { margin: auto; padding: 0; border: 0; background: none; max-width: min(1600px, 94vw); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: #141a16e6; }
.lightbox-body { display: grid; gap: 10px; }
.lightbox-body img { display: block; max-width: 100%; max-height: calc(94vh - 56px); width: auto; height: auto; margin: 0 auto; border-radius: var(--radius); }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lightbox-bar .photo-credit { color: #d6dbdd; font-size: 13px; }
.lightbox-bar .photo-credit a:hover { color: #fff; }
.lightbox-ctl { display: flex; gap: 6px; flex-shrink: 0; }
.lightbox-ctl .closebtn:disabled { opacity: .35; cursor: default; }
.access-banner { padding: 12px 14px; border-radius: var(--radius); background: var(--mares-soft); color: var(--ink); font-size: 15px; display: grid; gap: 4px; }
.access-banner b { color: var(--mares); }

/* ── Beach grid ──────────────────────────────────────────── */
.sec { padding-block: 48px; border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 18px; }
.sec-head p { margin: 6px 0 0; max-width: 62ch; color: var(--muted); }
.filters { display: grid; grid-template-columns: clamp(160px, 15vw, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 16px; }
.filters input[type='search'] { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); min-width: 0; width: 100%; }
.filter-options { display: flex; gap: 8px; align-items: center; min-width: 0; overflow-x: auto; padding: 6px; margin: -6px; scrollbar-width: thin; }
.filter-options > * { flex: 0 0 auto; white-space: nowrap; }
.filter-divider { width: 1px; height: 20px; background: var(--line); }
.filter-sort { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.filters select { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
@media (max-width: 700px) {
  .filters { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-options { grid-column: 1 / -1; grid-row: 2; }
  .filter-sort { min-width: 0; }
  .filter-sort select { min-width: 0; max-width: 44vw; }
}
@media (max-width: 480px) {
  .filter-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.toggle { border: 1px solid var(--line); background: var(--panel); padding: 6px 12px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.toggle[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* A real table: sortable headers, hairline rows, tabular numbers. Rows collapse to stacked lines on phones. */
.btable { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.btable th, .btable td { padding: 13px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-weight: 400; }
.btable :is(th, td):first-child { padding-left: 0; }
.btable :is(th, td):last-child { padding-right: 0; }
.btable thead :is(th, td) { position: sticky; top: 61px; z-index: 2; background: #fffffff5; backdrop-filter: blur(12px); padding-block: 10px; border-bottom-color: var(--ink); font: 500 11px/1.3 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
.th-sort { display: inline-flex; align-items: center; gap: 5px; margin-block: -4px; padding: 4px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.th-sort svg { width: 8px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .12s; }
.th-sort:is(:hover, :focus-visible) svg { opacity: .6; }
.th-sort:hover, [aria-sort] .th-sort { color: var(--ink); }
[aria-sort] .th-sort svg { opacity: 1; color: var(--sea); }
.btable :is(.c-sea, .c-wave) { text-align: right; }
.btable thead :is(.c-sea, .c-wave) .th-sort { flex-direction: row-reverse; }
.btable .c-name { min-width: 270px; }
.btable .c-score { width: 1%; }
.btable .c-access { width: 1%; }
.btable .c-shelter { min-width: 140px; }
.btable tbody tr { cursor: pointer; transition: background-color .12s; }
.btable tbody tr:hover { background: #f9fafa; }
.btable tbody tr:hover .rowlink { color: var(--sea); }
.rowlink { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); transition: color .12s; }
.btable .sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.row-place { display: flex; align-items: center; gap: 14px; }
.row-place-copy { flex: 1; min-width: 0; }
/* One square crop per row; credits live in the lightbox and a single note under the table. */
.row-photo { display: block; flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--sea-soft); }
button.row-photo { cursor: zoom-in; }
.row-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .18s; }
button.row-photo:hover img { transform: scale(1.06); }
button.row-photo:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.row-location { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.btable .row-location .sub { margin: 0; line-height: 1.35; }
.row-location .sub > span { display: block; white-space: nowrap; }
.row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.row-meta .row-report { margin: 0; }
.row-meta .row-cam { height: 24px; padding: 0 8px 0 6px; font-size: 11px; }
.table-note { margin: 14px 0 0; font-size: 12px; }
.beach-location { display: block; width: 54px; height: auto; flex: 0 0 auto; overflow: visible; }
.location-island { fill: var(--sea-soft); stroke: #8ca5a9; stroke-width: 1.35; stroke-linejoin: round; }
.location-dot { stroke: var(--panel); stroke-width: 1.2; }
.location-dot--beach { fill: #00857c; }
.location-dot--camera { fill: #bf690c; }
.location-callout { fill: none; stroke: #8ca5a9; stroke-width: .8; stroke-dasharray: 2 2; }
.location-inset { fill: var(--panel); stroke: #8ca5a9; stroke-width: .8; }
.location-connection { fill: none; stroke: #8ca5a9; stroke-width: .9; stroke-dasharray: 2 2; }
/* Cameras sit below the location, keeping long beach names clear of controls. */
.row-cam { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; color: var(--sea); border: 1px solid transparent; border-radius: 999px; background: var(--sea-soft); font: 500 12px/1 var(--font-body); white-space: nowrap; text-decoration: none; transition: border-color .15s; }
.row-cam:hover { border-color: var(--sea); }
.row-cam:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.row-cam > svg { flex-shrink: 0; }
/* Touch targets grow invisibly so compact pills keep their size. */
@media (pointer: coarse) { .row-cam::after { content: ''; position: absolute; inset: -10px -4px; } }
.beach-webcam { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: 500 14px/1.35 var(--font-body); text-decoration: none; transition: border-color .15s, background-color .15s; }
.beach-webcam > svg { flex-shrink: 0; color: var(--sea); }
.beach-webcam > span:first-of-type { flex: 1; min-width: 0; }
.beach-webcam > span:last-child { color: var(--muted); }
.beach-webcam small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.beach-webcam:hover { border-color: var(--sea); background: var(--sea-soft); }
.beach-webcam:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.webcam-links { display: grid; gap: 8px; }
.detail-webcam .note { margin: 6px 0 0; }
.webcam-viewer { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); overflow: auto; }
.webcam-viewer::backdrop { background: #102226c9; }
.webcam-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 16px 20px; }
.webcam-heading { display: flex; align-items: center; flex: 1; min-width: 0; gap: 24px; }
.webcam-heading-copy { min-width: 0; }
.webcam-heading .beach-location { width: 120px; }
.webcam-location { margin: 0; flex: 0 0 auto; }
.location-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; max-width: 120px; margin-top: 2px; color: var(--muted); font: 400 10px/1.3 var(--font-body); }
.location-legend span { display: inline-flex; align-items: center; gap: 4px; }
.location-key { width: 6px; height: 6px; border-radius: 50%; }
.location-key--beach { background: #00857c; }
.location-key--camera { background: #bf690c; }
.webcam-header h2 { margin: 3px 0 0; font: 500 28px/1.15 var(--font-display); }
.webcam-header p { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.webcam-header .closebtn { width: 40px; height: 40px; padding: 0; color: inherit; }
.webcam-views { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.webcam-views button { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.webcam-views button:hover { border-color: var(--sea); }
.webcam-views button[aria-pressed='true'] { border-color: var(--sea); background: var(--sea-soft); color: var(--sea); }
.webcam-views button:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.webcam-media { aspect-ratio: 16 / 9; width: 100%; background: #102226; display: grid; place-items: center; overflow: hidden; }
.webcam-media :is(video,img) { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.webcam-media [hidden] { display: none; }
.webcam-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px; padding: 8px 20px; }
.webcam-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.webcam-clock { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: 13px; }
.webcam-clock time { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.webcam-state p { margin: 0; color: var(--muted); font-size: 13px; }
.webcam-state p[data-state="live"]::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--sea); }
.webcam-state .btn { min-height: 36px; padding: 5px 12px; font-size: 13px; }
.webcam-credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 0 20px 14px; color: var(--muted); font-size: 11px; }
.webcam-credit a { color: inherit; text-underline-offset: 2px; }
body:has(.webcam-viewer[open]) { overflow: hidden; }
@media (max-width: 560px) { .webcam-viewer { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .webcam-header { padding: 12px; gap: 8px; } .webcam-heading { gap: 10px; } .webcam-heading .beach-location { width: 92px; } .location-legend { max-width: 92px; gap: 3px 8px; } .webcam-header h2 { font-size: 24px; } .webcam-views { padding-inline: 12px; } .webcam-state { padding-inline: 12px; } .webcam-credit { padding: 0 12px 12px; } }
@media (pointer: coarse) { .row-cam::after { content: ''; position: absolute; inset: -8px -2px; } }
.btable td.num { font-size: 15px; white-space: nowrap; }
.btable td.num small { font-size: 12px; color: var(--muted); letter-spacing: 0; }
.windarrow { width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; color: var(--muted); }
.dotlabel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; }
.dotlabel .key-dot { width: 7px; height: 7px; flex-shrink: 0; }
.key-dot.neutral { background: var(--muted); }
.dotlabel .mk { display: none; }
.btable td.c-type { font-size: 14px; }
.btable .c-type .pill { font-weight: 500; font-size: 13px; white-space: normal; }
/* Popularity: rising bars in one tone, unlike the coloured live score; people figures read as a crowd count. */
.popmeter { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
.popmeter i { display: block; width: 4px; border-radius: 1px; background: var(--crowd-off); }
.popmeter i.on { background: var(--crowd); }
.popmeter i:nth-child(1) { height: 20%; } .popmeter i:nth-child(2) { height: 40%; } .popmeter i:nth-child(3) { height: 60%; } .popmeter i:nth-child(4) { height: 80%; } .popmeter i:nth-child(5) { height: 100%; }
.popmeter.lg { gap: 3px; height: 20px; }
.popmeter.lg i { width: 5px; }
.btable .c-pop { width: 1%; }
/* The level word explains the bars without a hover tooltip and uses the width the header already takes. */
.poplevel { display: inline-flex; align-items: center; gap: 8px; }
.poplevel-word { font-size: 13px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
:lang(ru) .poplevel-word { white-space: normal; } /* «Очень популярный» would push the table past its width. */
.crowdhead { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 10px; }
.crowdhead h4 { margin: 0; }
.crowdblock .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crowdblock .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.crowdblock .metric .v { font-size: 17px; }
.crowdblock .metric .key-dot { width: 7px; height: 7px; vertical-align: 3px; }
.crowdblock .srcline { margin: 8px 0 0; font-size: 12px; }
.crowdblock .srcline a { color: inherit; }
.spacewrap { display: grid; gap: 4px; margin-top: 12px; }
.spacewrap .k { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.caplegend { display: inline-flex; align-items: center; gap: 5px; }
.viewseg { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.viewseg button { border: 0; background: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); cursor: pointer; }
.viewseg button[aria-pressed='true'] { background: var(--crowd-off); color: var(--ink); font-weight: 500; }
.countschart .cy.on { fill: var(--ink); font-weight: 600; }
.caplegend i { width: 14px; border-top: 1px dashed var(--ink); }
.countschart { width: 100%; max-width: 340px; height: auto; display: block; }
.countschart .cv { font: 500 11px var(--font-data); fill: var(--ink); }
.countschart .cy { font: 11px var(--font-body); fill: var(--muted); }
.btable .empty td { padding: 40px 0; text-align: center; color: var(--muted); cursor: default; }
.btable .empty:hover { background: none; }
.scorebadge { display: inline-block; font: 600 14px/1 var(--font-data); color: #fff; border-radius: var(--radius-sm); padding: 6px 7px; min-width: 38px; text-align: center; }
/* A reading-width table: on wide screens nine columns spread over 1400px leave large empty gaps. */
#beaches > .wrap { max-width: 1240px; }
@media (max-width: 1280px) { .btable .c-type { display: none; } }
@media (max-width: 1180px) {
  .btable, .btable tbody { display: block; }
  .btable thead { display: none; }
  .btable tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-areas: 'name name name score' 'name name name access' 'sea wave wind pop' 'shel shel med med'; gap: 10px 12px; align-items: center; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
  .btable tbody tr:hover { background: none; }
  .btable tbody :is(th, td), .btable tbody :is(.c-sea, .c-wave) { padding: 0; border: 0; text-align: left; }
  .btable tbody .c-name { grid-area: name; width: auto; min-width: 0; }
  .btable tbody .c-score { grid-area: score; justify-self: end; width: auto; }
  .btable tbody .c-access { grid-area: access; justify-self: end; align-self: start; width: auto; }
  .btable tbody .c-sea { grid-area: sea; } .btable tbody .c-wave { grid-area: wave; } .btable tbody .c-wind { grid-area: wind; }
  .btable tbody .c-pop { grid-area: pop; justify-self: end; width: auto; text-align: right; }
  .btable tbody .c-shelter { grid-area: shel; } .btable tbody .c-medusa { grid-area: med; }
  .btable tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .btable .dotlabel { font-size: 13px; }
  .poplevel-word { display: none; }
  .btable .dotlabel .mk { display: inline; color: var(--muted); margin-right: -4px; }
  .btable .empty { display: block; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .btable tbody tr { grid-template-columns: minmax(260px, 2fr) auto repeat(3, minmax(60px, 1fr)) auto; grid-template-areas: 'name access sea wave wind score' 'name access shel shel med pop'; }
}

/* ── Restricted ──────────────────────────────────────────── */
/* Sized to fit one laptop screen: the buttons sit beside the intro, each area's
   title shares the column-heading row, and status details are said once below. */
#restricted { padding-top: 24px; }
#restricted .sec-head { margin-bottom: 14px; }
#restricted .sec-head > div:first-child { flex: 1 1 560px; }
#restricted .sec-head p { max-width: 96ch; }
.groups { display: grid; gap: 10px; }
.access-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.access-src .btn, .aline-links .btn { font-size: 13px; padding: 5px 12px; }
.access-foot { margin: 0; }
.area { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Photo · name · status now · summer rule · bus */
.arow { display: grid; grid-template-columns: 40px minmax(130px, 1fr) minmax(190px, 1.15fr) minmax(0, 1.25fr) minmax(0, 1.1fr); gap: 4px 16px; align-items: center; padding: 5px 18px; border-top: 1px solid var(--line); cursor: pointer; }
.arow:hover { background: var(--panel-2); }
.arow.ahead { border-top: 0; padding-block: 8px 2px; cursor: default; align-items: baseline; font: 500 11px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arow.ahead:hover { background: none; }
.arow.ahead h3 { grid-column: 1 / 3; font: 500 19px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.arow-photo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--panel-2); }
.arow-name button { all: unset; cursor: pointer; font: 500 17px/1.2 var(--font-display); }
.arow-name button:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 2px; }
/* Status chip: a tint and a signal dot in the same colours as the map's glance chips.
   Unconfirmed access gets a hollow dot rather than a grey one. */
.astatus { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: var(--radius-sm); justify-self: start; min-width: 0; }
.astatus::before, .anote::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.astatus b { font: 600 14px/1.3 var(--font-body); }
.astatus.open { background: color-mix(in srgb, var(--good) 11%, var(--panel)); color: var(--great); }
.astatus.bus { background: var(--mares-soft); color: color-mix(in srgb, var(--mares) 85%, var(--ink)); }
.astatus.closed { background: color-mix(in srgb, var(--poor) 11%, var(--panel)); color: color-mix(in srgb, var(--poor) 72%, var(--ink)); }
.astatus.unknown { background: var(--panel-2); color: var(--muted); }
.astatus.unknown b { font-weight: 500; }
.astatus.unknown::before, .anote.unknown::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
/* The footnote repeats each dot as its legend key. */
.anote { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 12px; }
.anote::before { align-self: center; }
.anote.open::before { color: var(--great); }
.anote.bus::before { color: var(--mares); }
.anote.closed::before { color: color-mix(in srgb, var(--poor) 72%, var(--ink)); }
.anote.unknown::before { color: var(--muted); }
.arow-rule { font-size: 14px; }
.arow-bus { display: flex; align-items: center; font-size: 14px; color: var(--muted); }
.arow-bus .lineno { flex: none; }
.arow-bus .lineno, .aline .lineno { min-width: 32px; height: 22px; font-size: 13px; margin-right: 6px; vertical-align: 1px; }
.alines { display: grid; grid-template-columns: minmax(40px, auto) minmax(0, 1fr) auto; background: var(--panel-2); border-top: 1px solid var(--line); padding: 2px 18px; }
.aline { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 4px 16px; align-items: center; padding: 4px 0; font-size: 13px; line-height: 1.5; }
.aline + .aline { border-top: 1px solid var(--line); }
.aline .lineno { margin: 0; justify-self: start; }
.linenos { display: flex; flex-wrap: wrap; gap: 4px; }
.aline-text .nw, .arow.ahead .nw { white-space: nowrap; }
.aline-text .notices { margin-top: 6px; }
/* Mou-T's latest notices trail the booking line and open below it. */
.aline-text .mout { display: inline-block; margin-left: 10px; }
.aline-text .mout[open] { display: block; margin: 6px 0 0; }
/* Wide screens: the first area keeps the full width; the smaller ones share a row,
   each still a table under its own headings, stretched to the same height. */
@media (min-width: 1360px) {
  .groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .groups > .area:first-child, .access-foot { grid-column: 1 / -1; }
  .area { display: flex; flex-direction: column; }
  .area .alines { margin-top: auto; }
  /* Half-width tables stack each rule over its bus (and the headings likewise),
     so rows keep one height however long the language's wording is. */
  .groups > .area + .area .arow { grid-template-columns: 40px minmax(120px, 1fr) auto fit-content(60%); grid-template-areas: 'pic name now rule' 'pic name now bus'; gap: 2px 14px; }
  .groups > .area + .area .arow-photo { grid-area: pic; }
  .groups > .area + .area .arow-name { grid-area: name; }
  .groups > .area + .area .astatus { grid-area: now; }
  .groups > .area + .area .arow-rule { grid-area: rule; }
  .groups > .area + .area .arow-bus { grid-area: bus; }
  .groups > .area + .area .arow.ahead { grid-template-areas: 'h3 h3 h3 h3' '. . now rule' '. . now bus'; align-items: start; }
  .groups > .area + .area .arow.ahead h3 { grid-area: h3; margin-bottom: 4px; }
  .groups > .area + .area .arow.ahead > span:nth-of-type(1) { grid-area: now; }
  .groups > .area + .area .arow.ahead > span:nth-of-type(2) { grid-area: rule; }
  .groups > .area + .area .arow.ahead > span:nth-of-type(3) { grid-area: bus; }
}
@media (max-width: 900px) {
  .arow { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'pic name now' 'pic rule rule' 'pic bus bus'; padding: 10px 14px; }
  .arow-photo { grid-area: pic; align-self: start; }
  .arow-name { grid-area: name; }
  .astatus { grid-area: now; justify-self: end; }
  .arow-rule { grid-area: rule; }
  .arow-bus { grid-area: bus; }
  .arow.ahead { display: block; padding: 12px 14px 4px; }
  .arow.ahead span { display: none; }
  .alines { padding: 2px 14px; }
}
@media (max-width: 480px) {
  .arow { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: 'pic name' 'pic now' 'pic rule' 'pic bus'; }
  .astatus { justify-self: start; }
  .alines { grid-template-columns: minmax(40px, auto) minmax(0, 1fr); }
  .aline-links { grid-column: 2; }
}
.lineno { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font: 600 14px/1 var(--font-data); }
.notices { display: grid; gap: 8px; }
.notice { font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); }
.notice.susp { border-color: color-mix(in srgb, var(--poor) 35%, var(--panel)); background: color-mix(in srgb, var(--poor) 8%, var(--panel)); color: color-mix(in srgb, var(--poor) 55%, var(--ink)); }
.mout summary { cursor: pointer; width: fit-content; }
.mout summary:hover { color: var(--ink); }
.mout[open] summary { margin-bottom: 8px; }

/* ── Island ──────────────────────────────────────────────── */
/* Two rows of paired cards that share one anatomy: header (with any toggle on the right), figures,
   a 250px chart, legend, then notes pinned to the bottom so the pair's edges line up. */
.island-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; }
.island-grid + .island-grid { margin-top: 28px; }
.island-flights { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 960px) { .island-grid, .island-flights { grid-template-columns: 1fr; } .island-grid + .island-grid { margin-top: 16px; } }
.panel { background: var(--panel); border:0; border-top:1px solid var(--line); border-radius:0; padding: 18px 20px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.island-grid > .panel { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 4px; }
.panel h3 { font: 400 24px/1.1 var(--font-display); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.panel-head > div:first-child { min-width: 0; flex: 1 1 220px; }
.panel-head h3 { margin-top: 4px; }
.panel-head .note { margin: 4px 0 0; }
.panel-foot { margin: auto 0 0; }
.bigstat { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.bigstat div { min-width: 0; }
.bigstat .v { font: 500 30px/1.1 var(--font-data); letter-spacing: -.03em; }
.bigstat .k { font-size: 13px; color: var(--muted); }
.population-tabs { flex-shrink: 0; }
.population-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.population-filters label { display: grid; gap: 4px; flex: 1; font-size: 13px; color: var(--muted); }
.population-filters select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--panel); font: inherit; font-size: 15px; }
.population-comparison { margin: 8px 0 0; color: var(--sea); }
.population-chart { display: block; width: 100%; height: auto; overflow: visible; }
.population-chart .population-current { stroke: var(--sea); }
.population-chart .population-past { stroke: var(--muted); stroke-dasharray: 5 4; opacity: .65; }
.population-point { stroke: var(--sea); stroke-width: 2.5; fill: var(--sea); }
.population-point.estimated { fill: var(--panel); }
.population-range-mark { stroke: var(--sea); stroke-width: 6; opacity: .25; }
.population-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; min-height: 32px; align-items: center; color: var(--muted); font-size: 13px; }
.population-legend span { display: inline-flex; gap: 6px; align-items: center; }
.population-chart-label { color: var(--ink); }
.population-key { width: 20px; border-top: 2px solid var(--sea); }
.population-key.past { border-color: var(--muted); border-top-style: dashed; }
.population-key.estimated { border: 2px solid var(--sea); border-radius: 50%; width: 8px; height: 8px; }
.population-freshness { margin: 0 0 8px; }
.population-method { border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.population-method summary { color: var(--sea); cursor: pointer; width: fit-content; }
.population-sources { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.population-empty { padding: 16px 0; }
.delta.up { color: var(--good); }
.delta.down { color: var(--poor); }
.airport-history-chart, .arrivals-chart { min-width: 0; }
.airport-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.airport-range { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: var(--radius); }
.airport-range button { border: 0; background: transparent; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.airport-range button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px #00000012; }
.airport-selected { stroke: var(--mares); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.airport-history-chart .airport-past { stroke-width: 2; }
.airport-history-chart .airport-current { stroke-width: 3.5; }
.airport-history-chart .history-line { pointer-events: none; }
.airport-history-chart .history-tooltip { max-height: 230px; }
.airport-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.airport-history-chart .airport-legend { gap: 2px 17px; }
.airport-legend button { min-height: 32px; }
.airport-selection { margin: 6px 0 0; }
.airport-selection b { font-weight: 500; color: var(--ink); }
/* Arrivals: full-strength country colours; a shaded background marks scheduled days. */
.arr-seg { transition: opacity .15s; }
.has-focus .arr-seg:not(.is-focus) { opacity: .12; }
.arr-total { fill: var(--ink); font: 500 12px var(--font-data); }
.arr-day.is-today { fill: var(--ink); font-weight: 700; }
.arr-landed { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.arr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; min-height: 32px; align-items: center; }
.arr-key span { display: inline-flex; align-items: center; gap: 6px; }
.arr-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--muted); }
.arr-swatch.is-scheduled, .arr-swatch.is-ahead { background: color-mix(in srgb, var(--line) 35%, var(--panel)); border: 1px solid var(--line); }
.history-ahead { fill: var(--line); opacity: .35; pointer-events: none; }
.arr-line .history-line { stroke-width: 2.5; }
.arr-dot { fill: currentColor; stroke: var(--panel); stroke-width: 2; }
.tip-flag { margin-right: 6px; }
.arr-badge { fill: var(--panel); stroke: currentColor; stroke-width: 2; }
.arr-flag { font: 13px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; text-anchor: middle; dominant-baseline: central; }
.arr-line { transition: opacity .15s; }
.has-focus .arr-line:not(.is-focus) { opacity: .12; }
.arr-tick { width: 14px; border-top: 2px solid var(--ink); }
/* Origins: one line per country or airport. The bar wears the country's colour, keying the columns. */
.orows { list-style: none; margin: 0; padding: 0; display: grid; }
.orow { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(56px, 30%) 128px; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid var(--line); font-size: 14px; }
.orow:last-child { border-bottom: 0; }
.orow-flag { font-size: 18px; line-height: 1; text-align: center; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.orow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow-name small { color: var(--muted); font-size: 12px; font-family: var(--font-data); }
.orow-bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.orow-bar i { display: block; height: 100%; border-radius: 3px; }
.orow-val { text-align: right; white-space: nowrap; font-weight: 500; }
.orow-val small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.origins-rest > summary { cursor: pointer; list-style: none; }
.origins-rest > summary::-webkit-details-marker { display: none; }
.origins-rest > summary .orow-name::after { content: ' ▸'; color: var(--muted); }
.origins-rest[open] > summary .orow-name::after { content: ' ▾'; }
.origins-rest > summary:hover { background: var(--panel-2); }
.origins-rest > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.origins-rest[open] > summary { border-bottom: 1px solid var(--line); }
/* The flight count joins the share wherever the column has room for it. */
@media (min-width: 961px) and (max-width: 1099px), (max-width: 480px) { .orow { grid-template-columns: 24px minmax(0, 1fr) minmax(48px, 30%) 56px; } .orow-val small { display: none; } }
@media (min-width: 961px) and (max-width: 1099px), (max-width: 480px) { .origins-rest .orow-val small { display: block; margin-left: 0; } }
.history-plot { position: relative; }
.history-plot > svg { width: 100%; display: block; overflow: visible; }
.history-grid { stroke: var(--line); stroke-width: 1; }
.history-tick { fill: var(--muted); font: 12px var(--font-body); }
.history-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.history-point { fill: var(--panel); stroke: currentColor; stroke-width: 2; }
.history-hit { fill: transparent; cursor: crosshair; }
.history-hit:focus-visible { outline: none; stroke: var(--sea); stroke-width: 1; }
.history-cursor { stroke: var(--muted); stroke-dasharray: 3 5; pointer-events: none; }
.history-tooltip { position: absolute; top: 8px; right: 12px; max-width: min(280px, 80%); max-height: 230px; overflow: auto; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; z-index: 2; pointer-events: none; }
.history-tooltip.on-left { right: auto; left: 44px; }
.history-tooltip-row { display: flex; justify-content: space-between; gap: 24px; margin-top: 5px; }
.history-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.history-legend button { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 6px 0; background: transparent; cursor: pointer; font-size: 14px; }
.history-legend button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.history-values { margin-top: 8px; font-size: 13px; }
.history-values summary { cursor: pointer; color: var(--sea); width: fit-content; }
.history-table-scroll { overflow-x: auto; margin-top: 10px; }
.history-values table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.history-values caption { text-align: left; color: var(--muted); white-space: normal; margin-bottom: 8px; }
.history-values th, .history-values td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.history-values th:first-child { text-align: left; }
.skeleton { background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2)); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 6px; color: transparent !important; }
@keyframes sk { to { background-position: -200% 0; } }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 14px; }
footer .cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
footer ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 700px) { footer .cols { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Touch screens: controls get finger-sized hit areas without changing the compact mouse layout. */
@media (pointer:coarse) {
  .seg button, .wl-menu button, .viewseg button, .airport-range button, .toggle, .filters select, .filters input[type='search'], .lang-select { min-height: 40px; }
  .zoomctl button { width: 40px; height: 40px; }
  .closebtn, .gallery-nav, .forecast-toggle { width: 40px; height: 40px; }
  .chip { min-height: 32px; }
}
@media (pointer:coarse) and (max-width:560px) { .timeline { bottom: 104px; } .pin-key { max-width: calc(100% - 172px); } }
/* GOIB reports retain their own provenance and never inherit a model score colour. */
/* The sheet has no report section: each part sits in the slot for its topic. */
[data-report] { display: contents; }
.scorebig .report-flag { background: var(--panel); color: var(--ink); }
.scorebig .report-status { flex: 0 0 100%; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.report-status a { color: inherit; }
.report-obs { margin: 8px 0 0; }
.report-obs b { color: var(--ink); font-weight: 500; }
.report-crowd { margin-bottom: 12px; }
.report-crowd h5 { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
.report-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.report-periods dt { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.report-periods dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.report-periods small { display: block; color: var(--muted); margin-top: 3px; }
.report-flag { font-weight: 600; }
.report-flag::before { content: '⚑'; margin-right: 5px; }
.report-flag.green::before { color: var(--good); }
.report-flag.yellow::before { color: var(--fair); }
.report-flag.red::before { color: var(--poor); }
.row-report { display: block; margin-top: 4px; font-size: 11px; }
.report-status time { font-variant-numeric: tabular-nums; }

/* ── Presentation mode (?tv) ─────────────────────────────── */
/* The map fills the screen; a beach opens beside it, and the island stats fade in over it. Nothing on screen takes clicks. */
html.tv,html.tv body {overflow:hidden}
html.tv main>:not(#map-section,#island),html.tv footer {display:none}
/* Only the header's wordmark stays, in the top left over the map and the island stats. */
html.tv .topbar {position:fixed;top:16px;left:16px;z-index:1005;background:none;backdrop-filter:none;border:0;pointer-events:none}
html.tv .topbar .wrap {max-width:none;min-height:0;padding:10px 18px 10px 10px}
html.tv .topnav,html.tv .lang,html.tv .brand-tag {display:none}
html.tv .brand {column-gap:12px}
html.tv .brand-mark {grid-row:auto;width:44px;height:44px}
html.tv .brand b {align-self:center;font-size:24px}
html.tv .brand-domain {display:inline;margin-left:10px;font-size:16px}
html.tv .mapbox {position:fixed;inset:0;z-index:1000;height:100dvh;margin:0}
html.tv .mapbox,html.tv .mapbox * {pointer-events:none!important}
.zoomed #pinmode {display:none}
html.tv .wl-menu,html.tv .zoomctl,html.tv .timeline,html.tv #pinmode,html.tv .sheet .closebtn,html.tv .forecast-toggle,html.tv .gallery-nav,html.tv .viewseg {display:none}
html.tv .sheet {scrollbar-width:none}
html.tv .sheet::-webkit-scrollbar {display:none}
html.tv #island {position:fixed;inset:0;z-index:1001;margin:0;padding-block:104px clamp(32px,5vh,64px);border:0;background:var(--bg);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
html.tv.tv-island #island {opacity:1;visibility:visible;transition:opacity .8s}
html.tv:not(.tv-awake),html.tv:not(.tv-awake) * {cursor:none!important}
.tv-bar {position:fixed;top:16px;right:16px;z-index:1010;display:flex;gap:2px;padding:3px;background:#fffffff2;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transition:opacity .3s;pointer-events:none}
html.tv-awake .tv-bar,.tv-bar:focus-within {opacity:1;pointer-events:auto}
.tv-bar button {width:40px;height:40px;border:0;border-radius:var(--radius-sm);background:none;cursor:pointer;display:grid;place-items:center}
.tv-bar button:hover {background:var(--panel-2)}
.tv-progress {position:fixed;left:0;right:0;bottom:0;z-index:1010;height:3px;pointer-events:none}
.tv-progress i {display:block;height:100%;background:var(--sea);opacity:.55;transform-origin:left;transform:scaleX(var(--tv-p,0))}