/**
 * Live Webcam World Map - page styles.
 *
 * Scoped under .wwm-page. Reuses the theme's design tokens (--blue, --cyan,
 * --navy, --text, --radius, --shadow …) with safe fallbacks. Restrained by
 * design (spec §22): no glowing or pulsing markers, no constant animation - the
 * one live element is the drifting day/night boundary.
 */

.wwm-page {
	padding-top: 18px;
	padding-bottom: 40px;
}
.wwm-page [hidden] { display: none !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.wwm-breadcrumb { font-size: 13px; color: var(--text-light, #666); margin-bottom: 10px; }
.wwm-breadcrumb a { color: var(--blue, #1e73be); }
.wwm-breadcrumb span { margin: 0 6px; }

.wwm-header { margin-bottom: 16px; }
.wwm-title {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	color: var(--navy, #162b51);
	line-height: 1.2;
	margin-bottom: 6px;
}
/* No max-width: the intro is written to fit a single line, and a 70ch cap
   wrapped it regardless of how much room the container had. It still wraps
   naturally on a narrow screen. */
.wwm-intro {
	color: var(--text-light, #666);
	font-size: 15px;
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.wwm-controls { margin-bottom: 14px; }

.wwm-solar {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
/* Same height and type size as the "Embed this map" button at the end of the
   row (lww-map-embeds lme-panel.css: 7px/14px padding, 12.5px bold, ~30px). */
.wwm-solar-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1px solid var(--border, #dfdfdf);
	background: var(--bg-white, #fff);
	color: var(--text-dark, #333);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	transition: background .15s, border-color .15s, color .15s;
	min-height: 30px;
}
.wwm-solar-btn:hover { border-color: var(--blue, #1e73be); color: var(--blue, #1e73be); }
.wwm-solar-btn.is-active {
	background: var(--blue, #1e73be);
	border-color: var(--blue, #1e73be);
	color: #fff;
}
.wwm-solar-ico { font-size: 13px; }

/* Search first, then the sunlight selector, on one line. */
.wwm-controls-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
/* Bounded so the selector keeps its place on the same line; it is the first
   control, not the one that soaks up all the width. */
.wwm-controls-row .wwm-search-wrap { flex: 0 1 280px; }

/* Theme dropdown (native <details>) */
.wwm-theme { position: relative; }
/* Floating over the map, where the What's Happening card used to sit. */
.wwm-theme--on-map {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1000;
}
/* Navy, the colour the What's Happening header used in this spot. A white
   button vanished into the pale half of the basemap; navy reads as a control
   over both the daylight and the night side. */
.wwm-theme--on-map .wwm-theme-summary {
	background: var(--navy, #162b51);
	border-color: #fff;
	color: #fff;
	box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,.18));
}
.wwm-theme--on-map .wwm-theme-summary:hover { background: var(--navy-hover, #1d3a6b); }
/* Keep the white edge when the panel is open; the base rule turns it blue. */
.wwm-theme--on-map[open] .wwm-theme-summary { border-color: #fff; }
.wwm-theme--on-map .wwm-caret { color: rgba(255,255,255,.75); }
/* The badge is blue by default, which is too close to navy to read on it. */
.wwm-theme--on-map .wwm-theme-count {
	background: #fff;
	color: var(--navy, #162b51);
}
.wwm-theme-summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--border, #dfdfdf);
	background: var(--bg-white, #fff);
	color: var(--text-dark, #333);
	border-radius: var(--radius, 6px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	min-height: 40px;
	user-select: none;
}
.wwm-theme-summary::-webkit-details-marker { display: none; }
.wwm-theme[open] .wwm-theme-summary { border-color: var(--blue, #1e73be); }
.wwm-caret { font-size: 11px; color: var(--text-light, #666); }
.wwm-theme-count {
	background: var(--blue, #1e73be);
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}
.wwm-theme-panel {
	position: absolute;
	z-index: 1200;
	top: calc(100% + 6px);
	left: 0;
	width: 300px;
	max-width: 90vw;
	background: var(--bg-white, #fff);
	border: 1px solid var(--border, #dfdfdf);
	border-radius: var(--radius-md, 6px);
	box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,.12));
	padding: 8px;
}
.wwm-theme-list { max-height: 320px; overflow-y: auto; }
.wwm-theme-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: var(--radius, 6px);
	cursor: pointer;
	font-size: 14px;
}
.wwm-theme-item:hover { background: var(--bg, #f9f9f9); }
.wwm-theme-item input { width: 16px; height: 16px; accent-color: var(--blue, #1e73be); }
.wwm-theme-ico { font-size: 15px; }
.wwm-theme-name { flex: 1; color: var(--text-dark, #333); }
.wwm-theme-n { color: var(--text-light, #999); font-size: 12px; }
.wwm-theme-empty { padding: 10px; color: var(--text-light, #666); font-size: 14px; }
.wwm-theme-actions {
	border-top: 1px solid var(--border, #dfdfdf);
	margin-top: 6px;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.wwm-theme-clear { color: var(--blue, #1e73be); font-size: 13px; font-weight: 600; padding: 4px 6px; }
/* Filtering is already live, so this only dismisses the panel - but without a
   visible way out the list reads as stuck, especially on mobile where it covers
   the map. Styled as the primary action so it is the obvious exit. */
.wwm-theme-done {
	background: var(--blue, #1e73be);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: var(--radius, 6px);
	min-height: 36px;
}
.wwm-theme-done:hover { background: var(--blue-hover, #1a65a8); }

/* Search */
.wwm-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
/* box-sizing is not cosmetic here: width:100% plus padding and border makes the
   field ~26px wider than its wrapper under content-box, and it then overlaps
   the sunlight selector sitting next to it in the controls row. */
.wwm-search {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid var(--border, #dfdfdf);
	border-radius: var(--radius, 6px);
	font-size: 13px;
	line-height: 1.2;
	background: var(--bg-white, #fff);
	color: var(--text-dark, #333);
	min-height: 30px; /* the embed button's height */
}
.wwm-search:focus { outline: none; border-color: var(--blue, #1e73be); box-shadow: 0 0 0 3px rgba(30,115,190,.15); }
.wwm-search-results {
	position: absolute;
	z-index: 1200;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--bg-white, #fff);
	border: 1px solid var(--border, #dfdfdf);
	border-radius: var(--radius-md, 6px);
	box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,.12));
	max-height: 340px;
	overflow-y: auto;
	padding: 4px;
}
.wwm-sr {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius, 6px);
	cursor: pointer;
}
.wwm-sr:hover, .wwm-sr:focus { background: var(--bg, #f9f9f9); outline: none; }
.wwm-sr:focus { box-shadow: inset 0 0 0 2px var(--blue, #1e73be); }
.wwm-sr-ico { font-size: 15px; color: var(--text-muted, #5a7a96); }
.wwm-sr--place .wwm-sr-ico { color: var(--blue, #1e73be); }
.wwm-sr-main { display: flex; flex-direction: column; min-width: 0; }
.wwm-sr-title { font-size: 14px; color: var(--text-dark, #333); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-sr-sub { font-size: 12px; color: var(--text-light, #666); }
.wwm-sr--none { color: var(--text-light, #666); cursor: default; font-size: 14px; }

/* flex:0 0 auto matters: it is nowrap, so as a shrinkable flex item its text
   spilled out of its box and got overlapped by the search field once the field
   grew (which it does now that the type filter no longer sits in this row). */
.wwm-count { flex: 0 0 auto; font-size: 13px; color: var(--text-light, #666); font-weight: 600; white-space: nowrap; }
.wwm-reset {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--blue, #1e73be);
	padding: 6px 10px;
	border: 1px solid var(--border, #dfdfdf);
	border-radius: var(--radius, 6px);
	background: var(--bg-white, #fff);
	min-height: 30px;
	white-space: nowrap; /* "Clear filters" on one line */
	flex: 0 0 auto;
}
.wwm-reset:hover { border-color: var(--blue, #1e73be); }

/* ── Map ────────────────────────────────────────────────────────────────── */
.wwm-map-section { margin-bottom: 26px; }
/* isolation: the Themes button (z 1000), its panel and the preview card sat in
   the page's root stacking order, level with the sticky header (z 1000) and
   later in the source, so they painted over the open header menu. Isolated,
   they still stack above the map but the whole map block stays under the
   header (1.0.46). */
.wwm-map-shell { position: relative; isolation: isolate; }
.wwm-map {
	width: 100%;
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: #aadaff;
	border: 1px solid var(--border, #dfdfdf);
	z-index: 0;
}
/* Richer basemap colour so the night side reads blue-water / brown-land (like
   NASA Black Marble) once the multiply overlay darkens it. Applies only to the
   basemap tiles, not markers/labels/overlays. Satellite imagery is already fully
   coloured - the same boost turns it radioactive - so it opts out. */
.wwm-map .leaflet-tile-pane { filter: saturate(1.35); }
.wwm-map--satellite .leaflet-tile-pane { filter: none; }
.wwm-map-skeleton {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--text-light, #666);
	background: #eaf4fb;
	font-size: 14px;
}
.wwm-spinner {
	width: 30px; height: 30px;
	border: 3px solid rgba(30,115,190,.25);
	border-top-color: var(--blue, #1e73be);
	border-radius: 50%;
	animation: wwm-spin 0.9s linear infinite;
}
@keyframes wwm-spin { to { transform: rotate(360deg); } }

/* Webcam markers (divIcon): a camera glyph in a rounded navy badge, so a pin
   reads as "a camera lives here" rather than as a generic dot. Cyan glyph on
   navy + a white ring keeps it legible over pale daylight tiles, the dark night
   overlay AND satellite imagery (spec §4/§22). The badge is centred inside a
   24px icon box; the selected state grows via negative margin so Leaflet never
   has to re-anchor it. */
.wwm-marker { background: none; border: none; }
.wwm-marker-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	margin: 2px;
	border-radius: 6px;
	background: var(--navy, #162b51);
	border: 1.5px solid var(--cyan, #8fd9fb);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 2px 5px rgba(0,0,0,.45);
	box-sizing: border-box;
	transition: transform .1s ease;
}
.wwm-marker-pin svg {
	display: block;
	width: 18px; height: 18px;
	fill: var(--cyan, #8fd9fb);
}
.wwm-marker:hover .wwm-marker-pin { transform: scale(1.12); }
.wwm-marker.is-selected .wwm-marker-pin {
	width: 34px; height: 34px;
	margin: -1px;
	border-radius: 6px;
	background: var(--blue, #1e73be);
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px var(--blue, #1e73be);
}
.wwm-marker.is-selected .wwm-marker-pin svg { width: 22px; height: 22px; fill: #fff; }

/* Clusters */
.wwm-cluster {
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* The bubble fills its icon box, which JS now sizes per tier (see
   iconCreateFunction). flex-shrink:0 + aspect-ratio are the guarantee that it
   can only ever be a circle: as a flex item it would otherwise be squeezed
   along the main axis while keeping its height, which is what turned the larger
   clusters into ellipses. box-sizing keeps the 2px border inside the box so the
   painted diameter matches the icon box exactly. */
.wwm-cluster span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%; height: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	background: var(--navy, #162b51);
	border: 2px solid var(--cyan, #8fd9fb);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), var(--shadow, 0 2px 8px rgba(0,0,0,.25));
}
.wwm-cluster--l span { font-size: 14px; }
.wwm-cluster--xl span { font-size: 15px; }

/* Place names over satellite imagery. Esri's reference layer already carries a
   dark halo, but imagery is a noisy, high-contrast backdrop - a pair of soft
   dark drop-shadows deepens that halo so names stay readable over bright desert
   and snow as well as over ocean. Shadows only: brightening would lift the halo
   along with the text and undo itself. Street mode uses the dark-text cut on a
   pale basemap and needs none of this. */
/* The two label layers need OPPOSITE treatments, so each is tuned by its own
   class rather than through the shared pane. Tight shadows only - a wide blur
   spreads grey haze around the glyphs and reads as "washed" rather than as a
   halo. */

/* World view (Boundaries & Places): already white with its own halo, so it
   needs deepening, not brightening - brightening lifts the halo along with the
   text and cancels itself out. */
.wwm-map--satellite .wwm-labels-wide {
	filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,.55));
}
/* Zoomed in (Canvas Dark Gray reference): drawn as soft light-grey for a flat
   dark canvas, so it washes out over bright imagery - brightened, then given a
   tight shadow to hold its edge. */
.wwm-map--satellite .wwm-labels-close {
	filter: brightness(1.5) drop-shadow(0 0 1px rgba(0,0,0,1)) drop-shadow(0 1px 2px rgba(0,0,0,.85));
}

/* Street mode. The wide layer is already the dark-text cut and only needs a
   white glow for the night side, where the multiply overlay has darkened the
   ground beneath it. */
.wwm-map:not(.wwm-map--satellite) .wwm-labels-wide {
	filter: drop-shadow(0 0 2px rgba(255,255,255,.9));
}
/* The Canvas cut is paler to begin with, so it is darkened a little too. */
.wwm-map:not(.wwm-map--satellite) .wwm-labels-close {
	filter: brightness(.8) drop-shadow(0 0 2px rgba(255,255,255,.95));
}

/* Country names (vector, drawn by mapview.js). The divIcon is a zero-size box
   at the label point and Leaflet owns its transform, so the text sits in a
   child that centres itself - translating the icon element directly would
   fight Leaflet's positioning. Uppercase + letter-spacing to read as country
   rather than city, matching the world-view raster labels. */
.wwm-country-label { background: none; border: 0; }
.wwm-country-label span {
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	pointer-events: none;
}
.wwm-map--satellite .wwm-country-label span {
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.75);
}
.wwm-map:not(.wwm-map--satellite) .wwm-country-label span {
	color: #33475b;
	text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}

/* Keep Leaflet controls/attribution clear of our panels */
.wwm-map .leaflet-control-attribution { font-size: 10px; }

/* Map / Satellite switcher - bottom-left, clear of the zoom control (top-right),
   the attribution (bottom-right) and the What's Happening card (top-left). */
.wwm-basemap {
	display: flex;
	overflow: hidden;
	border-radius: var(--radius-sm, 6px);
	border: 1px solid rgba(0,0,0,.22);
	box-shadow: 0 1px 5px rgba(0,0,0,.4);
	background: var(--bg-white, #fff);
}
.wwm-basemap-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	background: var(--bg-white, #fff);
	color: var(--text, #222);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 13px;
	min-height: 32px;
	cursor: pointer;
}
.wwm-basemap-btn + .wwm-basemap-btn { border-left: 1px solid var(--border, #dfdfdf); }
.wwm-basemap-btn:hover { background: var(--bg-light, #f2f6fa); }
.wwm-basemap-btn.is-active {
	background: var(--blue, #1e73be);
	color: #fff;
}
.wwm-basemap-btn:focus-visible {
	outline: 3px solid rgba(30,115,190,.5);
	outline-offset: -3px;
}

/* ── Preview card (desktop: floating; mobile: bottom sheet) ─────────────── */
.wwm-preview-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	z-index: 1400;
	display: none;
}
.wwm-preview {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1500;
	width: 300px;
	max-width: calc(100% - 24px);
	background: var(--bg-white, #fff);
	border: 1px solid var(--border, #dfdfdf);
	border-radius: var(--radius-md, 6px);
	box-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,.22));
	overflow: hidden;
}
.wwm-card-close {
	position: absolute;
	top: 6px; right: 6px;
	z-index: 2;
	width: 30px; height: 30px;
	border-radius: 6px;
	background: rgba(0,0,0,.5);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.wwm-card-close:hover { background: rgba(0,0,0,.72); }
.wwm-card-thumb { aspect-ratio: 16 / 9; background: var(--bg, #eef2f6); overflow: hidden; }
.wwm-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wwm-card-thumb--empty { background: linear-gradient(135deg, #dfe8f0, #eef3f8); }
.wwm-card-body { padding: 12px 14px 14px; }
.wwm-card-title { font-size: 16px; color: var(--navy, #162b51); line-height: 1.25; margin-bottom: 2px; }
.wwm-card-loc { font-size: 13px; color: var(--text-light, #666); }
.wwm-card-theme { font-size: 12px; color: var(--blue, #1e73be); font-weight: 600; margin-top: 2px; }
.wwm-card-sun {
	margin: 10px 0;
	border-top: 1px solid var(--border, #eee);
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.wwm-sun-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.wwm-sun-lbl { color: var(--text-light, #666); }
.wwm-sun-val { font-weight: 600; color: var(--text-dark, #333); font-variant-numeric: tabular-nums; }
.wwm-sun-val.wwm-sun-muted { color: var(--text-light, #999); font-weight: 400; }
.wwm-sun-polar { color: var(--text-dark, #333); font-weight: 600; justify-content: flex-start; }
.wwm-sun-countdown {
	margin-top: 3px;
	background: rgba(30,115,190,.1);
	color: var(--blue, #1e73be);
	font-weight: 700;
	font-size: 13px;
	padding: 6px 10px;
	border-radius: var(--radius, 6px);
	text-align: center;
}
.wwm-card-btn {
	display: block;
	text-align: center;
	background: var(--blue, #1e73be);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px;
	border-radius: var(--radius, 6px);
	transition: background .15s;
}
.wwm-card-btn:hover { background: var(--blue-hover, #1560a0); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.wwm-empty {
	margin-top: 12px;
	padding: 12px 16px;
	background: #fff6e6;
	border: 1px solid #f2d9a8;
	border-radius: var(--radius, 6px);
	color: #8a6d3b;
	font-size: 14px;
	text-align: center;
}

/* ── Informational content ──────────────────────────────────────────────── */
.wwm-info { max-width: 75ch; }
.wwm-info h2 { font-size: 1.25rem; color: var(--navy, #162b51); margin: 22px 0 8px; }
.wwm-info p { color: var(--text, #444); margin-bottom: 8px; }
.wwm-attribution { margin-top: 20px; font-size: 12px; color: var(--text-light, #888); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.wwm-preview {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: 100%;
		max-width: 100%;
		border-radius: 6px 6px 0 0;
		max-height: 80vh;
		overflow-y: auto;
		animation: wwm-sheet-up .2s ease;
	}
	.wwm-preview-backdrop[hidden] { display: none; }
	.wwm-preview.is-open ~ .wwm-preview-backdrop,
	.wwm-preview-backdrop { display: block; }
	@keyframes wwm-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

	/* Solar controls wrap onto a new line when the row runs out of room, so every
	   option stays visible (1.0.45: no sideways scrolling). */
	.wwm-solar { flex-wrap: wrap; }
	.wwm-solar-btn { flex: 0 0 auto; }

	/* Stack on a phone: the search takes the full first line, the sunlight
	   selector wraps beneath it, then the count with "Embed this map" at the
	   right end of the same line (lww-map-embeds lme-panel.css orders it last). */
	.wwm-controls-row { gap: 8px; }
	.wwm-controls-row .wwm-search-wrap { flex: 1 1 100%; order: 1; }
	.wwm-solar { order: 2; flex: 1 1 100%; }
	.wwm-count { order: 3; }
	.wwm-reset { order: 4; }

	/* Map/Satellite sits in the bottom-left corner. The attribution is anchored
	   bottom-right and, left alone, runs the full width of the map and straight
	   through it, so it is capped to leave the corner free. The two then sit side
	   by side on the same line. The cap does make the attribution wrap to another
	   line on a narrow phone, which is the accepted cost of keeping the switcher
	   in this corner. */
	.wwm-map .leaflet-bottom.leaflet-left {
		top: auto;
		bottom: 0;
		left: 0;
		right: auto;
	}
	.wwm-map .leaflet-bottom.leaflet-left .leaflet-control {
		margin: 0 0 10px 10px;
	}
	.wwm-map .leaflet-control-attribution {
		max-width: calc(100% - 150px);
	}
}

@media (max-width: 480px) {
	.wwm-title { font-size: 1.4rem; }
	.wwm-solar-btn { padding: 6px 11px; }
	/* Count, "Clear filters" and "Embed this map" share one line down to a
	   360px phone (lme-panel.css trims the embed button to match). */
	.wwm-controls-row { column-gap: 6px; }
	.wwm-count { font-size: 12px; }
	.wwm-reset { font-size: 12px; padding: 6px 8px; }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
.wwm-solar-btn:focus-visible,
.wwm-theme-summary:focus-visible,
.wwm-reset:focus-visible,
.wwm-card-btn:focus-visible,
.wwm-card-close:focus-visible {
	outline: 3px solid rgba(30,115,190,.5);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.wwm-spinner { animation: none; }
	.wwm-preview { animation: none; }
	.wwm-marker-pin { transition: none; }
}