:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #15181c;
  --muted: #5f6772;
  --border: #e0e4e9;
  --accent: #0b6e8a;
  --accent-text: #ffffff;
  --sand: #f3e7cf;
  --track: #e8ebef;
  --banner-bg: #fff4e0; --banner: #7a4a00;
  --alert-bg: #fdecec;  --alert: #a1251f;
  --quiet: #2d7d4f; --normal: #2a5fae; --busy: #b4620b; --packed: #b3261e;
  /* UV, WHO colours: low, moderate, high, very high, extreme */
  --uv-1: #3a9b46; --uv-2: #e3b505; --uv-3: #ec7d14; --uv-4: #d7261e; --uv-5: #8e4fbf;
  --radius: 12px;
  /* world map (as vote-count): none, then five classes of one blue ramp; beaches orange */
  --map-0: #e9ebee; --map-1: #b7d3f6; --map-2: #86b6ef; --map-3: #5598e7; --map-4: #2a78d6; --map-5: #184f95;
  --map-sea: #eef3f8; --pt: #eb6834; --pt-sel: #15181c;
  /* tan score bands on the world map: poor -> great (sand to deep orange); none grey */
  --tan-0: #9aa2ad; --tan-1: #f2dfb5; --tan-2: #f5b25c; --tan-3: #e8711f; --tan-4: #b8360f;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1215; --surface: #181c21; --text: #e7eaee; --muted: #9aa2ad; --border: #2a3038;
  --accent: #4fb9d6; --accent-text: #061317; --sand: #3a3224; --track: #262c33;
  --banner-bg: #35260f; --banner: #f2c27a; --alert-bg: #3a1716; --alert: #ff9c94;
  --quiet: #7fd6a2; --normal: #8fb4ff; --busy: #f2b26a; --packed: #ff8f86;
  --map-0: #2c3038; --map-1: #184f95; --map-2: #256abf; --map-3: #3987e5; --map-4: #6da7ec; --map-5: #b7d3f6;
  --map-sea: #14171c; --pt: #f08a5d; --pt-sel: #ffffff;
  --tan-0: #8a929c; --tan-1: #b59a63; --tan-2: #c98a3a; --tan-3: #f08a3c; --tan-4: #ffb27a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1215; --surface: #181c21; --text: #e7eaee; --muted: #9aa2ad; --border: #2a3038;
    --accent: #4fb9d6; --accent-text: #061317; --sand: #3a3224; --track: #262c33;
    --banner-bg: #35260f; --banner: #f2c27a; --alert-bg: #3a1716; --alert: #ff9c94;
    --quiet: #7fd6a2; --normal: #8fb4ff; --busy: #f2b26a; --packed: #ff8f86;
    --map-0: #2c3038; --map-1: #184f95; --map-2: #256abf; --map-3: #3987e5; --map-4: #6da7ec; --map-5: #b7d3f6;
    --map-sea: #14171c; --pt: #f08a5d; --pt-sel: #ffffff;
    --tan-0: #8a929c; --tan-1: #b59a63; --tan-2: #c98a3a; --tan-3: #f08a3c; --tan-4: #ffb27a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.45; }
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }

.top, main, .foot { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 24px; padding-bottom: 16px; }
.top h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
.sub { color: var(--muted); margin-top: 2px; }

.theme-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); flex-shrink: 0; }
.theme-toggle button { border: 0; background: none; color: var(--muted); padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; }
.days button { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.days button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.banner { background: var(--banner-bg); color: var(--banner); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.status { color: var(--muted); margin-bottom: 16px; }
.status:empty { display: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 1.1rem; }
.meta { color: var(--muted); font-size: 0.85rem; }

.scores { display: flex; gap: 16px; align-items: center; }
.tan { min-width: 88px; text-align: center; background: var(--sand); border-radius: 10px; padding: 8px 6px; }
.tan .num { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tan .label { font-size: 0.8rem; color: var(--muted); }
.side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bar-label { display: flex; justify-content: space-between; font-size: 0.85rem; }
.bar { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.uv-line { font-size: 0.9rem; }
.uv-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 46px; }
.uv-strip .col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.uv-strip .fill { border-radius: 3px 3px 0 0; min-height: 2px; background: var(--track); }
.uv-strip .lvl-1 { background: var(--uv-1); } .uv-strip .lvl-2 { background: var(--uv-2); }
.uv-strip .lvl-3 { background: var(--uv-3); } .uv-strip .lvl-4 { background: var(--uv-4); }
.uv-strip .lvl-5 { background: var(--uv-5); }
.uv-hours { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-size: 0.7rem; color: var(--muted); text-align: center; }

.crowd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid currentColor; }
.chip.quiet { color: var(--quiet); } .chip.normal { color: var(--normal); }
.chip.busy { color: var(--busy); } .chip.packed { color: var(--packed); }
.chip.off { color: var(--muted); }
.details { color: var(--muted); font-size: 0.85rem; }
.alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.alert { background: var(--alert-bg); color: var(--alert); border-radius: 6px; padding: 2px 8px; font-size: 0.8rem; }

.legend { margin: 32px 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.legend h2 { font-size: 1rem; margin-bottom: 8px; }
.legend dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.9rem; }
.legend dt { font-weight: 600; }
.legend dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) {
  .legend dl { grid-template-columns: 1fr; }
  .legend dd { margin-bottom: 6px; }
  .top { flex-direction: column; }
}

.foot { color: var(--muted); font-size: 0.8rem; padding-top: 16px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 4px; }

/* page links in the header */
.pages { display: flex; gap: 14px; margin-top: 8px; font-size: 0.9rem; }
.pages a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.pages a:hover { color: var(--text); }
.pages a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* world page */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.95rem; margin-bottom: 6px; }
.crumbs .sep { color: var(--muted); }
.crumbs .here { font-weight: 600; }
.summary { color: var(--muted); margin-bottom: 12px; }
.detail, .beach-list { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.detail h2, .beach-list h2 { font-size: 1.05rem; }
.beach-list ul { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 24px; }
.beach-list li { break-inside: avoid; padding: 1px 0; }
button.link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.9rem; color: var(--accent); cursor: pointer; text-align: left; }
button.link:hover { text-decoration: underline; }

/* shape map (public/shapemap.js, after vote-count's worldmap.js) */
.worldmap { position: relative; }
.worldmap svg { display: block; width: 100%; height: auto; max-height: 72vh; background: var(--map-sea); border-radius: 8px; touch-action: auto; cursor: grab; }
.worldmap svg.zoomed { touch-action: none; }
.worldmap svg.dragging { cursor: grabbing; }
.worldmap .unit { stroke: var(--surface); stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; fill-rule: evenodd; }
.worldmap .unit.dot { stroke-width: 1; }
.worldmap .unit:hover, .worldmap .unit:focus { stroke: var(--text); stroke-width: 1.5; outline: none; }
.worldmap .unit.dim { opacity: .35; }
.worldmap .unit.selected { stroke: var(--text); stroke-width: 2; }
.worldmap .pt { fill: var(--pt); stroke: var(--surface); stroke-width: .6; vector-effect: non-scaling-stroke; }
.worldmap .pt.off { opacity: .35; pointer-events: none; }
.worldmap .pt.on { cursor: pointer; }
.worldmap .pt.on:hover, .worldmap .pt.on:focus { stroke: var(--text); stroke-width: 1.5; outline: none; }
.worldmap .pt.sel { fill: var(--pt-sel); stroke: var(--pt); stroke-width: 2; }
.map-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.map-zoom button { font: inherit; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1; }
.map-zoom button.reset { font-size: .7rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-c0 { fill: var(--map-0); background: var(--map-0); }
.map-c1 { fill: var(--map-1); background: var(--map-1); }
.map-c2 { fill: var(--map-2); background: var(--map-2); }
.map-c3 { fill: var(--map-3); background: var(--map-3); }
.map-c4 { fill: var(--map-4); background: var(--map-4); }
.map-c5 { fill: var(--map-5); background: var(--map-5); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.map-legend .sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.chart-tip { position: absolute; transform: translateX(-50%); pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .6rem; font-size: .82rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; color: var(--text); z-index: 5; }
.chart-tip .tip-head { font-weight: 600; margin-bottom: .15rem; }

/* tan scores on the world map (step W-B) */
.worldmap .pt.on.tan-0 { fill: var(--tan-0); }
.worldmap .pt.on.tan-1 { fill: var(--tan-1); }
.worldmap .pt.on.tan-2 { fill: var(--tan-2); }
.worldmap .pt.on.tan-3 { fill: var(--tan-3); }
.worldmap .pt.on.tan-4 { fill: var(--tan-4); }
.worldmap .pt.sel { fill: var(--pt-sel); stroke: var(--tan-3); stroke-width: 2; }
.tan-status { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; }
.tan-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin-top: .4rem; font-size: .8rem; color: var(--muted); }
.tan-legend .lbl { font-weight: 600; }
.tan-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.sw.tan-0, .score.tan-0, .tan-box.tan-0 { background: var(--tan-0); }
.sw.tan-1, .score.tan-1, .tan-box.tan-1 { background: var(--tan-1); }
.sw.tan-2, .score.tan-2, .tan-box.tan-2 { background: var(--tan-2); }
.sw.tan-3, .score.tan-3, .tan-box.tan-3 { background: var(--tan-3); }
.sw.tan-4, .score.tan-4, .tan-box.tan-4 { background: var(--tan-4); }
.beach-list .score { display: inline-block; min-width: 2.1em; margin-right: 6px; padding: 0 4px; border-radius: 4px; text-align: center; font-size: 0.78rem; font-weight: 600; color: #15181c; font-variant-numeric: tabular-nums; }
.beach-tan { display: flex; gap: 14px; align-items: center; }
.tan-box { min-width: 84px; text-align: center; border-radius: 10px; padding: 8px 6px; color: #15181c; }
.tan-box .num { font-size: 1.8rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tan-box .label { font-size: 0.78rem; }
.beach-tan .facts { display: flex; flex-direction: column; gap: 2px; }