@mailwoman/react 9.3.0 → 9.4.0

package/styles.css

@@ -1,823 +1,1233 @@
 /* ---------------------------------------------------------------------------
  * @mailwoman/react — component styles.
  *
- * Plain, `mw-`-prefixed classes ported from the docs-site CSS modules. Every
- * Infima (`--ifm-*`) token carries an inline fallback, so the components render
- * correctly BOTH inside Docusaurus (where the real theme tokens win) and
- * standalone (Storybook, tests, any React app). No CSS module hashing — the
- * class names are stable and namespaced, and no component imports this file, so
- * the bare package import stays node-safe.
+ * Plain, `mw-`-prefixed classes. Every colour, family and radius here names a
+ * SEMANTIC token from `tokens.css`, which this file requires a host to load —
+ * `@mailwoman/react/tokens.css`, and `fonts.css` beside it for the brand face.
+ * There are no inline fallbacks, on purpose: a fallback is what let eight
+ * undefined names paint Infima's LIGHT values inside a dark app without
+ * anything failing. A token that is missing should look missing.
+ *
+ * A rule may read the semantic layer only. Reaching a primitive (`--neutral-*`,
+ * `--brand-*`) from here skips the layer that says what a value is FOR, which is
+ * how this stylesheet came to read a theme vocabulary it did not own.
+ *
+ * No CSS module hashing — the class names are stable and namespaced, and no
+ * component imports this file, so the bare package import stays node-safe.
  * --------------------------------------------------------------------------- */
 
-.mw-poi-explorer,
-.mw-pipeline-explorer {
-	max-width: 720px;
-	font-size: 0.95rem;
+/*
+ * The layer order every consumer inherits. Naming the order here means a host's own rules can win by declaring a
+ * later layer rather than by out-specifying ours, which is what keeps this package embeddable in Docusaurus without
+ * either side fighting the other's selectors.
+ */
+@layer reset, tokens, base, components, utilities, overrides;
+
+/*
+ * The vocabulary these rules read, pulled in rather than left to the host to remember. A consumer that loaded the
+ * components and forgot the tokens is exactly the state that shipped: rules reading names nothing defined.
+ */
+@import url("./tokens/index.css") layer(tokens);
+
+@layer base {
+	/*
+	 * Form controls do not inherit the document's font. Left alone, a `<button>` renders in the user agent's default
+	 * — measured as Arial on the deployed Earth app, beside a body in system-ui and labels in ui-monospace, which is
+	 * three families in one panel and none of them chosen.
+	 */
+	button,
+	input,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+	}
 }
 
-/* #region Field (label + input + button) */
+@layer components {
+	.mw-poi-explorer,
+	.mw-pipeline-explorer {
+		max-width: 720px;
+		font-size: 0.95rem;
+	}
 
-.mw-field {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
+	/* #region Field (label + input + button) */
 
-.mw-field label {
-	font-weight: 600;
-	font-size: 0.9rem;
-}
+	.mw-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
 
-.mw-field input {
-	padding: 0.5rem 0.75rem;
-	font: inherit;
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 6px;
-	background: var(--ifm-background-surface-color, #fff);
-	color: var(--ifm-font-color-base, inherit);
-}
+	.mw-field label {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
 
-.mw-field input:disabled {
-	opacity: 0.5;
-}
+	.mw-field input {
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+		border: 1px solid var(--control-border);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		color: var(--color-text-primary);
+	}
 
-.mw-field button[type="submit"] {
-	padding: 0.5rem 0.75rem;
-	background: var(--ifm-color-primary, #e0367c);
-	color: #fff;
-	border: 0;
-	border-radius: 6px;
-	font-weight: 600;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.4rem;
-	align-self: flex-start;
-}
+	.mw-field input:disabled {
+		opacity: 0.5;
+	}
 
-.mw-field button[type="submit"]:disabled {
-	background: var(--ifm-color-emphasis-400, #b3b3b3);
-	cursor: not-allowed;
-}
+	.mw-field button[type="submit"] {
+		padding: 0.5rem 0.75rem;
+		background: var(--color-accent);
+		color: var(--color-accent-contrast);
+		border: 0;
+		border-radius: 6px;
+		font-weight: 600;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		align-self: flex-start;
+	}
 
-/* #endregion */
+	.mw-field button[type="submit"]:disabled {
+		background: var(--color-text-tertiary);
+		cursor: not-allowed;
+	}
 
-/* #region Preset chips */
+	/* #endregion */
 
-.mw-presets {
-	margin-top: 0.75rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.4rem;
-	align-items: baseline;
-}
+	/* #region Preset chips */
 
-.mw-presets__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	margin-right: 0.25rem;
-}
+	.mw-presets {
+		margin-top: 0.75rem;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+		align-items: baseline;
+	}
 
-.mw-chip {
-	font-size: 0.8rem;
-	padding: 0.25rem 0.55rem;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	color: var(--ifm-color-emphasis-800, #303846);
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 4px;
-	font-weight: 500;
-	cursor: pointer;
-	font-family: inherit;
-}
+	.mw-presets__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		margin-right: 0.25rem;
+	}
 
-.mw-chip:hover:not(:disabled) {
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	border-color: var(--ifm-color-primary, #e0367c);
-}
+	.mw-chip {
+		font-size: 0.8rem;
+		padding: 0.25rem 0.55rem;
+		background: var(--control-background);
+		color: var(--color-text-primary);
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		font-weight: 500;
+		cursor: pointer;
+		font-family: inherit;
+	}
 
-.mw-chip:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	.mw-chip:hover:not(:disabled) {
+		background: var(--color-background-sunken);
+		border-color: var(--color-accent);
+	}
 
-/* #endregion */
+	.mw-chip:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-/* #region Generic button (copy / search) */
+	/* #endregion */
 
-.mw-btn {
-	font-size: 0.8rem;
-	padding: 0.25rem 0.55rem;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	color: var(--ifm-color-emphasis-800, #303846);
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 4px;
-	cursor: pointer;
-	font-family: inherit;
-}
+	/* #region Generic button (copy / search) */
 
-.mw-btn:hover:not(:disabled) {
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-}
+	.mw-btn {
+		font-size: 0.8rem;
+		padding: 0.25rem 0.55rem;
+		background: var(--control-background);
+		color: var(--color-text-primary);
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		cursor: pointer;
+		font-family: inherit;
+	}
 
-.mw-btn:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	.mw-btn:hover:not(:disabled) {
+		background: var(--color-background-sunken);
+	}
 
-/* #endregion */
+	.mw-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-/* #region Result panel + errors */
+	/* #endregion */
 
-.mw-result {
-	margin-top: 1.5rem;
-}
+	/* #region Result panel + errors */
 
-.mw-result__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0.75rem;
-}
+	.mw-result {
+		margin-top: 1.5rem;
+	}
 
-.mw-result__header h2 {
-	margin: 0;
-	font-size: 1.1rem;
-}
+	.mw-result__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
 
-.mw-panel__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0.4rem;
-}
+	.mw-result__header h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
 
-.mw-panel__header h3 {
-	margin: 0;
-	font-size: 0.95rem;
-}
+	.mw-panel__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.4rem;
+	}
 
-.mw-muted {
-	font-style: italic;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	.mw-panel__header h3 {
+		margin: 0;
+		font-size: 0.95rem;
+	}
 
-.mw-error {
-	color: var(--ifm-color-danger, #d9364c);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	white-space: pre-wrap;
-}
+	.mw-muted {
+		font-style: italic;
+		color: var(--color-text-secondary);
+	}
 
-/* #endregion */
+	.mw-error {
+		color: var(--color-state-danger);
+		font-family: var(--font-family-code);
+		white-space: pre-wrap;
+	}
 
-/* #region KindBadge */
+	/* #endregion */
 
-.mw-kind {
-	margin-bottom: 0.5rem;
-	font-size: 0.9rem;
-}
+	/* #region KindBadge */
 
-.mw-kind__summary {
-	cursor: pointer;
-	user-select: none;
-}
+	.mw-kind {
+		margin-bottom: 0.5rem;
+		font-size: 0.9rem;
+	}
 
-.mw-kind__confidence {
-	opacity: 0.7;
-}
+	.mw-kind__summary {
+		cursor: pointer;
+		user-select: none;
+	}
 
-.mw-kind__alternatives {
-	margin: 0.25rem 0 0 1rem;
-	padding: 0;
-	list-style: disc;
-}
+	.mw-kind__confidence {
+		opacity: 0.7;
+	}
 
-/* #endregion */
+	.mw-kind__alternatives {
+		margin: 0.25rem 0 0 1rem;
+		padding: 0;
+		list-style: disc;
+	}
 
-/* #region POI subject panel */
+	/* #endregion */
 
-.mw-subject__row {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 0.5rem;
-}
+	/* #region POI subject panel */
 
-.mw-subject__chip {
-	display: inline-block;
-	padding: 0.2rem 0.6rem;
-	border-radius: 999px;
-	background: var(--ifm-color-primary-contrast-background, rgba(224, 54, 124, 0.12));
-	color: var(--ifm-color-primary, #e0367c);
-	font-weight: 600;
-	font-size: 0.85rem;
-}
+	.mw-subject__row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
 
-.mw-subject__badge {
-	display: inline-block;
-	padding: 0.2rem 0.5rem;
-	border-radius: 999px;
-	background: var(--ifm-color-warning-contrast-background, rgba(245, 158, 11, 0.15));
-	color: var(--ifm-color-warning-darkest, #92400e);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.02em;
-}
+	.mw-subject__chip {
+		display: inline-block;
+		padding: 0.2rem 0.6rem;
+		border-radius: 999px;
+		background: var(--color-accent-background);
+		color: var(--color-accent);
+		font-weight: 600;
+		font-size: 0.85rem;
+	}
 
-.mw-subject__badge--brand {
-	background: var(--ifm-color-info-contrast-background, rgba(84, 199, 236, 0.15));
-	color: var(--ifm-color-info-darkest, #14657d);
-}
+	.mw-subject__badge {
+		display: inline-block;
+		padding: 0.2rem 0.5rem;
+		border-radius: 999px;
+		background: var(--color-state-warning-background);
+		color: var(--color-state-warning);
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+	}
 
-.mw-subject__qid {
-	display: inline-block;
-	padding: 0.2rem 0.5rem;
-	border-radius: 999px;
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	color: var(--ifm-color-emphasis-800, #303846);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-decoration: none;
-}
+	.mw-subject__badge--brand {
+		background: var(--color-state-info-background);
+		color: var(--color-state-info);
+	}
 
-.mw-subject__qid:hover {
-	text-decoration: underline;
-}
+	.mw-subject__qid {
+		display: inline-block;
+		padding: 0.2rem 0.5rem;
+		border-radius: 999px;
+		background: var(--color-background-sunken);
+		color: var(--color-text-primary);
+		font-family: var(--font-family-code);
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-decoration: none;
+	}
 
-.mw-subject__note {
-	margin: 0 0 0.75rem;
-	font-size: 0.85rem;
-	opacity: 0.8;
-}
+	.mw-subject__qid:hover {
+		text-decoration: underline;
+	}
 
-.mw-subject__detail {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0.25rem 0.75rem;
-	margin: 0 0 0.75rem;
-	font-size: 0.9rem;
-}
+	.mw-subject__note {
+		margin: 0 0 0.75rem;
+		font-size: 0.85rem;
+		opacity: 0.8;
+	}
 
-.mw-subject__detail dt {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-700, #4a5163);
-}
+	.mw-subject__detail {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.25rem 0.75rem;
+		margin: 0 0 0.75rem;
+		font-size: 0.9rem;
+	}
 
-.mw-subject__detail dd {
-	margin: 0;
-}
+	.mw-subject__detail dt {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+	}
 
-/* #endregion */
+	.mw-subject__detail dd {
+		margin: 0;
+	}
 
-/* #region OverpassQL block */
+	/* #endregion */
 
-.mw-overpass {
-	margin-top: 0.75rem;
-}
+	/* #region OverpassQL block */
 
-.mw-overpass__code {
-	margin: 0;
-	padding: 0.75rem;
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.85rem;
-	white-space: pre-wrap;
-	overflow-x: auto;
-}
+	.mw-overpass {
+		margin-top: 0.75rem;
+	}
 
-/* #endregion */
+	.mw-overpass__code {
+		margin: 0;
+		padding: 0.75rem;
+		border-radius: 6px;
+		background: var(--control-background);
+		font-family: var(--font-family-code);
+		font-size: 0.85rem;
+		white-space: pre-wrap;
+		overflow-x: auto;
+	}
 
-/* #region Live results */
+	/* #endregion */
 
-.mw-live {
-	margin-top: 1rem;
-}
+	/* #region Live results */
 
-.mw-live__caption {
-	margin: 0 0 0.4rem;
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	.mw-live {
+		margin-top: 1rem;
+	}
 
-.mw-live__results {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-}
+	.mw-live__caption {
+		margin: 0 0 0.4rem;
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+	}
 
-.mw-live__results li {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
-	gap: 0.75rem;
-	padding: 0.4rem 0.6rem;
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-100, #f5f6f7);
-	font-size: 0.9rem;
-}
+	.mw-live__results {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
 
-.mw-live__name {
-	font-weight: 600;
-}
+	.mw-live__results li {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 0.75rem;
+		padding: 0.4rem 0.6rem;
+		border-radius: 6px;
+		background: var(--control-background);
+		font-size: 0.9rem;
+	}
 
-.mw-live__meta {
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-size: 0.8rem;
-	white-space: nowrap;
-}
+	.mw-live__name {
+		font-weight: 600;
+	}
 
-/* #endregion */
+	.mw-live__meta {
+		color: var(--color-text-secondary);
+		font-size: 0.8rem;
+		white-space: nowrap;
+	}
 
-/* #region Component table */
+	/* #endregion */
 
-.mw-components {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 0.75rem 0;
-	font-size: 0.9rem;
-}
+	/* #region Component table */
 
-.mw-components th,
-.mw-components td {
-	padding: 0.4rem 0.6rem;
-	text-align: left;
-	border-bottom: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-}
+	.mw-components {
+		width: 100%;
+		border-collapse: collapse;
+		margin: 0.75rem 0;
+		font-size: 0.9rem;
+	}
 
-.mw-components th {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-size: 0.8rem;
-	text-transform: uppercase;
-}
+	.mw-components th,
+	.mw-components td {
+		padding: 0.4rem 0.6rem;
+		text-align: left;
+		border-bottom: 1px solid var(--color-separator);
+	}
 
-/* #endregion */
+	.mw-components th {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		font-size: 0.8rem;
+		text-transform: uppercase;
+	}
 
-/* #region Confidence cell */
+	/* #endregion */
 
-.mw-conf__dash {
-	color: var(--ifm-color-emphasis-500, #8c8c8c);
-}
+	/* #region Confidence cell */
 
-.mw-conf {
-	display: flex;
-	align-items: center;
-	gap: 0.35rem;
-	min-width: 80px;
-}
+	.mw-conf__dash {
+		color: var(--color-text-tertiary);
+	}
 
-.mw-conf__bar {
-	height: 6px;
-	border-radius: 3px;
-	min-width: 4px;
-	transition: width 0.2s ease;
-}
+	.mw-conf {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		min-width: 80px;
+	}
 
-.mw-conf__bar--high {
-	background: #22c55e;
-}
+	.mw-conf__bar {
+		height: 6px;
+		border-radius: 3px;
+		min-width: 4px;
+		transition: width 0.2s ease;
+	}
 
-.mw-conf__bar--mid {
-	background: #f59e0b;
-}
+	.mw-conf__bar--high {
+		background: #22c55e;
+	}
 
-.mw-conf__bar--low {
-	background: #ef4444;
-}
+	.mw-conf__bar--mid {
+		background: #f59e0b;
+	}
 
-.mw-conf__value {
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.8rem;
-}
+	.mw-conf__bar--low {
+		background: #ef4444;
+	}
 
-/* #endregion */
+	.mw-conf__value {
+		font-family: var(--font-family-code);
+		font-size: 0.8rem;
+	}
 
-/* #region Resolved place */
+	/* #endregion */
 
-.mw-resolved {
-	margin-top: 1rem;
-	padding: 0.75rem;
-	border: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-radius: 6px;
-	background: var(--ifm-color-emphasis-0, #fff);
-}
+	/* #region Resolved place */
 
-.mw-resolved h2 {
-	margin: 0 0 0.5rem;
-	font-size: 1rem;
-}
+	.mw-resolved {
+		margin-top: 1rem;
+		padding: 0.75rem;
+		border: 1px solid var(--color-separator);
+		border-radius: 6px;
+		background: var(--color-background-canvas);
+	}
 
-.mw-resolved dl {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0.25rem 0.75rem;
-	margin: 0;
-}
+	.mw-resolved h2 {
+		margin: 0 0 0.5rem;
+		font-size: 1rem;
+	}
 
-.mw-resolved dt {
-	font-weight: 600;
-	color: var(--ifm-color-emphasis-700, #4a5163);
-}
+	.mw-resolved dl {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.25rem 0.75rem;
+		margin: 0;
+	}
 
-.mw-resolved dd {
-	margin: 0;
-}
+	.mw-resolved dt {
+		font-weight: 600;
+		color: var(--color-text-secondary);
+	}
 
-.mw-resolved__dual {
-	margin: 0.5rem 0 0;
-	padding: 0.4rem 0.6rem;
-	border-radius: 6px;
-	background: var(--ifm-color-info-contrast-background, rgba(54, 122, 246, 0.1));
-	font-size: 0.9rem;
-}
+	.mw-resolved dd {
+		margin: 0;
+	}
 
-/* #endregion */
+	.mw-resolved__dual {
+		margin: 0.5rem 0 0;
+		padding: 0.4rem 0.6rem;
+		border-radius: 6px;
+		background: var(--color-state-info-background);
+		font-size: 0.9rem;
+	}
 
-/* #region Candidate picker */
+	/* #endregion */
 
-.mw-candidates {
-	margin-top: 1rem;
-}
+	/* #region Candidate picker */
 
-.mw-candidates h2 {
-	font-size: 1rem;
-	margin: 0 0 0.5rem;
-}
+	.mw-candidates {
+		margin-top: 1rem;
+	}
 
-.mw-candidates__list {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-}
+	.mw-candidates h2 {
+		font-size: 1rem;
+		margin: 0 0 0.5rem;
+	}
 
-.mw-candidates__btn {
-	display: flex;
-	align-items: baseline;
-	gap: 0.6rem;
-	width: 100%;
-	text-align: left;
-	padding: 0.4rem 0.6rem;
-	border: 1px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-radius: 6px;
-	background: transparent;
-	cursor: pointer;
-	font: inherit;
-}
+	.mw-candidates__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
 
-.mw-candidates__btn--active {
-	border-color: var(--ifm-color-primary, #e0367c);
-	background: var(--ifm-color-primary-contrast-background, rgba(224, 54, 124, 0.1));
-}
+	.mw-candidates__btn {
+		display: flex;
+		align-items: baseline;
+		gap: 0.6rem;
+		width: 100%;
+		text-align: left;
+		padding: 0.4rem 0.6rem;
+		border: 1px solid var(--color-separator);
+		border-radius: 6px;
+		background: transparent;
+		cursor: pointer;
+		font: inherit;
+	}
 
-.mw-candidates__rank {
-	font-family: var(--ifm-font-family-monospace, monospace);
-	font-size: 0.8rem;
-	opacity: 0.6;
-}
+	.mw-candidates__btn--active {
+		border-color: var(--color-accent);
+		background: var(--color-accent-background);
+	}
 
-.mw-candidates__name {
-	font-weight: 600;
-}
+	.mw-candidates__rank {
+		font-family: var(--font-family-code);
+		font-size: 0.8rem;
+		opacity: 0.6;
+	}
 
-.mw-candidates__meta {
-	margin-left: auto;
-	font-size: 0.8rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	.mw-candidates__name {
+		font-weight: 600;
+	}
 
-/* #endregion */
+	.mw-candidates__meta {
+		margin-left: auto;
+		font-size: 0.8rem;
+		color: var(--color-text-secondary);
+	}
 
-/* #region LoadingIndicator */
+	/* #endregion */
 
-.mw-loading {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 0.75rem;
-	padding: 1.5rem;
-}
+	/* #region LoadingIndicator */
 
-.mw-loading__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	font-family: var(--ifm-font-family-monospace, monospace);
-	text-align: center;
-}
+	.mw-loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 1.5rem;
+	}
 
-.mw-pulse {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	width: 100%;
-	max-width: 320px;
-}
+	.mw-loading__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		font-family: var(--font-family-code);
+		text-align: center;
+	}
 
-.mw-pulse__bar {
-	height: 0.75rem;
-	border-radius: 4px;
-	background: var(--ifm-color-emphasis-200, #ebedf0);
-	animation: mw-pulse-fade 1.4s ease-in-out infinite;
-}
+	.mw-pulse {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 320px;
+	}
 
-.mw-pulse__bar:nth-child(1) {
-	animation-delay: 0s;
-}
-.mw-pulse__bar:nth-child(2) {
-	animation-delay: 0.15s;
-}
-.mw-pulse__bar:nth-child(3) {
-	animation-delay: 0.3s;
-}
-.mw-pulse__bar:nth-child(4) {
-	animation-delay: 0.45s;
-}
-.mw-pulse__bar:nth-child(5) {
-	animation-delay: 0.6s;
-}
-.mw-pulse__bar:nth-child(odd) {
-	width: 100%;
-}
-.mw-pulse__bar:nth-child(even) {
-	width: 72%;
-}
+	.mw-pulse__bar {
+		height: 0.75rem;
+		border-radius: 4px;
+		background: var(--color-background-sunken);
+		animation: mw-pulse-fade 1.4s ease-in-out infinite;
+	}
 
-@keyframes mw-pulse-fade {
-	0%,
-	100% {
-		opacity: 0.35;
+	.mw-pulse__bar:nth-child(1) {
+		animation-delay: 0s;
 	}
-	50% {
-		opacity: 1;
+	.mw-pulse__bar:nth-child(2) {
+		animation-delay: 0.15s;
+	}
+	.mw-pulse__bar:nth-child(3) {
+		animation-delay: 0.3s;
+	}
+	.mw-pulse__bar:nth-child(4) {
+		animation-delay: 0.45s;
+	}
+	.mw-pulse__bar:nth-child(5) {
+		animation-delay: 0.6s;
+	}
+	.mw-pulse__bar:nth-child(odd) {
+		width: 100%;
+	}
+	.mw-pulse__bar:nth-child(even) {
+		width: 72%;
 	}
-}
 
-.mw-spinner {
-	width: 2rem;
-	height: 2rem;
-	border: 3px solid var(--ifm-color-emphasis-200, #ebedf0);
-	border-top-color: var(--ifm-color-primary, #e0367c);
-	border-radius: 50%;
-	animation: mw-spin 0.7s linear infinite;
-}
+	@keyframes mw-pulse-fade {
+		0%,
+		100% {
+			opacity: 0.35;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
 
-.mw-spinner--small {
-	width: 1.25rem;
-	height: 1.25rem;
-	border-width: 2px;
-}
+	.mw-spinner {
+		width: 2rem;
+		height: 2rem;
+		border: 3px solid var(--color-separator);
+		border-top-color: var(--color-accent);
+		border-radius: 50%;
+		animation: mw-spin 0.7s linear infinite;
+	}
 
-.mw-spinner--large {
-	width: 3rem;
-	height: 3rem;
-	border-width: 4px;
-}
+	.mw-spinner--small {
+		width: 1.25rem;
+		height: 1.25rem;
+		border-width: 2px;
+	}
 
-@keyframes mw-spin {
-	to {
-		transform: rotate(360deg);
+	.mw-spinner--large {
+		width: 3rem;
+		height: 3rem;
+		border-width: 4px;
 	}
-}
 
-.mw-staged {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	width: 100%;
-	max-width: 360px;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
+	@keyframes mw-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 
-.mw-staged__step {
-	display: flex;
-	align-items: center;
-	gap: 0.6rem;
-	padding: 0.4rem 0.6rem;
-	border-radius: 4px;
-	font-size: 0.85rem;
-	transition:
-		background 0.3s,
-		color 0.3s;
-}
+	.mw-staged {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 360px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
 
-.mw-staged__step--pending {
-	color: var(--ifm-color-emphasis-500, #8c8c8c);
-}
+	.mw-staged__step {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.4rem 0.6rem;
+		border-radius: 4px;
+		font-size: 0.85rem;
+		transition:
+			background 0.3s,
+			color 0.3s;
+	}
 
-.mw-staged__step--active {
-	color: var(--ifm-color-primary, #e0367c);
-	background: color-mix(in srgb, var(--ifm-color-primary, #e0367c) 8%, transparent);
-	font-weight: 600;
-}
+	.mw-staged__step--pending {
+		color: var(--color-text-tertiary);
+	}
 
-.mw-staged__step--complete {
-	color: var(--ifm-color-success, #1aa84d);
-}
+	.mw-staged__step--active {
+		color: var(--color-accent);
+		background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+		font-weight: 600;
+	}
 
-.mw-staged__icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 1.25rem;
-	height: 1.25rem;
-	flex-shrink: 0;
-}
+	.mw-staged__step--complete {
+		color: var(--color-state-success);
+	}
 
-.mw-staged__dot {
-	width: 0.55rem;
-	height: 0.55rem;
-	border-radius: 50%;
-	background: var(--ifm-color-primary, #e0367c);
-	animation: mw-pulse-dot 1s ease-in-out infinite;
-}
+	.mw-staged__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		flex-shrink: 0;
+	}
 
-@keyframes mw-pulse-dot {
-	0%,
-	100% {
-		opacity: 0.3;
-		transform: scale(0.8);
+	.mw-staged__dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 50%;
+		background: var(--color-accent);
+		animation: mw-pulse-dot 1s ease-in-out infinite;
 	}
-	50% {
-		opacity: 1;
-		transform: scale(1.2);
+
+	@keyframes mw-pulse-dot {
+		0%,
+		100% {
+			opacity: 0.3;
+			transform: scale(0.8);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
 	}
-}
 
-.mw-staged__check {
-	width: 1rem;
-	height: 1rem;
-	position: relative;
-}
+	.mw-staged__check {
+		width: 1rem;
+		height: 1rem;
+		position: relative;
+	}
 
-.mw-staged__check::before {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 25%;
-	width: 0.35rem;
-	height: 0.65rem;
-	border: solid var(--ifm-color-success, #1aa84d);
-	border-width: 0 2px 2px 0;
-	transform: translateY(-60%) rotate(45deg);
-}
+	.mw-staged__check::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 25%;
+		width: 0.35rem;
+		height: 0.65rem;
+		border: solid var(--color-state-success);
+		border-width: 0 2px 2px 0;
+		transform: translateY(-60%) rotate(45deg);
+	}
 
-/* #endregion */
+	/* #endregion */
 
-/* #region Demo map (react-map-gl/maplibre shell) */
+	/* #region Demo map (react-map-gl/maplibre shell) */
 
-/*
- * The <DemoMap> wrapper. Sizing is the host's call (pass `style`/`className`), but a min-height keeps
+	/*
+ * The <MapCanvas> wrapper. Sizing is the host's call (pass `style`/`className`), but a min-height keeps
  * the map from collapsing to zero when a consumer forgets. The inner <Map> fills 100% of this box.
  * The host must ALSO import `maplibre-gl/dist/maplibre-gl.css` for the map's own control/canvas styles.
  */
-.mw-demo-map {
-	position: relative;
-	width: 100%;
-	min-height: 320px;
-	overflow: hidden;
-}
+	.mw-demo-map {
+		position: relative;
+		width: 100%;
+		min-height: 320px;
+		overflow: hidden;
+	}
 
-/*
+	/*
  * The demo fills its positioning context; the host sizes it (a full-viewport wrapper in docs). The map is the
  * background layer, the control panel floats over the top-left (bottom on narrow screens). A host that wants a
  * different layout can restyle these classes without touching the components.
  */
-.mw-geocoder-demo {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-height: 480px;
-}
-
-.mw-geocoder-demo__map {
-	position: absolute;
-	inset: 0;
-}
+	.mw-geocoder-demo {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: 480px;
+	}
 
-.mw-demo-controls {
-	position: absolute;
-	top: 1rem;
-	left: 1rem;
-	z-index: 2;
-	width: min(360px, calc(100% - 2rem));
-	max-height: calc(100% - 2rem);
-	overflow-y: auto;
-	padding: 1rem;
-	border-radius: 10px;
-	background: color-mix(in srgb, var(--ifm-background-surface-color, #fff) 92%, transparent);
-	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
-	font-size: 0.95rem;
-}
+	.mw-geocoder-demo__map {
+		position: absolute;
+		inset: 0;
+	}
 
-@media (max-width: 600px) {
 	.mw-demo-controls {
-		top: auto;
-		bottom: 1rem;
+		position: absolute;
+		top: 1rem;
 		left: 1rem;
-		right: 1rem;
-		width: auto;
+		z-index: 2;
+		width: min(360px, calc(100% - 2rem));
+		max-height: calc(100% - 2rem);
+		overflow-y: auto;
+		padding: 1rem;
+		border-radius: 10px;
+		background: color-mix(in srgb, var(--color-background-raised) 92%, transparent);
+		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
+		font-size: 0.95rem;
 	}
-}
 
-/* #endregion */
+	@media (max-width: 600px) {
+		.mw-demo-controls {
+			top: auto;
+			bottom: 1rem;
+			left: 1rem;
+			right: 1rem;
+			width: auto;
+		}
+	}
 
-/* #region Demo control field (version / compare-version selects) */
+	/* #endregion */
 
-.mw-demo-control {
-	margin-bottom: 0.75rem;
-}
+	/* #region Demo control field (version / compare-version selects) */
 
-.mw-demo-control__label {
-	display: block;
-	margin-bottom: 0.25rem;
-	font-weight: 600;
-	font-size: 0.9rem;
-}
+	.mw-demo-control {
+		margin-bottom: 0.75rem;
+	}
 
-.mw-demo-control__select {
-	width: 100%;
-	padding: 0.4rem;
-	font: inherit;
-	border: 1px solid var(--ifm-color-emphasis-300, #d1d5db);
-	border-radius: 6px;
-	background: var(--ifm-background-surface-color, #fff);
-	color: var(--ifm-font-color-base, inherit);
-}
+	.mw-demo-control__label {
+		display: block;
+		margin-bottom: 0.25rem;
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
 
-.mw-demo-control__select:disabled {
-	opacity: 0.5;
-}
+	.mw-demo-control__select {
+		width: 100%;
+		padding: 0.4rem;
+		font: inherit;
+		border: 1px solid var(--control-border);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		color: var(--color-text-primary);
+	}
 
-/* #endregion */
+	.mw-demo-control__select:disabled {
+		opacity: 0.5;
+	}
 
-/* #region Backend indicator + WASM toggle / compare toggle */
+	/* #endregion */
 
-.mw-demo-backend,
-.mw-demo-compare {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-	flex-wrap: wrap;
-	margin-bottom: 0.75rem;
-	font-size: 0.85rem;
-}
+	/* #region Backend indicator + WASM toggle / compare toggle */
 
-.mw-demo-compare {
-	display: block;
-}
+	.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-backend__active {
-	opacity: 0.7;
-}
+	.mw-demo-compare {
+		display: block;
+	}
 
-.mw-demo-backend__toggle,
-.mw-demo-compare__toggle {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25rem;
-	cursor: pointer;
-	opacity: 0.8;
-}
+	.mw-demo-backend__active {
+		opacity: 0.7;
+	}
 
-.mw-demo-compare__toggle {
-	margin-bottom: 0.5rem;
-}
+	.mw-demo-backend__toggle,
+	.mw-demo-compare__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		cursor: pointer;
+		opacity: 0.8;
+	}
 
-.mw-demo-compare__status {
-	margin: 0.25rem 0 0;
-	font-size: 0.8rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-}
+	.mw-demo-compare__toggle {
+		margin-bottom: 0.5rem;
+	}
 
-/* #endregion */
+	.mw-demo-compare__status {
+		margin: 0.25rem 0 0;
+		font-size: 0.8rem;
+		color: var(--color-text-secondary);
+	}
 
-/* #region Place autocomplete listbox (reuses .mw-chip) */
+	/* #endregion */
 
-.mw-demo-suggest {
-	margin-top: 0.75rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.4rem;
-	align-items: baseline;
-}
+	/* #region Place autocomplete listbox (reuses .mw-chip) */
 
-.mw-demo-suggest__label {
-	font-size: 0.85rem;
-	color: var(--ifm-color-emphasis-600, #6e6e6e);
-	margin-right: 0.25rem;
-}
+	.mw-demo-suggest {
+		margin-top: 0.75rem;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+		align-items: baseline;
+	}
+
+	.mw-demo-suggest__label {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+		margin-right: 0.25rem;
+	}
+
+	.mw-chip--active {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 1px;
+	}
+
+	/* #endregion */
+
+	/* #region Span ribbon (SpanHighlight) — each tagged span is a column: the text on top, tinted by tier, the tag beneath */
+
+	.mw-spans {
+		margin: 0.5rem 0 1rem 0;
+	}
+
+	.mw-spans__legend {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.5rem;
+	}
+
+	.mw-spans__swatch {
+		display: inline-block;
+		width: 0.8rem;
+		height: 0.8rem;
+		border-radius: 2px;
+		margin-left: 0.4rem;
+	}
+
+	.mw-spans__track {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		row-gap: 1.5rem;
+		padding: 0.5rem 0.6rem;
+		border: 1px solid var(--color-separator);
+		border-radius: 6px;
+		background: var(--color-background-raised);
+		font-family: var(--font-family-code);
+		font-size: 0.9rem;
+		line-height: 1.4;
+	}
+
+	.mw-spans__seg {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.mw-spans__text {
+		padding: 0.05rem 0.1rem;
+		border-bottom: 2px solid transparent;
+		white-space: pre;
+	}
+
+	.mw-spans__tag {
+		margin-top: 0.15rem;
+		font-size: 0.6rem;
+		line-height: 1;
+		text-align: center;
+		letter-spacing: 0.02em;
+		color: var(--color-text-secondary);
+		white-space: nowrap;
+	}
+
+	.mw-spans__gap {
+		display: inline-flex;
+		align-items: flex-start;
+		white-space: pre;
+		color: var(--color-text-tertiary);
+	}
+
+	/* The tier tints match .mw-conf__bar--high/--mid/--low. */
+	.mw-spans__seg--high .mw-spans__text {
+		background: rgba(26, 168, 77, 0.18);
+		border-bottom-color: #1aa84d;
+	}
+
+	.mw-spans__seg--mid .mw-spans__text {
+		background: rgba(230, 168, 0, 0.18);
+		border-bottom-color: #e6a800;
+	}
+
+	.mw-spans__seg--low .mw-spans__text {
+		background: rgba(216, 80, 74, 0.18);
+		border-bottom-color: #d8504a;
+	}
+
+	.mw-spans__swatch--high {
+		background: #1aa84d;
+	}
 
-.mw-chip--active {
-	outline: 2px solid var(--ifm-color-primary, #e0367c);
-	outline-offset: 1px;
+	.mw-spans__swatch--mid {
+		background: #e6a800;
+	}
+
+	.mw-spans__swatch--low {
+		background: #d8504a;
+	}
+
+	/* #endregion */
+
+	/* #region Stage timing (TimingPanel) — a stacked bar by wall-clock, stage hues, never the confidence colours */
+
+	.mw-timing {
+		margin: 1rem 0;
+		font-size: 0.8rem;
+	}
+
+	.mw-timing__heading {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.35rem;
+	}
+
+	.mw-timing__total {
+		font-family: var(--font-family-code);
+		text-transform: none;
+		letter-spacing: 0;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__bar {
+		display: flex;
+		width: 100%;
+		height: 0.7rem;
+		border-radius: 4px;
+		overflow: hidden;
+		background: var(--color-background-sunken);
+	}
+
+	.mw-timing__seg {
+		height: 100%;
+	}
+
+	.mw-timing__legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem 1rem;
+		margin-top: 0.4rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.mw-timing__ms {
+		font-family: var(--font-family-code);
+		color: var(--color-text-secondary);
+	}
+
+	.mw-timing__swatch {
+		display: inline-block;
+		width: 0.7rem;
+		height: 0.7rem;
+		border-radius: 2px;
+	}
+
+	.mw-timing__seg--shape {
+		background: #3578e5;
+	}
+
+	.mw-timing__seg--classify {
+		background: #8b5cf6;
+	}
+
+	.mw-timing__seg--resolve {
+		background: #14b8a6;
+	}
+
+	/* #endregion */
+
+	/* #region Containment tree (TreeView) — nested lists with a guide rail per level */
+
+	.mw-tree {
+		margin: 0.5rem 0 0 0;
+	}
+
+	.mw-tree__children {
+		list-style: none;
+		margin: 0;
+		padding-left: 1.1rem;
+	}
+
+	/* Nested levels get a guide rail; the outermost list sits flush. */
+	.mw-tree__children .mw-tree__children {
+		border-left: 1px solid var(--control-border);
+		margin-left: 0.3rem;
+	}
+
+	.mw-tree__node {
+		margin: 0.15rem 0;
+	}
+
+	.mw-tree__row {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-size: 0.85rem;
+	}
+
+	.mw-tree__tag {
+		font-weight: 600;
+		padding: 0 0.3rem;
+		border-radius: 3px;
+		border-bottom: 2px solid transparent;
+	}
+
+	.mw-tree__value {
+		font-family: var(--font-family-code);
+	}
+
+	.mw-tree__conf {
+		font-family: var(--font-family-code);
+		font-size: 0.75rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-tree__tag--high {
+		background: rgba(26, 168, 77, 0.18);
+		border-bottom-color: #1aa84d;
+	}
+
+	.mw-tree__tag--mid {
+		background: rgba(230, 168, 0, 0.18);
+		border-bottom-color: #e6a800;
+	}
+
+	.mw-tree__tag--low {
+		background: rgba(216, 80, 74, 0.18);
+		border-bottom-color: #d8504a;
+	}
+
+	/* #endregion */
+
+	/* #region No-hit diagnostic (FailureDiagnostic) — a structured panel, tinted informational rather than red */
+
+	.mw-failure {
+		margin-top: 1rem;
+		padding: 0.75rem 1rem;
+		background: var(--color-state-warning-background);
+		border-left: 3px solid var(--color-state-warning);
+		border-radius: 4px;
+	}
+
+	.mw-failure h2 {
+		font-size: 1rem;
+		margin: 0 0 0.5rem 0;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-state-warning);
+	}
+
+	.mw-failure ul {
+		margin: 0;
+		padding-left: 1.25rem;
+		font-size: 0.875rem;
+		color: var(--color-text-primary);
+	}
+
+	.mw-failure li + li {
+		margin-top: 0.35rem;
+	}
+
+	/* #endregion */
+
+	/* #region About box (About) — the collapsible product explainer */
+
+	.mw-about {
+		margin-bottom: 1rem;
+		border: 1px solid var(--control-border);
+		border-radius: 8px;
+		background: var(--color-background-raised);
+		font-size: 0.9rem;
+	}
+
+	.mw-about[open] {
+		background: var(--color-background-canvas);
+	}
+
+	.mw-about__summary {
+		padding: 0.65rem 0.75rem;
+		cursor: pointer;
+		user-select: none;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		border-radius: 8px;
+	}
+
+	.mw-about__summary:hover {
+		background: var(--control-background);
+	}
+
+	.mw-about__icon {
+		font-size: 1.1rem;
+		opacity: 0.7;
+	}
+
+	.mw-about__body {
+		padding: 0 0.75rem 0.75rem;
+	}
+
+	.mw-about__section {
+		margin-top: 0.75rem;
+	}
+
+	.mw-about__section:first-child {
+		margin-top: 0;
+	}
+
+	.mw-about__heading {
+		font-size: 0.9rem;
+		font-weight: 700;
+		margin: 0 0 0.3rem;
+		color: var(--color-text-primary);
+	}
+
+	.mw-about__section p {
+		margin: 0;
+		line-height: 1.6;
+		color: var(--color-text-secondary);
+	}
+
+	.mw-about__section code {
+		font-size: 0.85rem;
+		padding: 0.1rem 0.3rem;
+		background: var(--color-background-sunken);
+		border-radius: 3px;
+	}
+
+	.mw-about__legend {
+		list-style: none;
+		margin: 0.5rem 0 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+
+	.mw-about__item {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 0.85rem;
+	}
+
+	.mw-about__swatch {
+		flex-shrink: 0;
+		width: 10px;
+		height: 10px;
+		border-radius: 2px;
+	}
+
+	.mw-about__swatch--high {
+		background: #22c55e;
+	}
+
+	.mw-about__swatch--mid {
+		background: #f59e0b;
+	}
+
+	.mw-about__swatch--low {
+		background: #ef4444;
+	}
 }