/* ==========================================================================
   Free tools (/tools/): shared styles. Loaded only on pages that contain a
   .wg-tool (inc/tools.php). Tokens come from the main stylesheet.
   Per-tool extras live in assets/css/tools/<slug>.css, scoped to
   .wg-tool[data-tool="<slug>"].
   ========================================================================== */

/* Tool pages: the hero is short so the tool sits above the fold on a phone. */
.hero--tool {
	padding-block: var(--space-l) var(--space-m);
}

.hero--tool .hero__lede {
	max-inline-size: var(--measure);
}

.section--tool {
	padding-block-start: 0;
}

/* --------------------------------------------------------------------------
   Tool shell: form on the left, result on the right (stacked on phones)
   -------------------------------------------------------------------------- */

/* GeneratePress sets border-box site-wide; repeat it here so the tools don't depend on it. */
.wg-tool,
.wg-tool *,
.wg-tool *::before,
.wg-tool *::after {
	box-sizing: border-box;
}

.wg-tool {
	background-color: var(--color-bg);
	border: var(--border-w) solid var(--color-border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-s);
	display: grid;
	gap: var(--space-l);
	padding: var(--space-m);
}

.wg-tool__form {
	display: grid;
	gap: var(--space-m);
	min-inline-size: 0;
}

.wg-tool__group {
	border: 0;
	display: grid;
	gap: var(--space-s);
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.wg-tool__group > legend,
.wg-tool__heading {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: var(--fw-semibold);
	margin: 0 0 var(--space-2xs);
	padding: 0;
}

.wg-tool__row {
	align-items: start;
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

/* Fields */
.wg-field {
	display: grid;
	gap: var(--space-3xs);
	min-inline-size: 0;
}

.wg-field > label,
.wg-field__label {
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
}

.wg-field__hint {
	color: var(--color-text-muted);
	font-size: var(--step--1);
	margin: 0;
}

.wg-field__control {
	align-items: stretch;
	display: flex;
}

.wg-tool input[type="text"],
.wg-tool input[type="number"],
.wg-tool input[type="date"],
.wg-tool input[type="email"],
.wg-tool input[type="tel"],
.wg-tool select,
.wg-tool textarea {
	background-color: var(--color-bg);
	border: var(--border-w) solid var(--color-border-strong);
	border-radius: var(--radius-s);
	color: var(--color-text);
	font: inherit;
	font-size: 1rem; /* 16px: stops iOS zooming into the field */
	inline-size: 100%;
	min-block-size: var(--tap);
	min-inline-size: 0;
	padding: var(--space-2xs) var(--space-xs);
}

.wg-tool textarea {
	min-block-size: 6rem;
	resize: vertical;
}

.wg-tool input:focus-visible,
.wg-tool select:focus-visible,
.wg-tool textarea:focus-visible {
	border-color: var(--color-focus);
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: 0;
}

.wg-tool input[aria-invalid="true"] {
	border-color: var(--color-accent);
}

/* Unit shown after an input, e.g. "mm" */
.wg-field__unit {
	align-items: center;
	background-color: var(--color-bg-alt);
	border: var(--border-w) solid var(--color-border-strong);
	border-inline-start: 0;
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	color: var(--color-text-muted);
	display: flex;
	font-size: var(--step--1);
	padding-inline: var(--space-xs);
	white-space: nowrap;
}

.wg-field__control input:has(+ .wg-field__unit) {
	border-end-end-radius: 0;
	border-start-end-radius: 0;
}

/* Unit shown before an input, e.g. "£" */
.wg-field__unit--prefix {
	border-inline-end: 0;
	border-inline-start: var(--border-w) solid var(--color-border-strong);
	border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.wg-field__unit--prefix + input {
	border-end-start-radius: 0;
	border-start-start-radius: 0;
}

/* The hidden attribute must win over the display rules above */
.wg-tool [hidden] {
	display: none !important;
}

/* Checkbox / radio rows */
.wg-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--space-xs);
	min-block-size: var(--tap);
}

.wg-check input {
	accent-color: var(--color-accent);
	block-size: 1.25rem;
	flex: none;
	inline-size: 1.25rem;
	margin: 0;
}

/* Segmented toggle: buttons with aria-pressed. Equal columns on phones (labels may wrap),
   a pill from 40em. */
.wg-seg {
	border: var(--border-w) solid var(--color-border-strong);
	border-radius: var(--radius-m);
	display: grid;
	gap: var(--space-3xs);
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	inline-size: 100%;
	padding: var(--space-3xs);
}

.wg-seg button {
	background: transparent;
	border: 0;
	border-radius: var(--radius-s);
	color: var(--color-text);
	cursor: pointer;
	font: inherit;
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	min-block-size: calc(var(--tap) - var(--space-xs));
	padding: var(--space-3xs) var(--space-2xs);
}

.wg-seg button[aria-pressed="true"] {
	background-color: var(--color-bg-inverse);
	color: var(--color-text-inverse);
}

.wg-seg button:focus-visible {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

/* Small secondary buttons inside tools (add row, remove, reset) */
.wg-tool__btn {
	align-items: center;
	background-color: var(--color-bg);
	border: var(--border-w) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	gap: var(--space-3xs);
	justify-content: center;
	min-block-size: var(--tap);
	padding-inline: var(--space-s);
}

.wg-tool__btn:hover {
	border-color: var(--color-text);
}

.wg-tool__btn:focus-visible {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

.wg-tool__btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-inverse);
}

.wg-tool__btn--primary:hover {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Result panel: dark ink box, headline number, breakdown rows
   -------------------------------------------------------------------------- */

.wg-result {
	align-self: start;
	background-color: var(--color-bg-inverse);
	border-radius: var(--radius-m);
	color: var(--color-text-inverse);
	display: grid;
	gap: var(--space-s);
	padding: var(--space-m);
}

.wg-result__label {
	color: var(--color-text-inverse-muted);
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	margin: 0;
	text-transform: uppercase;
}

.wg-result__big {
	font-family: var(--font-heading);
	font-size: var(--step-5);
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--lh-tight);
	margin: 0;
	overflow-wrap: anywhere;
}

.wg-result__sub {
	color: var(--color-text-inverse-muted);
	margin: 0;
}

.wg-result__rows {
	border-block-start: var(--border-w) solid var(--color-border-inverse);
	display: grid;
	margin: 0;
	padding-block-start: var(--space-xs);
}

.wg-result__rows > div {
	align-items: baseline;
	border-block-end: var(--border-w) solid var(--color-border-inverse);
	display: flex;
	gap: var(--space-s);
	justify-content: space-between;
	padding-block: var(--space-2xs);
}

.wg-result__rows dt {
	color: var(--color-text-inverse-muted);
	font-size: var(--step--1);
}

.wg-result__rows dd {
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-semibold);
	margin: 0;
	text-align: end;
}

.wg-result__rows .is-total dt,
.wg-result__rows .is-total dd {
	color: var(--color-text-inverse);
	font-size: var(--step-0);
	font-weight: var(--fw-bold);
}

.wg-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.wg-result .wg-tool__btn {
	background-color: transparent;
	border-color: var(--color-border-inverse);
	color: var(--color-text-inverse);
}

.wg-result .wg-tool__btn:hover {
	border-color: var(--color-text-inverse);
}

.wg-result .wg-tool__btn:focus-visible {
	outline-color: var(--color-focus-inverse);
}

/* Primary action on the dark panel: sand on ink (brick on ink is under 3:1) */
.wg-result .wg-tool__btn--primary {
	background-color: var(--color-bg-alt);
	border-color: var(--color-bg-alt);
	color: var(--color-text);
}

.wg-result .wg-tool__btn--primary:hover {
	background-color: var(--color-bg);
	border-color: var(--color-bg);
}

.wg-result__error {
	color: var(--color-text-inverse);
	font-weight: var(--fw-semibold);
	margin: 0;
}

.wg-tool__disclaimer {
	color: var(--color-text-muted);
	font-size: var(--step--1);
	grid-column: 1 / -1;
	margin: 0;
}

.wg-result .wg-tool__disclaimer {
	color: var(--color-text-inverse-muted);
}

/* --------------------------------------------------------------------------
   Reference table, sources, offer box, related links
   -------------------------------------------------------------------------- */

.wg-table-wrap {
	border: var(--border-w) solid var(--color-border);
	border-radius: var(--radius-m);
	margin-block: var(--space-m);
	max-inline-size: 100%;
	overflow-x: auto;
}

.wg-table {
	border-collapse: collapse;
	font-size: var(--step--1);
	inline-size: 100%;
	min-inline-size: 30rem;
}

.wg-table caption {
	font-weight: var(--fw-semibold);
	padding: var(--space-xs) var(--space-s);
	text-align: start;
}

.wg-table th,
.wg-table td {
	border-block-start: var(--border-w) solid var(--color-border);
	padding: var(--space-2xs) var(--space-s);
	text-align: start;
	vertical-align: top;
}

.wg-table thead th {
	background-color: var(--color-bg-alt);
	font-weight: var(--fw-semibold);
}

.wg-table tbody th {
	font-weight: var(--fw-semibold);
}

.wg-table td {
	font-variant-numeric: tabular-nums;
}

.wg-table__note {
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

.tool-sources h2,
.tool-related h2 {
	font-size: var(--step-2);
}

.tool-sources ul,
.tool-related ul {
	margin: 0;
}

.tool-sources li {
	font-size: var(--step--1);
}

.tool-related ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	list-style: none;
	padding: 0;
}

.tool-related li {
	margin: 0;
}

.tool-related a {
	align-items: center;
	border: var(--border-w) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	display: inline-flex;
	font-weight: var(--fw-semibold);
	min-block-size: var(--tap);
	padding-inline: var(--space-s);
	text-decoration: none;
}

.tool-related a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.tool-cta {
	background-color: var(--color-bg-alt);
	border-inline-start: var(--border-w-strong) solid var(--color-accent);
	border-radius: var(--radius-m);
	display: grid;
	gap: var(--space-xs);
	justify-items: start;
	margin-block: var(--space-l);
	padding: var(--space-m);
}

.tool-cta__title {
	font-size: var(--step-2);
	margin: 0;
}

.tool-cta__text {
	margin: 0;
	max-inline-size: var(--measure);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 40em) {
	.wg-tool {
		padding: var(--space-l);
	}

	.wg-seg {
		border-radius: var(--radius-pill);
		display: flex;
		flex-wrap: wrap;
		inline-size: fit-content;
		max-inline-size: 100%;
	}

	.wg-seg button {
		border-radius: var(--radius-pill);
		padding: 0 var(--space-s);
	}
}

@media (min-width: 64em) {
	.wg-tool {
		align-items: start;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.wg-result {
		position: sticky;
		top: calc(var(--space-xl) + var(--space-2xl));
	}

	.wg-tool--stacked {
		grid-template-columns: minmax(0, 1fr);
	}

	.wg-tool--stacked .wg-result {
		position: static;
	}
}

@media print {
	.site-header,
	.site-foot,
	.tool-cta,
	.tool-related,
	.wg-result__actions {
		display: none !important;
	}
}