@mailwoman/react 9.3.0 → 10.0.0

package/styles.css

@@ -1,823 +1,2155 @@
 /* ---------------------------------------------------------------------------
  * @mailwoman/react — component styles.
  *
- * Plain, `mw-`-prefixed classes ported from the docs-site CSS modules. Every
- * Infima (`--ifm-*`) token carries an inline fallback, so the components render
- * correctly BOTH inside Docusaurus (where the real theme tokens win) and
- * standalone (Storybook, tests, any React app). No CSS module hashing — the
- * class names are stable and namespaced, and no component imports this file, so
- * the bare package import stays node-safe.
+ * Plain, `mw-`-prefixed classes. Every colour, family and radius here names a
+ * SEMANTIC token from `tokens.css`, which this file requires a host to load —
+ * `@mailwoman/react/tokens.css`, and `fonts.css` beside it for the brand face.
+ * There are no inline fallbacks, on purpose: a fallback is what let eight
+ * undefined names paint Infima's LIGHT values inside a dark app without
+ * anything failing. A token that is missing should look missing.
+ *
+ * A rule may read the semantic layer only. Reaching a primitive (`--neutral-*`,
+ * `--brand-*`) from here skips the layer that says what a value is FOR, which is
+ * how this stylesheet came to read a theme vocabulary it did not own.
+ *
+ * No CSS module hashing — the class names are stable and namespaced, and no
+ * component imports this file, so the bare package import stays node-safe.
  * --------------------------------------------------------------------------- */
 
-.mw-poi-explorer,
-.mw-pipeline-explorer {
-	max-width: 720px;
-	font-size: 0.95rem;
+/*
+ * The layer order every consumer inherits. Naming the order here means a host's own rules can win by declaring a
+ * later layer rather than by out-specifying ours, which is what keeps this package embeddable in Docusaurus without
+ * either side fighting the other's selectors.
+ */
+@layer reset, tokens, base, components, utilities, overrides;
+
+/*
+ * The vocabulary these rules read, pulled in rather than left to the host to remember. A consumer that loaded the
+ * components and forgot the tokens is exactly the state that shipped: rules reading names nothing defined.
+ */
+@import url("./tokens/index.css") layer(tokens);
+
+@layer reset {
+	/*
+	 * Every box is measured by its border. The default is `content-box`, where `width`, `height` and `max-height`
+	 * describe the content ALONE and any padding and border stand outside them — so a sheet capped at 52% of the
+	 * viewport shipped 34px taller than its cap and ran off the bottom of the screen, and every rule that pairs a size
+	 * with padding is one edit away from the same defect.
+	 *
+	 * A rule that wants the other measure states `box-sizing: content-box` for itself; the footer strip does, because
+	 * its height names one line of type and its safe-area padding has to sit outside that.
+	 *
+	 * It is in the `reset` layer, so a host's own rules and every layer below win over it without out-specifying it.
+	 */
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
 }
 
-/* #region Field (label + input + button) */
+@layer base {
+	/*
+	 * The theme attribute has to reach the USER AGENT, not only our own rules. `color-scheme` is what paints a
+	 * scrollbar, a focus ring, a `<select>` popup and — the one this app depends on — the native clear button inside
+	 * `input[type="search"]`, which renders as a dark cross on a dark field until the document declares its scheme.
+	 */
+	:root[data-theme="dark"] {
+		color-scheme: dark;
+	}
 
-.mw-field {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
+	:root[data-theme="light"] {
+		color-scheme: light;
+	}
 
-.mw-field label {
-	font-weight: 600;
-	font-size: 0.9rem;
-}
+	/*
+	 * Form controls do not inherit the document's font. Left alone, a `<button>` renders in the user agent's default
+	 * — measured as Arial on the deployed Earth app, beside a body in system-ui and labels in ui-monospace, which is
+	 * three families in one panel and none of them chosen.
+	 */
+	button,
+	input,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+	}
 
-.mw-field input {
-	padding: 0.5rem 0.75rem;
-	font: inherit;
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 6px;
-	background: var(--ifm-background-surface-color, #fff);
-	color: var(--ifm-font-color-base, inherit);
-}
+	/*
+	 * A button carries no color of its own: unset, it paints the user agent's `buttontext`, which is near-black and
+	 * stays near-black inside a dark sheet. Every button in this stylesheet that sets a background but no color read
+	 * that way — the candidate list was the visible one.
+	 */
+	button {
+		color: inherit;
+	}
 
-.mw-field input:disabled {
-	opacity: 0.5;
+	/*
+	 * A default face for a host that sets none. Wrapped in `:where()` so it carries ZERO specificity: Docusaurus's own
+	 * `body` rule wins on the docs site and keeps that page's typography, while Storybook and a bare React host — which
+	 * declare nothing — stop falling back to the user agent's serif.
+	 */
+	:where(body) {
+		font-family: var(--font-family-text);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		color: var(--color-text-primary);
+	}
 }
 
-.mw-field button[type="submit"] {
-	padding: 0.5rem 0.75rem;
-	background: var(--ifm-color-primary, #e0367c);
-	color: #fff;
-	border: 0;
-	border-radius: 6px;
-	font-weight: 600;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.4rem;
-	align-self: flex-start;
-}
+@layer components {
+	.mw-poi-explorer,
+	.mw-pipeline-explorer {
+		max-width: 720px;
+		font-size: 0.95rem;
+	}
 
-.mw-field button[type="submit"]:disabled {
-	background: var(--ifm-color-emphasis-400, #b3b3b3);
-	cursor: not-allowed;
-}
+	/* #region Field (label + input + button) */
 
-/* #endregion */
+	.mw-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
 
-/* #region Preset chips */
+	.mw-field label {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
 
-.mw-presets {
-	margin-top: 0.75rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.4rem;
-	align-items: baseline;
-}
+	.mw-field input {
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+		border: 1px solid var(--control-border);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		color: var(--color-text-primary);
+	}
 
-.mw-presets__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	margin-right: 0.25rem;
-}
+	.mw-field input:disabled {
+		opacity: 0.5;
+	}
 
-.mw-chip {
-	font-size: 0.8rem;
-	padding: 0.25rem 0.55rem;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	color: var(--ifm-color-emphasis-800, #303846);
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 4px;
-	font-weight: 500;
-	cursor: pointer;
-	font-family: inherit;
-}
+	.mw-field button[type="submit"] {
+		padding: 0.5rem 0.75rem;
+		background: var(--color-accent);
+		color: var(--color-accent-contrast);
+		border: 0;
+		border-radius: 6px;
+		font-weight: 600;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		align-self: flex-start;
+	}
 
-.mw-chip:hover:not(:disabled) {
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	border-color: var(--ifm-color-primary, #e0367c);
-}
+	.mw-field button[type="submit"]:disabled {
+		background: var(--color-text-tertiary);
+		cursor: not-allowed;
+	}
 
-.mw-chip:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	/* #endregion */
+
+	/* #region Preset chips */
+
+	/*
+	 * One line that scrolls, never a wrap. Twelve examples wrapped down five ragged rows (3/3/2/1/1/1) and took a
+	 * third of the panel; a scrolling row costs a fixed height whatever the number of examples. The scrollbar is
+	 * hidden because the row sits inside a floating panel where a track reads as chrome, and every chip stays
+	 * reachable by keyboard.
+	 */
+	.mw-presets {
+		margin-top: 0.75rem;
+		display: flex;
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		scrollbar-width: none;
+		gap: 0.4rem;
+		align-items: baseline;
+		padding-bottom: 0.15rem;
+	}
 
-/* #endregion */
+	.mw-presets::-webkit-scrollbar {
+		display: none;
+	}
 
-/* #region Generic button (copy / search) */
+	.mw-presets > * {
+		flex: 0 0 auto;
+	}
 
-.mw-btn {
-	font-size: 0.8rem;
-	padding: 0.25rem 0.55rem;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	color: var(--ifm-color-emphasis-800, #303846);
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 4px;
-	cursor: pointer;
-	font-family: inherit;
-}
+	.mw-chip {
+		white-space: nowrap;
+	}
 
-.mw-btn:hover:not(:disabled) {
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-}
+	.mw-presets__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		margin-right: 0.25rem;
+	}
 
-.mw-btn:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	.mw-chip {
+		font-size: 0.8rem;
+		padding: 0.25rem 0.55rem;
+		background: var(--control-background);
+		color: var(--color-text-primary);
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		font-weight: 500;
+		cursor: pointer;
+		font-family: inherit;
+	}
 
-/* #endregion */
+	.mw-chip:hover:not(:disabled) {
+		background: var(--color-background-sunken);
+		border-color: var(--color-accent);
+	}
 
-/* #region Result panel + errors */
+	.mw-chip:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-.mw-result {
-	margin-top: 1.5rem;
-}
+	/* #endregion */
 
-.mw-result__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0.75rem;
-}
+	/* #region Generic button (copy / search) */
 
-.mw-result__header h2 {
-	margin: 0;
-	font-size: 1.1rem;
-}
+	.mw-btn {
+		font-size: 0.8rem;
+		padding: 0.25rem 0.55rem;
+		background: var(--control-background);
+		color: var(--color-text-primary);
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		cursor: pointer;
+		font-family: inherit;
+	}
 
-.mw-panel__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0.4rem;
-}
+	.mw-btn:hover:not(:disabled) {
+		background: var(--color-background-sunken);
+	}
 
-.mw-panel__header h3 {
-	margin: 0;
-	font-size: 0.95rem;
-}
+	.mw-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-.mw-muted {
-	font-style: italic;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	/* #endregion */
 
-.mw-error {
-	color: var(--ifm-color-danger, #d9364c);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	white-space: pre-wrap;
-}
+	/* #region Result panel + errors */
 
-/* #endregion */
+	.mw-result {
+		margin-top: 1.5rem;
+	}
 
-/* #region KindBadge */
+	.mw-result__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
 
-.mw-kind {
-	margin-bottom: 0.5rem;
-	font-size: 0.9rem;
-}
+	.mw-result__header h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
 
-.mw-kind__summary {
-	cursor: pointer;
-	user-select: none;
-}
+	.mw-panel__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.4rem;
+	}
 
-.mw-kind__confidence {
-	opacity: 0.7;
-}
+	.mw-panel__header h3 {
+		margin: 0;
+		font-size: 0.95rem;
+	}
 
-.mw-kind__alternatives {
-	margin: 0.25rem 0 0 1rem;
-	padding: 0;
-	list-style: disc;
-}
+	.mw-muted {
+		font-style: italic;
+		color: var(--color-text-secondary);
+	}
 
-/* #endregion */
+	.mw-error {
+		color: var(--color-state-danger);
+		font-family: var(--font-family-code);
+		white-space: pre-wrap;
+	}
 
-/* #region POI subject panel */
+	/* #endregion */
 
-.mw-subject__row {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 0.5rem;
-}
+	/* #region KindBadge */
 
-.mw-subject__chip {
-	display: inline-block;
-	padding: 0.2rem 0.6rem;
-	border-radius: 999px;
-	background: var(--ifm-color-primary-contrast-background, rgba(224, 54, 124, 0.12));
-	color: var(--ifm-color-primary, #e0367c);
-	font-weight: 600;
-	font-size: 0.85rem;
-}
+	.mw-kind {
+		margin-bottom: 0.5rem;
+		font-size: 0.9rem;
+	}
 
-.mw-subject__badge {
-	display: inline-block;
-	padding: 0.2rem 0.5rem;
-	border-radius: 999px;
-	background: var(--ifm-color-warning-contrast-background, rgba(245, 158, 11, 0.15));
-	color: var(--ifm-color-warning-darkest, #92400e);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.02em;
-}
+	.mw-kind__summary {
+		cursor: pointer;
+		user-select: none;
+	}
 
-.mw-subject__badge--brand {
-	background: var(--ifm-color-info-contrast-background, rgba(84, 199, 236, 0.15));
-	color: var(--ifm-color-info-darkest, #14657d);
-}
+	.mw-kind__confidence {
+		opacity: 0.7;
+	}
 
-.mw-subject__qid {
-	display: inline-block;
-	padding: 0.2rem 0.5rem;
-	border-radius: 999px;
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	color: var(--ifm-color-emphasis-800, #303846);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-decoration: none;
-}
+	.mw-kind__alternatives {
+		margin: 0.25rem 0 0 1rem;
+		padding: 0;
+		list-style: disc;
+	}
 
-.mw-subject__qid:hover {
-	text-decoration: underline;
-}
+	/* #endregion */
 
-.mw-subject__note {
-	margin: 0 0 0.75rem;
-	font-size: 0.85rem;
-	opacity: 0.8;
-}
+	/* #region POI subject panel */
 
-.mw-subject__detail {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0.25rem 0.75rem;
-	margin: 0 0 0.75rem;
-	font-size: 0.9rem;
-}
+	.mw-subject__row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
 
-.mw-subject__detail dt {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-700, #4a5163);
-}
+	.mw-subject__chip {
+		display: inline-block;
+		padding: 0.2rem 0.6rem;
+		border-radius: 999px;
+		background: var(--color-accent-background);
+		color: var(--color-accent);
+		font-weight: 600;
+		font-size: 0.85rem;
+	}
 
-.mw-subject__detail dd {
-	margin: 0;
-}
+	.mw-subject__badge {
+		display: inline-block;
+		padding: 0.2rem 0.5rem;
+		border-radius: 999px;
+		background: var(--color-state-warning-background);
+		color: var(--color-state-warning);
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+	}
 
-/* #endregion */
+	.mw-subject__badge--brand {
+		background: var(--color-state-info-background);
+		color: var(--color-state-info);
+	}
 
-/* #region OverpassQL block */
+	.mw-subject__qid {
+		display: inline-block;
+		padding: 0.2rem 0.5rem;
+		border-radius: 999px;
+		background: var(--color-background-sunken);
+		color: var(--color-text-primary);
+		font-family: var(--font-family-code);
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-decoration: none;
+	}
 
-.mw-overpass {
-	margin-top: 0.75rem;
-}
+	.mw-subject__qid:hover {
+		text-decoration: underline;
+	}
 
-.mw-overpass__code {
-	margin: 0;
-	padding: 0.75rem;
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.85rem;
-	white-space: pre-wrap;
-	overflow-x: auto;
-}
+	.mw-subject__note {
+		margin: 0 0 0.75rem;
+		font-size: 0.85rem;
+		opacity: 0.8;
+	}
 
-/* #endregion */
+	.mw-subject__detail {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.25rem 0.75rem;
+		margin: 0 0 0.75rem;
+		font-size: 0.9rem;
+	}
 
-/* #region Live results */
+	.mw-subject__detail dt {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+	}
 
-.mw-live {
-	margin-top: 1rem;
-}
+	.mw-subject__detail dd {
+		margin: 0;
+	}
 
-.mw-live__caption {
-	margin: 0 0 0.4rem;
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	/* #endregion */
 
-.mw-live__results {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-}
+	/* #region OverpassQL block */
 
-.mw-live__results li {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
-	gap: 0.75rem;
-	padding: 0.4rem 0.6rem;
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	font-size: 0.9rem;
-}
+	.mw-overpass {
+		margin-top: 0.75rem;
+	}
 
-.mw-live__name {
-	font-weight: 600;
-}
+	.mw-overpass__code {
+		margin: 0;
+		padding: 0.75rem;
+		border-radius: 6px;
+		background: var(--control-background);
+		font-family: var(--font-family-code);
+		font-size: 0.85rem;
+		white-space: pre-wrap;
+		overflow-x: auto;
+	}
 
-.mw-live__meta {
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-size: 0.8rem;
-	white-space: nowrap;
-}
+	/* #endregion */
 
-/* #endregion */
+	/* #region Live results */
 
-/* #region Component table */
+	.mw-live {
+		margin-top: 1rem;
+	}
 
-.mw-components {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 0.75rem 0;
-	font-size: 0.9rem;
-}
+	.mw-live__caption {
+		margin: 0 0 0.4rem;
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+	}
 
-.mw-components th,
-.mw-components td {
-	padding: 0.4rem 0.6rem;
-	text-align: left;
-	border-bottom: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-}
+	.mw-live__results {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
 
-.mw-components th {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-size: 0.8rem;
-	text-transform: uppercase;
-}
+	.mw-live__results li {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 0.75rem;
+		padding: 0.4rem 0.6rem;
+		border-radius: 6px;
+		background: var(--control-background);
+		font-size: 0.9rem;
+	}
 
-/* #endregion */
+	.mw-live__name {
+		font-weight: 600;
+	}
 
-/* #region Confidence cell */
+	.mw-live__meta {
+		color: var(--color-text-secondary);
+		font-size: 0.8rem;
+		white-space: nowrap;
+	}
 
-.mw-conf__dash {
-	color: var(--ifm-color-emphasis-500, #8c8c8c);
-}
+	/* #endregion */
 
-.mw-conf {
-	display: flex;
-	align-items: center;
-	gap: 0.35rem;
-	min-width: 80px;
-}
+	/* #region Component table */
 
-.mw-conf__bar {
-	height: 6px;
-	border-radius: 3px;
-	min-width: 4px;
-	transition: width 0.2s ease;
-}
+	.mw-components {
+		width: 100%;
+		border-collapse: collapse;
+		margin: 0.75rem 0;
+		font-size: 0.9rem;
+	}
 
-.mw-conf__bar--high {
-	background: #22c55e;
-}
+	.mw-components th,
+	.mw-components td {
+		padding: 0.4rem 0.6rem;
+		text-align: left;
+		border-bottom: 1px solid var(--color-separator);
+	}
 
-.mw-conf__bar--mid {
-	background: #f59e0b;
-}
+	.mw-components th {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		font-size: 0.8rem;
+		text-transform: uppercase;
+	}
 
-.mw-conf__bar--low {
-	background: #ef4444;
-}
+	/* #endregion */
 
-.mw-conf__value {
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.8rem;
-}
+	/* #region Confidence cell */
 
-/* #endregion */
+	.mw-conf__dash {
+		color: var(--color-text-tertiary);
+	}
 
-/* #region Resolved place */
+	.mw-conf {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		min-width: 80px;
+	}
 
-.mw-resolved {
-	margin-top: 1rem;
-	padding: 0.75rem;
-	border: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-0, #fff);
-}
+	.mw-conf__bar {
+		height: 6px;
+		border-radius: 3px;
+		min-width: 4px;
+		transition: width 0.2s ease;
+	}
 
-.mw-resolved h2 {
-	margin: 0 0 0.5rem;
-	font-size: 1rem;
-}
+	.mw-conf__bar--high {
+		background: #22c55e;
+	}
 
-.mw-resolved dl {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0.25rem 0.75rem;
-	margin: 0;
-}
+	.mw-conf__bar--mid {
+		background: #f59e0b;
+	}
 
-.mw-resolved dt {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-700, #4a5163);
-}
+	.mw-conf__bar--low {
+		background: #ef4444;
+	}
 
-.mw-resolved dd {
-	margin: 0;
-}
+	.mw-conf__value {
+		font-family: var(--font-family-code);
+		font-size: 0.8rem;
+	}
 
-.mw-resolved__dual {
-	margin: 0.5rem 0 0;
-	padding: 0.4rem 0.6rem;
-	border-radius: 6px;
-	background: var(--ifm-color-info-contrast-background, rgba(54, 122, 246, 0.1));
-	font-size: 0.9rem;
-}
+	/* #endregion */
 
-/* #endregion */
+	/* #region Resolved place */
 
-/* #region Candidate picker */
+	.mw-resolved {
+		margin-top: 1rem;
+		padding: 0.75rem;
+		border: 1px solid var(--color-separator);
+		border-radius: 6px;
+		background: var(--color-background-canvas);
+	}
 
-.mw-candidates {
-	margin-top: 1rem;
-}
+	.mw-resolved h2 {
+		margin: 0 0 0.5rem;
+		font-size: 1rem;
+	}
 
-.mw-candidates h2 {
-	font-size: 1rem;
-	margin: 0 0 0.5rem;
-}
+	.mw-resolved dl {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.25rem 0.75rem;
+		margin: 0;
+	}
 
-.mw-candidates__list {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-}
+	.mw-resolved dt {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+	}
 
-.mw-candidates__btn {
-	display: flex;
-	align-items: baseline;
-	gap: 0.6rem;
-	width: 100%;
-	text-align: left;
-	padding: 0.4rem 0.6rem;
-	border: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-radius: 6px;
-	background: transparent;
-	cursor: pointer;
-	font: inherit;
-}
+	.mw-resolved dd {
+		margin: 0;
+	}
 
-.mw-candidates__btn--active {
-	border-color: var(--ifm-color-primary, #e0367c);
-	background: var(--ifm-color-primary-contrast-background, rgba(224, 54, 124, 0.1));
-}
+	.mw-resolved__dual {
+		margin: 0.5rem 0 0;
+		padding: 0.4rem 0.6rem;
+		border-radius: 6px;
+		background: var(--color-state-info-background);
+		font-size: 0.9rem;
+	}
 
-.mw-candidates__rank {
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.8rem;
-	opacity: 0.6;
-}
+	/* #endregion */
 
-.mw-candidates__name {
-	font-weight: 600;
-}
+	/* #region Candidate picker */
 
-.mw-candidates__meta {
-	margin-left: auto;
-	font-size: 0.8rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	.mw-candidates {
+		margin-top: 1rem;
+	}
 
-/* #endregion */
+	.mw-candidates h2 {
+		font-size: 1rem;
+		margin: 0 0 0.5rem;
+	}
 
-/* #region LoadingIndicator */
+	.mw-candidates__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
 
-.mw-loading {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 0.75rem;
-	padding: 1.5rem;
-}
+	.mw-candidates__btn {
+		display: flex;
+		align-items: baseline;
+		gap: 0.6rem;
+		width: 100%;
+		text-align: left;
+		padding: 0.4rem 0.6rem;
+		border: 1px solid var(--color-separator);
+		border-radius: var(--radius-control);
+		background: var(--control-background);
+		color: var(--color-text-primary);
+		cursor: pointer;
+		font: inherit;
+	}
 
-.mw-loading__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	text-align: center;
-}
+	.mw-candidates__btn:hover:not(:disabled) {
+		background: var(--control-background-pressed);
+		border-color: var(--control-border);
+	}
 
-.mw-pulse {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	width: 100%;
-	max-width: 320px;
-}
+	.mw-candidates__btn:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
 
-.mw-pulse__bar {
-	height: 0.75rem;
-	border-radius: 4px;
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	animation: mw-pulse-fade 1.4s ease-in-out infinite;
-}
+	.mw-candidates__btn--active {
+		border-color: var(--color-accent);
+		background: var(--color-accent-background);
+	}
 
-.mw-pulse__bar:nth-child(1) {
-	animation-delay: 0s;
-}
-.mw-pulse__bar:nth-child(2) {
-	animation-delay: 0.15s;
-}
-.mw-pulse__bar:nth-child(3) {
-	animation-delay: 0.3s;
-}
-.mw-pulse__bar:nth-child(4) {
-	animation-delay: 0.45s;
-}
-.mw-pulse__bar:nth-child(5) {
-	animation-delay: 0.6s;
-}
-.mw-pulse__bar:nth-child(odd) {
-	width: 100%;
-}
-.mw-pulse__bar:nth-child(even) {
-	width: 72%;
-}
+	/* Tertiary, not translucent: an opacity here also fades the text under it toward the pane behind the sheet. */
+	.mw-candidates__rank {
+		font-family: var(--font-family-code);
+		font-size: var(--font-size-caption);
+		color: var(--color-text-tertiary);
+	}
 
-@keyframes mw-pulse-fade {
-	0%,
-	100% {
-		opacity: 0.35;
+	.mw-candidates__name {
+		font-weight: 600;
 	}
-	50% {
-		opacity: 1;
+
+	.mw-candidates__meta {
+		margin-left: auto;
+		font-size: 0.8rem;
+		color: var(--color-text-secondary);
 	}
-}
 
-.mw-spinner {
-	width: 2rem;
-	height: 2rem;
-	border: 3px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-top-color: var(--ifm-color-primary, #e0367c);
-	border-radius: 50%;
-	animation: mw-spin 0.7s linear infinite;
-}
+	/* #endregion */
 
-.mw-spinner--small {
-	width: 1.25rem;
-	height: 1.25rem;
-	border-width: 2px;
-}
+	/* #region LoadingIndicator */
 
-.mw-spinner--large {
-	width: 3rem;
-	height: 3rem;
-	border-width: 4px;
-}
+	.mw-loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 1.5rem;
+	}
 
-@keyframes mw-spin {
-	to {
-		transform: rotate(360deg);
+	.mw-loading__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		font-family: var(--font-family-code);
+		text-align: center;
 	}
-}
 
-.mw-staged {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	width: 100%;
-	max-width: 360px;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
+	.mw-pulse {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 320px;
+	}
 
-.mw-staged__step {
-	display: flex;
-	align-items: center;
-	gap: 0.6rem;
-	padding: 0.4rem 0.6rem;
-	border-radius: 4px;
-	font-size: 0.85rem;
-	transition:
-		background 0.3s,
-		color 0.3s;
-}
+	.mw-pulse__bar {
+		height: 0.75rem;
+		border-radius: 4px;
+		background: var(--color-background-sunken);
+		animation: mw-pulse-fade 1.4s ease-in-out infinite;
+	}
 
-.mw-staged__step--pending {
-	color: var(--ifm-color-emphasis-500, #8c8c8c);
-}
+	.mw-pulse__bar:nth-child(1) {
+		animation-delay: 0s;
+	}
+	.mw-pulse__bar:nth-child(2) {
+		animation-delay: 0.15s;
+	}
+	.mw-pulse__bar:nth-child(3) {
+		animation-delay: 0.3s;
+	}
+	.mw-pulse__bar:nth-child(4) {
+		animation-delay: 0.45s;
+	}
+	.mw-pulse__bar:nth-child(5) {
+		animation-delay: 0.6s;
+	}
+	.mw-pulse__bar:nth-child(odd) {
+		width: 100%;
+	}
+	.mw-pulse__bar:nth-child(even) {
+		width: 72%;
+	}
 
-.mw-staged__step--active {
-	color: var(--ifm-color-primary, #e0367c);
-	background: color-mix(in srgb, var(--ifm-color-primary, #e0367c) 8%, transparent);
-	font-weight: 600;
-}
+	@keyframes mw-pulse-fade {
+		0%,
+		100% {
+			opacity: 0.35;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
 
-.mw-staged__step--complete {
-	color: var(--ifm-color-success, #1aa84d);
-}
+	.mw-spinner {
+		width: 2rem;
+		height: 2rem;
+		border: 3px solid var(--color-separator);
+		border-top-color: var(--color-accent);
+		border-radius: 50%;
+		animation: mw-spin 0.7s linear infinite;
+	}
 
-.mw-staged__icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 1.25rem;
-	height: 1.25rem;
-	flex-shrink: 0;
-}
+	.mw-spinner--small {
+		width: 1.25rem;
+		height: 1.25rem;
+		border-width: 2px;
+	}
 
-.mw-staged__dot {
-	width: 0.55rem;
-	height: 0.55rem;
-	border-radius: 50%;
-	background: var(--ifm-color-primary, #e0367c);
-	animation: mw-pulse-dot 1s ease-in-out infinite;
-}
+	.mw-spinner--large {
+		width: 3rem;
+		height: 3rem;
+		border-width: 4px;
+	}
 
-@keyframes mw-pulse-dot {
-	0%,
-	100% {
-		opacity: 0.3;
-		transform: scale(0.8);
+	@keyframes mw-spin {
+		to {
+			transform: rotate(360deg);
+		}
 	}
-	50% {
-		opacity: 1;
-		transform: scale(1.2);
+
+	.mw-staged {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 360px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
 	}
-}
 
-.mw-staged__check {
-	width: 1rem;
-	height: 1rem;
-	position: relative;
-}
+	.mw-staged__step {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.4rem 0.6rem;
+		border-radius: 4px;
+		font-size: 0.85rem;
+		transition:
+			background 0.3s,
+			color 0.3s;
+	}
 
-.mw-staged__check::before {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 25%;
-	width: 0.35rem;
-	height: 0.65rem;
-	border: solid var(--ifm-color-success, #1aa84d);
-	border-width: 0 2px 2px 0;
-	transform: translateY(-60%) rotate(45deg);
-}
+	.mw-staged__step--pending {
+		color: var(--color-text-tertiary);
+	}
 
-/* #endregion */
+	.mw-staged__step--active {
+		color: var(--color-accent);
+		background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+		font-weight: 600;
+	}
 
-/* #region Demo map (react-map-gl/maplibre shell) */
+	.mw-staged__step--complete {
+		color: var(--color-state-success);
+	}
 
-/*
- * The <DemoMap> wrapper. Sizing is the host's call (pass `style`/`className`), but a min-height keeps
+	.mw-staged__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		flex-shrink: 0;
+	}
+
+	.mw-staged__dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 50%;
+		background: var(--color-accent);
+		animation: mw-pulse-dot 1s ease-in-out infinite;
+	}
+
+	@keyframes mw-pulse-dot {
+		0%,
+		100% {
+			opacity: 0.3;
+			transform: scale(0.8);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+	}
+
+	.mw-staged__check {
+		width: 1rem;
+		height: 1rem;
+		position: relative;
+	}
+
+	.mw-staged__check::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 25%;
+		width: 0.35rem;
+		height: 0.65rem;
+		border: solid var(--color-state-success);
+		border-width: 0 2px 2px 0;
+		transform: translateY(-60%) rotate(45deg);
+	}
+
+	/* #endregion */
+
+	/* #region Demo map (react-map-gl/maplibre shell) */
+
+	/*
+ * The <MapCanvas> wrapper. Sizing is the host's call (pass `style`/`className`), but a min-height keeps
  * the map from collapsing to zero when a consumer forgets. The inner <Map> fills 100% of this box.
  * The host must ALSO import `maplibre-gl/dist/maplibre-gl.css` for the map's own control/canvas styles.
  */
-.mw-demo-map {
-	position: relative;
-	width: 100%;
-	min-height: 320px;
-	overflow: hidden;
-}
+	.mw-demo-map {
+		position: relative;
+		width: 100%;
+		min-height: 320px;
+		overflow: hidden;
+	}
 
-/*
+	/*
  * The demo fills its positioning context; the host sizes it (a full-viewport wrapper in docs). The map is the
  * background layer, the control panel floats over the top-left (bottom on narrow screens). A host that wants a
  * different layout can restyle these classes without touching the components.
  */
-.mw-geocoder-demo {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-height: 480px;
-}
-
-.mw-geocoder-demo__map {
-	position: absolute;
-	inset: 0;
-}
+	.mw-geocoder-demo {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: 480px;
+	}
 
-.mw-demo-controls {
-	position: absolute;
-	top: 1rem;
-	left: 1rem;
-	z-index: 2;
-	width: min(360px, calc(100% - 2rem));
-	max-height: calc(100% - 2rem);
-	overflow-y: auto;
-	padding: 1rem;
-	border-radius: 10px;
-	background: color-mix(in srgb, var(--ifm-background-surface-color, #fff) 92%, transparent);
-	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
-	font-size: 0.95rem;
-}
+	.mw-geocoder-demo__map {
+		position: absolute;
+		inset: 0;
+	}
 
-@media (max-width: 600px) {
 	.mw-demo-controls {
-		top: auto;
-		bottom: 1rem;
+		position: absolute;
+		top: 1rem;
 		left: 1rem;
-		right: 1rem;
-		width: auto;
+		z-index: 2;
+		width: min(360px, calc(100% - 2rem));
+		max-height: calc(100% - 2rem);
+		overflow-y: auto;
+		padding: 1rem;
+		border-radius: 10px;
+		background: color-mix(in srgb, var(--color-background-raised) 92%, transparent);
+		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
+		font-size: 0.95rem;
 	}
-}
 
-/* #endregion */
+	@media (max-width: 600px) {
+		.mw-demo-controls {
+			top: auto;
+			bottom: 1rem;
+			left: 1rem;
+			right: 1rem;
+			width: auto;
+		}
+	}
 
-/* #region Demo control field (version / compare-version selects) */
+	/* #endregion */
 
-.mw-demo-control {
-	margin-bottom: 0.75rem;
-}
+	/* #region Demo control field (version / compare-version selects) */
 
-.mw-demo-control__label {
-	display: block;
-	margin-bottom: 0.25rem;
-	font-weight: 600;
-	font-size: 0.9rem;
-}
+	.mw-demo-control {
+		display: grid;
+		gap: 0.3rem;
+		width: 100%;
+	}
 
-.mw-demo-control__select {
-	width: 100%;
-	padding: 0.4rem;
-	font: inherit;
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 6px;
-	background: var(--ifm-background-surface-color, #fff);
-	color: var(--ifm-font-color-base, inherit);
-}
+	.mw-demo-control__label {
+		display: block;
+		font-weight: var(--font-weight-medium);
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-secondary);
+	}
 
-.mw-demo-control__select:disabled {
-	opacity: 0.5;
-}
+	.mw-demo-control__select {
+		width: 100%;
+		padding: 0.4rem;
+		font: inherit;
+		border: 1px solid var(--control-border);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		color: var(--color-text-primary);
+	}
 
-/* #endregion */
+	.mw-demo-control__select:disabled {
+		opacity: 0.5;
+	}
 
-/* #region Backend indicator + WASM toggle / compare toggle */
+	/* #endregion */
 
-.mw-demo-backend,
-.mw-demo-compare {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-	flex-wrap: wrap;
-	margin-bottom: 0.75rem;
-	font-size: 0.85rem;
-}
+	/* #region Backend indicator + WASM toggle / compare toggle */
 
-.mw-demo-compare {
-	display: block;
-}
+	/* Stacked, because both controls now sit in a sheet row where a label sits over its control, not beside it. */
+	.mw-demo-backend,
+	.mw-demo-compare {
+		display: grid;
+		gap: 0.35rem;
+		justify-items: start;
+		font-size: var(--font-size-footnote);
+	}
 
-.mw-demo-backend__active {
-	opacity: 0.7;
-}
+	.mw-demo-backend__active {
+		color: var(--color-text-tertiary);
+		font-size: var(--font-size-caption);
+	}
 
-.mw-demo-backend__toggle,
-.mw-demo-compare__toggle {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25rem;
-	cursor: pointer;
-	opacity: 0.8;
-}
+	.mw-demo-backend__toggle,
+	.mw-demo-compare__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
 
-.mw-demo-compare__toggle {
-	margin-bottom: 0.5rem;
-}
+	.mw-demo-compare__status {
+		margin: 0.25rem 0 0;
+		font-size: 0.8rem;
+		color: var(--color-text-secondary);
+	}
 
-.mw-demo-compare__status {
-	margin: 0.25rem 0 0;
-	font-size: 0.8rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	/* #endregion */
 
-/* #endregion */
+	/* #region Place autocomplete listbox (reuses .mw-chip) */
 
-/* #region Place autocomplete listbox (reuses .mw-chip) */
+	.mw-demo-suggest {
+		margin-top: 0.75rem;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+		align-items: baseline;
+	}
 
-.mw-demo-suggest {
-	margin-top: 0.75rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.4rem;
-	align-items: baseline;
-}
+	.mw-demo-suggest__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		margin-right: 0.25rem;
+	}
 
-.mw-demo-suggest__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	margin-right: 0.25rem;
-}
+	.mw-chip--active {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 1px;
+	}
+
+	/* #endregion */
+
+	/* #region Span ribbon (SpanHighlight) — each tagged span is a column: the text on top, tinted by tier, the tag beneath */
+
+	.mw-spans {
+		margin: 0.5rem 0 1rem 0;
+	}
+
+	.mw-spans__legend {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.5rem;
+	}
+
+	.mw-spans__swatch {
+		display: inline-block;
+		width: 0.8rem;
+		height: 0.8rem;
+		border-radius: 2px;
+		margin-left: 0.4rem;
+	}
+
+	.mw-spans__track {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		row-gap: 1.5rem;
+		padding: 0.5rem 0.6rem;
+		border: 1px solid var(--color-separator);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		font-family: var(--font-family-code);
+		font-size: 0.9rem;
+		line-height: 1.4;
+	}
+
+	.mw-spans__seg {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.mw-spans__text {
+		padding: 0.05rem 0.1rem;
+		border-bottom: 2px solid transparent;
+		white-space: pre;
+	}
+
+	.mw-spans__tag {
+		margin-top: 0.15rem;
+		font-size: 0.6rem;
+		line-height: 1;
+		text-align: center;
+		letter-spacing: 0.02em;
+		color: var(--color-text-secondary);
+		white-space: nowrap;
+	}
+
+	.mw-spans__gap {
+		display: inline-flex;
+		align-items: flex-start;
+		white-space: pre;
+		color: var(--color-text-tertiary);
+	}
+
+	/* The tier tints match .mw-conf__bar--high/--mid/--low. */
+	.mw-spans__seg--high .mw-spans__text {
+		background: rgba(26, 168, 77, 0.18);
+		border-bottom-color: #1aa84d;
+	}
+
+	.mw-spans__seg--mid .mw-spans__text {
+		background: rgba(230, 168, 0, 0.18);
+		border-bottom-color: #e6a800;
+	}
+
+	.mw-spans__seg--low .mw-spans__text {
+		background: rgba(216, 80, 74, 0.18);
+		border-bottom-color: #d8504a;
+	}
+
+	.mw-spans__swatch--high {
+		background: #1aa84d;
+	}
+
+	.mw-spans__swatch--mid {
+		background: #e6a800;
+	}
+
+	.mw-spans__swatch--low {
+		background: #d8504a;
+	}
+
+	/* #endregion */
+
+	/* #region Stage timing (TimingPanel) — a stacked bar by wall-clock, stage hues, never the confidence colours */
+
+	.mw-timing {
+		margin: 1rem 0;
+		font-size: 0.8rem;
+	}
+
+	.mw-timing__heading {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.35rem;
+	}
+
+	.mw-timing__total {
+		font-family: var(--font-family-code);
+		text-transform: none;
+		letter-spacing: 0;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__bar {
+		display: flex;
+		width: 100%;
+		height: 0.7rem;
+		border-radius: 4px;
+		overflow: hidden;
+		background: var(--color-background-sunken);
+	}
+
+	.mw-timing__seg {
+		height: 100%;
+	}
+
+	.mw-timing__legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem 1rem;
+		margin-top: 0.4rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.mw-timing__ms {
+		font-family: var(--font-family-code);
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__swatch {
+		display: inline-block;
+		width: 0.7rem;
+		height: 0.7rem;
+		border-radius: 2px;
+	}
+
+	.mw-timing__seg--shape {
+		background: #3578e5;
+	}
+
+	.mw-timing__seg--classify {
+		background: #8b5cf6;
+	}
+
+	.mw-timing__seg--resolve {
+		background: #14b8a6;
+	}
+
+	/* #endregion */
+
+	/* #region Containment tree (TreeView) — nested lists with a guide rail per level */
+
+	.mw-tree {
+		margin: 0.5rem 0 0 0;
+	}
+
+	.mw-tree__children {
+		list-style: none;
+		margin: 0;
+		padding-left: 1.1rem;
+	}
+
+	/* Nested levels get a guide rail; the outermost list sits flush. */
+	.mw-tree__children .mw-tree__children {
+		border-left: 1px solid var(--control-border);
+		margin-left: 0.3rem;
+	}
+
+	.mw-tree__node {
+		margin: 0.15rem 0;
+	}
+
+	.mw-tree__row {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-size: 0.85rem;
+	}
+
+	.mw-tree__tag {
+		font-weight: 600;
+		padding: 0 0.3rem;
+		border-radius: 3px;
+		border-bottom: 2px solid transparent;
+	}
+
+	.mw-tree__value {
+		font-family: var(--font-family-code);
+	}
+
+	.mw-tree__conf {
+		font-family: var(--font-family-code);
+		font-size: 0.75rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-tree__tag--high {
+		background: rgba(26, 168, 77, 0.18);
+		border-bottom-color: #1aa84d;
+	}
+
+	.mw-tree__tag--mid {
+		background: rgba(230, 168, 0, 0.18);
+		border-bottom-color: #e6a800;
+	}
+
+	.mw-tree__tag--low {
+		background: rgba(216, 80, 74, 0.18);
+		border-bottom-color: #d8504a;
+	}
+
+	/* #endregion */
+
+	/* #region No-hit diagnostic (FailureDiagnostic) — a structured panel, tinted informational rather than red */
+
+	.mw-failure {
+		margin-top: 1rem;
+		padding: 0.75rem 1rem;
+		background: var(--color-state-warning-background);
+		border-left: 3px solid var(--color-state-warning);
+		border-radius: 4px;
+	}
+
+	.mw-failure h2 {
+		font-size: 1rem;
+		margin: 0 0 0.5rem 0;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-state-warning);
+	}
+
+	.mw-failure ul {
+		margin: 0;
+		padding-left: 1.25rem;
+		font-size: 0.875rem;
+		color: var(--color-text-primary);
+	}
+
+	.mw-failure li + li {
+		margin-top: 0.35rem;
+	}
+
+	/* #endregion */
+
+	/* #region About box (About) — the collapsible product explainer */
+
+	.mw-about {
+		margin-bottom: 1rem;
+		border: 1px solid var(--control-border);
+		border-radius: 8px;
+		background: var(--color-background-raised);
+		font-size: 0.9rem;
+	}
+
+	.mw-about[open] {
+		background: var(--color-background-canvas);
+	}
+
+	.mw-about__summary {
+		padding: 0.65rem 0.75rem;
+		cursor: pointer;
+		user-select: none;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		border-radius: 8px;
+	}
+
+	.mw-about__summary:hover {
+		background: var(--control-background);
+	}
+
+	.mw-about__icon {
+		font-size: 1.1rem;
+		opacity: 0.7;
+	}
+
+	.mw-about__body {
+		padding: 0 0.75rem 0.75rem;
+	}
+
+	.mw-about__section {
+		margin-top: 0.75rem;
+	}
+
+	.mw-about__section:first-child {
+		margin-top: 0;
+	}
+
+	.mw-about__heading {
+		font-size: 0.9rem;
+		font-weight: 700;
+		margin: 0 0 0.3rem;
+		color: var(--color-text-primary);
+	}
+
+	.mw-about__section p {
+		margin: 0;
+		line-height: 1.6;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-about__section code {
+		font-size: 0.85rem;
+		padding: 0.1rem 0.3rem;
+		background: var(--color-background-sunken);
+		border-radius: 3px;
+	}
+
+	.mw-about__legend {
+		list-style: none;
+		margin: 0.5rem 0 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+
+	.mw-about__item {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 0.85rem;
+	}
+
+	.mw-about__swatch {
+		flex-shrink: 0;
+		width: 10px;
+		height: 10px;
+		border-radius: 2px;
+	}
+
+	.mw-about__swatch--high {
+		background: #22c55e;
+	}
+
+	.mw-about__swatch--mid {
+		background: #f59e0b;
+	}
+
+	.mw-about__swatch--low {
+		background: #ef4444;
+	}
+
+	/* #endregion */
+
+	/* #region Developer disclosure */
+
+	/*
+	 * The expert set lives here, below the result rather than above the address field. A hairline and a quieter
+	 * summary keep it legible without competing with the query, which is what the panel is for.
+	 */
+	.mw-demo-developer {
+		margin-top: 1rem;
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--color-separator);
+	}
+
+	.mw-demo-developer > summary {
+		cursor: pointer;
+		user-select: none;
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text-secondary);
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+	}
+
+	.mw-demo-developer > summary:hover {
+		color: var(--color-text-primary);
+	}
+
+	.mw-demo-developer[open] > summary {
+		margin-bottom: 0.75rem;
+	}
+
+	/* #endregion */
+
+	/* #region Chrome layout — where the floating pieces sit over a map */
+
+	/*
+	 * The search pill and the chips ride at the top, centred and width-capped rather than stretched: a search field
+	 * the width of a desktop screen reads as a page header, not as a control over a map. The column clears the
+	 * device's top and side safe-area insets because both apps install as PWAs.
+	 */
+	.mw-map-chrome--top {
+		position: absolute;
+		top: calc(1rem + var(--safe-area-top));
+		left: calc(1rem + var(--safe-area-left));
+		right: calc(1rem + var(--safe-area-right));
+		z-index: 3;
+		display: grid;
+		gap: 0.5rem;
+		justify-items: stretch;
+		max-width: 34rem;
+		pointer-events: none;
+	}
+
+	/* The container is click-through so the map stays draggable between the controls; each control takes its own. */
+	.mw-map-chrome--top > * {
+		pointer-events: auto;
+	}
+
+	.mw-map-chrome__search {
+		margin: 0;
+	}
+
+	.mw-map-searchbar__clear {
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		font: inherit;
+		line-height: 1;
+		padding: 0 0.15rem;
+	}
+
+	/*
+	 * A sheet: the glass surface a result or a panel arrives on. The bottom one rises over the map's lower edge with
+	 * a drag handle, the side one sits under the control column it belongs to.
+	 */
+	.mw-map-sheet {
+		position: absolute;
+		z-index: 3;
+		/*
+		 * `max-height` measures the CONTENT box by default, so a sheet with 1rem of padding stood 34px taller than its
+		 * cap and ran past the bottom of the screen. Every height here is meant as the whole box.
+		 */
+		box-sizing: border-box;
+		box-shadow: var(--material-glass-shadow);
+		overflow: auto;
+		overscroll-behavior: contain;
+	}
+
+	.mw-map-sheet--bottom {
+		left: calc(1rem + var(--safe-area-left));
+		right: calc(1rem + var(--safe-area-right));
+		bottom: calc(2.5rem + var(--safe-area-bottom));
+		max-height: 52vh;
+		max-width: 34rem;
+		padding: 0.5rem 1rem 1rem;
+		border-radius: var(--radius-sheet);
+	}
+
+	/*
+	 * BESIDE the control column, not below it. Opening below meant the sheet's top depended on how many controls the
+	 * capsule held, and every app that added one covered the button that opened it. Beside, it clears the column
+	 * whatever it holds: 2.5rem of control plus its inset and a gap.
+	 */
+	.mw-map-sheet--side {
+		top: calc(1rem + var(--safe-area-top));
+		right: calc(4rem + var(--safe-area-right));
+		width: min(24rem, calc(100vw - 6rem));
+		/*
+		 * Measured against the VIEWPORT, not the containing block: the map wrapper is taller than the window on a page
+		 * that scrolls, and a percentage there let the sheet run past the bottom of the screen.
+		 */
+		max-height: calc(100dvh - 2rem - var(--map-footer-height) - var(--safe-area-top) - var(--safe-area-bottom));
+		padding: 1rem;
+		border-radius: var(--radius-panel);
+		/* Above the result sheet: a panel is a different task, and it covers the answer rather than sharing an edge. */
+		z-index: 5;
+	}
+
+	/*
+	 * A sheet's own furniture: a title, then rows separated by hairlines, then the small print. Without these a sheet
+	 * is a stack of raw form controls behind glass, which reads as a debug panel rather than as part of the app.
+	 */
+	/*
+	 * The title and its close button ride together and stay put while the body scrolls. The close is not decoration:
+	 * on a phone the sheet is the whole panel and covers the control that opened it, so this is the only way out.
+	 */
+	.mw-map-sheet__header {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin: -1rem -1rem 0.75rem;
+		padding: 0.75rem 1rem;
+		background: var(--material-glass-fallback-background);
+		border-bottom: 1px solid var(--color-separator);
+	}
+
+	.mw-map-sheet__title {
+		margin: 0;
+		font-family: var(--font-family-display);
+		font-size: var(--font-size-headline);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-sheet__close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+		width: 1.75rem;
+		height: 1.75rem;
+		font-size: 1.15rem;
+		line-height: 1;
+		color: var(--color-text-secondary);
+		background: transparent;
+		border: 0;
+		border-radius: var(--radius-pill);
+		cursor: pointer;
+	}
+
+	.mw-map-sheet__close:hover {
+		color: var(--color-text-primary);
+		background: var(--control-background);
+	}
+
+	.mw-map-sheet__close:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	.mw-map-sheet__row {
+		display: grid;
+		gap: 0.3rem;
+		padding: 0.7rem 0;
+		border-top: 1px solid var(--color-separator);
+	}
+
+	.mw-map-sheet__row:first-of-type {
+		border-top: 0;
+		padding-top: 0;
+	}
+
+	.mw-map-sheet__label {
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text-secondary);
+	}
+
+	.mw-map-sheet__hint {
+		margin: 0;
+		font-size: var(--font-size-caption);
+		color: var(--color-text-tertiary);
+	}
+
+	/* An intro paragraph is not a row, so it carries its own space before the first hairline. */
+	.mw-map-sheet > .mw-map-sheet__hint {
+		margin-bottom: 0.75rem;
+	}
+
+	/* A value in a row reads at the row's size; the browser's default `code` is a step larger than the label above it. */
+	.mw-map-sheet__row code {
+		font-family: var(--font-family-code);
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-primary);
+	}
+
+	/* A checkbox and its words are one target, and the words sit beside the box rather than under it. */
+	.mw-map-sheet__check {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		cursor: pointer;
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-sheet__check input[type="checkbox"] {
+		margin: 0;
+		accent-color: var(--color-accent);
+		cursor: pointer;
+	}
+
+	/* Every form control in a sheet takes the app's type and the control palette, never the browser's defaults. */
+	.mw-map-sheet select,
+	.mw-map-sheet input[type="text"],
+	.mw-map-sheet input[type="search"] {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0.4rem 0.55rem;
+		font: inherit;
+		font-size: var(--font-size-footnote);
+		color: var(--control-foreground);
+		background: var(--control-background);
+		border: 1px solid var(--control-border);
+		border-radius: var(--radius-control);
+	}
+
+	.mw-map-sheet select:focus-visible,
+	.mw-map-sheet input:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* The grab affordance the reference sheets carry. Decorative: the sheet scrolls, it does not drag. */
+	.mw-map-sheet__handle {
+		width: 2.25rem;
+		height: 0.25rem;
+		margin: 0 auto 0.6rem;
+		border-radius: var(--radius-pill);
+		background: var(--color-separator);
+	}
+
+	.mw-map-sheet__actions {
+		margin-top: 0.75rem;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	/*
+	 * On a phone the chrome spans the width and the sheet becomes a true bottom sheet against the edge, which is what
+	 * leaves the map its full height.
+	 */
+	/*
+	 * The phone layout. The map keeps the whole screen and every floating piece is measured against the footer strip,
+	 * whose height is `--map-footer-height` plus the safe-area inset: a sheet that ends at the screen's edge hides its
+	 * own last rows behind the credits.
+	 *
+	 * A RESULT is a bottom sheet, because it answers the query in the field above it and both stay in view. A SIDE
+	 * sheet is the whole panel, because it is a different task — layers, settings, the explainer — and a phone has no
+	 * room to hold it beside anything. That also settles the overlap: the panel covers the result rather than sharing
+	 * an edge with it.
+	 */
+	@media (max-width: 600px) {
+		/*
+		 * The column spans the width, so it has to stop short of the control capsule in the same corner — 2.5rem of
+		 * control plus its 1rem inset plus a 0.5rem gap. Without this the capsule sits on the search pill's clear
+		 * button, which is the one control at that end of the pill.
+		 */
+		.mw-map-chrome--top {
+			max-width: none;
+			right: calc(4rem + var(--safe-area-right));
+		}
+
+		.mw-map-sheet--bottom {
+			left: 0;
+			right: 0;
+			bottom: calc(var(--map-footer-height) + var(--safe-area-bottom));
+			max-width: none;
+			max-height: 55dvh;
+			border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
+			border-inline: 0;
+			border-bottom: 0;
+			padding-bottom: 1rem;
+		}
+
+		.mw-map-sheet--side {
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: calc(var(--map-footer-height) + var(--safe-area-bottom));
+			width: auto;
+			max-width: none;
+			max-height: none;
+			border-radius: 0;
+			border: 0;
+			padding: calc(1rem + var(--safe-area-top)) 1rem 1rem;
+		}
+
+		/* The chips take the full width on a phone, so the fade has less to hide behind. */
+		.mw-map-chiprow {
+			-webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
+			mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
+		}
+
+		/* The header spans the panel's full width once the sheet loses its own inset. */
+		.mw-map-sheet--side .mw-map-sheet__header {
+			margin: calc(-1rem - var(--safe-area-top)) -1rem 0.75rem;
+			padding-top: calc(0.75rem + var(--safe-area-top));
+		}
+	}
+
+	/* #endregion */
+
+	/* #region Map chrome */
+
+	/*
+	 * The floating controls over a map: a search pill on top, example chips beneath it, a control column down one
+	 * edge, a footer along the bottom. Each is a glass material composed from tokens, and each carries the opaque
+	 * fallback below — no control depends on `backdrop-filter` to stay readable.
+	 */
+
+	/*
+	 * EVERY glass surface is listed here, and the two fallback blocks at the end of this region repeat exactly this
+	 * list. Composing the material at each component instead left the sheets and the sources popover out of both
+	 * fallbacks, so a viewer who asked for reduced transparency still got a translucent panel.
+	 */
+	.mw-map-searchbar,
+	.mw-map-chip,
+	.mw-map-control-group,
+	.mw-map-footer,
+	.mw-map-footer__popover,
+	.mw-map-sheet {
+		background: var(--material-glass-background);
+		border: 1px solid var(--material-glass-border);
+		/*
+		 * PREFIXED FIRST, STANDARD LAST. The minifier collapses two declarations carrying the same value and keeps the
+		 * last one; written the other way round the shipped rule had `-webkit-backdrop-filter` alone, so every glass
+		 * surface lost its blur on Firefox, which implements the standard property and not the alias.
+		 */
+		-webkit-backdrop-filter: blur(var(--material-glass-blur)) saturate(var(--material-glass-saturation));
+		backdrop-filter: blur(var(--material-glass-blur)) saturate(var(--material-glass-saturation));
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-searchbar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-pill);
+		box-shadow: var(--material-glass-shadow);
+	}
+
+	.mw-map-searchbar__field {
+		flex: 1;
+		min-width: 0;
+	}
+
+	/*
+	 * Busy is a hairline along the pill's lower edge, inside its radius. It is drawn on a pseudo-element so it costs
+	 * no layout — a spinner in a slot changed the pill's height on every submit, which moved the field under the
+	 * pointer.
+	 */
+	.mw-map-searchbar {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.mw-map-searchbar--busy::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 2px;
+		background: var(--color-accent);
+		transform-origin: left center;
+		animation: mw-map-searchbar-sweep 1.1s var(--easing-standard) infinite;
+	}
+
+	@keyframes mw-map-searchbar-sweep {
+		0% {
+			transform: scaleX(0);
+			transform-origin: left center;
+		}
+
+		50% {
+			transform: scaleX(1);
+			transform-origin: left center;
+		}
+
+		51% {
+			transform: scaleX(1);
+			transform-origin: right center;
+		}
+
+		100% {
+			transform: scaleX(0);
+			transform-origin: right center;
+		}
+	}
+
+	/*
+	 * The native clear button of `input[type="search"]`. Its COLOUR is the user agent's, decided by the document's
+	 * `color-scheme` — nothing here repaints it. Only the two things the scheme does not say are stated: that it is a
+	 * pointer target, and that it sits back until the field is under the pointer or holding focus.
+	 */
+	.mw-map-searchbar input[type="search"]::-webkit-search-cancel-button {
+		cursor: pointer;
+		opacity: 0.55;
+	}
+
+	.mw-map-searchbar input[type="search"]:hover::-webkit-search-cancel-button,
+	.mw-map-searchbar input[type="search"]:focus::-webkit-search-cancel-button {
+		opacity: 1;
+	}
+
+	/* The host's input carries no chrome of its own — the pill is the chrome. */
+	.mw-map-searchbar__field input {
+		width: 100%;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		padding: 0.25rem 0;
+	}
+
+	.mw-map-searchbar:focus-within {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 2px;
+	}
+
+	/* The glyph face draws its control marks small, so a leading or trailing mark is sized up to the field's own weight. */
+	.mw-map-searchbar__slot {
+		display: inline-flex;
+		align-items: center;
+		color: var(--color-text-secondary);
+		font-family: var(--font-family-glyph);
+		font-size: 1.15rem;
+		line-height: 1;
+	}
+
+	/*
+	 * One line that scrolls, never a wrap. The scrollbar is hidden because the row sits over a map where a track
+	 * would read as chrome; the row stays reachable by keyboard through its buttons.
+	 */
+	.mw-map-chiprow {
+		display: flex;
+		gap: 0.4rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+		padding: 0.15rem;
+		scroll-padding-inline: 0.15rem;
+		/* With the track hidden, a chip clipped at the edge reads as broken; the fade is what says the row scrolls. */
+		-webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+		mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+	}
+
+	.mw-map-chiprow::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-map-chip {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.35rem 0.7rem;
+		border-radius: var(--radius-pill);
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		white-space: nowrap;
+		cursor: pointer;
+	}
+
+	.mw-map-chip:hover:not(:disabled) {
+		background: var(--material-glass-fallback-background);
+		border-color: var(--control-border);
+	}
+
+	.mw-map-chip:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* A chip that carries a state reports it through `aria-pressed`, so the accent follows the attribute, not a class. */
+	.mw-map-chip--active,
+	.mw-map-chip[aria-pressed="true"] {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
+
+	.mw-map-chip:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.mw-map-chip__icon {
+		display: inline-flex;
+		font-family: var(--font-family-glyph);
+	}
+
+	.mw-map-control-stack {
+		position: absolute;
+		top: calc(1rem + var(--safe-area-top));
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		z-index: 4;
+	}
+
+	/*
+	 * The compass capsule collapses to nothing while the compass is hidden, so the capsules below it do not sit under
+	 * a gap the map shows through. `visibility` alone kept the box.
+	 */
+	.mw-map-control-group--compass:has(.mw-map-compass--north) {
+		box-shadow: none;
+		border-color: transparent;
+		background: transparent;
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+	}
+
+	.mw-map-control-stack--right {
+		right: calc(1rem + var(--safe-area-right));
+	}
+
+	.mw-map-control-stack--left {
+		left: calc(1rem + var(--safe-area-left));
+	}
+
+	/* A capsule: related controls read as one object, divided by hairlines rather than gaps. */
+	.mw-map-control-group {
+		display: flex;
+		flex-direction: column;
+		border-radius: var(--radius-control);
+		overflow: hidden;
+		box-shadow: var(--material-glass-shadow);
+	}
+
+	.mw-map-control-group > * + * {
+		border-top: 1px solid var(--material-glass-border);
+	}
+
+	.mw-map-control {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-text-primary);
+		font-family: var(--font-family-glyph);
+		cursor: pointer;
+	}
+
+	.mw-map-control:hover:not(:disabled) {
+		background: var(--control-background);
+	}
+
+	.mw-map-control:active:not(:disabled) {
+		background: var(--control-background-pressed);
+	}
+
+	.mw-map-control--active {
+		color: var(--color-accent);
+	}
+
+	.mw-map-control:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/*
+	 * The compass keeps its box while invisible so the capsules above it do not shift as the map rotates.
+	 * `visibility` rather than `display` is what lets the opacity transition run at all.
+	 */
+	/*
+	 * The compass sits INSIDE a control capsule like the other controls, so it carries no material of its own — the
+	 * capsule supplies the glass, and a second background here would read as a button on a button.
+	 */
+	.mw-map-compass {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-text-primary);
+		cursor: pointer;
+		opacity: 1;
+		visibility: visible;
+		transition:
+			opacity var(--duration-standard) var(--easing-standard),
+			visibility 0s linear 0s;
+	}
+
+	.mw-map-compass:hover:not(:disabled) {
+		background: var(--control-background);
+	}
+
+	.mw-map-compass:active:not(:disabled) {
+		background: var(--control-background-pressed);
+	}
+
+	.mw-map-compass:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: -2px;
+	}
+
+	/* The dial: a ring, not a disc — the map has to stay readable through the middle of the control. */
+	.mw-map-compass__dial {
+		fill: none;
+		stroke: var(--color-separator);
+		stroke-width: 1.5;
+	}
+
+	/* Red north, pale south. Two tones are what say which end points north without the reader knowing a convention. */
+	.mw-map-compass__north {
+		fill: var(--color-state-danger);
+	}
+
+	.mw-map-compass__south {
+		fill: var(--color-text-tertiary);
+	}
+
+	/*
+	 * Invisible, and out of the way: `visibility: hidden` keeps the element in flow, so without the pointer rule a
+	 * compass nobody can see still swallows every click on the map beneath it.
+	 */
+	.mw-map-compass--north {
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			opacity var(--duration-standard) var(--easing-standard),
+			visibility 0s linear var(--duration-standard);
+	}
+
+	/*
+	 * One line, always. Wrapping was the alternative and it grew the strip to three lines on a phone, where it then
+	 * covered the bottom sheet's last rows — the credits are the least important thing on the screen and must never
+	 * take height from the thing a visitor asked for. Long credits scroll instead.
+	 */
+	/*
+	 * THE STRIP ITSELF DOES NOT CLIP. A non-visible overflow on one axis makes the other clip as well, so an
+	 * `overflow-x` here erased the sources popover outright — it is positioned above the strip, entirely outside the
+	 * box that would have been doing the clipping. The scroll belongs to the identity region, which is the part
+	 * carrying text long enough to need one.
+	 */
+	.mw-map-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+		box-sizing: content-box;
+		height: var(--map-footer-height);
+		padding: 0 0.75rem;
+		padding-bottom: var(--safe-area-bottom);
+		border-radius: 0;
+		border-inline: 0;
+		border-bottom: 0;
+		font-size: var(--font-size-caption);
+		color: var(--color-text-secondary);
+	}
+
+	/* Identity, then whatever is loading. The status is where the loader says WHAT; the bar on top says how far. */
+	.mw-map-footer__identity {
+		flex: 1 1 auto;
+		min-width: 0;
+		display: flex;
+		align-items: baseline;
+		gap: 0.6rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.mw-map-footer__identity::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-map-footer__status {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--color-text-tertiary);
+	}
+
+	.mw-map-footer__sources {
+		position: relative;
+		flex: 0 0 auto;
+	}
+
+	.mw-map-footer__attribution-button {
+		padding: 0.1rem 0.5rem;
+		font: inherit;
+		color: var(--color-text-secondary);
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--radius-pill);
+		cursor: pointer;
+	}
+
+	.mw-map-footer__attribution-button:hover,
+	.mw-map-footer__attribution-button[aria-expanded="true"] {
+		color: var(--color-text-primary);
+		background: var(--control-background);
+		border-color: var(--control-border);
+	}
+
+	.mw-map-footer__attribution-button:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* The credits open UPWARD from the strip, because the strip is already against the bottom of the viewport. */
+	.mw-map-footer__popover {
+		position: absolute;
+		right: 0;
+		bottom: calc(100% + 0.4rem);
+		z-index: 1;
+		display: grid;
+		gap: 0.25rem;
+		min-width: max-content;
+		max-width: min(22rem, calc(100vw - 2rem));
+		padding: 0.6rem 0.8rem;
+		white-space: normal;
+		text-align: right;
+		box-shadow: var(--material-glass-shadow);
+		border-radius: var(--radius-panel);
+		color: var(--color-text-secondary);
+	}
+
+	/* #region Loading */
+
+	/*
+	 * The bundle-load bar, pinned across the top of the viewport. It reports at the page's edge because loading the
+	 * model is a page-level event: in the search field it resized the control being typed into, and in the result
+	 * sheet it held open a panel that had no answer in it yet.
+	 */
+	.mw-map-progress {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		height: 3px;
+		overflow: hidden;
+		background: var(--control-background);
+		opacity: 1;
+		transition: opacity var(--duration-standard) var(--easing-standard);
+	}
+
+	.mw-map-progress--idle {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.mw-map-progress__fill {
+		height: 100%;
+		background: var(--color-accent);
+		transform: scaleX(0);
+		transform-origin: left center;
+		transition: transform var(--duration-standard) var(--easing-decelerate);
+	}
+
+	/* Work whose length is unknown sweeps rather than filling, so the bar never invents a percentage. */
+	.mw-map-progress__fill--indeterminate {
+		width: 35%;
+		transform: none;
+		animation: mw-map-progress-sweep 1.4s var(--easing-standard) infinite;
+	}
+
+	@keyframes mw-map-progress-sweep {
+		from {
+			margin-left: -35%;
+		}
+
+		to {
+			margin-left: 100%;
+		}
+	}
+
+	/* #endregion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.mw-map-compass,
+		.mw-map-compass--north {
+			transition: none;
+		}
+	}
+
+	/*
+	 * Where the blur cannot run, or the viewer has asked for less transparency, every material becomes opaque.
+	 * Text contrast holds in all three states; the glass is never what makes a control legible.
+	 */
+	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+		.mw-map-searchbar,
+		.mw-map-chip,
+		.mw-map-control-group,
+		.mw-map-footer,
+		.mw-map-footer__popover,
+		.mw-map-sheet {
+			background: var(--material-glass-fallback-background);
+		}
+	}
+
+	@media (prefers-reduced-transparency: reduce) {
+		.mw-map-searchbar,
+		.mw-map-chip,
+		.mw-map-control-group,
+		.mw-map-footer,
+		.mw-map-footer__popover,
+		.mw-map-sheet {
+			background: var(--material-glass-fallback-background);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
 
-.mw-chip--active {
-	outline: 2px solid var(--ifm-color-primary, #e0367c);
-	outline-offset: 1px;
+	/* #endregion */
 }