.travel-map {
  --map-background: #fafafa;
  --map-land: #fff;
  --map-visited: #aaa;
  --map-lived: #555;
  --map-border: #777;
  --map-focus: #111;
}
.travel-map [hidden] { display: none !important; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; list-style: none; font-size: .9rem; }
.map-legend li { display: flex; align-items: center; gap: 7px; }
.swatch { width: 15px; height: 15px; border: 1px solid var(--map-border); display: inline-block; }
.swatch.unvisited { background: var(--map-land); }
.swatch.visited { background: var(--map-visited); }
.swatch.lived { background: var(--map-lived); }
.map-viewport { overflow: hidden; border: 1px solid var(--map-border); background: var(--map-background); border-radius: 4px; }
.world-map { display: block; width: 100%; height: auto; }
.map-country { fill: var(--map-land); stroke: var(--map-border); stroke-width: .55; cursor: pointer; }
.map-country path, .map-country circle { vector-effect: non-scaling-stroke; }
.map-country.visited { fill: var(--map-visited); }
.map-country.lived { fill: var(--map-lived); }
.map-country:hover, .map-country.is-selected { stroke: var(--map-focus); stroke-width: 1.8; }
.map-marker { stroke-width: .8; }
.map-controls { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.travel-map button, .travel-map select { font: inherit; color: inherit; background: var(--map-land); border: 1px solid var(--map-border); border-radius: 4px; padding: 8px 12px; min-height: 44px; }
.travel-map button { cursor: pointer; min-width: 44px; }
.travel-map button:disabled { opacity: .45; cursor: default; }
.map-zoom { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; }
.map-picker { margin: 24px 0 16px; }
.map-picker label { display: block; margin-bottom: 6px; }
.map-picker select { width: 100%; }
.country-panel { border-left: 3px solid var(--map-border); padding: 0 18px; margin: 24px 0; }
.country-panel h2 { margin-bottom: 4px; }
.country-status { margin-top: 4px; font-size: .9rem; }
.country-directory { margin: 28px 0; }
.country-directory summary { cursor: pointer; padding: 8px 0; }
.country-entry { padding: 12px 0; border-bottom: 1px solid var(--map-border); scroll-margin-top: 20px; }
.country-entry:target { outline: 2px solid var(--map-focus); outline-offset: 4px; }
.travel-map :focus-visible { outline: 2px solid var(--map-focus); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  .travel-map { --map-background: #292929; --map-land: #363636; --map-visited: #888; --map-lived: #eee; --map-border: #aaa; --map-focus: #fff; }
}