@layer components {
    /* Static headings receive initial dialog focus for announcement, not editing. */
    .rida-modal-title[tabindex="-1"]:focus:not([contenteditable]) { outline: none; }

    /* Shared action chooser: the Lead Source card language, with modal density tokens. */
    .rida-modal-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-sm); }
    .rida-modal-choice {
        display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
        gap: var(--spacing-sm); min-height: var(--modal-choice-min-height); padding: var(--modal-choice-padding);
        border: 1px solid var(--table-border); border-radius: var(--radius-md); background: var(--surface);
        text-align: left; cursor: pointer;
    }
    .rida-modal-choice:not(:disabled):hover { border-color: var(--blue); background: var(--elevation); }
    .rida-modal-choice:focus-visible { outline: 3px solid var(--alpha-blue); outline-offset: 2px; border-color: var(--blue); }
    .rida-modal-choice:disabled { opacity: .5; cursor: not-allowed; }
    .rida-modal-choice__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--modal-choice-icon-size); height: var(--modal-choice-icon-size); border-radius: var(--radius-md); color: var(--blue); background: var(--alpha-blue); }
    .rida-modal-choice strong { display: block; color: var(--text); font: 800 var(--modal-choice-title-size)/1.2 var(--font-main), sans-serif; }
    .rida-modal-choice small { display: block; margin-top: 5px; color: var(--text-muted); font: 600 var(--modal-choice-subtitle-size)/1.45 var(--font-main), sans-serif; }
    /* Opt-in status choices use the same soft tint treatment as Lead Source choices. */
    .rida-modal-choice[data-choice-status="reset"] { --modal-choice-status-color: var(--status-reset); }
    .rida-modal-choice[data-choice-status="booked"] { --modal-choice-status-color: var(--status-booked); }
    .rida-modal-choice[data-choice-status="rescheduled"] { --modal-choice-status-color: var(--status-rescheduled); }
    .rida-modal-choice[data-choice-status] {
        border-color: color-mix(in srgb, var(--modal-choice-status-color) 28%, var(--table-border));
        background: color-mix(in srgb, var(--modal-choice-status-color) 6%, var(--surface));
    }
    .rida-modal-choice[data-choice-status]:not(:disabled):hover,
    .rida-modal-choice[data-choice-status]:not(:disabled):focus-visible {
        border-color: color-mix(in srgb, var(--modal-choice-status-color) 52%, var(--table-border));
        background: color-mix(in srgb, var(--modal-choice-status-color) 10%, var(--surface));
    }
    .rida-modal-choice[data-choice-status]:focus-visible { outline-color: color-mix(in srgb, var(--modal-choice-status-color) 13%, transparent); }
    .rida-modal-choice[data-choice-status] .rida-modal-choice__icon {
        color: var(--modal-choice-status-color);
        background: color-mix(in srgb, var(--modal-choice-status-color) 12%, var(--surface));
    }
    @media (max-width: 680px) { .rida-modal-choices { grid-template-columns: minmax(0, 1fr); } }
	/* Shared two-state and compact segmented controls. */
	.rida-segmented-switcher {
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-xs);
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		padding: 3px;
		border: 1px solid var(--table-border);
		border-radius: var(--radius-full);
		background: var(--bg);
	}

	.rida-segmented-option {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		justify-content: center;
		min-width: 0;
		min-height: 32px;
		padding: 6px 14px;
		border: 0;
		border-radius: var(--radius-full);
		background: transparent;
		color: var(--blue);
		font: 600 0.78rem/1.2 var(--font-main), sans-serif;
		white-space: nowrap;
		cursor: pointer;
	}

	.rida-segmented-switcher a.rida-segmented-option,
	.rida-segmented-switcher a.rida-segmented-option:is(:hover, :focus-visible, :active, :visited) {
		text-decoration: none;
	}

	.rida-segmented-option:is(.is-active, [aria-selected="true"]) {
		background: var(--surface);
		color: var(--blue);
		box-shadow: 0 1px 3px color-mix(in srgb, var(--color-black) 14%, transparent);
	}

	.rida-segmented-option:not(.is-active):not([aria-selected="true"]):hover {
		background: var(--elevation);
	}

	.rida-segmented-option:focus-visible {
		outline: 3px solid var(--alpha-blue);
		outline-offset: 1px;
	}

	/*
	 * Shared modal language
	 *
	 * Modal-specific styles should control only size and internal layout.
	 * Chrome, spacing, typography, close controls, and actions belong here.
	 */
	.rida-modal-surface {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--table-border) !important;
		border-radius: var(--radius-lg) !important;
		background: var(--surface) !important;
		color: var(--text) !important;
		box-shadow: var(--modal-shadow) !important;
	}

	/* Native dialogs share one viewport contract. Route styles may choose the
	   width and internal layout, but positioning and backdrop remain global. */
	dialog.rida-modal-surface {
		position: fixed !important;
		inset: 0 !important;
		max-width: calc(100vw - (var(--spacing-md) * 2));
		max-height: calc(100dvh - (var(--spacing-md) * 2));
		margin: auto !important;
		padding: 0;
		transform: none !important;
	}

	dialog.rida-modal-surface::backdrop {
		background: var(--modal-backdrop) !important;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}

	dialog.rida-modal-surface:not([open]) {
		display: none;
	}

	/* A form must participate in the dialog's flex layout. Otherwise its
	   intrinsic height can push footer actions below a short viewport. */
	dialog.rida-modal-surface > form:has(> .rida-modal-body) {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: inherit;
		overflow: hidden;
	}

	.rida-modal-header {
		flex: 0 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--spacing-md);
		padding:
			var(--modal-header-padding-block-start)
			var(--modal-padding-inline)
			var(--modal-header-padding-block-end);
		border-bottom: 1px solid var(--table-border);
		background: var(--surface);
	}

	.rida-modal-heading {
		flex: 1 1 auto;
		min-width: 0;
	}

	.rida-modal-title {
		margin: 0;
		color: var(--text);
		font: 800 var(--modal-title-size)/1.15 var(--font-heading), var(--font-main), sans-serif;
		letter-spacing: 0;
	}

	.rida-modal-subtitle {
		margin: 5px 0 0;
		color: var(--text-muted);
		font: 600 var(--modal-subtitle-size)/1.35 var(--font-main), sans-serif;
	}

	.rida-modal-close {
		flex: 0 0 auto;
	}

	.rida-modal-body {
		flex: 1 1 auto;
		font-size: var(--type-body);
		min-height: 0;
		padding: var(--modal-body-padding-block) var(--modal-padding-inline);
		overflow-y: auto;
	}

	.rida-modal-footer {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-sm);
		padding: var(--modal-footer-padding-block) var(--modal-padding-inline);
		border-top: 1px solid var(--table-border);
		background: color-mix(in srgb, var(--elevation) 35%, var(--surface));
	}

	.rida-modal-actions {
		display: flex;
		flex-wrap: wrap;
		min-width: 0;
		max-width: 100%;
		align-items: center;
		justify-content: flex-end;
		gap: var(--spacing-xs);
		margin-left: auto;
	}

	/* Page-level dialog CSS loads after the shared components. Keep the token
	   contract authoritative for native Dealer dialogs as well. */
	.dealer-document-dialog.rida-modal-surface {
		border-radius: var(--radius-lg) !important;
		background: var(--surface) !important;
		color: var(--text) !important;
		box-shadow: var(--modal-shadow) !important;
	}

	.household-campaign-wizard__header.rida-modal-header {
		padding:
			var(--modal-header-padding-block-start)
			var(--modal-padding-inline)
			var(--modal-header-padding-block-end);
	}

	@media (max-width: 640px) {
		.rida-modal-header,
		.rida-modal-body,
		.rida-modal-footer {
			padding-right: 16px;
			padding-left: 16px;
		}

		.rida-modal-footer {
			align-items: stretch;
			flex-direction: column;
		}

		.rida-modal-actions {
			width: 100%;
		}

		.rida-modal-actions > .button {
			flex: 1 1 0;
		}
	}
}

/* Older route markup is mounted inside the same native RIDA dialog shell. */
.rida-legacy-modal {
	width: min(var(--rida-modal-width, 600px), calc(100vw - (var(--spacing-md) * 2)));
}

.rida-legacy-modal__body {
	flex: 1 1 auto;
}

.rida-legacy-modal-source {
	display: block !important;
	width: 100%;
	min-width: 0;
}

.rida-legacy-modal .rida-modal-actions {
	flex-wrap: wrap;
}

.rida-legacy-modal .rida-modal-actions.is-flex,
.rida-legacy-modal .rida-modal-actions.is-flex > .rida-modal-button {
	flex: 1 1 0;
}

.rida-legacy-modal .rida-modal-button {
	min-height: var(--control-height);
	font: 600 var(--control-font-size)/1.2 var(--font-main), sans-serif;
}

html.rida-modal-is-open {
	overflow: hidden;
}