/**
 * MCP Intake Form Styles
 *
 * Mobile-first, clean card layout.
 * All brand colours driven by CSS custom properties set from mcp_settings.
 * This file has zero hardcoded brand colours — everything comes from --mcp-*.
 *
 * @version 1.0.0
 */

/* =========================================================================
   Custom property defaults (overridden by inline style from PHP)
   ========================================================================= */

:root {
	--mcp-primary        : #185FA5;
	--mcp-secondary      : #0F3F6B;
	--mcp-accent         : #2196F3;
	--mcp-btn-text       : #ffffff;
	--mcp-bg             : #ffffff;
	--mcp-card-bg        : #ffffff;
	--mcp-radius         : 12px;
	--mcp-radius-input   : 8px;
	--mcp-radius-btn     : 8px;
	--mcp-font           : inherit;
	--mcp-font-heading   : inherit;
	--mcp-font-question  : inherit;
	--mcp-font-btn       : inherit;
	--mcp-text           : #1a1a1a;
	--mcp-text-muted     : #555555;
	--mcp-input-bg       : #ffffff;
	--mcp-input-border   : #d4d4d4;
	--mcp-card-border    : #e2e8f0;
	--mcp-error          : #d63638;
	--mcp-success        : #00a32a;
	--mcp-warning        : #f59e0b;
	--mcp-card-shadow    : 0 2px 16px rgba(0,0,0,.08);
	--mcp-card-hover-shadow : var(--mcp-card-shadow);
	--mcp-card-padding   : 32px;
	--mcp-card-padding-x : 28px;
	--mcp-section-spacing: 24px;
	--mcp-group-question-gap : 22px;
	--mcp-transition     : 180ms ease;
	--mcp-anim-speed     : 180ms;
	--mcp-progress-color : var(--mcp-primary);
	--mcp-progress-track : var(--mcp-input-border);
	--mcp-progress-label-color : var(--mcp-text-muted);
	--mcp-loading-track  : var(--mcp-input-border);
	--mcp-focus-color    : var(--mcp-primary);
	--mcp-section-title-color : var(--mcp-primary);
	--mcp-section-title-size  : 13px;
	--mcp-btn-font-size  : 16px;
	--mcp-btn-font-weight: 600;
	--mcp-btn-padding-y  : 12px;
	--mcp-btn-padding-x  : 24px;
	--mcp-btn-hover-brightness : 1.08;
	--mcp-btn-disabled-opacity : 0.65;
	--mcp-validation-size   : 14px;
	--mcp-validation-weight : 400;
	--mcp-container-width       : 640px;
	--mcp-tablet-container-width: 600px;
	--mcp-mobile-font-scale     : 1;
}

/* =========================================================================
   Screen (v2.26.84) - the full-viewport background layer, independent of
   the centered content container below. Owns the existing --mcp-bg
   variable (already the admin's only "background" control before this
   release) so it correctly fills edge-to-edge instead of being
   constrained by .mcp-intake-container's own max-width.
   ========================================================================= */

.mcp-intake-screen {
	display         : block !important;
	width           : 100% !important;
	min-height      : 100vh !important;
	min-height      : 100dvh !important;
	background-color: var(--mcp-bg, transparent);
	box-sizing      : border-box !important;
}

/* Full-bleed opt-in (v2.26.85) - only applied when the admin explicitly
   enables it (Screen Background is constrained by a theme's own content
   wrapper). Not the default: this well-established WordPress pattern
   only works correctly when the parent is itself horizontally centered
   on the page, and can visibly break sidebar/non-centered layouts. */
.mcp-intake-screen--full-bleed {
	width           : 100vw !important;
	margin-left     : calc(50% - 50vw);
	margin-right    : calc(50% - 50vw);
}

/* =========================================================================
   Container
   ========================================================================= */

.mcp-intake-container {
	font-family     : var(--mcp-font);
	font-weight     : var(--mcp-font-weight, 400);
	color           : var(--mcp-text);
	background-color: var(--mcp-content-bg, transparent);
	max-width       : var(--mcp-container-width, 640px) !important;
	margin          : 0 auto !important;
	padding         : var(--mcp-page-padding-y, 40px) var(--mcp-page-padding-x, 20px);
	box-sizing      : border-box !important;
}

.mcp-intake-question-screen {
	display         : flex;
	flex-direction  : column;
	gap             : calc(var(--mcp-section-spacing, 24px) * 0.5);
}

/* =========================================================================
   Card
   ========================================================================= */

.mcp-card {
	background      : var(--mcp-card-bg);
	border-radius   : var(--mcp-radius);
	box-shadow      : var(--mcp-card-shadow);
	padding         : var(--mcp-card-padding) var(--mcp-card-padding-x);
	box-sizing      : border-box;
	animation       : mcp-fade-in var(--mcp-anim-speed, 220ms) ease;
	transition      : box-shadow var(--mcp-transition);
}
.mcp-card:hover {
	box-shadow      : var(--mcp-card-hover-shadow, var(--mcp-card-shadow));
}

/* =========================================================================
   Page presentation modes (Structure page.layout, activated - previously
   stored/validated/published but never read by the renderer). 'card' is
   the existing .mcp-card--group above, unchanged. .mcp-page is the new,
   genuinely cardless wrapper for 'contained' and 'compact' - no
   background, border-radius, or shadow at all, so the surrounding page
   background shows through directly rather than an invisible card.
   ========================================================================= */

.mcp-page {
	box-sizing      : border-box;
	animation       : mcp-fade-in var(--mcp-anim-speed, 220ms) ease;
}
.mcp-page--contained {
	padding         : var(--mcp-card-padding, 40px) 0;
}
.mcp-page--compact {
	padding         : 16px 0;
	max-width       : 480px;
	margin-left     : auto;
	margin-right    : auto;
}

/* Width modifiers - independent of layout mode, apply to either .mcp-card
   or .mcp-page. Narrows/widens relative to the existing outer
   .mcp-intake-container boundary, never exceeding it. */
.mcp-page-w--narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.mcp-page-w--wide    { max-width: 100%; }

/* Spacing modifiers - independent of layout mode. Own explicit padding
   values so they apply consistently whether the wrapper is a card or a
   cardless page, rather than only adjusting a variable one of the two
   element types happens to already read. */
.mcp-page-sp--compact { padding-top: 16px !important; padding-bottom: 16px !important; }
.mcp-page-sp--relaxed { padding-top: 48px !important; padding-bottom: 48px !important; }
.mcp-card.mcp-page-sp--compact { padding: 16px 20px !important; }
.mcp-card.mcp-page-sp--relaxed { padding: 48px 40px !important; }

@keyframes mcp-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Welcome screen
   ========================================================================= */

.mcp-card--welcome {
	text-align      : center;
}

.mcp-page--welcome {
	text-align      : center;
}

.mcp-welcome-headline {
	font-size       : var(--mcp-welcome-title-size, var(--mcp-font-size-h, 1.6rem));
	font-weight     : 700;
	color           : var(--mcp-welcome-title-color, inherit);
	margin          : 0 0 12px;
	line-height     : 1.3;
}

.mcp-welcome-subtext {
	font-size       : var(--mcp-welcome-message-size, inherit);
	color           : var(--mcp-welcome-message-color, var(--mcp-text-muted));
	margin          : 0 0 28px;
	line-height     : 1.6;
}

.mcp-welcome-description {
	font-size       : var(--mcp-welcome-message-size, inherit);
	color           : var(--mcp-welcome-message-color, var(--mcp-text-muted));
	margin          : 0 0 28px;
	line-height     : 1.6;
}

/* Stable CTA hooks (v2.26.73) - layout-agnostic defaults. A plain block
   wrapper by default; introduces no visual change from the button's
   previous unwrapped placement for Default/Card/Contained/Compact. */
.mcp-welcome-actions {
	display         : block;
}
.mcp-welcome-cta-icon {
	display         : inline-block;
	margin-left     : 6px;
}

.mcp-welcome-disclaimer {
	font-size       : var(--mcp-welcome-disclaimer-size, var(--mcp-font-size-small, 13px));
	color           : var(--mcp-welcome-disclaimer-color, var(--mcp-text-muted));
	margin          : 24px 0 0;
	line-height     : 1.5;
}

/* =========================================================================
   Welcome screen - GoodLife Intro Design (Stage A)
   Plain CSS preset, layered on .mcp-page--contained. Never touches the
   Form Builder; never reachable from any admin-editable string other than
   the single 'goodlife' slug that adds this class. Existing inline
   custom-property overrides (title color, message color, etc.) still take
   precedence over these rules by normal CSS cascade, so content styling
   an admin has already set is never silently lost by choosing this design.
   ========================================================================= */

.mcp-welcome--goodlife {
	display         : flex;
	flex-direction  : column;
	min-height      : min(78vh, 640px);
	max-width       : 560px;
	margin-left     : auto;
	margin-right    : auto;
	padding-top     : clamp(24px, 6vh, 64px);
	padding-bottom  : clamp(24px, 6vh, 48px);
	text-align      : left;
}
.mcp-welcome--goodlife .mcp-welcome-headline {
	font-size       : var(--mcp-welcome-title-size, clamp(1.9rem, 4vw, 2.5rem));
	font-weight     : 700;
	color           : var(--mcp-welcome-title-color, var(--mcp-welcome-accent, var(--mcp-primary, inherit)));
	line-height     : 1.15;
	margin          : 0 0 18px;
}
.mcp-welcome--goodlife .mcp-welcome-subtext,
.mcp-welcome--goodlife .mcp-welcome-description {
	font-size       : var(--mcp-welcome-message-size, 1.15rem);
	font-weight     : 500;
	line-height     : 1.5;
	margin          : 0 0 16px;
}
.mcp-welcome--goodlife .mcp-welcome-estimated-time {
	font-size       : var(--mcp-font-size-small, 13px);
	color           : var(--mcp-text-muted);
	margin          : 0 0 32px;
}
.mcp-welcome--goodlife .mcp-welcome-custom {
	margin-bottom   : 32px;
}
/* Pushes the CTA toward the bottom of the viewport on short pages -
   flex + margin-top:auto, never fixed positioning, per explicit
   instruction. On tall content this simply has no visible effect, since
   there is no extra space to push into. */
/* Pushes the CTA toward the bottom of the viewport on short pages -
   flex + margin-top:auto, never fixed positioning, per explicit
   instruction. On tall content this simply has no visible effect, since
   there is no extra space to push into. Applied to .mcp-welcome-actions
   (the direct flex item) rather than the button itself, since the
   button is a grandchild of the flex container. */
.mcp-welcome--goodlife .mcp-welcome-actions {
	margin-top      : auto;
}
.mcp-welcome--goodlife .mcp-btn--primary {
	border-radius   : var(--mcp-welcome-cta-radius, 28px);
	padding-top     : var(--mcp-welcome-cta-padding-y, 16px);
	padding-bottom  : var(--mcp-welcome-cta-padding-y, 16px);
	font-weight     : var(--mcp-welcome-cta-font-weight, 700);
}
.mcp-welcome--goodlife .mcp-welcome-disclaimer {
	margin-top      : 20px;
	text-align      : left;
}
@media (max-width: 600px) {
	.mcp-welcome--goodlife {
		min-height  : auto;
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* =========================================================================
   Progress bar
   ========================================================================= */

.mcp-progress {
	display         : flex;
	align-items     : center;
	gap             : 10px;
	max-width       : var(--mcp-progress-max-width, 420px);
	margin          : 0 auto 8px;
}

.mcp-progress-bar {
	flex            : 1;
	height          : var(--mcp-progress-thickness, 5px);
	background      : var(--mcp-progress-track);
	border-radius   : 99px;
	overflow        : hidden;
}

.mcp-progress-fill {
	height          : 100%;
	background      : var(--mcp-progress-color);
	border-radius   : 99px;
	transition      : width var(--mcp-transition);
}

.mcp-progress-text {
	font-size       : 0.78rem;
	color           : var(--mcp-progress-label-color);
	white-space     : nowrap;
}

/* =========================================================================
   Question card
   ========================================================================= */

.mcp-section-header {
	font-size       : var(--mcp-section-title-size, 0.78rem);
	font-weight     : 600;
	text-transform  : uppercase;
	letter-spacing  : 0.06em;
	color           : var(--mcp-section-title-color);
	margin          : 0 0 8px;
}

.mcp-question-label {
	font-family     : var(--mcp-font-question);
	font-size       : var(--mcp-font-size-q, 1.25rem);
	font-weight     : 600;
	letter-spacing  : var(--mcp-letter-spacing, 0);
	margin          : 0 0 10px;
	line-height     : 1.4;
}

.mcp-question-description {
	color           : var(--mcp-text-muted);
	font-size       : var(--mcp-font-size-sm, 0.92rem);
	margin          : 0 0 8px;
	line-height     : 1.5;
}

.mcp-question-help {
	color           : var(--mcp-text-muted);
	font-size       : var(--mcp-font-size-sm, 0.82rem);
	font-style      : italic;
	margin          : 0 0 16px;
}

/* =========================================================================
   Badges
   ========================================================================= */

.mcp-badge {
	display         : inline-block;
	font-size       : 0.72rem;
	font-weight     : 600;
	padding         : 2px 8px;
	border-radius   : 99px;
	margin-bottom   : 8px;
}

.mcp-badge--locked {
	background      : var(--mcp-input-border);
	color           : var(--mcp-text-muted);
}

.mcp-badge--expired {
	background      : color-mix(in srgb, var(--mcp-warning) 20%, white);
	color           : color-mix(in srgb, var(--mcp-warning) 70%, black);
}

/* =========================================================================
   Field wrap & errors
   ========================================================================= */

.mcp-field-wrap {
	margin-bottom   : 8px;
}

.mcp-field-error {
	color           : var(--mcp-error);
	font-size       : var(--mcp-validation-size, 0.85rem);
	font-weight     : var(--mcp-validation-weight, 400);
	margin          : 4px 0 0;
}

.mcp-hidden {
	display         : none !important;
}

/* =========================================================================
   Inputs — shared
   ========================================================================= */

.mcp-input,
.mcp-select {
	min-height      : var(--mcp-input-min-height, 48px);
}

.mcp-textarea {
	min-height      : 120px;
	resize          : vertical;
}

.mcp-input,
.mcp-textarea,
.mcp-select {
	width           : 100%;
	padding         : 12px 14px;
	border          : 1.5px solid var(--mcp-input-border);
	border-radius   : var(--mcp-radius-input);
	font-family     : var(--mcp-font);
	font-size       : 1rem;
	color           : var(--mcp-text);
	background      : var(--mcp-input-bg);
	box-sizing      : border-box;
	transition      : border-color var(--mcp-transition), box-shadow var(--mcp-transition);
	-webkit-appearance : none;
	appearance      : none;
}

.mcp-input:focus,
.mcp-textarea:focus,
.mcp-select:focus {
	outline         : none;
	border-color    : var(--mcp-focus-color);
	box-shadow      : 0 0 0 3px color-mix(in srgb, var(--mcp-focus-color) 20%, transparent);
}

.mcp-input--error,
.mcp-input--error:focus {
	border-color    : var(--mcp-error);
	box-shadow      : 0 0 0 3px color-mix(in srgb, var(--mcp-error) 15%, transparent);
}

.mcp-input[disabled],
.mcp-textarea[disabled],
.mcp-select[disabled] {
	background      : color-mix(in srgb, var(--mcp-input-bg) 90%, var(--mcp-text-muted));
	color           : var(--mcp-text-muted);
	cursor          : not-allowed;
}

.mcp-input--number {
	max-width       : 160px;
}

.mcp-input--date {
	cursor          : pointer;
}

/* =========================================================================
   Radio
   ========================================================================= */

.mcp-radio-group {
	display         : flex;
	flex-direction  : column;
	gap             : 10px;
}

.mcp-radio-label {
	display         : flex;
	align-items     : center;
	gap             : 12px;
	padding         : 14px 16px;
	border          : 1.5px solid var(--mcp-option-border, var(--mcp-input-border));
	border-radius   : var(--mcp-radius-input);
	background      : var(--mcp-option-bg, var(--mcp-input-bg));
	cursor          : pointer;
	transition      : border-color var(--mcp-transition), background var(--mcp-transition);
}

.mcp-radio-label:hover {
	border-color    : var(--mcp-option-hover-border, var(--mcp-accent));
}

.mcp-radio-label:has(.mcp-radio:checked) {
	border-color    : var(--mcp-option-selected-border, var(--mcp-accent));
	background      : var(--mcp-option-selected-bg, color-mix(in srgb, var(--mcp-accent) 6%, transparent));
}

.mcp-radio {
	accent-color    : var(--mcp-accent);
	width           : 18px;
	height          : 18px;
	flex-shrink     : 0;
	cursor          : pointer;
}

/* =========================================================================
   Checkbox
   ========================================================================= */

.mcp-checkbox-group {
	display         : flex;
	flex-direction  : column;
	gap             : 10px;
}

.mcp-checkbox-label {
	display         : flex;
	align-items     : center;
	gap             : 12px;
	padding         : 14px 16px;
	border          : 1.5px solid var(--mcp-option-border, var(--mcp-input-border));
	border-radius   : var(--mcp-radius-input);
	background      : var(--mcp-option-bg, var(--mcp-input-bg));
	cursor          : pointer;
	transition      : border-color var(--mcp-transition), background var(--mcp-transition);
}

.mcp-checkbox-label:hover {
	border-color    : var(--mcp-option-hover-border, var(--mcp-accent));
}

.mcp-checkbox-label:has(.mcp-checkbox:checked) {
	border-color    : var(--mcp-option-selected-border, var(--mcp-accent));
	background      : var(--mcp-option-selected-bg, color-mix(in srgb, var(--mcp-accent) 6%, transparent));
}

.mcp-checkbox {
	accent-color    : var(--mcp-accent);
	width           : 18px;
	height          : 18px;
	flex-shrink     : 0;
}

/* =========================================================================
   Yes/No toggle
   ========================================================================= */

.mcp-yes-no {
	display         : flex;
	gap             : 12px;
}

.mcp-yn-btn {
	flex            : 1;
	padding         : 14px 20px;
	border          : 1.5px solid var(--mcp-input-border);
	border-radius   : var(--mcp-radius-input);
	background      : var(--mcp-input-bg);
	font-size       : 1rem;
	font-family     : var(--mcp-font);
	cursor          : pointer;
	transition      : border-color var(--mcp-transition), background var(--mcp-transition), color var(--mcp-transition);
}

.mcp-yn-btn--active {
	border-color    : var(--mcp-accent);
	background      : var(--mcp-accent);
	color           : var(--mcp-btn-text);
}

.mcp-yn-btn:hover:not(:disabled):not(.mcp-yn-btn--active) {
	border-color    : var(--mcp-accent);
}

/* =========================================================================
   Scale (1–10)
   ========================================================================= */

.mcp-scale {
	display         : flex;
	flex-wrap       : wrap;
	gap             : 8px;
}

.mcp-scale-btn {
	width           : 44px;
	height          : 44px;
	border          : 1.5px solid var(--mcp-input-border);
	border-radius   : var(--mcp-radius-input);
	background      : var(--mcp-input-bg);
	font-size       : 0.95rem;
	font-family     : var(--mcp-font);
	cursor          : pointer;
	transition      : all var(--mcp-transition);
}

.mcp-scale-btn--active {
	border-color    : var(--mcp-accent);
	background      : var(--mcp-accent);
	color           : var(--mcp-btn-text);
}

/* =========================================================================
   Compound field (height/weight)
   ========================================================================= */

.mcp-compound-field {
	display         : flex;
	align-items     : center;
	gap             : 12px;
}

.mcp-compound-part {
	display         : flex;
	align-items     : center;
	gap             : 6px;
}

.mcp-input--sm {
	width           : 80px;
}

.mcp-unit-label {
	color           : var(--mcp-text-muted);
	font-size       : 0.9rem;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.mcp-btn {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	padding         : var(--mcp-btn-padding-y, 12px) var(--mcp-btn-padding-x, 24px);
	border-radius   : var(--mcp-radius-btn);
	font-family     : var(--mcp-font-btn, var(--mcp-font));
	font-size       : var(--mcp-btn-font-size, 1rem);
	font-weight     : var(--mcp-btn-font-weight, 600);
	border          : none;
	cursor          : pointer;
	text-decoration : none;
	transition      : all var(--mcp-transition);
	white-space     : nowrap;
}

.mcp-btn--primary {
	background      : var(--mcp-primary);
	color           : var(--mcp-btn-text);
	width           : var(--mcp-btn-width, auto);
}

.mcp-btn--primary:hover:not(:disabled) {
	background      : var(--mcp-btn-hover-bg, var(--mcp-primary));
	filter          : brightness(var(--mcp-btn-hover-brightness, 1.08));
}

.mcp-btn--primary:active:not(:disabled) {
	filter          : brightness(calc(var(--mcp-btn-hover-brightness, 1.08) * 0.94));
}

.mcp-btn--primary:disabled {
	opacity         : var(--mcp-btn-disabled-opacity, 0.65);
	cursor          : not-allowed;
}

/* Welcome CTA overrides - scoped to the Welcome card only, never the
   questionnaire's own Continue/Back/Submit buttons elsewhere. */
.mcp-card--welcome .mcp-btn--primary {
	background      : var(--mcp-welcome-cta-bg, var(--mcp-primary));
	color           : var(--mcp-welcome-cta-text, var(--mcp-btn-text));
	font-size       : var(--mcp-welcome-cta-font-size, var(--mcp-btn-font-size, 1rem));
	font-weight     : var(--mcp-welcome-cta-font-weight, var(--mcp-btn-font-weight, 600));
	border-radius   : var(--mcp-welcome-cta-radius, var(--mcp-radius-btn));
	padding         : var(--mcp-welcome-cta-padding, var(--mcp-btn-padding-y, 12px) var(--mcp-btn-padding-x, 24px));
}

.mcp-btn--secondary {
	background      : transparent;
	color           : var(--mcp-secondary);
	border          : 1.5px solid var(--mcp-secondary);
}

.mcp-btn--secondary:hover:not(:disabled) {
	background      : color-mix(in srgb, var(--mcp-secondary) 8%, transparent);
}

.mcp-btn--secondary:disabled {
	opacity         : var(--mcp-btn-disabled-opacity, 0.65);
	cursor          : not-allowed;
}

.mcp-btn--ghost {
	background      : transparent;
	color           : var(--mcp-text-muted);
	padding-left    : 0;
}

.mcp-btn--ghost:hover {
	color           : var(--mcp-text);
}

.mcp-btn--link {
	background      : none;
	border          : none;
	color           : var(--mcp-text-muted);
	font-size       : 0.9rem;
	font-weight     : 400;
	padding         : 0;
	text-decoration : underline;
	cursor          : pointer;
}

.mcp-btn--wide {
	width           : 100%;
	padding         : 14px 24px;
}

/* Theme-CSS-leakage protection (v2.26.82), scoped to the Welcome CTA
   specifically - see the identical scoping pattern for
   .mcp-card--welcome .mcp-btn--primary above. */
.mcp-card--welcome .mcp-btn--wide,
.mcp-page--welcome .mcp-btn--wide {
	width           : 100% !important;
	box-sizing      : border-box !important;
}

/* =========================================================================
   Navigation row
   ========================================================================= */

.mcp-nav {
	display         : flex;
	align-items     : center;
	gap             : calc(var(--mcp-section-spacing, 24px) * 0.5);
	margin-top      : var(--mcp-section-spacing, 24px);
	flex-wrap       : wrap;
}

/* Navigation Placement: "Bottom of Viewport" - a min-height flex shell,
   not fixed positioning, per explicit instruction. Short pages get their
   navigation pushed to the bottom of the viewport; long pages naturally
   extend past 100vh and scroll normally, since min-height never clips
   content. Gated entirely to the opt-in .mcp-nav-bottom class - every
   other layout is completely unaffected. */
.mcp-intake-container.mcp-nav-bottom {
	display         : flex;
	flex-direction  : column;
	min-height      : 100vh;
}
.mcp-nav-bottom .mcp-nav {
	margin-top      : auto;
	padding-top     : var(--mcp-nav-gap, 32px);
}

.mcp-nav-spacer {
	flex            : 1;
}

/* =========================================================================
   Gate-blocked screen
   ========================================================================= */

.mcp-card--gate-blocked {
	text-align      : center;
}

.mcp-gate-icon {
	font-size       : 2.5rem;
	margin-bottom   : 12px;
}

.mcp-gate-message {
	color           : var(--mcp-text-muted);
	line-height     : 1.6;
}

/* =========================================================================
   Submitting spinner
   ========================================================================= */

.mcp-card--submitting {
	text-align      : center;
}

.mcp-spinner {
	width           : 36px;
	height          : 36px;
	border          : 4px solid var(--mcp-loading-track);
	border-top-color: var(--mcp-primary);
	border-radius   : 50%;
	animation       : mcp-spin 0.75s linear infinite;
	margin          : 0 auto 16px;
}

@keyframes mcp-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   Submitted screen
   ========================================================================= */

.mcp-card--submitted {
	text-align      : center;
}

.mcp-checkmark {
	width           : 56px;
	height          : 56px;
	border-radius   : 50%;
	background      : var(--mcp-success);
	color           : #fff;
	font-size       : 1.5rem;
	display         : flex;
	align-items     : center;
	justify-content : center;
	margin          : 0 auto 16px;
}

.mcp-submitted-headline {
	font-size       : 1.4rem;
	font-weight     : 700;
	margin          : 0 0 10px;
}

.mcp-submitted-body {
	color           : var(--mcp-text-muted);
	line-height     : 1.6;
}

/* =========================================================================
   Error screen
   ========================================================================= */

.mcp-card--error,
.mcp-intake-error {
	border-left     : 4px solid var(--mcp-error);
	padding-left    : 20px;
}

.mcp-error-text {
	color           : var(--mcp-text);
	margin          : 0 0 16px;
}

/* =========================================================================
   Global inline error notice
   ========================================================================= */

.mcp-global-error {
	background      : #fff0f0;
	border          : 1px solid var(--mcp-error);
	color           : var(--mcp-error);
	border-radius   : var(--mcp-radius-input);
	padding         : 10px 14px;
	font-size       : 0.9rem;
	margin-bottom   : 12px;
}

/* =========================================================================
   Login gate
   ========================================================================= */

.mcp-intake-gate {
	text-align      : center;
	padding         : 32px 16px;
}

/* =========================================================================
   File input
   ========================================================================= */

.mcp-file-input {
	width           : 100%;
	cursor          : pointer;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* =========================================================================
   Responsive - Tablet (Phase 20 Item #3: fills the previous gap between
   desktop and the 480px mobile breakpoint - extends the existing system,
   does not replace it)
   ========================================================================= */

@media ( max-width: 768px ) {
	.mcp-intake-container {
		max-width   : var(--mcp-tablet-container-width, 600px);
	}
}

@media ( max-width: 480px ) {
	.mcp-card {
		padding     : 24px 18px;
	}

	.mcp-welcome-headline {
		font-size   : calc(1.35rem * var(--mcp-mobile-font-scale, 1));
	}

	.mcp-question-label {
		font-size   : calc(1.1rem * var(--mcp-mobile-font-scale, 1));
	}

	.mcp-yes-no {
		flex-direction : column;
	}

	.mcp-scale {
		gap         : 6px;
	}

	.mcp-scale-btn {
		width       : 38px;
		height      : 38px;
	}

	.mcp-nav {
		flex-direction : column;
	}

	.mcp-btn {
		width       : 100%;
	}

	.mcp-btn--ghost {
		order       : 2;
	}
}

/* ==========================================================================
   Repeat Review Screens
   Added: repeat-review, repeat-confirm-questions, answer groups, attestation
   ========================================================================== */

/* ── Repeat review card ──────────────────────────────────────────────────── */
.mcp-card--repeat-review,
.mcp-card--repeat-confirm {
	border-top     : 4px solid var(--mcp-primary, #2271b1);
}

.mcp-repeat-headline {
	font-size      : 1.35rem;
	font-weight    : 700;
	margin         : 0 0 0.5rem;
	color          : var(--mcp-text, #1e1e1e);
}

.mcp-repeat-description {
	color          : var(--mcp-text-muted, #555);
	margin         : 0 0 0.75rem;
}

.mcp-repeat-prior-date {
	font-size      : 0.85rem;
	color          : var(--mcp-text-muted, #6b7280);
	margin-bottom  : 1rem;
}

/* ── Answer groups ───────────────────────────────────────────────────────── */
.mcp-answer-group {
	margin         : 1.25rem 0;
}

.mcp-answer-group-title {
	font-size      : 0.95rem;
	font-weight    : 600;
	color          : var(--mcp-text, #1e1e1e);
	border-bottom  : 1px solid #e5e7eb;
	padding-bottom : 0.35rem;
	margin         : 0 0 0.5rem;
}

.mcp-answer-table {
	width          : 100%;
	border-collapse: collapse;
}

.mcp-answer-row:nth-child(even) {
	background     : #f9fafb;
}

.mcp-answer-key,
.mcp-answer-val {
	padding        : 0.35rem 0.5rem;
	font-size      : 0.875rem;
	vertical-align : top;
}

.mcp-answer-key {
	color          : var(--mcp-text-muted, #6b7280);
	width          : 45%;
	font-weight    : 500;
	white-space    : nowrap;
}

.mcp-answer-val {
	color          : var(--mcp-text, #1e1e1e);
	word-break     : break-word;
}

.mcp-answer-val--expired {
	color          : #dc2626;
	font-style     : italic;
}

/* ── Divider between sections ─────────────────────────────────────────────── */
.mcp-divider {
	border         : none;
	border-top     : 1px solid #e5e7eb;
	margin         : 1.25rem 0;
}

/* ── Change question ──────────────────────────────────────────────────────── */
.mcp-repeat-change-question {
	font-weight    : 600;
	color          : var(--mcp-text, #1e1e1e);
	margin-bottom  : 1rem;
}

/* ── Repeat action buttons container ──────────────────────────────────────── */
.mcp-repeat-actions {
	display        : flex;
	flex-direction : column;
	gap            : 0.75rem;
}

/* ── Confirm fields group ────────────────────────────────────────────────── */
.mcp-confirm-fields {
	margin         : 1rem 0;
	display        : flex;
	flex-direction : column;
	gap            : 1rem;
}

/* ── Attestation block ───────────────────────────────────────────────────── */
.mcp-attestation-wrap {
	display        : flex;
	align-items    : flex-start;
	gap            : 0.625rem;
	background     : #fffbeb;
	border         : 1px solid #fcd34d;
	border-radius  : 6px;
	padding        : 0.875rem;
	margin         : 1.25rem 0 0.5rem;
}

.mcp-attestation-wrap input[type="checkbox"] {
	width          : 1.125rem;
	height         : 1.125rem;
	flex-shrink    : 0;
	margin-top     : 0.125rem;
	cursor         : pointer;
}

.mcp-attestation-label {
	font-size      : 0.875rem;
	color          : var(--mcp-text, #1e1e1e);
	line-height    : 1.5;
	cursor         : pointer;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.mcp-back-link {
	display        : inline-block;
	margin-top     : 1rem;
	font-size      : 0.875rem;
	color          : var(--mcp-primary, #2271b1);
	text-decoration: none;
}

.mcp-back-link:hover {
	text-decoration: underline;
}

/* ── Responsive adjustments for repeat screens ───────────────────────────── */
@media ( max-width: 480px ) {
	.mcp-answer-key {
		width          : 40%;
		white-space    : normal;
	}

	.mcp-repeat-actions {
		gap            : 0.5rem;
	}
}

/* =========================================================================
   Phase 17C Extensions
   Layout modes, animations, enhanced repeat review, per-question widths,
   screen-reader utilities, button variants, progress styles
   ========================================================================= */

/* ── Screen reader only ─────────────────────────────────────────────────── */
.mcp-sr-only {
	position   : absolute;
	width      : 1px;
	height     : 1px;
	padding    : 0;
	margin     : -1px;
	overflow   : hidden;
	clip       : rect(0,0,0,0);
	white-space: nowrap;
	border     : 0;
}

/* ── Layout modes ───────────────────────────────────────────────────────── */

/* Wizard (default) — already styled above */
.mcp-intake-container.mcp-layout--wizard { max-width: var(--mcp-container-width, 640px); }

/* Card layout — more compact, grouped feel */
.mcp-intake-container.mcp-layout--card { max-width: 720px; }
.mcp-layout--card .mcp-card { border: 1px solid var(--mcp-card-border, #e2e8f0); box-shadow: none; }

/* Minimal / "Open Page" — no outer card shadow/border/background. Radio
   and checkbox CONTROLS are deliberately left untouched here (previously,
   incorrectly, also stripped - this was never the intent of "no shadows,
   no borders" on the outer card, and directly regressed the explicit
   requirement that actual form controls remain visually styled). */
.mcp-layout--minimal .mcp-card {
	box-shadow  : none;
	background  : transparent;
	border      : none;
	padding     : 24px 0;
}
.mcp-layout--minimal.mcp-grouped .mcp-group-question { border-bottom: none; }

/* Open Page: the existing --mcp-bg (Appearance "Page Background") must
   cover the full viewport, not merely the width-constrained,
   centered .mcp-intake-container - see the one-line body-class toggle in
   intake.js this rule pairs with. Only ever active for this one mode. */
body.mcp-open-page-bg {
	background-color: var(--mcp-bg, transparent);
}
@media ( max-width: 480px ) {
	.mcp-layout--minimal.mcp-intake-container { padding-left: 22px; padding-right: 22px; }
}

/* Compact — tighter spacing */
.mcp-layout--compact .mcp-card   { padding: 20px 18px; }
.mcp-layout--compact .mcp-question-label { font-size: 1.05rem; margin-bottom: 6px; }
.mcp-layout--compact .mcp-nav   { margin-top: 14px; }

/* Modern Medical — healthcare-optimised, clinical feel */
.mcp-intake-container.mcp-layout--modern_medical { max-width: 680px; }
.mcp-layout--modern_medical .mcp-card {
	border-radius : 4px;
	border-left   : 4px solid var(--mcp-primary);
	box-shadow    : 0 1px 6px rgba(0,0,0,.06);
}
.mcp-layout--modern_medical .mcp-question-label {
	font-size     : 1.15rem;
	color         : #1a2e4a;
	letter-spacing: -0.01em;
}
.mcp-layout--modern_medical .mcp-section-header {
	font-size     : 0.72rem;
	background    : var(--mcp-primary);
	color         : #fff;
	padding       : 3px 10px;
	border-radius : 2px;
	display       : inline-block;
	margin-bottom : 12px;
}

/* ── Per-question width modifiers ───────────────────────────────────────── */
.mcp-q--half  { max-width: 50%; }
.mcp-q--third { max-width: 33.33%; }
.mcp-q--center { text-align: center; }
.mcp-q--right  { text-align: right; }

/* =========================================================================
   Phase 20 Item #2: Grouped rendering ("grouped_by_section" display mode)

   One .mcp-card--group per section/module, holding every visible question
   in that section plus one shared nav row - instead of one .mcp-card per
   question. Reuses .mcp-card, .mcp-question-label, .mcp-field-wrap,
   .mcp-field-error, .mcp-nav, and every field-type class unchanged; only
   the grouping/spacing is new.

   Layout variants below key off the EXISTING appearance.layout_mode value
   (.mcp-layout--wizard/card/minimal/compact/modern_medical, already set on
   the root element) combined with the new .mcp-grouped marker - so the
   existing Appearance Builder is the single place admins choose a grouped
   layout, with no new settings key.
   ========================================================================= */

.mcp-card--group { display: flex; flex-direction: column; }

.mcp-group-header {
	font-family    : var(--mcp-font-heading);
	font-size      : var(--mcp-page-title-size, 1.4rem);
	font-weight    : 700;
	color          : var(--mcp-page-title-color, var(--mcp-text));
	margin         : 0 0 20px;
	line-height    : 1.3;
}

.mcp-group-subtitle {
	font-family    : var(--mcp-font);
	font-size      : var(--mcp-page-subtitle-size, var(--mcp-font-size-small, 14px));
	font-weight    : 500;
	color          : var(--mcp-page-subtitle-color, var(--mcp-text-muted));
	margin         : 0 0 20px;
	line-height    : 1.5;
}
.mcp-group-header + .mcp-group-subtitle { margin-top: -12px; }

.mcp-group-description {
	font-family    : var(--mcp-font);
	font-size      : var(--mcp-page-description-size, var(--mcp-font-size-small, 14px));
	font-weight    : 400;
	color          : var(--mcp-page-description-color, var(--mcp-text-muted));
	margin         : 0 0 20px;
	line-height    : 1.55;
}
.mcp-group-header + .mcp-group-description,
.mcp-group-subtitle + .mcp-group-description { margin-top: -12px; }

.mcp-group-questions {
	display        : flex;
	flex-direction : column;
}

.mcp-group-question {
	padding-bottom : var(--mcp-group-question-gap, 22px);
	margin-bottom  : var(--mcp-group-question-gap, 22px);
	border-bottom  : 1px solid var(--mcp-card-border, #ececec);
}
.mcp-group-question:last-child {
	padding-bottom : 0;
	margin-bottom  : 0;
	border-bottom  : none;
}
.mcp-group-question .mcp-question-label { font-size: 1.05rem; margin-bottom: 6px; }
.mcp-group-question .mcp-question-description,
.mcp-group-question .mcp-question-help { font-size: 0.88rem; }

/* -- Section Cards (default / wizard) - one generously-spaced card per section -- */
.mcp-layout--wizard.mcp-grouped .mcp-card--group { padding: 36px 32px; }

/* -- Card Groups - two-column grid of questions where width allows -------- */
.mcp-intake-container.mcp-layout--card.mcp-grouped { max-width: 820px; }
.mcp-layout--card.mcp-grouped .mcp-group-questions {
	display              : grid;
	grid-template-columns: repeat(2, 1fr);
	gap                  : 0 28px;
}
.mcp-layout--card.mcp-grouped .mcp-group-question { grid-column: span 2; }
.mcp-layout--card.mcp-grouped .mcp-group-question.mcp-q--half  { grid-column: span 1; }
.mcp-layout--card.mcp-grouped .mcp-group-question.mcp-q--third { grid-column: span 1; }

/* -- Compact - tighter vertical rhythm ------------------------------------ */
.mcp-layout--compact.mcp-grouped .mcp-card--group { padding: 22px 20px; }
.mcp-layout--compact.mcp-grouped .mcp-group-header { font-size: 1.15rem; margin-bottom: 14px; }
.mcp-layout--compact.mcp-grouped .mcp-group-question { padding-bottom: 14px; margin-bottom: 14px; }

/* -- Minimal - no dividers between questions ------------------------------ */
.mcp-layout--minimal.mcp-grouped .mcp-group-question { border-bottom: none; }

/* -- Medical Intake Layout (modern_medical) - clinical banner-style header  */
.mcp-layout--modern_medical.mcp-grouped .mcp-group-header {
	font-size     : 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background    : var(--mcp-primary);
	color         : #fff;
	padding       : 8px 14px;
	border-radius : 3px;
	display       : inline-block;
}
.mcp-layout--modern_medical.mcp-grouped .mcp-group-question {
	border-bottom: 1px solid #e8edf3;
}

/* -- Responsive: two-column grouped layouts collapse on tablet/mobile ----- */
@media ( max-width: 768px ) {
	.mcp-layout--card.mcp-grouped .mcp-group-questions { grid-template-columns: 1fr; }
	.mcp-layout--card.mcp-grouped .mcp-group-question,
	.mcp-layout--card.mcp-grouped .mcp-group-question.mcp-q--half,
	.mcp-layout--card.mcp-grouped .mcp-group-question.mcp-q--third { grid-column: span 1; }
}
@media ( max-width: 480px ) {
	.mcp-layout--wizard.mcp-grouped .mcp-card--group,
	.mcp-card--group { padding: 24px 18px; }
	.mcp-group-header { font-size: 1.2rem; }
}

@media (max-width: 600px) {
	.mcp-q--half, .mcp-q--third { max-width: 100%; }
}

/* ── Question animations ────────────────────────────────────────────────── */
.mcp-anim--fade  { animation: mcp-fade-in   var(--mcp-anim-speed, 280ms) ease; }
.mcp-anim--slide { animation: mcp-slide-up  var(--mcp-anim-speed, 280ms) ease; }
.mcp-anim--scale { animation: mcp-scale-in  var(--mcp-anim-speed, 280ms) cubic-bezier(.175,.885,.32,1.275); }

@keyframes mcp-slide-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes mcp-scale-in {
	from { opacity: 0; transform: scale(.95); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Icon before question label ─────────────────────────────────────────── */
.mcp-question-icon {
	font-size      : 1.75rem;
	margin-bottom  : 8px;
	line-height    : 1;
}

/* ── HTML before/after blocks ───────────────────────────────────────────── */
.mcp-html-before { margin-bottom: 12px; }
.mcp-html-after  { margin-top: 12px; color: var(--mcp-text-muted); font-size: 0.88rem; }

/* ── Large/compact input modifiers ─────────────────────────────────────── */
.mcp-field-wrap--large .mcp-input,
.mcp-field-wrap--large .mcp-textarea,
.mcp-field-wrap--large .mcp-select { padding: 16px 18px; font-size: 1.1rem; }

.mcp-field-wrap--compact .mcp-input,
.mcp-field-wrap--compact .mcp-textarea,
.mcp-field-wrap--compact .mcp-select { padding: 8px 10px; font-size: 0.9rem; }

/* ── Button additions ───────────────────────────────────────────────────── */
.mcp-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.mcp-btn--outline {
	background  : transparent;
	color       : var(--mcp-primary);
	border      : 2px solid var(--mcp-primary);
	font-weight : 600;
}
.mcp-btn--outline:hover { background: color-mix(in srgb, var(--mcp-primary) 8%, transparent); }

/* ── Progress bar — dots style ──────────────────────────────────────────── */
.mcp-progress--dots {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 8px;
	padding         : 12px 0;
}
.mcp-progress-dot {
	width           : 10px;
	height          : 10px;
	border-radius   : 50%;
	background      : var(--mcp-progress-track);
	transition      : background var(--mcp-transition);
}
.mcp-progress-dot--filled { background: var(--mcp-progress-color); }

/* ── Progress bar — steps style ─────────────────────────────────────────── */
.mcp-progress--steps {
	display         : flex;
	align-items     : center;
	gap             : 0;
	padding         : 16px 0;
}
.mcp-progress-step {
	width           : 28px;
	height          : 28px;
	border-radius   : 50%;
	background      : var(--mcp-progress-track);
	color           : var(--mcp-progress-label-color);
	font-size       : 0.75rem;
	font-weight     : 600;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	transition      : all var(--mcp-transition);
}
.mcp-progress-step--done   { background: var(--mcp-progress-color); color: var(--mcp-btn-text); }
.mcp-progress-step--active { background: var(--mcp-progress-color); color: var(--mcp-btn-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcp-progress-color) 25%, transparent); }
.mcp-progress-step-line { flex: 1; height: 2px; background: var(--mcp-progress-track); margin: 0 4px; }

/* =========================================================================
   Phase 17C: Enhanced Repeat Review — grouped cards, timeline, attestation
   ========================================================================= */

.mcp-repeat-wrap {
	display         : flex;
	flex-direction  : column;
	gap             : 16px;
}

/* ── Header card ─────────────────────────────────────────────────────────── */
.mcp-card--repeat-header {
	border-top      : none;
	border-left     : 4px solid var(--mcp-primary);
	background      : var(--mcp-card-bg);
	color           : var(--mcp-text);
	border-radius   : var(--mcp-radius);
}

/* Uses the same semantic text tokens as every other light-background
   card/heading in this file (e.g. .mcp-group-header) - never assumes
   --mcp-primary (admin-configurable, no guaranteed darkness) is safe
   to put white text on top of. No text-shadow: unnecessary and
   potentially distracting on dark text over a light background. */
.mcp-card--repeat-header .mcp-repeat-headline { color: var(--mcp-text); }
.mcp-card--repeat-header .mcp-repeat-description { color: var(--mcp-text-muted); }

.mcp-repeat-badge {
	width           : 44px;
	height          : 44px;
	border-radius   : 50%;
	background      : color-mix(in srgb, var(--mcp-primary) 15%, transparent);
	display         : flex;
	align-items     : center;
	justify-content : center;
	margin-bottom   : 14px;
	color           : var(--mcp-primary);
}

.mcp-repeat-meta {
	display         : flex;
	gap             : 16px;
	flex-wrap       : wrap;
	margin-top      : 12px;
}
.mcp-repeat-meta-item {
	display         : flex;
	align-items     : center;
	gap             : 6px;
	font-size       : 0.82rem;
	color           : var(--mcp-text-muted);
}
.mcp-repeat-meta-item strong { color: var(--mcp-text); }

/* ── Grouped answer cards ────────────────────────────────────────────────── */
.mcp-card--answer-group { padding: 0; overflow: hidden; }

.mcp-answer-group-header {
	display         : flex;
	align-items     : center;
	width           : 100%;
	padding         : 16px 20px;
	background      : transparent;
	border          : none;
	cursor          : pointer;
	text-align      : left;
	gap             : 8px;
	transition      : background var(--mcp-transition);
}
.mcp-answer-group-header:hover { background: #f8fafc; }

.mcp-answer-group-title {
	flex            : 1;
	font-weight     : 600;
	font-size       : 0.95rem;
	color           : var(--mcp-text);
}

.mcp-answer-count {
	font-size       : 0.78rem;
	color           : var(--mcp-text-muted);
	background      : #f0f4ff;
	padding         : 2px 8px;
	border-radius   : 99px;
}

.mcp-chevron {
	color           : var(--mcp-text-muted);
	transition      : transform 0.2s ease;
	flex-shrink     : 0;
}
.mcp-chevron--open { transform: rotate(180deg); }

.mcp-answer-group-body {
	border-top      : 1px solid #f0f4f8;
	padding         : 8px 0;
}

.mcp-answer-row {
	display         : flex;
	align-items     : baseline;
	padding         : 8px 20px;
	gap             : 12px;
	border-bottom   : 1px solid #f8fafc;
}
.mcp-answer-row:last-child { border-bottom: none; }
.mcp-answer-row:hover { background: #fafbff; }

.mcp-answer-key {
	font-size       : 0.83rem;
	color           : var(--mcp-text-muted);
	min-width       : 140px;
	flex-shrink     : 0;
}
.mcp-answer-val {
	font-size       : 0.88rem;
	color           : var(--mcp-text);
	flex            : 1;
	word-break      : break-word;
}
.mcp-answer-val--expired { color: #dc2626; }

/* ── Action card ─────────────────────────────────────────────────────────── */
.mcp-card--repeat-action { }

.mcp-repeat-change-wrap {
	margin-bottom   : 20px;
}

.mcp-repeat-change-question {
	font-size       : 1.05rem;
	font-weight     : 500;
	color           : var(--mcp-text);
	line-height     : 1.5;
	margin          : 0;
}

.mcp-repeat-actions {
	display         : flex;
	flex-direction  : column;
	gap             : 10px;
}

/* ── Attestation card — premium ──────────────────────────────────────────── */
.mcp-card--attestation {
	background      : #fffbeb;
	border          : 1px solid #fbbf24;
}

.mcp-attestation-header {
	display         : flex;
	align-items     : center;
	gap             : 8px;
	font-size       : 0.9rem;
	font-weight     : 600;
	color           : #92400e;
	margin-bottom   : 14px;
}

.mcp-attestation-body { }

.mcp-attestation-label-wrap {
	display         : flex;
	align-items     : flex-start;
	gap             : 10px;
	cursor          : pointer;
}

.mcp-attestation-checkbox {
	width           : 20px;
	height          : 20px;
	flex-shrink     : 0;
	margin-top      : 2px;
	accent-color    : var(--mcp-primary);
	cursor          : pointer;
}

.mcp-attestation-text {
	font-size       : 0.88rem;
	color           : #78350f;
	line-height     : 1.6;
}

/* ── Actions card ────────────────────────────────────────────────────────── */
.mcp-card--actions { background: transparent; box-shadow: none; border: none; padding: 0; }
.mcp-card--actions .mcp-back-link { display: inline-block; margin-top: 12px; }

/* ── Enhanced checkmark icon ─────────────────────────────────────────────── */
.mcp-checkmark {
	background      : var(--mcp-success, #10b981);
}

/* ── Responsive adjustments ──────────────────────────────────────────────── */
@media (max-width: 480px) {
	.mcp-answer-key { min-width: 100px; font-size: 0.78rem; }
	.mcp-card--repeat-header { padding: 24px 18px; }
	.mcp-btn--lg { padding: 14px 24px; }
}

/* =========================================================================
   Theme presets — applied via data-theme attribute on container
   Administrators can activate presets from the Appearance Builder.
   ========================================================================= */

[data-mcp-theme="minimal"] {
	--mcp-primary      : #374151;
	--mcp-bg           : #f9fafb;
	--mcp-card-bg      : #fff;
	--mcp-radius       : 4px;
	--mcp-card-shadow  : none;
	--mcp-font-heading : 'Inter, sans-serif';
}

[data-mcp-theme="luxury"] {
	--mcp-primary      : #92400e;
	--mcp-secondary    : #78350f;
	--mcp-bg           : #fffbf0;
	--mcp-card-bg      : #fff;
	--mcp-radius       : 2px;
	--mcp-font-heading : 'Playfair Display, serif';
}

[data-mcp-theme="dark"] {
	--mcp-bg           : #0f172a;
	--mcp-card-bg      : #1e293b;
	--mcp-text         : #f1f5f9;
	--mcp-text-muted   : #94a3b8;
	--mcp-input-border : #334155;
	--mcp-card-border  : #334155;
}

[data-mcp-theme="modern_medical"] {
	--mcp-primary      : #0369a1;
	--mcp-bg           : #f0f9ff;
	--mcp-card-bg      : #fff;
	--mcp-radius       : 6px;
}

[data-mcp-theme="bdrx"] {
	--mcp-primary      : #185FA5;
	--mcp-secondary    : #0F3F6B;
	--mcp-accent       : #2196F3;
	--mcp-bg           : #F8FAFC;
	--mcp-radius       : 12px;
}

/* =========================================================================
   Phase 17E: Presentation Blocks
   These classes style non-question content blocks rendered between questions.
   They NEVER affect Connect Scripts payloads or clinical logic.
   ========================================================================= */

.mcp-block-heading {
	font-family      : var(--mcp-font-heading, var(--mcp-font-body, inherit));
	font-size        : var(--mcp-font-size-h, 1.5rem);
	font-weight      : var(--mcp-font-weight-h, 600);
	color            : var(--mcp-text, #1e293b);
	margin           : 0 0 8px;
	line-height      : 1.3;
}

.mcp-block-paragraph {
	font-size        : var(--mcp-font-size, 1rem);
	color            : var(--mcp-text-muted, #64748b);
	line-height      : var(--mcp-line-height, 1.6);
	margin           : 0 0 12px;
}

.mcp-block-divider {
	border           : none;
	border-top       : 1px solid var(--mcp-card-border, #e2e8f0);
	margin           : 16px 0;
}

.mcp-block-spacer {
	display          : block;
}

.mcp-block-html {
	font-size        : var(--mcp-font-size, 1rem);
	color            : var(--mcp-text, #1e293b);
	line-height      : var(--mcp-line-height, 1.6);
}

.mcp-block-html p  { margin-bottom: 8px; }
.mcp-block-html ul { margin-left: 18px; margin-bottom: 8px; }
.mcp-block-html a  { color: var(--mcp-primary, #185fa5); }

.mcp-block-alert {
	background       : #fff8e1;
	border           : 1px solid #fbbf24;
	border-left      : 4px solid #f59e0b;
	border-radius    : calc(var(--mcp-radius-input, 8px));
	padding          : 12px 14px;
	margin           : 8px 0;
}

.mcp-block-alert-title {
	display          : block;
	font-size        : .9rem;
	font-weight      : 600;
	color            : #92400e;
	margin-bottom    : 4px;
}

.mcp-block-alert-text {
	font-size        : .85rem;
	color            : #78350f;
	margin           : 0;
	line-height      : 1.5;
}

.mcp-block-info {
	background       : #eff6ff;
	border           : 1px solid #bfdbfe;
	border-left      : 4px solid #3b82f6;
	border-radius    : calc(var(--mcp-radius-input, 8px));
	padding          : 12px 14px;
	margin           : 8px 0;
}

.mcp-block-info-title {
	display          : block;
	font-size        : .9rem;
	font-weight      : 600;
	color            : #1e40af;
	margin-bottom    : 4px;
}

.mcp-block-info-text {
	font-size        : .85rem;
	color            : #1e3a8a;
	margin           : 0;
	line-height      : 1.5;
}

.mcp-block-consent {
	background       : #f0fdf4;
	border           : 1px solid #bbf7d0;
	border-radius    : calc(var(--mcp-radius-input, 8px));
	padding          : 12px 14px;
	margin           : 8px 0;
}

.mcp-block-consent-title {
	display          : block;
	font-size        : .9rem;
	font-weight      : 600;
	color            : #14532d;
	margin-bottom    : 4px;
}

.mcp-block-consent-text {
	font-size        : .85rem;
	color            : #166534;
	margin           : 0;
	line-height      : 1.6;
}

/* =========================================================================
   Phase 17F: Alert style variants + consent display styles
   ========================================================================= */

/* alert error */
.mcp-block-alert--error {
	background  : #fef2f2;
	border-color: #fca5a5;
	border-left-color: #ef4444;
}
.mcp-block-alert--error .mcp-block-alert-title { color: #991b1b; }
.mcp-block-alert--error .mcp-block-alert-text  { color: #7f1d1d; }

/* alert success */
.mcp-block-alert--success {
	background  : #f0fdf4;
	border-color: #bbf7d0;
	border-left-color: #22c55e;
}
.mcp-block-alert--success .mcp-block-alert-title { color: #14532d; }
.mcp-block-alert--success .mcp-block-alert-text  { color: #166534; }

/* alert info */
.mcp-block-alert--info {
	background  : #eff6ff;
	border-color: #bfdbfe;
	border-left-color: #3b82f6;
}
.mcp-block-alert--info .mcp-block-alert-title { color: #1e40af; }
.mcp-block-alert--info .mcp-block-alert-text  { color: #1e3a8a; }

/* alert warning (default — already defined, reaffirm) */
.mcp-block-alert--warning {
	background  : #fff8e1;
	border-color: #fbbf24;
	border-left-color: #f59e0b;
}
.mcp-block-alert--warning .mcp-block-alert-title { color: #92400e; }
.mcp-block-alert--warning .mcp-block-alert-text  { color: #78350f; }

/* consent display style variants */
.mcp-block-consent--plain {
	background  : transparent;
	border      : none;
	padding     : 0;
}
.mcp-block-consent--bordered {
	background   : transparent;
	border       : 2px solid var(--mcp-input-border, #d4d4d4);
	border-radius: var(--mcp-radius, 8px);
}

/* =========================================================================
   Checkpoint Presentation Layer - Modal Popup display style
   (Builder UX Phase: generic, reusable by any future checkpoint type,
   not authentication-specific.)
   ========================================================================= */

.mcp-modal-backdrop {
	position        : fixed;
	inset           : 0;
	background      : rgba(15, 23, 42, 0.55);
	display         : flex;
	align-items     : center;
	justify-content : center;
	padding         : 20px;
	z-index         : 100000;
	animation       : mcp-fade-in var(--mcp-anim-speed, 220ms) ease;
}
.mcp-modal-dialog {
	background      : var(--mcp-card-bg);
	border-radius   : var(--mcp-radius);
	box-shadow      : 0 20px 60px rgba(15, 23, 42, 0.35);
	max-width       : 480px;
	width           : 100%;
	max-height      : 90vh;
	overflow-y      : auto;
	box-sizing      : border-box;
}
.mcp-modal-dialog .mcp-card--checkpoint {
	box-shadow      : none;
	animation       : none;
}
@media (max-width: 480px) {
	.mcp-modal-dialog { max-width: 100%; }
}

/* =========================================================================
   Patient Memory & Smart Reuse (Phase 2B) - prefill / confirm presentation
   ========================================================================= */

.mcp-reuse-presentation {
	background      : var(--mcp-card-bg-subtle, #f8fafc);
	border          : 1px solid var(--mcp-input-border, #d4d4d4);
	border-radius   : var(--mcp-radius, 8px);
	padding         : 14px 16px;
}
.mcp-reuse-value {
	font-size   : 1.1em;
	font-weight : 600;
	margin-bottom: 6px;
}
.mcp-reuse-badge {
	color       : var(--mcp-success-color, #2e7d32);
	font-size   : 0.9em;
	margin      : 0 0 8px;
}
.mcp-reuse-confirm-prompt {
	color       : var(--mcp-text-muted, #6b7280);
	font-size   : 0.9em;
	margin      : 0 0 10px;
}
.mcp-reuse-confirm-actions {
	display     : flex;
	gap         : 10px;
	flex-wrap   : wrap;
}

/* =========================================================================
   Product Selection & Intake-to-Cart Integration (Phase 2C Step 2)
   ========================================================================= */

.mcp-product-selection {
	margin-top      : 20px;
	padding-top     : 20px;
	border-top      : 1px solid var(--mcp-input-border, #d4d4d4);
	text-align      : left;
}
.mcp-product-selection-heading { font-size: 1.2em; font-weight: 700; margin: 0 0 4px; }
.mcp-product-selection-subtext { color: var(--mcp-text-muted, #6b7280); margin: 0 0 12px; }
.mcp-product-selection-options { margin-bottom: 14px; }

.mcp-product-option-card {
	position        : relative;
	display         : flex;
	align-items     : flex-start;
	gap             : 14px;
	padding         : 16px;
	border          : 2px solid var(--mcp-input-border, #d4d4d4);
	border-radius   : var(--mcp-radius, 8px);
	margin-bottom   : 12px;
	cursor          : pointer;
	background      : var(--mcp-card-bg, #fff);
	transition      : border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
/* Subtle hover: a slight lift and shadow only - never flashy. Skipped
   for the single-treatment card, which has nothing to choose between. */
.mcp-product-option-card:not(.mcp-product-option-card--single):hover {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transform : translateY(-1px);
}
.mcp-product-option-card--single { cursor: default; }
/* Selected state: accent border, tinted background, and elevation -
   never relying on the radio circle alone. Driven entirely by :has(),
   so JS never needs a second, duplicate "which card is selected" state. */
.mcp-product-option-card:has(.mcp-product-option-radio:checked) {
	border-color    : var(--mcp-treatment-accent, #2563eb);
	background-color: #eff6ff; /* Fallback for browsers without color-mix() support - the line below overrides this when supported. */
	background-color: color-mix(in srgb, var(--mcp-treatment-accent, #2563eb) 6%, var(--mcp-card-bg, #fff));
	box-shadow      : 0 2px 10px rgba(37, 99, 235, 0.18);
	box-shadow      : 0 2px 10px color-mix(in srgb, var(--mcp-treatment-accent, #2563eb) 18%, transparent);
}
/* Keyboard focus - the radio itself is the real focusable element;
   its own focus state visibly outlines the whole card, never only
   the tiny circle. */
.mcp-product-option-card:has(.mcp-product-option-radio:focus-visible) {
	outline        : 2px solid var(--mcp-treatment-accent, #2563eb);
	outline-offset : 2px;
}
.mcp-product-option-radio {
	margin-top   : 4px;
	flex-shrink  : 0;
	accent-color : var(--mcp-treatment-accent, #2563eb);
}
/* Checkmark indicator - present in the DOM for every multi-option
   card, but only visible (via :has()) once its own card's radio is
   checked. A subtle fade, matching the "very subtle" animation spec. */
.mcp-product-option-checkmark {
	position  : absolute;
	top       : 12px;
	right     : 12px;
	width     : 22px;
	height    : 22px;
	display   : flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--mcp-treatment-accent, #2563eb);
	color     : #fff;
	opacity   : 0;
	transform : scale(0.85);
	transition: opacity 180ms ease, transform 180ms ease;
}
.mcp-product-option-card:has(.mcp-product-option-radio:checked) .mcp-product-option-checkmark {
	opacity  : 1;
	transform: scale(1);
}
/* Badge - "Most Popular" / "Best Value" / etc - card-corner placement,
   using the same configurable accent color for brand consistency. */
.mcp-product-option-badge {
	position       : absolute;
	top            : -10px;
	left           : 14px;
	padding        : 3px 10px;
	font-size      : 0.72em;
	font-weight    : 700;
	letter-spacing : 0.02em;
	text-transform : uppercase;
	color          : #fff;
	background     : var(--mcp-treatment-accent, #2563eb);
	border-radius  : 999px;
	line-height    : 1.6;
}
.mcp-product-option-image { flex-shrink: 0; width: 96px; height: 96px; border-radius: calc(var(--mcp-radius, 8px) - 2px); overflow: hidden; background: #f3f4f6; }
.mcp-product-option-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcp-product-option-details { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mcp-product-option-name { font-weight: 700; font-size: 1.1em; overflow-wrap: break-word; word-break: break-word; }
.mcp-product-option-subtitle { color: var(--mcp-text-muted, #6b7280); font-size: 0.92em; font-weight: 500; }
.mcp-product-option-description { color: var(--mcp-text-muted, #6b7280); font-size: 0.92em; line-height: 1.4; overflow-wrap: break-word; }
.mcp-product-option-variation { color: var(--mcp-text-muted, #6b7280); font-size: 0.88em; font-style: italic; }
.mcp-product-option-price { font-weight: 700; font-size: 1.05em; margin-top: 4px; }
.mcp-product-selection-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mcp-product-selection-status { width: 100%; margin: 8px 0 0; }
.mcp-product-selection-error, .mcp-product-selection-status.mcp-product-selection-error { color: #b32d2e; }

@media (max-width: 600px) {
	.mcp-product-option-card { flex-wrap: wrap; }
	.mcp-product-option-image { width: 100%; height: 180px; }
	.mcp-product-option-details { width: 100%; }
	.mcp-product-selection-actions .mcp-btn { flex: 1 1 auto; min-width: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mcp-product-option-card, .mcp-product-option-checkmark { transition: none; }
	.mcp-product-option-card:not(.mcp-product-option-card--single):hover { transform: none; }
}

/* =========================================================================
   Unified Patient Journey Routing (Phase 2C.5) - standalone screens
   ========================================================================= */

.mcp-transition-screen {
	text-align: center;
	padding: 24px;
}
.mcp-transition-screen .mcp-transition-message { font-size: 1.1em; margin-bottom: 16px; }
.mcp-transition-screen .mcp-btn { margin: 0 6px; }
.mcp-already-in-cart .mcp-btn--secondary { margin-top: 8px; }

/* =========================================================================
   Authentication Checkpoint UX - Previous Answers collapse
   (patient-experience-only improvement, native <details>/<summary>)
   ========================================================================= */

.mcp-previous-answers-saved-banner {
	color        : var(--mcp-success-color, #2e7d32);
	font-weight  : 600;
	margin       : 0 0 14px;
}
.mcp-previous-answers {
	border       : 1px solid var(--mcp-input-border, #d4d4d4);
	border-radius: var(--mcp-radius, 8px);
	margin-bottom: 20px;
	background   : var(--mcp-card-bg-subtle, #f8fafc);
}
.mcp-previous-answers-summary {
	list-style   : none;
	cursor       : pointer;
	padding      : 12px 16px;
	display      : flex;
	align-items  : center;
	justify-content: space-between;
	gap          : 10px;
	font-weight  : 600;
}
.mcp-previous-answers-summary::-webkit-details-marker { display: none; }
.mcp-previous-answers-summary::before {
	content      : '▸';
	margin-right : 8px;
	display      : inline-block;
	transition   : transform var(--mcp-transition, 150ms ease);
}
.mcp-previous-answers[open] > .mcp-previous-answers-summary::before {
	transform    : rotate(90deg);
}
.mcp-previous-answers-badge {
	color        : var(--mcp-success-color, #2e7d32);
	font-weight  : 500;
	font-size    : 0.9em;
}
.mcp-previous-answers-questions {
	padding      : 4px 16px 16px;
	border-top   : 1px solid var(--mcp-input-border, #d4d4d4);
}

/* =========================================================================
   Intake Entry Robustness - missing product_id fallback screens
   ========================================================================= */

.mcp-intake-unrecoverable-candidates {
	list-style : none;
	margin     : 16px 0 0;
	padding    : 0;
	display    : flex;
	flex-direction: column;
	gap        : 10px;
	align-items: center;
}

/* =========================================================================
   Cross-Product Review UX Fix - wider layout, sectioned inline-editable rows
   ========================================================================= */

/* Widen the intake container specifically when it holds the review
   screen - every other screen keeps its existing width unchanged. */
.mcp-intake-container:has(.mcp-repeat-wrap) {
	max-width: 860px;
}

.mcp-review-sections {
	display        : flex;
	flex-direction : column;
	gap            : 16px;
	margin-bottom  : 20px;
}
.mcp-card--review-section {
	padding: 20px 24px;
}
.mcp-review-section-title {
	font-size    : 1.05em;
	font-weight  : 700;
	margin       : 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--mcp-card-border, #e2e8f0);
}
.mcp-review-rows {
	display        : flex;
	flex-direction : column;
}
.mcp-review-row {
	display       : grid;
	grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto;
	gap           : 16px;
	align-items   : center;
	padding       : 12px 0;
	border-bottom : 1px solid var(--mcp-card-border, #f1f3f5);
}
.mcp-review-row:last-child { border-bottom: none; }
.mcp-review-row-label {
	font-weight  : 600;
	color        : var(--mcp-text-muted, #495057);
	word-break   : break-word;
}
.mcp-review-row-value {
	word-break   : break-word;
	overflow-wrap: anywhere;
}
.mcp-review-row-edit {
	white-space  : nowrap;
	justify-self : end;
}
.mcp-review-row-locked {
	font-size    : 0.85em;
	color        : var(--mcp-text-muted, #868e96);
	white-space  : nowrap;
	justify-self : end;
}
.mcp-review-row--editing {
	grid-template-columns: 1fr;
	align-items  : stretch;
	gap          : 8px;
}
.mcp-review-row--editing .mcp-review-row-label { font-weight: 600; }
.mcp-review-row-field { width: 100%; }
.mcp-review-row-actions {
	display: flex;
	gap    : 8px;
}
.mcp-btn--sm { padding: 6px 14px; font-size: 0.9em; }

/* Mobile: stack Label / Answer / Edit, generous touch targets. */
@media ( max-width: 600px ) {
	.mcp-review-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 0;
	}
	.mcp-review-row-edit,
	.mcp-review-row-locked {
		justify-self: start;
		margin-top: 6px;
	}
	.mcp-review-row-edit {
		padding: 8px 4px; /* touch-friendly */
	}
}

/* =========================================================================
   Authentication UX Fix - mode toggle, live password requirements
   ========================================================================= */

.mcp-checkpoint-mode-toggle {
	display      : flex;
	gap          : 4px;
	margin       : 12px 0 20px;
	border-bottom: 2px solid var(--mcp-card-border, #e2e8f0);
}
.mcp-checkpoint-mode-tab {
	flex         : 1;
	background   : none;
	border       : none;
	padding      : 10px 8px;
	font-weight  : 600;
	color        : var(--mcp-text-muted, #868e96);
	cursor       : pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.mcp-checkpoint-mode-tab--active {
	color        : var(--mcp-primary-color, #1a73e8);
	border-bottom-color: var(--mcp-primary-color, #1a73e8);
}
.mcp-password-requirements {
	margin       : 8px 0 0;
	padding      : 10px 14px;
	background   : var(--mcp-card-bg-subtle, #f8fafc);
	border-radius: var(--mcp-radius, 8px);
	font-size    : 0.9em;
}
.mcp-password-requirements-title {
	font-weight  : 600;
	margin       : 0 0 6px;
}
.mcp-password-requirement {
	margin       : 0 0 4px;
	color        : var(--mcp-text-muted, #6b7280);
}
.mcp-password-requirement--met {
	color        : var(--mcp-success-color, #2e7d32);
}
.mcp-checkpoint-continue-helper {
	width        : 100%;
	font-size    : 0.85em;
	color        : var(--mcp-text-muted, #868e96);
	margin       : 6px 0 0;
}

/* =========================================================================
   Password Strength Visual Feedback - red/green requirement states
   ========================================================================= */

#mcp-checkpoint-password {
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.mcp-password-neutral {
	border-color: var(--mcp-input-border, #d4d4d4);
	box-shadow: none;
}
.mcp-password-invalid {
	border-color: var(--mcp-error-color, #c0392b);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.mcp-password-valid {
	border-color: var(--mcp-success-color, #2e7d32);
	box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}
.mcp-password-requirement {
	transition: color 200ms ease;
}
.mcp-password-requirement--met {
	color: var(--mcp-success-color, #2e7d32);
}
.mcp-password-requirement--unmet {
	color: var(--mcp-error-color, #c0392b);
}

/* Autofill-detection trick: this animation never runs visibly (0
   duration would be dropped by some browsers, so 1ms is used) - its
   only purpose is that starting it at all fires 'animationstart',
   which is one of the few reliable cross-browser signals that a field
   was just autofilled rather than typed into. */
@keyframes mcpAutofillDetect { from { opacity: 1; } to { opacity: 1; } }
#mcp-checkpoint-password:-webkit-autofill {
	animation-name: mcpAutofillDetect;
	animation-duration: 1ms;
}

/* =========================================================================
   Show/Hide Password Toggle (Navigation & Auth Reliability Pass, Part 4)
   ========================================================================= */

.mcp-password-field-wrap {
	position: relative;
}
.mcp-input--with-toggle {
	padding-right: 64px; /* Reserve room so typed text never runs under the toggle. */
	width: 100%;
	box-sizing: border-box;
}
.mcp-password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 6px 8px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--mcp-primary-color, #1a73e8);
	cursor: pointer;
	min-height: 32px; /* touch-friendly */
}
.mcp-password-toggle:focus-visible {
	outline: 2px solid var(--mcp-primary-color, #1a73e8);
	outline-offset: 2px;
	border-radius: 4px;
}
@media ( max-width: 480px ) {
	.mcp-input--with-toggle { padding-right: 58px; }
	.mcp-password-toggle { font-size: 0.8em; }
}

/* ── Phase 1 dose-specific routing: availability panel ──────────────────── */
.mcp-dose-field-wrap { display: flex; flex-direction: column; gap: 12px; }
.mcp-dose-availability-panel {
	border: 1px solid var(--mcp-card-border, #e5e1da);
	border-radius: var(--mcp-radius, 8px);
	padding: 16px 18px;
	background: var(--mcp-card-bg, #fff);
}
.mcp-dose-availability-panel__current-dose {
	color: var(--mcp-text-muted);
	font-size: 0.85rem;
	margin: 0 0 8px;
}
.mcp-dose-availability-panel__heading {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--mcp-text);
	margin-bottom: 8px;
}
.mcp-dose-availability-panel__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	color: var(--mcp-text);
}
.mcp-dose-availability-panel__row--unavailable { color: var(--mcp-text-muted); }
.mcp-dose-check { color: #1e8e3e; font-weight: 700; }
.mcp-dose-availability-panel__desc {
	color: var(--mcp-text-muted);
	font-size: 0.85rem;
	margin: 8px 0 0;
}
.mcp-dose-availability-panel__why { margin-top: 10px; }
.mcp-dose-availability-panel__why summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mcp-text);
}
.mcp-dose-availability-panel__why p {
	color: var(--mcp-text-muted);
	font-size: 0.82rem;
	margin: 6px 0 0;
}