/**
 * Start a Project — the planner at `/start-a-project/`.
 *
 * Generated from the master by `docs/verification/invert-css.py`, fed the raw
 * rules in source order for the reasons in docs/MASTER-CASCADE-TRAPS.md.
 *
 * Every selector here is this template's alone: `.option`, `.field`,
 * `.progress` and `.summary-line` appear nowhere else in the theme, and the
 * stylesheet only loads on this page, so the short names stay the master's
 * rather than being renamed for safety they do not need.
 *
 * The step panels are shown by `.active`. The panels that are not showing are
 * also `hidden`, which is an addition: the master leaves all six in the
 * document and in the accessibility tree, so a screen reader reads the whole
 * questionnaire at once and Tab walks through six steps of controls. `hidden`
 * is the attribute, not a class, so nothing here has to style it.
 */

.planner-page {
	padding: 132px 0 82px;
	padding-top: 105px;
}

.planner-shell {
	display: grid;
	gap: 64px;
	align-items: start;
	grid-template-columns: 1fr;
}

.planner-side {
	align-self: start;
	top: 105px;
	position: static;
}

.progress {
	height: 4px;
	background: #d8d2c9;
	border-radius: 10px;
	overflow: hidden;
	margin: 30px 0 12px;
}

.progress i {
	display: block;
	height: 100%;
	width: 20%;
	background: linear-gradient(90deg,var(--yellow),var(--orange));
	transition: .3s;
}

/*
 * Supporting copy, +15-20% (Ben, 21 Sep 2026). Everything that explains
 * rather than asks: the step lede, the option descriptions, the sidebar and
 * context copy, the summary lines and the consent. The question headings,
 * the option titles and the page title are deliberately untouched -- the
 * point is to close the gap between them, not to scale the whole page.
 */
.progress-label {
	font-size: max(calc(12px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	color: var(--muted);
}

.planner-panel {
	background: #fff;
	border-radius: 27px;
	box-shadow: 0 20px 60px rgba(0,0,0,.07);
	min-height: 560px;
	padding: clamp(28px,4vw,48px);
}

.planner-step {
	display: none;
}

.planner-step.active {
	display: block;
	animation: pageIn .35s ease;
}

/*
 * The question at the top of every step (Ben, 26 Sep 2026).
 *
 * "Which part of financial services is closest?" and its five siblings are the
 * same object as the choice-panel heading on the homepage, and they were set
 * 200 weights lighter: `.home-cover-panel-head h2` takes `--fw-title`, this one
 * took whatever `h2` defaults to, which is 700. Same face, different voice.
 *
 * Stated here rather than left to inherit, and from the tokens rather than from
 * numbers, so the two headings cannot drift again — an inherited face is
 * exactly what put Inter on the choice cards earlier today. One rule for all
 * six steps; there are no per-step overrides and there should not be.
 *
 * The helper paragraph below the question keeps the body face. It is running
 * copy, not a heading, and `.planner-step>p` is left alone.
 */
/*
 * The step number in Form's colours (Ben, 3 Oct 2026), in the top-left of each white panel: a solid circle, bold centred number, no shadow, no gradient, no pill. Magenta, yellow,
 * cyan, orange, then black with a white number; the script sets data-num to the number on "Step X of Y" so the colour always follows what the label says. Decoration only
 * (aria-hidden); 46px on desktop, 40px on a phone.
 */
.planner-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 18px;
	border-radius: var(--r-round);
	background: var(--ink);
	font-family: var(--font);
	font-size: 20px;
	font-weight: var(--fw-title);
	line-height: 1;
	color: var(--white);
}

.planner-step-num[data-num="1"] {
	background: var(--magenta);
	color: var(--white);
}

.planner-step-num[data-num="2"] {
	background: var(--yellow);
	color: var(--ink);
}

.planner-step-num[data-num="3"] {
	background: var(--cyan);
	color: var(--ink);
}

.planner-step-num[data-num="4"] {
	background: var(--orange);
	color: var(--ink);
}

.planner-step-num[data-num="5"] {
	background: var(--ink);
	color: var(--white);
}

@media screen and (min-width: 651px) {

	.planner-step-num {
		width: 46px;
		height: 46px;
		margin-bottom: 22px;
		font-size: 23px;
	}

}

.planner-step h2 {
	margin: 0 0 14px;
	font-family: var(--font);
	font-size: clamp(36px,4vw,54px);
	line-height: 1.03;
	font-weight: var(--fw-title);
	letter-spacing: var(--tr-display);
}

.planner-step>p {
	color: var(--muted);
	margin-bottom: 30px;
}

.options {
	display: grid;
	gap: 9px;
	grid-template-columns: 1fr;
}

.option {
	text-align: left;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 15px;
	cursor: pointer;
	font-weight: 800;
	line-height: 1.25;
	transition: .2s;
	min-height: 96px;
	padding: 16px;
}

.option small {
	display: block;
	font-weight: 500;
	color: var(--muted);
	margin-top: 9px;
	line-height: 1.4;
	font-size: max(calc(13px * var(--type-small)), var(--type-floor));
}

.option:hover {
	border-color: var(--ink);
	background: var(--yellow);
}

.option.selected {
	border-color: var(--ink);
	background: var(--yellow);
}

.step-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}

/*
 * `Next` is always on the right (Ben, 21 Sep 2026). `space-between` only does
 * that while two children are visible, and often only one is: step one has an
 * empty spacer in place of Back, and a step reached from a Route has its Back
 * button `hidden` by the script. In both cases the single button was laid out
 * at the start of the row -- the left edge of the panel -- which is where Ben
 * saw it. `auto` on the leading margin is right in every case, including the
 * two-button steps, and leaves Back where it is.
 */
.step-actions .next,
.step-actions [data-planner-submit] {
	margin-left: auto;
}

.form-grid {
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr;
}

.summary-box {
	background: var(--paper);
	border-radius: 17px;
	padding: 20px;
	margin: 23px 0;
}

.summary-line {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: calc(14px * var(--type-reading));
}

.summary-line:last-child {
	border-bottom: 0;
}

.summary-line span {
	color: var(--muted);
}

.success {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--yellow);
	display: grid;
	place-items: center;
	font-size: calc(34px * var(--type-heading));
	margin-bottom: 24px;
}

.breadcrumb {
	align-items: center;
	gap: 8px;
	font-size: max(calc(9px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	color: var(--muted);
	margin-bottom: 24px;
	display: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.consent {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-top: 18px;
	font-size: max(calc(12px * var(--type-small)), var(--type-floor));
	line-height: 1.45;
	color: var(--muted);
}

.consent input {
	margin-top: 2px;
}

/* The message beside the box when Send is pressed unticked; wording and colour come from the shared .field-error. */
.planner-step .consent-error {
	margin: 8px 0 0;
	/* A deeper red than --red (3.8:1 on white): this one is read as a sentence, so it clears 4.5:1 (6.5:1). High contrast keeps its own, stronger, rule. */
	color: #b3261e;
}

.consent input[aria-invalid="true"] {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

.planner-context-note {
	margin: 22px 0 16px;
	padding: 17px 18px;
	border-radius: 15px;
	background: var(--yellow);
	display: grid;
	gap: 5px 15px;
	align-items: center;
	grid-template-columns: 1fr;
	margin-top: 23px;
}

.planner-context-note span {
	grid-column: 1/-1;
	font-size: max(calc(11px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	opacity: .6;
}

.planner-context-note strong {
	font-size: calc(16px * var(--type-reading));
	letter-spacing: -.02em;
}

.planner-context-note button {
	border: 0;
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	font-weight: 800;
	cursor: pointer;
}

.brief-result {
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	margin: 24px 0;
}

.brief-result-head {
	background: var(--ink);
	color: #fff;
	padding: 20px;
}

.brief-result-head span {
	display: block;
	color: var(--eyebrow-on-dark);
	font-size: max(calc(11px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
}

.brief-result-head strong {
	display: block;
	margin-top: 8px;
	font-size: calc(27px * var(--type-heading));
	letter-spacing: var(--tr-display);
}

.brief-result .summary-box {
	margin: 0;
	border-radius: 0;
}

.brief-result-next {
	padding: 19px 20px;
	background: var(--yellow);
}

.brief-result-next span {
	display: block;
	font-size: max(calc(11px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	opacity: .6;
	margin-bottom: 6px;
}

.brief-result-next strong {
	font-size: calc(16.5px * var(--type-reading));
	line-height: 1.4;
}

/*
 * The on-screen Starting Brief (Ben, 27 Sep 2026).
 *
 * The final screen shows the same brief the visitor is about to receive by
 * email, so the two interpretation sections and the work they looked at need
 * somewhere to sit. They reuse the panel's own geometry — the 20px gutter, the
 * uppercase label, `--line` between items — rather than introducing a second
 * treatment inside the same card.
 *
 * `.brief-block-copy` and `.brief-block-list` are also used inside
 * `.brief-result-next`, whose yellow ground is why the list rules take their
 * colour from `currentColor` rather than naming one.
 */
.brief-extra {
	padding: 19px 20px;
	border-top: 1px solid var(--line);
}

.brief-block + .brief-block {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.brief-block-label {
	display: block;
	font-size: max(calc(11px * var(--type-small)), var(--type-floor));
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	color: var(--muted);
	margin-bottom: 6px;
}

.brief-block-title {
	display: block;
	font-size: calc(19px * var(--type-reading));
	line-height: 1.25;
	letter-spacing: var(--tr-display);
}

.brief-block-copy {
	margin: 10px 0 0;
	font-size: calc(14.5px * var(--type-reading));
	line-height: 1.6;
}

.brief-block-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.brief-block-list li {
	padding: 8px 0;
	border-top: 1px solid currentColor;
	font-size: calc(14px * var(--type-reading));
	font-weight: 700;
	opacity: .85;
}

.brief-block-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.planner-title {
	margin: 0;
	max-width: 620px;
	line-height: .98;
	letter-spacing: var(--tr-display);
	font-weight: 900;
	font-size: 48px;
}

.planner-side>.copy {
	margin-top: 20px;
	max-width: 520px;
}

/*
 * The heading's two lines (Ben, 30 Sep 2026): the time of day in Form orange, as Home's greeting is, above "Let's get it moving." in ink. The first line is reserved
 * (`min-height: 1em`) so filling it from the clock moves nothing; a long second line wraps in balance rather than shrinking, as Home's does.
 */
.planner-title {
	text-wrap: balance;
}

.planner-greeting,
.planner-headline {
	display: block;
}

.planner-greeting {
	min-height: 1em;
	color: var(--orange-text);
}

/*
 * The reassurance that replaced the call box: plain text in the body face. The first line is a little stronger (weight only; same size, so nothing new in the type
 * scale and Larger text scales both with the body), the second is ordinary body copy. No card, no border, no fill.
 */
.planner-reassure {
	margin-top: 22px;
	max-width: 520px;
}

.planner-reassure p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-planner-body);
	line-height: var(--lh-body);
	font-weight: 400;
}

.planner-reassure .planner-reassure-lead {
	font-weight: 700;
	color: var(--ink);
}

@media screen and (min-width: 651px) {

	.planner-page {
		padding: 132px 0 82px;
	}

	.options {
		grid-template-columns: 1fr 1fr;
	}

	.form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.planner-context-note {
		grid-template-columns: 1fr auto;
	}

	.planner-title {
		font-size: clamp(46px,5.3vw,78px);
	}

}

@media screen and (min-width: 1001px) {

	.planner-shell {
		grid-template-columns: .85fr 1.15fr;
	}

	.planner-side {
		position: sticky;
	}

}

@media screen and (min-width: 1101px) {

	.planner-page {
		padding: 104px 0 58px;
	}

	.planner-shell {
		gap: 48px;
	}

	.planner-panel {
		min-height: 500px;
		padding: 34px;
	}

	.planner-step h2 {
		font-size: clamp(34px,3.3vw,44px);
	}

	.option {
		min-height: 82px;
		padding: 14px;
	}

	.planner-title {
		font-size: clamp(46px,4.5vw,64px);
	}


}

@media screen and (min-width: 1501px) {

	.planner-page {
		padding: 132px 0 82px;
	}

	.planner-shell {
		gap: 64px;
	}

	.planner-panel {
		min-height: 560px;
		padding: clamp(28px,4vw,48px);
	}

	.planner-step h2 {
		font-size: clamp(36px,4vw,54px);
	}

	.option {
		min-height: 96px;
		padding: 16px;
	}

	.planner-title {
		font-size: clamp(46px,5.3vw,78px);
	}


}


/* ------------------------------------------------- reduced motion */
/*
 * `pageIn` runs on every step change, without the reader asking for it, which
 * is exactly the motion this preference is about. The step still appears; it
 * simply does not slide and fade in. The progress bar still moves to its new
 * width, instantly.
 */
@media (prefers-reduced-motion: reduce) {

	.planner-step.active {
		animation: none;
	}

	.progress i,
	.option {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Choice cards — the same system as the homepage panel (Ben, 26 Sep 2026)
 *
 * The planner's options and the homepage's six choices do the same job and
 * looked like different components: the planner's sat on `--paper` inside a
 * white panel, which is too close a value to read as separate surfaces, and
 * they carried their own weight-800 type instead of the card roles.
 *
 * Two changes, both borrowed rather than invented. The fill and border are the
 * homepage card's, so the option reads as an object on the panel rather than a
 * region of it — the panel stays the containing surface and no second panel is
 * nested inside it. And the type takes the card's roles.
 *
 * The card's title is Montserrat and its description is Inter, as Home's now
 * is (Ben, 29 Sep 2026: body copy is Inter; the family rule is in
 * components.css). Until that day the description was Montserrat here and on
 * Home, deliberately, because the homepage cards did not use the body face;
 * the two move together, so a change to one is a change to both.
 *
 * The description is restated band by band because Home's is: 12.5px, then
 * 13px, then 12px at the laptop width, then 13px again. A single value here
 * would match Home at the narrowest width and nowhere else. The values are
 * copied from `home.css` rather than shared through a token, because that
 * stylesheet is approved and this change is not a reason to edit it.
 *
 * This is role alignment, not enlargement. The option's own selected state,
 * focus ring and min-height are untouched.
 * ----------------------------------------------------------------------- */

.planner-panel .option {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--home-option-border);
	border-radius: var(--r-card-sm);
	background: var(--paper-2);
	font-size: var(--fs-home-card-title);
	font-weight: var(--fw-card-title);
	line-height: 1.18;
	letter-spacing: -0.012em;
}

/*
 * A flat 6px above the description, which is what Home actually renders at
 * every width: `home-cover.css` scopes its own `margin-top: 6px` to
 * `.home-cover`, so the band values in `home.css` never apply. Matching the
 * rendered value rather than the one the band rules appear to set.
 */
.planner-panel .option small {
	margin-top: 6px;
	font-size: max(calc(12.5px * var(--type-small)), var(--type-floor));
	font-weight: 400;
	line-height: 1.42;
	color: var(--home-option-line);
}

.planner-panel .option:hover,
.planner-panel .option:focus-visible {
	border-color: var(--option-border-hover);
	background: var(--white);
	box-shadow: var(--option-shadow-hover);
}

/*
 * The selected state, re-stated at the same specificity as the rules above so
 * it still wins. `.option.selected` is declared earlier in this file and would
 * otherwise lose its yellow to the card fill — the kind of regression that only
 * shows once somebody actually picks an answer.
 */
.planner-panel .option.selected {
	border-color: var(--ink);
	background: var(--yellow);
}

.planner-panel .option.selected:hover,
.planner-panel .option.selected:focus-visible {
	background: var(--yellow);
	border-color: var(--ink);
}

@media screen and (min-width: 651px) {

	.planner-panel .option small {
		font-size: max(calc(13px * var(--type-small)), var(--type-floor));
	}

}

@media screen and (min-width: 1101px) {

	.planner-panel .option {
		line-height: 1.16;
	}

	.planner-panel .option small {
		font-size: max(calc(12px * var(--type-small)), var(--type-floor));
		line-height: 1.38;
	}

}

@media screen and (min-width: 1501px) {

	.planner-panel .option {
		line-height: 1.18;
	}

	.planner-panel .option small {
		font-size: max(calc(13px * var(--type-small)), var(--type-floor));
		line-height: 1.42;
	}

}