/* ============================================================
   mea-web page styles — modeled on design-system/reference/
   02-layout.css (@layer layout: structure only, not one color)
   and 03-design.css (@layer design: paint only, every value a
   token). Zero hardcoded hex (D10) — a test gates this file.
   ============================================================ */

/* Global [hidden] guard (UNLAYERED + !important on purpose).
   Progressive-enhancement JS across the app hides elements by SETTING
   the `hidden` attribute (static map, voice fallback, the no-JS
   "Estimate from photo" button, etc.), but component `display` rules
   (e.g. `.btn { display: inline-flex }`, `.citation-map { display: grid }`)
   OVERRIDE the UA `[hidden] { display: none }` in the cascade, leaving
   the "hidden" element visible. Per-component `.x[hidden]` guards only
   fix the components they name; this single unlayered `!important` rule
   makes the `hidden` attribute authoritative EVERYWHERE — the standard
   normalize/reset posture. Showing an element still just removes the
   attribute (JS never relies on overriding this rule). */
[hidden] {
	display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Citizen (participant) dark identity at BODY scope.
   The production theme (frontend/app/theme.css) scopes the dark
   --t-* rebind to `body.citizen-theme .app-screen` so the SPA's
   desk shell stays light. mea-web renders one role per request, so
   the WHOLE participant page — shell included — is dark; we promote
   the same dark token palette to body scope (covering the shell
   tokens .app-screen omits, e.g. --t-topbar-bg). Token-only (D10).
   ────────────────────────────────────────────────────────────── */
@layer theme {
	body.citizen-theme {
		--t-hero-bg: radial-gradient(120% 90% at 50% 15%, var(--mea-navy-light), var(--mea-navy) 70%);
		--t-hero--fg: var(--mea-white);
		/* Secondary text and links on that dark hero card. The card palette
		   (--t-text-secondary, --t-accent) is dark-on-light and was barely
		   readable here. Other skins fall back to those. */
		--t-hero--fg-secondary: var(--mea-cg-3);
		--t-hero--link: var(--mea-baby-blue);
	}

	/* Desk pages paint the root dark gradient behind .app-screen, but
	   frontend/app/theme.css binds .app-screen's page-text tokens for a
	   light page, so any text that inherits .app-screen's colour (a page
	   title with no rule of its own, an unstyled form) was dark on dark.
	   Give the page-text tokens back their root values, which are made for
	   the gradient. Cards keep the card palette: the white-card rule in
	   theme.css paints them with --t-text. */
	body.desk-portal .app-screen {
		--t-bg-text: var(--mea-white);
		--t-bg-text-secondary: var(--mea-cg-3);
		--t-bg-text-muted: var(--mea-cg-4);
	}
}

/* ──────────────────────────────────────────────────────────────
   @layer layout — STRUCTURE ONLY.
   ────────────────────────────────────────────────────────────── */
@layer layout {

	body {
		font-family: var(--mea-font-citizen-body);
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
	}

	dialog {
		padding: var(--mea-space-5);
		border-radius: var(--mea-radius-3xl);
		max-block-size: 90vh;

		& .dialog-header {
			padding-block-end: var(--mea-space-4);
			border-block-end-width: var(--mea-line-hairline);

			display: flex;
			flex-direction: row;
			align-items: center;

			& > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
				flex-grow: 1;
			}
		}

		& .dialog-footer {
			display: flex;
			flex-direction: row;
			justify-content: end;
			gap: var(--mea-space-2);
		}

		& a.close-dialog-btn {
			display: contents;
		}
	}

	svg.lucide {
		inline-size: var(--mea-space-6);
		block-size: var(--mea-space-6);
	}

	.citizen-theme {
		& .shell {
			display: flex;
			align-items: flex-start;
			gap: var(--mea-space-5);
		}
	}

	/* Skip link (a11y): visually hidden until focused, then revealed at the
     top-left above all content so keyboard users can jump past the appbar
     straight to <main id="main">. Structure only here; paint in @layer design. */
	.skip-link {
		position: absolute;
		top: var(--mea-space-2);
		left: var(--mea-space-2);
		z-index: var(--mea-z-top);
		padding: var(--mea-space-2) var(--mea-space-4);
		border-radius: var(--mea-radius-md);
		text-decoration: none;
		transform: translateY(-200%);
	}

	.skip-link:focus,
	.skip-link:focus-visible {
		transform: translateY(0);
	}

	.mea-logo {
		height: var(--mea-space-6);
	}

	/* The jurisdiction's own logo/seal as the primary brand (base.html emits
	   .tenant-seal alongside .mea-logo so the appbar sizing carries over;
	   width stays auto for non-square seals). */
	.tenant-seal {
		width: auto;
		object-fit: contain;
		max-height: 96px;
		max-width: 96px;
	}

	/* Landing hero seal: the county mark leads the hero (structure only —
	   paint stays token-driven in the design layer below). */
	.tenant-landing__seal {
		height: var(--mea-space-16);
		width: auto;
		object-fit: contain;
		justify-self: start;
	}

	/* /admin/branding: current-seal preview (structure only). */
	.admin-branding__preview {
		display: grid;
		gap: var(--mea-space-2);
		margin: 0;
		padding: var(--mea-space-4);
	}

	.admin-branding__seal {
		height: var(--mea-space-16);
		width: auto;
		object-fit: contain;
	}

	.admin-branding__meta {
		font-size: var(--mea-text-sm);
	}

	/* Footer: the MEA platform mark (the seal is the primary brand above). */
	.appfooter__mea-logo {
		height: var(--mea-space-5);
		width: auto;
	}

	.appfooter__powered {
		font-size: var(--mea-text-xs);
	}

	.appbar {
		display: flex;
		align-items: center;
		max-width: 100vw;

		padding: var(--mea-space-7) var(--mea-gutter-mobile-l);
		position: relative;

		&:has(.tenant-seal) {
			padding-block: var(--mea-space-3);
		}

		& .appbar__left {
			position: absolute;
		}

		& #appbar-branding {
			display: flex;
			align-items: center;
			margin-inline: auto;
			gap: var(--mea-space-4);

			& .name {
				font-family: var(--mea-font-heading);
				font-weight: var(--mea-w-extrabold);
				letter-spacing: var(--mea-ls-wide);
			}
		}
	}

	@media (min-width: 48rem) {
		.appbar #appbar-branding {
		}
	}

	@media (max-width: 48rem) {
		.appbar #appbar-branding {
			& .name {
				display: none;
			}
		}
	}

	.appbar__session {
		display: flex;
	}

	.page {
		width: 100%;
		max-width: var(--mea-app-max-w);
		margin: 0 auto;
		padding-inline: var(--mea-gutter-mobile);
		display: grid;
		gap: var(--mea-space-6);
		align-content: start;
		container-type: inline-size;
	}

	/* Responsive shell width. The mobile token (430px) is the phone-first base;
     widen on larger viewports so desk dashboards and tables use the space.
     `.page` is the container-query context, so until it widens, every
     `@container (max-width: …)` rule in the app sheets matches and collapses
     each layout to one column — which is why the cap must scale. The -tablet
     and -desktop tokens already exist in tokens.css; this wires them.
     Participant (citizen) views stay phone-to-tablet width by design
     (D11 mobile-first, D12 trauma-informed / max 3 actions). */
	@media (min-width: 48rem) {
		.page {
			max-width: var(--mea-app-max-w-tablet);
		}
	}

	@media (min-width: 75rem) {
		.page {
			max-width: var(--mea-app-max-w-desktop);
		}

		body.citizen-theme .page {
			max-width: var(--mea-app-max-w-tablet);
		}
	}

	.page__title {
		font-size: var(--mea-text-2xl);
		line-height: var(--mea-lh-tight);
	}

	.sheet {
		border-radius: var(--mea-space-5);
		padding: var(--mea-space-4);
	}


	.panel {
		display: grid;
		gap: var(--mea-space-3);
	}

	.panel__title {
		font-size: var(--mea-text-lg);
	}

	.panel__hint,
	.panel__title {
		line-height: var(--mea-lh-snug);
	}

	/* Sign-in / verify forms — a narrow centered card; they must NOT stretch to
     the wide desk `.page` width on desktop (tables are wide, auth forms are not). */
	.signin {
		padding-top: var(--mea-space-8);
		max-width: 28rem;
		margin-inline: auto;
		width: 100%;
	}

	form, .form {
		display: grid;
		gap: var(--mea-space-4);

		& main, & .main {
			display: grid;
			gap: var(--mea-space-4);
		}

		& fieldset {
			display: grid;
			gap: var(--mea-space-4);
		}
	}

	input:not([type]), input[type="text"], input[type="number"], input[type="search"] {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border-width: 1px;
	}

	.form__field {
		display: grid;
		gap: var(--mea-space-1);
	}

	.form__label {
		font-size: var(--mea-text-sm);
	}

	.form__input {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
		font: inherit;
		width: 100%;
	}

	.form-error {
		padding: var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
	}

	.notice {
		display: grid;
		gap: var(--mea-space-2);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
	}

	.notice__title {
		font-size: var(--mea-text-md);
		line-height: var(--mea-lh-snug);
	}

	.notice__body {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	/* Program card */
	.deals {
		display: grid;
		gap: var(--mea-space-3);
	}

	.case {
		display: grid;
		gap: var(--mea-space-2);
		padding: var(--mea-space-5);
		border-radius: var(--mea-radius-2xl);
	}

	.progress {
		inline-size: 100%;
		block-size: 6px;
		border-radius: var(--mea-radius-pill);
		overflow: hidden;
		border: 0;
		appearance: none;
		-webkit-appearance: none;
	}

	.progress::-webkit-progress-bar {
		border-radius: var(--mea-radius-pill);
	}

	/* Task list */
	.task-list {
		display: grid;
		gap: var(--mea-space-3);
	}

	.task {
		display: grid;
		gap: var(--mea-space-1) var(--mea-space-4);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
	}

	.task__name {
		font-size: var(--mea-text-lg);
		font-weight: var(--mea-w-bold);
	}

	.task__where {
		font-size: var(--mea-text-sm);
	}

	.task__when {
		font-size: var(--mea-text-sm);
	}

	.task__meta {
		font-size: var(--mea-text-xs);
	}

	/* Notifications */
	.notifications {
		display: grid;
		gap: var(--mea-space-3);
	}

	.notification-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.notification {
		display: grid;
		gap: var(--mea-space-1);
		padding: var(--mea-space-3) var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border-inline-start: 3px solid;
	}

	.notification__message {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	.notification__when {
		font-size: var(--mea-text-xs);
	}

	/* Boundary + error pages */
	.boundary,
	.error-page {
		padding-top: var(--mea-space-8);
	}

	.boundary__body,
	.error-page__body {
		font-size: var(--mea-text-base);
		line-height: var(--mea-lh-normal);
	}

	.error-page__code {
		font-size: var(--mea-text-hero);
		font-weight: var(--mea-w-extrabold);
		line-height: var(--mea-lh-tight);
	}

	.dashboard--officer {
		& .actions {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 48rem) {
		/* there can only be one responsive-primary-actions per page, so use id instead of class */
		#primary-actions {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: var(--mea-space-4);
		}

		body:has(#primary-actions) {
			& .appfooter {
				margin-block-end: calc(
					var(--mea-space-4) +
					var(--t-target-min) +
					var(--mea-space-4));
			}
		}
	}



	/* Buttons */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-3) var(--mea-space-5);
		border: 0;
		border-radius: var(--mea-radius-pill);
	}
	a.btn {
		text-decoration: none;
	}

	.btn--quiet {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-4);
		border: 1px solid;
	}

	.appfooter {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--mea-space-2);
		padding: var(--mea-space-7) var(--mea-gutter-mobile);

		& > .mea-attribution {
			display: inline-flex;
			align-items: center;

			& > .mea-logo {
				block-size: 1em;
				align-self: baseline;
				margin-inline: var(--mea-space-1);
			}
		}
	}

	.lang-form {
		display: flex;
		align-items: end;
		flex-wrap: wrap;
		gap: var(--mea-space-2);

		& details summary {
			padding: var(--mea-space-2) var(--mea-space-3);
			list-style: none;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: var(--mea-text-sm);
			margin-inline-start: 3px;

			&::after {
				content: "►";
				transition: rotate 0.2s ease-out;
				rotate: 0deg;
			}


		}
		& details[open] summary::after {
			rotate: 90deg;
		}

		& details {

			& .lang-options {
				gap: 0;
				margin-inline-start: var(--mea-space-4);

				& button[type="submit"] {
					background: none;
					border: none;
					padding: var(--mea-space-2) var(--mea-space-3);
					text-align: start;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: var(--mea-space-2);

					&[selected] {

						&::after {
							content: "✓"
						}
					}
				}
			}
		}
	}

	.lang-form__label {
		display: block;
		font-size: var(--mea-text-sm);
	}

	.lang-form__select {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
		font: inherit;
	}

	form.signout {
		margin: var(--mea-space-4);
		margin-block-start: var(--mea-space-8);
	}

	dialog.voice-recording {
		width: 100vw;
		max-width: 100vw;
		/* Same defect as dialog.photo-capture: 100vh is the LARGE viewport on
		   iOS Safari, so the dialog exceeds the visible area and the submit
		   control lands below the fold. A <dialog> does not scroll — the
		   founder had to rotate the phone to reach it. dvh tracks the visible
		   viewport; vh remains the fallback. */
		height: 100vh;
		height: 100dvh;
		max-height: 100dvh;
	}

	@keyframes vbar {
		0% {
			height: var(--mea-space-2);
		}
		100% {
			height: calc(var(--mea-space-10) - var(--mea-space-1));
		}
	}

	.voice-mic.btn {
		padding: var(--mea-space-3);
	}

	dialog.voice-recording[open] {
		display: flex;
		flex-direction: column;
		gap: var(--mea-space-2);
		/* Keep the controls clear of the iOS home indicator. */
		padding-block-end: max(var(--mea-space-3), env(safe-area-inset-bottom));

		& .indicator {
			flex-grow: 1;
			/* Without an explicit min-size a flex child will not shrink below
			   its content, so the indicator pushed the submit control off the
			   bottom. dvh alone does not fix that. */
			min-block-size: 0;
			overflow: hidden;
		}

		/* Whatever follows the indicator (the submit/stop controls) must never
		   be squeezed out by it. */
		& > :last-child {
			flex-shrink: 0;
		}
	}
	.voice-recording {

		& .title {
			font-size: var(--mea-text-2xl);
		}

		& .subtitle {
			font-size: var(--mea-text-md);
		}

		& .indicator {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		& .animated-bars {
			display: flex;
			gap: var(--mea-space-1);
			align-items: center;
			justify-content: center;
			height: calc(5 * var(--mea-space-5));
			width: calc(5 * var(--mea-space-5));
			border-width: var(--mea-space-1);
			border-radius: 50%;

			& .bar {
				height: var(--mea-space-2);
				width: var(--mea-space-1);
				border-radius: 2px;
				animation: vbar .8s ease-in-out infinite alternate;

				&:nth-child(2) { animation-delay: .1s; }
				&:nth-child(3) { animation-delay: .2s; }
				&:nth-child(4) { animation-delay: .3s; }
				&:nth-child(5) { animation-delay: .4s; }
				&:nth-child(6) { animation-delay: .15s; }
				&:nth-child(7) { animation-delay: .35s; }
			}
		}

		& .actions {
			display: flex;
			flex-direction: column;
			gap: var(--mea-space-2);
		}
	}

	input[type="checkbox"].check-gate:not(:checked) + .check-gated {
		display: none;
	}
	.check-gate:has(:invalid) + .check-gated {
		display: none;
	}

	dialog.photo-capture[open] {
		display: flex;
		flex-direction: column;
		gap: var(--mea-space-2);
		padding: 0;

		& .preview {
			flex-grow: 1;
			display: flex;
			/* A flex child will not shrink below its CONTENT size without an
			   explicit min-size: the video held the preview open and pushed
			   .actions (Cancel / Capture) off the bottom of the dialog. This is
			   the second half of the unreachable-controls bug — dvh alone does
			   not fix it. */
			min-block-size: 0;
			overflow: hidden;
			/* Its own compositing layer. iOS Safari can drop a live <video>
			   layer that sits under an overflow:hidden ancestor inside a
			   rounded top-layer <dialog>: the camera runs (the decoder gets
			   frames) but the officer sees a white box. Reported on demo
			   2026-10-06 (iPhone, Safari): 197 frames decoded, nothing shown. */
			transform: translateZ(0);

			& video {
				/* Explicit size, not only max-*: a percentage max-height on the
				   child of a flex item can resolve as indefinite in Safari. */
				width: 100%;
				height: 100%;
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}

			/* Barcode mode: the camera mirrored onto a canvas over the video
			   (photo-capture.js startPreviewMirror), for a Safari that reads
			   video frames but never paints them. Same box and fit as the
			   video. Once drawn it covers the video on every device, so the
			   script draws it at the box's device-pixel resolution. */
			& .preview-mirror {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
				pointer-events: none;
			}
		}
	
		& .actions {
			/* Never let the controls be squeezed out by the preview. */
			flex-grow: 0;
			flex-shrink: 0;
			margin: var(--mea-space-3);
			/* Keep the buttons clear of the iOS home indicator. */
			margin-block-end: max(var(--mea-space-3), env(safe-area-inset-bottom));

			display: flex;
			gap: var(--mea-space-3);
			flex-wrap: wrap;

			& > button {
				flex-grow: 1;
				flex-basis: auto;
			}
		}

	}

	.responsive-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: inherit;

		& .grow {
			flex: 1 0 0;
		}

	}
}

/* ──────────────────────────────────────────────────────────────
   @layer design — PAINT ONLY. Every value a token (D10).
   ────────────────────────────────────────────────────────────── */
@layer design {

	body {
		background: var(--t-bg);
		color: var(--t-bg-text);
	}

	dialog {
		border: none;

		&:target ~ .dialog-backdrop {
			background-color: rgba(10,22,40,.5);
		}

		& .dialog-header {
			border-block-end-color: var(--t-border);
			border-block-end-style: solid;
		}
	}


	/* Skip link paint: token-styled accent pill, visible against any theme. */
	.skip-link {
		background: var(--t-accent);
		color: var(--t-accent-text);
		font-weight: var(--mea-w-bold);
	}

	.skip-link:focus,
	.skip-link:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	.appbar {
		background: var(--t-topbar-bg);

		& .profile-icon {
			background: var(--mea-gray-200);
		}
	}

	#appbar-branding {
		color: var(--t-bg-text-secondary);
	}

	.page__title {
		font-family: var(--mea-font-citizen);
		font-weight: var(--mea-w-extrabold);
		letter-spacing: var(--mea-ls-tight);
	}

	body.citizen-theme .page__title {
		color: var(--t-bg-text);
	}

	/* The sheet sets its own ink beside its white background. Body text is
	   --t-bg-text, which is white, so any child without a colour rule of its
	   own (the /security intro, its status notice, the TOTP key) would
	   otherwise render white on white. */
	.sheet {
		background-color: var(--mea-white);
		color: var(--t-text);
	}

	.panel__title {
		font-family: var(--mea-font-citizen);
		font-weight: var(--mea-w-bold);
	}

	.panel__hint {
		font-size: var(--mea-text-sm);
		color: var(--t-text-secondary);
	}
	.signin .panel__hint {
		color: var(--t-bg-text-secondary);
	}

	.form__label {
		color: var(--t-text-secondary);
		font-weight: var(--mea-w-semibold);
	}
	.signin .form__label {
		color: var(--t-bg-text-secondary);
	}

	.form__input {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text);
	}

	.form__input:focus-visible {
		border-color: var(--t-border-focus);
	}

	.form-error {
		background: var(--t-bg-elevated);
		border-color: var(--t-warning);
		color: var(--t-text);
	}

	.notice {
		background: var(--t-bg-elevated);
		color: var(--t-text);
		border-color: var(--t-border);
	}

	.notice__title {
		color: var(--t-text);
		font-weight: var(--mea-w-bold);
	}

	.notice__body {
		color: var(--t-text-secondary);
	}

	.case {
		background: var(--t-hero-bg);
		box-shadow: var(--mea-shadow-card);
	}

	.case__eyebrow {
		display: none;
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
		color: var(--t-text-muted);
	}

	.case__title {
		font-family: var(--mea-font-citizen);
		font-size: var(--mea-text-3xl);
		font-weight: var(--mea-w-extrabold);
		letter-spacing: var(--mea-ls-tight);
		color: var(--t-hero--fg);
	}

	.case__status {
		font-size: var(--mea-text-md);
		color: var(--t-hero--fg-secondary, var(--t-text-secondary));
	}

	.progress {
		background: var(--t-bg-active);
	}

	.progress::-webkit-progress-bar {
		background: var(--t-bg-active);
	}

	.progress::-webkit-progress-value {
		background: var(--t-success);
	}

	.progress::-moz-progress-bar {
		background: var(--t-success);
	}

	.task {
		background: var(--t-card-bg);
		border: 1px solid var(--t-card-border);
	}

	.task__name {
		color: var(--t-text);
	}

	.task__where {
		color: var(--t-text-muted);
	}

	.task__when {
		color: var(--t-text-secondary);
	}

	.task__meta {
		color: var(--t-text-muted);
		font-weight: var(--mea-w-semibold);
	}

	.task--booked {
		border-color: var(--t-success);
	}

	.task--booked .task__meta {
		color: var(--t-success-text);
	}

	.task--overdue {
		border-color: var(--t-warning);
	}

	.task--overdue .task__meta {
		color: var(--t-warning);
	}

	.expand-toggle {
		position: absolute;
		opacity: 0;
		pointer-events: none;
		width: 0;
		height: 0;
	}

	.expandable-list li:not(:first-child) {
		display: none;
	}

	.expand-toggle:checked~.expandable-list li {
		display: list-item;
	}

	.expand-toggle:not(:checked)~.expand-label {
		& .hide {
			display: none;
		}
	}

	.expand-toggle:checked~.expand-label {
		& .show {
			display: none;
		}
	}


	.expand-label {
		cursor: pointer;
		color: var(--mea-blue-bright);
		font-weight: var(--mea-w-bold);
		font-size: var(--mea-text-md);
		display: inline-block;
		margin-top: var(--mea-space-3);
	}

	.expand-label:hover {
		color: var(--t-link-hover);
	}

	.notification {
		background: var(--t-card-bg);
		border-color: var(--t-card-border);
	}

	.notification--unread {
		border-inline-start-color: var(--t-accent);
	}

	.notification__message {
		color: var(--t-text);
	}

	.notification__when {
		color: var(--t-text-muted);
	}

	.boundary__body {
		color: var(--t-text-secondary);
	}

	/* Error pages sit straight on the dark page gradient (--t-bg), not on a
	   card, so they take the --t-bg-text* family. --t-text* is the card palette
	   and measured 1.1-2.3:1 here (MEA-123 item 10). Body text and links are
	   --t-bg-text (white, at least 8:1 across the gradient; --t-bg-text-
	   secondary drops to 4.4:1 in the radial glow the text crosses). The status
	   code is large display text, so --t-bg-text-secondary (4.4:1 or better)
	   clears the 3:1 large-text bar. */
	.error-page__body,
	.error-page .link,
	.error-page .link:hover {
		color: var(--t-bg-text);
	}

	.error-page__code {
		color: var(--t-bg-text-secondary);
	}

	.dashboard--officer {
		& .actions {
			background-color: alpha(from var(--t-card-bg) / 1%);
			backdrop-filter: blur(3px);
		}
	}

	/* Participant CTA: the royal-blue gradient pill (RECONCILIATION-2026-06-09
     — the accent family is the --mea-grad-cta gradient, NOT baby-blue fills). */
	.btn--primary {
		background: var(--mea-grad-cta);
		color: var(--mea-white);
		font-weight: var(--mea-w-bold);
		box-shadow: var(--mea-shadow-btn);
	}

	.btn--primary:active {
		transform: translateY(1px);
	}

	.btn--quiet {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text-secondary);
		font-weight: var(--mea-w-semibold);
	}

	.link {
		color: var(--t-link);
		font-weight: var(--mea-w-semibold);
	}

	.link:hover {
		color: var(--t-link-hover);
	}

	.appfooter__powered {
		color: var(--t-bg-text-secondary);
	}

	.lang-form__label {
		color: var(--t-text-secondary);
		font-weight: var(--mea-w-semibold);
	}

	.lang-form__select {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text);
	}

	.lang-form__select:focus-visible {
		border-color: var(--t-border-focus);
	}

	.voice-recording {

		& .animated-bars {
			border-style: solid;
			border-color: var(--mea-blue);

			& .bar {
				background-color: var(--mea-blue);
			}
		}
	}

}

/* ──────────────────────────────────────────────────────────────
   Wave 1 — desk-role dashboards. STRUCTURE ONLY in @layer layout;
   paint follows in @layer design below. The SPA's JS-sized visuals
   (donut, trend bars, caseload bars) are native <meter> elements
   plus per-bucket count text: no inline styles, no scripts.
   ────────────────────────────────────────────────────────────── */
@layer layout {

	.dashboard {
		display: grid;
		gap: var(--mea-space-6);
	}

	.dashboard__intro {
		display: grid;
		gap: var(--mea-space-1);
	}

	.dashboard__title {
		font-size: var(--mea-text-2xl);
		line-height: var(--mea-lh-tight);
	}

	.dashboard__subtitle {
		font-size: var(--mea-text-sm);
	}

	.metric-row {
		display: grid;
		gap: var(--mea-space-3);
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}

	.metric {
		display: grid;
		gap: var(--mea-space-1);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
		text-decoration: none;
	}

	.metric__label {
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.metric__value {
		font-size: var(--mea-text-2xl);
		font-weight: var(--mea-w-extrabold);
		line-height: var(--mea-lh-tight);
	}

	.metric__sub {
		font-size: var(--mea-text-xs);
	}

	.dashboard-columns {
		display: grid;
		gap: var(--mea-space-6);
		align-items: start;
	}

	@media (min-width: 56rem) {
		.dashboard-columns {
			grid-template-columns: 3fr 1fr;
		}
	}

	.dashboard-columns__col {
		display: grid;
		gap: var(--mea-space-6);
		align-content: start;
	}

	.dashboard-panel {
		display: grid;
		gap: var(--mea-space-3);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-3xl);
		border: 1px solid;
	}

	.dashboard-panel__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mea-space-3);
	}

	.dashboard-panel__title {
		font-size: var(--mea-text-md);
	}

	.dashboard-panel__meta,
	.dashboard-panel__link {
		font-size: var(--mea-text-sm);
	}

	.dashboard-panel__note {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	.panel-empty {
		padding: var(--mea-space-4) 0;
		text-align: center;
	}

	/* Tenant-admin config hub: sections of linked capability cards. Structure
     only; paint in @layer design. Every card is a plain <a> (no JS). */
	.config-section {
		display: grid;
		gap: var(--mea-space-3);
	}

	.config-section__title {
		font-size: var(--mea-text-md);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.config-grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--mea-space-3);
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}

	.config-card {
		display: grid;
	}

	.config-card__link {
		display: grid;
		gap: var(--mea-space-1);
		height: 100%;
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
		text-decoration: none;
	}

	.config-card__title {
		font-size: var(--mea-text-md);
	}

	.config-card__desc {
		font-size: var(--mea-text-sm);
	}

	.case-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--mea-text-sm);
	}

	.case-table th {
		text-align: left;
		padding: var(--mea-space-2);
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.case-table td {
		padding: var(--mea-space-2);
		border-top: 1px solid;
		vertical-align: middle;
	}

	.case-table__meta {
		white-space: nowrap;
	}

	.case-table__link {
		text-decoration: none;
		display: inline-block;
	}

	.person-cell {
		display: inline-flex;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.person-cell__avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--mea-space-8);
		height: var(--mea-space-8);
		flex: none;
		border-radius: var(--mea-radius-circle);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-bold);
	}

	.person-cell__detail {
		display: grid;
	}

	.person-cell__name {
		font-weight: var(--mea-w-semibold);
	}

	.person-cell__sub {
		font-size: var(--mea-text-xs);
	}

	.charge-tag,
	.case-badge,
	.status-badge {
		display: inline-block;
		padding: var(--mea-space-1) var(--mea-space-2);
		border-radius: var(--mea-radius-pill);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		white-space: nowrap;
	}

	/* Officer */
	.officer-profile {
		display: flex;
		align-items: center;
		gap: var(--mea-space-3);
		flex-wrap: wrap;
	}

	.officer-profile__avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--mea-space-10);
		height: var(--mea-space-10);
		flex: none;
		border-radius: var(--mea-radius-circle);
		font-weight: var(--mea-w-bold);
	}

	.officer-profile__info {
		display: grid;
		flex: 1;
		min-width: 10rem;
	}

	.officer-profile__name {
		font-size: var(--mea-text-xl);
		line-height: var(--mea-lh-tight);
	}

	.officer-profile__badge {
		font-size: var(--mea-text-sm);
	}

	.issue-group__heading {
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
		padding-top: var(--mea-space-2);
	}

	.issue-list {
		display: grid;
		gap: 0;
	}

	.issue-row__main {
		display: grid;
		gap: var(--mea-space-1);
	}

	.issue-row__name {
		font-weight: var(--mea-w-semibold);
	}

	.issue-row__detail {
		font-size: var(--mea-text-sm);
	}

	.issue-row__link {
		text-decoration: none;
	}

	/* Prosecutor: courts, outcomes, activity, drill panel */
	.court-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mea-space-2);
	}

	.court-tab {
		display: inline-flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-1) var(--mea-space-3);
		border-radius: var(--mea-radius-pill);
		border: 1px solid;
		text-decoration: none;
		font-size: var(--mea-text-sm);
	}

	.court-info {
		display: grid;
		gap: var(--mea-space-2);
		padding-top: var(--mea-space-2);
	}

	.court-info__pair {
		display: flex;
		justify-content: space-between;
		gap: var(--mea-space-3);
	}

	.court-info__value {
		font-weight: var(--mea-w-bold);
	}

	/* DA-portal landing (gap #4): branded header + config-driven per-location
	   court cards. Paint via tokens only (D10 — no hardcoded hex). */
	.da-portal__intro {
		display: grid;
		gap: var(--mea-space-1);
	}

	.da-portal__eyebrow {
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-bold);
		letter-spacing: var(--mea-ls-wide);
		text-transform: uppercase;
		color: var(--t-bg-text-secondary);
	}

	/* The intro sits on the page, not a card. */
	.da-portal__subtitle {
		color: var(--t-bg-text-secondary);
	}

	.court-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: var(--mea-space-4);
		padding-top: var(--mea-space-2);
	}

	.court-card {
		display: grid;
		gap: var(--mea-space-1);
		padding: var(--mea-space-4);
		border: 1px solid var(--t-border);
		border-radius: var(--mea-radius-lg);
		background: var(--t-bg-elevated);
		color: var(--t-text);
	}

	.court-card__name {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
		font-size: var(--mea-text-lg);
	}

	.court-card__type {
		font-size: var(--mea-text-sm);
		text-transform: capitalize;
		color: var(--t-text-secondary);
	}

	.court-card__address {
		font-size: var(--mea-text-sm);
		color: var(--t-text-muted);
	}

	.court-card__link {
		margin-top: var(--mea-space-2);
		justify-self: start;
		min-height: var(--t-target-min);
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-bold);
		color: var(--t-link);
	}

	.outcome-total {
		display: flex;
		align-items: baseline;
		gap: var(--mea-space-2);
	}

	.outcome-total__value {
		font-size: var(--mea-text-3xl);
		font-weight: var(--mea-w-extrabold);
	}

	.outcome-total__label {
		font-size: var(--mea-text-sm);
	}

	.chart-legend {
		display: grid;
		gap: var(--mea-space-2);
	}

	.chart-legend__item {
		display: flex;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.chart-legend__dot {
		width: var(--mea-space-2);
		height: var(--mea-space-2);
		flex: none;
		border-radius: var(--mea-radius-circle);
	}

	.chart-legend__label {
		flex: 1;
		font-size: var(--mea-text-sm);
	}

	.chart-legend__meter {
		flex: 1;
		min-width: 4rem;
	}

	.chart-legend__value {
		font-weight: var(--mea-w-bold);
		font-variant-numeric: tabular-nums;
	}

	.trend-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.trend-day {
		display: grid;
		grid-template-columns: 3rem 1fr auto;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.trend-day__label {
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
	}

	.trend-day__meter {
		width: 100%;
	}

	.trend-day__counts {
		font-size: var(--mea-text-xs);
		white-space: nowrap;
	}

	.drill-panel {
		display: grid;
		gap: var(--mea-space-3);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
	}

	.drill-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.drill-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mea-space-3);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.drill-row__main {
		display: flex;
		align-items: center;
		gap: var(--mea-space-2);
		flex-wrap: wrap;
	}

	.drill-row__name {
		font-weight: var(--mea-w-semibold);
	}

	.drill-row__meta {
		font-size: var(--mea-text-sm);
	}

	.drill-row__time {
		font-weight: var(--mea-w-bold);
		font-variant-numeric: tabular-nums;
	}

	.drill-empty {
		padding: var(--mea-space-3) 0;
		text-align: center;
	}

	/* Senior prosecutor */
	.savings-hero {
		display: grid;
		gap: var(--mea-space-4);
		padding: var(--mea-space-5);
		border-radius: var(--mea-radius-2xl);
	}

	.savings-hero__amount {
		font-size: var(--mea-text-4xl);
		font-weight: var(--mea-w-extrabold);
		line-height: var(--mea-lh-tight);
	}

	.savings-hero__label {
		font-size: var(--mea-text-sm);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.savings-hero__basis {
		font-size: var(--mea-text-sm);
	}

	.savings-hero__metrics {
		display: flex;
		gap: var(--mea-space-6);
		padding-top: var(--mea-space-2);
	}

	.savings-hero__metric {
		display: grid;
	}

	.savings-hero__metric-value {
		font-size: var(--mea-text-xl);
		font-weight: var(--mea-w-bold);
	}

	.savings-hero__metric-label {
		font-size: var(--mea-text-xs);
	}

	.caseload-chart {
		display: grid;
		gap: var(--mea-space-2);
	}

	.caseload-bar {
		display: grid;
		grid-template-columns: minmax(6rem, auto) 1fr auto;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.caseload-bar__label {
		font-size: var(--mea-text-sm);
	}

	.caseload-bar__meter {
		width: 100%;
	}

	.caseload-bar__value {
		font-weight: var(--mea-w-bold);
		font-variant-numeric: tabular-nums;
	}

	.cost-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.cost-row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--mea-space-3);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.cost-row__label {
		font-size: var(--mea-text-sm);
	}

	.cost-row__value {
		font-weight: var(--mea-w-bold);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	/* Shared lists (events, sessions, providers) */
	.event-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.event {
		display: grid;
		gap: var(--mea-space-1);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.event__time {
		font-size: var(--mea-text-xs);
	}

	.event__actor {
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-semibold);
	}

	.event__action {
		font-size: var(--mea-text-sm);
	}

	.session-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.session-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mea-space-3);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.session-item__info {
		display: grid;
		gap: var(--mea-space-1);
	}

	.session-item__name {
		font-weight: var(--mea-w-semibold);
	}

	.session-item__type {
		font-size: var(--mea-text-sm);
	}

	.session-item__time {
		font-size: var(--mea-text-sm);
		white-space: nowrap;
	}

	.session-item__link {
		text-decoration: none;
	}

	.provider-summary {
		display: flex;
		gap: var(--mea-space-6);
	}

	.provider-summary__stat {
		display: grid;
		gap: var(--mea-space-1);
	}

	.provider-summary__label {
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.provider-summary__value {
		font-size: var(--mea-text-2xl);
		font-weight: var(--mea-w-extrabold);
	}
}

/* Wave 1 — desk dashboards: PAINT ONLY, every value a token (D10). */
@layer design {

	.dashboard__subtitle {
		color: var(--t-bg-text-secondary);
	}

	.dashboard__title {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

	.metric {
		background: var(--t-card-bg);
		border-color: var(--t-card-border);
	}

	.metric--link {
		color: inherit;
	}

	.metric--link:hover {
		border-color: var(--t-border-focus);
	}

	.metric__label {
		color: var(--t-text-muted);
		font-weight: var(--mea-w-semibold);
	}

	.metric__sub {
		color: var(--t-text-secondary);
	}

	.metric__value--green {
		color: var(--t-success-text);
	}

	.metric__value--amber {
		color: var(--mea-amber-dark);
	}

	.metric__value--red {
		color: var(--mea-red-dark);
	}

	.metric__value--blue {
		color: var(--mea-blue);
	}

	/* The white card sets its own ink: a participant on a page with no
	   .app-screen root gets no card palette from theme.css, and text that
	   inherits would take the page's white. */
	.dashboard-panel,
	.drill-panel {
		background: var(--t-card-bg);
		color: var(--t-text);
		border-color: var(--t-card-border);
		box-shadow: var(--mea-shadow-card);
	}

	.dashboard-panel__title {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.dashboard-panel__meta,
	.dashboard-panel__note {
		color: var(--t-text-muted);
	}

	.dashboard-panel__link {
		color: var(--t-link);
		font-weight: var(--mea-w-semibold);
	}

	.dashboard-panel__link:hover {
		color: var(--t-link-hover);
	}

	/* Empty states sit both in cards and directly on the desk page, so they
	   take the page-text family, which a white card rebinds to dark. */
	.panel-empty,
	.drill-empty {
		color: var(--t-bg-text-secondary);
	}

	.config-section__title {
		color: var(--t-text-muted);
		font-weight: var(--mea-w-semibold);
	}

	.config-card__link {
		background: var(--t-card-bg);
		border-color: var(--t-card-border);
		color: var(--t-text);
		box-shadow: var(--mea-shadow-card);
	}

	.config-card__link:hover {
		border-color: var(--t-border-focus);
	}

	.config-card__link:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	.config-card__title {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.config-card__desc {
		color: var(--t-text-secondary);
	}

	.case-table th {
		color: var(--t-text-muted);
	}

	.case-table td {
		border-top-color: var(--t-border);
	}

	.case-table__meta {
		color: var(--t-text-secondary);
	}

	.case-table__link {
		color: inherit;
	}

	.case-table__link:hover .person-cell__name {
		color: var(--t-link);
	}

	.person-cell__avatar {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.person-cell__sub {
		color: var(--t-text-muted);
	}

	.charge-tag {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.charge-tag--drug {
		background: var(--mea-violet-light);
		color: var(--mea-violet);
	}

	.charge-tag--theft {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.charge-tag--property {
		background: var(--mea-orange-light);
		color: var(--mea-orange-dark);
	}

	.charge-tag--conduct {
		background: var(--mea-blue-50);
		color: var(--mea-blue-dark);
	}

	.charge-tag--dui {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.charge-tag--trespass {
		background: var(--mea-teal-light);
		color: var(--mea-teal-dark);
	}

	.charge-tag--assault {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.case-badge,
	.status-badge {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.case-badge--approved,
	.case-badge--accepted,
	.case-badge--completed,
	.case-badge--active,
	.status-badge--approved,
	.status-badge--accepted,
	.status-badge--completed {
		background: var(--mea-green-light);
		color: var(--mea-green-dark);
	}

	.case-badge--pending,
	.case-badge--pending_review,
	.case-badge--submitted,
	.case-badge--in_progress,
	.case-badge--under_review,
	.case-badge--review,
	.status-badge--pending,
	.status-badge--new,
	.status-badge--review,
	.status-badge--referred {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.case-badge--denied,
	.case-badge--closed,
	.case-badge--failed,
	.case-badge--overdue,
	.case-badge--missed,
	.status-badge--denied {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	/* ── DA triage-row signals: Priors, inline eligibility, live SLA window ──
	   All paint from design-system tokens (D10 — no hardcoded hex). */
	.priors-badge {
		display: inline-block;
		min-width: var(--mea-space-5);
		padding: var(--mea-space-1) var(--mea-space-2);
		border-radius: var(--mea-radius-pill);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-align: center;
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.priors-badge--has {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.priors-badge--unknown {
		background: transparent;
		color: var(--t-text-secondary);
	}

	.elig-badge {
		display: inline-block;
		padding: var(--mea-space-1) var(--mea-space-2);
		border-radius: var(--mea-radius-pill);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		white-space: nowrap;
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.elig-badge--eligible {
		background: var(--mea-green-light);
		color: var(--mea-green-dark);
	}

	.elig-badge--ineligible {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.elig-badge--review {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.elig-badge--unknown {
		background: transparent;
		color: var(--t-text-secondary);
	}

	.sla {
		display: inline-block;
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
	}

	.sla__date {
		display: block;
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-regular);
		color: var(--t-text-secondary);
	}

	.sla--ok {
		color: var(--mea-green-dark);
	}

	.sla--warn {
		color: var(--mea-amber-dark);
	}

	.sla--urgent {
		color: var(--mea-red-dark);
	}

	.sla--overdue {
		color: var(--mea-red-dark);
		font-weight: var(--mea-w-bold);
	}

	.officer-profile__avatar {
		background: var(--mea-grad-officer);
		color: var(--mea-white);
	}

	.officer-profile__name {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.officer-profile__badge {
		color: var(--t-text-muted);
	}

	.issue-group__heading {
		color: var(--t-text-muted);
	}

	.issue-row {
		border-top-color: var(--t-border);
	}

	.issue-row__detail {
		color: var(--t-text-secondary);
	}

	.issue-row__link {
		color: inherit;
	}

	.issue-row__link:hover {
		color: var(--t-link);
	}

	.court-tab {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text-secondary);
	}

	.court-tab--active {
		background: var(--t-accent);
		border-color: var(--t-accent);
		color: var(--t-accent-text);
	}

	.court-info__label {
		color: var(--t-text-secondary);
	}

	.outcome-total__label {
		color: var(--t-text-muted);
	}

	.chart-legend__label {
		color: var(--t-text-secondary);
	}

	.chart-legend__dot--green {
		background: var(--mea-green);
	}

	.chart-legend__dot--red {
		background: var(--mea-red);
	}

	.chart-legend__dot--amber {
		background: var(--mea-amber);
	}

	.chart-legend__dot--baby-blue {
		background: var(--mea-baby-blue);
	}

	.chart-legend__dot--blue {
		background: var(--mea-blue);
	}

	.chart-legend__dot--gray {
		background: var(--mea-gray-400);
	}

	.trend-day__label {
		color: var(--t-text-secondary);
	}

	.trend-day__counts {
		color: var(--t-text-muted);
	}

	.drill-row {
		border-top-color: var(--t-border);
	}

	.drill-row__meta {
		color: var(--t-text-secondary);
	}

	.savings-hero {
		background: var(--mea-grad-blue);
		color: var(--mea-white);
	}

	.savings-hero__label,
	.savings-hero__basis,
	.savings-hero__metric-label {
		color: var(--mea-baby-pale);
	}

	.caseload-bar__label {
		color: var(--t-text-secondary);
	}

	.cost-row {
		border-top-color: var(--t-border);
	}

	.cost-row__label {
		color: var(--t-text-secondary);
	}

	.cost-row__value--diversion {
		color: var(--t-success-text);
	}

	.cost-row--savings .cost-row__label,
	.cost-row__value--savings {
		color: var(--t-success-text);
		font-weight: var(--mea-w-bold);
	}

	.event {
		border-top-color: var(--t-border);
	}

	.event__time {
		color: var(--t-text-muted);
	}

	.event__action {
		color: var(--t-text-secondary);
	}

	.event__resource {
		font-weight: var(--mea-w-semibold);
		color: var(--t-text);
	}

	.session-item {
		border-top-color: var(--t-border);
	}

	.session-item__type {
		color: var(--t-text-secondary);
	}

	.session-item__time {
		color: var(--t-text-muted);
	}

	.session-item__link {
		color: inherit;
	}

	.session-item__link:hover {
		color: var(--t-link);
	}

	.provider-summary__label {
		color: var(--t-text-muted);
	}

	.provider-summary__value--active {
		color: var(--t-success-text);
	}

	.provider-summary__value--inactive {
		color: var(--t-text-muted);
	}
}

/* ──────────────────────────────────────────────────────────────
   Wave 4 — deals list + deal-detail. STRUCTURE ONLY (@layer layout);
   paint follows in @layer design below. No inline styles, no scripts:
   filter chips / sort headers / pagination are plain links, the bulk
   action bar + every detail mutation is a real <form>.
   ────────────────────────────────────────────────────────────── */
@layer layout {

	/* Accessible-but-invisible label text (no hex; structure only). */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.btn--outline {
		border: 1px solid;
	}

	.btn--block {
		display: flex;
		width: 100%;
	}

	.deals-page {
		display: grid;
		gap: var(--mea-space-5);
	}

	.deals-page__intro {
		display: grid;
		gap: var(--mea-space-1);
	}

	.deals-page__title {
		font-size: var(--mea-text-2xl);
		line-height: var(--mea-lh-tight);
	}

	.deals-page__subtitle {
		font-size: var(--mea-text-sm);
	}

	.filter-bar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mea-space-2);
	}

	.filter-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--mea-space-2);
		min-height: var(--t-target-min);
		padding: var(--mea-space-1) var(--mea-space-3);
		border-radius: var(--mea-radius-pill);
		border: 1px solid;
		text-decoration: none;
		font-size: var(--mea-text-sm);
	}

	.filter-chip__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--mea-space-5);
		padding: 0 var(--mea-space-1);
		border-radius: var(--mea-radius-pill);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-bold);
		font-variant-numeric: tabular-nums;
	}

	.deals-search {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		gap: var(--mea-space-2);
	}

	.deals-search__label {
		font-size: var(--mea-text-sm);
		flex-basis: 100%;
	}

	.deals-search__input {
		flex: 1;
		min-width: 12rem;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
		font: inherit;
	}

	.deals-table__scroll {
		overflow-x: auto;
	}

	.deals-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--mea-text-sm);
	}

	.deals-table th {
		text-align: left;
		padding: var(--mea-space-2);
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
		white-space: nowrap;
	}

	.deals-table td {
		padding: var(--mea-space-2);
		border-top: 1px solid;
		vertical-align: middle;
	}

	.deals-table__meta {
		white-space: nowrap;
	}

	.deals-table__th--check,
	.deals-row .deals-table__cell--check {
		width: var(--mea-space-8);
		text-align: center;
	}

	.deals-sort {
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: var(--mea-space-1);
	}

	.deals-sort__caret {
		font-size: var(--mea-text-xs);
	}

	.deals-row__link {
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.gang-unit-dot {
		display: inline-block;
		width: var(--mea-space-2);
		height: var(--mea-space-2);
		border-radius: var(--mea-radius-circle);
		flex: none;
	}

	.deals-program {
		display: inline-flex;
		align-items: center;
		gap: var(--mea-space-2);
	}

	.deals-program::before {
		content: "";
		width: var(--mea-space-2);
		height: var(--mea-space-2);
		border-radius: var(--mea-radius-circle);
		flex: none;
	}

	.deals-bulk {
		display: grid;
		gap: var(--mea-space-4);
	}

	fieldset.deals-bulk__controls {
		display: none;

		& > legend {
			float: inline-start;
			padding: 0;
		}
	}

	.deals-bulk {
		&:has(input[name="deal_ids"]:checked) {
			& fieldset.deals-bulk__controls {
				display: grid;
			}
		}
	}

	.deals-bulk__controls {
		gap: var(--mea-space-2);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
	}

	.deals-bulk__legend {
		font-size: var(--mea-text-md);
		font-weight: var(--mea-w-bold);
		padding: 0 var(--mea-space-1);
	}

	.deals-bulk__field {
		font-size: var(--mea-text-sm);
	}

	.deals-bulk__control {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
		font: inherit;
	}

	.deals-bulk__submit {
		justify-self: start;
	}

	.pagination {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--mea-space-3);
	}

	.pagination__link {
		text-decoration: none;
		min-height: var(--t-target-min);
		display: inline-flex;
		align-items: center;
	}

	.pagination__info {
		font-size: var(--mea-text-sm);
		font-variant-numeric: tabular-nums;
	}

	/* ── deal detail ── */
	.deal-detail-page {
		display: grid;
		gap: var(--mea-space-5);
	}

	.deal-detail__back {
		text-decoration: none;
		font-size: var(--mea-text-sm);
	}

	.deal-summary {
		display: flex;
		align-items: center;
		gap: var(--mea-space-4);
		flex-wrap: wrap;
		padding: var(--mea-space-5);
		border-radius: var(--mea-radius-2xl);
	}

	.deal-summary__avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--mea-space-12);
		height: var(--mea-space-12);
		flex: none;
		border-radius: var(--mea-radius-circle);
		font-weight: var(--mea-w-bold);
	}

	.deal-summary__heading {
		display: grid;
		gap: var(--mea-space-1);
		flex: 1;
		min-width: 12rem;
	}

	.deal-summary__name {
		font-size: var(--mea-text-2xl);
		line-height: var(--mea-lh-tight);
	}

	.deal-summary__meta {
		font-size: var(--mea-text-sm);
	}

	.deal-summary__actions {
		display: flex;
		gap: var(--mea-space-2);
		flex-wrap: wrap;
	}

	.deal-facts {
		display: grid;
		gap: var(--mea-space-3);
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}

	.deal-fact {
		display: grid;
		gap: var(--mea-space-1);
	}

	.deal-fact__label {
		font-size: var(--mea-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.deal-fact__value {
		font-size: var(--mea-text-md);
		font-weight: var(--mea-w-semibold);
	}

	.deal-charge {
		display: inline-block;
		padding: var(--mea-space-1) var(--mea-space-2);
		border-radius: var(--mea-radius-pill);
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-semibold);
	}

	.deal-detail__layout {
		display: grid;
		gap: var(--mea-space-6);
		align-items: start;
	}

	@media (min-width: 56rem) {
		.deal-detail__layout {
			grid-template-columns: 3fr 2fr;
		}
	}

	.deal-detail__main,
	.deal-detail__aside {
		display: grid;
		gap: var(--mea-space-5);
		align-content: start;
	}

	.deal-card {
		display: grid;
		gap: var(--mea-space-3);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
	}

	.deal-card__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mea-space-3);
	}

	.deal-card__title {
		font-size: var(--mea-text-md);
	}

	.deal-card__meta {
		font-size: var(--mea-text-sm);
		font-variant-numeric: tabular-nums;
	}

	.deal-card__body {
		display: grid;
		gap: var(--mea-space-3);
	}

	.deal-empty {
		padding: var(--mea-space-3) 0;
		text-align: center;
	}

	.mission-list {
		display: grid;
		gap: var(--mea-space-2);
	}

	.mission {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--mea-space-3);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.mission__icon {
		font-size: var(--mea-text-lg);
	}

	.mission__detail {
		display: grid;
		gap: var(--mea-space-1);
	}

	.mission__name {
		font-weight: var(--mea-w-semibold);
	}

	.mission__sub {
		font-size: var(--mea-text-xs);
	}

	.deal-timeline {
		display: grid;
		gap: var(--mea-space-3);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.deal-timeline__event {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--mea-space-3);
	}

	.deal-timeline__dot {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--mea-space-7);
		height: var(--mea-space-7);
		flex: none;
		border-radius: var(--mea-radius-circle);
		font-weight: var(--mea-w-bold);
	}

	.deal-timeline__detail {
		display: grid;
		gap: var(--mea-space-1);
	}

	.deal-timeline__text {
		font-weight: var(--mea-w-semibold);
	}

	.deal-timeline__time {
		font-size: var(--mea-text-xs);
	}

	.deal-note-list {
		display: grid;
		gap: var(--mea-space-3);
	}

	.deal-note {
		display: grid;
		gap: var(--mea-space-1);
		padding: var(--mea-space-2) 0;
		border-top: 1px solid;
	}

	.deal-note__head {
		display: flex;
		justify-content: space-between;
		gap: var(--mea-space-3);
	}

	.deal-note__author {
		font-weight: var(--mea-w-semibold);
		font-size: var(--mea-text-sm);
	}

	.deal-note__time {
		font-size: var(--mea-text-xs);
	}

	.deal-note__body {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	.deal-form {
		display: grid;
		gap: var(--mea-space-2);
		padding-top: var(--mea-space-3);
		border-top: 1px solid;
	}

	.deal-form__title {
		font-size: var(--mea-text-md);
	}

	.deal-form__desc,
	.deal-form__help {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	.deal-form__label {
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-semibold);
	}

	.deal-form__control {
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
		font: inherit;
		width: 100%;
	}

		.deal-actions {
			display: grid;
			gap: var(--mea-space-3);
		}

		.deal-decision-step {
			display: grid;
			gap: var(--mea-space-3);
			min-inline-size: 0;
			margin: 0;
			padding: var(--mea-space-3) 0 0;
			border: 0;
			border-top: 1px solid;
		}

		.deal-decision-step__title {
			margin: 0;
			padding: 0;
		}

		.deal-decision-summary {
			display: grid;
			gap: var(--mea-space-2);
			margin: 0;
		}

		.deal-decision-summary > div {
			display: grid;
			grid-template-columns: minmax(8rem, 1fr) 1.2fr;
			gap: var(--mea-space-2);
			min-inline-size: 0;
		}

		.deal-decision-summary dt,
		.deal-decision-summary dd {
			margin: 0;
			min-inline-size: 0;
		}

		@container (max-width: 32rem) {
			.deal-decision-summary > div {
				grid-template-columns: 1fr;
			}
		}

		.deal-action {
			font-weight: var(--mea-w-bold);
		}

	.gang-unit-alert {
		display: grid;
		gap: var(--mea-space-2);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
		border: 1px solid;
	}

	.gang-unit-alert__banner {
		display: flex;
		align-items: center;
		gap: var(--mea-space-2);
		font-weight: var(--mea-w-bold);
	}

	.deal-section-error {
		display: grid;
		gap: var(--mea-space-2);
		padding: var(--mea-space-4);
		border-radius: var(--mea-radius-md);
		border: 1px solid;
	}

	.deal-section-error__title {
		font-weight: var(--mea-w-bold);
	}

	.deal-section-error__body {
		font-size: var(--mea-text-sm);
	}

	.deal-section-error__retry {
		justify-self: start;
	}

	.deals-bulk-result {
		display: grid;
		gap: var(--mea-space-5);
	}

	.deals-bulk-result__list {
		display: grid;
		gap: var(--mea-space-1);
	}

	.deals-bulk-result__ok,
	.deals-bulk-result__fail {
		font-size: var(--mea-text-sm);
		font-family: var(--mea-font-mono);
	}
}

/* Wave 4 — deals list + deal-detail: PAINT ONLY, every value a token (D10). */
@layer design {

	.btn--outline {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text-secondary);
		font-weight: var(--mea-w-semibold);
	}

	.deals-page__subtitle {
		color: var(--t-bg-text-secondary);
	}

	.deals-page__title {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

	.filter-chip {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text-secondary);
	}

	.filter-chip--active {
		background: var(--t-accent);
		border-color: var(--t-accent);
		color: var(--t-accent-text);
	}

	.filter-chip__count {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.filter-chip--active .filter-chip__count {
		background: var(--t-accent-text);
		color: var(--t-accent);
	}

	.deals-search__label {
		color: var(--t-bg-text-secondary);
		font-weight: var(--mea-w-semibold);
	}

	.deals-search__input {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text);
	}

	.deals-search__input:focus-visible {
		border-color: var(--t-border-focus);
	}

	.deals-table th {
		color: var(--t-text-muted);
	}

	.deals-table td {
		border-top-color: var(--t-border);
	}

	.deals-table__meta {
		color: var(--t-text-secondary);
	}

	.deals-sort {
		color: var(--t-text-muted);
	}

	.deals-sort:hover {
		color: var(--t-link);
	}

	.deals-row__link {
		color: inherit;
	}

	.deals-row__link:hover .person-cell__name {
		color: var(--t-link);
	}

	.deals-row--flagged {
		background: var(--mea-red-light);
	}

	.gang-unit-dot {
		background: var(--mea-red);
	}

	.deals-program::before {
		background: var(--t-text-muted);
	}

	.deals-program--high::before {
		background: var(--mea-red);
	}

	.deals-program--med::before {
		background: var(--mea-amber);
	}

	.deals-program--low::before {
		background: var(--mea-green);
	}

	.deal-charge {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.deal-charge--drug {
		background: var(--mea-violet-light);
		color: var(--mea-violet);
	}

	.deal-charge--theft {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.deal-charge--property {
		background: var(--mea-orange-light);
		color: var(--mea-orange-dark);
	}

	.deal-charge--conduct {
		background: var(--mea-blue-50);
		color: var(--mea-blue-dark);
	}

	.deal-charge--dui {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.deal-charge--trespass {
		background: var(--mea-teal-light);
		color: var(--mea-teal-dark);
	}

	.deal-charge--assault {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.deals-bulk__controls {
		background: var(--t-card-bg);
		color: var(--t-text);
		border-color: var(--t-card-border);
	}

	.deals-bulk__field {
		color: var(--t-text-secondary);
		font-weight: var(--mea-w-semibold);
	}

	.deals-bulk__control {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text);
	}

	.deals-bulk__control:focus-visible {
		border-color: var(--t-border-focus);
	}

	.pagination__link {
		color: var(--t-link);
		font-weight: var(--mea-w-semibold);
	}

	.pagination__link:hover {
		color: var(--t-link-hover);
	}

	.pagination__info {
		color: var(--t-text-muted);
	}

	.deal-detail__back {
		color: var(--t-link);
		font-weight: var(--mea-w-semibold);
	}

	.deal-summary {
		background: var(--t-card-bg);
		border: 1px solid var(--t-card-border);
		box-shadow: var(--mea-shadow-card);
	}

	.deal-summary__avatar {
		background: var(--t-accent);
		color: var(--t-accent-text);
	}

	.deal-summary__name {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

	.deal-summary__meta {
		color: var(--t-text-secondary);
	}

	.deal-fact__label {
		color: var(--t-text-muted);
	}

	.deal-fact__value {
		color: var(--t-text);
	}

	.deal-card {
		background: var(--t-card-bg);
		border-color: var(--t-card-border);
		box-shadow: var(--mea-shadow-card);
	}

	.deal-card__title {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.deal-card__meta {
		color: var(--t-text-muted);
	}

	.deal-empty {
		color: var(--t-text-muted);
	}

	.mission {
		border-top-color: var(--t-border);
	}

	.mission__sub {
		color: var(--t-text-muted);
	}

	.mission--completed .mission__icon {
		color: var(--t-success-text);
	}

	.mission--active .mission__icon {
		color: var(--mea-blue);
	}

	.mission--pending .mission__icon {
		color: var(--t-text-muted);
	}

	.deal-timeline__dot {
		background: var(--t-bg-active);
		color: var(--t-text-secondary);
	}

	.deal-timeline__dot--green {
		background: var(--mea-green-light);
		color: var(--mea-green-dark);
	}

	.deal-timeline__dot--red {
		background: var(--mea-red-light);
		color: var(--mea-red-dark);
	}

	.deal-timeline__dot--amber {
		background: var(--mea-amber-light);
		color: var(--mea-amber-dark);
	}

	.deal-timeline__dot--blue {
		background: var(--mea-blue-50);
		color: var(--mea-blue-dark);
	}

	.deal-timeline__time {
		color: var(--t-text-muted);
	}

	.deal-note {
		border-top-color: var(--t-border);
	}

	.deal-note__time {
		color: var(--t-text-muted);
	}

	.deal-note__body {
		color: var(--t-text);
	}

	.deal-form {
		border-top-color: var(--t-border);
	}

	.deal-form__desc,
	.deal-form__help {
		color: var(--t-text-secondary);
	}

	.deal-form__label {
		color: var(--t-text-secondary);
	}

	.deal-form__control {
		background: var(--t-bg-elevated);
		border-color: var(--t-border);
		color: var(--t-text);
	}

		.deal-form__control:focus-visible {
			border-color: var(--t-border-focus);
		}

		.deal-decision-step {
			border-top-color: var(--t-border);
		}

		.deal-decision-step__title {
			font-size: var(--mea-text-sm);
			font-weight: var(--mea-w-bold);
			color: var(--t-text);
		}

		.deal-decision-summary dt {
			font-size: var(--mea-text-xs);
			font-weight: var(--mea-w-bold);
			color: var(--t-text-muted);
			text-transform: uppercase;
			letter-spacing: var(--mea-ls-wide);
		}

		.deal-decision-summary dd {
			font-size: var(--mea-text-sm);
			color: var(--t-text);
		}

		.deal-action--complete {
			background: var(--mea-grad-cta);
			color: var(--mea-white);
	}

	.deal-action--fail {
		background: var(--t-bg-elevated);
		border: 1px solid var(--mea-red);
		color: var(--mea-red-dark);
	}

	.gang-unit-alert {
		background: var(--mea-red-light);
		border-color: var(--mea-red);
	}

	.gang-unit-alert__banner {
		color: var(--mea-red-dark);
	}

	.deal-section-error {
		background: var(--t-bg-elevated);
		color: var(--t-text);
		border-color: var(--t-warning);
	}

	.deal-section-error__title {
		color: var(--t-text);
	}

	.deal-section-error__body {
		color: var(--t-text-secondary);
	}

	.deals-bulk-result__ok {
		color: var(--t-success-text);
	}

	.deals-bulk-result__fail {
		color: var(--mea-red-dark);
	}

	.deals-bulk-result__fail-id {
		font-weight: var(--mea-w-bold);
	}

	.deals-bulk__controls {
		& > legend {
			color: var(--t-text);
		}
	}
}

/* ──────────────────────────────────────────────────────────────
   Per-jurisdiction landing — STRUCTURE ONLY (@layer layout); paint
   follows in @layer design below. The role grid is plain links (or,
   in demo mode, one-click POST forms); no inline styles, no scripts.
   ────────────────────────────────────────────────────────────── */
@layer layout {

	.landing {
		display: grid;
		gap: var(--mea-space-6);
	}

	.landing__head {
		display: grid;
		gap: var(--mea-space-1);
	}

	.landing__tenant {
		font-size: var(--mea-text-2xl);
		line-height: var(--mea-lh-tight);
	}

	.landing__subtitle {
		font-size: var(--mea-text-md);
	}

	.landing__demo {
		margin: 0;
	}

	.tenant-landing {
		display: grid;
		gap: var(--mea-space-8);
	}

	.tenant-landing__hero {
		display: grid;
		gap: var(--mea-space-4);
		padding-block: var(--mea-space-8);
		padding-inline-start: var(--mea-space-5);
		border-inline-start: 4px solid;
	}

	.tenant-landing__eyebrow {
		margin: 0;
		font-size: var(--mea-text-xs);
		line-height: var(--mea-lh-snug);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.tenant-landing__title {
		max-width: 44rem;
		font-size: var(--mea-text-4xl);
		line-height: var(--mea-lh-tight);
	}

	.tenant-landing__lede {
		max-width: 48rem;
		font-size: var(--mea-text-lg);
		line-height: var(--mea-lh-relaxed);
	}

	.tenant-landing__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mea-space-3);
		align-items: center;
	}

	.tenant-landing__actions .btn {
		text-decoration: none;
	}

	.tenant-landing__workflow {
		display: grid;
		gap: var(--mea-space-4);
		padding-block: var(--mea-space-6);
		border-block: 1px solid;
	}

	.tenant-landing__section-title {
		font-size: var(--mea-text-xl);
		line-height: var(--mea-lh-snug);
	}

	.tenant-landing__steps {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
	}

	.tenant-landing__step {
		display: grid;
		gap: var(--mea-space-2);
		padding-block: var(--mea-space-4);
		border-top: 1px solid;
	}

	.tenant-landing__step:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.tenant-landing__step:last-child {
		padding-bottom: 0;
	}

	.tenant-landing__step-index {
		font-size: var(--mea-text-xs);
		line-height: var(--mea-lh-snug);
	}

	.tenant-landing__step-title {
		font-size: var(--mea-text-lg);
		line-height: var(--mea-lh-snug);
	}

	.tenant-landing__step-body {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-relaxed);
	}

	.tenant-signin {
		display: grid;
		gap: var(--mea-space-4);
	}

	.tenant-signin__head {
		display: grid;
		gap: var(--mea-space-1);
	}

	.tenant-signin__body {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-normal);
	}

	.tenant-signin__groups {
		display: grid;
		gap: var(--mea-space-6);
	}

	.tenant-signin__group {
		display: grid;
		gap: var(--mea-space-2);
		/* Without this the shorter column's rows stretch to match the taller
		   one, leaving a gap between its heading and its first role. */
		align-content: start;
		/* A grid item's min-width defaults to its min-content width, so a wide
		   <select> pushed this column into its neighbour on narrow screens. */
		min-width: 0;
	}

	.tenant-signin__group-title {
		font-size: var(--mea-text-sm);
		line-height: var(--mea-lh-snug);
	}

	.tenant-role-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		border-top: 1px solid;
	}

	.tenant-role-list__link {
		display: flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) 0;
		border-bottom: 1px solid;
		text-decoration: none;
	}

	/* One-click demo sign-in (control-plane launcher): the submit button must
	   read as the same tile as the anchor sign-in links — reset the browser
	   button chrome and let the form collapse out of the layout. */
	.tenant-role-list__form {
		display: contents;
	}

	button.tenant-role-list__link {
		width: 100%;
		border: 0;
		border-bottom: 1px solid;
		background: none;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.tenant-role-list__title {
		font-size: var(--mea-text-sm);
	}

	@media (min-width: 48rem) {
		.tenant-landing__step {
			grid-template-columns: 4rem 10rem minmax(0, 1fr);
			align-items: baseline;
			gap: var(--mea-space-4);
		}

		.tenant-signin__groups {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.role-grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--mea-space-3);
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}

	.role-tile {
		display: grid;
	}

	.role-tile__form {
		display: grid;
		margin: 0;
	}

	.role-tile__action {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-5) var(--mea-space-4);
		border-radius: var(--mea-radius-2xl);
		border: 1px solid;
		text-decoration: none;
		text-align: center;
		width: 100%;
		font: inherit;
		cursor: pointer;
	}

	.role-tile__title {
		font-size: var(--mea-text-md);
		font-weight: var(--mea-w-bold);
	}
}

/* Per-jurisdiction landing: PAINT ONLY, every value a token (D10). */
@layer design {

	.landing__tenant {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

	.landing__subtitle {
		color: var(--t-bg-text-secondary);
	}

	.tenant-landing__hero {
		border-inline-start-color: var(--t-accent);
	}

	.tenant-landing__eyebrow {
		color: var(--t-accent);
		font-family: var(--mea-font-body);
		font-weight: var(--mea-w-bold);
	}

	.tenant-landing__title {
		color: var(--t-bg-text);
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

	.tenant-landing__lede {
		color: var(--t-bg-text-secondary);
	}

	.tenant-landing__workflow {
		border-block-color: var(--t-border);
	}

	.tenant-landing__section-title {
		color: var(--t-bg-text);
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.tenant-landing__step {
		border-top-color: var(--t-border);
	}

	.tenant-landing__step-index {
		color: var(--t-accent);
		font-family: var(--mea-font-mono);
		font-weight: var(--mea-w-bold);
	}

	.tenant-landing__step-title {
		color: var(--t-bg-text);
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

	.tenant-landing__step-body,
	.tenant-signin__body {
		color: var(--t-bg-text-secondary);
	}

	.tenant-signin__group-title {
		color: var(--t-bg-text-muted);
		font-weight: var(--mea-w-bold);
		text-transform: uppercase;
		letter-spacing: var(--mea-ls-caps);
	}

	.tenant-role-list {
		border-top-color: var(--t-border);
	}

	.tenant-role-list__link {
		border-bottom-color: var(--t-border);
		color: var(--t-bg-text);
		font-weight: var(--mea-w-semibold);
	}

	.tenant-role-list__link:hover {
		padding-inline-start: var(--mea-space-2);
	}

	.tenant-role-list__link:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	.role-tile__action {
		background: var(--t-card-bg);
		border-color: var(--t-card-border);
		color: var(--t-text);
		box-shadow: var(--mea-shadow-card);
	}

	.role-tile__action:hover {
		border-color: var(--t-border-focus);
	}

	.role-tile__action:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	.role-tile__action--demo {
		background: var(--t-bg-elevated);
		color: var(--t-text);
	}

	.role-tile__title {
		color: var(--t-bg-text);
	}
}

/* ──────────────────────────────────────────────────────────────
   Desk left-navigation rail — per-role, server-rendered (no JS).
   Rendered by base.html only for authenticated desk roles (desk_nav);
   participant/citizen/login pages keep .page centered (.shell is a
   display:contents passthrough without the --desk modifier). Token-only
   paint (D10); mobile-first — the rail collapses to a horizontal scroller
   under 48rem (D11). STRUCTURE in @layer layout, PAINT in @layer design.
   ────────────────────────────────────────────────────────────── */
@layer layout {
	/* A passthrough outside the desk shell. Error pages pushed their content to
	   the bottom because an EMPTY drawer took body grid's 1fr row (MEA-123 item
	   9); base.html now renders no drawer when it has nothing to hold, so the
	   passthrough stays. Making .shell a flex row everywhere instead moved the
	   language picker on the 2FA pages into a side column. */
	.shell {
		display: contents;
	}

	/* With the passthrough shell, a drawer that keeps content (the language
	   form, from csrf_token) and <main> are separate rows of body's grid, and
	   the drawer took the 1fr row: <main> sat at the bottom (MEA-123 item 9,
	   the signed-in demo_provisioning error and the 2FA pages). Give the
	   drawer a fitted row and <main> the stretching one. Only where the drawer
	   is in flow: under 48rem it is position: fixed and takes no row. */
	@media not all and (max-width: 48rem) {
		body:not(.citizen-theme):has(> .shell:not(.shell--desk) > .side-nav) {
			grid-template-rows: auto auto 1fr auto;
		}
	}

	/* Outside the desk shell the page column is desktop-wide, so an error page
	   would sit flush left with nothing beside it. Keep it to the readable
	   tablet width, centred. */
	.shell:not(.shell--desk) .error-page {
		inline-size: 100%;
		max-inline-size: var(--mea-app-max-w-tablet);
		margin-inline: auto;
	}

	.shell--desk {
		display: flex;
		align-items: flex-start;
		gap: var(--mea-space-5);
		width: 100%;
		min-inline-size: 0;
		margin: 0 auto;
	}

	/* The main column fills the row; .page drops its own centering inside it. */
	.shell--desk .page {
		margin: 0;
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
		padding-inline: 0;
	}

	.side-nav-toggle-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@media (min-width: 48rem) {
		.side-nav .close-btn,
		.side-nav .tenant-seal,
		.side-nav .mea-logo {
			display: none;
		}
		.side-nav-toggle-btn {
			display: none;
		}
	}

	.side-nav {
		position: sticky;
		top: 0;
	}

	@media (max-width: 48rem) {
		
		.side-nav {
			position: fixed;
			z-index: 1;
			--side-nav-transition-duration: 0.3s;

			& > .side-nav-content {
				position: absolute;
				min-height: 100vh;
				min-width: 40vw;
				border-start-end-radius: var(--mea-radius-3xl);
				border-end-end-radius: var(--mea-radius-3xl);

				transition: left var(--side-nav-transition-duration) linear;

				& .close-btn {
					display: block;
					margin: var(--mea-space-4);
				}

				& .mea-logo, & .tenant-seal {
					margin: var(--mea-space-3);
				}
			}
			& .side-nav-bg {
				position: absolute;
				width: 100vw;
				height: 100vh;
			}

			& > input[type="checkbox"].ui-toggle-state:checked {
				& ~ .side-nav-content {
					left: 0;
				}
			}
			& > input[type="checkbox"].ui-toggle-state:not(:checked) {
				& ~ .side-nav-bg {
					pointer-events: none;
				}
				& ~ .side-nav-content {
					left: -100vw;
				}
			}
		}
	}

	.ui-toggle-state {
		display: none;
	}

	.desk-nav {
		flex: 0 0 auto;
		min-inline-size: 0;
		width: 14rem;
		top: var(--mea-space-4);
		display: grid;
		gap: var(--mea-space-5);
		padding-block: var(--mea-space-4);
	}

	.desk-nav__section {
		display: grid;
		gap: var(--mea-space-1);
	}

	.desk-nav__label {
		margin: 0 0 var(--mea-space-1);
		padding-inline: var(--mea-space-3);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.desk-nav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 2px;
	}

	.desk-nav__item {
		display: flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: 6px;
		border-left: 3px solid transparent;
		font-size: var(--mea-text-sm);
		text-decoration: none;
	}

	.desk-nav__item.is-active {
		font-weight: var(--mea-w-semibold);
	}

	/* The main column fills the row; .page drops its own centering inside it. */
	.shell--desk .page {
		margin: 0;
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
		padding-inline: 0;
	}

	.desk-nav {
		flex: 0 0 auto;
		width: 14rem;
		top: var(--mea-space-4);
		display: grid;
		gap: var(--mea-space-5);
		padding-block: var(--mea-space-4);
	}

	.desk-nav__section {
		display: grid;
		gap: var(--mea-space-1);
	}

	.desk-nav__label {
		margin: 0 0 var(--mea-space-1);
		padding-inline: var(--mea-space-3);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.desk-nav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 2px;
	}

	.desk-nav__item {
		display: flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: 6px;
		border-left: 3px solid transparent;
		font-size: var(--mea-text-sm);
		text-decoration: none;
	}

	.desk-nav__item.is-active {
		font-weight: var(--mea-w-semibold);
	}

	/* Mobile-first: stack the rail above content as a horizontal scroller. */
	/*
	@media (max-width: 48rem) {
		.shell--desk {
			flex-direction: column;
			gap: var(--mea-space-3);
		}

		.desk-nav {
			width: 100%;
			position: static;
			padding-block: 0;
			grid-auto-flow: column;
			grid-auto-columns: max-content;
			gap: var(--mea-space-4);
			overflow-x: auto;
		}

		.desk-nav__label {
			display: none;
		}

		.desk-nav__list {
			grid-auto-flow: column;
			grid-auto-columns: max-content;
		}

		.desk-nav__item {
			white-space: nowrap;
			border-left: 0;
			border-bottom: 3px solid transparent;
		}
	}
	*/

	@media (min-width: 48rem) {
		.dashboard--officer {
			padding-inline-end: var(--mea-gutter-mobile);
		}
	}

	@media (max-width: 48rem) {
		.dashboard--officer {

			& .officer-profile,
			& .metric-row {
				margin-inline: var(--mea-gutter-mobile);
			}

			& .metric-row {
				display:flex;
				flex-wrap: wrap;

				& > .metric {
					flex-grow: 1;
				}
			}
		}
	}

	/* Multi-role union menu (role switcher): a compact set of plain links to
	   each dashboard the signed-in user holds, in the left rail below the
	   primary nav. STRUCTURE ONLY here (paint in @layer design); modeled on
	   .desk-nav so the two groups read as one system. */
	.role-switcher {
		display: grid;
		gap: var(--mea-space-1);
		margin-block-start: var(--mea-space-3);
		padding-block-start: var(--mea-space-4);
		border-block-start: 1px solid transparent;
	}

	.role-switcher__label {
		margin: 0 0 var(--mea-space-1);
		padding-inline: var(--mea-space-3);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.role-switcher__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 2px;
	}

	.role-switcher__item {
		display: flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: 6px;
		font-size: var(--mea-text-sm);
		text-decoration: none;
	}
}

@layer design {
	/*
	   The desk shell now uses the root dark gradient. Keep shell text on
	   dark surfaces readable without changing card-local light-theme text.
	*/
	.desk-nav__label,
	.reports__subtitle,
	.lang-form__label {
		color: var(--mea-cg-3);
	}

	/* Page-level titles, subtitles and labels that sit directly on the desk
	   gradient. Their pages paint them with the light palette's dark text,
	   which read ~1.3:1 on the dark background. White cards keep dark text
	   (frontend/app/theme.css white-card rule). */
	body.desk-portal :is(
		.active-cases__title, .ada-schedule__title, .admin-workflows__title,
		.audit__title, .admin-billing__title, .admin-connectors__title,
		.exports__title, .providers__title, .user-management__title,
		.encounters__title, .provider-form-card__title, .messages__title,
		.case-bulk-actions__legend
	) {
		color: var(--mea-white);
	}

	body.desk-portal :is(
		.active-cases__subtitle, .ada-schedule__subtitle, .admin-workflows__subtitle,
		.audit__subtitle, .admin-billing__subtitle, .admin-connectors__subtitle,
		.exports__subtitle, .providers__subtitle, .user-management__subtitle,
		.encounters__subtitle, .messages__subtitle, .user-management__demo-note,
		.provider-form__label, .providers-sort__label, .providers-pagination__count,
		.case-field__label, .filter-bar .field__label
	):not(.dashboard-panel *) {
		color: var(--mea-cg-3);
	}

	/* Reports: the savings banner is blue even though it shares the white-card
	   class, the failure figure reuses the banner's pale label inside a white
	   card, and the jail subtitle inherits the shell's pale grey. */
	body.desk-portal .savings-hero :is(.reports-savings__value, .savings-hero__amount) {
		color: var(--mea-white);
	}

	body.desk-portal :is(.failure-figure__label, .jail__subtitle) {
		color: var(--t-text-secondary);
	}

	/* Pagination sits on the gradient only on these pages; elsewhere it is
	   inside a white card and keeps the card's dark text. */
	body.desk-portal :is(.deals-page, .active-cases) > * .pagination__info {
		color: var(--mea-cg-3);
	}

	body.desk-portal .user-management__demo-toggle {
		color: var(--mea-baby-blue);
	}

	@media (max-width: 48rem) {
		.lang-form {
			color: var(--t-text);
		}
	}

	@media (min-width: 48rem) {
		.lang-form {
			color: var(--t-bg-text);
		}
	}

	.lang-form {
		& button {
			color: inherit;
		}
	}

	.desk-nav__item[aria-current="page"] {
		color: var(--t-accent);
		background: var(--t-bg-elevated);
		border-left-color: var(--t-accent);
	}

	.desk-nav__item:hover {
		color: var(--t-text);
		background: var(--t-bg-elevated);
	}

	.desk-nav__item:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	@media (max-width: 48rem) {
		.desk-nav__item {
			color: var(--mea-cg-2);
		}
	}

	@media (min-width: 48rem) {
		.desk-nav__item {
			color: var(--t-text-inverse);
		}
	}

	.desk-portal .reports__title {
		color: var(--t-text-inverse);
	}

	.desk-nav__label {
		color: var(--mea-cg-3);
	}

	

	.side-nav-toggle-btn {
		cursor: pointer;

		& > svg {
			stroke: var(--t-text-inverse);
		}
	}

	.side-nav {
		& .side-nav-bg {
			transition: background-color var(--side-nav-transition-duration) ease;
		}

		& > input[type="checkbox"].ui-toggle-state:checked {
			& ~ .side-nav-bg {
				background-color: rgba(0, 0, 0, 60%);
				backdrop-filter: blur(8px);
			}
		}
		& > input[type="checkbox"].ui-toggle-state:not(:checked) {
			& ~ .side-nav-bg {
				background-color: transparent;
				pointer-events: none;
			}
		}
	}

	@media (max-width: 48rem) {
		.side-nav-content {
			background: var(--t-card-bg);
		}

		.desk-nav__label {
			color: var(--t-text);
		}

		.desk-nav__item {
			color: var(--t-text);
		}

		.desk-nav__item.is-active {
			border-left-color: transparent;
			border-bottom-color: var(--t-accent);
		}
	}

	/* Role-switcher PAINT — token-only (D10), mirroring the desk-nav palette so
	   it reads on the dark desk rail (desktop) and the light card drawer
	   (mobile). Separator + muted label above light-on-dark links. */
	.role-switcher {
		border-block-start-color: var(--t-border);
	}

	.role-switcher__label {
		color: var(--t-bg-text-muted);
	}

	.role-switcher__item {
		color: var(--t-text-inverse);
	}

	.role-switcher__item:hover {
		color: var(--t-accent);
		background: var(--t-bg-elevated);
	}

	.role-switcher__item:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	@media (max-width: 48rem) {
		.role-switcher__label,
		.role-switcher__item {
			color: var(--t-text);
		}
	}
}

/* ──────────────────────────────────────────────────────────────
   Participant (citizen) navigation — mobile-first (D11), trauma-informed
   (D12), server-rendered (no JS). The drawer menu (.citizen-nav) lists every
   participant-reachable page; the bottom tab bar (.citizen-tabbar) surfaces the
   <=3 PRIMARY actions. Rendered by base.html only for the participant view
   (participant_nav / participant_primary). Token-only paint (D10); reads on the
   dark citizen theme (D1, no surveillance aesthetics). STRUCTURE in @layer
   layout, PAINT in @layer design.
   ────────────────────────────────────────────────────────────── */
@layer layout {
	.citizen-nav {
		display: grid;
		gap: var(--mea-space-5);
		padding-block: var(--mea-space-4);
	}

	.citizen-nav__section {
		display: grid;
		gap: var(--mea-space-1);
	}

	.citizen-nav__label {
		margin: 0 0 var(--mea-space-1);
		padding-inline: var(--mea-space-3);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.citizen-nav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 2px;
	}

	.citizen-nav__item {
		display: flex;
		align-items: center;
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-3);
		border-radius: var(--mea-radius-md);
		font-size: var(--mea-text-sm);
		text-decoration: none;
	}

	/* Bottom tab bar: the <=3 primary actions, fixed to the viewport bottom on
	   the mobile citizen surface. On wider viewports the drawer menu is the
	   persistent rail, so the tab bar is hidden. */
	.citizen-tabbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--mea-z-top);
		display: flex;
		align-items: stretch;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.citizen-tabbar__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--mea-space-1);
		min-height: var(--t-target-min);
		padding: var(--mea-space-2) var(--mea-space-1);
		font-size: var(--mea-text-xs);
		font-weight: var(--mea-w-semibold);
		text-decoration: none;
		text-align: center;
	}

	.citizen-tabbar__item > svg {
		inline-size: var(--mea-space-5);
		block-size: var(--mea-space-5);
	}

	.case--link {
		display: block;
		text-decoration: none;
	}

	.task__action {
		display: inline-block;
		min-height: var(--t-target-min);
	}

	/* Keep the fixed tab bar from covering the last of the page content on the
	   mobile surface where it shows. */
	@media (max-width: 48rem) {
		.page--has-tabbar {
			padding-bottom: calc(var(--mea-space-12) + var(--t-target-min));
		}
	}

	@media (min-width: 48rem) {
		.citizen-tabbar {
			display: none;
		}
	}
}

@layer design {
	.citizen-nav__label {
		color: var(--t-text-muted);
	}

	.citizen-nav__item {
		color: var(--t-text);
	}

	@media (min-width: 48rem) {
		.citizen-nav__item {
			color: var(--t-text-inverse);
		}

		.citizen-nav__label {
			color: var(--t-bg-text-secondary);
		}
	}

	.citizen-nav__item:hover {
		color: var(--t-accent);
		background: var(--t-bg-elevated);
	}

	.citizen-nav__item.is-active {
		color: var(--t-accent);
		background: var(--t-bg-elevated);
		font-weight: var(--mea-w-semibold);
	}

	.citizen-nav__item:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	.citizen-tabbar {
		background: var(--t-card-bg);
		border-block-start: 1px solid var(--t-border);
	}

	.citizen-tabbar__item {
		color: var(--t-text-secondary);
	}

	.citizen-tabbar__item:hover,
	.citizen-tabbar__item.is-active {
		color: var(--t-accent);
	}

	.citizen-tabbar__item:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: -2px;
	}

	.case--link:focus-visible {
		outline: 2px solid var(--t-border-focus);
		outline-offset: 2px;
	}

	/* The "view my case" affordance on the tappable case card. */
	.case__more {
		color: var(--t-hero--link, var(--t-accent));
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-semibold);
	}
}

/* Demo launcher: login-selectable data-state variant on persona tiles
   (admin_landing.html; founder 2026-07-21). Tokens only — no raw color. */
.tenant-role-list__variant {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-block-end: 0.5rem;
}

.tenant-role-list__variant-label {
	font-size: var(--mea-text-sm);
	font-weight: var(--mea-w-semibold);
	color: var(--t-bg-text-secondary);
}

.tenant-role-list__variant-select {
	font: inherit;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 0.375rem 0.5rem;
}

/* A demo row keeps its role name, data-state picker and credentials above ONE
   divider, drawn by the row itself rather than by the sign-in button, so the
   picker always reads as belonging to the role above it. */
.tenant-role-list__item--demo {
	min-width: 0;
	padding-block-end: var(--mea-space-2);
	border-bottom: 1px solid var(--t-border);
}

.tenant-role-list__item--demo .tenant-role-list__link {
	border-bottom: 0;
}

/* Demo launcher credentials (admin_landing.html; founder 2026-07-20,
   task 3e0d381ec2e9). The PUBLISHED demo creds (non-secret — fake Suffolk demo
   jurisdiction, kindex 1deab21c0ad0) render display-only on the @mea.tech
   SSO-gated control plane so testers can capture them for a re-auth challenge
   (e.g. the session-expiry re-login, task 2d961d463827). A click-to-open
   <details> disclosure: no JS, keyboard operable, and nothing moves until the
   tester asks for it. The text sits on the page background, so it takes the
   --t-bg-* text tokens (the card --t-text token is dark-on-light and was
   unreadable here). Tokens only (D10); never rendered on the public demo host
   (task #9). */
.demo-tile__creds {
	margin: 0;
	color: var(--t-bg-text);
}

.demo-tile__creds-toggle {
	cursor: pointer;
	padding-block: var(--mea-space-1);
	font-size: var(--mea-text-xs);
	font-weight: var(--mea-w-semibold);
	color: var(--t-bg-text-secondary);
}

.demo-tile__creds-toggle:hover {
	color: var(--t-bg-text);
}

.demo-tile__creds-toggle:focus-visible {
	outline: 2px solid var(--t-border-focus);
	outline-offset: 2px;
}

.demo-tile__cred-line {
	margin: 0;
	padding: var(--mea-space-1) 0;
	font-size: var(--mea-text-xs);
	line-height: var(--mea-lh-normal);
	color: var(--t-bg-text);
	overflow-wrap: anywhere;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mea-space-1) var(--mea-space-2);
}

.demo-tile__cred-state {
	font-weight: var(--mea-w-semibold);
}

.demo-tile__cred-user,
.demo-tile__cred-pass {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ── DA workflow landing (dashboard_da.html) + the shared caseload search box ──
   STRUCTURE ONLY (grid / flow / spacing tokens); the cards reuse the
   .dashboard-panel paint, so no colors are introduced here (D10). */
@layer layout {
	.caseload-search {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--mea-space-2);
		margin-block-end: var(--mea-space-5);
	}
	.caseload-search__label {
		flex-basis: 100%;
	}
	.caseload-search__input {
		flex: 1 1 16rem;
	}
	.workflow-group {
		margin-block-end: var(--mea-space-6);
	}
	.workflow-group__heading {
		margin-block-end: var(--mea-space-3);
	}
	.workflow-cards {
		display: grid;
		gap: var(--mea-space-3);
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
	.workflow-card__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mea-space-2);
		text-decoration: none;
	}
	.workflow-card__count {
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1;
	}
	.workflow-card__samples {
		list-style: none;
		margin: var(--mea-space-2) 0 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--mea-space-1);
	}
	.workflow-card__sample-detail {
		display: block;
		font-size: 0.85em;
	}
	.workflow-card__all {
		margin-block-start: var(--mea-space-2);
	}
}

/* ──────────────────────────────────────────────────────────────
   Wizard submit in-flight status (Story 3 D3/D5/D7).

   The status region is server-rendered EMPTY beside the advance
   control; the optional aid (static/js/submit-inflight.js) fills it
   with the localized busy sentence and flips [data-submit-status].
   With JS off nothing here paints anything — an empty region takes no
   space, which is exactly why the busy state can never claim to know
   about a request the server-rendered page cannot see.

   D7: the busy state lives ON THE CONTROL, in normal page flow. No
   overlay, no fixed positioning, nothing that covers the page or blocks
   reading while a submit is in flight.
   STRUCTURE in @layer layout; PAINT in @layer design (token-only, D10).
   ────────────────────────────────────────────────────────────── */
@layer layout {
	/* The nav is a row; the status takes its own line under the button. */
	.wizard-nav {
		flex-wrap: wrap;
	}

	.citation-step__submit-status {
		flex-basis: 100%;
		margin: 0;
		text-align: center;
	}

	/* Idle (and no-JS) is genuinely nothing: no reserved strip, no
	   placeholder that could read as a state. */
	.citation-step__submit-status:empty {
		display: none;
	}
}

@layer design {
	.citation-step__submit-status[data-submit-status="busy"] {
		margin-block-start: var(--mea-space-2);
		color: var(--t-text-secondary);
		font-size: 0.9em;
	}

	/* The pressed control while its submit is in flight. aria-disabled
	   (not `disabled`) keeps the button's name/value in the POST, so the
	   server still learns WHICH action was pressed. */
	.citation-step__advance.is-submitting {
		opacity: 0.72;
		cursor: progress;
	}
}

/* MEA-217 program QR pages: the admin signs table, the staff QR grid and the
   no-check-out list. Tokens only (D10). */
@layer design {
	.program-codes__scroll {
		overflow-x: auto;
	}

	.program-codes__qr-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mea-space-5);
	}

	.program-codes__qr {
		margin: 0;
	}

	/* The full-screen code (founder ruling 2026-10-16): the QR takes nearly the
	   whole viewport in portrait and landscape, on a white quiet zone. */
	.program-code-show {
		display: grid;
		justify-items: center;
		gap: var(--mea-space-3);
		padding-block: var(--mea-space-3);
		text-align: center;
	}

	.program-code-show__heading {
		margin: 0;
		font-size: var(--mea-text-2xl);
		font-weight: 700;
	}

	.program-code-show__program {
		margin: 0;
	}

	.program-code-show__qr {
		box-sizing: border-box;
		inline-size: min(90vw, 70vh);
		block-size: min(90vw, 70vh);
		padding: var(--mea-space-3);
		background: var(--mea-white);
		color: var(--t-text);
		border-radius: var(--mea-radius-md);
	}

	.program-code-show__svg {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	.program-code-show__done {
		max-inline-size: min(90vw, 70vh);
	}

	.program-codes__qr-caption {
		font-weight: 700;
		margin-block-end: var(--mea-space-2);
	}

	.program-codes__program-block + .program-codes__program-block {
		margin-block-start: var(--mea-space-5);
	}

	.program-recovery__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.program-recovery__item {
		padding-block: var(--mea-space-4);
		border-block-start: 1px solid var(--t-border);
	}

	.program-recovery__who,
	.program-recovery__when {
		margin: 0 0 var(--mea-space-2);
		overflow-wrap: anywhere;
	}

	.program-recovery__form {
		display: grid;
		gap: var(--mea-space-3);
		margin-block-start: var(--mea-space-3);
	}
}