/* ============================================================
   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.
   ============================================================ */

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

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

	.appbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mea-space-4);
		padding: var(--mea-space-4) var(--mea-gutter-mobile-l);
		position: relative;

		& .profile-icon {
			display: inline-block;
			border-radius: 100%;
			width: var(--mea-space-6);
			height: var(--mea-space-6);
		}

	}

	.appbar__session {
		display: flex;
	}

	.page {
		width: 100%;
		max-width: var(--mea-app-max-w);
		margin: 0 auto;
		padding: var(--mea-space-4) var(--mea-gutter-mobile) var(--mea-space-12);
		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 {
		display: grid;
		gap: var(--mea-space-4);
	}

	.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) {
		.dashboard--officer {
			& .actions {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: var(--mea-space-5);
			}
		}

		body {
			padding-block-end: calc(var(--mea-space-10) + var(--mea-space-10) + var(--mea-space-5))
		}

	}

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

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

	/* Footer language switch (plain form post — zen law) */
	.appfooter {
		display: flex;
		justify-content: center;
		padding: var(--mea-space-4) var(--mea-gutter-mobile);
	}

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

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

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

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

	/* 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__brand {
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
		letter-spacing: var(--mea-ls-wide);
		color: var(--t-accent);
	}

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

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

	.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: var(--t-card-bg);
		}
	}

	/* 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 {
		border-top: 1px solid var(--t-border);
	}

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

/* ──────────────────────────────────────────────────────────────
   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 2fr;
		}
	}

	.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: var(--mea-space-2);
	}

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

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

	.deals-bulk__controls {
		display: grid;
		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-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-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-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-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);
	}
}

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

	.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-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-text);
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-extrabold);
	}

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

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

	.tenant-landing__section-title {
		color: var(--t-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-text);
		font-family: var(--mea-font-heading);
		font-weight: var(--mea-w-bold);
	}

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

	.tenant-signin__group-title {
		color: var(--t-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-text);
		font-weight: var(--mea-w-semibold);
	}

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

	.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-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;
		max-width: var(--mea-app-max-w-desktop);
		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;
	}

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

	@media (max-width: 48rem) {
		
		.side-nav {
			position: fixed;
			z-index: 1;
			top: 0;
			--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 {
					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;
		position: sticky;
		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;
		position: sticky;
		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);
			}
		}
	}
}

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

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