@mailwoman/react 10.0.0 → 10.2.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,6 +29,9 @@
  */
 @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`
@@ -86,7 +89,7 @@
 	}
 
 	/*
-	 * A default face for a host that sets none. Wrapped in `:where()` so it carries ZERO specificity: Docusaurus's own
+	 * 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.
 	 */
@@ -101,7 +104,7 @@
 @layer components {
 	.mw-poi-explorer,
 	.mw-pipeline-explorer {
-		max-width: 720px;
+		max-width: 45rem;
 		font-size: 0.95rem;
 	}
 
@@ -110,7 +113,7 @@
 	.mw-field {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--space-3);
 	}
 
 	.mw-field label {
@@ -119,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);
 	}
@@ -132,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;
 	}
 
@@ -161,14 +164,14 @@
 	 * reachable by keyboard.
 	 */
 	.mw-presets {
-		margin-top: 0.75rem;
+		margin-top: var(--space-4);
 		display: flex;
 		flex-wrap: nowrap;
 		overflow-x: auto;
 		scrollbar-width: none;
-		gap: 0.4rem;
+		gap: var(--space-2);
 		align-items: baseline;
-		padding-bottom: 0.15rem;
+		padding-bottom: var(--space-0);
 	}
 
 	.mw-presets::-webkit-scrollbar {
@@ -186,16 +189,16 @@
 	.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;
@@ -217,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;
 	}
@@ -240,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 {
@@ -259,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 {
@@ -283,7 +286,7 @@
 	/* #region KindBadge */
 
 	.mw-kind {
-		margin-bottom: 0.5rem;
+		margin-bottom: var(--space-3);
 		font-size: 0.9rem;
 	}
 
@@ -297,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;
 	}
@@ -309,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;
@@ -325,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;
@@ -342,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);
@@ -357,7 +360,7 @@
 	}
 
 	.mw-subject__note {
-		margin: 0 0 0.75rem;
+		margin: 0 0 var(--space-4);
 		font-size: 0.85rem;
 		opacity: 0.8;
 	}
@@ -365,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;
 	}
 
@@ -384,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;
@@ -403,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);
 	}
@@ -418,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;
 	}
@@ -449,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);
 	}
@@ -478,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 {
@@ -511,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;
 	}
 
@@ -540,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;
 	}
@@ -552,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 {
@@ -566,16 +569,16 @@
 		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: var(--radius-control);
 		background: var(--control-background);
@@ -625,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 {
@@ -639,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;
 	}
@@ -713,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;
@@ -724,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,
@@ -801,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;
 	}
 
@@ -819,7 +822,7 @@
 		position: relative;
 		width: 100%;
 		height: 100%;
-		min-height: 480px;
+		min-height: 30rem;
 	}
 
 	.mw-geocoder-demo__map {
@@ -827,38 +830,13 @@
 		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 {
 		display: grid;
-		gap: 0.3rem;
+		gap: var(--space-1);
 		width: 100%;
 	}
 
@@ -871,10 +849,16 @@
 
 	.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);
 	}
@@ -891,7 +875,7 @@
 	.mw-demo-backend,
 	.mw-demo-compare {
 		display: grid;
-		gap: 0.35rem;
+		gap: var(--space-2);
 		justify-items: start;
 		font-size: var(--font-size-footnote);
 	}
@@ -905,32 +889,58 @@
 	.mw-demo-compare__toggle {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-3);
 		cursor: pointer;
 	}
 
 	.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 {
@@ -943,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;
@@ -986,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;
@@ -1008,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;
 	}
 
@@ -1052,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 {
@@ -1066,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);
 	}
@@ -1078,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 {
@@ -1098,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 */
@@ -1118,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;
 	}
 
@@ -1162,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 */
@@ -1181,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);
@@ -1198,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 */
@@ -1212,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;
 	}
@@ -1224,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 {
@@ -1244,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 {
@@ -1258,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);
 	}
 
@@ -1270,44 +1291,44 @@
 
 	.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 */
@@ -1319,8 +1340,8 @@
 	 * 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;
+		margin-top: var(--space-5);
+		padding-top: var(--space-4);
 		border-top: 1px solid var(--color-separator);
 	}
 
@@ -1339,7 +1360,7 @@
 	}
 
 	.mw-demo-developer[open] > summary {
-		margin-bottom: 0.75rem;
+		margin-bottom: var(--space-4);
 	}
 
 	/* #endregion */
@@ -1347,40 +1368,93 @@
 	/* #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.
+	 * 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-chrome--top {
+	.mw-map-panel {
 		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;
+		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 container is click-through so the map stays draggable between the controls; each control takes its own. */
-	.mw-map-chrome--top > * {
-		pointer-events: auto;
+	/*
+	 * 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);
 	}
 
-	.mw-map-chrome__search {
-		margin: 0;
+	/*
+	 * 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-searchbar__clear {
-		border: 0;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-		font: inherit;
-		line-height: 1;
-		padding: 0 0.15rem;
+	.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;
 	}
 
 	/*
@@ -1400,16 +1474,6 @@
 		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
@@ -1424,10 +1488,14 @@
 		 * 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;
+		padding: var(--space-5);
 		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;
+		/*
+		 * 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;
 	}
 
 	/*
@@ -1445,9 +1513,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
-		margin: -1rem -1rem 0.75rem;
-		padding: 0.75rem 1rem;
+		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);
 	}
@@ -1486,10 +1554,27 @@
 		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: 0.3rem;
-		padding: 0.7rem 0;
+		gap: var(--space-1);
+		padding: var(--space-4) 0;
 		border-top: 1px solid var(--color-separator);
 	}
 
@@ -1512,7 +1597,7 @@
 
 	/* 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;
+		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. */
@@ -1526,7 +1611,7 @@
 	.mw-map-sheet__check {
 		display: flex;
 		align-items: baseline;
-		gap: 0.5rem;
+		gap: var(--space-3);
 		cursor: pointer;
 		font-size: var(--font-size-footnote);
 		color: var(--color-text-primary);
@@ -1544,7 +1629,7 @@
 	.mw-map-sheet input[type="search"] {
 		width: 100%;
 		box-sizing: border-box;
-		padding: 0.4rem 0.55rem;
+		padding: var(--space-2) var(--space-3);
 		font: inherit;
 		font-size: var(--font-size-footnote);
 		color: var(--control-foreground);
@@ -1559,17 +1644,56 @@
 		outline-offset: 1px;
 	}
 
-	/* The grab affordance the reference sheets carry. Decorative: the sheet scrolls, it does not drag. */
+	/*
+	 * 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;
-		margin: 0 auto 0.6rem;
 		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: 0.75rem;
+		margin-top: var(--space-4);
 		display: flex;
 		justify-content: flex-end;
 	}
@@ -1594,21 +1718,68 @@
 		 * 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 {
+		/*
+		 * 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));
-			max-width: none;
+			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;
-			padding-bottom: 1rem;
+		}
+
+		.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 {
@@ -1621,7 +1792,7 @@
 			max-height: none;
 			border-radius: 0;
 			border: 0;
-			padding: calc(1rem + var(--safe-area-top)) 1rem 1rem;
+			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. */
@@ -1632,8 +1803,8 @@
 
 		/* 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));
+			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));
 		}
 	}
 
@@ -1648,7 +1819,7 @@
 	 */
 
 	/*
-	 * EVERY glass surface is listed here, and the two fallback blocks at the end of this region repeat exactly this
+	 * 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.
 	 */
@@ -1657,11 +1828,12 @@
 	.mw-map-control-group,
 	.mw-map-footer,
 	.mw-map-footer__popover,
-	.mw-map-sheet {
+	.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
+		 * 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.
 		 */
@@ -1673,8 +1845,8 @@
 	.mw-map-searchbar {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.4rem 0.75rem;
+		gap: var(--space-3);
+		padding: var(--space-2) var(--space-4);
 		border-radius: var(--radius-pill);
 		box-shadow: var(--material-glass-shadow);
 	}
@@ -1729,7 +1901,7 @@
 	}
 
 	/*
-	 * The native clear button of `input[type="search"]`. Its COLOUR is the user agent's, decided by the document's
+	 * 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.
 	 */
@@ -1751,7 +1923,7 @@
 		background: transparent;
 		color: inherit;
 		font: inherit;
-		padding: 0.25rem 0;
+		padding: var(--space-1) 0;
 	}
 
 	.mw-map-searchbar:focus-within {
@@ -1769,16 +1941,21 @@
 		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: 0.4rem;
+		gap: var(--space-2);
 		overflow-x: auto;
 		scrollbar-width: none;
-		padding: 0.15rem;
+		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);
@@ -1793,8 +1970,8 @@
 		flex: 0 0 auto;
 		display: inline-flex;
 		align-items: center;
-		gap: 0.35rem;
-		padding: 0.35rem 0.7rem;
+		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);
@@ -1834,7 +2011,7 @@
 		top: calc(1rem + var(--safe-area-top));
 		display: flex;
 		flex-direction: column;
-		gap: 0.6rem;
+		gap: var(--space-3);
 		z-index: 4;
 	}
 
@@ -1875,8 +2052,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2.5rem;
-		height: 2.5rem;
+		/* 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);
@@ -1884,6 +2063,17 @@
 		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);
 	}
@@ -1906,7 +2096,7 @@
 	 * `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
+	 * 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 {
@@ -1974,7 +2164,7 @@
 	 * 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
+	 * 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.
@@ -1983,12 +2173,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
+		gap: var(--space-5);
 		flex-wrap: nowrap;
 		white-space: nowrap;
 		box-sizing: content-box;
 		height: var(--map-footer-height);
-		padding: 0 0.75rem;
+		padding: 0 var(--space-4);
 		padding-bottom: var(--safe-area-bottom);
 		border-radius: 0;
 		border-inline: 0;
@@ -1997,13 +2187,13 @@
 		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. */
+	/* 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;
+		gap: var(--space-3);
 		overflow-x: auto;
 		scrollbar-width: none;
 	}
@@ -2025,7 +2215,7 @@
 	}
 
 	.mw-map-footer__attribution-button {
-		padding: 0.1rem 0.5rem;
+		padding: var(--space-0) var(--space-3);
 		font: inherit;
 		color: var(--color-text-secondary);
 		background: transparent;
@@ -2046,6 +2236,30 @@
 		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;
@@ -2053,10 +2267,10 @@
 		bottom: calc(100% + 0.4rem);
 		z-index: 1;
 		display: grid;
-		gap: 0.25rem;
+		gap: var(--space-1);
 		min-width: max-content;
 		max-width: min(22rem, calc(100vw - 2rem));
-		padding: 0.6rem 0.8rem;
+		padding: var(--space-3) var(--space-4);
 		white-space: normal;
 		text-align: right;
 		box-shadow: var(--material-glass-shadow);
@@ -2133,7 +2347,8 @@
 		.mw-map-control-group,
 		.mw-map-footer,
 		.mw-map-footer__popover,
-		.mw-map-sheet {
+		.mw-map-sheet,
+		.mw-map-panel {
 			background: var(--material-glass-fallback-background);
 		}
 	}
@@ -2144,7 +2359,8 @@
 		.mw-map-control-group,
 		.mw-map-footer,
 		.mw-map-footer__popover,
-		.mw-map-sheet {
+		.mw-map-sheet,
+		.mw-map-panel {
 			background: var(--material-glass-fallback-background);
 			-webkit-backdrop-filter: none;
 			backdrop-filter: none;