/* Who's Here: the world and the United States, shaded by visits in the last 7 days. Design tokens only, no inline styles
   (the site's content security policy forbids them). Shades are classes set by whos-here.js; with no script the maps are grey.
   Motion tiers follow the header: html[data-motion] is full, lite (no scale or fade) or static (nothing moves). */

.wh-page { --wh-hue: var(--cobalt); max-width: 1240px; margin: 0 auto; position: relative; }
.wh-kicker { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.wh-page h1 { max-width: 24ch; text-wrap: balance; }
.wh-page .lead { max-width: none; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.wh-line { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--wh-hue); background: var(--accent-wash, var(--surface-raised)); border-radius: var(--radius-ui); text-wrap: pretty; min-height: 3.5rem; }

.wh-sec { margin: 0 0 var(--space-7); }
.wh-sec h2 { margin: 0 0 var(--space-2); }
.wh-sec > p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.wh-frame { background: var(--surface-card); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); padding: var(--space-4); }
.wh-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.wh-sec[data-kind="us"] .wh-svg { max-width: 900px; margin: 0 auto; }

/* a place: grey until the numbers arrive, then one of five shades of the hub's blue (stronger steps on a dark page) */
.wh-page { --wh-1: color-mix(in srgb, var(--wh-hue) 22%, var(--surface-card)); --wh-2: color-mix(in srgb, var(--wh-hue) 40%, var(--surface-card)); --wh-3: color-mix(in srgb, var(--wh-hue) 58%, var(--surface-card)); --wh-4: color-mix(in srgb, var(--wh-hue) 78%, var(--surface-card)); --wh-5: var(--wh-hue); }
[data-theme="dark"] .wh-page { --wh-1: color-mix(in srgb, var(--wh-hue) 38%, var(--surface-card)); --wh-2: color-mix(in srgb, var(--wh-hue) 55%, var(--surface-card)); --wh-3: color-mix(in srgb, var(--wh-hue) 72%, var(--surface-card)); --wh-4: color-mix(in srgb, var(--wh-hue) 88%, var(--surface-card)); --wh-5: color-mix(in srgb, var(--wh-hue) 80%, white); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wh-page { --wh-1: color-mix(in srgb, var(--wh-hue) 38%, var(--surface-card)); --wh-2: color-mix(in srgb, var(--wh-hue) 55%, var(--surface-card)); --wh-3: color-mix(in srgb, var(--wh-hue) 72%, var(--surface-card)); --wh-4: color-mix(in srgb, var(--wh-hue) 88%, var(--surface-card)); --wh-5: color-mix(in srgb, var(--wh-hue) 80%, white); }
}
.wh-r { fill: var(--surface-raised); stroke: var(--surface-card); stroke-width: 0.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: default; outline: none; }
.wh-r.wh-s0 { fill: var(--surface-raised); }
.wh-r.wh-s1 { fill: var(--wh-1); } .wh-r.wh-s2 { fill: var(--wh-2); } .wh-r.wh-s3 { fill: var(--wh-3); } .wh-r.wh-s4 { fill: var(--wh-4); } .wh-r.wh-s5 { fill: var(--wh-5); }
.wh-sw.wh-s1 { background: var(--wh-1); } .wh-sw.wh-s2 { background: var(--wh-2); } .wh-sw.wh-s3 { background: var(--wh-3); } .wh-sw.wh-s4 { background: var(--wh-4); } .wh-sw.wh-s5 { background: var(--wh-5); }

/* hover, tap and keyboard focus: the place lifts, gets an outline and a soft shadow */
.wh-r:not(.wh-s0) { cursor: pointer; }
.wh-r.is-hot, .wh-r:focus-visible { stroke: var(--text-primary); stroke-width: 1.6; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--text-primary) 45%, transparent)); }
.wh-r.wh-s0.is-hot { fill: color-mix(in srgb, var(--wh-hue) 10%, var(--surface-raised)); }
html[data-motion="full"] .wh-r { transition: fill 160ms var(--ease), transform 180ms var(--ease); transform-box: fill-box; transform-origin: center; }
html[data-motion="full"] .wh-r.is-hot, html[data-motion="full"] .wh-r:focus-visible { transform: scale(1.045); }
html[data-motion="lite"] .wh-r { transition: fill 160ms var(--ease); }
/* when the numbers arrive, the whole map eases in once (235 shapes fading one by one would be too busy) */
html[data-motion="full"] .wh-page.is-ready .wh-svg { animation: wh-in 520ms var(--ease) backwards; }
@keyframes wh-in { from { opacity: 0.35; } to { opacity: 1; } }

/* the tip that follows the pointer */
.wh-tip { position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: var(--space-2) var(--space-3); background: var(--text-primary); color: var(--surface-page); border-radius: var(--radius-ui); font: 400 14px/20px var(--font-ui); white-space: nowrap; box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 30%, transparent); }
.wh-tip[hidden] { display: none; }
.wh-tip b { font-weight: 700; }
.wh-tip[data-empty="true"] span { opacity: 0.75; }

.wh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font: 400 14px/20px var(--font-ui); color: var(--text-secondary); }
.wh-legend:empty { display: none; }
.wh-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.wh-sw { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: var(--stroke-hairline) solid var(--border-subtle); }
.wh-legend-title { margin-right: var(--space-1); font-weight: 600; color: var(--text-primary); }

.wh-note { margin: 0 0 var(--space-6); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); }
.wh-note summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; }
.wh-note p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); text-wrap: pretty; }

@media (max-width: 640px) { .wh-frame { padding: var(--space-2); } .wh-line { padding: var(--space-3) var(--space-4); } }