@mailwoman/react 9.4.0 → 10.1.0

package/styles.css

@@ -1,7 +1,7 @@
 /* ---------------------------------------------------------------------------
  * @mailwoman/react — component styles.
  *
- * Plain, `mw-`-prefixed classes. Every colour, family and radius here names a
+ * Plain, `mw-`-prefixed classes. Every color, 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
@@ -29,7 +29,42 @@
  */
 @import url("./tokens/index.css") layer(tokens);
 
+/* The docs search modal keeps its rules beside its component. */
+@import url("./lib/search/search.css") layer(components);
+
+@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;
+	}
+}
+
 @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;
+	}
+
+	:root[data-theme="light"] {
+		color-scheme: light;
+	}
+
 	/*
 	 * 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
@@ -43,12 +78,33 @@
 		font-size: inherit;
 		line-height: 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;
+	}
+
+	/*
+	 * 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);
+	}
 }
 
 @layer components {
 	.mw-poi-explorer,
 	.mw-pipeline-explorer {
-		max-width: 720px;
+		max-width: 45rem;
 		font-size: 0.95rem;
 	}
 
@@ -57,7 +113,7 @@
 	.mw-field {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--space-3);
 	}
 
 	.mw-field label {
@@ -66,10 +122,10 @@
 	}
 
 	.mw-field input {
-		padding: 0.5rem 0.75rem;
+		padding: var(--space-3) var(--space-4);
 		font: inherit;
 		border: 1px solid var(--control-border);
-		border-radius: 6px;
+		border-radius: var(--radius-control);
 		background: var(--color-background-raised);
 		color: var(--color-text-primary);
 	}
@@ -79,16 +135,16 @@
 	}
 
 	.mw-field button[type="submit"] {
-		padding: 0.5rem 0.75rem;
+		padding: var(--space-3) var(--space-4);
 		background: var(--color-accent);
 		color: var(--color-accent-contrast);
 		border: 0;
-		border-radius: 6px;
+		border-radius: var(--radius-control);
 		font-weight: 600;
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
-		gap: 0.4rem;
+		gap: var(--space-2);
 		align-self: flex-start;
 	}
 
@@ -101,27 +157,48 @@
 
 	/* #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;
+		margin-top: var(--space-4);
 		display: flex;
-		flex-wrap: wrap;
-		gap: 0.4rem;
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		scrollbar-width: none;
+		gap: var(--space-2);
 		align-items: baseline;
+		padding-bottom: var(--space-0);
+	}
+
+	.mw-presets::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-presets > * {
+		flex: 0 0 auto;
+	}
+
+	.mw-chip {
+		white-space: nowrap;
 	}
 
 	.mw-presets__label {
 		font-size: 0.85rem;
 		color: var(--color-text-secondary);
-		margin-right: 0.25rem;
+		margin-right: var(--space-1);
 	}
 
 	.mw-chip {
 		font-size: 0.8rem;
-		padding: 0.25rem 0.55rem;
+		padding: var(--space-1) var(--space-3);
 		background: var(--control-background);
 		color: var(--color-text-primary);
 		border: 1px solid var(--control-border);
-		border-radius: 4px;
+		border-radius: var(--radius-tight);
 		font-weight: 500;
 		cursor: pointer;
 		font-family: inherit;
@@ -143,11 +220,11 @@
 
 	.mw-btn {
 		font-size: 0.8rem;
-		padding: 0.25rem 0.55rem;
+		padding: var(--space-1) var(--space-3);
 		background: var(--control-background);
 		color: var(--color-text-primary);
 		border: 1px solid var(--control-border);
-		border-radius: 4px;
+		border-radius: var(--radius-tight);
 		cursor: pointer;
 		font-family: inherit;
 	}
@@ -166,14 +243,14 @@
 	/* #region Result panel + errors */
 
 	.mw-result {
-		margin-top: 1.5rem;
+		margin-top: var(--space-6);
 	}
 
 	.mw-result__header {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		margin-bottom: 0.75rem;
+		margin-bottom: var(--space-4);
 	}
 
 	.mw-result__header h2 {
@@ -185,7 +262,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		margin-bottom: 0.4rem;
+		margin-bottom: var(--space-2);
 	}
 
 	.mw-panel__header h3 {
@@ -209,7 +286,7 @@
 	/* #region KindBadge */
 
 	.mw-kind {
-		margin-bottom: 0.5rem;
+		margin-bottom: var(--space-3);
 		font-size: 0.9rem;
 	}
 
@@ -223,7 +300,7 @@
 	}
 
 	.mw-kind__alternatives {
-		margin: 0.25rem 0 0 1rem;
+		margin: var(--space-1) 0 0 var(--space-5);
 		padding: 0;
 		list-style: disc;
 	}
@@ -235,14 +312,14 @@
 	.mw-subject__row {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		margin-bottom: 0.5rem;
+		gap: var(--space-3);
+		margin-bottom: var(--space-3);
 	}
 
 	.mw-subject__chip {
 		display: inline-block;
-		padding: 0.2rem 0.6rem;
-		border-radius: 999px;
+		padding: var(--space-1) var(--space-3);
+		border-radius: var(--radius-pill);
 		background: var(--color-accent-background);
 		color: var(--color-accent);
 		font-weight: 600;
@@ -251,8 +328,8 @@
 
 	.mw-subject__badge {
 		display: inline-block;
-		padding: 0.2rem 0.5rem;
-		border-radius: 999px;
+		padding: var(--space-1) var(--space-3);
+		border-radius: var(--radius-pill);
 		background: var(--color-state-warning-background);
 		color: var(--color-state-warning);
 		font-size: 0.75rem;
@@ -268,8 +345,8 @@
 
 	.mw-subject__qid {
 		display: inline-block;
-		padding: 0.2rem 0.5rem;
-		border-radius: 999px;
+		padding: var(--space-1) var(--space-3);
+		border-radius: var(--radius-pill);
 		background: var(--color-background-sunken);
 		color: var(--color-text-primary);
 		font-family: var(--font-family-code);
@@ -283,7 +360,7 @@
 	}
 
 	.mw-subject__note {
-		margin: 0 0 0.75rem;
+		margin: 0 0 var(--space-4);
 		font-size: 0.85rem;
 		opacity: 0.8;
 	}
@@ -291,8 +368,8 @@
 	.mw-subject__detail {
 		display: grid;
 		grid-template-columns: auto 1fr;
-		gap: 0.25rem 0.75rem;
-		margin: 0 0 0.75rem;
+		gap: var(--space-1) var(--space-4);
+		margin: 0 0 var(--space-4);
 		font-size: 0.9rem;
 	}
 
@@ -310,13 +387,13 @@
 	/* #region OverpassQL block */
 
 	.mw-overpass {
-		margin-top: 0.75rem;
+		margin-top: var(--space-4);
 	}
 
 	.mw-overpass__code {
 		margin: 0;
-		padding: 0.75rem;
-		border-radius: 6px;
+		padding: var(--space-4);
+		border-radius: var(--radius-control);
 		background: var(--control-background);
 		font-family: var(--font-family-code);
 		font-size: 0.85rem;
@@ -329,11 +406,11 @@
 	/* #region Live results */
 
 	.mw-live {
-		margin-top: 1rem;
+		margin-top: var(--space-5);
 	}
 
 	.mw-live__caption {
-		margin: 0 0 0.4rem;
+		margin: 0 0 var(--space-2);
 		font-size: 0.85rem;
 		color: var(--color-text-secondary);
 	}
@@ -344,16 +421,16 @@
 		padding: 0;
 		display: flex;
 		flex-direction: column;
-		gap: 0.35rem;
+		gap: var(--space-2);
 	}
 
 	.mw-live__results li {
 		display: flex;
 		justify-content: space-between;
 		align-items: baseline;
-		gap: 0.75rem;
-		padding: 0.4rem 0.6rem;
-		border-radius: 6px;
+		gap: var(--space-4);
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-control);
 		background: var(--control-background);
 		font-size: 0.9rem;
 	}
@@ -375,13 +452,13 @@
 	.mw-components {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: var(--space-4) 0;
 		font-size: 0.9rem;
 	}
 
 	.mw-components th,
 	.mw-components td {
-		padding: 0.4rem 0.6rem;
+		padding: var(--space-2) var(--space-3);
 		text-align: left;
 		border-bottom: 1px solid var(--color-separator);
 	}
@@ -404,27 +481,27 @@
 	.mw-conf {
 		display: flex;
 		align-items: center;
-		gap: 0.35rem;
-		min-width: 80px;
+		gap: var(--space-2);
+		min-width: 5rem;
 	}
 
 	.mw-conf__bar {
-		height: 6px;
-		border-radius: 3px;
-		min-width: 4px;
+		height: 0.375rem;
+		border-radius: var(--radius-pill);
+		min-width: 0.25rem;
 		transition: width 0.2s ease;
 	}
 
 	.mw-conf__bar--high {
-		background: #22c55e;
+		background: var(--color-confidence-high);
 	}
 
 	.mw-conf__bar--mid {
-		background: #f59e0b;
+		background: var(--color-confidence-mid);
 	}
 
 	.mw-conf__bar--low {
-		background: #ef4444;
+		background: var(--color-confidence-low);
 	}
 
 	.mw-conf__value {
@@ -437,22 +514,22 @@
 	/* #region Resolved place */
 
 	.mw-resolved {
-		margin-top: 1rem;
-		padding: 0.75rem;
+		margin-top: var(--space-5);
+		padding: var(--space-4);
 		border: 1px solid var(--color-separator);
-		border-radius: 6px;
+		border-radius: var(--radius-control);
 		background: var(--color-background-canvas);
 	}
 
 	.mw-resolved h2 {
-		margin: 0 0 0.5rem;
+		margin: 0 0 var(--space-3);
 		font-size: 1rem;
 	}
 
 	.mw-resolved dl {
 		display: grid;
 		grid-template-columns: auto 1fr;
-		gap: 0.25rem 0.75rem;
+		gap: var(--space-1) var(--space-4);
 		margin: 0;
 	}
 
@@ -466,9 +543,9 @@
 	}
 
 	.mw-resolved__dual {
-		margin: 0.5rem 0 0;
-		padding: 0.4rem 0.6rem;
-		border-radius: 6px;
+		margin: var(--space-3) 0 0;
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-control);
 		background: var(--color-state-info-background);
 		font-size: 0.9rem;
 	}
@@ -478,12 +555,12 @@
 	/* #region Candidate picker */
 
 	.mw-candidates {
-		margin-top: 1rem;
+		margin-top: var(--space-5);
 	}
 
 	.mw-candidates h2 {
 		font-size: 1rem;
-		margin: 0 0 0.5rem;
+		margin: 0 0 var(--space-3);
 	}
 
 	.mw-candidates__list {
@@ -492,32 +569,44 @@
 		padding: 0;
 		display: flex;
 		flex-direction: column;
-		gap: 0.35rem;
+		gap: var(--space-2);
 	}
 
 	.mw-candidates__btn {
 		display: flex;
 		align-items: baseline;
-		gap: 0.6rem;
+		gap: var(--space-3);
 		width: 100%;
 		text-align: left;
-		padding: 0.4rem 0.6rem;
+		padding: var(--space-2) var(--space-3);
 		border: 1px solid var(--color-separator);
-		border-radius: 6px;
-		background: transparent;
+		border-radius: var(--radius-control);
+		background: var(--control-background);
+		color: var(--color-text-primary);
 		cursor: pointer;
 		font: inherit;
 	}
 
+	.mw-candidates__btn:hover:not(:disabled) {
+		background: var(--control-background-pressed);
+		border-color: var(--control-border);
+	}
+
+	.mw-candidates__btn:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
 	.mw-candidates__btn--active {
 		border-color: var(--color-accent);
 		background: var(--color-accent-background);
 	}
 
+	/* 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: 0.8rem;
-		opacity: 0.6;
+		font-size: var(--font-size-caption);
+		color: var(--color-text-tertiary);
 	}
 
 	.mw-candidates__name {
@@ -539,8 +628,8 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 0.75rem;
-		padding: 1.5rem;
+		gap: var(--space-4);
+		padding: var(--space-6);
 	}
 
 	.mw-loading__label {
@@ -553,14 +642,14 @@
 	.mw-pulse {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--space-3);
 		width: 100%;
-		max-width: 320px;
+		max-width: 20rem;
 	}
 
 	.mw-pulse__bar {
 		height: 0.75rem;
-		border-radius: 4px;
+		border-radius: var(--radius-pill);
 		background: var(--color-background-sunken);
 		animation: mw-pulse-fade 1.4s ease-in-out infinite;
 	}
@@ -627,9 +716,9 @@
 	.mw-staged {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--space-3);
 		width: 100%;
-		max-width: 360px;
+		max-width: 22.5rem;
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -638,9 +727,9 @@
 	.mw-staged__step {
 		display: flex;
 		align-items: center;
-		gap: 0.6rem;
-		padding: 0.4rem 0.6rem;
-		border-radius: 4px;
+		gap: var(--space-3);
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-tight);
 		font-size: 0.85rem;
 		transition:
 			background 0.3s,
@@ -715,12 +804,12 @@
 	/*
  * 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.
+ * 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;
+		min-height: 20rem;
 		overflow: hidden;
 	}
 
@@ -733,7 +822,7 @@
 		position: relative;
 		width: 100%;
 		height: 100%;
-		min-height: 480px;
+		min-height: 30rem;
 	}
 
 	.mw-geocoder-demo__map {
@@ -741,52 +830,35 @@
 		inset: 0;
 	}
 
-	.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(--color-background-raised) 92%, transparent);
-		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
-		font-size: 0.95rem;
-	}
-
-	@media (max-width: 600px) {
-		.mw-demo-controls {
-			top: auto;
-			bottom: 1rem;
-			left: 1rem;
-			right: 1rem;
-			width: auto;
-		}
-	}
-
 	/* #endregion */
 
 	/* #region Demo control field (version / compare-version selects) */
 
 	.mw-demo-control {
-		margin-bottom: 0.75rem;
+		display: grid;
+		gap: var(--space-1);
+		width: 100%;
 	}
 
 	.mw-demo-control__label {
 		display: block;
-		margin-bottom: 0.25rem;
-		font-weight: 600;
-		font-size: 0.9rem;
+		font-weight: var(--font-weight-medium);
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-secondary);
 	}
 
 	.mw-demo-control__select {
 		width: 100%;
-		padding: 0.4rem;
+		/*
+		 * The release labels are long ("v9.1.0 — the suffix-boundary cure (model v4.4.0)") and a native select clips
+		 * the selected option at the field's edge with no ellipsis, so the string ended mid-word and its closing
+		 * parenthesis never rendered. The full text rides the element's `title` (see VersionPicker).
+		 */
+		text-overflow: ellipsis;
+		padding: var(--space-2);
 		font: inherit;
 		border: 1px solid var(--control-border);
-		border-radius: 6px;
+		border-radius: var(--radius-control);
 		background: var(--color-background-raised);
 		color: var(--color-text-primary);
 	}
@@ -799,59 +871,76 @@
 
 	/* #region Backend indicator + WASM toggle / compare toggle */
 
+	/* 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: flex;
-		align-items: center;
-		gap: 0.75rem;
-		flex-wrap: wrap;
-		margin-bottom: 0.75rem;
-		font-size: 0.85rem;
-	}
-
-	.mw-demo-compare {
-		display: block;
+		display: grid;
+		gap: var(--space-2);
+		justify-items: start;
+		font-size: var(--font-size-footnote);
 	}
 
 	.mw-demo-backend__active {
-		opacity: 0.7;
+		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;
+		gap: var(--space-3);
 		cursor: pointer;
-		opacity: 0.8;
-	}
-
-	.mw-demo-compare__toggle {
-		margin-bottom: 0.5rem;
 	}
 
 	.mw-demo-compare__status {
-		margin: 0.25rem 0 0;
+		margin: var(--space-1) 0 0;
 		font-size: 0.8rem;
 		color: var(--color-text-secondary);
 	}
 
+	/* The debug record: label/value pairs a reporter reads off, sized to the sheet rather than the page. The value
+	   column wraps because a user-agent string is long and truncating the one field that identifies the browser
+	   would defeat the row. */
+	.mw-debug-info {
+		display: grid;
+		gap: var(--space-1);
+		width: 100%;
+		font-size: var(--font-size-caption);
+	}
+
+	.mw-debug-info__row {
+		display: grid;
+		grid-template-columns: minmax(6rem, auto) 1fr;
+		gap: var(--space-3);
+		align-items: baseline;
+	}
+
+	.mw-debug-info__label {
+		color: var(--color-text-tertiary);
+	}
+
+	.mw-debug-info__value {
+		overflow-wrap: anywhere;
+		color: var(--color-text-secondary);
+	}
+
 	/* #endregion */
 
 	/* #region Place autocomplete listbox (reuses .mw-chip) */
 
 	.mw-demo-suggest {
-		margin-top: 0.75rem;
+		margin-top: var(--space-4);
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.4rem;
+		gap: var(--space-2);
 		align-items: baseline;
 	}
 
 	.mw-demo-suggest__label {
 		font-size: 0.85rem;
 		color: var(--color-text-secondary);
-		margin-right: 0.25rem;
+		margin-right: var(--space-1);
 	}
 
 	.mw-chip--active {
@@ -864,36 +953,36 @@
 	/* #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;
+		margin: var(--space-3) 0 var(--space-5) 0;
 	}
 
 	.mw-spans__legend {
 		display: flex;
 		align-items: center;
-		gap: 0.35rem;
+		gap: var(--space-2);
 		font-size: 0.7rem;
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		color: var(--color-text-secondary);
-		margin-bottom: 0.5rem;
+		margin-bottom: var(--space-3);
 	}
 
 	.mw-spans__swatch {
 		display: inline-block;
 		width: 0.8rem;
 		height: 0.8rem;
-		border-radius: 2px;
-		margin-left: 0.4rem;
+		border-radius: var(--radius-tick);
+		margin-left: var(--space-2);
 	}
 
 	.mw-spans__track {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: flex-end;
-		row-gap: 1.5rem;
-		padding: 0.5rem 0.6rem;
+		row-gap: var(--space-6);
+		padding: var(--space-3) var(--space-3);
 		border: 1px solid var(--color-separator);
-		border-radius: 6px;
+		border-radius: var(--radius-control);
 		background: var(--color-background-raised);
 		font-family: var(--font-family-code);
 		font-size: 0.9rem;
@@ -907,13 +996,20 @@
 	}
 
 	.mw-spans__text {
-		padding: 0.05rem 0.1rem;
+		padding: var(--space-0) var(--space-0);
 		border-bottom: 2px solid transparent;
 		white-space: pre;
 	}
 
+	/*
+	 * Each segment is a column sized to max(text, tag), so a long tag under a short span widens the segment — which is
+	 * why `350 5th Ave` renders spread out. What it did not have was any space BETWEEN neighboring tags, so the row
+	 * read as one run-on word: `house_numberstreetstreet_suffix locality regionpostcode`. The padding separates the
+	 * tags and, because the segment sizes to the tag, spreads the text above them to match.
+	 */
 	.mw-spans__tag {
-		margin-top: 0.15rem;
+		margin-top: var(--space-0);
+		padding-inline: var(--space-1);
 		font-size: 0.6rem;
 		line-height: 1;
 		text-align: center;
@@ -929,40 +1025,44 @@
 		color: var(--color-text-tertiary);
 	}
 
-	/* The tier tints match .mw-conf__bar--high/--mid/--low. */
+	/*
+	 * The tier tints match `.mw-conf__bar--high/--mid/--low` — which the sentence that stood here also claimed, while
+	 * the two painted different greens. Both now read the confidence tokens, so the claim is carried by the values
+	 * rather than by the comment.
+	 */
 	.mw-spans__seg--high .mw-spans__text {
-		background: rgba(26, 168, 77, 0.18);
-		border-bottom-color: #1aa84d;
+		background: var(--color-confidence-high-tint);
+		border-bottom-color: var(--color-confidence-high);
 	}
 
 	.mw-spans__seg--mid .mw-spans__text {
-		background: rgba(230, 168, 0, 0.18);
-		border-bottom-color: #e6a800;
+		background: var(--color-confidence-mid-tint);
+		border-bottom-color: var(--color-confidence-mid);
 	}
 
 	.mw-spans__seg--low .mw-spans__text {
-		background: rgba(216, 80, 74, 0.18);
-		border-bottom-color: #d8504a;
+		background: var(--color-confidence-low-tint);
+		border-bottom-color: var(--color-confidence-low);
 	}
 
 	.mw-spans__swatch--high {
-		background: #1aa84d;
+		background: var(--color-confidence-high);
 	}
 
 	.mw-spans__swatch--mid {
-		background: #e6a800;
+		background: var(--color-confidence-mid);
 	}
 
 	.mw-spans__swatch--low {
-		background: #d8504a;
+		background: var(--color-confidence-low);
 	}
 
 	/* #endregion */
 
-	/* #region Stage timing (TimingPanel) — a stacked bar by wall-clock, stage hues, never the confidence colours */
+	/* #region Stage timing (TimingPanel) — a stacked bar by wall-clock, stage hues, never the confidence colors */
 
 	.mw-timing {
-		margin: 1rem 0;
+		margin: var(--space-5) 0;
 		font-size: 0.8rem;
 	}
 
@@ -973,7 +1073,7 @@
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--color-text-secondary);
-		margin-bottom: 0.35rem;
+		margin-bottom: var(--space-2);
 	}
 
 	.mw-timing__total {
@@ -987,7 +1087,7 @@
 		display: flex;
 		width: 100%;
 		height: 0.7rem;
-		border-radius: 4px;
+		border-radius: var(--radius-tight);
 		overflow: hidden;
 		background: var(--color-background-sunken);
 	}
@@ -999,15 +1099,15 @@
 	.mw-timing__legend {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.25rem 1rem;
-		margin-top: 0.4rem;
+		gap: var(--space-1) var(--space-5);
+		margin-top: var(--space-2);
 		color: var(--color-text-secondary);
 	}
 
 	.mw-timing__item {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.35rem;
+		gap: var(--space-2);
 	}
 
 	.mw-timing__ms {
@@ -1019,19 +1119,19 @@
 		display: inline-block;
 		width: 0.7rem;
 		height: 0.7rem;
-		border-radius: 2px;
+		border-radius: var(--radius-tick);
 	}
 
 	.mw-timing__seg--shape {
-		background: #3578e5;
+		background: var(--color-stage-shape);
 	}
 
 	.mw-timing__seg--classify {
-		background: #8b5cf6;
+		background: var(--color-stage-classify);
 	}
 
 	.mw-timing__seg--resolve {
-		background: #14b8a6;
+		background: var(--color-stage-resolve);
 	}
 
 	/* #endregion */
@@ -1039,36 +1139,36 @@
 	/* #region Containment tree (TreeView) — nested lists with a guide rail per level */
 
 	.mw-tree {
-		margin: 0.5rem 0 0 0;
+		margin: var(--space-3) 0 0 0;
 	}
 
 	.mw-tree__children {
 		list-style: none;
 		margin: 0;
-		padding-left: 1.1rem;
+		padding-left: var(--space-5);
 	}
 
 	/* 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;
+		margin-left: var(--space-1);
 	}
 
 	.mw-tree__node {
-		margin: 0.15rem 0;
+		margin: var(--space-0) 0;
 	}
 
 	.mw-tree__row {
 		display: inline-flex;
 		align-items: baseline;
-		gap: 0.5rem;
+		gap: var(--space-3);
 		font-size: 0.85rem;
 	}
 
 	.mw-tree__tag {
 		font-weight: 600;
-		padding: 0 0.3rem;
-		border-radius: 3px;
+		padding: 0 var(--space-1);
+		border-radius: var(--radius-tick);
 		border-bottom: 2px solid transparent;
 	}
 
@@ -1083,18 +1183,18 @@
 	}
 
 	.mw-tree__tag--high {
-		background: rgba(26, 168, 77, 0.18);
-		border-bottom-color: #1aa84d;
+		background: var(--color-confidence-high-tint);
+		border-bottom-color: var(--color-confidence-high);
 	}
 
 	.mw-tree__tag--mid {
-		background: rgba(230, 168, 0, 0.18);
-		border-bottom-color: #e6a800;
+		background: var(--color-confidence-mid-tint);
+		border-bottom-color: var(--color-confidence-mid);
 	}
 
 	.mw-tree__tag--low {
-		background: rgba(216, 80, 74, 0.18);
-		border-bottom-color: #d8504a;
+		background: var(--color-confidence-low-tint);
+		border-bottom-color: var(--color-confidence-low);
 	}
 
 	/* #endregion */
@@ -1102,16 +1202,16 @@
 	/* #region No-hit diagnostic (FailureDiagnostic) — a structured panel, tinted informational rather than red */
 
 	.mw-failure {
-		margin-top: 1rem;
-		padding: 0.75rem 1rem;
+		margin-top: var(--space-5);
+		padding: var(--space-4) var(--space-5);
 		background: var(--color-state-warning-background);
 		border-left: 3px solid var(--color-state-warning);
-		border-radius: 4px;
+		border-radius: var(--radius-tight);
 	}
 
 	.mw-failure h2 {
 		font-size: 1rem;
-		margin: 0 0 0.5rem 0;
+		margin: 0 0 var(--space-3) 0;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--color-state-warning);
@@ -1119,13 +1219,13 @@
 
 	.mw-failure ul {
 		margin: 0;
-		padding-left: 1.25rem;
+		padding-left: var(--space-5);
 		font-size: 0.875rem;
 		color: var(--color-text-primary);
 	}
 
 	.mw-failure li + li {
-		margin-top: 0.35rem;
+		margin-top: var(--space-2);
 	}
 
 	/* #endregion */
@@ -1133,9 +1233,9 @@
 	/* #region About box (About) — the collapsible product explainer */
 
 	.mw-about {
-		margin-bottom: 1rem;
+		margin-bottom: var(--space-5);
 		border: 1px solid var(--control-border);
-		border-radius: 8px;
+		border-radius: var(--radius-control);
 		background: var(--color-background-raised);
 		font-size: 0.9rem;
 	}
@@ -1145,14 +1245,14 @@
 	}
 
 	.mw-about__summary {
-		padding: 0.65rem 0.75rem;
+		padding: var(--space-4) var(--space-4);
 		cursor: pointer;
 		user-select: none;
 		font-weight: 600;
 		display: flex;
 		align-items: center;
-		gap: 0.35rem;
-		border-radius: 8px;
+		gap: var(--space-2);
+		border-radius: var(--radius-control);
 	}
 
 	.mw-about__summary:hover {
@@ -1165,11 +1265,11 @@
 	}
 
 	.mw-about__body {
-		padding: 0 0.75rem 0.75rem;
+		padding: 0 var(--space-4) var(--space-4);
 	}
 
 	.mw-about__section {
-		margin-top: 0.75rem;
+		margin-top: var(--space-4);
 	}
 
 	.mw-about__section:first-child {
@@ -1179,7 +1279,7 @@
 	.mw-about__heading {
 		font-size: 0.9rem;
 		font-weight: 700;
-		margin: 0 0 0.3rem;
+		margin: 0 0 var(--space-1);
 		color: var(--color-text-primary);
 	}
 
@@ -1191,43 +1291,1081 @@
 
 	.mw-about__section code {
 		font-size: 0.85rem;
-		padding: 0.1rem 0.3rem;
+		padding: var(--space-0) var(--space-1);
 		background: var(--color-background-sunken);
-		border-radius: 3px;
+		border-radius: var(--radius-tick);
 	}
 
 	.mw-about__legend {
 		list-style: none;
-		margin: 0.5rem 0 0;
+		margin: var(--space-3) 0 0;
 		padding: 0;
 		display: flex;
 		flex-direction: column;
-		gap: 0.35rem;
+		gap: var(--space-2);
 	}
 
 	.mw-about__item {
 		display: flex;
 		align-items: center;
-		gap: 0.4rem;
+		gap: var(--space-2);
 		font-size: 0.85rem;
 	}
 
 	.mw-about__swatch {
 		flex-shrink: 0;
-		width: 10px;
-		height: 10px;
-		border-radius: 2px;
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: var(--radius-tick);
 	}
 
 	.mw-about__swatch--high {
-		background: #22c55e;
+		background: var(--color-confidence-high);
 	}
 
 	.mw-about__swatch--mid {
-		background: #f59e0b;
+		background: var(--color-confidence-mid);
 	}
 
 	.mw-about__swatch--low {
-		background: #ef4444;
+		background: var(--color-confidence-low);
+	}
+
+	/* #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: var(--space-5);
+		padding-top: var(--space-4);
+		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: var(--space-4);
+	}
+
+	/* #endregion */
+
+	/* #region Chrome layout — where the floating pieces sit over a map */
+
+	/*
+	 * the panel: search, examples and result on one surface.
+	 *
+	 * It replaces a floating pill plus a separate bottom sheet. Two surfaces meant the search field shared its row
+	 * with the control rail — which covered its right end at any width where the two met — and meant a phone could
+	 * open a result it had no way back from. One surface has one set of edges to reason about.
+	 *
+	 * Desktop: a column down the left over a full-bleed map, sized to its content rather than stretched to the
+	 * viewport, because with no result there is nothing to fill a full-height sidebar with.
+	 * Phone (below): a bottom drawer, the search riding at its top.
+	 */
+	.mw-map-panel {
+		position: absolute;
+		top: calc(1rem + var(--safe-area-top));
+		left: calc(1rem + var(--safe-area-left));
+		z-index: 3;
+		display: grid;
+		gap: var(--space-3);
+		align-content: start;
+		width: min(24rem, calc(100vw - 6rem));
+		/* Stops short of the footer strip, so a long result never runs under the credits. */
+		max-height: calc(100% - var(--map-footer-height) - var(--safe-area-top) - var(--safe-area-bottom) - 2rem);
+		/* no TOP PADDING: the grip bar carries it, so the bar's paint can reach the panel's top edge. */
+		padding: 0 var(--space-4) var(--space-4);
+		border-radius: var(--radius-sheet);
+		overflow: auto;
+		overscroll-behavior: contain;
+		/*
+		 * The MATERIAL is not stated here. It is composed once, with every other glass surface, in the material region
+		 * below — which is also the list the two fallbacks repeat. Written out at the component this panel had the
+		 * vendor pair the wrong way round (so Firefox lost the blur), a hardcoded `blur(20px)` with no saturation, and
+		 * no entry in either fallback, so a viewer asking for reduced transparency still got translucent glass. Only
+		 * the shadow is local, because the panel's is the sheet's rather than the pill's.
+		 */
+		box-shadow: var(--material-glass-shadow);
+	}
+
+	/*
+	 * The header: the grab bar and the search field as one sticky block.
+	 *
+	 * The field is in here rather than down in the scroll because scrolling a long result used to carry it off the
+	 * top of the panel, and the field is what a visitor reaches for next. The reference map apps pin exactly this
+	 * much and let everything under it move.
+	 *
+	 * It OWNS the panel's top gutter rather than sitting inside it: the panel carries no top padding, so the header's
+	 * paint reaches the panel's top edge. Opaque, because the panel's material is glass and a result read straight
+	 * through a translucent pinned header.
+	 *
+	 * no NEGATIVE TOP MARGIN to reach that edge. In a grid the track is sized from the margin box while the item is
+	 * laid out at the track's start, so a bar pulled up by 12px painted 12px past its own row, onto the field below.
+	 */
+	.mw-map-panel__header {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		display: grid;
+		gap: var(--space-3);
+		margin-inline: calc(-1 * var(--space-4));
+		padding: var(--space-4) var(--space-4) var(--space-3);
+		background: var(--color-background-raised);
+		border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
+		/* A hairline under the pinned block, so a result scrolling beneath it has an edge to disappear at. */
+		box-shadow: 0 1px 0 var(--color-separator);
+	}
+
+	/*
+	 * The grab bar's own row, inside the header.
+	 *
+	 * no MINIMUM on the desktop column: the row holds a handle that only the drawer offers and a close that only a
+	 * result offers, so on a desktop with nothing found it holds nothing — and a minimum drew that nothing as a band
+	 * of empty glass above the search field. Its height is whatever it is carrying; the drawer rule below puts a
+	 * minimum back, where the handle is the thing being reached for.
+	 */
+	.mw-map-panel__grip {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 0;
+	}
+
+	.mw-map-panel__result {
+		display: grid;
+		gap: var(--space-3);
+	}
+
+	/* The form around the field carries no margin of its own; the header's grid sets the spacing. */
+	.mw-map-panel__search {
+		margin: 0;
+	}
+
+	/*
+	 * 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;
+	}
+
+	/*
+	 * 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: var(--space-5);
+		border-radius: var(--radius-panel);
+		/*
+		 * the TOP OF the MAP'S LADDER: panel 3 (5 as a drawer), control rail 4, side sheet 6. A side sheet is a
+		 * different task and covers the answer rather than sharing an edge with it. It was 5 — a tie with the drawer,
+		 * resolved by nothing but the order the two happen to render in, and one JSX reorder from inverting.
+		 */
+		z-index: 6;
+	}
+
+	/*
+	 * 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: var(--space-5);
+		margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
+		padding: var(--space-4) var(--space-5);
+		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;
+	}
+
+	/*
+	 * The close sits at the right of the grip bar.
+	 *
+	 * IN FLOW on the desktop column, where the bar has no handle to center and therefore no height of its own. Taken
+	 * out of flow there it reserved nothing, and a 44px button hanging from a 0px bar came down across the right end
+	 * of the search field below it — the overlap this whole panel was meant to end. In flow it carries the bar, and
+	 * the field starts under it.
+	 *
+	 * The phone rule below puts it back to absolute, where the handle is the bar and has to stay centered on the sheet
+	 * rather than on the space the close leaves, and where the target grows to a full 44px because the drawer is the
+	 * whole panel and this is the only way out of it.
+	 */
+	.mw-map-sheet__close--floating {
+		margin-left: auto;
+		right: 0.25rem;
+	}
+
+	.mw-map-sheet__row {
+		display: grid;
+		gap: var(--space-1);
+		padding: var(--space-4) 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: var(--space-4);
+	}
+
+	/* 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: var(--space-3);
+		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: var(--space-2) var(--space-3);
+		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, and now a real control: drag to resize between two detents, drag down past the smaller one
+	 * to dismiss, tap or Enter to toggle. It was decorative, which is worse than absent — a handle that looks draggable
+	 * and is not reads as a broken sheet rather than a static one.
+	 *
+	 * The pill is drawn as a pseudo-element so the button itself can be a 44px-tall target without a 44px-tall pill.
+	 * `touch-action: none` stops the browser claiming the gesture as a scroll before the pointer handlers see it.
+	 */
+	/* Desktop has no drawer to resize, so the handle is not offered there; the phone rule below restores it. */
+	.mw-map-panel .mw-map-sheet__handle {
+		display: none;
+	}
+
+	.mw-map-sheet__handle {
+		display: grid;
+		place-items: center;
+		width: 3rem;
+		height: 2.5rem;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: grab;
+		touch-action: none;
+	}
+
+	.mw-map-sheet__handle::before {
+		content: "";
+		width: 2.25rem;
+		height: 0.25rem;
+		border-radius: var(--radius-pill);
+		background: var(--color-separator);
+	}
+
+	.mw-map-sheet__handle:hover::before {
+		background: var(--color-text-tertiary);
+	}
+
+	.mw-map-sheet__handle:active {
+		cursor: grabbing;
+	}
+
+	.mw-map-sheet__handle:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: -2px;
+		border-radius: var(--radius-pill);
+	}
+
+	.mw-map-sheet__actions {
+		margin-top: var(--space-4);
+		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.
+		 */
+		/*
+		 * The drawer. Anchored to the bottom edge above the footer, full width, and detented — the search rides at its
+		 * top so reaching it never means getting a result out of the way first.
+		 */
+		.mw-map-panel {
+			top: auto;
+			left: 0;
+			right: 0;
+			bottom: calc(var(--map-footer-height) + var(--safe-area-bottom));
+			width: auto;
+			/*
+			 * above the control rail (`z-index: 4`), which the desktop column never reaches. Pulled to its tall detent
+			 * the drawer's top edge crosses the rail's corner, and drawn under it the rail sat on the drawer's own
+			 * close. A sheet raised over a map covers what it covers; it does not share a corner with it.
+			 */
+			z-index: 5;
+			/*
+			 * `none`, not `contain`. A pull at the top of the scroll is a drag on the drawer here (see
+			 * `onPanelPointerMove`), and the browser's own rubber band fought it: the content bounced while the drawer
+			 * stayed put, which reads as the gesture being heard and refused.
+			 */
+			overscroll-behavior: none;
+			max-height: 55dvh;
+			border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
+			border-inline: 0;
+			border-bottom: 0;
+		}
+
+		.mw-map-panel .mw-map-sheet__handle {
+			display: grid;
+		}
+
+		/* The header is the grab target, so the browser must not claim the gesture as a scroll before it is read. */
+		.mw-map-panel__header {
+			touch-action: none;
+		}
+
+		/*
+		 * The control rail is hidden while a result is open. It shares the corner the drawer's tall detent reaches,
+		 * and a control stranded above an open drawer is out of reach of the thumb holding the phone. Closing the
+		 * result brings it back — which is the same gesture that gives the map back.
+		 */
+		/* Doubled class: the base `.mw-map-control-stack` sets `display: flex` further down the sheet, and a single
+		 * class here loses to it on source order alone. */
+		.mw-map-control-stack.mw-map-control-stack--drawer-open {
+			display: none;
+		}
+
+		/*
+		 * The drawer's bar is the grab target, so it keeps a full row — but only while it holds one. With no result the
+		 * bar is empty on a phone too, and an empty band over the search field is the gap this rule would otherwise put
+		 * back. `:has()` is the test; where it is unsupported the bar collapses, which is the harmless half.
+		 */
+		.mw-map-panel__grip:has(button) {
+			min-height: 2.25rem;
+		}
+
+		.mw-map-sheet__close--floating {
+			position: absolute;
+			margin-left: 0;
+			width: 2.75rem;
+			height: 2.75rem;
+		}
+
+		.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(var(--space-5) + var(--safe-area-top)) var(--space-5) var(--space-5);
+		}
+
+		/* 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(-1 * (var(--space-5) + var(--safe-area-top))) calc(-1 * var(--space-5)) var(--space-4);
+			padding-top: calc(var(--space-4) + 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,
+	.mw-map-panel {
+		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: var(--space-3);
+		padding: var(--space-2) var(--space-4);
+		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 COLOR 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: var(--space-1) 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;
+	}
+
+	/* A drawn mark, not a typed one — see `SearchGlyph`. `block` keeps the line box off its baseline. */
+	.mw-map-searchbar__glyph {
+		display: block;
+	}
+
+	/*
+	 * 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: var(--space-2);
+		overflow-x: auto;
+		scrollbar-width: none;
+		padding: var(--space-0);
+		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: var(--space-2);
+		padding: var(--space-2) var(--space-4);
+		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: var(--space-3);
+		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;
+		/* 2.5rem = 40px, under the 44px minimum for a touch target, and these three are the only way into the about,
+		   layers and developer sheets. */
+		width: 2.75rem;
+		height: 2.75rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-text-primary);
+		font-family: var(--font-family-glyph);
+		cursor: pointer;
+	}
+
+	/*
+	 * This rail was the one control group in the app with no focus ring — every sibling has one (.mw-map-chip,
+	 * .mw-map-compass, .mw-map-sheet__close, .mw-map-footer__attribution-button). An `outline` alone would not have
+	 * shown anyway: the parent capsule clips with `overflow: hidden`, which hides an outline drawn outside the button's
+	 * box. An inset ring is drawn inside it, so the capsule cannot clip it.
+	 */
+	.mw-map-control:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px var(--color-selection);
+	}
+
+	.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: var(--space-5);
+		flex-wrap: nowrap;
+		white-space: nowrap;
+		box-sizing: content-box;
+		height: var(--map-footer-height);
+		padding: 0 var(--space-4);
+		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: var(--space-3);
+		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: var(--space-0) var(--space-3);
+		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;
+	}
+
+	/*
+	 * One credit line. `MapFooter` has always rendered this class and `styles.css` never defined it, so the credits
+	 * inherited whatever the popover gave them — which was fine while they were bare strings and not once they became
+	 * links that have to look like links.
+	 */
+	.mw-map-footer__credit {
+		line-height: 1.5;
+	}
+
+	.mw-map-footer__credit a {
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.mw-map-footer__credit a:hover {
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-footer__credit a:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 2px;
+	}
+
+	/* 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: var(--space-1);
+		min-width: max-content;
+		max-width: min(22rem, calc(100vw - 2rem));
+		padding: var(--space-3) var(--space-4);
+		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,
+		.mw-map-panel {
+			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,
+		.mw-map-panel {
+			background: var(--material-glass-fallback-background);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+
+	/* #endregion */
 }