/*
 * WP Tools Hub: the tool panel, charts, tables and hub.
 *
 * Built to the estate design standards (Refactoring UI, Apple HIG subset,
 * Superpixels AI-tell audit) on the news theme's own tokens, measured on the
 * live sites 2026-09-26: Inter only; text --color-text, secondary
 * --color-text-light; brand --color-primary; the light brand tint
 * --color-bg-theme-light as the panel surface; 10px radius for surfaces and
 * fields, 4px for chips and labels (the theme's category-chip radius); 55px
 * field height (the theme input). Depth comes from surface color (white on
 * tint), not from borders or shadows; the two elevation shadows are the
 * floating chart tooltip and the phone's sticky answer bar.
 *
 * Px on purpose: the theme sets html to 62.5%, so rem would render at 10px.
 * Selectors carry the .wpth-tool prefix where the theme stylesheet (loaded
 * later) would otherwise win on specificity.
 */

.wpth-tool,
.wpth-hub,
.wpth-related,
.wpth-sticky,
.wpth-hero,
.wpth-ip,
.wpth-journeys {
	--wpth-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wpth-text: var(--color-text, #2f1854);
	--wpth-text-2: var(--color-text-light, #737373);
	/* Secondary text on the tint surfaces: the theme's #737373 is 4.7:1 on
	 * white but under 4.5:1 on #f0f5ff / #f8f4ff at 11-14px (axe, 27-Sep). */
	--wpth-text-2-tint: #5a5a5a;
	--wpth-primary: var(--color-primary, #7639ff);
	--wpth-primary-dark: var(--color-primary-dark, #6630e0);
	--wpth-tint: var(--color-bg-theme-light, #f8f4ff);
	--wpth-line: var(--color-border, #f0f1f2);
	--wpth-line-2: #b3b3b3; /* the theme's in-article form field (inline newsletter); decorative edges only */
	/* Control boundaries at the WCAG 1.4.11 floor, no darker: #8c8c8c is the
	 * lightest gray at 3:1 on both white and the darker panel tint (SQ
	 * #f0f5ff, 3.08:1); #8f8f8f already fails there (decision 8-Oct; see
	 * DESIGN.md). Hover has no contrast floor, so it stays one gentle step. */
	--wpth-field-line: #8c8c8c;
	--wpth-field-line-hover: #767676;
	--wpth-placeholder: #757575; /* 4.6:1; #9a9a9a was 2.81:1 (audit, 3-Oct) */
	--wpth-input-ink: #000;
	--wpth-edge: #ebe5ff; /* default; Assets::toc_border() sets the site's actual TOC border */
	--wpth-danger: #a12626;
	--wpth-danger-bg: #fdf1f1;
	/* The one gain green: 5.4:1 on white, 4.9:1 on the CoinLaw and SQ tints.
	   Loss is --wpth-danger. Zones, badges, live dots and toned figures all
	   draw from these two (design review, 9-Oct: four greens had crept in). */
	--wpth-gain: #0b7a4b;
	--wpth-gain-bg: #e8f6ef;
	--wpth-s0: var(--wpth-series-0, var(--wpth-primary));
	--wpth-s1: var(--wpth-series-1, color-mix(in oklch, var(--wpth-primary) 58%, #fff));
	--wpth-grid: #ebebeb;
	font-family: var(--wpth-font);
	color: var(--wpth-text);
}

.wpth-tool {
	container-type: inline-size;
	margin: 0 0 48px;
}

.wpth-tool *,
.wpth-hub *,
.wpth-related * {
	box-sizing: border-box;
}

.wpth-tool__title {
	margin: 0 0 16px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.24;
}

/*
 * The theme's page template lays the article out as a flex item that shrinks
 * to its content, so a short intro left the tool narrower than on a page with
 * a long one (799px vs 1083px measured 2026-09-27, same template). Tool and
 * hub pages take a fixed, centered 960px column instead (owner 27-Sep: text
 * runs full width, so the page width sets the line length; at the full
 * 1180px row a line ran to ~160 characters). wpth-page is set by Layout.
 */
/* width, not flex-basis: with `flex: 1 1 100%` the article refused to shrink
   below its content (396px in a 335px wrap at 375px, 1-Oct) and ran off the
   phone screen. */
.wpth-page .content .wrap > article {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}

/* The theme spaces sibling buttons (button + button { margin-top: 14px }),
 * which staggered the example chips. Plugin buttons own their spacing. */
.wpth-tool button.wpth-chip,
.wpth-tool button.wpth-link,
.wpth-tool button.wpth-btn {
	margin: 0;
}

/* === Panel =========================================================== */

.wpth-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 32px;
	align-items: start;
	padding: 32px;
	border-radius: 10px;
	background: var(--wpth-tint);
}

@container (max-width: 820px) {
	.wpth-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px;
	}
}

@container (max-width: 480px) {
	.wpth-panel {
		padding: 20px 16px;
		border-radius: 10px;
	}
}

/* answerFirst tools: the answer needs no input, so on one column it leads
 * and the fields below refine it (owner, 3-Oct: on a phone the instant
 * answer sat under three fields and read as "fill these in first").
 * The answer comes first in the markup too, so a screen reader and the Tab
 * order meet it first (audit, 8-Oct: CSS order alone left the DOM reversed).
 * Two columns put it back on the right, the form left beside it. */
@container (min-width: 821px) {
	.wpth-panel.is-answer-first .wpth-panel__inputs {
		grid-column: 1;
		grid-row: 1;
	}

	.wpth-panel.is-answer-first .wpth-panel__results {
		grid-column: 2;
		grid-row: 1;
	}
}

.wpth-refine {
	display: none;
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wpth-text);
}

@container (max-width: 820px) {
	.wpth-panel.is-answer-first .wpth-refine {
		display: block;
	}
}

/* Tools with nothing to enter: the answer leads, full width. */
.wpth-panel.is-auto {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.wpth-panel.is-auto .wpth-panel__results {
	order: -1;
	position: static;
}

.wpth-panel.is-auto .wpth-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

@container (min-width: 700px) {
	.wpth-panel.is-auto .wpth-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
	}

	/* A spec-sheet grid: label above value in every cell, so a long value
	 * (an ISP name) neither wraps its label nor leaves a blank band beside it. */
	.wpth-panel.is-auto .wpth-fact {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.wpth-tool .wpth-panel.is-auto .wpth-fact__value {
		text-align: left;
		font-weight: 600;
	}
}

/* === Examples row ==================================================== */

.wpth-examples {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 28px;
}

.wpth-examples__list {
	grid-column: 1 / -1;
	grid-row: 2;
}

.wpth-examples__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-text-2-tint);
}

.wpth-examples__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.wpth-tool .wpth-examples .wpth-link {
	justify-self: end;
	min-height: 0;
	/* The theme gives links a 55px box, which made this row 55px tall and set
	   the "Examples" label 18px below the results card's first line. The link
	   sizes to its text; padding with a matching negative margin keeps a 44px
	   hit area without growing the row (audit, 1-Oct: 38 was under the floor). */
	height: auto;
	padding-block: 13px;
	margin-block: -13px;
}

/* Two columns: the inputs sit on the same white surface as the results card,
   with its padding and radius, so both columns share one top edge and their
   first text lines ("Examples", the answer label) sit level (owner review,
   28-Sep: a lone card edge 28px above the Examples line read as misaligned). */
@container (min-width: 821px) {
	.wpth-panel:not(.is-auto) .wpth-panel__inputs {
		padding: 28px;
		border-radius: 10px;
		background: #fff;
	}
}


.wpth-tool .wpth-chip {
	/* Chips wrap to new lines rather than scroll sideways (decided
	   8-Oct: every example visible without a swipe). A chip may also shrink
	   and wrap its own label, so at 200% text it stays inside the column. */
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	height: auto;
	min-height: 36px;
	padding: 6px 18px;
	border: 1px solid var(--wpth-edge);
	/* Capsules for chips and tags, buttons stay 10px (decision 8-Oct: the
	   original curved capsules over the 27-Sep 4px squares; see DESIGN.md). */
	border-radius: 999px;
	background: #fff;
	font-family: var(--wpth-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wpth-text);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.wpth-tool .wpth-chip:hover {
	border-color: var(--wpth-primary);
	color: var(--wpth-primary-dark);
	background: #fff;
}

/* Pressed: a step darker than hover (audit, 3-Oct: no :active look anywhere). */
.wpth-tool .wpth-chip:active:not([aria-pressed="true"]) {
	background: var(--wpth-tint);
}

.wpth-tool .wpth-link:active {
	color: var(--wpth-text);
}

/* Save at "3 of 3 saved" explains itself on click; it no longer looks clickable (audit, 3-Oct). */
.wpth-tool .wpth-link[aria-disabled="true"] {
	color: var(--wpth-text-2);
	text-decoration: none;
	cursor: default;
}

.wpth-tool .wpth-chip[aria-pressed="true"] {
	border-color: var(--wpth-primary);
	background: var(--wpth-primary);
	color: #fff;
}

.wpth-tool .wpth-chip:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* Tertiary text actions: Reset, Copy, Share result, CSV. */
.wpth-tool .wpth-link {
	display: inline-flex;
	align-items: center;
	/* The theme sets height: 55px on every button; a text action is not one
	   (audit, 8-Oct: a wrapped "Download CSV" sat a 55px row below). */
	height: auto;
	min-height: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wpth-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-primary-dark);
	text-decoration: none;
	cursor: pointer;
}

.wpth-tool .wpth-link:hover {
	background: none;
	color: var(--wpth-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpth-tool .wpth-link:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* A focused, unselected chip keeps its rest look: the theme's button:focus
   rule painted it solid primary, identical to aria-pressed (audit, 1-Oct). */
.wpth-tool .wpth-chip:focus-visible:not([aria-pressed="true"]) {
	background: #fff;
	color: var(--wpth-text);
}

/* === Form ============================================================ */

.wpth-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0;
}

/* One column once two would leave an input under 100px wide (320px phones,
   200% text): the value was clipped to "1500" (audit, 1-Oct). */
@container (max-width: 400px) {
	.wpth-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpth-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wpth-field--wide,
.wpth-form__auto,
.wpth-form__actions {
	grid-column: 1 / -1;
}

/* A named group of inputs (Income, Spending...). It spans the form and
   repeats the form's own grid, so fields line up across groups and the
   one-column container rule above carries through. The floated legend is
   the standard way to make a legend an ordinary box that takes margins. */
.wpth-form__section {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: inherit;
	gap: inherit;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wpth-tool .wpth-form__legend {
	float: left;
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--wpth-line);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

/* Folded inputs (`fold` in the registry): the screen tool's five measured
   values sit behind one toggle so the answer leads on a phone. The body
   repeats the form's grid, as a section does; the toggle matches the
   folded table's. */
.wpth-fold {
	grid-column: 1 / -1;
	grid-template-columns: inherit;
	gap: inherit;
	min-width: 0;
}

.wpth-fold__body {
	display: grid;
	grid-template-columns: inherit;
	gap: inherit;
	padding-top: 12px;
}

.wpth-tool .wpth-fold__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	cursor: pointer;
	list-style: none;
}

.wpth-tool .wpth-fold__toggle::-webkit-details-marker {
	display: none;
}

.wpth-tool .wpth-fold__toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.wpth-tool .wpth-fold[open] .wpth-fold__toggle::before {
	transform: rotate(45deg);
}

.wpth-tool .wpth-fold__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpth-tool .wpth-fold__toggle:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Token boundaries (I5, `pieces` in the registry): a disclosure under the
   facts, toggle as the folded inputs'. Each token is a block in one of two
   alternating primary tints with a 1px primary start edge: no tint step
   reaches 3:1 against its neighbor (WCAG 1.4.11), the edge does (4:1 and up
   on both tints). A character split across tokens (emoji, CJK) gets a dashed
   outline and room for it. Spaces stay inside their block, which is where
   the tokenizer puts them. A long split fades at the bottom while more of it
   is below, as a wide table fades at its edge. */
.wpth-pieces {
	display: block;
	margin-top: 8px;
}

.wpth-pieces__body {
	padding-top: 4px;
}

.wpth-pieces__note,
.wpth-pieces__legend {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text-2-tint);
}

.wpth-pieces__legend {
	margin: 12px 0 0;
}

.wpth-pieces__text {
	margin: 0;
	max-height: 320px;
	overflow-y: auto;
	font-size: 16px;
	line-height: 1.9;
	color: var(--wpth-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.wpth-pieces__text:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.wpth-pieces__text.is-more {
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}

.wpth-pieces__chip {
	padding: 2px 0;
	border-left: 1px solid var(--wpth-primary);
	border-radius: 0 4px 4px 0;
	background: color-mix(in oklch, var(--wpth-primary) 10%, #fff);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wpth-pieces__chip.is-alt {
	background: color-mix(in oklch, var(--wpth-primary) 24%, #fff);
}

.wpth-pieces__chip.is-multi {
	padding: 2px 3px;
	outline: 1px dashed var(--wpth-primary-dark);
	outline-offset: -1px;
}

/* A piece the eye cannot see (a zero-width joiner inside an emoji sequence)
   shows as a mark, so the emoji's parts and their boundaries stay visible. */
.wpth-pieces__mark {
	color: var(--wpth-primary-dark);
}

@media (forced-colors: active) {
	.wpth-pieces__chip {
		border: 1px solid CanvasText;
	}
}

.wpth-form__local {
	font-size: 14px;
	color: var(--wpth-text-2-tint);
}

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

.wpth-tool .wpth-field__label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-field__control {
	display: flex;
	align-items: center;
	height: 55px;
	overflow: hidden;
	border: 1px solid var(--wpth-field-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpth-field__control:hover {
	border-color: var(--wpth-field-line-hover);
}

.wpth-field__control:focus-within {
	border-color: var(--wpth-primary);
	/* The same ring every button and link gets, so one focus style on the page. */
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* #28: the control, not only the typed value, shows the invalid state;
   textareas and selects too (audit, 3-Oct). */
.wpth-field__control:has(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
	border-color: var(--wpth-danger);
}

.wpth-tool .wpth-field__control input[type="number"],
.wpth-tool .wpth-field__control input[type="text"],
.wpth-tool .wpth-field__control input,
.wpth-tool .wpth-field__control select {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	height: 53px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--wpth-font);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--wpth-input-ink);
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: textfield;
}

.wpth-tool .wpth-field__control input::-webkit-outer-spin-button,
.wpth-tool .wpth-field__control input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.wpth-tool .wpth-field__control input::placeholder {
	color: var(--wpth-placeholder);
	opacity: 1;
}

.wpth-tool .wpth-field__control.has-prefix input {
	padding-left: 6px;
}

.wpth-tool .wpth-field__control.has-unit input {
	padding-right: 6px;
}

.wpth-tool .wpth-field__control select {
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.wpth-tool .wpth-field__control input:focus,
.wpth-tool .wpth-field__control select:focus,
.wpth-tool .wpth-field__control textarea:focus {
	outline: none;
	box-shadow: none;
}

.wpth-tool .wpth-field__control input[aria-invalid="true"] {
	color: var(--wpth-danger);
}

.wpth-field__prefix,
.wpth-field__unit {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--wpth-text-2);
	pointer-events: none;
}

.wpth-field__prefix {
	padding-left: 16px;
}

.wpth-field__unit {
	padding-right: 16px;
	font-size: 15px;
}

/* C22: Show/Hide inside a private field, a text action at the field's own height. */
.wpth-tool .wpth-field__reveal {
	flex: 0 0 auto;
	min-width: 64px;
	height: 53px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0 9px 9px 0;
	background: none;
	font-family: var(--wpth-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	cursor: pointer;
}

/* :focus too: the theme paints every focused button solid primary. */
.wpth-tool .wpth-field__reveal:hover,
.wpth-tool .wpth-field__reveal:focus {
	background: none;
	color: var(--wpth-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The control clips overflow, so the ring sits inside the button. */
.wpth-tool .wpth-field__reveal:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: -4px;
}

.wpth-tool .wpth-field__reveal[hidden] {
	display: none;
}

/* S45: an on-demand check under a field, with its answer beside it. */
.wpth-field__check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 0 0;
}

.wpth-field__check[hidden] {
	display: none;
}

.wpth-tool .wpth-check__button {
	/* The secondary button (design review, 9-Oct): white, the field edge,
	   primary-dark text, tint on hover. The file picker's button is the same;
	   .wpth-btn stays the one solid action. */
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wpth-field-line);
	border-radius: 10px;
	background: #fff;
	font-family: var(--wpth-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wpth-tool .wpth-check__button:hover {
	border-color: var(--wpth-primary);
	background: var(--wpth-tint);
}

.wpth-tool .wpth-check__button:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* Disabled is gray text, never opacity (one treatment, DESIGN.md). */
.wpth-tool .wpth-check__button:disabled {
	border-color: var(--wpth-edge);
	background: #fff;
	color: var(--wpth-text-2);
	cursor: progress;
}

.wpth-check__result {
	flex: 1 1 220px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text);
}

.wpth-check__result.is-found {
	font-weight: 600;
	color: var(--wpth-danger);
}

.wpth-field__help {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wpth-text-2-tint);
}

.wpth-field__error {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wpth-danger);
}

/* `clock` (S31): the current Unix time under its field, ticking each second;
   tabular digits so the number does not jitter, Now as a text action. */
.wpth-tool .wpth-clock {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text-2-tint);
}

.wpth-tool .wpth-clock[hidden] {
	display: none;
}

.wpth-tool .wpth-clock__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wpth-text);
}

.wpth-tool .wpth-clock .wpth-link {
	padding-block: 8px;
	margin-block: -8px;
}

/* Textarea */
.wpth-field--textarea .wpth-field__control {
	height: auto;
	align-items: stretch;
}

.wpth-tool .wpth-field--textarea .wpth-field__control textarea {
	width: 100%;
	min-height: 200px;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	resize: vertical;
	font-family: var(--wpth-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wpth-input-ink);
}

/* File field (`type: "file"`, S24/S30): the native control, so a keyboard,
   a screen reader and a phone's file picker all work unchanged. The whole
   55px field opens the picker; its button takes the theme's 10px radius. */
.wpth-tool .wpth-field--file .wpth-field__control input[type="file"] {
	padding: 0 8px;
	font-size: 15px;
	line-height: 53px;
	color: var(--wpth-text-2);
	cursor: pointer;
}

.wpth-tool .wpth-field--file input[type="file"]::file-selector-button {
	height: 40px;
	/* Its own line box: the input's 53px line-height (which centers "No file
	   chosen" in the field) pushed the label to the bottom of this 40px button
	   (owner screenshot, 9-Oct). 38px = 40px less the two 1px borders. */
	line-height: 38px;
	margin: 0 12px 0 0;
	padding: 0 16px;
	border: 1px solid var(--wpth-field-line);
	border-radius: 10px;
	background: #fff;
	font-family: var(--wpth-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	cursor: pointer;
}

.wpth-tool .wpth-field--file input[type="file"]:hover::file-selector-button {
	border-color: var(--wpth-primary);
	background: var(--wpth-tint);
}

/* Segmented control (selects with two to four short options) */
/* Each segmented field measures itself: on a two-column desktop the form
   column is half the tool's width, so a query on the tool would keep four
   options in one row long after they stopped fitting. */
.wpth-field--segmented {
	container-type: inline-size;
}

/* One row of equal columns while the labels fit. The breakpoints are in em,
   so they scale with the reader's text size as well as the screen: at 200%
   text the control takes the narrow layout on any screen (audit, 8-Oct). */
.wpth-segmented {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--wpth-field-line);
	border-radius: 10px;
	background: #fff;
}

.wpth-segmented__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wpth-tool .wpth-segmented__option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 45px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--wpth-text-2);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpth-tool .wpth-segmented__option:hover {
	color: var(--wpth-text);
	background: var(--wpth-tint);
}

/* Narrow: three or more labels no longer fit side by side ("Contribution"
   ran over "Years" at 320px). Four options go two by two; three and five
   stack one per row, so no option sits alone in a half-empty row. 24em is
   the widest real row ("Final balance | Contribution | Years", about 370px
   at 15px text). */
@container (max-width: 24em) {
	.wpth-segmented--3:not(.is-short),
	.wpth-segmented--5:not(.is-short) {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}

	.wpth-segmented--4:not(.is-short) {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Labels of ten characters or fewer (`is-short`, Render) stay on one row
   down to 14em, about 220px at 15px text: "None | Low | High". */
@container (max-width: 14em) {
	.wpth-segmented--3.is-short,
	.wpth-segmented--5.is-short {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}

	.wpth-segmented--4.is-short {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Very narrow or very large text: every control stacks, and a long label
   wraps inside its own option instead of running into the next one. */
@container (max-width: 13em) {
	.wpth-segmented {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpth-tool .wpth-segmented__input:checked + .wpth-segmented__option {
	background: var(--wpth-primary);
	color: #fff;
	font-weight: 600;
}

.wpth-tool .wpth-segmented__input:focus-visible + .wpth-segmented__option {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* A choice another field overrides (`disabledBy`: a MAC vendor prefix
   replaces administration and type) is disabled and reads as set aside:
   gray text, no opacity, the one disabled treatment (design review, 9-Oct:
   opacity took option text to 1.96:1). */
.wpth-tool .wpth-field.is-inactive .wpth-field__label {
	color: var(--wpth-text-2);
}

.wpth-tool .wpth-field.is-inactive .wpth-segmented__option,
.wpth-tool .wpth-field.is-inactive .wpth-segmented__option:hover {
	background: transparent;
	color: var(--wpth-text-2);
	cursor: not-allowed;
}

/* Checkbox */
.wpth-field--checkbox {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
}

.wpth-field--checkbox .wpth-field__control {
	order: -1;
	position: relative;
	width: 24px;
	height: 24px;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.wpth-field--checkbox .wpth-field__control:focus-within {
	box-shadow: none;
}

.wpth-tool .wpth-field--checkbox .wpth-field__label {
	margin: 0;
	font-weight: 500;
	cursor: pointer;
}

.wpth-tool .wpth-field--checkbox input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.wpth-field__check {
	width: 24px;
	height: 24px;
	border: 1px solid var(--wpth-field-line);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wpth-tool .wpth-field--checkbox input[type="checkbox"]:checked + .wpth-field__check {
	border-color: var(--wpth-primary);
	background: var(--wpth-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4L13 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 11px no-repeat;
}

.wpth-tool .wpth-field--checkbox input[type="checkbox"]:focus-visible + .wpth-field__check {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-field--checkbox .wpth-field__help,
.wpth-field--checkbox .wpth-field__error {
	grid-column: 2;
	margin-top: 2px;
}

.wpth-form__auto {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wpth-text-2-tint);
}

.wpth-form__actions {
	display: flex;
	gap: 12px;
}

/* Solid button: the one primary action (Regenerate, Check again). Same as
 * the theme's CTA button: secondary brand fill, black text, darker on hover. */
.wpth-tool .wpth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	min-height: 0;
	padding: 0 25px;
	border: 0;
	border-radius: 10px;
	background: var(--color-secondary, #c2fa4d);
	font-family: var(--wpth-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #000;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.wpth-tool .wpth-btn:hover {
	background: var(--color-secondary-dark, #b5eb45);
	color: #000;
}

.wpth-tool .wpth-btn:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* === Results card ==================================================== */

.wpth-panel__results {
	position: sticky;
	top: 100px;
	padding: 28px;
	border-radius: 10px;
	background: #fff;
}

@container (max-width: 820px) {
	.wpth-panel__results {
		position: static;
	}
}

/* Narrow: label over value, so a long figure wraps instead of running
   off the screen at large text sizes (audit, 1-Oct). */
@container (max-width: 480px) {
	.wpth-fact {
		flex-direction: column;
		gap: 4px;
	}

	/* Three classes: the base .wpth-tool .wpth-fact__value (nowrap) comes later
	   in this file with two, so at equal weight it won and short values never
	   wrapped on phones (root cause of N1, audit 8-Oct). */
	.wpth-tool .wpth-fact .wpth-fact__value {
		min-width: 0;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
		flex-shrink: 1;
	}
}

@container (max-width: 480px) {
	.wpth-panel__results {
		padding: 20px;
	}
}

.wpth-answer {
	position: relative;
}

.wpth-answer__label {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-text-2);
}

.wpth-answer__value {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wpth-text);
	overflow-wrap: anywhere;
}

.wpth-answer__value.is-long {
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Over 40 characters the answer is text to read and copy, not a headline. */
.wpth-answer__value.is-long.is-text {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}

/* The figure scales with the tool's width, so "$10,450.00" fits a 320px
   phone on one line instead of breaking into "$10,450." and "00" (audit,
   3-Oct and 8-Oct). 11cqi is 35px in a 320px-wide tool. */
@container (max-width: 480px) {
	.wpth-answer__value {
		font-size: min(40px, 11cqi);
	}

	.wpth-answer__value.is-long {
		font-size: min(26px, 7.5cqi);
	}

	.wpth-answer__value.is-long.is-text {
		font-size: 18px;
	}
}

/* A generated secret (`display: chars`) stays on one line at headline weight:
   tools.js shrinks it to fit its row, down to 16px, and past that it scrolls
   sideways instead of breaking mid-password (a 20-character password split
   onto two lines at 1280, review 8-Oct). Inter only (no monospace face, by
   decision, 8-Oct): tabular digits keep their width,
   and digits and symbols take their own color, both 4.5:1 or better on the
   white card and both tints. The glyphs carry the meaning; color only helps. */
.wpth-tool .wpth-answer__value.is-chars {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow-wrap: normal;
	overflow-x: auto;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.wpth-tool {
	--wpth-char-digit: var(--wpth-primary-dark); /* 6.85:1 on white (CoinLaw), darker on SQ */
	--wpth-char-symbol: #9a4a00; /* 6.26:1 on white, 5.73:1 on SQ's #f0f5ff */
}

.wpth-tool .wpth-char--digit {
	color: var(--wpth-char-digit);
}

.wpth-tool .wpth-char--symbol {
	color: var(--wpth-char-symbol);
}

/* A long result (`box`, over 60 characters: Base64 of a file) scrolls in a
   fixed-height box with its Copy beside it; a 2,160-byte input had made the
   answer 3,060px tall (review 8-Oct). Read as text, not as a headline. */
.wpth-tool .wpth-answer__value.is-box {
	flex: 1 1 100%;
	max-height: 240px;
	overflow-y: auto;
	padding: 12px 16px;
	border: 1px solid var(--wpth-edge);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.wpth-tool .wpth-answer__value.is-box:focus-visible,
.wpth-tool .wpth-answer__value.is-chars:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-answer__summary {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wpth-text-2);
}

.wpth-answer__summary:empty {
	display: none;
}

.wpth-tool .wpth-answer__disclosure {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wpth-text-2);
}

/* Goal bar (registry `progress`): a thin track under the sentence, with the
   share in words beside it, so the figure never depends on the color. */
.wpth-progress {
	margin: 16px 0 0;
}

.wpth-progress[hidden] {
	display: none;
}

.wpth-progress__track {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: var(--wpth-line);
	overflow: hidden;
}

.wpth-progress__fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--wpth-primary);
	transition: width 0.3s ease;
}

.wpth-tool .wpth-progress__text {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wpth-text);
}

@media (prefers-reduced-motion: reduce) {
	.wpth-progress__fill {
		transition: none;
	}
}

/* The figure and its own Copy button share one baseline row, so the button
 * reads as "copy this number", distinct from "Copy all details" below. */
.wpth-answer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.wpth-answer__row .wpth-answer__value {
	min-width: 0;
}

/* An empty (live-only) figure fills the row, or its skeleton bar collapses to 0. */
.wpth-answer__row .wpth-answer__value:empty {
	flex: 1 1 auto;
}

/* A text link like every other action (audit, 3-Oct: the only chip-styled
   action); the padding and matching margin keep a 44px hit area. */
.wpth-tool .wpth-answer__copy {
	flex: 0 0 auto;
	height: auto;
	padding-block: 8px;
	margin-block: -8px;
}

.wpth-tool .wpth-answer__copy[hidden] {
	display: none;
}

/* `download`: saving a decoded file is the answer's own action, so it sits
   under the answer, a text action like Copy. */
.wpth-tool .wpth-answer__download {
	margin: 12px 0 0;
}

.wpth-tool .wpth-answer__download[hidden] {
	display: none;
}

.wpth-answer__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--wpth-danger-bg);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wpth-danger);
}

.wpth-panel__results.has-error .wpth-answer,
.wpth-panel__results.has-error .wpth-facts,
.wpth-panel__results.has-error .wpth-pieces,
.wpth-panel__results.is-stale .wpth-answer,
.wpth-panel__results.is-stale .wpth-facts,
.wpth-panel__results.is-stale .wpth-pieces {
	opacity: 0.4;
}

/* A lookup in flight says so beside the answer's label, where the reader is looking. */
.wpth-answer__label.is-busy::after {
	content: attr(data-busy-text);
	margin-left: 10px;
	font-weight: 500;
	color: var(--wpth-text-2);
}

.wpth-tool.is-pending .wpth-answer,
.wpth-tool.is-pending .wpth-facts,
.wpth-tool.is-pending .wpth-pieces {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

/* Facts: every other output as a quiet label/value list. */
.wpth-facts {
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--wpth-line);
}

.wpth-fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wpth-line);
}

.wpth-fact[hidden] {
	display: none;
}

.wpth-tool .wpth-fact__label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wpth-text-2);
}

.wpth-tool .wpth-fact__value {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
	color: var(--wpth-text);
	font-variant-numeric: tabular-nums;
	/* A figure never splits ("$648,29" / "1.36" beside a long label, Coast
	   FIRE, 28-Sep): the label wraps instead. Values over 24 characters are
	   already stacked (tools.js), and those may break anywhere. */
	flex-shrink: 0;
	white-space: nowrap;
}

/* A link inside a fact (a router's own page) may break anywhere: the
   theme's links carry word-break: keep-all, which kept a long URL in one
   unbreakable run 1,016px past a phone screen (audit, 8-Oct). */
.wpth-tool .wpth-fact__value a {
	overflow-wrap: anywhere;
	word-break: normal;
}

.wpth-fact--stack {
	flex-direction: column;
	gap: 4px;
}

.wpth-tool .wpth-fact--stack .wpth-fact__value {
	text-align: left;
	font-weight: 500;
	font-variant-numeric: normal;
	flex-shrink: 1;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* `box`: a multi-line value (a token's header or payload as JSON) keeps its
   line breaks and indents and scrolls inside a box, label above it. */
.wpth-fact--box {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.wpth-tool .wpth-fact--box .wpth-fact__value {
	max-height: 260px;
	overflow: auto;
	padding: 10px 12px;
	border: 1px solid var(--wpth-edge);
	border-radius: 8px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.wpth-tool .wpth-fact--box .wpth-fact__value:empty {
	display: none;
}

.wpth-tool .wpth-fact--box .wpth-fact__value:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* A wrapped last action sits one link height down (28px, 44px on touch),
	   not a 55px theme button down (audit, 8-Oct). */
	gap: 4px 20px;
	margin: 20px 0 0;
}

.wpth-actions__feedback {
	font-size: 14px;
	font-weight: 500;
	color: var(--wpth-text-2);
}

/* Live-only tools, and single `live` outputs: skeleton until the browser fills the answer. */
.wpth-tool.is-live-only .wpth-answer__value:empty::before,
.wpth-tool.is-live-only .wpth-fact__value:empty::before,
.wpth-fact__value[data-live]:empty::before {
	content: "";
	display: inline-block;
	width: 140px;
	height: 0.8em;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--wpth-tint) 0%, var(--wpth-edge) 50%, var(--wpth-tint) 100%);
	background-size: 200% 100%;
	vertical-align: middle;
}

.wpth-tool.is-live-only .wpth-answer__value:empty::before {
	width: 70%;
	height: 0.7em;
}

@media (prefers-reduced-motion: no-preference) {
	.wpth-tool.is-live-only .wpth-answer__value:empty::before,
	.wpth-tool.is-live-only .wpth-fact__value:empty::before,
	.wpth-fact__value[data-live]:empty::before {
		animation: wpth-shimmer 1.4s ease-in-out infinite;
	}
}

@keyframes wpth-shimmer {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

/* === Chart =========================================================== */

.wpth-chart {
	position: relative;
	margin: 48px 0 0;
	padding: 0;
}

.wpth-tool .wpth-chart__head {
	display: flex;
	align-items: flex-start;
	padding: 0;
	font-style: normal;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
	text-align: left;
}

.wpth-tool .wpth-chart__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-tool .wpth-chart__takeaway {
	font-size: 16px;
	line-height: 1.5;
	color: var(--wpth-text-2);
}

.wpth-chart__takeaway:empty {
	display: none;
}

.wpth-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 12px;
}

.wpth-chart__legend[hidden] {
	display: none;
}

.wpth-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-legend__key {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.wpth-legend__key.is-line {
	width: 14px;
	height: 2px;
	border-radius: 1px;
}

/* A dashed line's key is dashed too. The 1px inset edge the series-two key
   carries would fill a 2px line key with series one's color, so it goes. */
.wpth-legend__key.is-line.is-dashed {
	background: repeating-linear-gradient(90deg, var(--wpth-s1) 0 5px, transparent 5px 8px);
	box-shadow: none;
}

.wpth-chart__canvas {
	position: relative;
	width: 100%;
}

.wpth-svg {
	display: block;
	overflow: visible;
	font-family: var(--wpth-font);
}

/* Entry motion (owner pick 2026-10-01): first paint only (chart.js adds
 * .is-entering once per figure). Bars scale from the baseline with the
 * per-bar delay chart.js sets; a line draws along its length (pathLength=1);
 * the area wash and dots fade in behind it. One moment, then still. */
@keyframes wpth-grow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes wpth-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes wpth-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wpth-svg.is-entering .wpth-rect {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: wpth-grow 320ms cubic-bezier(0.2, 0, 0, 1) both;
}

.wpth-svg.is-entering .wpth-rect.is-negative {
	transform-origin: 50% 0%;
}

.wpth-svg.is-entering .wpth-line {
	stroke-dasharray: 1;
	animation: wpth-draw 480ms cubic-bezier(0.2, 0, 0, 1) both;
}

.wpth-svg.is-entering .wpth-area,
.wpth-svg.is-entering .wpth-dot,
.wpth-svg.is-entering .wpth-endlabel {
	animation: wpth-fade 240ms ease-out 360ms both;
}

/* A dashed line keeps its dashes while it enters: it fades, it does not draw. */
.wpth-svg.is-entering .wpth-line.is-dashed {
	stroke-dasharray: 6 4;
	animation: wpth-fade 240ms ease-out 360ms both;
}

/* Horizontal bars grow from their left baseline. */
@keyframes wpth-grow-x {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.wpth-svg.is-entering .wpth-rect.is-h {
	transform-origin: 0% 50%;
	animation-name: wpth-grow-x;
}

/* Slices fade in one after another (chart.js sets the delay); the gauge's
   bands fade together and its pointer follows. */
.wpth-svg.is-entering .wpth-slice,
.wpth-svg.is-entering .wpth-band {
	animation: wpth-fade 320ms ease-out both;
}

.wpth-svg.is-entering .wpth-needle {
	animation: wpth-fade 240ms ease-out 360ms both;
}

@media (prefers-reduced-motion: reduce) {
	.wpth-svg.is-entering .wpth-rect,
	.wpth-svg.is-entering .wpth-line,
	.wpth-svg.is-entering .wpth-line.is-dashed,
	.wpth-svg.is-entering .wpth-area,
	.wpth-svg.is-entering .wpth-dot,
	.wpth-svg.is-entering .wpth-endlabel,
	.wpth-svg.is-entering .wpth-slice,
	.wpth-svg.is-entering .wpth-band,
	.wpth-svg.is-entering .wpth-needle {
		animation: none;
	}
}

.wpth-svg {
	max-width: 100%;
	height: auto;
}

.wpth-svg .wpth-gridline {
	stroke: var(--wpth-grid);
	stroke-width: 1;
}

.wpth-svg .wpth-base {
	stroke: #d4d4d4;
	stroke-width: 1;
}

.wpth-svg .wpth-zero {
	stroke: var(--wpth-text-2);
	stroke-width: 1;
}

.wpth-svg .wpth-tick {
	fill: var(--wpth-text-2);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.wpth-svg .wpth-endlabel {
	fill: var(--wpth-text);
	font-size: 12px;
	font-weight: 600;
}

.wpth-svg .wpth-rect.wpth-s0,
.wpth-svg .wpth-dot.wpth-s0 {
	fill: var(--wpth-s0);
}

.wpth-svg .wpth-rect.wpth-s1,
.wpth-svg .wpth-dot.wpth-s1 {
	fill: var(--wpth-s1);
}

/* The light second series is 2.4:1 on white, under the 3:1 a graphic needs
   (WCAG 1.4.11). Darkening the fill would bring it too close to series one,
   so its edge carries the contrast instead (audit, 3-Oct). */
.wpth-svg .wpth-rect.wpth-s1 {
	stroke: var(--wpth-s0);
	stroke-width: 1;
}

.wpth-svg .wpth-line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.wpth-svg .wpth-line.wpth-s0 {
	stroke: var(--wpth-s0);
}

.wpth-svg .wpth-line.wpth-s1 {
	stroke: var(--wpth-s1);
}

.wpth-svg .wpth-line.is-dashed {
	stroke-dasharray: 6 4;
	stroke-linecap: butt;
}

/* A goal line: dashed hairline in the muted text color, label above its right end. */
.wpth-svg .wpth-reference__line {
	stroke: var(--wpth-text-2);
	stroke-width: 1;
	stroke-dasharray: 4 4;
}

.wpth-svg .wpth-reference__label {
	font-size: 12px;
	fill: var(--wpth-text-2);
}

.wpth-svg .wpth-area {
	fill: var(--wpth-s0);
	opacity: 0.1;
	stroke: none;
}

.wpth-svg .wpth-dot {
	stroke: #fff;
	stroke-width: 2;
}

/* Hover, tap and keyboard belong to the shared chart-kit hydrator (0.12.0):
   its white tooltip card is the article charts' and the tracker panels'.
   The focus ring on its group is the theme's. */
.wpth-chart .ck-chart:focus-visible {
	outline: 2px solid var(--wpth-primary);
	/* Inset: the canvas clips anything outside it, which cut the ring's sides (audit, 8-Oct). */
	outline-offset: -2px;
	border-radius: 4px;
}

.wpth-legend__key.wpth-s0 {
	background: var(--wpth-s0);
}

.wpth-legend__key.wpth-s1 {
	background: var(--wpth-s1);
	box-shadow: inset 0 0 0 1px var(--wpth-s0);
}

/* Doughnut and gauge: one hue, an opacity ladder set per slice or band by
   chart.js (fill-opacity, floor 0.35). Every part keeps a 1px edge in
   series one at full strength, so the lightest step still meets WCAG
   1.4.11's 3:1 against the card, the rule the light second series follows. */
.wpth-svg .wpth-slice,
.wpth-svg .wpth-band {
	fill: var(--wpth-s0);
	stroke: var(--wpth-s0);
	stroke-width: 1;
	stroke-linejoin: round;
}

.wpth-svg .wpth-center__value {
	fill: var(--wpth-text);
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wpth-svg .wpth-center__caption {
	fill: var(--wpth-text-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.wpth-svg .wpth-needle {
	stroke: var(--wpth-text);
	stroke-width: 4;
	stroke-linecap: round;
}

.wpth-svg .wpth-gauge__value {
	fill: var(--wpth-text);
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wpth-svg .wpth-gauge__caption {
	fill: var(--wpth-text-2);
	font-size: 14px;
	font-weight: 600;
}

/* The ring and its slice list side by side; the list drops under the ring
   when the two do not fit. */
.wpth-chart__canvas.is-doughnut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

.wpth-slices {
	container-type: inline-size;
	display: grid;
	flex: 1 1 240px;
	max-width: 420px;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-slices__row {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto 3.5em;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-slices__key {
	align-self: center;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--wpth-s0) var(--wpth-mix, 100%), #fff);
	box-shadow: inset 0 0 0 1px var(--wpth-s0);
}

.wpth-slices__value,
.wpth-slices__share {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wpth-slices__share {
	color: var(--wpth-text-2);
}

/* Too narrow for name, value and share on one line (a phone at 200% zoom
   printed "Aft$19,450"): the value and share drop under the name. */
@container (max-width: 260px) {
	.wpth-slices__row {
		grid-template-columns: 10px auto minmax(0, 1fr);
		row-gap: 2px;
	}

	.wpth-slices__name {
		grid-column: 2 / -1;
	}

	.wpth-slices__value {
		grid-column: 2;
		text-align: left;
	}

	.wpth-slices__share {
		grid-column: 3;
		text-align: left;
	}
}

/* === QR code (wifi-qr) ================================================ */

/* The code is the answer, so it sits under the hero inside the answer block.
   Always black on white with its quiet zone: phone cameras misread inverted
   or tinted codes, so no theme color touches the modules. */
.wpth-qr {
	display: grid;
	justify-items: start;
	gap: 12px;
	margin: 20px 0 0;
}

.wpth-qr[hidden] {
	display: none;
}

/* C21: before a real code, a dashed outline the size of the code with the
   prompt beside it. Nothing in it can be scanned, and the sample answer
   (label, figure, sentence, facts, actions) stays hidden until a good run. */
.wpth-qr-wait {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	margin: 4px 0 0;
}

.wpth-qr-wait[hidden],
.wpth-panel__results:not(.is-waiting) .wpth-qr-wait {
	display: none;
}

.wpth-qr-wait__box {
	width: 120px;
	aspect-ratio: 1;
	border: 2px dashed var(--wpth-field-line);
	border-radius: 8px;
	background: var(--wpth-tint);
}

.wpth-qr-wait__text {
	margin: 0;
	font-size: 16px;
	color: var(--wpth-text-2);
}

.wpth-panel__results.is-waiting :is(.wpth-answer__label, .wpth-answer__row, .wpth-answer__summary, .wpth-facts, .wpth-actions) {
	display: none;
}

.wpth-qr__code {
	width: 240px;
	max-width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--wpth-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.wpth-qr__code svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* C23: beside the form the code is the answer, so it gets the room
   (300px, against about 190px seen at 1280 and qr-zy's 288px). */
@container (min-width: 821px) {
	.wpth-qr__code {
		width: 300px;
	}
}

/* C24: the household card's live preview replaces the bare code; it is the
   print element at screen sizes, black on white like the paper. */
.wpth-qr--preview .wpth-qr__code {
	display: none;
}

.wpth-qr__preview {
	width: 100%;
	max-width: 360px;
}

.wpth-qr__preview[hidden] {
	display: none;
}

.wpth-qr__preview .wpth-qr-sign {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 20px 16px;
	border: 1px solid var(--wpth-line);
	border-radius: 8px;
	background: #fff;
	font-family: var(--wpth-font);
	line-height: 1.35;
	text-align: center;
	color: #000;
}

.wpth-qr__preview .wpth-qr-sign--letter {
	aspect-ratio: 8.5 / 11;
}

.wpth-qr__preview .wpth-qr-sign--card-4x6 {
	width: 75%;
	aspect-ratio: 4 / 6;
	justify-content: center;
	border: 1px dashed #8a8a8a;
	border-radius: 0;
}

.wpth-qr__preview .wpth-qr-sign p {
	margin: 0;
}

.wpth-qr__preview .wpth-qr-sign__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpth-qr__preview .wpth-qr-sign__name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.wpth-qr__preview .wpth-qr-sign__code {
	width: 55%;
	aspect-ratio: 1;
}

.wpth-qr__preview .wpth-qr-sign__code svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wpth-qr__preview .wpth-qr-sign__how {
	font-size: 12px;
}

.wpth-qr__preview .wpth-qr-sign__extra {
	width: 100%;
	font-size: 11px;
	text-align: left;
	overflow-wrap: anywhere;
}

.wpth-qr__preview .wpth-qr-sign__pw {
	font-size: 13px;
	font-weight: 600;
}

/* Four-up: one card shown, at its 3.5 x 2 in shape, code beside the text. */
.wpth-qr__preview .wpth-qr-sign--cards-4up {
	padding: 0;
	border: 0;
	background: none;
}

.wpth-qr__preview .wpth-qr-sign__card {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 3.5 / 2;
	padding: 12px;
	border: 1px dashed #8a8a8a;
	background: #fff;
	text-align: left;
}

.wpth-qr__preview .wpth-qr-sign__card .wpth-qr-sign__code {
	flex: 0 0 42%;
	width: 42%;
}

.wpth-qr__preview .wpth-qr-sign__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.wpth-qr__preview .wpth-qr-sign__card .wpth-qr-sign__name {
	font-size: 16px;
}

.wpth-qr__preview .wpth-qr-sign__cut {
	font-size: 12px;
	color: var(--wpth-text-2);
}

/* The theme pads every figcaption 10px; this one aligns with the code's edge. */
.wpth-tool .wpth-qr__caption {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text-2);
}

.wpth-qr__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.wpth-tool .wpth-qr__actions .wpth-link {
	min-height: 44px;
}

.wpth-tool .wpth-qr__option .wpth-field__label {
	font-size: 14px;
	color: var(--wpth-text-2);
}

/* The printable sign: attached to <body> only while printing (tools.js). */
.wpth-qr-sign {
	display: none;
}

/* One page on US Letter and A4 alike. The theme's print sheet sets
   `@page { margin: 2cm 0.5cm }`, which pushed "Ask for help" onto a second
   Letter page (review, 8-Oct); the sign takes its own named page, and the
   sizes below still fit inside the theme's margins where a browser ignores
   named pages. Labeled lines share one left edge under the centered code. */
@media print {
	@page wpth-sign {
		margin: 12mm;
	}

	body.wpth-printing-sign > :not(.wpth-qr-sign) {
		display: none !important;
	}

	body.wpth-printing-sign .wpth-qr-sign {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4mm;
		padding: 0;
		font-family: var(--wpth-font, "Inter", sans-serif);
		line-height: 1.35;
		text-align: center;
		color: #000;
		page: wpth-sign;
		break-inside: avoid;
	}

	.wpth-qr-sign p {
		margin: 0;
		break-inside: avoid;
	}

	.wpth-qr-sign__eyebrow {
		font-size: 13pt;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.wpth-qr-sign__name {
		font-size: 26pt;
		font-weight: 700;
		line-height: 1.15;
		overflow-wrap: anywhere;
	}

	.wpth-qr-sign__code {
		width: 90mm;
		height: 90mm;
	}

	.wpth-qr-sign__code svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.wpth-qr-sign__how {
		max-width: 130mm;
		font-size: 13pt;
	}

	.wpth-qr-sign__extra {
		width: 150mm;
		max-width: 100%;
		font-size: 12pt;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.wpth-qr-sign__pw {
		font-size: 16pt;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	/* C25: a 4 x 6 in card, drawn at size with a dashed cut line, so it
	   prints right on Letter, A4 or 4 x 6 photo paper alike. */
	body.wpth-printing-sign .wpth-qr-sign--card-4x6 {
		box-sizing: border-box;
		width: 4in;
		height: 6in;
		justify-content: center;
		gap: 2.5mm;
		padding: 0.25in;
		border: 0.3mm dashed #777;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__eyebrow {
		font-size: 10pt;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__name {
		font-size: 18pt;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__code {
		width: 60mm;
		height: 60mm;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__how {
		font-size: 10pt;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__extra {
		width: 100%;
		font-size: 9pt;
	}

	.wpth-qr-sign--card-4x6 .wpth-qr-sign__pw {
		font-size: 12pt;
	}

	/* Four 3.5 x 2 in cards, two by two, each inside its own dashed cut line. */
	body.wpth-printing-sign .wpth-qr-sign--cards-4up {
		display: grid;
		grid-template-columns: repeat(2, 3.5in);
		grid-auto-rows: 2in;
		justify-content: center;
		gap: 0;
	}

	.wpth-qr-sign__card {
		display: flex;
		align-items: center;
		gap: 3mm;
		box-sizing: border-box;
		padding: 0.15in;
		border: 0.3mm dashed #777;
		text-align: left;
	}

	.wpth-qr-sign__card .wpth-qr-sign__code {
		flex: 0 0 1.5in;
		width: 1.5in;
		height: 1.5in;
	}

	.wpth-qr-sign__text {
		display: grid;
		gap: 1mm;
		min-width: 0;
	}

	.wpth-qr-sign__card .wpth-qr-sign__eyebrow {
		font-size: 7pt;
	}

	.wpth-qr-sign__card .wpth-qr-sign__name {
		font-size: 12pt;
	}

	.wpth-qr-sign__card .wpth-qr-sign__how {
		font-size: 7.5pt;
	}

	.wpth-qr-sign__card .wpth-qr-sign__pw {
		font-size: 9pt;
	}

	.wpth-qr-sign__cut {
		font-size: 9pt;
		color: #555;
	}

	.wpth-qr-sign--cards-4up .wpth-qr-sign__cut {
		grid-column: 1 / -1;
		align-self: start;
		padding-top: 3mm;
		text-align: center;
	}
}

/* === Table (collapsed by default) ===================================== */

.wpth-table {
	margin: 32px 0 0;
}

.wpth-table[hidden] {
	display: none;
}

/* Saved scenarios: fields down the side, up to three scenarios across, so
   the table stays narrow enough for a phone. */
.wpth-scenarios {
	margin: 32px 0 0;
}

.wpth-scenarios[hidden] {
	display: none;
}

.wpth-tool .wpth-scenarios__table tbody tr.is-output th,
.wpth-tool .wpth-scenarios__table tbody tr.is-output td {
	font-weight: 700;
}

.wpth-tool .wpth-scenarios__table thead th:first-child {
	width: 34%;
}

/* A divider where the inputs end and the results begin. */
.wpth-tool .wpth-scenarios__table tbody tr.is-first-output th,
.wpth-tool .wpth-scenarios__table tbody tr.is-first-output td {
	box-shadow: inset 0 2px 0 var(--wpth-line);
}

.wpth-tool .wpth-scenarios__table .wpth-scenarios__actions td {
	padding-top: 10px;
	padding-bottom: 12px;
	background: #fff;
	box-shadow: inset 0 1px 0 var(--wpth-line);
}

.wpth-scenarios__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.wpth-tool .wpth-scenarios__action {
	height: auto;
	/* A 44px hit area around 14px text, as .wpth-link elsewhere (audit, 3-Oct: 33x28). */
	padding: 13px 6px;
	margin: -13px -6px;
	font-size: 14px;
	font-weight: 600;
}

.wpth-tool .wpth-scenarios__note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text-2);
}

.wpth-tool .wpth-table__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	cursor: pointer;
	list-style: none;
}

.wpth-tool .wpth-table__toggle::-webkit-details-marker {
	display: none;
}

.wpth-tool .wpth-table__toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.wpth-tool .wpth-table__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpth-tool .wpth-table[open] .wpth-table__toggle::before {
	transform: rotate(45deg);
}

.wpth-tool .wpth-table__toggle:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Title of an open table: the toggle's type, no chevron, not clickable, so
   in ink rather than the link color (audit, 1-Oct). */
.wpth-tool .wpth-table__title {
	margin: 0;
	/* One section-heading size under the panel: the chart title's (audit, 8-Oct). */
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

/* As wide as its columns need, from a 480px floor, left-aligned under its
   title (owner, 3-Oct): at 100% a two- or three-column table of short numbers
   spread across the 960px column with a wide gap between each label and its
   value (partner report). Long schedules still fill the column and scroll. */
.wpth-table__scroll {
	width: fit-content;
	min-width: min(100%, 480px);
	max-width: 100%;
	margin-top: 12px;
	overflow: auto hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border: 1px solid var(--color-primary-30, rgba(118, 57, 255, 0.3));
	border-radius: 8px;
}

/* A table wider than its box fades at the right edge so the scroll shows
   (iOS draws no bar until touched). tools.js measures it (is-measured) and
   sets is-scrollable while columns are hidden to the right, at any width:
   tables of 676px to 1302px had scrolled with no cue above 560px (design
   review group 2, 9-Oct). Without JavaScript the phone rule below still fades. */
.wpth-table__scroll.is-scrollable {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

/* On phones the label column wraps. */
@container (max-width: 560px) {
	.wpth-table__scroll:not(.is-measured) {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody th,
	:is(.wpth-tool, .wpth-ip) .wpth-table__table thead th:first-child {
		white-space: normal;
		min-width: 7em;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__table td.is-text {
		min-width: 12em;
	}
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table {
	width: 100%;
	margin: 0;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
	font-size: 16px;
	line-height: 26px;
	table-layout: auto;
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table thead th {
	padding: 15px 18px;
	border: none !important;
	background: var(--wpth-primary);
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	text-align: left;
	color: #fff;
	white-space: nowrap;
}

/* A header aligns with its values: right only over a numeric column (tools.js marks it). */
:is(.wpth-tool, .wpth-ip) .wpth-table__table thead th.is-num {
	text-align: right;
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table td,
:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody th {
	padding: 15px 18px;
	border: none !important;
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	text-align: left;
	vertical-align: top;
	color: var(--wpth-text);
	white-space: nowrap;
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody th {
	font-weight: 600;
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table td.is-text {
	min-width: 18em;
	white-space: normal;
	overflow-wrap: anywhere;
}

:is(.wpth-tool, .wpth-ip) .wpth-table__table td.is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* `table.copy`: a row's own Copy, a text action after the value it copies
   (S23, 9-Oct). The padding with a matching negative margin keeps a 44px
   hit area without growing the row, as on the answer's Copy. */
.wpth-tool .wpth-table__table .wpth-table__copy {
	margin: -8px 0 -8px 12px;
	padding-block: 8px;
	vertical-align: baseline;
}

/* Stripes as the theme's article table draws them (measured live on
   coinlaw.io, 21-Oct): the first body row white, every even row the light
   theme tint. The old rule shaded the odd rows grey, so the stripes started
   on the first row and wore the wrong color beside the article's tables. */
:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody tr:nth-child(even) th,
:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody tr:nth-child(even) td {
	background: var(--wpth-tint);
}

/* === Method note ===================================================== */

.wpth-method {
	margin: 40px 0 0;
	scroll-margin-top: 110px;
}

/* The method block wears the trackers' "About this data" panel (owner
   review, 28-Sep), matched to the theme's .tracker-about rules: paper
   ground, subtle border, 12px radius, 24px padding, a 16px title, then
   label and content rows on a 180px label column. Theme variables first,
   the CoinLaw theme's values as fallbacks. */
.wpth-about {
	padding: 24px;
	border: 1px solid var(--color-border-subtle, #dfe3e8);
	border-radius: 12px;
	background: var(--chart-paper, #fafaf7);
}

.wpth-tool .wpth-about__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-tool .wpth-about__list {
	margin: 0;
	padding: 0;
}

.wpth-tool .wpth-about__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	column-gap: 24px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var(--color-border-subtle, #dfe3e8);
}

.wpth-tool .wpth-about__row:last-child {
	padding-bottom: 0;
}

.wpth-tool .wpth-about__row dt {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-meta, #636b74);
}

.wpth-tool .wpth-about__row dd {
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4f565d;
}

.wpth-tool .wpth-about__row dd a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wpth-tool .wpth-about__row dd a:hover {
	color: var(--wpth-primary-dark);
}

.wpth-tool .wpth-about__updates {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-tool .wpth-about__updates li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-tool .wpth-about__updates li + li {
	margin-top: 6px;
}

.wpth-tool .wpth-about__updates time {
	margin-right: 8px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wpth-text);
}

/* A promise: the claim in ink, then the fact that makes it true. */
.wpth-promise__claim {
	font-weight: 600;
	color: var(--wpth-text);
}

/* Narrow columns stack the label over its content. */
@container (max-width: 560px) {
	.wpth-tool .wpth-about__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
	}
}

/* "How useful was this tool?": the About panel's Feedback row. */
.wpth-tool .wpth-vote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
}

.wpth-tool .wpth-vote__ask {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.wpth-tool .wpth-stars {
	display: inline-flex;
}

/* Not the theme's 55px button boxes: the row stays close to the height of
   its text (owner review, 1-Oct: the last row carried extra space). A 32px
   target, above WCAG 2.5.8's 24px, is the documented exception to the
   48px control minimum in coding-standards.md. */
.wpth-tool .wpth-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	color: var(--wpth-text-2);
	cursor: pointer;
}

.wpth-tool .wpth-star svg {
	fill: currentColor;
}

/* Hover or focus lights the star and every star before it; color only. */
.wpth-tool .wpth-stars:hover .wpth-star,
.wpth-tool .wpth-stars:has(.wpth-star:focus-visible) .wpth-star {
	color: var(--wpth-primary);
}

.wpth-tool .wpth-stars .wpth-star:hover ~ .wpth-star,
.wpth-tool .wpth-stars .wpth-star:focus-visible ~ .wpth-star {
	color: var(--wpth-text-2);
}

.wpth-tool .wpth-star:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* On touch screens the stars take the 44px HIG target with a gap, so a
   thumb cannot land on the neighbour (audit, 3-Oct). */
@media (pointer: coarse) {
	.wpth-tool .wpth-stars {
		gap: 4px;
	}

	.wpth-tool .wpth-star {
		width: 44px;
		height: 44px;
	}
}

.wpth-vote__stats:empty {
	display: none;
}

/* Turnstile's box, added on a star click and removed once it answers. It
   takes its own line so a challenge never squeezes the stars; tools.js reads
   its width to pick the compact widget below 300px. */
.wpth-tool .wpth-vote__check {
	flex-basis: 100%;
}

.wpth-method__privacy {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpth-text-2);
}

/* === Cards: hubs and the related-tools strip ========================== */

/*
 * Owner-approved design (mockup v6, 2026-09-27): a tinted band with a small
 * drawing of the tool's own answer, then chips, title, blurb and one more
 * result. Radii are the theme's, measured live: 8px cards (a.category-card,
 * the block table), 4px chips (span.category), 10px buttons. No pill
 * capsules anywhere; only the status dots are round.
 *
 * Six-column grid: a card spans two (three to a row). Render::card_spans()
 * turns a lone last card into a full-row horizontal card (is-wide) and a
 * last pair into halves (is-half), so no row ends with an empty hole.
 *
 * Link selectors carry three classes: the theme's `.page .entry-content a`
 * (0,2,1) underlines links and loads after this stylesheet.
 */
.wpth-tool,
.wpth-hub,
.wpth-related {
	--wpth-card-line: color-mix(in srgb, var(--wpth-primary) 12%, #fff);
	--wpth-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--wpth-live: var(--wpth-gain);
}

.wpth-related .wpth-cards,
.wpth-hub .wpth-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-related .wpth-cards > .wpth-card,
.wpth-hub .wpth-cards > .wpth-card {
	grid-column: span 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-related .wpth-cards > .wpth-card::before,
.wpth-hub .wpth-cards > .wpth-card::before {
	content: none;
}

.wpth-cards > .wpth-card.is-half {
	grid-column: span 3;
}

.wpth-cards > .wpth-card.is-wide {
	grid-column: 1 / -1;
}

@container (max-width: 760px) {
	.wpth-related .wpth-cards,
	.wpth-hub .wpth-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.wpth-related .wpth-cards > .wpth-card,
	.wpth-hub .wpth-cards > .wpth-card,
	.wpth-cards > .wpth-card.is-half {
		grid-column: span 1;
	}
}

@container (max-width: 520px) {
	.wpth-related .wpth-cards,
	.wpth-hub .wpth-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpth-cards .wpth-card .wpth-card__link,
.wpth-cards .wpth-card .wpth-card__link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wpth-card-line);
	border-radius: 8px;
	background: #fff;
	color: var(--wpth-text);
	text-decoration: none;
	transition: border-color 0.3s ease;
}

.wpth-cards .wpth-card .wpth-card__link:hover {
	border-color: var(--wpth-primary);
	text-decoration: none;
}

.wpth-cards .wpth-card .wpth-card__link:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-card__band {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	height: 156px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wpth-card-line);
	background: var(--wpth-tint);
}

.wpth-card__cap {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wpth-text-2-tint);
}

.wpth-card__cap span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wpth-card__cap > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpth-card__cap > span:last-child {
	flex: 0 0 auto;
	max-width: 60%;
	text-align: right;
}

.wpth-card__figure {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wpth-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Only long text (a URL, a user agent) may wrap; a number never splits. */
.wpth-card__figure.is-long {
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.wpth-card__note {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wpth-text);
}

.wpth-card__band > .wpth-v {
	margin-top: auto;
}

.wpth-card__band > .wpth-v--sub,
.wpth-card__band > .wpth-v--live {
	margin-top: 10px;
}

.wpth-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.wpth-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}

.wpth-card__chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--wpth-tint);
	font-size: 12px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
}

.wpth-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-card__blurb {
	margin: 6px 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wpth-text-2);
}

.wpth-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wpth-card-line);
}

.wpth-card__result {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wpth-text);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.wpth-card__result > span {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--wpth-text-2);
}

.wpth-card__go {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--wpth-tint);
	font-size: 16px;
	color: var(--wpth-primary-dark);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wpth-card__link:hover .wpth-card__go {
	background: var(--wpth-primary);
	color: #fff;
}

/* The lone last card spans the row, band beside body. */
@container (min-width: 761px) {
	.wpth-cards .wpth-card.is-wide .wpth-card__link {
		flex-direction: row;
	}

	.wpth-card.is-wide .wpth-card__band {
		width: 42%;
		height: auto;
		min-height: 180px;
		border-right: 1px solid var(--wpth-card-line);
		border-bottom: 0;
	}
}

/* --- The small drawings ------------------------------------------------ */

.wpth-v--bits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.wpth-v-octet {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 2px;
}

.wpth-v--bits i {
	height: 16px;
	border-radius: 3px;
	background: var(--wpth-s0);
}

.wpth-v--bits i.is-host {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wpth-s1);
}

.wpth-v--strip,
.wpth-v--bars {
	display: flex;
	align-items: flex-end;
	height: 44px;
}

.wpth-v--strip {
	gap: 2px;
}

.wpth-v--strip i {
	flex: 1 1 0;
	height: 100%;
	border-radius: 2px;
	background: var(--wpth-s0);
	transform-origin: bottom;
}

.wpth-v--strip i.is-dip {
	height: 58%;
	background: var(--wpth-s1);
}

.wpth-v--bars {
	gap: 4px;
}

.wpth-v--bars i {
	flex: 1 1 0;
	height: calc(var(--h) * 100%);
	border-radius: 3px 3px 0 0;
	background: var(--wpth-s0);
	transform-origin: bottom;
}

.wpth-v--line {
	display: block;
	width: 100%;
	height: 44px;
	overflow: visible;
}

.wpth-v-path {
	fill: none;
	stroke: var(--wpth-s0);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.wpth-v-path--0:has(+ .wpth-v-path--1) {
	stroke: var(--wpth-s1);
}

.wpth-v-zero {
	stroke: var(--wpth-text-2);
	stroke-width: 1px;
	stroke-dasharray: 3 3;
	opacity: 0.6;
	vector-effect: non-scaling-stroke;
}

.wpth-v-track {
	position: relative;
	display: block;
	height: 10px;
	overflow: hidden;
	border-radius: 3px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wpth-card-line);
}

.wpth-v--split .wpth-v-track {
	background: var(--wpth-s1);
	box-shadow: none;
}

.wpth-v-fill {
	display: block;
	width: calc(var(--f) * 100%);
	height: 100%;
	border-radius: 3px;
	background: var(--wpth-s0);
	transform-origin: left;
}

.wpth-v--split .wpth-v-fill {
	border-right: 2px solid var(--wpth-tint);
	border-radius: 3px 0 0 3px;
}

.wpth-v-ticks {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-text-2-tint);
	font-variant-numeric: tabular-nums;
}

.wpth-v--split .wpth-v-ticks span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wpth-v--split .wpth-v-ticks span::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wpth-s0);
}

.wpth-v--split .wpth-v-ticks .is-b::before {
	background: var(--wpth-s1);
}

.wpth-card__band > .wpth-v--screen {
	position: absolute;
	right: 20px;
	bottom: 22px;
	width: 78px;
	height: 48px;
	margin: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--wpth-s0);
}

.wpth-v--screen i {
	position: absolute;
	top: 6px;
	left: 7px;
	width: calc(var(--vw) * 64px);
	height: calc(var(--vh) * 36px);
	border-radius: 3px;
	background: color-mix(in srgb, var(--wpth-s0) 16%, #fff);
	box-shadow: inset 0 0 0 1px var(--wpth-s1);
	transform-origin: top left;
}

.wpth-v--screen b {
	position: absolute;
	bottom: -9px;
	left: 50%;
	width: 22px;
	height: 6px;
	margin-left: -11px;
	border-radius: 2px;
	background: var(--wpth-s0);
}

.wpth-v--live {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	height: 28px;
	padding: 0 10px;
	border-radius: 4px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wpth-card-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--wpth-gain);
}

.wpth-v--live i {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wpth-live);
}

.wpth-v--live i::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wpth-live);
	opacity: 0;
}

.wpth-v--sub {
	display: -webkit-box;
	height: auto;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wpth-primary-dark);
	overflow-wrap: anywhere;
}

/* === Featured tile ==================================================== */

/*
 * The theme's hero surface, value for value (measured live 2026-09-27):
 * radial-gradient(105% 120% at 78% 0%, light 0%, primary 34%, deep 100%),
 * the theme's own bg-pattern.svg at its native 1440 x 552 (130px cells)
 * anchored top-right under radial-gradient(80% 90% at 60% 10%) as a mask,
 * and a Roboto Serif title in the secondary color like the page H1. The
 * masthead grid is the owner-exempt in-house pattern (Superpixels).
 */
.wpth-hub .wpth-hub__section a.wpth-feature,
.wpth-hub .wpth-hub__section a.wpth-feature:visited {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 36px;
	align-items: center;
	margin: 0 0 20px;
	padding: 40px;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--wpth-primary);
	background-image: radial-gradient(105% 120% at 78% 0%, var(--wpth-hero-light, color-mix(in srgb, var(--wpth-primary) 85%, #fff)) 0%, var(--wpth-primary) 34%, var(--wpth-hero-deep, color-mix(in srgb, var(--wpth-primary) 72%, #000)) 100%);
	color: #fff;
	text-decoration: none;
}

.wpth-hub .wpth-hub__section a.wpth-feature:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wpth-hero-pattern, none) 100% 0 / 1440px 552px no-repeat;
	-webkit-mask-image: radial-gradient(80% 90% at 60% 10%, #000, transparent);
	mask-image: radial-gradient(80% 90% at 60% 10%, #000, transparent);
	pointer-events: none;
}

.wpth-feature > span {
	position: relative;
}

.wpth-feature__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.wpth-feature__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	/* The dot side sits a little closer to its curve, as the dot fills it. */
	padding: 0 16px 0 14px;
	border-radius: 999px;
	/* A darkening tint, not a lightening one: 12px white on 14% white fell under 4.5:1 (audit, 27-Sep). */
	background: rgba(0, 0, 0, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wpth-feature__pill i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-secondary, #c2fa4d);
}

.wpth-feature__title {
	display: block;
	margin: 16px 0 10px;
	font-family: "Roboto Serif", "Roboto Serif Fallback", Georgia, serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-secondary, #c2fa4d);
}

.wpth-feature__lead {
	display: block;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
}

.wpth-feature__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}

.wpth-feature__point {
	display: inline-flex;
	align-items: center;
	/* A capsule's round ends take half its height, so the side padding is at
	   least that much or the text crowds the curve (decision 8-Oct). */
	height: 32px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.18);
	font-size: 13px;
	font-weight: 600;
}

.wpth-feature__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.wpth-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 55px;
	padding: 0 25px;
	border-radius: 10px;
	background: var(--color-secondary, #c2fa4d);
	font-size: 16px;
	font-weight: 600;
	color: #000;
	transition: background-color 0.3s ease;
}

.wpth-feature:hover .wpth-feature__cta {
	background: var(--color-secondary-dark, #b5eb45);
}

.wpth-feature__meta {
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}

.wpth-feature__stage {
	display: block;
	min-width: 0;
	padding: 18px 0 18px 18px;
}

.wpth-feature__stage::before {
	content: "";
	position: absolute;
	inset: 0 24px 0 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	transform: rotate(-3deg);
}

.wpth-feature__ui {
	position: relative;
	display: block;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(3, 24, 56, 0.25);
	color: var(--wpth-text);
}

.wpth-feature__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpth-text-2);
}

.wpth-feature__field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* A floor, not a fixed height: the text wraps rather than truncating
	 * (design review, 1-Oct), so a long sample such as the token counter's
	 * prompt grows the box instead of spilling out of it (owner, 3-Oct). */
	min-height: 44px;
	margin: 6px 0 16px;
	padding: 10px 14px;
	line-height: 1.35;
	border: 1px solid var(--wpth-line-2);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wpth-input-ink);
	font-variant-numeric: tabular-nums;
}

.wpth-feature__field > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wpth-feature__field > em {
	flex: 0 0 auto;
	font-style: normal;
	font-weight: 500;
	color: var(--wpth-text-2);
}

.wpth-feature__hero {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.wpth-feature__figure {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wpth-feature__figure.is-long {
	font-size: 20px;
	white-space: normal;
	overflow-wrap: anywhere;
}

.wpth-feature__hero > span:last-child {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpth-text-2);
}

.wpth-feature__ui > .wpth-v {
	margin: 12px 0 14px;
}

.wpth-feature__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin-top: 4px;
	border-top: 1px solid var(--wpth-card-line);
}

.wpth-feature__facts > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--wpth-card-line);
	font-size: 12px;
	color: var(--wpth-text-2);
}

.wpth-feature__facts > span:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.wpth-feature__fact {
	font-size: 14px;
	font-weight: 700;
	color: var(--wpth-text);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.wpth-feature__fact.is-long {
	font-size: 13px;
}

/* Live featured tools: the note waits in the hero until the browser fills
 * it; empty facts show a still placeholder bar (no looping shimmer). */
.wpth-feature__figure.is-note {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wpth-text-2);
	white-space: normal;
}

.wpth-feature [data-live-fact]:empty::before {
	content: "";
	display: block;
	width: 70%;
	height: 14px;
	margin-top: 4px;
	border-radius: 4px;
	background: var(--wpth-tint);
}

/* Without the script (or when the lookup fails) a live tile shows its note
 * alone: empty fact slots would read as broken. cards.js adds js-live. */
.wpth-feature[data-live-tool]:not(.js-live) .wpth-feature__facts,
.wpth-feature.is-failed .wpth-feature__facts {
	display: none;
}

@container (max-width: 820px) {
	.wpth-hub .wpth-hub__section a.wpth-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px;
	}
}

@container (max-width: 520px) {
	.wpth-hub .wpth-hub__section a.wpth-feature {
		padding: 24px 20px;
	}

	.wpth-feature__title {
		font-size: 26px;
	}

	.wpth-feature__stage {
		padding: 12px 0 12px 8px;
	}
}

/* === One-time motion ================================================== */

/*
 * cards.js adds .wpth-motion (never for reduced motion) and .is-in once a
 * card is half in view. Each drawing then builds once, slowly (about 2 to
 * 2.5 seconds, owner 27-Sep: faster went unnoticed), and rests on its final
 * state. No hover movement and nothing loops (Superpixels motion rule).
 */
@media (prefers-reduced-motion: no-preference) {
	.wpth-motion .wpth-v--bits i {
		animation: wpth-bit 0.7s var(--wpth-ease) both paused;
	}

	.wpth-motion .wpth-v-octet:nth-child(1) i {
		animation-delay: calc(300ms + var(--k) * 55ms);
	}

	.wpth-motion .wpth-v-octet:nth-child(2) i {
		animation-delay: calc(740ms + var(--k) * 55ms);
	}

	.wpth-motion .wpth-v-octet:nth-child(3) i {
		animation-delay: calc(1180ms + var(--k) * 55ms);
	}

	.wpth-motion .wpth-v-octet:nth-child(4) i {
		animation-delay: calc(1620ms + var(--k) * 55ms);
	}

	.wpth-motion .wpth-v--strip i {
		animation: wpth-grow-y 0.7s var(--wpth-ease) both paused;
		animation-delay: calc(300ms + var(--k) * 45ms);
	}

	.wpth-motion .wpth-v--bars i {
		animation: wpth-grow-y 1s var(--wpth-ease) both paused;
		animation-delay: calc(300ms + var(--k) * 130ms);
	}

	/* A left-to-right reveal: stroke dashes misdraw under non-scaling-stroke. */
	.wpth-motion .wpth-v--line {
		animation: wpth-reveal 2.2s var(--wpth-ease) 0.3s both paused;
	}

	.wpth-motion .wpth-v-fill {
		animation: wpth-grow-x 2s var(--wpth-ease) 0.3s both paused;
	}

	.wpth-motion .wpth-v--screen i {
		animation: wpth-pop 1.8s var(--wpth-ease) 0.3s both paused;
	}

	.wpth-motion .wpth-v--live i::after {
		animation: wpth-ripple 2s ease-out 0.3s 2 paused;
	}

	.wpth-motion .is-in .wpth-v--bits i,
	.wpth-motion .is-in .wpth-v--strip i,
	.wpth-motion .is-in .wpth-v--bars i,
	.wpth-motion .is-in .wpth-v--line,
	.wpth-motion .is-in .wpth-v-fill,
	.wpth-motion .is-in .wpth-v--screen i,
	.wpth-motion .is-in .wpth-v--live i::after {
		animation-play-state: running;
	}
}

@keyframes wpth-bit {
	from {
		opacity: 0;
		transform: scaleY(0.3);
	}
}

@keyframes wpth-grow-y {
	from {
		transform: scaleY(0.08);
	}
}

@keyframes wpth-grow-x {
	from {
		transform: scaleX(0);
	}
}

@keyframes wpth-reveal {
	from {
		clip-path: inset(-4px 100% -4px -4px);
	}

	to {
		clip-path: inset(-4px);
	}
}

/* Named apart from the chart's wpth-grow: a later @keyframes with the same
   name replaces the earlier one everywhere, so chart bars entered with this
   scale-and-fade instead of rising from the baseline (audit, 8-Oct). */
@keyframes wpth-pop {
	from {
		opacity: 0.2;
		transform: scale(0.2);
	}
}

@keyframes wpth-ripple {
	from {
		opacity: 0.45;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(3.2);
	}
}

@media print {
	.wpth-motion * {
		animation: none !important;
	}
}

/* === Related tools =================================================== */

/* Rendered after the page copy (Render::append_related), so it is its own
 * container and token root rather than a child of .wpth-tool. */
.wpth-related {
	container-type: inline-size;
	margin: 48px 0 0;
}

.wpth-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 16px;
}

.wpth-related .wpth-related__head .wpth-related__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpth-text);
}

.wpth-related .wpth-related__head a.wpth-related__all,
.wpth-related .wpth-related__head a.wpth-related__all:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wpth-primary-dark);
	text-decoration: none;
}

.wpth-related .wpth-related__head a.wpth-related__all:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* === Hub ============================================================= */

.wpth-hub {
	container-type: inline-size;
	margin: 0 0 48px;
}

.wpth-hub__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}

.wpth-hub .wpth-hub__jump a.wpth-hub__jump-link,
.wpth-hub .wpth-hub__jump a.wpth-hub__jump-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wpth-edge);
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--wpth-text);
	text-decoration: none;
	transition: border-color 0.3s ease;
}

.wpth-hub .wpth-hub__jump a.wpth-hub__jump-link:hover {
	border-color: var(--wpth-primary);
}

.wpth-hub .wpth-hub__jump a.wpth-hub__jump-link:focus-visible,
.wpth-related .wpth-related__head a.wpth-related__all:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-hub__jump-count {
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--wpth-tint);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: var(--wpth-primary-dark);
}

.wpth-hub__section {
	scroll-margin-top: 110px;
}

.wpth-hub__section + .wpth-hub__section {
	margin-top: 56px;
}

.wpth-hub__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 0 0 4px;
}

.wpth-hub .wpth-hub__heading {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.24;
	color: var(--wpth-text);
}

.wpth-hub__count {
	font-size: 15px;
	font-weight: 500;
	color: var(--wpth-text-2);
}

.wpth-hub__tagline {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wpth-text-2);
}

/* Last in the content, the block leaves spacing to the theme: its section
 * padding (50px) plus the newsletter's margin (50px). Our 48px on top made a
 * 148px gap (owner, 27-Sep). Copy that follows keeps the 48px. */
.wpth-hub:last-child,
.wpth-tool:last-child {
	margin-bottom: 0;
}

.wpth-hub__empty {
	font-size: 16px;
	color: var(--wpth-text-2);
}

/* === Sticky answer on phones ========================================= */

.wpth-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wpth-line);
	background: #fff;
	box-shadow: 0 -4px 12px rgba(21, 21, 21, 0.06);
}

.wpth-sticky[hidden] {
	display: none;
}

.wpth-sticky__label {
	/* The label yields first; the figure is what the bar exists for (audit, 1-Oct). */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpth-text-2);
}

.wpth-sticky__value {
	flex: 0 0 auto;
	max-width: 70%;
	overflow: hidden;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wpth-text);
	/* One line: a long user agent or URL must not cover the phone screen. */
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.wpth-sticky {
		display: none !important;
	}
}

/* A scrollable table takes keyboard focus (tabindex 0) so arrows scroll
   it; it needs the same ring as every control. */
.wpth-tool .wpth-table__scroll:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

/* === Touch =========================================================== */

@media (pointer: coarse) {
	.wpth-tool .wpth-chip {
		min-height: 44px;
	}

	.wpth-tool .wpth-link {
		min-height: 44px;
	}
}

/* `*` never matches pseudo-elements, so they are listed too (the fold arrow is a ::before). */
@media (prefers-reduced-motion: reduce) {
	.wpth-tool *,
	.wpth-tool *::before,
	.wpth-tool *::after,
	.wpth-hub *,
	.wpth-hub *::before,
	.wpth-hub *::after {
		transition: none !important;
	}
}

/* === Editor placeholder ============================================== */

.wpth-editor-placeholder {
	padding: 24px;
	border: 1px dashed #e0e0e0;
	border-radius: 10px;
	background: var(--color-bg-theme-light, #f8f4ff);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wpth-editor-placeholder p {
	margin: 4px 0 0;
	font-size: 14px;
	color: #737373;
}

/* Article copy on a tool page: a DMARC example string pushed the page 103px
   wide at 375 (audit, 1-Oct); the theme hides the overflow, so the line
   was simply cut. */
.wpth-page .entry-content :is(p, li) {
	overflow-wrap: anywhere;
}

/* Tables in the page copy span the 960px tool column. The theme caps
   .page .wp-block-table at 800px, the width of a single post's column, so on
   a tool page a table stopped short of the text above it (owner, 2-Oct). The
   theme's own horizontal scroll inside the figure stays for narrow screens. */
.wpth-page .entry-content .wp-block-table {
	max-width: none;
}

/* === Tool page hero (Layout::tool_hero) ================================ */

/* The article column on a full-width tool page is 960px, narrower than the
   glossary hero this reuses, so the hero text lines up with the copy. */
/* The content wrap pads 0 left / 10px right, the hero wrap 10/10; the extra
   10px here centers the hero's 960px column exactly over the copy's. */
/* Compact band (owner mockup approved 1-Oct): breadcrumb, title and one meta
   line, 31px above the breadcrumb and 31px below the byline (26 + 5, owner 1-Oct), so the
   calculator sits on screen at 1440x900. The theme's author popups keep
   their markup; only the byline's layout changes. */
/* The theme's hero pads its top by the header height (the header overlaps
   it); the 70px band padding lives on .wrap, so that is where 26px goes. */
.wpth-hero.is-compact {
	padding-bottom: 0;
}

/* Four classes plus the element: the theme's own band rule outranks a
   two-class selector here (measured on staging, 1-Oct). */
section.hero-section.small.wpth-hero.is-compact > .wrap {
	padding-top: 31px;
	padding-bottom: 31px;
}

/* The gaps between breadcrumb, title and byline are the single post's:
   the theme's 22px column gap, with the title's -4px top margin (18px
   measured on a post, 1-Oct). No margins of our own. */
/* The theme gives #breadcrumbs 15px on pages (`.page .hero-section #breadcrumbs`); posts get 0. */
.page .hero-section.wpth-hero.is-compact #breadcrumbs {
	margin-bottom: 0;
}

.wpth-hero #breadcrumbs a {
	display: inline-block;
	/* 44px tall hit area with a matching negative margin, so the trail keeps
	   its line height (audit, 8-Oct: "Home" was 40x26). */
	padding: 9px 4px;
	margin: -9px -4px;
}

.wpth-hero.is-compact .entry-title {
	margin: -4px 0 0;
}

.wpth-hero .wpth-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 28px;
}

.wpth-hero .wpth-hero__meta .post-attr {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	/* The theme fixes this row at 50px; a wrapped second author then spilled
	   out of the band on phones (measured 375px, 1-Oct). */
	height: auto;
	margin: 0;
}

.wpth-hero .wpth-hero__meta .post-author-block {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* Theme 3.168.0 moves the avatar and name inside a real button; the 10px
   avatar gap moves with them. */
.wpth-hero .wpth-hero__meta .author-popup-trigger {
	gap: 10px;
}

.wpth-hero .wpth-hero__meta .post-author-info {
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: baseline;
}

.wpth-hero .wpth-hero__meta .post-author-label {
	margin: 0;
}

.wpth-hero .wpth-hero__meta .wpth-hero__date {
	margin: 0;
}

@media (min-width: 700px) {
	.wpth-hero .wpth-hero__meta .wpth-hero__date::before {
		content: "";
		display: inline-block;
		width: 3px;
		height: 3px;
		margin: 0 12px 3px 0;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.6;
		vertical-align: middle;
	}
}

.wpth-hero .wrap {
	padding-right: 20px;
}

.wpth-hero .post-meta {
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}


/* === Router IP facts (wp-tools-hub/router-ip) ======================== */

.wpth-ip {
	margin: 32px 0;
	font-family: var(--wpth-font, "Inter", sans-serif);
	color: var(--wpth-text, #2f1854);
}

.wpth-ip__caption {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	caption-side: top;
}

.wpth-ip__table th[scope="row"] {
	font-weight: 600;
	white-space: nowrap;
}

.wpth-ip__subhead {
	margin: 24px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.wpth-ip__catches {
	margin: 0;
	padding-left: 20px;
}

.wpth-ip__catches li {
	margin: 0 0 8px;
}

.wpth-ip__checked {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--wpth-text-2, #737373);
}

/* === Task hub (wp-tools-hub/journeys) ================================ */

.wpth-journeys {
	margin: 32px 0;
	font-family: var(--wpth-font, "Inter", sans-serif);
	color: var(--wpth-text, #2f1854);
}

.wpth-journeys__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.wpth-journeys__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.wpth-journeys__item {
	margin: 0;
}

.wpth-journeys__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: 48px;
	padding: 16px 18px;
	/* The hub cards' edge and hover, so the two card kinds read as one family (audit, 3-Oct). */
	border: 1px solid var(--wpth-card-line, #ebe5ff);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s ease;
}

.wpth-journeys__link:hover {
	border-color: var(--wpth-primary, #7639ff);
}

.wpth-journeys__link:focus-visible {
	outline: 2px solid var(--wpth-primary, #7639ff);
	outline-offset: 2px;
}

.wpth-journeys__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.wpth-journeys__blurb {
	font-size: 14px;
	line-height: 1.45;
	color: var(--wpth-text-2-tint, #5a5a5a);
}

.wpth-journeys__ips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpth-journeys__ips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wpth-line-2, #b3b3b3);
	border-radius: 4px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* === Results strip, tones, tips, value chips, formula, badges (9-Oct) =====
   The TradeZella benchmark patterns T1 to T7 the owner approved on the
   before/after page. Theme tokens only: no shadows, no gradients, no hover
   lift; hover changes color. Gain and loss always travel with a plus or
   minus sign or a word, never color alone. */

.wpth-tool .is-gain {
	color: var(--wpth-gain);
}

.wpth-tool .is-loss {
	color: var(--wpth-danger);
}

/* T1: the facts as two-by-two stat tiles (four tiles in one row ran 85px
   wide in the desktop results column). Still a definition list. */
.wpth-facts.wpth-facts--strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	border-top: 0;
}

.wpth-facts--strip .wpth-fact,
.wpth-facts--strip .wpth-fact.wpth-fact--stack {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4px;
	padding: 12px 16px;
	border: 1px solid var(--wpth-edge);
	border-radius: 8px;
}

.wpth-tool .wpth-facts--strip .wpth-fact__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* The strip measures itself: a tile value steps 15, 16, 18px with the
   strip's width (type scale sizes, no fractional clamp), so "+$1,000.00"
   never breaks mid-figure in a phone's 125px tile (9-Oct screenshot).
   Text values still wrap at spaces. */
.wpth-facts.wpth-facts--strip {
	container-type: inline-size;
}

.wpth-tool .wpth-facts--strip .wpth-fact .wpth-fact__value {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	flex-shrink: 1;
}

@container (min-width: 280px) {
	.wpth-tool .wpth-facts--strip .wpth-fact .wpth-fact__value {
		font-size: 16px;
	}
}

@container (min-width: 340px) {
	.wpth-tool .wpth-facts--strip .wpth-fact .wpth-fact__value {
		font-size: 18px;
	}
}

/* T6: the formula in one plain line, then the reader's numbers in it. A
   top rule like the facts list, not a fifth box inside the card (design
   review, 9-Oct: three levels of framing). */
.wpth-formula {
	margin: 16px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--wpth-edge);
}

.wpth-tool .wpth-formula__text,
.wpth-tool .wpth-formula__worked {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.wpth-tool .wpth-formula__text {
	font-weight: 600;
	color: var(--wpth-text);
}

.wpth-tool .wpth-formula__worked {
	margin-top: 4px;
	color: var(--wpth-text-2-tint);
	font-variant-numeric: tabular-nums;
}

.wpth-panel__results.has-error .wpth-formula,
.wpth-panel__results.is-stale .wpth-formula {
	opacity: 0.5;
}

/* T5: a "?" button beside the label opens a tip with a worked example. */
.wpth-field__head {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	/* Two label lines are reserved in a two-column form, so a label the "?"
	   pushes onto a second line ("Stock price at expiration") does not drop
	   its input below the one beside it (9-Oct screenshot). */
	min-height: 36px;
	margin: 0 0 8px;
}

.wpth-field--wide .wpth-field__head {
	min-height: 0;
}

@container (max-width: 400px) {
	.wpth-field__head {
		min-height: 0;
	}
}

.wpth-tool .wpth-field__head .wpth-field__label {
	margin: 0;
}

/* A segmented group's tip sits in its legend, beside the label text. */
.wpth-tool .wpth-field__label.has-tip {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpth-tool .wpth-tip__toggle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wpth-edge);
	border-radius: 999px;
	background: var(--wpth-tint);
	font-family: var(--wpth-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--wpth-primary-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* A 44px target around the 24px circle (WCAG 2.5.8). */
.wpth-tool .wpth-tip__toggle::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.wpth-tool .wpth-tip__toggle:hover,
.wpth-tool .wpth-tip__toggle[aria-expanded="true"] {
	border-color: var(--wpth-primary);
	background: var(--wpth-primary);
	color: #fff;
}

.wpth-tool .wpth-tip__toggle:focus-visible {
	outline: 2px solid var(--wpth-primary);
	outline-offset: 2px;
}

.wpth-tool .wpth-tip {
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 1px solid var(--wpth-edge);
	border-radius: 8px;
	background: var(--wpth-tint);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wpth-text);
}

/* T7: one-tap values under a field. */
.wpth-field__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
}

.wpth-field__chips[hidden] {
	display: none;
}

/* Same size as the example chips, so the coarse-pointer 44px reaches them
   too (design review, 9-Oct: 13px chips stayed 36px on touch). */
.wpth-tool .wpth-chip.wpth-chip--value {
	font-variant-numeric: tabular-nums;
}

/* T3: six positions in three columns, two on a narrow form; each option
   shows its payoff shape over a zero line. */
.wpth-segmented--6 {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (max-width: 30em) {
	.wpth-segmented--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wpth-tool .wpth-segmented__option.has-icon {
	gap: 8px;
	justify-content: flex-start;
	text-align: left;
}

.wpth-segmented__icon {
	flex: none;
	width: 28px;
	height: 18px;
}

.wpth-segmented__icon path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wpth-segmented__icon line {
	stroke: currentColor;
	stroke-width: 1;
	stroke-dasharray: 2 2;
	opacity: 0.5;
}

/* T2: a result badge per row; the break-even row is tinted. */
:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody tr.is-even th,
:is(.wpth-tool, .wpth-ip) .wpth-table__table tbody tr.is-even td {
	background: var(--wpth-tint);
}

.wpth-badge {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.wpth-badge--gain {
	background: var(--wpth-gain-bg);
	color: var(--wpth-gain);
}

.wpth-badge--loss {
	background: var(--wpth-danger-bg);
	color: var(--wpth-danger);
}

.wpth-badge--max-gain {
	border-color: currentColor;
	color: var(--wpth-gain);
}

.wpth-badge--max-loss {
	border-color: currentColor;
	color: var(--wpth-danger);
}

.wpth-badge--even {
	border-color: var(--wpth-primary);
	background: #fff;
	color: var(--wpth-primary-dark);
}

/* T4: payoff zones and the break-even and price marks. */
.wpth-svg .wpth-zone {
	stroke: none;
}

.wpth-svg .wpth-zone--gain {
	fill: var(--wpth-gain);
	opacity: 0.12;
}

.wpth-svg .wpth-zone--loss {
	fill: var(--wpth-danger);
	opacity: 0.1;
}

.wpth-svg .wpth-vmark__line {
	stroke: var(--wpth-primary);
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
}

.wpth-svg .wpth-vmark__label {
	font-size: 12px;
	font-weight: 600;
	fill: var(--wpth-primary-dark);
}

.wpth-svg .wpth-vmark__dot {
	fill: #fff;
	stroke: var(--wpth-text);
	stroke-width: 2;
}

.wpth-svg .wpth-vmark__text,
.wpth-svg .wpth-vmark__label {
	/* A white outline keeps the label legible where it crosses the line or a zone. */
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 3px;
	stroke-linejoin: round;
}

.wpth-svg .wpth-vmark__text {
	font-size: 12px;
	font-weight: 700;
	fill: var(--wpth-text);
}

.wpth-svg.is-entering .wpth-zone,
.wpth-svg.is-entering .wpth-vmark__dot,
.wpth-svg.is-entering .wpth-vmark__text {
	animation: wpth-fade 240ms ease-out 360ms both;
}

@media (prefers-reduced-motion: reduce) {
	.wpth-svg.is-entering .wpth-zone,
	.wpth-svg.is-entering .wpth-vmark__dot,
	.wpth-svg.is-entering .wpth-vmark__text {
		animation: none;
	}
}

/* === Engine wave (9-Oct) ============================================= */

/* C15: an address field in a lookup runs on Enter, blur or Check. The
   button sits under the field with the line that says so beside it. */
.wpth-field__run {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}

.wpth-field__run .wpth-field__help {
	flex: 1 1 14em;
	margin: 0;
}

/* B2: on a phone a table with a text column becomes one card per row
   (tools.js and Render::router_ip() add is-stack). Each cell shows its
   column name from data-label; the header row stays for screen readers. */
.wpth-ip {
	container-type: inline-size;
}

@container (max-width: 560px) {
	.wpth-table__scroll.is-stack {
		width: 100%;
		min-width: 0;
		overflow: visible;
		border: none;
		border-radius: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack .wpth-table__table {
		display: block;
		background: transparent;
	}

	.wpth-table__scroll.is-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wpth-table__scroll.is-stack tbody {
		display: grid;
		gap: 8px;
	}

	.wpth-table__scroll.is-stack tbody tr {
		display: block;
		overflow: hidden;
		border: 1px solid var(--color-primary-30, rgba(118, 57, 255, 0.3));
		border-radius: 8px;
		background: #fff;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr > :is(th, td) {
		display: block;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
		text-align: left;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr:not(.is-even) > :is(th, td) {
		background: transparent;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr > th {
		padding: 12px 16px;
		background: var(--wpth-tint);
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr > td {
		display: grid;
		/* min() caps the label at 35% even when 6.5em is wider, which it is at
		   200% text: the old minmax(6.5em, 35%) left a money figure 61px and
		   wrapped it a character per line (design review group 2, 9-Oct). */
		grid-template-columns: minmax(min(6.5em, 35%), 35%) minmax(0, 1fr);
		gap: 12px;
		padding: 8px 16px;
	}

	/* A card too narrow for two columns at the reader's text size puts the
	   label above the value. The width is in em so it follows zoomed text. */
	@container (max-width: 18em) {
		:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr > td {
			grid-template-columns: minmax(0, 1fr);
			gap: 2px;
		}
	}

	.wpth-table__scroll.is-stack .wpth-badge {
		justify-self: start;
		max-width: 100%;
		white-space: normal;
	}

	:is(.wpth-tool, .wpth-ip) .wpth-table__scroll.is-stack tbody tr > td:last-child {
		padding-bottom: 12px;
	}

	.wpth-table__scroll.is-stack td::before {
		content: attr(data-label);
		font-size: 14px;
		font-weight: 600;
		color: var(--wpth-text-2-tint);
	}
}

/* Hub "Updated" line: the newest change to a listed tool page (hub schema, 22-Oct). */
.wpth-hub__updated {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--wpth-text-2-tint);
}