/* ==========================================================================
   Plan Your Program questionnaire (UI-23)
   No Figma frame exists for this page. The masthead mirrors Programs, and
   the fields reuse the NAV-05 modal's field tokens (underline inputs, gold
   focus), all through the --loa-plan-* block in tokens.css. Enqueued only
   on /plan/.

   Same reading-measure rule as about.css and programs.css: the 768px cap
   goes on the CONTENT inside a full-width inner, so the masthead and the
   form share one left edge.

   Two modes:
     - no JavaScript: every step and every branch shows, one long form
       (UI-23 TN 13). Nothing here hides a step on its own.
     - .is-enhanced (added by plan.js): one step at a time; plan.js sets
       [hidden] on steps and branch blocks, and [hidden] must always win.

   Mobile: single column below the site's existing 1024px breakpoint,
   except the checkbox and half-width grids, which collapse below 768px
   (TN 14). No new breakpoint.
   ========================================================================== */

.loa-plan {
	background: var(--loa-plan-bg);
	padding-bottom: var(--loa-plan-section-pad-y);
}

.loa-plan__inner {
	max-width: var(--loa-plan-max);
	margin: 0 auto;
	padding-inline: var(--loa-plan-pad-x);
}

/* [hidden] beats every display rule on this page. */
.loa-plan [hidden] {
	display: none !important;
}

/* ---- Masthead (mirrors .loa-programs__masthead) ---- */

.loa-plan__masthead {
	padding-top: var(--loa-plan-masthead-pad-top);
	padding-bottom: var(--loa-plan-masthead-pad-bottom);
}

.loa-plan__eyebrow {
	margin: 0 0 var(--loa-plan-eyebrow-gap);
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-plan-eyebrow-size);
	letter-spacing: var(--loa-plan-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-plan-eyebrow-color);
}

.loa-plan__title {
	margin: 0;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-plan-title-size);
	line-height: var(--loa-plan-title-line);
	color: var(--loa-plan-title-color);
}

.loa-plan__lede {
	max-width: var(--loa-plan-narrow-max);
	margin: var(--loa-plan-lede-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-lede-size);
	line-height: var(--loa-plan-lede-line);
	color: var(--loa-plan-lede-color);
}

/* ---- Form frame ---- */

.loa-plan__form,
.loa-plan__thanks,
.loa-plan__send-error {
	max-width: var(--loa-plan-narrow-max);
}

.loa-plan__form {
	/* Native date pickers and select menus in the dark palette. */
	color-scheme: dark;
}

.loa-plan__h2 {
	margin: 0 0 var(--loa-plan-h2-gap);
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-plan-h2-size);
	color: var(--loa-plan-h2-color);
}

.loa-plan__step-heading {
	scroll-margin-top: var(--loa-plan-anchor-offset);
}

.loa-plan__step-heading:focus {
	outline: none;
}

.loa-plan__step-heading:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* No JavaScript: the steps stack, divided like Programs sections. */
.loa-plan__step + .loa-plan__step {
	margin-top: var(--loa-plan-section-pad-y);
	padding-top: var(--loa-plan-section-pad-y);
	border-top: 1px solid var(--loa-plan-rule);
}

.is-enhanced .loa-plan__step + .loa-plan__step {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.loa-plan__p {
	margin: 0 0 20px;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-p-size);
	line-height: var(--loa-plan-p-line);
	color: var(--loa-plan-p-color);
}

/* ---- Progress (TN 7) ---- */

.loa-plan__progress {
	margin-bottom: var(--loa-plan-h2-gap);
	scroll-margin-top: var(--loa-plan-anchor-offset);
}

.loa-plan__progress-text {
	margin: 0 0 12px;
	font-family: var(--loa-font-body);
	font-weight: 700;
	font-size: var(--loa-plan-progress-size);
	letter-spacing: var(--loa-plan-progress-tracking);
	text-transform: uppercase;
	color: var(--loa-plan-progress-color);
}

.loa-plan__progress-track {
	height: var(--loa-plan-progress-h);
	background: var(--loa-plan-progress-track);
}

.loa-plan__progress-bar {
	width: 20%;
	height: 100%;
	background: var(--loa-plan-progress-fill);
	transition: width var(--loa-speed) var(--loa-ease);
}

/* ---- Question grid ---- */

.loa-plan__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--loa-plan-col-gap);
	row-gap: var(--loa-plan-q-gap);
}

/* A branch block following the step's own fields keeps the rhythm. */
.loa-plan__fields + .loa-plan__fields {
	margin-top: var(--loa-plan-q-gap);
}

.loa-plan__q {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.loa-plan__q--half {
	grid-column: auto;
}

/* Question text: legends (choice groups) and labels (single fields). */
.loa-plan__legend,
.loa-plan__label {
	display: block;
	width: 100%;
	margin: 0 0 var(--loa-plan-q-label-gap);
	padding: 0;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-plan-q-size);
	line-height: var(--loa-plan-q-line);
	color: var(--loa-plan-q-color);
}

/* A screen-reader-only legend (the main date pair has no visible one):
   the rule above would otherwise stretch it to full width. */
.loa-plan__legend.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Small uppercase labels (date From / To): the modal's label style. */
.loa-plan__label--small {
	margin-bottom: 12px;
	font-weight: 700;
	font-size: var(--loa-plan-label-size);
	line-height: normal;
	letter-spacing: var(--loa-plan-label-tracking);
	text-transform: uppercase;
	color: var(--loa-plan-label-color);
}

.loa-plan__helper {
	margin: calc(var(--loa-plan-q-label-gap) * -0.5) 0 var(--loa-plan-q-label-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-helper-size);
	line-height: 1.5;
	color: var(--loa-plan-helper-color);
}

.loa-plan__error {
	margin: 0 0 var(--loa-plan-q-label-gap);
	font-family: var(--loa-font-body);
	font-size: var(--loa-plan-helper-size);
	color: var(--loa-plan-error-color);
}

/* Inputs: the NAV-05 modal's underline field. */
.loa-plan__input {
	display: block;
	width: 100%;
	min-height: var(--loa-plan-choice-hit);
	padding: 8px 0 12px;
	box-sizing: border-box;
	font-family: var(--loa-font-body);
	font-size: var(--loa-plan-input-size);
	color: var(--loa-plan-input-color);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--loa-plan-input-divider);
	border-radius: 0;
	transition: border-color var(--loa-speed) var(--loa-ease);
}

.loa-plan__input:focus-visible {
	outline: none;
	border-bottom-color: var(--loa-plan-input-focus);
}

.loa-plan__input[aria-invalid="true"] {
	border-bottom-color: var(--loa-plan-error-color);
}

.loa-plan__textarea {
	min-height: 88px;
	resize: vertical;
}

/* Select: native control, underline look, arrow drawn in CSS so it can
   take the token colour. */
.loa-plan__select {
	position: relative;
	display: block;
}

.loa-plan__select .loa-plan__input {
	padding-right: 32px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.loa-plan__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 8px;
	height: 8px;
	margin-top: -8px;
	border-right: 1.5px solid var(--loa-gold);
	border-bottom: 1.5px solid var(--loa-gold);
	transform: rotate(45deg);
	pointer-events: none;
}

.loa-plan__select option {
	color: var(--loa-plan-input-color);
	background: var(--loa-plan-option-bg);
}

.loa-plan__daterange {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--loa-plan-col-gap);
}

/* ---- Choices: radios and checkboxes (TN 14) ---- */

.loa-plan__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--loa-plan-col-gap);
}

.loa-plan__choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: var(--loa-plan-choice-hit);
	padding: 11px 0;
	box-sizing: border-box;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-choice-size);
	line-height: 22px;
	color: var(--loa-plan-choice-color);
	cursor: pointer;
}

.loa-plan__input-choice {
	flex: none;
	width: var(--loa-plan-check-size);
	height: var(--loa-plan-check-size);
	margin: 2px 0 0;
	accent-color: var(--loa-gold);
	cursor: pointer;
}

.loa-plan__input-choice:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 2px;
}

.loa-plan__choice-helper {
	display: block;
	margin-top: 4px;
	font-size: var(--loa-plan-helper-size);
	line-height: 1.5;
	color: var(--loa-plan-helper-color);
}

/* ---- Program-type cards (step 1) ---- */

.loa-plan__choices--cards {
	gap: var(--loa-plan-card-gap);
}

.loa-plan__card {
	display: block;
	padding: var(--loa-plan-card-pad);
	background: var(--loa-plan-card-bg);
	border: 1px solid var(--loa-plan-card-border);
	cursor: pointer;
	transition: border-color var(--loa-speed) var(--loa-ease);
}

.loa-plan__card:hover {
	border-color: var(--loa-plan-card-border-checked);
}

.loa-plan__card:has(.loa-plan__input-choice:checked) {
	border-color: var(--loa-plan-card-border-checked);
}

/* Visible focus on the card itself (AC 14), not just the small radio. */
.loa-plan__card:has(.loa-plan__input-choice:focus-visible) {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

.loa-plan__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.loa-plan__card .loa-plan__input-choice {
	margin: 0;
}

.loa-plan__card-name {
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-plan-card-name-size);
	letter-spacing: var(--loa-plan-card-name-tracking);
	color: var(--loa-plan-card-name-color);
}

.loa-plan__card-text {
	display: block;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-p-size);
	line-height: var(--loa-plan-p-line);
	color: var(--loa-plan-p-color);
}

/* ---- Step 4 hand-off checklist ---- */

.loa-plan__handoff-group + .loa-plan__handoff-group {
	margin-top: 24px;
}

.loa-plan__subhead {
	margin: 0 0 4px;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-plan-subhead-size);
	letter-spacing: var(--loa-plan-subhead-tracking);
	text-transform: uppercase;
	color: var(--loa-plan-subhead-color);
}

/* "Honestly, all of it", set apart below the three groups. */
.loa-plan__handoff-all {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px solid var(--loa-plan-rule);
}

.loa-plan__handoff-all .loa-plan__choice {
	font-weight: 500;
	color: var(--loa-plan-q-color);
}

/* ---- Buttons (TN 7) ---- */

.loa-plan__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: var(--loa-plan-section-pad-y);
}

.loa-plan__nav:empty {
	display: none;
}

/* Hero primary CTA style (UI-01 TN 10), 56px tall. */
.loa-plan__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--loa-plan-btn-h);
	padding-inline: var(--loa-plan-btn-pad-x);
	box-sizing: border-box;
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-plan-btn-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
	background: var(--loa-gold);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--loa-speed) var(--loa-ease);
}

.loa-plan__btn:hover,
.loa-plan__btn:focus-visible {
	background: var(--loa-plan-btn-hover);
}

.loa-plan__btn:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

.loa-plan__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Back: the Specialties card CTA link style (UI-05 TN 15). */
.loa-plan__back {
	display: inline-flex;
	align-items: center;
	min-height: var(--loa-plan-choice-hit);
	padding: 0 0 5px;
	box-sizing: border-box;
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-plan-back-tracking);
	text-transform: uppercase;
	color: #fff;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--loa-plan-back-underline);
	border-radius: 0;
	cursor: pointer;
	transition: color var(--loa-speed) var(--loa-ease),
	            border-color var(--loa-speed) var(--loa-ease);
}

.loa-plan__back:hover,
.loa-plan__back:focus-visible {
	color: var(--loa-gold);
	border-color: var(--loa-gold);
}

.loa-plan__back:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* ---- Privacy line, send error, thank-you ---- */

.loa-plan__privacy {
	margin: 20px 0 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-plan-helper-size);
	color: var(--loa-plan-helper-color);
}

.loa-plan__privacy a,
.loa-plan__send-error a {
	color: var(--loa-plan-link-color);
	text-decoration: underline;
	text-decoration-color: var(--loa-plan-link-underline);
	text-underline-offset: var(--loa-plan-link-offset);
}

.loa-plan__send-error {
	margin: 0 0 var(--loa-plan-q-gap);
	padding: 16px 20px;
	border: 1px solid var(--loa-plan-error-color);
	font-family: var(--loa-font-body);
	font-size: var(--loa-plan-p-size);
	line-height: var(--loa-plan-p-line);
	color: var(--loa-plan-p-color);
}

.loa-plan__sooner {
	margin-top: 40px;
}

/* ---- Honeypot: off-screen, same approach as the modal's ---- */

.loa-plan__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Narrower than 1024px: single column, mobile type scale
   ========================================================================== */

@media (max-width: 1024px) {
	.loa-plan {
		padding-bottom: var(--loa-plan-m-section-pad-y);
	}

	.loa-plan__inner {
		padding-inline: var(--loa-plan-m-pad-x);
	}

	.loa-plan__masthead {
		padding-top: var(--loa-plan-m-masthead-pad-top);
	}

	.loa-plan__title {
		font-size: var(--loa-plan-m-title-size);
		line-height: var(--loa-plan-m-title-line);
	}

	.loa-plan__lede {
		font-size: var(--loa-plan-m-lede-size);
		line-height: var(--loa-plan-m-lede-line);
	}

	.loa-plan__h2 {
		font-size: var(--loa-plan-m-h2-size);
	}

	.loa-plan__step-heading,
	.loa-plan__progress {
		scroll-margin-top: var(--loa-plan-m-anchor-offset);
	}

	.loa-plan__step + .loa-plan__step {
		margin-top: var(--loa-plan-m-section-pad-y);
		padding-top: var(--loa-plan-m-section-pad-y);
	}

	.loa-plan__choices--cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.loa-plan__card {
		padding: var(--loa-plan-m-card-pad);
	}

	/* TN 22: Continue above Back, both full width. */
	.loa-plan__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-top: var(--loa-plan-m-section-pad-y);
	}

	.loa-plan__nav .loa-plan__btn {
		width: 100%;
	}

	.loa-plan__back {
		align-self: center;
	}
}

@media (max-width: 767px) {
	.loa-plan__fields,
	.loa-plan__choices,
	.loa-plan__daterange {
		grid-template-columns: minmax(0, 1fr);
	}

	.loa-plan__q--half {
		grid-column: 1 / -1;
	}

	.loa-plan__daterange {
		row-gap: 24px;
	}
}