/**
 * IfCalc calculator widget.
 *
 * Scoped to .ifc-* so it inherits the theme's typography without fighting it.
 * Tokens carry fallbacks, so the widget still looks right embedded in any
 * theme; when the IfCalc theme is active it inherits that theme's palette and
 * therefore its dark mode for free.
 */

.ifc-calc {
	/* Surfaces, lightest to most raised. */
	--ifc-bg:           var(--bg, #ffffff);
	--ifc-surface:      var(--surface, #f6f8f7);
	--ifc-raised:       var(--bg, #ffffff);
	--ifc-border:       var(--line, #e3e8ea);
	--ifc-border-firm:  color-mix(in srgb, var(--line, #e3e8ea) 60%, var(--muted, #6b7783));
	--ifc-text:         var(--ink, #11161b);
	--ifc-muted:        var(--muted, #6b7783);
	--ifc-accent:       var(--accent, #0d6b45);
	--ifc-accent-soft:  var(--accent-bg, #e9f3ee);
	--ifc-on-accent:    var(--on-accent, #ffffff);

	--ifc-radius:    12px;
	--ifc-radius-sm: 9px;

	--ifc-gap:   1.5rem;
	--ifc-ease:  cubic-bezier(.2, .7, .3, 1);
	--ifc-speed: .22s;

	/*
	 * Calculator pages set a 720px measure for prose. That is right for reading
	 * and too narrow for a two-column app, so the widget alone breaks out to a
	 * wider box and re-centres itself inside the narrower parent.
	 */
	--ifc-app: 960px;
	width: min(var(--ifc-app), 100% + 0px);
	margin: 2rem auto;
	color: var(--ifc-text);
}

@media (min-width: 1020px) {
	.ifc-calc {
		width: min(var(--ifc-app), calc(100vw - 3rem));
		margin-inline: calc(50% - min(var(--ifc-app), calc(100vw - 3rem)) / 2);
	}
}

/* ---------------------------------------------------------------------------
   Shell: inputs beside the answer once there is room for both.
--------------------------------------------------------------------------- */

.ifc-calc__cols {
	display: grid;
	/*
	 * minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto and will
	 * refuse to shrink below its content, which let a two-column field grid
	 * inside push the whole panel past a 375px screen.
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ifc-gap);
	align-items: start;
}

.ifc-calc__inputs,
.ifc-calc__out { min-width: 0; }

@media (min-width: 880px) {
	.ifc-calc__cols {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 2rem;
	}

	/* The answer stays in view while the inputs above it are being changed. */
	.ifc-calc__out { position: sticky; top: 5rem; }
}

.ifc-panel__title {
	margin: 0 0 1rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ifc-muted);
}

/* ---------------------------------------------------------------------------
   Inputs
--------------------------------------------------------------------------- */

.ifc-form {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.ifc-field[hidden] { display: none; }

.ifc-field__label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: .4rem;
	hyphens: auto;
	overflow-wrap: break-word;
}

.ifc-field__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ifc-border);
	border-radius: var(--ifc-radius-sm);
	background: var(--ifc-raised);
	transition: border-color var(--ifc-speed) var(--ifc-ease),
	            box-shadow var(--ifc-speed) var(--ifc-ease);
}

.ifc-field__control:hover { border-color: var(--ifc-border-firm); }

.ifc-field__control:focus-within {
	border-color: var(--ifc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifc-accent) 16%, transparent);
}

/* The unit belongs to the number, so it sits inside the same box. */
.ifc-field__affix {
	display: flex;
	align-items: center;
	padding: 0 .75rem;
	font-size: .9rem;
	font-weight: 550;
	color: var(--ifc-muted);
	background: transparent;
	white-space: nowrap;
	user-select: none;
}

.ifc-field__input {
	width: 100%;
	min-width: 0;
	/* 46px: comfortably past the 44px minimum touch target. */
	min-height: 46px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	padding: .55rem .75rem;
	outline: none;
	-moz-appearance: textfield;
}

.ifc-field__input::-webkit-outer-spin-button,
.ifc-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A select carries its own chevron, so it keeps the border itself. */
.ifc-field--select .ifc-field__input {
	border: 1px solid var(--ifc-border);
	border-radius: var(--ifc-radius-sm);
	background: var(--ifc-raised);
	padding: .55rem .75rem;
	cursor: pointer;
	transition: border-color var(--ifc-speed) var(--ifc-ease),
	            box-shadow var(--ifc-speed) var(--ifc-ease);
}

.ifc-field--select .ifc-field__input:hover { border-color: var(--ifc-border-firm); }

.ifc-field--select .ifc-field__input:focus-visible {
	border-color: var(--ifc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifc-accent) 16%, transparent);
}

.ifc-field__help {
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--ifc-muted);
	margin: .4rem 0 0;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Slider, paired with the number rather than replacing it.

   Rendered only where the field declares both a floor and a ceiling, so the
   track always means something. The number input stays the source of truth and
   accepts values the slider's step would skip.
--------------------------------------------------------------------------- */

.ifc-field__slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	margin: .7rem 0 0;
	height: 20px;
	background: transparent;
	cursor: pointer;
}

.ifc-field__slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: var(--ifc-border);
}

.ifc-field__slider::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--ifc-border);
}

.ifc-field__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--ifc-accent);
	border: 2px solid var(--ifc-raised);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	transition: transform var(--ifc-speed) var(--ifc-ease);
}

.ifc-field__slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ifc-accent);
	border: 2px solid var(--ifc-raised);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	transition: transform var(--ifc-speed) var(--ifc-ease);
}

.ifc-field__slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ifc-field__slider:hover::-moz-range-thumb     { transform: scale(1.12); }

.ifc-field__slider:focus-visible {
	outline: 2px solid var(--ifc-accent);
	outline-offset: 4px;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Results

   One figure carries the answer. Everything else is supporting detail and is
   set as a list of rows, not a wall of equal boxes.
--------------------------------------------------------------------------- */

.ifc-out {
	border: 1px solid var(--ifc-border);
	border-radius: var(--ifc-radius);
	background: var(--ifc-surface);
	overflow: hidden;
}

/*
 * Base row first, modifier after.
 *
 * The primary card carries both classes, so with the modifier written first
 * the base rules won on source order: the headline turned into a flex row with
 * its label squeezed beside it, and nowrap sent long answers such as
 * "36 ar, 2 maneder, 13 dage" straight out of the panel.
 */

.ifc-results { display: block; }

.ifc-result {
	display: flex;
	/*
	 * Wrapping, so the notes under a figure get their own line.
	 *
	 * The row was flex with no wrap, which meant flex-basis:100% on the help
	 * text could not move it to a second line - it just squeezed it into a third
	 * column beside the label and the value, and hyphenated the label to make
	 * room. With three items on a row (label, figure, and the reason a figure is
	 * unavailable) that became unreadable.
	 */
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1.4rem;
	border-bottom: 1px solid var(--ifc-border);
}

.ifc-result:last-child { border-bottom: 0; }

.ifc-result__label {
	font-size: .875rem;
	color: var(--ifc-muted);
	hyphens: auto;
	overflow-wrap: break-word;
}

.ifc-result__value {
	font-size: 1.0625rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.ifc-result__help {
	flex-basis: 100%;
	font-size: .8125rem;
	color: var(--ifc-muted);
	margin-top: -.2rem;
}

/*
 * Why a figure is missing, said out loud.
 *
 * A dash on its own reads as a bug. Where the model genuinely cannot produce a
 * number - because the constant behind it is unverified, or because it needs a
 * rate only the reader knows - the row keeps its label, shows the dash dimmed,
 * and carries the reason underneath. That is more use than hiding the row, and
 * far more use than printing a zero that looks like an answer.
 */
.ifc-result__needs {
	flex-basis: 100%;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--ifc-muted);
	margin-top: .15rem;
	padding-left: .65rem;
	border-left: 2px solid color-mix(in srgb, var(--ifc-muted) 35%, transparent);
}

.ifc-result__value.is-unavailable {
	opacity: .45;
	font-variant-numeric: normal;
}

/* The headline answer. */
.ifc-result--primary {
	display: block;
	padding: 1.5rem 1.4rem 1.6rem;
	background: var(--ifc-accent-soft);
	border-bottom: 1px solid color-mix(in srgb, var(--ifc-accent) 18%, transparent);
}

.ifc-result--primary .ifc-result__label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	/* Never break a short all-caps label into "AL-DER". */
	hyphens: none;
	color: color-mix(in srgb, var(--ifc-accent) 72%, var(--ifc-text));
	margin-bottom: .35rem;
}

/*
 * Nineteen calculators answer in words rather than a figure - an age, a
 * verdict, a number of months - so the headline has to be able to wrap. The
 * ceiling is set where the longest of those still reads well on two lines
 * without dwarfing a plain currency answer.
 */
.ifc-result--primary .ifc-result__value {
	display: block;
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	color: var(--ifc-accent);
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * A verdict is a sentence, so it is set closer to reading size and with a
 * little less negative tracking. It stays the dominant thing in the panel
 * without taking three lines at headline size.
 */
.ifc-result--verdict .ifc-result__value {
	font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.75rem);
	line-height: 1.25;
	letter-spacing: -.012em;
	text-wrap: pretty;
}

.ifc-result--primary .ifc-result__help {
	display: block;
	margin-top: .5rem;
	font-size: .875rem;
	color: color-mix(in srgb, var(--ifc-text) 70%, var(--ifc-muted));
}

/*
 * The figure has changed. A brief tint is enough to say so - moving or
 * counting the number would fight the reader who is still typing.
 */
.ifc-result__value.is-updated {
	animation: ifc-flash var(--ifc-speed) var(--ifc-ease);
}

@keyframes ifc-flash {
	from { background: color-mix(in srgb, var(--ifc-accent) 20%, transparent); }
	to   { background: transparent; }
}

/* ---------------------------------------------------------------------------
   Actions
--------------------------------------------------------------------------- */

.ifc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1rem;
}

.ifc-reset,
.ifc-share {
	background: none;
	border: 1px solid var(--ifc-border);
	border-radius: var(--ifc-radius-sm);
	color: var(--ifc-muted);
	cursor: pointer;
	font: inherit;
	font-size: .875rem;
	font-weight: 550;
	min-height: 42px;
	padding: .5rem 1rem;
	transition: border-color var(--ifc-speed) var(--ifc-ease),
	            color var(--ifc-speed) var(--ifc-ease),
	            background-color var(--ifc-speed) var(--ifc-ease);
}

.ifc-reset:hover,
.ifc-share:hover {
	color: var(--ifc-text);
	border-color: var(--ifc-border-firm);
	background: var(--ifc-surface);
}

/*
 * The label swaps to "Link copied" on click, so the button must not resize and
 * shove the row around while the reader is still looking at it.
 */
.ifc-share {
	color: var(--ifc-text);
	flex: 1 1 auto;
	min-width: 12rem;
	text-align: center;
}

.ifc-share:focus-visible,
.ifc-reset:focus-visible {
	outline: 2px solid var(--ifc-accent);
	outline-offset: 2px;
}

/* Carries the same message to screen readers; it needs no visible box. */
.ifc-share__status {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------------------
   Disclosure: the formula, which until now was stored and translated but never
   shown on the page.
--------------------------------------------------------------------------- */

.ifc-disclosure {
	margin-top: 1.25rem;
	border: 1px solid var(--ifc-border);
	border-radius: var(--ifc-radius-sm);
	background: var(--ifc-raised);
}

.ifc-disclosure__summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	border-radius: var(--ifc-radius-sm);
}

.ifc-disclosure__summary::-webkit-details-marker { display: none; }

.ifc-disclosure__summary::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var(--ifc-muted);
	border-bottom: 2px solid var(--ifc-muted);
	transform: rotate(-45deg);
	transition: transform var(--ifc-speed) var(--ifc-ease);
}

.ifc-disclosure[open] .ifc-disclosure__summary::before { transform: rotate(45deg); }

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

.ifc-disclosure__body {
	padding: 0 1rem 1rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ifc-muted);
	overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
	.ifc-calc *,
	.ifc-calc *::before,
	.ifc-calc *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Page furniture -------------------------------------------------------- */

/*
 * The FAQ was already a <details> per question, but styled as bare text: no
 * marker, no hover, no focus ring. A disclosure that gives no sign it opens is
 * one most readers never try. It gets the same treatment as the formula panel
 * inside the calculator, with its own tokens because it sits outside .ifc-calc
 * and cannot inherit that scope.
 */
.ifc-faq {
	--faq-ease: cubic-bezier(.2, .7, .3, 1);
	--faq-line: var(--line, #dfe3e8);
	--faq-muted: var(--muted, #6b7783);
	--faq-accent: var(--accent, #0d6b45);
	margin: 2.5rem 0;
}

/* One bordered list rather than eight separate boxes: eight questions read as
   a list, and a stack of cards would compete with the calculator above. */
.ifc-faq__list {
	border: 1px solid var(--faq-line);
	border-radius: var(--radius, 12px);
	overflow: hidden;
}

.ifc-faq__item {
	border-bottom: 1px solid var(--faq-line);
}

.ifc-faq__item:last-child { border-bottom: 0; }

.ifc-faq__q {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	padding: .95rem 1.15rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	transition: background-color .2s var(--faq-ease);
}

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

.ifc-faq__q:hover { background: var(--surface, #f6f8f7); }

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

/* The chevron leads the question, so the column of markers reads as a list. */
.ifc-faq__q::before {
	content: "";
	flex: none;
	width: .45rem;
	height: .45rem;
	margin-top: .35em;
	border-right: 2px solid var(--faq-muted);
	border-bottom: 2px solid var(--faq-muted);
	transform: rotate(-45deg);
	transition: transform .2s var(--faq-ease);
}

.ifc-faq__item[open] .ifc-faq__q::before { transform: rotate(45deg); }
.ifc-faq__item[open] .ifc-faq__q { color: var(--faq-accent); }

.ifc-faq__a {
	padding: 0 1.15rem 1.1rem 2.35rem;
	color: var(--ink-2, #46525e);
}

.ifc-faq__a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.ifc-faq__q, .ifc-faq__q::before { transition-duration: .01ms; }
}

.ifc-index { list-style: none; margin: 1.5rem 0; padding: 0; }

.ifc-index__item {
	border-bottom: 1px solid var(--line, #dfe3e8);
	padding: 0.75rem 0;
}

.ifc-index__link { font-weight: 600; }

.ifc-index__desc { display: block; font-size: 0.9375rem; opacity: 0.75; }

/*
 * Same compound-word problem as the headings, in the narrowest boxes on the
 * page: form fields bottom out at 220px and the related list is two columns.
 */
.ifc-field__label,
.ifc-field__help,
.ifc-result__label,
.ifc-result__help,
.ifc-related__list a,
.ifc-index__link,
.ifc-faq__q {
	hyphens: auto;
	overflow-wrap: break-word;
}

.ifc-related__list { columns: 2; list-style: none; padding: 0; }

@media (max-width: 480px) {
	.ifc-related__list { columns: 1; }
}

/* Ads ------------------------------------------------------------------- */

.ifc-ad { margin: 2rem 0; text-align: center; }

.ifc-ad__label {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 0.35rem;
}

.ifc-missing {
	/* Amber keeps its warning meaning in both schemes; only the ground moves. */
	background: color-mix(in srgb, #f0a020 12%, var(--bg, #fff4e5));
	border-left: 4px solid #f0a020;
	color: var(--ink, #663c00);
	padding: 0.75rem 1rem;
}

/* ---------------------------------------------------------------------------
   Directory grid. Uses the theme's tokens when the theme is active, and falls
   back to its own values so the shortcode still looks right on any theme.
--------------------------------------------------------------------------- */

.ifc-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr));
	margin: 1.75rem 0;
}

.ifc-card {
	--ifc-ease: cubic-bezier(.2, .7, .3, 1);
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.15rem;
	border: 1px solid var(--line, #e3e8ea);
	border-radius: var(--radius, 12px);
	background: var(--bg, #fff);
	color: var(--ink, #11161b);
	text-decoration: none;
	transition: border-color .22s var(--ifc-ease), transform .22s var(--ifc-ease),
	            box-shadow .22s var(--ifc-ease);
}

.ifc-card:hover,
.ifc-card:focus-visible {
	border-color: color-mix(in srgb, var(--accent, #0d6b45) 45%, var(--line, #e3e8ea));
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg, 0 2px 6px rgba(17,22,27,.06), 0 18px 48px rgba(17,22,27,.10));
}

.ifc-card:focus-visible {
	outline: 2px solid var(--accent, #0d6b45);
	outline-offset: 3px;
}

.ifc-card__title { transition: color .22s var(--ifc-ease); }
.ifc-card:hover .ifc-card__title { color: var(--accent, #0d6b45); }
.ifc-card__cta { transition: transform .22s var(--ifc-ease); }
.ifc-card:hover .ifc-card__cta { transform: translateX(3px); }

.ifc-card__eyebrow {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--accent, #0d6b45);
}

/*
 * The grid track bottoms out at 255px, so a long compound title has roughly
 * 218px to work with. Without these it spills past the card border.
 */
.ifc-card__title {
	font-weight: 700;
	letter-spacing: -.01em;
	hyphens: auto;
	overflow-wrap: break-word;
}

.ifc-card__desc {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--muted, #6b7783);
}

.ifc-card__cta {
	margin-top: auto;
	padding-top: .7rem;
	font-size: .875rem;
	font-weight: 650;
	color: var(--accent, #0d6b45);
}

/* ---------------------------------------------------------------------------
   Charts
   Inline SVG, so every mark inherits the page's own colour tokens and needs no
   second palette for dark mode.
--------------------------------------------------------------------------- */

.ifc-chart {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line, #e3e8ea);
}

.ifc-chart[hidden] { display: none; }

/*
 * Hold the chart's space before the chart exists.
 *
 * The slot used to be emitted `hidden` and revealed once JavaScript ran, which
 * pushed everything below it down the page - 148px on mobile, about 300px on
 * desktop, and the largest single contributor to a measured CLS of 0.36 mobile
 * and 0.59 desktop.
 *
 * Reserved with pseudo-elements rather than a height on the box itself: they
 * mirror the two things the finished chart contains, an SVG that fills the
 * width at a known ratio and one row of legend beneath it. charts.js drops the
 * modifier as it inserts the real chart, so the two never stack.
 */
.ifc-chart--reserve::before {
	content: "";
	display: block;
	aspect-ratio: 720 / 300;
}

.ifc-chart--reserve::after {
	content: "";
	display: block;
	height: 2.1rem;
}

/* The breakdown chart is a bar and a legend, with no SVG to shape the box. */
.ifc-chart--reserve.ifc-chart--bar::before {
	aspect-ratio: auto;
	height: 2.5rem;
}

.ifc-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 720 / 300;
	overflow: visible;
}

.ifc-chart__grid {
	stroke: var(--line, #e3e8ea);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.ifc-chart__ylabel,
.ifc-chart__xlabel,
.ifc-chart__axis {
	fill: var(--muted, #6b7783);
	font-size: 11px;
	font-family: inherit;
}

.ifc-chart__ylabel { text-anchor: end; }
.ifc-chart__xlabel { text-anchor: middle; }
.ifc-chart__axis   { text-anchor: start; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

.ifc-chart__line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	/* Keeps the stroke even after the viewBox is squashed to the container. */
	vector-effect: non-scaling-stroke;
}

.ifc-chart__line--accent  { stroke: var(--accent, #0d6b45); }
.ifc-chart__line--accent2 { stroke: var(--accent, #0d6b45); opacity: .6; }
.ifc-chart__line--muted   { stroke: var(--muted, #6b7783); stroke-dasharray: 5 4; }

.ifc-chart__fill { stroke: none; }

/* Shared colour scale for fills, stacked bars and legend swatches. */
.ifc-chart__seg--accent  { background: var(--accent, #0d6b45);  fill: var(--accent, #0d6b45);  fill-opacity: .22; }
.ifc-chart__seg--accent2 { background: var(--accent, #0d6b45);  fill: var(--accent, #0d6b45);  fill-opacity: .12; opacity: .75; }
.ifc-chart__seg--muted   { background: var(--muted, #6b7783);   fill: var(--muted, #6b7783);   fill-opacity: .16; }
.ifc-chart__seg--muted2  { background: var(--ink-2, #46525e);   fill: var(--ink-2, #46525e);   fill-opacity: .14; opacity: .8; }
.ifc-chart__seg--muted3  { background: var(--muted, #6b7783);   opacity: .6; }
.ifc-chart__seg--muted4  { background: var(--ink-2, #46525e);   opacity: .45; }
.ifc-chart__seg--muted5  { background: var(--muted, #6b7783);   opacity: .35; }

/* Composition bar ------------------------------------------------------- */

.ifc-chart__bar {
	display: flex;
	height: 26px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--surface, #f6f8f7);
}

.ifc-chart__seg { display: block; height: 100%; min-width: 2px; }

/* Legend ---------------------------------------------------------------- */

.ifc-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	font-size: .8125rem;
	color: var(--muted, #6b7783);
}

.ifc-chart__legend li { display: flex; align-items: center; gap: .4rem; }

.ifc-chart__swatch {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: none;
	fill-opacity: 1;
}

@media (max-width: 480px) {
	.ifc-chart__svg { aspect-ratio: 360 / 240; }
	.ifc-chart--reserve::before { aspect-ratio: 360 / 240; }
	.ifc-chart__ylabel, .ifc-chart__xlabel { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.ifc-card, .ifc-card__title, .ifc-card__cta { transition-duration: .01ms; }
	.ifc-card:hover, .ifc-card:focus-visible { transform: none; }
	.ifc-card:hover .ifc-card__cta { transform: none; }
}

/*
 * When the figures were last checked.
 *
 * Quiet on purpose. It is not a badge and not a boast - it is a date, sitting
 * under the answer where somebody who wants to know can find it. The argument
 * is that the date is recent and the sources are named; making it loud would
 * turn a fact into a claim.
 */
.ifc-freshness {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .45rem;
	margin: 1rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ifc-muted);
}

.ifc-freshness__dot {
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: #2e9e5b;
	flex: none;
	transform: translateY(-1px);
}

.ifc-freshness__sep { opacity: .5; }

.ifc-freshness__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.ifc-freshness__link:hover { color: var(--ifc-text); }

/* The sources page: a table of every figure and where it came from. */
.ifc-sources { margin: 1.5rem 0; }

.ifc-sources__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	display: block;
	overflow-x: auto;
}

.ifc-sources__table th,
.ifc-sources__table td {
	text-align: left;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--ifc-border);
	vertical-align: top;
}

.ifc-sources__table th {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ifc-muted);
	white-space: nowrap;
}

.ifc-sources__table code { font-size: .8125rem; word-break: break-word; }

.ifc-sources__label {
	display: block;
	font-size: .75rem;
	color: var(--ifc-muted);
	margin-top: .15rem;
}

.ifc-sources__open {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--ifc-muted);
	padding-left: 1.1rem;
}

.ifc-sources__open code { color: var(--ifc-text); }

.ifc-result__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	white-space: nowrap;
}

.ifc-result__link:hover { color: var(--ifc-text); }

/*
 * The assumptions behind a result.
 *
 * Placed under the answer and given a rule down the side rather than a tinted
 * box: it is not a warning and not a disclaimer to be skimmed past, it is part
 * of reading the number correctly.
 */
.ifc-assumptions {
	margin: 1.25rem 0 0;
	padding: 0 0 0 1rem;
	border-left: 3px solid var(--ifc-border);
}

.ifc-assumptions__title {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ifc-muted);
	margin: 0 0 .5rem;
}

.ifc-assumptions__list {
	margin: 0;
	padding-left: 1.1rem;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--ifc-muted);
}

.ifc-assumptions__list li { margin-bottom: .3rem; }

.ifc-assumptions__note {
	margin: .7rem 0 0;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ifc-text);
}