/*
 * Estimate rail, Review (ranked bars + itemized ledger), plan card body,
 * audience layout, next-steps actions and footer slots.
 * Colours come from tokens in styles.css only; the shared components (.card, .btn, .tag, .field, .input,
 * .check, .empty, .notice) are styled there, so everything here is scoped under its own block class.
 *
 * The rail is the page's one bold object: the Peddie P as a navy tile (24px corner, like the mark) with the
 * total struck in Besley Black in old gold. Everything under it is quiet paper: a worked sum on dotted
 * leaders, notes and actions. No shadows, no gradients, no pills; hierarchy is frame, rule and radius.
 * Money columns are Public Sans with tabular lining figures (.money); only the standalone totals are Besley.
 */

/* ------------------------------------------------------------------ rail: the tile */

.estimate__card {
	display: grid;
	gap: var(--sp-4);
}

.estimate__tile {
	/* The total is sized from the tile's own width (cqi), so a long figure still fits at 320px. */
	container-type: inline-size;
	--focus: var(--gold-bright);
	padding: 28px;
	border: 1.5px solid var(--tile-edge);
	border-radius: var(--r-tile);
	background: var(--tile);
	color: var(--on-navy);
}

.estimate__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}

.estimate__title {
	margin: 0;
	color: var(--on-navy);
	font: 700 var(--fs-card) / 26px var(--font-display);
}

.estimate__title:focus-visible {
	outline-offset: 4px;
	border-radius: var(--r-tag);
}

.estimate__tile .count-pill {
	color: var(--on-navy-2);
}

/* The audience line is only for the printout. */
.estimate__audience {
	display: none;
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--on-navy-2);
}

.estimate__label {
	margin: 14px 0 0;
	color: var(--on-navy-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Besley 900 in the mark's gold, proportional lining figures (its tabular figures are broken). 58px in the
   380px rail; --chars (set from the figure's length in js/ui/summary.js) shrinks it for a ten-character total. */
.estimate__total {
	margin: 0 0 4px;
	color: var(--tile-gold);
	font: 900 44px / 1.05 var(--font-display);
	font-size: clamp(30px, min(17.2cqi, calc(100cqi / (var(--chars, 9) * 0.62))), 58px);
	font-variant-numeric: lining-nums proportional-nums;
	letter-spacing: -0.01em;
}

.estimate__total.is-empty {
	color: var(--on-navy-2);
}

.estimate__unpriced {
	margin: 0 0 4px;
	color: var(--on-navy);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-small);
}

.estimate__meta {
	display: grid;
	margin: 0;
	color: var(--on-navy-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* Split bar: how the total divides between the three areas, in the area inks. 2px gaps, 4px minimum segment. */
.stackbar {
	display: flex;
	gap: 2px;
	height: 12px;
	margin: 16px 0 14px;
}

.stackbar.is-empty {
	border-radius: 2px;
	background: var(--navy-chip);
}

.stackbar__seg {
	flex: 0 1 auto;
	min-width: 4px;
	height: 100%;
	border-radius: 2px;
}

/* Area rows: swatch (aligned with the first line), name, amount, then the meta line. No leaders on the tile. */
.kpis {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kpi__link {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr) auto;
	grid-template-areas:
		"swatch label value"
		". meta meta";
	column-gap: 10px;
	align-items: baseline;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.kpi__link:hover .kpi__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stackbar__seg--textbooks,
.kpi--textbooks .kpi__swatch {
	background: var(--on-navy);
}

.stackbar__seg--activities,
.kpi--activities .kpi__swatch {
	background: var(--tile-gold);
}

.stackbar__seg--other,
.kpi--other .kpi__swatch {
	background: var(--navy-screen);
}

.kpi__swatch {
	grid-area: swatch;
	align-self: start;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	border-radius: 2px;
}

.kpi__label {
	grid-area: label;
	min-width: 0;
	color: var(--on-navy);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
}

.kpi__value {
	grid-area: value;
	color: var(--on-navy);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
	text-align: right;
}

.kpi__meta {
	grid-area: meta;
	color: var(--on-navy-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* ------------------------------------------------------------------ rail: the worked sum, notes, actions */

.estimate__body {
	display: grid;
	gap: var(--sp-3);
}

.estimate__sum {
	display: grid;
	gap: 4px;
	margin-top: 4px;
}

/*
 * A worked sum: each label runs to its amount on a dotted leader (dt::after, decorative), and Left to plan for
 * sits under a 1.5px rule with an accountant's double rule beneath the figure. Used by the rail and the plan card.
 */
.sum {
	display: grid;
	gap: 4px;
	margin: 0;
}

.sum__row {
	display: flex;
	align-items: last baseline;
	gap: 10px;
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.sum__row dt {
	display: flex;
	flex: 1 1 auto;
	align-items: last baseline;
	gap: 10px;
	min-width: 0;
	color: var(--text);
}

.sum__row dt::after {
	content: "";
	position: relative;
	top: -0.3em;
	flex: 1 1 auto;
	min-width: 16px;
	border-bottom: 2px dotted var(--border-strong);
}

.sum__row dd {
	flex: none;
	margin: 0;
	color: var(--ink);
	font-weight: 500;
	text-align: right;
}

.sum__total {
	margin-top: 6px;
	margin-bottom: 10px;
	padding-top: 10px;
	border-top: 1.5px solid var(--ink);
	font-size: 1.125rem;
	line-height: 26px;
}

.sum__total dt,
.sum__total dd {
	color: var(--ink);
	font-weight: 700;
}

.sum__total dd {
	position: relative;
}

/* 2px line, 3px gap, 2px line: under the figure only. */
.sum__total dd::after {
	content: "";
	position: absolute;
	top: calc(100% + 3px);
	right: 0;
	left: 0;
	height: 7px;
	border-block: 2px solid var(--ink);
}

/* Neutral "covered" state: a sentence, never a warning colour. */
.sum__covered {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 0;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
}

.sum__covered[hidden] {
	display: none;
}

.sum__covered .icon {
	color: var(--primary-ink);
}

/* Before a budget is entered: one quiet link, with a 44px hit area. */
.plan-cta {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: 44px;
	color: var(--ink);
	font-weight: 600;
}

.plan-mini {
	display: grid;
	gap: 4px;
}

.estimate__notes {
	display: grid;
	gap: var(--sp-2);
}

.estimate__notes:empty {
	display: none;
}

.estimate__notes .note {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.estimate__notes .note .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--text-2);
}

.estimate__notes .note a {
	position: relative;
	color: var(--ink);
}

/* A 20px text link keeps a 44px hit area. */
.estimate__notes .note a::before {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

/* Sits flush with the plan card's content edge. The offset is the 4px inline padding that
   .btn--quiet.btn--small takes in styles.css (no token) plus 1px of border: .btn declares 1.5px
   (transparent, drawn as 1px) and forced colors draws a 1px frame, so the text lands on the edge either way. */
.plan #plan-clear {
	margin-inline-start: -5px;
}

.estimate__actions {
	display: grid;
	gap: var(--sp-2);
}

.estimate__actions-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2);
}

.estimate__actions-row .btn {
	min-width: 0;
	padding-inline: var(--sp-3);
	white-space: nowrap;
}

.estimate__helper {
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.estimate__privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: 4px 0 0;
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.estimate__privacy .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.share-fallback {
	display: grid;
	gap: var(--sp-2);
}

.share-fallback label {
	color: var(--ink);
	font-size: var(--fs-small);
	font-weight: 600;
}

.estimate__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}

.estimate__review-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.estimate__foot .btn {
	padding-inline-end: 0;
}

.estimate__print-note {
	display: none;
}

/* Below the docked layout the rail follows the builder: roomier, same single column of area rows. */
@media (max-width: 599.98px) {
	.estimate__tile {
		padding: 22px 20px 20px;
		border-radius: 22px;
	}
}

@media (max-width: 359.98px) {
	.estimate__actions-row {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ review: where it goes */

.review__body > .card {
	min-width: 0;
}

.ranked {
	display: grid;
	gap: 20px;
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}

.ranked__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"text value"
		"bar bar";
	align-items: baseline;
	gap: 6px var(--sp-4);
}

.ranked__text {
	grid-area: text;
	display: grid;
	min-width: 0;
}

.ranked__name {
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
	overflow-wrap: anywhere;
}

.ranked__meta {
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.ranked__value {
	grid-area: value;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-body);
}

/* No track: length alone encodes the share, on paper, over a 1px Rule baseline. A full-length bar in a cool
   area ink would otherwise read as an empty track beside a small gold one. */
.ranked__bar {
	grid-area: bar;
	display: block;
	height: 10px;
	border-radius: 2px;
	background: linear-gradient(var(--border), var(--border)) bottom / 100% 1px no-repeat;
	overflow: hidden;
}

.ranked__fill {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: 2px;
	background: var(--area-textbooks);
}

.ranked__fill.is-zero {
	min-width: 0;
}

.ranked__row--activities .ranked__fill {
	background: var(--area-activities);
}

.ranked__row--other .ranked__fill {
	background: var(--area-other);
}

.ranked__row--rest {
	grid-template-areas: "text value";
	padding-top: var(--sp-3);
	border-top: 1px solid var(--border);
}

.ranked__row--rest .ranked__name {
	color: var(--text-2);
	font-weight: 500;
}

.ranked__empty {
	list-style: none;
}

/* ------------------------------------------------------------------ review: itemized ledger */

.ledger {
	margin-top: var(--sp-5);
}

.ledger__area {
	--area-lh: 26px;
}

.ledger__area + .ledger__area {
	margin-top: var(--sp-8);
}

/* Area head: swatch, name in Besley 700 21, the area total in Public Sans 700, all over a 2px navy rule. */
.ledger__area-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--frame, var(--ink));
	color: var(--ink);
	font: 700 var(--fs-card) / var(--area-lh) var(--font-display);
}

.ledger__swatch {
	flex: none;
	align-self: flex-start;
	width: 12px;
	height: 12px;
	margin-top: calc((var(--area-lh) - 12px) / 2);
	border-radius: 2px;
	background: var(--area-textbooks);
}

.ledger__area--activities .ledger__swatch {
	background: var(--area-activities);
}

.ledger__area--other .ledger__swatch {
	background: var(--area-other);
}

.ledger__area-name {
	min-width: 0;
}

/* The area total shares the price column's right edge (the remove button's 44px and the 8px gap sit past it). */
.ledger__area-total {
	margin-left: auto;
	font: 700 var(--fs-body) / var(--lh-body) var(--font-ui);
}

@media screen {
	.ledger__area-total {
		margin-right: calc(44px + var(--sp-2));
	}

	/* Where it goes ends on the ledger's price column, so the two money columns share one right edge. */
	.ranked {
		margin-right: calc(44px + var(--sp-2));
	}
}

.ledger__area-toggle,
.ledger__area-count,
.ledger__area-title > .icon {
	display: none;
}

/* Group head: the course and teacher, or the activity, in Public Sans 600. The teacher follows as plain meta. */
.ledger__group {
	padding-top: var(--sp-5);
}

.ledger__group-title {
	margin: 0;
	color: var(--ink);
	font: 600 var(--fs-body) / var(--lh-body) var(--font-ui);
}

.ledger__group-sub {
	margin-left: var(--sp-2);
	color: var(--text-2);
	font-size: var(--fs-small);
	font-weight: 400;
}

.ledger__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Item row: the label runs to its price on a dotted leader; the remove button sits on the first line. */
.line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	column-gap: var(--sp-2);
	align-items: start;
	border-bottom: 1px solid var(--border);
}

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

.line__main {
	min-width: 0;
	padding-block: 10px;
}

.line__row {
	display: flex;
	align-items: last baseline;
	min-width: 0;
}

.line__label {
	min-width: 0;
	color: var(--ink);
	font: 500 var(--fs-body) / var(--lh-body) var(--font-ui);
	overflow-wrap: anywhere;
}

/* Book titles are italic, as in a reading list; gear, trips and your own costs stay roman. */
.line__label--book {
	font: italic 500 1.125rem / var(--lh-body) var(--font-display);
}

.line__lead {
	position: relative;
	top: -0.3em;
	flex: 1 1 auto;
	min-width: 20px;
	margin-inline: 10px;
	border-bottom: 2px dotted var(--border-strong);
}

.line__price {
	flex: none;
	color: var(--ink);
	font: 600 var(--fs-body) / var(--lh-body) var(--font-ui);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.line__price--muted {
	color: var(--text-2);
	font-size: var(--fs-small);
	font-weight: 500;
}

/* Meta pieces (author, term words) and tags are separate spans with space between them, never joined by a symbol. */
.line__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: 4px;
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	overflow-wrap: anywhere;
}

.line__part--author {
	color: var(--ink);
	font-weight: 500;
}

.line__sub .tag {
	max-width: 100%;
	white-space: normal;
}

.line__remove {
	justify-self: end;
}

/* The one response motion: a newly added row's gold wash fades out. No slide, no scale. */
.line.is-entering {
	animation: line-wash 600ms var(--ease-out);
}

@keyframes line-wash {
	from {
		background: var(--selected);
	}

	to {
		background: transparent;
	}
}

.ledger__subtotal {
	display: flex;
	justify-content: space-between;
	max-width: none;
	gap: var(--sp-3);
	margin: 0;
	padding: 12px 0 4px;
	border-top: 1px solid var(--border);
	color: var(--text-2);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

@media screen {
	.ledger__subtotal {
		padding-right: calc(44px + var(--sp-2));
	}
}

.ledger__subtotal span:last-child {
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
}

.ledger-card {
	margin-top: var(--sp-6);
}

.ranked-card .empty,
.ledger-card .empty {
	margin: 0;
}

/* Ledger areas fold to a header and subtotal on phones; from 720px and in print every area is open. */
@media screen and (max-width: 719.98px) {
	.ledger__area {
		--area-lh: 24px;
	}

	.ledger__area-head {
		position: relative;
	}

	.ledger__area-title {
		min-height: 44px;
		font-size: 1.125rem;
	}

	/* A folded area still says how much is inside it: the count sits under the name, like a meta line. */
	.ledger__area-name {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-block: var(--sp-1);
	}

	.ledger__area-count {
		display: block;
		color: var(--text-2);
		font: 500 var(--fs-meta) / 1.3 var(--font-ui);
		white-space: nowrap;
	}

	/* The chevron leads the head, before the swatch, so the area total sits flush right like every other figure. */
	.ledger__area-title > .icon {
		display: block;
		order: -1;
		align-self: flex-start;
		flex: none;
		width: 20px;
		height: 20px;
		margin-top: calc((var(--area-lh) - 20px) / 2 + var(--sp-1));
	}

	.ledger__swatch {
		margin-top: calc((var(--area-lh) - 12px) / 2 + var(--sp-1));
	}

	.ledger__area.is-open .ledger__area-title > .icon {
		transform: rotate(180deg);
	}

	.ledger__area-total {
		margin-right: 0;
	}

	.ranked {
		margin-right: 0;
	}

	.ledger__area-toggle {
		display: block;
		position: absolute;
		/* Reach over the heading's 2px bottom rule so the target is the full 44px. */
		inset: 0 0 -2px;
		width: 100%;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.ledger__area:not(.is-open) .ledger__groups {
		display: none;
	}

	.ledger__area.is-open .ledger__groups {
		padding-top: var(--sp-1);
	}
}

/* ------------------------------------------------------------------ plan card body */

.plan {
	display: grid;
	gap: var(--sp-5);
	justify-items: start;
}

.plan > * {
	max-width: 100%;
}

.plan .field {
	width: 100%;
	max-width: 24rem;
}

.plan__result {
	display: grid;
	gap: var(--sp-3);
	width: 100%;
	max-width: 24rem;
}

/* The result is the same worked sum as the rail. */
.plan__rows {
	margin: 0;
}

/* Neutral by design: the covered share fills in gold on a Screen track, whatever the amounts are. */
.meter {
	height: 8px;
	border-radius: 2px;
	background: var(--support-track);
	overflow: hidden;
}

.meter__fill {
	display: block;
	height: 100%;
	background: var(--support);
}

.plan__status {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: 0;
	color: var(--text);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.plan__status .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--primary-ink);
}

/* ------------------------------------------------------------------ audience, next steps, footer */

.audience {
	min-width: 0;
	margin: 0;
	max-width: 100%;
}

.hero__audience {
	min-width: 0;
}

#aid-actions:empty {
	display: none;
}

#aid-actions .btn {
	max-width: 100%;
}

.site-footer__source,
.site-footer__feedback {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-meta);
}

.site-footer__source:empty {
	display: none;
}

@media (max-width: 719.98px) {
	#aid-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ forced colors */

@media (forced-colors: active) {
	/* The tile keeps its edge; the area inks become system colours so the three areas still differ. */
	.estimate__tile {
		border: 1px solid CanvasText;
	}

	.stackbar__seg,
	.kpi .kpi__swatch,
	.ledger__area .ledger__swatch {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
		background: CanvasText;
	}

	.stackbar__seg--activities,
	.kpi--activities .kpi__swatch,
	.ledger__area--activities .ledger__swatch {
		background: Highlight;
	}

	.stackbar__seg--other,
	.kpi--other .kpi__swatch,
	.ledger__area--other .ledger__swatch {
		background: GrayText;
	}

	.ranked__bar,
	.meter {
		border: 1px solid CanvasText;
	}

	/* The reading cards sit on paper; only the plan card is framed. */
	.ranked-card,
	.ledger-card {
		border: 0;
	}

	.ranked__fill,
	.meter__fill {
		forced-color-adjust: none;
		background: CanvasText;
	}

	.ranked__row--activities .ranked__fill {
		background: Highlight;
	}

	.ranked__row--other .ranked__fill {
		background: GrayText;
	}

	.sum__row dt::after,
	.line__lead {
		border-bottom-color: CanvasText;
	}

	.sum__total,
	.sum__total dd::after,
	.ledger__area-title {
		border-color: CanvasText;
	}
}

/* ------------------------------------------------------------------ print */

@media print {
	#estimate {
		position: static;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		background: #fff;
	}

	.estimate__card {
		display: block;
		padding: 0 0 4mm;
	}

	.estimate__card > * + * {
		margin-top: 3mm;
	}

	/* The tile becomes a navy keyline box with a navy total: backgrounds may not print. */
	.estimate__tile {
		padding: 5mm;
		border: 1.5pt solid var(--ink);
		border-radius: 12px;
		background: #fff;
		color: var(--ink);
		break-inside: avoid;
	}

	.estimate__title {
		color: var(--ink);
		font-size: 14pt;
	}

	.estimate__tile .count-pill,
	.estimate__label,
	.estimate__meta,
	.estimate__unpriced,
	.estimate__audience:not([hidden]) {
		color: var(--text-2);
		font-size: 9.5pt;
		line-height: 1.4;
	}

	.estimate__audience:not([hidden]) {
		display: block;
	}

	.estimate__label {
		margin-top: 3mm;
	}

	.estimate__total {
		margin: 1mm 0 2mm;
		color: var(--ink);
		font-size: 30pt;
	}

	/* Swatches survive without background graphics: each has a border, and Trips & other keeps its hatch. */
	.stackbar {
		height: 4mm;
		margin: 3mm 0;
	}

	.stackbar__seg,
	.kpi__swatch,
	.ledger__swatch {
		border: 1px solid var(--ink);
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.stackbar__seg--textbooks,
	.kpi--textbooks .kpi__swatch {
		background: var(--area-textbooks);
	}

	.stackbar__seg--activities,
	.kpi--activities .kpi__swatch {
		background: var(--area-activities);
	}

	.stackbar__seg--other,
	.kpi--other .kpi__swatch,
	.ledger__area--other .ledger__swatch {
		background: repeating-linear-gradient(135deg, var(--ink) 0 1.25px, transparent 1.25px 4.5px);
	}

	.kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4mm;
	}

	.kpi__link {
		grid-template-columns: 12px minmax(0, 1fr);
		grid-template-areas:
			"swatch label"
			". value"
			". meta";
	}

	.kpi__label,
	.kpi__value {
		color: var(--ink);
		font-size: 10pt;
		line-height: 1.4;
		text-align: left;
	}

	.kpi__meta {
		color: var(--text-2);
		font-size: 9pt;
		line-height: 1.4;
	}

	/* Budget lines print only when Include is ticked. */
	.estimate__plan:not(.is-included),
	.estimate__plan.is-included .plan-cta {
		display: none;
	}

	.estimate__sum {
		margin-top: 0;
	}

	.sum__row {
		font-size: 10pt;
		line-height: 1.5;
	}

	.sum__row dt,
	.sum__row dd {
		color: var(--ink);
	}

	.sum__row dt::after,
	.line__lead {
		border-bottom: 1px dotted var(--ink);
	}

	.sum__total {
		font-size: 11pt;
		line-height: 1.5;
	}

	.estimate__notes .note {
		color: var(--ink);
		font-size: 9pt;
		line-height: 1.4;
	}

	.estimate__notes .note a,
	.estimate__notes .note--link {
		display: none;
	}

	.estimate__actions,
	.estimate__foot,
	.share-fallback,
	.plan-cta,
	.ranked-card,
	.icon-btn,
	.estimate__helper {
		display: none !important;
	}

	.estimate__print-note {
		display: block;
		margin: 0;
		color: var(--ink);
		font-size: 8.5pt;
		line-height: 1.4;
	}

	.review {
		margin-top: 0;
	}

	/* Keep the section heading with the ledger that follows it. */
	.review__body {
		display: block;
		break-before: avoid;
	}

	.ledger-card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #fff;
	}

	.ledger-card .card__title {
		margin-bottom: 2mm;
		font-size: 12pt;
		break-after: avoid;
	}

	.ledger {
		columns: 2;
		column-gap: 8mm;
		margin-top: 0;
	}

	.ledger__area + .ledger__area {
		margin-top: 4mm;
	}

	.ledger__area {
		--area-lh: 1.3;
	}

	.ledger__area-title {
		padding-bottom: 1.5mm;
		border-bottom-width: 1.5pt;
		border-bottom-color: var(--ink);
		font-size: 11pt;
		break-after: avoid;
		break-inside: avoid;
	}

	.ledger__swatch {
		margin-top: 1mm;
	}

	.ledger__area-total {
		margin-right: 0;
		font-size: 10pt;
	}

	/* Each group (a course and its books, or an activity and its gear) stays on one page. */
	.ledger__group {
		padding-top: 2mm;
		break-inside: avoid;
	}

	.ledger__group-title {
		color: var(--ink);
		font-size: 10pt;
		break-after: avoid;
		break-inside: avoid;
	}

	.line {
		grid-template-columns: minmax(0, 1fr);
		border-bottom: 0;
		break-inside: avoid;
	}

	.line__main {
		padding-block: 1mm;
	}

	.line__label,
	.line__price,
	.line__sub,
	.line__part--author,
	.line__price--muted {
		color: var(--ink);
		font-size: 9.5pt;
		line-height: 1.4;
	}

	.line__label--book {
		font-size: 10pt;
	}

	.line__sub {
		margin-top: 0;
	}

	.ledger__subtotal {
		padding: 1mm 0 0;
		border-top: 1px solid var(--ink);
		color: var(--ink);
		font-size: 9.5pt;
	}

	.ledger__subtotal span:last-child {
		font-size: 9.5pt;
	}

	.ledger__area-toggle,
	.ledger__area-title > .icon {
		display: none !important;
	}

	.ledger__groups {
		display: block !important;
	}

	/* Tags print as plain parenthesised words. */
	.tag::before {
		content: "(";
	}

	.tag::after {
		content: ")";
	}

	.tag {
		display: inline;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ink);
		font-size: 9pt;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.line.is-entering {
		animation: none;
	}
}