/**
 * Scorecard questionnaire + results.
 *
 * ⚠️ This file defines NO colours, fonts or sizes of its own. Every value is a token from
 * the theme's tokens.css. If something needed here is not a token, the token is what is
 * missing — add it there rather than a hex code here, or this file quietly becomes a second
 * design system that drifts from the first.
 *
 * ⚠️ THE SCORECARD PAGE RENDERS ON THE DARK (ink) BACKGROUND. The theme's default page
 * template is dark; the light variant (templates/page-light.php) cannot be used here
 * because it renders ACF sections and never calls the_content(), so the shortcode would
 * silently vanish. Everything below therefore uses --ink-* tokens, not --paper-*. The
 * --ftb-* aliases resolve to paper values, so they are deliberately NOT used here.
 *
 * Mobile-first, like sections.css. The brass budget holds: about one brass element per
 * viewport, which here is the selected answer or the button, never both at once.
 *
 * Nothing in this file hides a question. The stepping is added by scorecard.js via
 * .is-stepped, so without JS every question is visible and the form still works.
 */

/*
 * The theme's content-page part prints the page title above the content, unstyled and
 * outside the content column. The scorecard supplies its own heading, so hide the
 * duplicate rather than leaving an orphaned H1 in the top-left corner.
 *
 * ⚠️ Kept as separate rules, never one comma-separated list. An invalid selector
 * invalidates the WHOLE list, so pairing this with a more exotic :has() variant silently
 * killed the working half — which looked exactly like the stylesheet not loading at all.
 */
body:has(.ftb-sc) .entry-header {
	display: none;
}

body:has(.ftb-sc) .entry-content {
	max-width: none;
	padding: 0;
}

.ftb-sc {
	max-width: 46rem;
	margin: 0 auto;
	padding: var(--space-12) var(--space-4);
	color: var(--ink-text);
	font-family: var(--font-primary);
	font-size: var(--font-size-body);
	line-height: 1.6;
}

/* ------------------------------------------------------------------ lead form */

.ftb-sc__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brass-on-ink);
	margin: 0 0 var(--space-3);
}

.ftb-sc__title {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-heading);
	line-height: 1.2;
	margin: 0 0 var(--space-6);
}

.ftb-sc__lede p {
	color: var(--ink-text-secondary);
	margin: 0 0 var(--space-4);
}

/* ------------------------------------------------------------------ the size note
 *
 * Sits between the lede and the form. A quiet panel, NOT a brass-edged one: it is a note
 * about how to read the questions, and giving it the brass treatment would make the first
 * thing on the page look like a warning about eligibility. The first move in the report
 * owns brass; this does not compete with it.
 */
.ftb-sc__sizenote {
	margin: var(--space-6) 0 0;
	padding: var(--space-5);
	background: var(--ink-raised);
	border-radius: var(--radius-md);
}

/*
 * The byline, built to match the report's callout so the two read as the same device: a
 * person talking, not a policy notice. Deliberately one size down from the report version
 * (44px face against 56px) — this is an aside before the form, not the moment in the report
 * where Thomas answers the reader's result.
 */
.ftb-sc__sizenote-who {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.ftb-sc__sizenote-face {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full, 999px);
	object-fit: cover;
	border: 1px solid var(--brass-hairline);
	flex: none;
}

.ftb-sc__sizenote-who-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ftb-sc__sizenote-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brass-on-ink);
}

/* Small, under the label — names who is talking without becoming a signature block. */
.ftb-sc__sizenote-name {
	font-size: var(--font-size-small);
	color: var(--ink-text-secondary);
}

.ftb-sc__sizenote p {
	font-size: var(--font-size-small);
	color: var(--ink-text-secondary);
	margin: 0 0 var(--space-3);
}

.ftb-sc__sizenote p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- form controls
 *
 * ⚠️ FORM RULES LIVE IN assets/css/forms.css, not here. Fields, labels, selects, the
 * consent row, the notice and the honeypot are all styled there under `ftb-form__*`,
 * because a form control is the same object wherever it appears - the scorecard's lead
 * form, the waitlist, and whatever comes next.
 *
 * They used to live in this file under `ftb-sc__*`, which meant any form reusing them also
 * had to wear `.ftb-sc` - the scorecard's PAGE wrapper, carrying a max-width and page
 * padding. Inside the theme's form card that doubled the padding, and the fix was turning
 * into a specificity fight. Moved out 2026-09-30.
 *
 * The one rule that stays is the gap between the lede and the form, which is about THIS
 * page's composition rather than about forms.
 */

.ftb-sc .ftb-form {
	margin-top: var(--space-8);
}

/* ------------------------------------------------------------------ questions */

.ftb-sc__progress {
	margin-bottom: var(--space-8);
}

/* ------------------------------------------------- the six-segment progress bar
 *
 * ⭐ Claude Design's redesign, 2026-10-01. One segment per layer plus one for the
 * qualifying questions, each filling independently.
 *
 * ⚠️ NOT ONE BAR. A single bar across 35 questions only ever says "a long way to go",
 * which is the feeling Thomas reported after his first run. Six short segments say which
 * layer you are in and that each one is five questions, not thirty-five.
 */
.ftb-sc__segs {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-2);
}

.ftb-sc__seg {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.ftb-sc__seg-track {
	height: 4px;
	border-radius: 2px;
	background: var(--ink-border);
	overflow: hidden;
}

.ftb-sc__seg-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--brass-on-ink);
	transition: width var(--dur-md, 240ms) var(--ease-out, ease);
}

/*
 * The label truncates rather than wraps: seven columns on a phone cannot fit "Foundation"
 * at full width, and a wrapping label would make the bar two lines tall and jumpy as the
 * current segment changes.
 */
.ftb-sc__seg-name {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	/* ⚠️ .03em, not .06em. At .06em "FOUNDATION" - the longest of the seven - overflowed
	   its column by 3px and rendered as "FOUNDATI…", which looks like a bug rather than a
	   design choice. Measured in the browser at 1100px, where the columns are 91px. */
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ftb-sc__seg.is-current .ftb-sc__seg-name {
	color: var(--brass-on-ink);
}

.ftb-sc__seg.is-done .ftb-sc__seg-name {
	color: var(--ink-text-secondary);
}

.ftb-sc__progress-text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin: var(--space-5) 0 0;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-text-muted);
}

.ftb-sc__progress-text [data-ftb-progress-layer] {
	color: var(--brass-on-ink);
	letter-spacing: .16em;
}

/*
 * On a phone seven labels are unreadable at any size, so the names go and the bar becomes
 * what it is there to be: a row of segments showing shape and position. The layer name is
 * still named in full under it, and again on every question.
 */
@media (max-width: 640px) {
	.ftb-sc__seg-name { display: none; }
	.ftb-sc__segs { gap: 4px; }
}

/*
 * A plain div, not a fieldset. A <legend> is painted at the top of its <fieldset> by the
 * browser regardless of source order — flex ordering does not override it — which forced
 * the category label below the question. The grouping a screen reader needs comes from
 * role="radiogroup" + aria-labelledby on the options instead.
 */
.ftb-sc__step {
	border: 0;
	padding: 0;
	margin: 0 0 var(--space-12);
}

/*
 * [hidden] must beat the button's own display. .ftb-btn sets display:inline-flex, which
 * outranks the browser's default [hidden] rule, so the Back button stayed visible on the
 * first step even with the attribute correctly set.
 */
.ftb-sc [hidden] {
	display: none !important;
}

.ftb-sc__category {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brass-on-ink);
	margin: 0 0 var(--space-4);
}

/* Only the subtitle remains in this block - the layer name lives in the progress line. */
.ftb-sc__category span {
	display: block;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-text-secondary);
	font-family: var(--font-primary);
	font-size: var(--font-size-small);
}

/*
 * One question per screen means the question IS the page, so it is set at heading scale
 * rather than as a form label. Fluid, because at 36px a long question would otherwise wrap
 * to five lines on a phone.
 */
.ftb-sc__question {
	display: block;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: var(--font-weight-heading);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: var(--space-5) 0 var(--space-8);
	padding: 0;
}

.ftb-sc__question:focus {
	outline: none;
}

.ftb-sc__options {
	display: grid;
	gap: var(--space-3);
}

/*
 * ⭐ THE OPTION IS A BIG TARGET WITH A LETTER KEY. Claude Design's redesign, 2026-10-01.
 *
 * Thomas, after his first run: "it was a little hard to read." The cause was not the
 * questions - item-specific answers are the right format and the research backs it (see
 * build_log) - it was that four distinct SENTENCES were set as four cramped radio rows.
 * Each option is now 68px tall with a fixed letter badge, so the eye has an anchor to
 * return to and the four answers read as four choices rather than a paragraph.
 */
.ftb-sc__option {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	min-height: 68px;
	padding: var(--space-4) var(--space-5);
	background: var(--ink-raised);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1)),
		background 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1));
}

.ftb-sc__option:hover {
	border-color: var(--ink-border-strong);
}

/*
 * ⚠️ THE RADIO IS HIDDEN, NOT REMOVED. It is still a real <input type="radio"> inside a
 * <label>, so the form submits with no JavaScript and a screen reader announces a proper
 * radio group. Only its default rendering goes - a dark-scheme radio draws as a white disc
 * that makes all four options look chosen, and at this size the key badge IS the control.
 *
 * Positioned rather than display:none so focus can still land on it, which is what
 * :has(input:focus-visible) below needs to draw the focus ring.
 */
.ftb-sc__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* The letter badge. aria-hidden in the markup - it is a landmark for the eye, not content. */
.ftb-sc__option-key {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ink-border-strong);
	border-radius: var(--radius-xs, 3px);
	font-family: var(--font-mono);
	font-size: var(--font-size-small);
	font-weight: 700;
	color: var(--ink-text-secondary);
	transition: inherit;
}

.ftb-sc__option-label {
	line-height: 1.45;
}

.ftb-sc__option:has(input:checked) .ftb-sc__option-key {
	background: var(--brass-on-ink);
	border-color: var(--brass-on-ink);
	color: var(--ink-base, #1B1A17);
}

.ftb-sc__option:has(input:checked) {
	border-color: var(--brass-on-ink);
	background: var(--ink-overlay);
}

.ftb-sc__option:has(input:focus-visible) {
	outline: 2px solid var(--brass-on-ink);
	outline-offset: 2px;
}

.ftb-sc__nav {
	margin-top: var(--space-5);
}

.ftb-sc__submit {
	margin-top: var(--space-8);
}

/* ------------------------------------------- stepped mode, added by JS only */

.ftb-sc.is-stepped .ftb-sc__step {
	display: none;
	margin-bottom: 0;
}

.ftb-sc.is-stepped .ftb-sc__step.is-active {
	display: block;
}

/* Without JS the submit button must always show; with JS it appears on the last step. */
.ftb-sc.is-stepped .ftb-sc__submit {
	display: none;
}

.ftb-sc.is-stepped .ftb-sc__submit.is-visible {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.ftb-sc__progress-bar span { transition: none; }
}

/* ------------------------------------------------------------------- results */

.ftb-sc--missing {
	text-align: center;
	color: var(--ink-text-secondary);
}

@media (min-width: 48rem) {
	.ftb-sc {
		padding: var(--space-16) var(--space-6);
	}

	.ftb-sc__title { font-size: var(--font-size-h1); }
	.ftb-sc__question { font-size: var(--font-size-h3); }
}

/* =========================================================================== REPORT
 *
 * The report proper. Everything above this line is the questionnaire.
 *
 * ⚠️ Charts are inline SVG with their colours baked in as literals (Dompdf cannot
 * resolve custom properties). So this file styles the BOXES the charts sit in, never the
 * charts themselves. Do not try to restyle a chart from here — change the palette in
 * class-ftb-scorecard-charts.php, which both screen and PDF read.
 */

/* ------------------------------------------------------------------ report header */

.ftb-sc__report-head {
	padding-bottom: var(--space-8);
	margin-bottom: var(--space-10);
	border-bottom: 1px solid var(--ink-border-hairline);
}

.ftb-sc__report-title {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-heading);
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	text-wrap: balance;
}

.ftb-sc__report-date {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-text-muted);
	margin: 0 0 var(--space-8);
}

/* ============================================================ the summary card
 *
 * ⭐ Claude Design's redesign, 2026-10-01. Replaces the dial SVG: score, tier, the four
 * bands with a marker, and the diagnosis in up to three facts — the whole verdict before
 * any prose.
 *
 * ⚠️ PLAIN HTML/CSS, not SVG, because Dompdf is deferred. When the PDF returns this needs
 * a print equivalent; flex does not survive Dompdf.
 */
.ftb-sc__summary {
	margin-top: var(--space-10);
	padding: clamp(24px, 4vw, 40px);
	background: var(--paper-raised, #FBF9F3);
	border: 1px solid var(--paper-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-9, 36px);
}

.ftb-sc__summary-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-4) var(--space-8);
}

/*
 * ⚠️ COLOUR SET EXPLICITLY, not inherited. The theme's global.css has a bare
 * `p { color: var(--color-body) }`, which resolves to the INK body colour — on this paper
 * card the score rendered as washed-out grey on cream. Inheriting from .ftb-sc__summary
 * would have been correct and does not happen, because the <p> is matched directly.
 */
.ftb-sc__summary-score {
	display: flex;
	align-items: baseline;
	gap: var(--space-5);
	flex-wrap: wrap;
	margin: 0 !important;
	color: var(--paper-text);
}

.ftb-sc__summary-pct {
	font-size: clamp(64px, 9vw, 96px);
	font-weight: var(--font-weight-heading);
	letter-spacing: -0.03em;
	line-height: 0.9;
}

.ftb-sc__summary-tier {
	font-size: clamp(24px, 3vw, 30px);
	font-weight: var(--font-weight-heading);
	letter-spacing: -0.015em;
}

.ftb-sc__summary-points {
	margin: 0 0 0 auto !important;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--paper-text-secondary);
}

/* ------------------------------------------------------------------ the bands
 *
 * ⚠️ WIDTHS ARE PROPORTIONAL TO THE REAL RANGES (30/20/22/28), set inline from PHP. Four
 * equal blocks would say the tiers are evenly spaced, and they are deliberately not — the
 * top band is harder to reach than the middle two, which is the whole calibration.
 */
.ftb-sc__bands {
	position: relative;
	padding-top: 34px;
}

.ftb-sc__bands-marker {
	color: var(--paper-text);
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
}

.ftb-sc__bands-value {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1;
	color: var(--paper-text);
}

/* A CSS triangle rather than a glyph: no font dependency, and it cannot go missing. */
.ftb-sc__bands-point {
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 9px solid var(--brass);
}

.ftb-sc__bands-track {
	display: flex;
	gap: 4px;
	height: 18px;
}

.ftb-sc__band {
	border-radius: 3px;
	background: var(--paper-border-hairline);
}

.ftb-sc__band:nth-child(2) { background: var(--paper-border); }
.ftb-sc__band:nth-child(3) { background: var(--paper-border-strong); }
.ftb-sc__band:nth-child(4) { background: #B9B1A1; }

/* The reader's own band is slate (palette 'data', #4E6472) — the colour the dial used for
 * "you are here", and the one coloured mark on a neutral strip. Thomas preferred it to ink. */
.ftb-sc__band.is-current { background: #4E6472 !important; }

.ftb-sc__bands-labels {
	display: flex;
	gap: 4px;
	margin-top: var(--space-3);
}

.ftb-sc__band-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ftb-sc__band-name {
	font-size: var(--font-size-small);
	line-height: 1.3;
	color: var(--paper-text-secondary);
}

.ftb-sc__band-label.is-current .ftb-sc__band-name {
	font-weight: 700;
	color: var(--paper-text);
}

.ftb-sc__band-range {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	color: var(--paper-text-secondary);
}

/* ----------------------------------------------------------------- the glance
 *
 * ⚠️ ONE TO THREE ITEMS, decided in PHP. "Lowest score" and "You said" are only printed
 * when they name a DIFFERENT layer from the constraint — three identical cards would read
 * as a rendering fault. auto-fit handles the varying count without a width per case.
 */
.ftb-sc__glance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	border-top: 1px solid var(--paper-border);
}

.ftb-sc__glance-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-5) var(--space-5) 0 0;
}

.ftb-sc__glance-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--paper-text-secondary);
}

.ftb-sc__glance-value {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	letter-spacing: -0.01em;
}

.ftb-sc__glance-note {
	font-size: var(--font-size-small);
	color: var(--paper-text-secondary);
}

/* ======================================================== the contents list
 *
 * ⭐ The answer to "it just feels heavy" — you can see how much is left and jump.
 *
 * ⚠️ DESKTOP ONLY, at the design's own 1080px. A ten-item nav stacked above the content
 * on a phone makes the report longer, which is the opposite of the point.
 */
.ftb-sc__body {
	display: block;
}

.ftb-sc__toc {
	display: none;
}

@media (min-width: 1080px) {
	.ftb-sc__body {
		display: flex;
		gap: var(--space-12);
		align-items: flex-start;
	}

	.ftb-sc__toc {
		position: sticky;
		top: var(--space-10);
		flex: 0 0 220px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-top: 6px;
	}

	.ftb-sc__article {
		flex: 1 1 0;
		min-width: 0;
	}
}

.ftb-sc__toc-head {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--paper-text-secondary);
	margin: 0 0 var(--space-3) !important;
}

.ftb-sc__toc-link {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
	padding: 7px 0 7px 12px;
	border-left: 2px solid var(--paper-border);
	text-decoration: none;
	color: var(--paper-text-secondary);
	font-size: var(--font-size-small);
	line-height: 1.35;
	transition: color 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1)),
		border-color 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1));
}

.ftb-sc__toc-link:hover {
	color: var(--paper-text);
	border-left-color: var(--brass);
}

/* The section being read (scorecard-report.js). Same brass rule as hover, held, plus weight. */
.ftb-sc__toc-link.is-active {
	color: var(--paper-text);
	border-left-color: var(--brass);
	font-weight: 600;
}

.ftb-sc__toc-link.is-active .ftb-sc__toc-n {
	color: var(--brass);
}

.ftb-sc__toc-n {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	color: var(--paper-text-secondary);
}

/* The mono number above each section heading, matching the contents list. */
.ftb-sc__section-num {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--paper-text-secondary);
	margin: 0 0 var(--space-3) !important;
}

/* ---------------------------------------------------------------------- sections */

.ftb-sc__section {
	margin-bottom: var(--space-12);
}

.ftb-sc__section h2 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	line-height: 1.25;
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

.ftb-sc__section p {
	margin: 0 0 var(--space-4);
	color: var(--ink-text-secondary);
}

/* The opening line of a section carries the claim; it reads at body-plus. */
.ftb-sc__lede-line {
	font-size: var(--font-size-h5);
	line-height: 1.45;
	color: var(--ink-text) !important;
	margin-bottom: var(--space-5) !important;
	text-wrap: pretty;
}

.ftb-sc__chart-intro {
	font-size: var(--font-size-small);
	color: var(--ink-text-muted) !important;
}

/* The named layer. Brass, because it is the single most important word in the report. */
.ftb-sc__constraint-name {
	font-family: var(--font-mono);
	font-size: var(--font-size-h5);
	letter-spacing: .04em;
	color: var(--brass-on-ink) !important;
	margin-bottom: var(--space-3) !important;
}

.ftb-sc__weeks {
	font-size: var(--font-size-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-text-muted);
	margin-left: var(--space-2);
}

/* ------------------------------------------------------------------------ charts */

.ftb-sc__chart {
	margin: 0 0 var(--space-6);
	padding: var(--space-5) var(--space-4);
	background: var(--ink-raised);
	border: 1px solid var(--ink-border-hairline);
	border-radius: var(--radius-md);
}

.ftb-sc__chart svg { display: block; width: 100%; height: auto; }

/*
 * The radar is authored at 640x500 with labels and scores at every vertex. A 20rem cap
 * squashed it to a thumbnail with unreadable labels — it needs its full width.
 */
.ftb-sc__chart--radar svg { max-width: 40rem; margin: 0 auto; }

.ftb-sc__chart figcaption {
	margin-top: var(--space-4);
	font-size: var(--font-size-small);
	line-height: 1.5;
	color: var(--ink-text-muted);
}

/* --------------------------------------------------------------- the pull quote */

.ftb-sc__pull {
	margin: var(--space-6) 0;
	padding-left: var(--space-5);
	border-left: 2px solid var(--brass-deep);
}

.ftb-sc__pull p {
	font-size: var(--font-size-h5);
	line-height: 1.4;
	color: var(--ink-text) !important;
	margin: 0 !important;
	text-wrap: pretty;
}

/* ------------------------------------------------------- Thomas responds callout
 *
 * ⭐ The one place a person is speaking rather than the report. It is deliberately a
 * different surface — raised, brass-edged, his face attached — because the reader has
 * to register the change of voice without being told about it.
 */

.ftb-sc__callout {
	margin: var(--space-8) 0;
	padding: var(--space-6) var(--space-5);
	background: var(--ink-sunken);
	border: 1px solid var(--brass-hairline);
	border-radius: var(--radius-md);
}

.ftb-sc__callout-who {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.ftb-sc__callout-face {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full, 999px);
	object-fit: cover;
	border: 1px solid var(--brass-hairline);
	flex: none;
}

.ftb-sc__callout-who-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ftb-sc__callout-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brass-on-ink);
}

/* Small, under the label. Names who is talking without turning it into a signature. */
.ftb-sc__callout-name {
	font-size: var(--font-size-small);
	color: var(--ink-text-secondary);
}

.ftb-sc__callout-body h3 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-heading);
	line-height: 1.3;
	margin: 0 0 var(--space-3);
	color: var(--ink-text);
	text-wrap: balance;
}

.ftb-sc__callout-body p {
	margin: 0 0 var(--space-3);
	color: var(--ink-text-secondary);
}

.ftb-sc__callout-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- start here */

.ftb-sc__steps {
	list-style: none;
	margin: var(--space-6) 0;
	padding: 0;
	counter-reset: ftb-step;
}

.ftb-sc__steps li {
	counter-increment: ftb-step;
	position: relative;
	padding-left: var(--space-10);
	margin-bottom: var(--space-6);
}

/*
 * Numbered because this IS a sequence — the steps are done in order. The number is mono
 * and brass-deep rather than full brass: the constraint name already spent the brass
 * budget on this page.
 */
.ftb-sc__steps li::before {
	content: counter(ftb-step);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--font-mono);
	font-size: var(--font-size-small);
	color: var(--brass-deep);
	border: 1px solid var(--brass-hairline);
	border-radius: var(--radius-sm);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ftb-sc__steps h3 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	margin: 0 0 var(--space-2);
	color: var(--ink-text);
}

.ftb-sc__steps p {
	margin: 0;
	color: var(--ink-text-secondary);
}

/* ------------------------------------------------------------- the first move
 *
 * The one concrete action, chosen from what they actually answered. This is the payoff of
 * the entire report — the single thing a reader could act on tomorrow morning.
 *
 * ⚠️ IT IS A RAISED, BRASS-EDGED BLOCK, AND IT HAS TO BE. The first version was a thin
 * brass left rule, on the reasoning that the callout and the "honestly" section were
 * already raised surfaces and a third would flatten the hierarchy. Thomas's verdict:
 * "the section your first move is barely visible mate." He was right, and the reasoning
 * was backwards — both neighbours are padded panels on a filled ground, so a 2px rule was
 * never going to hold its own between them. The most important block on the page cannot be
 * the quietest. Hierarchy is decided by what matters most, not by what arrived last.
 *
 * It outranks the callout deliberately: a full brass border where the callout has a brass
 * hairline, and the sunken ground so it reads as inset into the page rather than floating
 * on it.
 */
.ftb-sc__move {
	margin: var(--space-8) 0;
	padding: var(--space-6) var(--space-5);
	background: var(--ink-sunken);
	border: 1px solid var(--brass-deep);
	border-left: 3px solid var(--brass);
	border-radius: var(--radius-md);
}

/* Brass, and a step up in size from the other mono labels — this one is announcing the
 * most useful sentence in the report, not labelling a field. */
.ftb-sc__move-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-small);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--brass-on-ink);
	margin: 0 0 var(--space-4) !important;
}

/* Their own answer, quoted back. Secondary weight: it is the premise, not the instruction. */
.ftb-sc__move-because {
	color: var(--ink-text-secondary) !important;
	margin-bottom: var(--space-2) !important;
}

/*
 * The instruction. Set ABOVE body size, because it is the one paragraph in the report that
 * must not be skimmed past — at body size it was indistinguishable from the numbered steps
 * it is supposed to sharpen.
 */
.ftb-sc__move-do {
	font-size: var(--font-size-h4);
	line-height: 1.5;
	color: var(--ink-text) !important;
	margin-bottom: var(--space-5) !important;
}

/*
 * The tool. A mono label and a name, never a logo — see the note in results.php. The label
 * is a separate span so it can keep mono/brass while the name stays in the body face at
 * body size: the name is the thing to remember, so it must not be shrunk into a caption.
 */
.ftb-sc__move-tool {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-2) !important;
}

.ftb-sc__move-tool-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .14em;
	color: var(--brass-deep);
	border: 1px solid var(--brass-hairline);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	flex: none;
}

.ftb-sc__move-tool-name {
	font-weight: var(--font-weight-medium);
	color: var(--ink-text);
}

.ftb-sc__move-how {
	color: var(--ink-text-secondary) !important;
	margin: 0 !important;
}

.ftb-sc__start-close {
	padding-top: var(--space-4);
	border-top: 1px solid var(--ink-border-hairline);
	color: var(--ink-text) !important;
}

/* ------------------------------------------------------------------ your next step
 *
 * Deliberately quieter than "Start here". That section is the instruction; this one is
 * something to think about once the instruction is done, and giving the two the same weight
 * would blur which one is this week's job.
 */
.ftb-sc__directions {
	list-style: none;
	margin: var(--space-6) 0;
	padding: 0;
}

.ftb-sc__directions li {
	position: relative;
	padding-left: var(--space-6);
	margin-bottom: var(--space-5);
}

/* A brass rule rather than a number: these are not steps and must not read as a sequence. */
.ftb-sc__directions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--brass-deep);
	border-radius: 1px;
}

.ftb-sc__directions h3 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	margin: 0 0 var(--space-2);
	color: var(--ink-text);
}

.ftb-sc__directions p {
	margin: 0;
	color: var(--ink-text-secondary);
}

/* ---------------------------------------------------------------------- the referral
 *
 * Sits inside the CTA, below the waitlist button, separated by a hairline. It is a second
 * ask and must not compete with the first - so no panel, no brass button, just a divider
 * and a ghost control.
 */
.ftb-sc__referral {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--ink-border-hairline);
}

.ftb-sc__referral h3 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	margin: 0 0 var(--space-3);
	color: var(--ink-text);
}

.ftb-sc__referral p {
	color: var(--ink-text-secondary);
}

.ftb-sc__referral-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5) !important;
}

/* The URL in text beside the button: it is what gets copied, and seeing it is what makes
   the button trustworthy. Mono, because it is a literal string rather than prose. */
.ftb-sc__referral-url {
	font-family: var(--font-mono);
	font-size: var(--font-size-small);
	color: var(--ink-text-muted);
}

.ftb-btn.is-copied {
	border-color: var(--brass-on-ink);
	color: var(--brass-on-ink);
}

/* --------------------------------------------------------------------- honestly */

.ftb-sc__section--honestly {
	padding: var(--space-6) var(--space-5);
	background: var(--ink-raised);
	border-radius: var(--radius-md);
}

/* -------------------------------------------------------------------------- CTA */

.ftb-sc__cta {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--ink-border);
}

.ftb-sc__cta h2 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

.ftb-sc__cta p {
	color: var(--ink-text-secondary);
	margin: 0 0 var(--space-4);
}

.ftb-sc__cta-btn { margin-top: var(--space-6); }

.ftb-sc__report-foot {
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--ink-border-hairline);
}

.ftb-sc__report-foot p {
	font-size: var(--font-size-small);
	color: var(--ink-text-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ wider screens */

@media (min-width: 48rem) {
	.ftb-sc__report-title { font-size: var(--font-size-h1); }

	.ftb-sc__section { margin-bottom: var(--space-16); }

	.ftb-sc__chart { padding: var(--space-6); }

	.ftb-sc__callout {
		padding: var(--space-8) var(--space-6);
	}
}

/* ------------------------------------------------------------------------- print
 *
 * The browser's own print path, for someone who hits Ctrl+P instead of waiting for the
 * PDF. Not a replacement for the Dompdf build — that one is the artifact they keep —
 * but a dead-looking print is worse than no print.
 */

@media print {
	.ftb-sc {
		max-width: none;
		padding: 0;
		color: #1B1A17;
	}

	.ftb-sc__section,
	.ftb-sc__callout,
	.ftb-sc__chart {
		break-inside: avoid;
	}

	.ftb-sc__cta { break-before: auto; }
}


/* =================================================== THE REPORT IS ON PAPER
 *
 * ⚠️ Everything above styles the QUESTIONNAIRE, which stays on ink. The report gets the
 * paper ground, and this block re-points every token the report uses.
 *
 * Why: the report is the longest continuous reading in the whole funnel, for a reader who
 * is 45–60 and may be on a phone in bad light, and it becomes a PDF they keep. The system
 * says legibility beats elegance. A dark eight-page PDF is a wall of toner.
 *
 * ⚠️ This cannot be done by switching page template. templates/page-light.php renders ACF
 * sections and never calls the_content(), so the shortcode would silently vanish — that is
 * why the page uses the default dark template and the report repaints itself here.
 *
 * The charts do NOT read these: their colours are baked in as literals because Dompdf
 * cannot resolve custom properties. results.php passes palette_paper() instead.
 */

.ftb-sc--paper {
	background: var(--paper-base);
	color: var(--paper-text);
	/* The page ground is ink, so the report needs its own full-bleed surface. */
	box-shadow: 0 0 0 100vmax var(--paper-base);
	clip-path: inset(0 -100vmax);
}

.ftb-sc--paper .ftb-sc__eyebrow { color: var(--brass); }
.ftb-sc--paper .ftb-sc__report-title { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__report-date { color: var(--paper-text-muted); }
.ftb-sc--paper .ftb-sc__report-head { border-bottom-color: var(--paper-border-hairline); }

.ftb-sc--paper .ftb-sc__section h2,
.ftb-sc--paper .ftb-sc__cta h2 { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__section p { color: var(--paper-text-secondary); }
.ftb-sc--paper .ftb-sc__lede-line { color: var(--paper-text) !important; }
.ftb-sc--paper .ftb-sc__chart-intro { color: var(--paper-text-muted) !important; }
.ftb-sc--paper .ftb-sc__constraint-name { color: var(--brass) !important; }
.ftb-sc--paper .ftb-sc__weeks { color: var(--paper-text-muted); }

.ftb-sc--paper .ftb-sc__chart {
	background: var(--paper-raised);
	border-color: var(--paper-border-hairline);
}
.ftb-sc--paper .ftb-sc__chart figcaption { color: var(--paper-text-muted); }

.ftb-sc--paper .ftb-sc__pull { border-left-color: var(--brass); }
.ftb-sc--paper .ftb-sc__pull p { color: var(--paper-text) !important; }

/* ------------------------------------------------- the callout INVERTS the ground
 *
 * ⭐ Claude Design's rework, 2026-09-28. On the paper report the callout is an INK block;
 * on an ink report it would be a paper block. The inversion is the whole mechanism.
 *
 * The first version tinted the callout with --paper-panel, one step off the page colour,
 * and Thomas's response did not stand out at all — it read as a slightly different
 * paragraph rather than as a different person speaking. A callout that carries someone's
 * face and their own words has to be a different OBJECT on the page, not a shade.
 *
 * ⚠️ Colours are literal here rather than tokens because they are inverted relative to
 * the surface: --ink-text on a --paper page is not something the token names can express
 * without reading backwards at every call site.
 */
.ftb-sc--paper .ftb-sc__callout {
	background: #1B1A17;
	border: none;
	/* Soft warm shadow, so the block separates from the page in print as well as screen. */
	box-shadow: 0 2px 24px rgba(27, 26, 23, 0.18);
}

.ftb-sc--paper .ftb-sc__callout-label { color: #C9A45F; }
.ftb-sc--paper .ftb-sc__callout-name { color: #C7C3B8; }
.ftb-sc--paper .ftb-sc__callout-face { border-color: #4B463E; }
.ftb-sc--paper .ftb-sc__callout-body h3 { color: #F6F3EC; }
.ftb-sc--paper .ftb-sc__callout-body p { color: #C7C3B8; }

.ftb-sc--paper .ftb-sc__steps li::before {
	color: var(--brass);
	border-color: var(--paper-border-strong);
}
.ftb-sc--paper .ftb-sc__steps h3 { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__steps p { color: var(--paper-text-secondary); }

/*
 * The first move on paper. The panel ground becomes --paper-panel (the ink version's sunken
 * ground would be a black box on a cream page), and the border goes full brass: on a light
 * ground brass-deep reads as brown, the same reason the step numbers invert here.
 */
.ftb-sc--paper .ftb-sc__move {
	background: var(--paper-panel);
	border-color: var(--brass);
	border-left-color: var(--brass);
}
.ftb-sc--paper .ftb-sc__move-label { color: var(--brass); }
.ftb-sc--paper .ftb-sc__move-because { color: var(--paper-text-secondary) !important; }
.ftb-sc--paper .ftb-sc__move-do { color: var(--paper-text) !important; }
.ftb-sc--paper .ftb-sc__move-tool-label {
	color: var(--brass);
	border-color: var(--paper-border-strong);
}
.ftb-sc--paper .ftb-sc__move-tool-name { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__move-how { color: var(--paper-text-secondary) !important; }
.ftb-sc--paper .ftb-sc__start-close {
	color: var(--paper-text) !important;
	border-top-color: var(--paper-border-hairline);
}

.ftb-sc--paper .ftb-sc__directions li::before { background: var(--brass); }
.ftb-sc--paper .ftb-sc__directions h3 { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__directions p { color: var(--paper-text-secondary); }

.ftb-sc--paper .ftb-sc__referral { border-top-color: var(--paper-border-hairline); }
.ftb-sc--paper .ftb-sc__referral h3 { color: var(--paper-text); }
.ftb-sc--paper .ftb-sc__referral p { color: var(--paper-text-secondary); }
.ftb-sc--paper .ftb-sc__referral-url { color: var(--paper-text-secondary); }

.ftb-sc--paper .ftb-sc__section--honestly { background: var(--paper-panel); }

.ftb-sc--paper .ftb-sc__cta { border-top-color: var(--paper-border); }
.ftb-sc--paper .ftb-sc__cta p { color: var(--paper-text-secondary); }

.ftb-sc--paper .ftb-sc__report-foot {
	border-top-color: var(--paper-border-hairline);
}
.ftb-sc--paper .ftb-sc__report-foot p { color: var(--paper-text-muted); }

/* The waitlist button on paper: brass fill, ink text. */
.ftb-sc--paper .ftb-btn--primary {
	background: var(--brass);
	border-color: var(--brass);
	color: var(--ink-base);
}

@media print {
	.ftb-sc--paper {
		box-shadow: none;
		clip-path: none;
		background: #FFFFFF;
	}
}

/*
 * ⚠️ The report is WIDER than the questionnaire. 46rem is right for one question on a
 * screen, but the charts are authored at 640–680px and were rendering at roughly half
 * their size inside it — the dial's legend came out at about 8px. Prose still wraps at a
 * readable measure because the text blocks cap themselves below.
 */
.ftb-sc--paper {
	max-width: 58rem;
}

/*
 * ⚠️ Prose runs the FULL width of the report column.
 *
 * A 42rem cap inside a 58rem container left an empty strip down the right of every text
 * block, which reads as a layout fault rather than as a measure. The container itself is
 * the measure: at 58rem with 19px body text a line is roughly 80 characters, which is at
 * the top of the comfortable range but still fine, and the alternative looked broken.
 *
 * If the measure ever needs tightening, narrow the CONTAINER — do not reintroduce a cap
 * that only applies to some children, or the charts and the prose stop sharing an edge.
 */