:root {
  --surface: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #797873;
  --land: #f2f3f0;        /* basemap land (OpenFreeMap Positron) */
  --water: #c2c8ca;       /* basemap water */
  --border: #b3b3b3;      /* basemap country-border grey */
  --label: #000000;
  --label-halo: #ffffff;
  --water-label: #495e91;
  --water-label-halo: rgba(255, 255, 255, 0.7);
  --hover: #0b0b0b;
  --tip-bg: #ffffff;
  --tip-border: #deddd8;
  --b1: #86b6ef; --b2: #5598e7; --b3: #2a78d6; --b4: #1c5cab; --b5: #104281;
  --city: #0b0b0b;
  --passed: #f2a878;
  --hatch: #b9b8b2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #191919;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8f8e87;
    --land: #0c0c0c;      /* basemap land (OpenFreeMap Dark) */
    --water: #1b1b1d;
    --border: #3b3b3b;
    --label: #8a8a8a;
    --label-halo: rgba(0, 0, 0, 0.7);
    --water-label: #6b6b70;
    --water-label-halo: rgba(0, 0, 0, 0.6);
    --hover: #ffffff;
    --tip-bg: #252524;
    --tip-border: #3a3a38;
    --b1: #184f95; --b2: #256abf; --b3: #3987e5; --b4: #6da7ec; --b5: #9ec5f4;
    --city: #ffffff;
    --passed: #a3582f;
    --hatch: #55554f;
  }
}
:root[data-theme="dark"] {
  --surface: #191919;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8f8e87;
  --land: #0c0c0c;      /* basemap land (OpenFreeMap Dark) */
  --water: #1b1b1d;
  --border: #3b3b3b;
  --label: #8a8a8a;
  --label-halo: rgba(0, 0, 0, 0.7);
  --water-label: #6b6b70;
  --water-label-halo: rgba(0, 0, 0, 0.6);
  --hover: #ffffff;
  --tip-bg: #252524;
  --tip-border: #3a3a38;
  --b1: #184f95; --b2: #256abf; --b3: #3987e5; --b4: #6da7ec; --b5: #9ec5f4;
  --city: #ffffff;
  --passed: #a3582f;
  --hatch: #55554f;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface); color: var(--text-primary); }
body {
  font: 14px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 12px 16px;
}
header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
h1 { font-size: 16px; font-weight: 600; margin: 0; }
h1 .summary { font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-secondary); }
.legend .key { display: inline-flex; align-items: center; gap: 5px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend .label { margin-right: 2px; }

#map-wrap { position: relative; margin-top: 8px; }
#map { width: 100%; }
body[data-map="us"] #map > svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
body[data-map="us"] #map > svg:active { cursor: grabbing; }
body[data-map="world"] #map { height: clamp(320px, 58vw, 560px); border-radius: 8px; overflow: hidden; background: var(--land); }
/* US map: same frame, water, borders, shading opacity and label fonts as the world basemap. */
body[data-map="us"] #map { border-radius: 8px; overflow: hidden; background: var(--water); }
body[data-map="us"] .land { fill: var(--land); stroke: none; }
body[data-map="us"] .region.visited, body[data-map="us"] .region.passed-state { fill-opacity: 0.6; }
.state-label, .water-label { pointer-events: none; text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke-linejoin: round; stroke-opacity: .9; }
.state-label { font-family: "Noto Sans", sans-serif; font-weight: 700; fill: var(--label); stroke: var(--label-halo); }
.water-label { font-family: "Noto Sans", sans-serif; font-style: italic; fill: var(--water-label);
  stroke: var(--water-label-halo); letter-spacing: .08em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .state-label { font-weight: 400; text-transform: uppercase; }
}
:root[data-theme="dark"] .state-label { font-weight: 400; text-transform: uppercase; }
.region { fill: var(--land); stroke: var(--border); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.region.visited { cursor: pointer; }
.region.active, .marker.active, .region.selected, .marker.selected,
.city.active, .city.selected { stroke: var(--hover); stroke-width: 1.5; }
.marker { stroke: var(--surface); stroke-width: 2; cursor: pointer; vector-effect: non-scaling-stroke; }
.city { fill: var(--city); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; vector-effect: non-scaling-stroke; }
.city.active, .city.selected { stroke-width: 2.5; }
.legend .city-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--city);
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--tip-border); display: inline-block; }

.zoom-controls { position: absolute; top: 8px; left: 8px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; }
.zoom-controls button { width: 28px; height: 28px; font: 16px/1 inherit; color: var(--text-primary);
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: 6px; cursor: pointer; }
.zoom-controls button:hover { border-color: var(--text-muted); }
.zoom-hint.used { display: none; }
.zoom-hint { position: absolute; bottom: 4px; left: 8px; z-index: 1000; font-size: 11px; color: var(--text-muted); pointer-events: none; }

.icon { display: inline-flex; width: 1.25em; justify-content: center; margin-right: 4px; }
.icon img { width: 1em; height: 1em; vertical-align: -2px; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  font-size: 12px; color: var(--text-muted); margin-top: 6px; }
button.toggle { font: inherit; color: var(--text-secondary); background: none; border: 1px solid var(--tip-border);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; }
button.toggle:hover { color: var(--text-primary); }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--tip-border); }
th { color: var(--text-secondary); font-weight: 500; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
[hidden] { display: none !important; }

.tooltip { position: fixed; pointer-events: none; z-index: 10; background: var(--tip-bg); color: var(--text-primary);
  border: 1px solid var(--tip-border); border-radius: 8px; padding: 6px 10px; font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: nowrap; }
.tooltip .name { font-weight: 600; }
.tooltip .detail { color: var(--text-secondary); }
.error { color: var(--text-secondary); padding: 24px 0; }

.tooltip .hint { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

#details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tip-border); }
.details-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#details h2 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
#details h2 .summary { font-weight: 400; color: var(--text-secondary); margin-left: 6px; font-size: 13px; }
.dest { break-inside: avoid; margin-bottom: 10px; }
#details .dests { columns: 2 280px; column-gap: 24px; }
#details h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
#details ul { list-style: none; margin: 0; padding: 0; }
#details li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; }
#details .dates { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
#details a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--tip-border);
  text-underline-offset: 2px; }
#details a:hover { text-decoration-color: currentColor; }
button.row-link { font: inherit; color: var(--text-primary); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--tip-border); text-underline-offset: 2px; }

.legend .swatch.passed, td .swatch.passed { background: var(--passed); }
.legend .swatch.unvisited, td .swatch.unvisited { background: var(--land); box-shadow: inset 0 0 0 1px var(--tip-border); }
.legend .swatch.hatched { background: repeating-linear-gradient(45deg, var(--land) 0 2px, var(--hatch) 2px 3.5px);
  box-shadow: inset 0 0 0 1px var(--tip-border); }
.region.us-link { cursor: pointer; }
td.status { color: var(--text-muted); }
#details h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 8px 0 4px; column-span: all; }

.flag { width: 1.33em; height: 1em; object-fit: cover; border-radius: 2px; margin-right: 6px; vertical-align: -2px;
  box-shadow: 0 0 0 1px var(--tip-border); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-cooperative-gesture-screen { font: inherit; }
.maplibregl-ctrl.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-button { background-color: var(--tip-bg); }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a { color: var(--text-secondary); }

/* Swatches match the maps' 60% shading. */
.swatch.shade, .legend .swatch.passed { opacity: 0.6; }