/* ============================================================
   Shared migrated elements — the page root and the button.
   Structure in @layer layout, paint in @layer design. Content-named.
   ============================================================ */

@layer layout {

	/* The migrated-page root. Default is the centered, phone-width mobile column
     (participant portal, officer field flows, participant onboarding) — these
     are mobile-first by design and stay a narrow column even on a desktop
     browser. Desk roles opt into the full-width desktop content area via
     body.desk-portal below; without that, capping everything at 430px squished
     the DA/admin desktop views. Layout mode is set in app.js by role, kept
     separate from the citizen dark theme so onboarding (light) stays narrow. */
	.app-screen {
		display: grid;
		gap: var(--mea-space-6);
		align-content: start;
		width: 100%;
		max-width: var(--mea-app-max-w);
		margin-inline: auto;
		padding: var(--mea-space-4) var(--mea-gutter-mobile) var(--mea-space-12);
		container-type: inline-size;
	}

	/* Desk portals (everyone but participant + officer) fill the content area.
     .app-screen is a single-column grid; with the default implicit `auto`
     column it shrinks to content width, so lifting max-width alone left the
     content packed left with dead space on the right. minmax(0, 1fr) makes the
     column span the full content area (children — the deals table etc. — then
     stretch to it), while the 0 floor lets overflow-x:auto regions scroll
     instead of forcing the column wider than the viewport. */
	body.desk-portal .app-screen {
		max-width: none;
		margin-inline: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 48rem) {
		body.desk-portal .app-screen {
			padding: var(--mea-space-6) var(--mea-gutter-desktop) var(--mea-space-12);
		}
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--mea-space-2);
		min-height: var(--t-target-min, 44px);
		padding: var(--mea-space-3) var(--mea-space-6);
		border: 0;
		border-radius: var(--mea-radius-pill);
	}

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

	.btn--sm {
		min-height: 36px;
		padding: var(--mea-space-2) var(--mea-space-4);
	}

	/* Shared selection action bar (ListController bulk actions). */
	.bulk-action-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--mea-space-2);
		padding: var(--mea-space-3) var(--mea-space-4);
		border-radius: var(--mea-radius-lg);
	}

	.bulk-action-bar__count {
		margin-inline-end: auto;
	}

}

@layer design {
	.app-screen {
		color: var(--t-text);
	}

	.btn {
		font-family: var(--mea-font-citizen);
		font-weight: var(--mea-w-bold);
		font-size: var(--mea-text-md);
		cursor: pointer;
		transition: background var(--mea-dur-fast), opacity var(--mea-dur-fast);
	}

	.btn:active {
		opacity: .9;
	}

	.btn:disabled {
		opacity: .5;
		cursor: default;
	}

	/* Primary CTA paints from the theme's CTA tokens: a solid royal fill on
     the staff console, a royal-blue gradient pill with glow on the citizen
     app (both design references; reconciliation 2026-06-09). Hover keeps the
     fill (no solid-swap over a gradient) and lifts brightness. */
	.btn--primary {
		background: var(--t-cta-bg);
		color: var(--t-cta-text);
		box-shadow: var(--t-cta-shadow);
	}

	.btn--primary:hover {
		filter: brightness(1.06);
	}

	.btn--outline {
		background: transparent;
		color: var(--t-text);
		border: 1.5px solid var(--t-border);
		box-shadow: none;
	}

	.btn--outline:hover {
		background: var(--t-bg-hover, var(--t-bg-active));
	}

	.btn--secondary {
		background: var(--t-bg-active);
		color: var(--t-text);
		box-shadow: none;
	}

	.btn--secondary:hover {
		background: var(--t-bg-hover, var(--t-bg-active));
	}

	.btn--ghost {
		background: transparent;
		color: var(--t-text-secondary);
		box-shadow: none;
	}

	.btn--ghost:hover {
		background: var(--t-bg-hover, var(--t-bg-active));
		color: var(--t-text);
	}

	.btn--danger {
		background: var(--t-error);
		color: var(--t-accent-text);
		box-shadow: var(--mea-shadow-sm);
	}

	.btn--danger:hover {
		background: var(--t-error);
		opacity: .9;
	}

	.btn--disabled {
		opacity: .5;
		cursor: default;
		pointer-events: none;
	}

	.btn--active {
		background: var(--t-accent);
		color: var(--t-accent-text);
	}

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

	.bulk-action-bar {
		background: var(--t-card-bg);
		border: 1px solid var(--t-card-border);
		box-shadow: var(--mea-shadow-sm);
	}

	.bulk-action-bar__count {
		color: var(--t-text);
		font-size: var(--mea-text-sm);
		font-weight: var(--mea-w-semibold);
	}
}