/* The atlas (web/map.js), ported from the earlier Mosaic's map styles (public/mosaic/mosaic.css .mz-map*, match.css
   .mp-map*) and read only through theme tokens, so it sits in every look, light and dark. Per-look touches at the end. */
.wm {
  --wm-sea: color-mix(in srgb, var(--tint) 70%, var(--bone));
  --wm-land: var(--card);
  --wm-edge: color-mix(in srgb, var(--ink) 22%, var(--card));
  --wm-on: var(--clay);
  --wm-on-edge: var(--deep);
  --wm-sugg: color-mix(in srgb, var(--clay) 28%, var(--card));
  --wm-grat: transparent;
  --wm-pa: color-mix(in srgb, var(--clay) 38%, var(--card));
  --wm-pb: color-mix(in srgb, var(--values) 34%, var(--card));
  --wm-both: var(--clay);
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.wm [hidden], .wm[hidden] { display: none !important; }
@media (max-width: 720px) { .wm-hint { display: none; } }
.wm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.wm-h2 { font: 400 30px/1.05 var(--serif); margin: 0; letter-spacing: -.01em; }
.wm-h3 { font: 400 22px/1.1 var(--serif); margin: 0; }
.wm-lede { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.4; max-width: 34em; }
.wm-stats { display: flex; gap: 22px; }
.wm-stats > div { display: flex; flex-direction: column; align-items: flex-end; }
.wm-big { font: 400 48px/.95 var(--serif); font-variant-numeric: tabular-nums; }
.wm-stat { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.wm-stat .wm-big { font-size: 30px; }
.wm-small { font-size: 13px; color: var(--muted); }

.wm-frame { position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--wm-sea); touch-action: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
.wm-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 550; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.wm-svg:active { cursor: grabbing; }
.wm-grat path { fill: none; stroke: var(--wm-grat); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.wm-grat .wm-rim { stroke-width: .9px; }
.wm-land path { fill: var(--wm-land); stroke: var(--wm-edge); stroke-width: .6px; vector-effect: non-scaling-stroke; transition: fill .35s var(--ease-out); cursor: pointer; }
@media (hover: hover) { .wm-land path:hover { fill: color-mix(in srgb, var(--clay) 18%, var(--wm-land)); } .wm-land path.is-on:hover { fill: var(--wm-on-edge); } }
.wm-land path.is-on { fill: var(--wm-on); stroke: var(--wm-on-edge); }
.wm-land path.is-sugg { fill: var(--wm-sugg); stroke-dasharray: 2 2; }
.wm-land path:focus { outline: none; }
.wm-land path:focus-visible { stroke: var(--ink); stroke-width: 2px; }
.wm-dot { fill: var(--wm-land); stroke: var(--wm-edge); stroke-width: .8px; vector-effect: non-scaling-stroke; cursor: pointer; transform-box: fill-box; transform-origin: center; transform: scale(calc(var(--px, 1) / var(--k, 1))); transition: fill .35s var(--ease-out); }
.wm-dot.is-on { fill: var(--wm-on); stroke: var(--wm-on-edge); }
.wm-dot.is-sugg { fill: var(--wm-sugg); }
/* An invisible ring around each small-country dot: a fingertip-sized target at any zoom. */
.wm-hit { fill: transparent; stroke: none; cursor: pointer; transform-box: fill-box; transform-origin: center; transform: scale(calc(var(--px, 1) / var(--k, 1))); }
.wm-labels text { font: 600 calc(11px * var(--ls, 1) / var(--k, 1)) var(--sys); fill: var(--ink-2); text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  paint-order: stroke; stroke: color-mix(in srgb, var(--wm-land) 85%, transparent); stroke-width: calc(3px / var(--k, 1)); }
.wm-pop { fill: none; stroke: var(--wm-on); stroke-width: 2px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: wm-pop .85s var(--ease-out) forwards; pointer-events: none; }
@keyframes wm-pop { from { transform: scale(calc(1 / var(--k, 1))); opacity: 1; } to { transform: scale(calc(9 / var(--k, 1))); opacity: 0; } }

.wm-zooms { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* Each look sets these (Field guide: paper, a fine ink border, its own control radius); the defaults follow the look's tokens. */
.wm-zoom { width: 40px; height: 40px; border: var(--wm-ctl-border, 1px solid var(--hair)); border-radius: var(--wm-ctl-r, var(--r-btn, 12px)); background: var(--wm-ctl-bg, var(--mat-card, var(--card))); color: var(--ink); box-shadow: var(--wm-ctl-sh, none); font: 400 19px/1 var(--sys); display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wm-zoom:active { transform: scale(.96); }
.wm-reset { opacity: 0; pointer-events: none; transition: opacity .25s; }
.wm-frame.is-zoomed .wm-reset { opacity: 1; pointer-events: auto; }
.wm-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; transition: opacity .3s; }
.wm-frame.is-zoomed .wm-hint { opacity: 0; }
.wm-tip, .wm-ptip { position: absolute; z-index: 2; padding: 5px 10px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: 600 12.5px/1.25 var(--sys); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.wm-ptip { display: flex; flex-direction: column; gap: 1px; opacity: 0; transition: opacity .15s; }
.wm-ptip b { font: 400 16px/1.2 var(--serif); }
.wm-ptip span { font-weight: 400; opacity: .8; }
.wm-ptip.in { opacity: 1; }

.wm-findbox { position: relative; }
.wm-find, .wm-city-in { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 16px; border: 1px solid var(--hair); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font: 400 16px var(--sys); }
.wm-find:focus, .wm-city-in:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent); }
.wm-find::-webkit-search-cancel-button { -webkit-appearance: none; }
.wm-opts { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh-2); max-height: 280px; overflow-y: auto; }
.wm-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.wm-opt.is-active { background: var(--tint); }
.wm-opt b { font-weight: 600; }
.wm-opt-where { color: var(--muted); font-size: 13px; text-align: right; }

.wm-toast { min-height: 1.3em; margin: 0; font: italic 400 19px/1.3 var(--serif); color: var(--deep); }
.wm-toast:empty { min-height: 0; }
.wm-toast.is-on { animation: wm-in .4s var(--ease-out) both; }
@keyframes wm-in { from { opacity: 0; transform: translateY(4px); } }

.wm-mine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 176px; overflow-y: auto; }
.wm-mine:empty { display: none; }
.wm-chip { font: 500 14px var(--sys); min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--clay) 55%, transparent); background: transparent; color: var(--deep); cursor: pointer; }
.wm-chip span { color: var(--muted); }
.wm-chip:active, .wm-chip:focus-visible { background: var(--clay); color: var(--card); }
.wm-conts { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wm-cont { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; font: 400 13px var(--sys); color: var(--muted); cursor: pointer; }
.wm-cont::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--hair); }
.wm-cont.is-on { color: var(--deep); font-weight: 600; }
.wm-cont.is-on::before { background: var(--clay); border-color: var(--clay); }
.wm-cont:active { background: var(--tint); }

.wm-sugg { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--clay) 7%, var(--card)); box-shadow: inset 0 0 0 1px var(--hair-2); }
.wm-sugg-h { display: flex; justify-content: space-between; align-items: center; font: var(--label-size)/1.2 var(--label); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.wm-sugg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wm-sg { display: flex; align-items: stretch; gap: 6px; }
.wm-sg-add { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--clay) 60%, transparent); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.wm-sg-add small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.wm-sg-x { width: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.wm-lnk { border: 0; background: none; padding: 6px 4px; font: 600 13px var(--sys); color: var(--clay); cursor: pointer; text-transform: none; letter-spacing: 0; }

.wm-now { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.wm-city { display: flex; flex-direction: column; gap: 8px; }
.wm-city-q { margin: 0; font-weight: 600; font-size: 15px; }
.wm-city-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wm-city-chips:empty { display: none; }
.wm-city-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--tint); font-size: 14px; }
.wm-city-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--card); font: 600 11px var(--sys); }
.wm-city-mark.is-star { background: none; color: #d9a23a; font-size: 18px; }
.wm-city-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.wm-pins { pointer-events: none; }
.wm-pin polygon { fill: #f2b84b; stroke: var(--ink); stroke-width: 1.4px; stroke-linejoin: round; }
.wm-pin.is-home text { font: 600 13px var(--sys); fill: var(--ink); text-anchor: start; paint-order: stroke; stroke: color-mix(in srgb, var(--card) 92%, transparent); stroke-width: 3.5px; stroke-linejoin: round; }
.wm-pin circle { fill: var(--ink); stroke: var(--card); stroke-width: 1.6px; }
.wm-pin text { font: 600 11px var(--sys); fill: var(--card); text-anchor: middle; dominant-baseline: central; }
.wm-pin.is-new > * { transform-box: fill-box; transform-origin: center; animation: wm-pin-drop .5s var(--ease-out) both; }
@keyframes wm-pin-drop { from { transform: translateY(-14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.wm-foot { display: flex; flex-direction: column; gap: 6px; }
.wm-vis { align-self: flex-start; min-height: 36px; padding: 4px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); font: 500 13px var(--sys); color: var(--ink-2); cursor: pointer; }
.wm-note { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.4; }

/* compact: the waiting view's slot */
.wm-compact { gap: 10px; }
.wm-compact .wm-lede { margin: 0; font: 400 20px/1.2 var(--serif); color: var(--ink); max-width: 16em; }
.wm-compact .wm-zoom { width: 36px; height: 36px; font-size: 17px; }
.wm-compact .wm-mine { max-height: 84px; }

/* preview: Home */
.wm-preview { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; cursor: pointer; }
.wm-preview .wm-svg { cursor: pointer; }
.wm-preview .wm-frame, .wm-pair .wm-frame { touch-action: auto; }
.wm-preview .wm-land path, .wm-pair .wm-land path { cursor: default; transition: fill .6s var(--ease-out); }
.wm-preview .wm-land path.is-on, .wm-preview .wm-dot.is-on { fill: var(--wm-on); stroke: var(--wm-on-edge); }
.wm-preview .wm-dot { transform: none; fill: transparent; stroke: none; }
.wm-pv-line { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; color: var(--ink-2); }
.wm-pv-line b { font: 400 26px/1 var(--serif); color: var(--ink); margin-right: 2px; }
.wm-pv-go { font-weight: 600; color: var(--clay); font-size: 14px; }
.wm-preview:focus-visible .wm-frame { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 40%, transparent); }

/* pair */
.wm-pair .wm-land path.wm-a, .wm-pair .wm-dot.wm-a { fill: var(--wm-pa); }
.wm-pair .wm-land path.wm-b, .wm-pair .wm-dot.wm-b { fill: var(--wm-pb); }
.wm-pair .wm-land path.wm-ab, .wm-pair .wm-dot.wm-ab { fill: var(--wm-both); stroke: var(--wm-on-edge); }
.wm-pair .wm-dot { transform: none; fill: transparent; stroke: none; }
.wm-pair .wm-land path.hot { stroke: var(--ink); stroke-width: 1.4px; }
.wm-pair .wm-svg { cursor: default; }
.wm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.wm-legend span { display: inline-flex; align-items: center; }
.wm-legend i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.wm-legend i.wm-ab { background: var(--wm-both); } .wm-legend i.wm-a { background: var(--wm-pa); } .wm-legend i.wm-b { background: var(--wm-pb); }
.wm-pcount { margin: 0; font-size: 15px; color: var(--ink-2); }
.wm-pcount b { font: 400 24px/1 var(--serif); color: var(--ink); margin-right: 2px; }
.wm-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-pchips span { font-size: 13px; background: var(--tint); border-radius: 999px; padding: 4px 10px; }

/* the full-screen atlas screen (route "world") */
.world-scr .wm-frame { margin: 0 calc(var(--gut) * -1); border-radius: 0; box-shadow: none; }
.world-scr .wm-svg { height: min(56vh, 520px); height: min(56svh, 520px); aspect-ratio: auto; }

/* On a phone the compact and full atlas get a taller frame (filled by zooming), so countries are bigger under a finger. */
@media (max-width: 720px) {
  .wm-compact .wm-svg { aspect-ratio: 1 / .78; }
  .world-scr .wm-svg { aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-pop, .wm-toast.is-on, .wm-pin.is-new > * { animation: none; }
  .wm-land path, .wm-dot { transition: none; }
}

/* ---------- per look ---------- */
/* Field guide: an engraved chart, hatched seas. */
:root[data-theme="fieldguide"] .wm-frame { background:
  repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 9%, transparent) 0 1px, transparent 1px 6px), var(--wm-sea); }
:root[data-theme="fieldguide"] .wm { --wm-grat: color-mix(in srgb, var(--ink) 18%, transparent); --wm-edge: color-mix(in srgb, var(--ink) 55%, var(--card)); }
/* Sigil: fine graticule lines, thin edges. */
:root[data-theme="sigil"] .wm { --wm-grat: color-mix(in srgb, var(--ink) 14%, transparent); --wm-sea: var(--bone); }
:root[data-theme="sigil"] .wm-land path { stroke-width: .45px; }
/* Overlap and the mosaic (venn): soft watercolor land, no hard edges. */
:root[data-theme="overlap"] .wm, :root[data-theme="venn"] .wm { --wm-edge: color-mix(in srgb, var(--ink) 10%, var(--card)); --wm-sea: color-mix(in srgb, var(--values) 7%, var(--bone)); }
:root[data-theme="overlap"] .wm-land path.is-on, :root[data-theme="venn"] .wm-land path.is-on { stroke: color-mix(in srgb, var(--clay) 70%, var(--card)); }
/* B11: a memory from today's question, shown when its country is tapped */
.wm-land path.is-memo.is-on { stroke-width: 1.6; }
.wm-memo { margin: 10px 0 2px; padding: 14px 16px; border-radius: 14px; background: var(--card, #fff); box-shadow: 0 0 0 .5px var(--hair, rgba(0,0,0,.12)), 0 12px 28px -22px rgba(0,0,0,.35); }
.wm-memo-q { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #8a8178); }
.wm-memo-t { margin-top: 6px; font: italic 400 18px/1.35 var(--serif, Georgia, serif); color: var(--ink, #1f1c18); }
.wm-memo-a { display: flex; justify-content: space-between; margin-top: 8px; }
/* A1 (12 Nov): Flower's map is painted: a pale blue-violet wash for the sea, warm paper land with a soft edge,
   visited places in the flower's rose, a faint pencil graticule. Tokens only; map.js is unchanged. */
:root[data-theme="overlap"] .wm { --wm-sea: color-mix(in srgb, #a9bfdc 32%, var(--bone)); --wm-land: color-mix(in srgb, #e9dcc4 55%, var(--card)); --wm-edge: color-mix(in srgb, #8a7a66 38%, var(--card)); --wm-grat: color-mix(in srgb, #6d7fa6 16%, transparent); --wm-on: color-mix(in srgb, var(--area-drives) 78%, var(--card)); --wm-on-edge: color-mix(in srgb, var(--area-drives) 70%, #3a2a2e); --wm-sugg: color-mix(in srgb, var(--area-tastes) 45%, var(--card)); }
:root[data-theme="overlap"] .wm-frame { background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, #c7d6ea 40%, transparent), transparent 70%), var(--wm-sea); }