/*
 * The buying guide.
 *
 * Loaded only on the page that uses page-buying-guide.php, and scoped to
 * `.guide`, so nothing here reaches the rest of the site. It reads the tokens
 * in style.css and adds only what this page needs: the sticky section strip,
 * the four starters, the schematic with its parts list, the stage stepper, the
 * panel cores, the questions, the brief builder, and the entrance motion.
 *
 * As everywhere in this theme, a colour, a size or a duration that appears as
 * a literal below is a mistake. Everything comes from style.css or from the
 * block of tokens at the top of this file.
 */

/* ===========================================================================
 * 1. Tokens for this page
 * ========================================================================= */

.guide {
	/* The header is sticky from 768px up; this is its height, and it is the
	   offset the section strip parks under and the margin an anchored section
	   leaves for both of them. .site-header is --tap plus its padding plus its
	   one-pixel rule. */
	--guide-header: calc(var(--tap) + var(--space-xs) * 2 + 1px);
	--guide-anchor: var(--space-md);
	--starter-mark: 1rem;
}

@media (min-width: 768px) {
	.guide {
		--guide-anchor: 8.5rem;
	}
}

/*
 * Three things on this page are written out with the `hidden` attribute and
 * shown by guide.js once it has wired them up: the starter counter, the tabs
 * above the delivery stages, and the buttons under the brief. Each of those
 * carries a display of its own further down this file, and an author rule beats
 * the browser's built-in `[hidden]` rule — so without this line the buttons
 * appear before there is any script behind them. nav.css solves the same
 * problem the same way for the menu button.
 */
.guide [hidden] {
	display: none;
}

/* ===========================================================================
 * 2. The opening block
 * ========================================================================= */

.guide-hero__inner {
	display: grid;
	align-content: start;
	gap: var(--space-md);
	padding-block: var(--section-y);
}

.guide-hero__inner h1 {
	max-width: 26ch;
	margin: 0;
	color: var(--ink-on-dark);
}

.guide-hero__lede {
	max-width: 62ch;
	margin: 0;
	font-size: var(--text-lead);
	line-height: var(--lh-lead);
	color: var(--ink-on-dark-soft);
}

.guide-hero__chips {
	margin-top: 0;
}

/* The chip is a light object on a dark band here, so it takes the dark band's
   ink rather than the paper version .chips ships with. */
.guide-hero__chips a {
	background: transparent;
	border-color: var(--line-dark);
	color: var(--ink-on-dark);
}

.guide-hero__chips a:hover,
.guide-hero__chips a:focus {
	border-color: var(--accent-bright);
	color: var(--accent-bright);
}

.guide-note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-on-dark-soft);
}

.guide-note--light {
	margin-top: var(--space-lg);
	color: var(--ink-soft);
}

/* ===========================================================================
 * 3. The section strip
 *
 * Eight links, one per section. It scrolls sideways rather than wrapping: a
 * wrapped strip changes height as the window narrows and would move the whole
 * page under it. It sticks only from 768px, which is where the header starts
 * to stick, so there is never a second sticky bar at the top of a phone.
 * ========================================================================= */

.guide-nav {
	background: var(--navy-deep);
	border-block: var(--hairline-dark);
	color: var(--ink-on-dark);
}

.guide-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.guide-nav__label {
	display: none;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--accent-bright);
}

.guide-nav__list {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.guide-nav__list li {
	margin: 0;
}

.guide-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: var(--tap);
	padding-inline: var(--space-xs);
	border-bottom: 2px solid transparent;
	color: var(--ink-on-dark-soft);
	font-size: var(--text-small);
	font-weight: 600;
	white-space: nowrap;
}

.guide-nav__link:hover,
.guide-nav__link:focus {
	color: var(--ink-on-dark);
	text-decoration: none;
}

.guide-nav__num {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	color: var(--accent-bright);
}

.guide-nav__link.is-current {
	color: var(--ink-on-dark);
	border-bottom-color: var(--accent);
}

@media (min-width: 900px) {
	.guide-nav__label {
		display: block;
	}
}

@media (min-width: 768px) {
	.guide-nav {
		position: sticky;
		top: var(--guide-header);
		z-index: 15;
	}
}

.guide-section {
	scroll-margin-top: var(--guide-anchor);
}

/* Smooth anchors, but only for a reader who has not asked for less motion, and
   only on this page. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.guide) {
		scroll-behavior: smooth;
	}
}

/* ===========================================================================
 * 4. Section headings
 * ========================================================================= */

.guide-eyebrow {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	color: var(--ink-soft);
}

.guide-eyebrow__num {
	margin-right: var(--space-2xs);
	font-family: var(--font-mono);
	color: var(--accent);
}

.guide-eyebrow__num::after {
	content: "/";
	margin-left: var(--space-2xs);
	color: var(--line);
}

/* ===========================================================================
 * 5. The four starters
 *
 * Ordinary radio buttons. The note under an option is shown by the rule below
 * rather than by script, so a browser without JavaScript still tells the
 * reader what each answer decides.
 * ========================================================================= */

.starter {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.starter {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--space-xl);
		align-items: start;
	}
}

.starter__groups {
	display: grid;
	gap: var(--space-lg);
}

.starter__group {
	margin: 0;
	padding: var(--space-md) 0 0;
	border: 0;
	border-top: var(--hairline);
}

.starter__group legend {
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--text-heading-sm);
	font-weight: 700;
	color: var(--ink);
}

.starter__hint {
	margin: var(--space-2xs) 0 var(--space-xs);
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.starter__options {
	display: grid;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.starter__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.starter__option {
	margin: 0;
}

/* A real radio, kept in the tab order and out of sight. */
.starter__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.starter__label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	min-height: var(--tap);
	padding: var(--space-xs) var(--space-sm);
	border: var(--hairline);
	border-radius: var(--radius);
	background: var(--paper);
	cursor: pointer;
	transition:
		border-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		background-color var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.starter__label:hover {
	border-color: var(--accent);
}

.starter__mark {
	flex: 0 0 auto;
	width: var(--starter-mark);
	height: var(--starter-mark);
	margin-top: 0.2rem;
	border: 1px solid var(--ink-soft);
	border-radius: 50%;
	transition:
		background-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		border-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		box-shadow var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.starter__input:checked + .starter__label {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.starter__input:checked + .starter__label .starter__mark {
	border-color: var(--accent);
	background: var(--accent);
	box-shadow: inset 0 0 0 3px var(--paper);
}

.starter__input:focus-visible + .starter__label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.starter__note {
	display: none;
	margin: var(--space-2xs) 0 var(--space-2xs);
	padding-left: var(--space-sm);
	border-left: 2px solid var(--accent);
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.starter__input:checked ~ .starter__note {
	display: block;
}

/* The panel that keeps count. Built by script, so it is hidden until then. */
.starter__out {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--paper-2);
	border: var(--hairline);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
}

@media (min-width: 1024px) {
	.starter__out {
		position: sticky;
		top: var(--guide-anchor);
	}
}

.starter__fallback {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.starter__state {
	display: grid;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.starter__state-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	margin: 0;
	padding-bottom: var(--space-2xs);
	border-bottom: var(--hairline);
}

.starter__state-name {
	color: var(--ink);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.starter__state-mark {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.starter__state-item.is-in .starter__state-mark {
	color: var(--accent);
}

.starter__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.starter__out.is-complete {
	background: var(--accent-soft);
	border-color: var(--accent);
}

.starter__out.is-complete .starter__count {
	color: var(--accent);
}

/* ===========================================================================
 * 6. The schematic and the parts list
 * ========================================================================= */

.build {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.build {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--space-xl);
		align-items: start;
	}
}

.build__figure {
	margin: 0;
}

.build__svg {
	display: block;
	width: 100%;
	height: auto;
}

.build__svg .part > * {
	fill: var(--paper);
	stroke: var(--ink-soft);
	stroke-width: 1.5;
	transition:
		fill var(--motion-quick, 140ms) var(--motion-ease, ease),
		stroke var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.build__svg .part--panel > * {
	fill: var(--paper-2);
}

.build__svg .part--services > * {
	fill: none;
}

.build__svg .part.is-current > * {
	fill: var(--accent-soft);
	stroke: var(--accent);
	stroke-width: 2.5;
}

.build__svg .part--services.is-current > * {
	fill: none;
}

.build__svg .build__ground {
	stroke: var(--line);
	stroke-width: 1;
}

/* Only after the script has wired the drawing up: before that, pointing at it
   would be a lie. */
.guide.is-live .build__svg .part {
	cursor: pointer;
}

.build__caption {
	margin-top: var(--space-xs);
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

/* ===========================================================================
 * 7. Lists that the script turns into one-at-a-time panels
 *
 * Without the script these are ordinary definition lists: every item and its
 * text, in order, which is the whole content. With it, `.is-interactive` hides
 * all but the chosen one.
 * ========================================================================= */

.picker {
	margin: 0;
}

.picker__item {
	border-top: var(--hairline);
}

.picker__item:first-child {
	border-top: 0;
}

.picker__item dt {
	margin: 0;
}

.picker__item dd {
	max-width: var(--prose);
	margin: 0 0 var(--space-sm);
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

.picker__num {
	margin-right: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	color: var(--accent);
}

.picker.is-interactive .picker__item dd {
	display: none;
}

.picker.is-interactive .picker__item.is-current dd {
	display: block;
}

.picker.is-interactive .picker__button {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	width: 100%;
	min-height: var(--tap);
	padding: var(--space-xs) 0;
	background: none;
	border: 0;
	color: var(--ink);
	font: inherit;
	font-family: var(--font-display);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: color var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.picker.is-interactive .picker__button:hover,
.picker.is-interactive .picker__button:focus-visible {
	color: var(--accent);
}

/* ===========================================================================
 * 8. The two delivery lines
 * ========================================================================= */

.stages__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-lg);
}

.stages__tab {
	min-height: var(--tap);
	padding-inline: var(--space-sm);
	border: var(--hairline);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		border-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		color var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.stages__tab[aria-selected="true"] {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--ink-on-dark);
}

.stage-line__title {
	margin-bottom: var(--space-md);
	font-size: var(--text-heading);
	line-height: var(--lh-heading);
}

.stage-line__list {
	display: grid;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage {
	margin: 0;
	padding-top: var(--space-md);
	border-top: 2px solid var(--line);
}

.stage__num {
	margin: 0 0 var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	color: var(--accent);
}

.stage__title {
	margin-bottom: var(--space-2xs);
	font-size: var(--text-heading-sm);
	line-height: var(--lh-heading-sm);
}

.stage__text {
	max-width: var(--prose);
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

/* Stepper: one stage at a time, with the controls the script adds. */
.stages.is-interactive .stage-line {
	display: none;
}

.stages.is-interactive .stage-line.is-current {
	display: block;
}

.stages.is-interactive .stage-line__title {
	display: none;
}

.stages.is-interactive .stage {
	display: none;
}

.stages.is-interactive .stage.is-current {
	display: block;
	animation: guide-arrive var(--motion-base, 320ms) var(--motion-ease, ease) both;
}

@keyframes guide-arrive {
	from {
		opacity: 0;
		transform: translateY(var(--reveal-shift, 16px));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.stages__controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	padding-top: var(--space-sm);
	border-top: var(--hairline);
}

.stages__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding-inline: var(--space-sm);
	border: var(--hairline);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-body);
	cursor: pointer;
	transition:
		border-color var(--motion-quick, 140ms) var(--motion-ease, ease),
		color var(--motion-quick, 140ms) var(--motion-ease, ease);
}

.stages__nav:hover,
.stages__nav:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

.stages__nav[disabled] {
	opacity: 0.4;
	cursor: default;
}

.stages__nav[disabled]:hover {
	border-color: var(--line);
	color: var(--ink);
}

.stages__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	color: var(--ink-soft);
}

.stages__rail {
	flex: 1 1 auto;
	height: 2px;
	background: var(--line);
	overflow: hidden;
}

.stages__rail span {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--motion-base, 320ms) var(--motion-ease, ease);
}

/* ===========================================================================
 * 9. What is in the quotation
 * ========================================================================= */

.scope {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.scope {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ===========================================================================
 * 10. The questions
 * ========================================================================= */

.faq {
	display: grid;
	max-width: 82ch;
	border-bottom: var(--hairline);
}

.faq__item {
	border-top: var(--hairline);
}

.faq__q {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: var(--tap);
	padding: var(--space-sm) 0;
	font-family: var(--font-display);
	font-size: var(--text-heading-sm);
	font-weight: 700;
	line-height: var(--lh-heading-sm);
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "+";
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: var(--text-lead);
	color: var(--accent);
}

.faq__item[open] .faq__q::after {
	content: "\2212";
}

.faq__q:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.faq__a {
	max-width: var(--prose);
	padding-bottom: var(--space-md);
	color: var(--ink-soft);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}

/* ===========================================================================
 * 11. The brief builder
 * ========================================================================= */

.brief {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.brief {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: start;
	}
}

.brief__fields {
	display: grid;
	gap: var(--space-sm);
}

.brief__field {
	margin: 0;
}

.brief__label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.brief__input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.brief__out {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--paper-2);
	border: var(--hairline);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
}

@media (min-width: 1024px) {
	.brief__out {
		position: sticky;
		top: var(--guide-anchor);
	}
}

.brief__text {
	min-height: 10rem;
	margin: 0;
	padding: var(--space-md);
	background: var(--paper);
	border: var(--hairline);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	line-height: var(--lh-small);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.brief__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
}

.brief__note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ===========================================================================
 * 12. Arrival
 *
 * `.js-reveal` is added by guide.js, and only to a block that is below the fold
 * when the page loads, so the hidden frame can never be seen.
 * ========================================================================= */

.guide .js-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-shift, 16px));
	transition:
		opacity var(--motion-slow, 620ms) var(--motion-ease, ease),
		transform var(--motion-slow, 620ms) var(--motion-ease, ease);
	transition-delay: var(--d, 0ms);
}

.guide .js-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html:has(.guide) {
		scroll-behavior: auto;
	}

	.guide .js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.stages.is-interactive .stage.is-current {
		animation: none;
	}

	.guide .starter__label,
	.guide .starter__mark,
	.guide .picker__button,
	.guide .stages__tab,
	.guide .stages__nav,
	.guide .stages__rail span,
	.guide .build__svg .part > * {
		transition: none;
	}
}