@mailwoman/react 9.4.0 → 10.0.0

package/styles.css

@@ -29,7 +29,39 @@
  */
 @import url("./tokens/index.css") layer(tokens);
 
+@layer reset {
+	/*
+	 * Every box is measured by its border. The default is `content-box`, where `width`, `height` and `max-height`
+	 * describe the content ALONE and any padding and border stand outside them — so a sheet capped at 52% of the
+	 * viewport shipped 34px taller than its cap and ran off the bottom of the screen, and every rule that pairs a size
+	 * with padding is one edit away from the same defect.
+	 *
+	 * A rule that wants the other measure states `box-sizing: content-box` for itself; the footer strip does, because
+	 * its height names one line of type and its safe-area padding has to sit outside that.
+	 *
+	 * It is in the `reset` layer, so a host's own rules and every layer below win over it without out-specifying it.
+	 */
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+}
+
 @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,6 +75,27 @@
 		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 {
@@ -101,12 +154,33 @@
 
 	/* #region Preset chips */
 
+	/*
+	 * One line that scrolls, never a wrap. Twelve examples wrapped down five ragged rows (3/3/2/1/1/1) and took a
+	 * third of the panel; a scrolling row costs a fixed height whatever the number of examples. The scrollbar is
+	 * hidden because the row sits inside a floating panel where a track reads as chrome, and every chip stays
+	 * reachable by keyboard.
+	 */
 	.mw-presets {
 		margin-top: 0.75rem;
 		display: flex;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		scrollbar-width: none;
 		gap: 0.4rem;
 		align-items: baseline;
+		padding-bottom: 0.15rem;
+	}
+
+	.mw-presets::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-presets > * {
+		flex: 0 0 auto;
+	}
+
+	.mw-chip {
+		white-space: nowrap;
 	}
 
 	.mw-presets__label {
@@ -503,21 +577,33 @@
 		text-align: left;
 		padding: 0.4rem 0.6rem;
 		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 {
@@ -771,14 +857,16 @@
 	/* #region Demo control field (version / compare-version selects) */
 
 	.mw-demo-control {
-		margin-bottom: 0.75rem;
+		display: grid;
+		gap: 0.3rem;
+		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 {
@@ -799,35 +887,26 @@
 
 	/* #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: 0.35rem;
+		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: 0.5rem;
 		cursor: pointer;
-		opacity: 0.8;
-	}
-
-	.mw-demo-compare__toggle {
-		margin-bottom: 0.5rem;
 	}
 
 	.mw-demo-compare__status {
@@ -1230,4 +1309,847 @@
 	.mw-about__swatch--low {
 		background: #ef4444;
 	}
+
+	/* #endregion */
+
+	/* #region Developer disclosure */
+
+	/*
+	 * The expert set lives here, below the result rather than above the address field. A hairline and a quieter
+	 * summary keep it legible without competing with the query, which is what the panel is for.
+	 */
+	.mw-demo-developer {
+		margin-top: 1rem;
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--color-separator);
+	}
+
+	.mw-demo-developer > summary {
+		cursor: pointer;
+		user-select: none;
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text-secondary);
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+	}
+
+	.mw-demo-developer > summary:hover {
+		color: var(--color-text-primary);
+	}
+
+	.mw-demo-developer[open] > summary {
+		margin-bottom: 0.75rem;
+	}
+
+	/* #endregion */
+
+	/* #region Chrome layout — where the floating pieces sit over a map */
+
+	/*
+	 * The search pill and the chips ride at the top, centred and width-capped rather than stretched: a search field
+	 * the width of a desktop screen reads as a page header, not as a control over a map. The column clears the
+	 * device's top and side safe-area insets because both apps install as PWAs.
+	 */
+	.mw-map-chrome--top {
+		position: absolute;
+		top: calc(1rem + var(--safe-area-top));
+		left: calc(1rem + var(--safe-area-left));
+		right: calc(1rem + var(--safe-area-right));
+		z-index: 3;
+		display: grid;
+		gap: 0.5rem;
+		justify-items: stretch;
+		max-width: 34rem;
+		pointer-events: none;
+	}
+
+	/* The container is click-through so the map stays draggable between the controls; each control takes its own. */
+	.mw-map-chrome--top > * {
+		pointer-events: auto;
+	}
+
+	.mw-map-chrome__search {
+		margin: 0;
+	}
+
+	.mw-map-searchbar__clear {
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		font: inherit;
+		line-height: 1;
+		padding: 0 0.15rem;
+	}
+
+	/*
+	 * A sheet: the glass surface a result or a panel arrives on. The bottom one rises over the map's lower edge with
+	 * a drag handle, the side one sits under the control column it belongs to.
+	 */
+	.mw-map-sheet {
+		position: absolute;
+		z-index: 3;
+		/*
+		 * `max-height` measures the CONTENT box by default, so a sheet with 1rem of padding stood 34px taller than its
+		 * cap and ran past the bottom of the screen. Every height here is meant as the whole box.
+		 */
+		box-sizing: border-box;
+		box-shadow: var(--material-glass-shadow);
+		overflow: auto;
+		overscroll-behavior: contain;
+	}
+
+	.mw-map-sheet--bottom {
+		left: calc(1rem + var(--safe-area-left));
+		right: calc(1rem + var(--safe-area-right));
+		bottom: calc(2.5rem + var(--safe-area-bottom));
+		max-height: 52vh;
+		max-width: 34rem;
+		padding: 0.5rem 1rem 1rem;
+		border-radius: var(--radius-sheet);
+	}
+
+	/*
+	 * BESIDE the control column, not below it. Opening below meant the sheet's top depended on how many controls the
+	 * capsule held, and every app that added one covered the button that opened it. Beside, it clears the column
+	 * whatever it holds: 2.5rem of control plus its inset and a gap.
+	 */
+	.mw-map-sheet--side {
+		top: calc(1rem + var(--safe-area-top));
+		right: calc(4rem + var(--safe-area-right));
+		width: min(24rem, calc(100vw - 6rem));
+		/*
+		 * Measured against the VIEWPORT, not the containing block: the map wrapper is taller than the window on a page
+		 * that scrolls, and a percentage there let the sheet run past the bottom of the screen.
+		 */
+		max-height: calc(100dvh - 2rem - var(--map-footer-height) - var(--safe-area-top) - var(--safe-area-bottom));
+		padding: 1rem;
+		border-radius: var(--radius-panel);
+		/* Above the result sheet: a panel is a different task, and it covers the answer rather than sharing an edge. */
+		z-index: 5;
+	}
+
+	/*
+	 * A sheet's own furniture: a title, then rows separated by hairlines, then the small print. Without these a sheet
+	 * is a stack of raw form controls behind glass, which reads as a debug panel rather than as part of the app.
+	 */
+	/*
+	 * The title and its close button ride together and stay put while the body scrolls. The close is not decoration:
+	 * on a phone the sheet is the whole panel and covers the control that opened it, so this is the only way out.
+	 */
+	.mw-map-sheet__header {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin: -1rem -1rem 0.75rem;
+		padding: 0.75rem 1rem;
+		background: var(--material-glass-fallback-background);
+		border-bottom: 1px solid var(--color-separator);
+	}
+
+	.mw-map-sheet__title {
+		margin: 0;
+		font-family: var(--font-family-display);
+		font-size: var(--font-size-headline);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-sheet__close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+		width: 1.75rem;
+		height: 1.75rem;
+		font-size: 1.15rem;
+		line-height: 1;
+		color: var(--color-text-secondary);
+		background: transparent;
+		border: 0;
+		border-radius: var(--radius-pill);
+		cursor: pointer;
+	}
+
+	.mw-map-sheet__close:hover {
+		color: var(--color-text-primary);
+		background: var(--control-background);
+	}
+
+	.mw-map-sheet__close:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	.mw-map-sheet__row {
+		display: grid;
+		gap: 0.3rem;
+		padding: 0.7rem 0;
+		border-top: 1px solid var(--color-separator);
+	}
+
+	.mw-map-sheet__row:first-of-type {
+		border-top: 0;
+		padding-top: 0;
+	}
+
+	.mw-map-sheet__label {
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text-secondary);
+	}
+
+	.mw-map-sheet__hint {
+		margin: 0;
+		font-size: var(--font-size-caption);
+		color: var(--color-text-tertiary);
+	}
+
+	/* An intro paragraph is not a row, so it carries its own space before the first hairline. */
+	.mw-map-sheet > .mw-map-sheet__hint {
+		margin-bottom: 0.75rem;
+	}
+
+	/* A value in a row reads at the row's size; the browser's default `code` is a step larger than the label above it. */
+	.mw-map-sheet__row code {
+		font-family: var(--font-family-code);
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-primary);
+	}
+
+	/* A checkbox and its words are one target, and the words sit beside the box rather than under it. */
+	.mw-map-sheet__check {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		cursor: pointer;
+		font-size: var(--font-size-footnote);
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-sheet__check input[type="checkbox"] {
+		margin: 0;
+		accent-color: var(--color-accent);
+		cursor: pointer;
+	}
+
+	/* Every form control in a sheet takes the app's type and the control palette, never the browser's defaults. */
+	.mw-map-sheet select,
+	.mw-map-sheet input[type="text"],
+	.mw-map-sheet input[type="search"] {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0.4rem 0.55rem;
+		font: inherit;
+		font-size: var(--font-size-footnote);
+		color: var(--control-foreground);
+		background: var(--control-background);
+		border: 1px solid var(--control-border);
+		border-radius: var(--radius-control);
+	}
+
+	.mw-map-sheet select:focus-visible,
+	.mw-map-sheet input:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* The grab affordance the reference sheets carry. Decorative: the sheet scrolls, it does not drag. */
+	.mw-map-sheet__handle {
+		width: 2.25rem;
+		height: 0.25rem;
+		margin: 0 auto 0.6rem;
+		border-radius: var(--radius-pill);
+		background: var(--color-separator);
+	}
+
+	.mw-map-sheet__actions {
+		margin-top: 0.75rem;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	/*
+	 * On a phone the chrome spans the width and the sheet becomes a true bottom sheet against the edge, which is what
+	 * leaves the map its full height.
+	 */
+	/*
+	 * The phone layout. The map keeps the whole screen and every floating piece is measured against the footer strip,
+	 * whose height is `--map-footer-height` plus the safe-area inset: a sheet that ends at the screen's edge hides its
+	 * own last rows behind the credits.
+	 *
+	 * A RESULT is a bottom sheet, because it answers the query in the field above it and both stay in view. A SIDE
+	 * sheet is the whole panel, because it is a different task — layers, settings, the explainer — and a phone has no
+	 * room to hold it beside anything. That also settles the overlap: the panel covers the result rather than sharing
+	 * an edge with it.
+	 */
+	@media (max-width: 600px) {
+		/*
+		 * The column spans the width, so it has to stop short of the control capsule in the same corner — 2.5rem of
+		 * control plus its 1rem inset plus a 0.5rem gap. Without this the capsule sits on the search pill's clear
+		 * button, which is the one control at that end of the pill.
+		 */
+		.mw-map-chrome--top {
+			max-width: none;
+			right: calc(4rem + var(--safe-area-right));
+		}
+
+		.mw-map-sheet--bottom {
+			left: 0;
+			right: 0;
+			bottom: calc(var(--map-footer-height) + var(--safe-area-bottom));
+			max-width: none;
+			max-height: 55dvh;
+			border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
+			border-inline: 0;
+			border-bottom: 0;
+			padding-bottom: 1rem;
+		}
+
+		.mw-map-sheet--side {
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: calc(var(--map-footer-height) + var(--safe-area-bottom));
+			width: auto;
+			max-width: none;
+			max-height: none;
+			border-radius: 0;
+			border: 0;
+			padding: calc(1rem + var(--safe-area-top)) 1rem 1rem;
+		}
+
+		/* The chips take the full width on a phone, so the fade has less to hide behind. */
+		.mw-map-chiprow {
+			-webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
+			mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent);
+		}
+
+		/* The header spans the panel's full width once the sheet loses its own inset. */
+		.mw-map-sheet--side .mw-map-sheet__header {
+			margin: calc(-1rem - var(--safe-area-top)) -1rem 0.75rem;
+			padding-top: calc(0.75rem + var(--safe-area-top));
+		}
+	}
+
+	/* #endregion */
+
+	/* #region Map chrome */
+
+	/*
+	 * The floating controls over a map: a search pill on top, example chips beneath it, a control column down one
+	 * edge, a footer along the bottom. Each is a glass material composed from tokens, and each carries the opaque
+	 * fallback below — no control depends on `backdrop-filter` to stay readable.
+	 */
+
+	/*
+	 * EVERY glass surface is listed here, and the two fallback blocks at the end of this region repeat exactly this
+	 * list. Composing the material at each component instead left the sheets and the sources popover out of both
+	 * fallbacks, so a viewer who asked for reduced transparency still got a translucent panel.
+	 */
+	.mw-map-searchbar,
+	.mw-map-chip,
+	.mw-map-control-group,
+	.mw-map-footer,
+	.mw-map-footer__popover,
+	.mw-map-sheet {
+		background: var(--material-glass-background);
+		border: 1px solid var(--material-glass-border);
+		/*
+		 * PREFIXED FIRST, STANDARD LAST. The minifier collapses two declarations carrying the same value and keeps the
+		 * last one; written the other way round the shipped rule had `-webkit-backdrop-filter` alone, so every glass
+		 * surface lost its blur on Firefox, which implements the standard property and not the alias.
+		 */
+		-webkit-backdrop-filter: blur(var(--material-glass-blur)) saturate(var(--material-glass-saturation));
+		backdrop-filter: blur(var(--material-glass-blur)) saturate(var(--material-glass-saturation));
+		color: var(--color-text-primary);
+	}
+
+	.mw-map-searchbar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-pill);
+		box-shadow: var(--material-glass-shadow);
+	}
+
+	.mw-map-searchbar__field {
+		flex: 1;
+		min-width: 0;
+	}
+
+	/*
+	 * Busy is a hairline along the pill's lower edge, inside its radius. It is drawn on a pseudo-element so it costs
+	 * no layout — a spinner in a slot changed the pill's height on every submit, which moved the field under the
+	 * pointer.
+	 */
+	.mw-map-searchbar {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.mw-map-searchbar--busy::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 2px;
+		background: var(--color-accent);
+		transform-origin: left center;
+		animation: mw-map-searchbar-sweep 1.1s var(--easing-standard) infinite;
+	}
+
+	@keyframes mw-map-searchbar-sweep {
+		0% {
+			transform: scaleX(0);
+			transform-origin: left center;
+		}
+
+		50% {
+			transform: scaleX(1);
+			transform-origin: left center;
+		}
+
+		51% {
+			transform: scaleX(1);
+			transform-origin: right center;
+		}
+
+		100% {
+			transform: scaleX(0);
+			transform-origin: right center;
+		}
+	}
+
+	/*
+	 * The native clear button of `input[type="search"]`. Its COLOUR is the user agent's, decided by the document's
+	 * `color-scheme` — nothing here repaints it. Only the two things the scheme does not say are stated: that it is a
+	 * pointer target, and that it sits back until the field is under the pointer or holding focus.
+	 */
+	.mw-map-searchbar input[type="search"]::-webkit-search-cancel-button {
+		cursor: pointer;
+		opacity: 0.55;
+	}
+
+	.mw-map-searchbar input[type="search"]:hover::-webkit-search-cancel-button,
+	.mw-map-searchbar input[type="search"]:focus::-webkit-search-cancel-button {
+		opacity: 1;
+	}
+
+	/* The host's input carries no chrome of its own — the pill is the chrome. */
+	.mw-map-searchbar__field input {
+		width: 100%;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		padding: 0.25rem 0;
+	}
+
+	.mw-map-searchbar:focus-within {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 2px;
+	}
+
+	/* The glyph face draws its control marks small, so a leading or trailing mark is sized up to the field's own weight. */
+	.mw-map-searchbar__slot {
+		display: inline-flex;
+		align-items: center;
+		color: var(--color-text-secondary);
+		font-family: var(--font-family-glyph);
+		font-size: 1.15rem;
+		line-height: 1;
+	}
+
+	/*
+	 * One line that scrolls, never a wrap. The scrollbar is hidden because the row sits over a map where a track
+	 * would read as chrome; the row stays reachable by keyboard through its buttons.
+	 */
+	.mw-map-chiprow {
+		display: flex;
+		gap: 0.4rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+		padding: 0.15rem;
+		scroll-padding-inline: 0.15rem;
+		/* With the track hidden, a chip clipped at the edge reads as broken; the fade is what says the row scrolls. */
+		-webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+		mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+	}
+
+	.mw-map-chiprow::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-map-chip {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.35rem 0.7rem;
+		border-radius: var(--radius-pill);
+		font-size: var(--font-size-footnote);
+		font-weight: var(--font-weight-medium);
+		white-space: nowrap;
+		cursor: pointer;
+	}
+
+	.mw-map-chip:hover:not(:disabled) {
+		background: var(--material-glass-fallback-background);
+		border-color: var(--control-border);
+	}
+
+	.mw-map-chip:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* A chip that carries a state reports it through `aria-pressed`, so the accent follows the attribute, not a class. */
+	.mw-map-chip--active,
+	.mw-map-chip[aria-pressed="true"] {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
+
+	.mw-map-chip:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.mw-map-chip__icon {
+		display: inline-flex;
+		font-family: var(--font-family-glyph);
+	}
+
+	.mw-map-control-stack {
+		position: absolute;
+		top: calc(1rem + var(--safe-area-top));
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		z-index: 4;
+	}
+
+	/*
+	 * The compass capsule collapses to nothing while the compass is hidden, so the capsules below it do not sit under
+	 * a gap the map shows through. `visibility` alone kept the box.
+	 */
+	.mw-map-control-group--compass:has(.mw-map-compass--north) {
+		box-shadow: none;
+		border-color: transparent;
+		background: transparent;
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+	}
+
+	.mw-map-control-stack--right {
+		right: calc(1rem + var(--safe-area-right));
+	}
+
+	.mw-map-control-stack--left {
+		left: calc(1rem + var(--safe-area-left));
+	}
+
+	/* A capsule: related controls read as one object, divided by hairlines rather than gaps. */
+	.mw-map-control-group {
+		display: flex;
+		flex-direction: column;
+		border-radius: var(--radius-control);
+		overflow: hidden;
+		box-shadow: var(--material-glass-shadow);
+	}
+
+	.mw-map-control-group > * + * {
+		border-top: 1px solid var(--material-glass-border);
+	}
+
+	.mw-map-control {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-text-primary);
+		font-family: var(--font-family-glyph);
+		cursor: pointer;
+	}
+
+	.mw-map-control:hover:not(:disabled) {
+		background: var(--control-background);
+	}
+
+	.mw-map-control:active:not(:disabled) {
+		background: var(--control-background-pressed);
+	}
+
+	.mw-map-control--active {
+		color: var(--color-accent);
+	}
+
+	.mw-map-control:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/*
+	 * The compass keeps its box while invisible so the capsules above it do not shift as the map rotates.
+	 * `visibility` rather than `display` is what lets the opacity transition run at all.
+	 */
+	/*
+	 * The compass sits INSIDE a control capsule like the other controls, so it carries no material of its own — the
+	 * capsule supplies the glass, and a second background here would read as a button on a button.
+	 */
+	.mw-map-compass {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-text-primary);
+		cursor: pointer;
+		opacity: 1;
+		visibility: visible;
+		transition:
+			opacity var(--duration-standard) var(--easing-standard),
+			visibility 0s linear 0s;
+	}
+
+	.mw-map-compass:hover:not(:disabled) {
+		background: var(--control-background);
+	}
+
+	.mw-map-compass:active:not(:disabled) {
+		background: var(--control-background-pressed);
+	}
+
+	.mw-map-compass:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: -2px;
+	}
+
+	/* The dial: a ring, not a disc — the map has to stay readable through the middle of the control. */
+	.mw-map-compass__dial {
+		fill: none;
+		stroke: var(--color-separator);
+		stroke-width: 1.5;
+	}
+
+	/* Red north, pale south. Two tones are what say which end points north without the reader knowing a convention. */
+	.mw-map-compass__north {
+		fill: var(--color-state-danger);
+	}
+
+	.mw-map-compass__south {
+		fill: var(--color-text-tertiary);
+	}
+
+	/*
+	 * Invisible, and out of the way: `visibility: hidden` keeps the element in flow, so without the pointer rule a
+	 * compass nobody can see still swallows every click on the map beneath it.
+	 */
+	.mw-map-compass--north {
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			opacity var(--duration-standard) var(--easing-standard),
+			visibility 0s linear var(--duration-standard);
+	}
+
+	/*
+	 * One line, always. Wrapping was the alternative and it grew the strip to three lines on a phone, where it then
+	 * covered the bottom sheet's last rows — the credits are the least important thing on the screen and must never
+	 * take height from the thing a visitor asked for. Long credits scroll instead.
+	 */
+	/*
+	 * THE STRIP ITSELF DOES NOT CLIP. A non-visible overflow on one axis makes the other clip as well, so an
+	 * `overflow-x` here erased the sources popover outright — it is positioned above the strip, entirely outside the
+	 * box that would have been doing the clipping. The scroll belongs to the identity region, which is the part
+	 * carrying text long enough to need one.
+	 */
+	.mw-map-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+		box-sizing: content-box;
+		height: var(--map-footer-height);
+		padding: 0 0.75rem;
+		padding-bottom: var(--safe-area-bottom);
+		border-radius: 0;
+		border-inline: 0;
+		border-bottom: 0;
+		font-size: var(--font-size-caption);
+		color: var(--color-text-secondary);
+	}
+
+	/* Identity, then whatever is loading. The status is where the loader says WHAT; the bar on top says how far. */
+	.mw-map-footer__identity {
+		flex: 1 1 auto;
+		min-width: 0;
+		display: flex;
+		align-items: baseline;
+		gap: 0.6rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.mw-map-footer__identity::-webkit-scrollbar {
+		display: none;
+	}
+
+	.mw-map-footer__status {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--color-text-tertiary);
+	}
+
+	.mw-map-footer__sources {
+		position: relative;
+		flex: 0 0 auto;
+	}
+
+	.mw-map-footer__attribution-button {
+		padding: 0.1rem 0.5rem;
+		font: inherit;
+		color: var(--color-text-secondary);
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--radius-pill);
+		cursor: pointer;
+	}
+
+	.mw-map-footer__attribution-button:hover,
+	.mw-map-footer__attribution-button[aria-expanded="true"] {
+		color: var(--color-text-primary);
+		background: var(--control-background);
+		border-color: var(--control-border);
+	}
+
+	.mw-map-footer__attribution-button:focus-visible {
+		outline: 2px solid var(--color-selection);
+		outline-offset: 1px;
+	}
+
+	/* The credits open UPWARD from the strip, because the strip is already against the bottom of the viewport. */
+	.mw-map-footer__popover {
+		position: absolute;
+		right: 0;
+		bottom: calc(100% + 0.4rem);
+		z-index: 1;
+		display: grid;
+		gap: 0.25rem;
+		min-width: max-content;
+		max-width: min(22rem, calc(100vw - 2rem));
+		padding: 0.6rem 0.8rem;
+		white-space: normal;
+		text-align: right;
+		box-shadow: var(--material-glass-shadow);
+		border-radius: var(--radius-panel);
+		color: var(--color-text-secondary);
+	}
+
+	/* #region Loading */
+
+	/*
+	 * The bundle-load bar, pinned across the top of the viewport. It reports at the page's edge because loading the
+	 * model is a page-level event: in the search field it resized the control being typed into, and in the result
+	 * sheet it held open a panel that had no answer in it yet.
+	 */
+	.mw-map-progress {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		height: 3px;
+		overflow: hidden;
+		background: var(--control-background);
+		opacity: 1;
+		transition: opacity var(--duration-standard) var(--easing-standard);
+	}
+
+	.mw-map-progress--idle {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.mw-map-progress__fill {
+		height: 100%;
+		background: var(--color-accent);
+		transform: scaleX(0);
+		transform-origin: left center;
+		transition: transform var(--duration-standard) var(--easing-decelerate);
+	}
+
+	/* Work whose length is unknown sweeps rather than filling, so the bar never invents a percentage. */
+	.mw-map-progress__fill--indeterminate {
+		width: 35%;
+		transform: none;
+		animation: mw-map-progress-sweep 1.4s var(--easing-standard) infinite;
+	}
+
+	@keyframes mw-map-progress-sweep {
+		from {
+			margin-left: -35%;
+		}
+
+		to {
+			margin-left: 100%;
+		}
+	}
+
+	/* #endregion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.mw-map-compass,
+		.mw-map-compass--north {
+			transition: none;
+		}
+	}
+
+	/*
+	 * Where the blur cannot run, or the viewer has asked for less transparency, every material becomes opaque.
+	 * Text contrast holds in all three states; the glass is never what makes a control legible.
+	 */
+	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+		.mw-map-searchbar,
+		.mw-map-chip,
+		.mw-map-control-group,
+		.mw-map-footer,
+		.mw-map-footer__popover,
+		.mw-map-sheet {
+			background: var(--material-glass-fallback-background);
+		}
+	}
+
+	@media (prefers-reduced-transparency: reduce) {
+		.mw-map-searchbar,
+		.mw-map-chip,
+		.mw-map-control-group,
+		.mw-map-footer,
+		.mw-map-footer__popover,
+		.mw-map-sheet {
+			background: var(--material-glass-fallback-background);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+
+	/* #endregion */
 }