/*
 * Calculator styling.
 *
 * Every colour, space, and radius comes from tokens.css. Nothing is declared
 * twice, so retheming means editing one file rather than hunting through
 * rules.
 *
 * This file used to derive its palette from currentColor so it would blend
 * into whatever theme surrounded it. That was the right instinct for a
 * component that was a guest on someone else's page, and the wrong one for a
 * brand: the same component had a different contrast ratio on every page it
 * appeared on, and none of them had been measured.
 *
 * What has not changed is the rule that produced that approach. Text colour
 * is never a function of the reader's OS setting. An early version honoured
 * prefers-color-scheme and rendered white writing on a white page, because
 * this component does not own the page background and cannot know it. Colours
 * are now stated outright against a known white canvas, which is a stronger
 * guarantee than inheritance because it does not depend on the surrounding
 * page being sensible.
 *
 * The radio tiles keep real radio inputs. They are styled rather than hidden,
 * because a hidden input is where keyboard and screen-reader support usually
 * goes wrong, and this is the first thing a participant touches.
 */

.te-calculator {
	/*
	 * Every value comes from tokens.css. This component used to derive its
	 * palette from currentColor so it would blend into any theme, which is
	 * exactly what made it invisible as a brand. It now states its colours,
	 * and states them once.
	 */
	--te-accent: var(--te-blue);
	--te-gap: var(--te-space-5);
	--te-border: var(--te-rule);
	--te-border-strong: var(--te-rule-strong);
	--te-solid: var(--te-blue);
	--te-solid-text: var(--te-on-blue);

	max-width: var(--te-measure-wide);
	margin-inline: auto;
	line-height: 1.6;
	color: var(--te-dark);
	font-family: var(--te-font-body);
}

/*
 * The currentColor derivations that used to live here are gone. They made
 * every border and every piece of secondary text a function of whatever the
 * surrounding theme set, so the same component had a different contrast
 * ratio on every page it appeared on. The tokens are measured now.
 */

.te-calculator *,
.te-calculator *::before,
.te-calculator *::after {
	box-sizing: border-box;
}

.te-calculator h2,
.te-calculator h3,
.te-calculator h4 {
	font-family: var(--te-font-heading);
	font-weight: var(--te-weight-heading);
}

.te-calculator h2 {
	margin: 0 0 var(--te-space-4);
	font-size: clamp( 1.5rem, 1.3rem + 1vw, 2rem );
	line-height: 1.2;
}

.te-calculator h2:focus {
	outline: none;
}

.te-calculator h3 {
	margin: var(--te-gap) 0 0.5rem;
	font-size: 1.05rem;
}

.te-calculator fieldset {
	margin: 0 0 var(--te-gap);
	padding: 0;
	border: 0;
}

.te-calculator legend {
	margin: 0 0 0.6rem;
	padding: 0;
	font-weight: 600;
}

/* ---- Choice tiles ---- */

.te-calc-choices {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.te-calc-choices > legend {
	grid-column: 1 / -1;
}

.te-calc-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--te-border);
	border-radius: var(--te-radius);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.te-calc-choice:hover {
	border-color: var(--te-blue);
}

.te-calc-choice input[type="radio"] {
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
	accent-color: var(--te-accent);
}

.te-calc-choice label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	cursor: pointer;
}

/*
 * The whole tile is the target, not just the words or the small circle. The
 * label is stretched over the entire card, so a click anywhere inside it
 * selects — which is what people expect of something that looks like a button.
 */
.te-calc-choice label::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--te-radius);
	cursor: pointer;
}

.te-calc-choice__title {
	font-weight: 600;
}

.te-calc-choice__note {
	color: var(--te-muted);
	font-size: 0.875rem;
}

/*
 * The selected tile is marked in brand blue rather than a darker grey. This
 * is an active state, and a grey ring on a grey ring asks the reader to
 * compare two borders to work out which option they picked. The doubled
 * inset makes the edge read as deliberate weight at any zoom, and the tint
 * stays faint so the tile is marked rather than filled.
 */
.te-calc-choice:has(input:checked) {
	border-color: var(--te-blue);
	background: var(--te-tint);
	box-shadow: inset 0 0 0 1px var(--te-blue);
}

/*
 * Fallback for browsers without :has() — the tint is lost but the native
 * radio still shows the selection, so nothing becomes ambiguous.
 */
.te-calc-choice input:focus-visible {
	outline: var(--te-focus-width) solid var(--te-focus);
	outline-offset: var(--te-focus-offset);
}

/* ---- Questions ---- */

.te-calculator .form-row,
.te-calculator form p {
	margin: 0 0 0.9rem;
}

.te-calculator label {
	display: block;
	margin-bottom: 0.25rem;
}

.te-calc-choice label {
	display: flex;
	margin-bottom: 0;
}

.te-calculator input[type="text"],
.te-calculator input[type="number"] {
	width: 100%;
	max-width: 18rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--te-border);
	border-radius: 8px;
	font: inherit;
}

.te-calculator input[type="text"]:focus-visible,
.te-calculator input[type="number"]:focus-visible {
	outline: var(--te-focus-width) solid var(--te-focus);
	outline-offset: var(--te-focus-offset);
}

.te-calculator .description {
	display: block;
	margin-top: 0.25rem;
	color: var(--te-muted);
	font-size: 0.875rem;
}

.te-calculator button {
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--te-border-strong);
	border-radius: var(--te-radius);
	background: transparent;
	/*
	 * The theme styles its own buttons as light text on a coloured fill.
	 * Overriding the background without the colour left white letters on a
	 * transparent background — an invisible Back button.
	 */
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.te-calculator button:hover {
	background: var(--te-tint);
}

.te-calculator button:focus-visible {
	outline: var(--te-focus-width) solid var(--te-focus);
	outline-offset: var(--te-focus-offset);
}

/*
 * The action that moves you forward is filled and separated from the field
 * above it. An outlined button sitting flush under help text reads as part of
 * the text, and people look for a next step and do not find one.
 */
/*
 * White on the brand blue measures 3.83:1, which clears AA as large text
 * and not as normal text. The size below is deliberate rather than
 * inherited: at 1.0625rem bold it qualifies, and shrinking it would quietly
 * drop the primary action out of compliance.
 */
.te-calculator .te-calc-primary {
	display: inline-block;
	margin-top: var(--te-space-2);
	padding: 0.75rem 1.75rem;
	border-color: transparent;
	background: var(--te-solid);
	color: var(--te-solid-text);
	font-size: 1.0625rem;
	font-weight: 700;
}

.te-calculator .te-calc-primary:hover {
	background: var(--te-blue-hover);
}

.te-calc-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--te-gap);
	flex-wrap: wrap;
}

/* Back and Skip sit left; the action that moves you forward sits right. */
.te-calc-nav .te-calc-secondary {
	margin-right: auto;
}

.te-report__footer {
	color: var(--te-muted);
}

.te-report__footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* A question and its answers are separate things, and read as separate. */
.te-calculator .form-row > label,
.te-calc-choices > legend {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.te-calculator .form-row > input {
	display: block;
}

@media print {
	.te-calculator button,
	.te-report__footer,
	.te-calc-result__keep {
		display: none;
	}
}

.te-calc-slider input[type="range"] {
	width: 100%;
	max-width: 22rem;
	accent-color: var(--te-accent);
}

.te-calc-slider__value {
	display: inline-block;
	min-width: 3.5rem;
	margin-left: 0.6rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---- Result ---- */

.te-calc-result {
	margin: 0 0 var(--te-gap);
	padding: 1.25rem;
	border: 1px solid var(--te-border);
	border-radius: var(--te-radius);
}

.te-calc-result dl {
	display: grid;
	gap: 0.1rem 1rem;
	grid-template-columns: minmax(10rem, auto) 1fr;
	margin: 0 0 var(--te-gap);
}

.te-calc-result dt {
	color: var(--te-muted);
	padding: 0.35rem 0;
}

.te-calc-result dd {
	margin: 0;
	padding: 0.35rem 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The headline number carries the weight; the rest is supporting detail. */
.te-calc-result dd:first-of-type {
	font-size: 1.5rem;
	line-height: 1.2;
}

.te-calc-result__test {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(150, 100, 0, 0.35);
	border-radius: 8px;
	background: rgba(255, 190, 60, 0.12);
	font-size: 0.875rem;
	font-weight: 600;
}

.te-calc-result__areas {
	margin: 0 0 var(--te-gap);
	padding: 0;
	list-style: none;
}

.te-calc-result__areas li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--te-border);
	font-variant-numeric: tabular-nums;
}

.te-calc-result__areas li:last-child {
	border-bottom: 0;
}

.te-calc-result__confidence,
.te-calc-result__benchmark,
.te-calc-result__limitation,
.te-calc-result__keep {
	color: var(--te-muted);
	font-size: 0.9375rem;
	max-width: var(--te-measure);
}

.te-calc-result__report,
.te-calc-result__next {
	margin: 0.75rem 0 0;
	font-weight: 600;
}

.te-calc-result__next a,
.te-calc-result__report a {
	text-underline-offset: 3px;
}

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

.te-calc-report > section {
	margin-top: var(--te-section);
	padding-top: var(--te-space-6);
	border-top: 1px solid var(--te-rule);
}

.te-report__headline {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

/*
 * The report is read, not scanned. Capping the measure keeps line length
 * comfortable on a wide screen instead of letting paragraphs run the full
 * width of the container.
 */
.te-calc-report > p,
.te-calc-report section > p,
.te-calc-report ul {
	max-width: var(--te-measure);
}

.te-calc-report h3 {
	margin: 0 0 0.5rem;
}

.te-calc-report h4 {
	margin: 1rem 0 0.35rem;
	font-size: 0.95rem;
}

.te-calc-report ul {
	margin: 0 0 0.5rem;
	padding-left: 1.15rem;
}

.te-calc-report li {
	margin-bottom: 0.3rem;
}

.te-report__area {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--te-border);
}

.te-report__area:last-child {
	border-bottom: 0;
}

.te-report__area-head {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.te-report__area-note,
.te-report__confidence,
.te-report__closing {
	margin: 0.2rem 0 0;
	color: var(--te-muted);
	font-size: 0.9rem;
}

.te-report__standing {
	font-weight: 600;
}

.te-report__cta-line {
	font-weight: 600;
	font-size: 1.05rem;
}

/* The offset invitation is the one thing this page is asking for. */
/*
 * The offer was a tinted, rounded panel sitting inside a page of plain
 * sections, which made the one place asking for money look like an advert
 * dropped into a report. It is now the same open section as everything
 * else, marked by a blue rule and its own space rather than by a box.
 * Emphasis by weight, not by decoration.
 */
.te-calc-report > section.te-report__offset {
	margin-top: var(--te-section);
	padding-top: var(--te-space-6);
	border-top: 2px solid var(--te-blue);
}

a.te-calc-primary {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	border-radius: var(--te-radius);
	background: var(--te-solid);
	color: var(--te-solid-text);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

a.te-calc-primary:hover,
a.te-calc-primary:focus {
	background: var(--te-blue-hover);
	color: var(--te-solid-text);
}

.te-report__secondary {
	margin-top: 0.75rem;
	color: var(--te-muted);
	font-size: 0.9rem;
}

.te-report__coverage,
.te-report__next {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
}

/* ---- Status and errors ---- */

.te-calc-errors {
	margin: 0 0 var(--te-gap);
	padding: 0.75rem 0.95rem;
	border: 1px solid rgba(160, 0, 0, 0.35);
	border-radius: 8px;
	background: rgba(200, 0, 0, 0.06);
}

.te-calculator [role="status"]:empty {
	display: none;
}

.te-calculator--closed {
	color: var(--te-muted);
}

/*
 * The filled button carries the brand blue with white text at a size that
 * clears the large-text contrast threshold. It does not follow
 * prefers-color-scheme: that is a property of the reader's OS, not of this
 * page, and guessing it is what once put white text on a white background.
 */

/*
 * Methodology.
 *
 * An evidence surface. It is read by somebody deciding whether to believe the
 * number they were just given, so it is deliberately plain: no cards, no
 * icons, no colour except where colour carries meaning. Structure comes from
 * space and from one hairline rule per section.
 *
 * The factor table is the point of the page. It is the only place a reader can
 * see where each figure came from, so it gets room to breathe and stays
 * legible on a phone rather than being squeezed into the column.
 */

.te-methodology {
	max-width: var(--te-measure-wide);
	margin-inline: auto;
	color: var(--te-dark);
	font-family: var(--te-font-body);
	line-height: 1.6;
}

.te-methodology-version {
	margin: 0 0 var(--te-space-6);
	color: var(--te-muted);
	font-size: 0.9375rem;
}

.te-methodology-intro {
	max-width: var(--te-measure);
	margin: 0 0 var(--te-space-6);
	font-size: 1.125rem;
}

.te-methodology-section {
	margin-top: var(--te-section);
	padding-top: var(--te-space-6);
	border-top: 1px solid var(--te-rule);
}

.te-methodology-section h2 {
	margin: 0 0 var(--te-space-4);
	font-family: var(--te-font-heading);
	font-weight: var(--te-weight-heading);
	font-size: clamp( 1.25rem, 1.15rem + 0.5vw, 1.5rem );
	line-height: 1.25;
}

.te-methodology-section p {
	max-width: var(--te-measure);
	margin: 0 0 var(--te-space-4);
}

/*
 * The table scrolls inside its own container rather than forcing the page to
 * scroll sideways. A reader on a phone can still reach the source column,
 * which is the column they came for.
 */
.te-methodology-table {
	margin-top: var(--te-space-6);
	overflow-x: auto;
}

.te-methodology-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.te-methodology-table caption {
	margin-bottom: var(--te-space-3);
	color: var(--te-muted);
	font-size: 0.9375rem;
	text-align: left;
}

.te-methodology-table th,
.te-methodology-table td {
	padding: var(--te-space-3) var(--te-space-4) var(--te-space-3) 0;
	border-bottom: 1px solid var(--te-rule);
	text-align: left;
	vertical-align: top;
}

.te-methodology-table th {
	font-family: var(--te-font-heading);
	font-weight: var(--te-weight-heading);
	white-space: nowrap;
}

.te-methodology-table td:first-child {
	font-variant-numeric: tabular-nums;
}

.te-methodology-table a {
	color: var(--te-link);
}

.te-methodology-table a:hover {
	color: var(--te-link-hover);
}

.te-methodology-table a:focus-visible,
.te-methodology a:focus-visible {
	outline: var(--te-focus-width) solid var(--te-focus);
	outline-offset: var(--te-focus-offset);
}

/*
 * Programme totals.
 *
 * Large, plain figures on white. No panels, no icons, no illustration: the
 * figures are the content, and decorating a number is how a number stops
 * looking like a fact.
 */

.te-impact {
	max-width: var(--te-measure-wide);
	margin-inline: auto;
	color: var(--te-dark);
	font-family: var(--te-font-body);
}

.te-impact-pending {
	max-width: var(--te-measure);
	color: var(--te-muted);
	font-size: 1.0625rem;
}

.te-impact-figures {
	display: flex;
	flex-wrap: wrap;
	gap: var(--te-space-7);
	margin: 0;
}

.te-impact-figure dt {
	order: 2;
	margin-top: var(--te-space-2);
	color: var(--te-muted);
	font-size: 0.9375rem;
}

/*
 * The number is read before its label, so it comes first visually while the
 * markup keeps the term before its definition. Order, not source order.
 */
.te-impact-figure {
	display: flex;
	flex-direction: column;
}

.te-impact-figure dd {
	order: 1;
	margin: 0;
	color: var(--te-blue);
	font-family: var(--te-font-heading);
	font-weight: var(--te-weight-heading);
	font-size: clamp( 2.25rem, 1.8rem + 2vw, 3.25rem );
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 40rem ) {

	.te-impact-figures {
		gap: var(--te-space-6);
	}
}