/* ============================================================
   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);
	}
}

/* ──────────────────────────────────────────────────────────────
   @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;

			& video {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
		}
	
		& .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(--mea-white);
	}

	.sheet {
		background-color: var(--mea-white);
	}

	.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);
		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-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,
	.error-page__body {
		color: var(--t-text-secondary);
	}

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

	.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-accent);
	}

	.da-portal__subtitle {
		color: var(--t-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);
	}

	.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);
	}

	.dashboard-panel,
	.drill-panel {
		background: var(--t-card-bg);
		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);
	}

	.panel-empty,
	.drill-empty {
		color: var(--t-text-muted);
	}

	.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);
		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);
		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);
	}

	.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;
		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);
	}

	.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 {
	.shell {
		display: contents;
	}

	.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);
	}

	@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(--t-bg-text-muted);
	}

	

	.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);
	}

	.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-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);
}

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

/* Demo launcher hover-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). Pure-CSS reveal —
   no-JS law, keyboard accessible via :focus-within. Hidden by default
   (max-height + opacity, no layout shift when collapsed), revealed on tile
   hover or focus-within. Tokens only (D10); never rendered on the public demo
   host (task #9). */
.demo-tile__creds {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0;
	transition: max-height 0.15s ease, opacity 0.15s ease;
}

.tenant-role-list__item:hover .demo-tile__creds,
.tenant-role-list__item:focus-within .demo-tile__creds {
	max-height: 14rem;
	opacity: 1;
}

.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-text);
	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;
	}
}