/* Fonts and design tokens from Metaculus. See THIRD_PARTY_NOTICES.txt. */
@font-face { font-family: Inter; src: url('fonts/inter_variable.ttf') format('truetype'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Source Serif Pro"; src: url('fonts/SourceSerifPro-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif Pro"; src: url('fonts/SourceSerifPro-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Metaculus World Map. Palette follows Metaculus's own blues. The map is a sequential
   choropleth: one hue, light to dark with magnitude in light mode, dark to light in dark
   mode, with a neutral no-data fill. Questions are shown only as Metaculus embeds. */

:root {
	color-scheme: light;
	--bg: #eff4f4;
	--panel: #ffffff;
	--sunk: #f9fbfb;
	--line: #d7e4f2;
	--line-strong: #a9c0d6;
	--ink: #161c22;
	--ink-2: #555555;
	--ink-3: #777777;
	--accent: #283441;
	--accent-ink: #ffffff;
	--accent-soft: #eaf4ff;
	--focus: #3f7cc4;
	--nodata: #e0e0e1;
	--ramp-1: #d7e4f2;
	--ramp-2: #a9c0d6;
	--ramp-3: #758ea9;
	--ramp-4: #4f6882;
	--ramp-5: #283441;
	--map-border: #ffffff;
	--hover-stroke: #161c22;
	--select-stroke: #d4691c;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
	--shadow-lg: 0 14px 36px rgba(16, 24, 40, 0.18);
	--radius: 4px;
	/* Chart height is presentation metadata supplied by the build. */
	--frame-h: 360px;
}

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) {
		color-scheme: dark;
		--bg: #22262b;
		--panel: #262f38;
		--sunk: #2c3947;
		--line: #58718c;
		--line-strong: #6387a8;
		--ink: #fffdfb;
		--ink-2: #bdc0c2;
		--ink-3: #adb1b4;
		--accent: #ebf5fe;
		--accent-ink: #394450;
		--accent-soft: #3d5166;
		--focus: #7fb0e6;
		--nodata: #626970;
		--ramp-1: #344c66;
		--ramp-2: #58718c;
		--ramp-3: #839db7;
		--ramp-4: #bfd4ec;
		--ramp-5: #ebf5fe;
		--map-border: #718090;
		--hover-stroke: #ffffff;
		--select-stroke: #f4a261;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
		--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #22262b;
	--panel: #262f38;
	--sunk: #2c3947;
	--line: #58718c;
	--line-strong: #6387a8;
	--ink: #fffdfb;
	--ink-2: #bdc0c2;
	--ink-3: #adb1b4;
	--accent: #ebf5fe;
	--accent-ink: #394450;
	--accent-soft: #3d5166;
	--focus: #7fb0e6;
	--nodata: #626970;
	--ramp-1: #344c66;
	--ramp-2: #58718c;
	--ramp-3: #839db7;
	--ramp-4: #bfd4ec;
	--ramp-5: #ebf5fe;
	--map-border: #718090;
	--hover-stroke: #ffffff;
	--select-stroke: #f4a261;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

.app { max-width: 1120px; margin: 0 auto; padding-inline: 28px; padding-block: 0 48px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
	flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
	background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-title {
	margin: 0; font-family: "Source Serif Pro", Georgia, "Times New Roman", serif;
	font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
}
.brand-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- buttons ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line);
	background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 500;
	text-decoration: none; white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--sunk); border-color: var(--line-strong); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon svg { width: 18px; height: 18px; }

/* ---------- controls ---------- */

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 10px; }

.combo { position: relative; flex: 1 1 320px; max-width: 440px; }
.combo-field {
	display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px;
	background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.combo-field:hover { border-color: var(--line-strong); }
.combo-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.combo-icon { flex: none; display: grid; place-items: center; color: var(--ink-3); }
.combo-icon svg { width: 18px; height: 18px; }
.combo-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 15px; }
.combo-input::placeholder { color: var(--ink-3); }
.combo-clear {
	flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent;
	color: var(--ink-3); display: grid; place-items: center;
}
.combo-clear:hover { background: var(--sunk); color: var(--ink); }
.combo-clear svg { width: 16px; height: 16px; }
.combo-list {
	position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
	max-height: min(420px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
	background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-lg);
	overscroll-behavior: contain;
}
.combo-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.combo-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 14px; cursor: pointer; user-select: none; }
.combo-option[aria-selected="true"] { background: var(--accent-soft); }
.combo-option.is-current .combo-name { font-weight: 600; }
.combo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-count {
	margin-left: auto; flex: none; min-width: 30px; padding: 1px 8px; border-radius: 999px;
	background: var(--sunk); color: var(--ink-2); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums;
}
.combo-count.is-zero { color: var(--ink-3); background: transparent; }
.combo-empty { padding: 14px 10px; color: var(--ink-3); font-size: 14px; }

.seg {
	display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel);
	border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); max-width: 100%; overflow-x: auto;
}
.seg-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
	background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.seg-btn:hover { background: var(--sunk); color: var(--ink); }
.seg-btn[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.seg-btn:disabled:hover { background: transparent; color: var(--ink-2); }
.seg-count { font-size: 12px; opacity: 0.8; font-variant-numeric: tabular-nums; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
	flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
	background: var(--panel); color: var(--ink-2); font-size: 13.5px; font-weight: 500;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- map ---------- */

.map-card {
	position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
	box-shadow: var(--shadow-sm); padding: 10px 12px 8px; margin-bottom: 26px;
}
.map-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 720px; overflow: hidden; border-radius: 12px; }
.map-svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }

.map-svg .country,
.map-svg .country * {
	fill: var(--c, var(--nodata)) !important;
	stroke: var(--map-border) !important;
	stroke-width: 0.6px !important;
	vector-effect: non-scaling-stroke;
	transition: fill 0.25s ease, opacity 0.25s ease;
	cursor: pointer;
}
.map-svg .country.no-questions,
.map-svg .country.no-questions * { cursor: default; }
.map-svg.has-selection .country:not(.is-selected):not(.is-hover) { opacity: 0.55; }
.map-svg .country.is-selected,
.map-svg .country.is-selected * { stroke: var(--select-stroke) !important; stroke-width: 2px !important; }
.map-svg .country.is-hover,
.map-svg .country.is-hover * { stroke: var(--hover-stroke) !important; stroke-width: 1.5px !important; }

.map-float { position: absolute; z-index: 10; top: 10px; left: 10px; box-shadow: var(--shadow-md); }

.map-loading {
	position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 14px;
	background: linear-gradient(100deg, var(--panel) 30%, var(--sunk) 50%, var(--panel) 70%);
	background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}

.tooltip {
	position: absolute; z-index: 20; left: 0; top: 0; width: max-content; min-width: 190px; max-width: 280px;
	padding: 11px 13px 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
	border-radius: 12px; box-shadow: var(--shadow-lg); pointer-events: none; font-size: 13px; line-height: 1.4;
}
.tt-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.tt-value { margin-top: 7px; font-size: 24px; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tt-value span { margin-left: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tt-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.tt-hint { margin-top: 7px; font-size: 11.5px; color: var(--ink-3); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 6px 4px; font-size: 12.5px; color: var(--ink-2); }
.legend-title { font-weight: 600; color: var(--ink); margin-right: 2px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.legend-note { margin-left: auto; color: var(--ink-3); }

/* ---------- flags ---------- */

.flag {
	flex: none; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; background: var(--sunk);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.flag-lg { width: 32px; height: 24px; border-radius: 5px; }
.flag-fallback { display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.flag-lg.flag-fallback { font-size: 11px; }
.globe { flex: none; width: 22px; height: 22px; color: var(--ink-3); }
.globe-lg { width: 30px; height: 30px; }

/* ---------- results ---------- */

.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.results-title {
	display: flex; align-items: center; gap: 11px; margin: 0; font-family: "Source Serif Pro", Georgia, "Times New Roman", serif;
	font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
}
.results-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.results-note { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; }

.feed { display: flex; flex-direction: column; gap: 16px; }

.tile {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.tile-frame { position: relative; height: var(--frame-h); overflow: hidden; background: var(--sunk); }
/* The iframe sits above the placeholder from the start. It is transparent until Metaculus
   paints, so the placeholder shows through and the question appears the moment it renders,
   instead of after the load event, which waits for every analytics request inside it. */
.tile-frame iframe {
	position: absolute; top: 0; left: 0; z-index: 1; border: 0; display: block;
	width: var(--embed-w, 100%); height: var(--embed-h, 360px);
	transform: scale(var(--embed-scale, 1)); transform-origin: 0 0;
}
.tile-placeholder {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
	padding: 18px; color: var(--ink-3); font-size: 12.5px;
}
.tile-placeholder .bar { height: 12px; border-radius: 6px; background: var(--line); opacity: 0.7; }
.tile-placeholder .bar.w1 { width: 82%; }
.tile-placeholder .bar.w2 { width: 60%; }
.tile-placeholder .chart { flex: 1; margin-top: 8px; border-radius: 10px; background: color-mix(in srgb, var(--line) 55%, transparent); }
.tile[data-embed="loading"] .tile-placeholder .bar,
.tile[data-embed="loading"] .tile-placeholder .chart,
.tile[data-embed="queued"] .tile-placeholder .bar,
.tile[data-embed="queued"] .tile-placeholder .chart {
	background: linear-gradient(100deg, var(--line) 30%, var(--panel) 50%, var(--line) 70%);
	background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.tile[data-embed="loaded"] .tile-placeholder { display: none; }

.tile-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 7px 8px 7px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3);
}
.tile-state { font-variant-numeric: tabular-nums; }
.tile-retry { color: var(--ink-2); }

.empty {
	grid-column: 1 / -1; padding: 44px 20px; text-align: center; color: var(--ink-2);
	background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }

.results-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px; }
.results-foot small { color: var(--ink-3); font-size: 12.5px; }

.fatal { margin: 40px auto; max-width: 560px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fatal code { font-size: 13px; background: var(--sunk); padding: 1px 6px; border-radius: 5px; }

.footer {
	margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px;
	display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
}

@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 760px) {
	.app { padding-inline: 16px; }
	.brand-title { font-size: 20px; }
	.brand-mark { width: 34px; height: 34px; }
	.topbar-actions .btn-ghost { display: none; }
	.combo { flex-basis: 100%; max-width: none; }
	.map-stage { aspect-ratio: 4 / 3; }
	.legend-note { margin-left: 0; width: 100%; }
	.results-title { font-size: 22px; }
	.tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Platform-shaped controls and a compact, ordered feed. */
.app { padding-bottom: 0; }
.topbar { padding-block: 24px; }
.brand-mark { width: 30px; height: 38px; border-radius: 0; background: none; color: var(--ink); box-shadow: none; }
.brand-mark svg { width: 26px; height: 34px; }
.brand-title { font-weight: 700; }
.btn, .btn-sm { border-radius: 999px; border-color: var(--ink); }
.btn-ghost { border-color: transparent; }
.seg { border: 0; box-shadow: none; background: transparent; padding: 0; gap: 4px; }
.seg-btn { border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); padding-inline: 12px; }
.seg-btn[aria-checked="true"], .chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.combo-field { border-radius: 4px; box-shadow: none; height: 36px; }
.combo-list, .combo-option { border-radius: 4px; }
.map-card { border-radius: 4px; padding: 8px; margin-bottom: 32px; box-shadow: none; }
.map-stage { max-height: 560px; border-radius: 0; }
.results { max-width: 760px; margin-inline: auto; }
.controls { gap: 12px; margin-bottom: 12px; }
.combo { flex-basis: 100%; max-width: none; }
.chips { flex-wrap: wrap; overflow: visible; gap: 6px; padding-bottom: 24px; }
.chip { height: 30px; padding-inline: 12px; }
.results-title { font-weight: 400; }
.results-head { margin-bottom: 16px; }
.tile { border-color: var(--line); border-radius: 4px; }
.tile:hover { box-shadow: none; }
.tile-frame { background: var(--sunk); }
.footer { margin-top: 64px; padding-block: 32px; align-items: center; font-size: 14px; gap: 24px; }
.footer-credit { display: flex; align-items: center; gap: 12px; }
.footer-credit svg { width: 22px; height: 28px; color: var(--ink); }
.footer-credit a { color: var(--ink); }
.footer-heart { color: var(--accent); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 24px; }
.footer-links a:first-child { color: var(--accent); }
@media (max-width: 600px) {
  .app { padding-inline: 12px; }
  .topbar { padding-block: 20px; }
  .brand-title { font-size: 21px; }
  .brand-sub { font-size: 12px; }
  .map-card { margin-bottom: 24px; }
  .seg-btn { font-size: 13px; padding-inline: 10px; }
  .chips { padding-bottom: 20px; }
  .footer { flex-direction: column; justify-content: center; }
}

/* Platform feed: PostsFilters, PopoverFilter and balanced Masonry. */
.app { max-width: 1120px; padding-inline: 28px; }
.map-stage { max-height: 800px; aspect-ratio: 2 / 1; }
.map-card { margin-bottom: 24px; }
.results { max-width: none; }
.results-head { margin: 16px 0 12px; }
.results-title { font-family: Inter, sans-serif; font-size: 20px; font-weight: 600; }
.results-sub { font-size: 13px; }
.feed { --columns: 3; display: block; position: relative; width: 100%; }
/* Always-visible filtering, matching the earlier map toolbar. */
.feed .tile { position: absolute; margin: 0; }
.controls { gap: 10px 12px; margin-bottom: 10px; }
.controls .combo { flex: 1 1 320px; max-width: 440px; }
.controls .combo-field { height: 42px; border-radius: 12px; }
.controls .seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.controls .seg-btn { height: 34px; border: 0; border-radius: 8px; background: transparent; padding-inline: 12px; }
.controls .seg-btn[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.chips { gap: 8px; padding-bottom: 12px; }
.chip { height: 32px; }
@media (max-width: 1050px) { .feed { --columns: 2; } }
@media (max-width: 650px) {
  .app { padding-inline: 12px; }
  .feed { --columns: 1; }
  .map-stage { aspect-ratio: 4 / 3; }
  .controls .combo { flex-basis: 100%; max-width: none; }
  .controls .seg { max-width: 100%; }
  .controls .seg-btn { padding-inline: 9px; }
}

/* Mouse navigation stays within the map; touch retains native page scrolling. */
.map-svg { cursor: grab; user-select: none; }
.map-svg.is-dragging, .map-svg.is-dragging .country, .map-svg.is-dragging .country * { cursor: grabbing; }
.map-navigation { position: absolute; right: 10px; bottom: 10px; z-index: 10; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow-sm); }
.map-navigation button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 21px; }
.map-navigation button:hover { background: var(--accent-soft); }

/* Leave room for the filters and changing question feed on laptop screens. */
.map-stage { height: clamp(220px, 43vh, 440px); max-height: none; aspect-ratio: auto; }
.map-svg .map-water, .map-svg .map-water * { fill: var(--panel) !important; stroke: none !important; pointer-events: none; }

.map-questions { position: absolute; z-index: 10; bottom: 10px; left: 50%; transform: translateX(-50%); height: 40px; box-shadow: var(--shadow-md); }
.mobile-topics { display: none; }
.results-head { scroll-margin-top: 16px; }
@media (max-width: 650px) {
  #topic-chips { display: none; }
  .mobile-topics { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
  .mobile-topics label { font-size: 13px; color: var(--ink-2); }
  .mobile-topics select { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
  .map-questions { left: 10px; transform: none; font-size: 13px; padding-inline: 10px; }
}