/* ==================================================================
   Cogent Base tools
   ==================================================================
   Loaded only on pages that render a calculator or the sidebar widget,
   which is why this is a separate sheet rather than more of style.css.

   Three things worth knowing:

   1. The width comes from alignwide, applied in inc/tools.php, not from
      anything here. A constrained block layout caps its children at the
      700px content size and lifts that to 1200px for alignwide, so the
      calculator gets its width from the theme's own layout system while
      the prose around it stays at the reading measure. Setting a width
      here instead loses to the max-width the layout already applied.
   2. The result panel sticks on desktop. The whole point of a
      calculator is watching the number move while you change an input,
      and that fails if the answer scrolls off the screen.
   3. Figures are set in the mono face. A number someone is going to
      check against their own payroll should look like data, not copy.

   Tokens come from theme.json. Nothing here invents a colour.
------------------------------------------------------------------- */

/* The theme has no global border-box reset, so padding and borders add to a
   declared width or height here rather than sitting inside it. That is how the
   hub cards ended up 44px taller than their own grid row — height:100% plus
   1.25rem of padding — and spilled their bottom border and link over the card
   beneath. Scoped to these components rather than set globally, because the
   rest of the site is laid out on the assumption that it is content-box. */
.tool,
.tool *,
.tools-index,
.tools-index *,
.tool-note,
.tool-note *,
.tool-faq,
.tool-faq *,
.tool-more,
.tool-more *,
.sidebar-mini-tool,
.sidebar-mini-tool *,
.sidebar-tools,
.sidebar-tools * {
	box-sizing: border-box;
}

.tool {
	--tool-accent: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fm-radius);
	/* Inline margin must stay auto. The constrained layout centres an
	   alignwide child with margin-left/right:auto, so a shorthand that resets
	   them to 0 takes the extra width and then hangs it off the left of the
	   screen. */
	margin: 2rem auto;
	overflow: hidden;
}

.tool--amber { --tool-accent: var(--wp--preset--color--amber); }
.tool--green { --tool-accent: var(--wp--preset--color--green); }
.tool--violet { --tool-accent: var(--wp--preset--color--violet); }

.tool__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.7rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.tool__year {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tool-accent);
}

.tool__checked {
	margin: 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

/* minmax(0, 1fr), not the implicit auto track. An auto track is allowed to grow
   to its content's max-content width, and a result table full of nowrap figures
   has a wide one — which pushed the form past the edge of the card on a phone,
   where overflow:hidden then quietly clipped the right-hand side of every
   input. Every grid in this file pins its tracks for the same reason. */
.tool__grid {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
}

.tool__form {
	padding: 1.25rem;
}

.tool__out {
	padding: 1.25rem;
	background: var(--wp--preset--color--surface);
}

@media (min-width: 1000px) {
	.tool__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.tool__form {
		border-right: 1px solid var(--wp--preset--color--line);
	}

	.tool__out {
		position: sticky;
		top: 1rem;
	}
}

.tool__noscript {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Fields ---------- */

.tool-set {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	min-inline-size: 0;
}

.tool-set:last-child {
	margin-bottom: 0;
}

.tool-set > legend {
	padding: 0;
	margin-bottom: 0.85rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tool-set__toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--tool-accent);
	cursor: pointer;
}

.tool-set__toggle::after {
	content: " +";
	font-weight: 700;
}

.tool-set__toggle[aria-expanded="true"]::after {
	content: " \2212";
}

.tool-set__body {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.tool-set__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tool-field--wide,
	.tool-field--check {
		grid-column: 1 / -1;
	}
}

.tool-field > label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
	font-weight: 500;
}

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

.tool-field__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.tool-field__control:focus-within {
	border-color: var(--tool-accent);
	box-shadow: 0 0 0 3px rgba(46, 62, 238, 0.16);
}

.tool-field__affix {
	display: flex;
	align-items: center;
	padding: 0 0.6rem;
	background: var(--wp--preset--color--surface);
	border-right: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.tool-field__affix--end {
	border-right: 0;
	border-left: 1px solid var(--wp--preset--color--line);
}

.tool-field__control input,
.tool-field__control select {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.55rem 0.65rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	color: inherit;
}

.tool-field__control select {
	font-family: var(--wp--preset--font-family--body);
	cursor: pointer;
}

.tool-field__control input:focus,
.tool-field__control select:focus {
	outline: none;
}

.tool-field__hint {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.tool-check {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	font-size: 0.9rem;
	cursor: pointer;
}

.tool-check input {
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--brand);
	flex: 0 0 auto;
}

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

.tool-result__head {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--tool-accent);
}

.tool-result__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tool-result__big {
	margin: 0.2rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.1rem, 1.6rem + 2.2vw, 2.9rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
}

.tool-result__unit {
	font-size: 0.4em;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

.tool-result__sub {
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.tool-result__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.1rem;
	font-size: 0.9rem;
}

.tool-result__table caption {
	text-align: left;
	padding-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tool-result__table th,
.tool-result__table td {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: baseline;
}

.tool-result__table th {
	text-align: left;
	font-weight: 400;
	padding-right: 0.75rem;
}

/* Cells wrap; the figures inside them do not. A single amount has no spaces to
   break at, so it stays intact either way, but a year-on-year cell is three
   tokens and needs somewhere to fold on a narrow screen. */
.tool-result__table td {
	text-align: right;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: normal;
}

.tool-arrow,
.tool-delta {
	white-space: nowrap;
}

/* The multi-year table is the one place a scrollbar beats folding: six columns
   of figures only read as a comparison while the rows stay on one line. */
.tool-result__table--wide th,
.tool-result__table--wide td {
	white-space: nowrap;
}

.tool-result__table thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: right;
}

.tool-result__table thead th:first-child {
	text-align: left;
}

.tool-result__table tbody tr.is-total th,
.tool-result__table tbody tr.is-total td {
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 0;
	font-weight: 600;
	font-size: 1rem;
}

.tool-result__table tbody tr.is-sub th,
.tool-result__table tbody tr.is-sub td {
	color: var(--wp--preset--color--muted);
	font-size: 0.84rem;
}

.tool-result__table .is-good {
	color: var(--wp--preset--color--green);
	font-weight: 600;
}

.tool-result__table--wide {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.tool-arrow {
	padding: 0 0.4rem;
	color: var(--wp--preset--color--muted-light);
}

.tool-delta {
	display: inline-block;
	min-width: 5.4em;
	text-align: right;
	color: var(--tool-accent);
	font-weight: 600;
}

.tool-est {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------- Flags ---------- */

.tool-flag {
	margin: 0 0 0.75rem;
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var(--wp--preset--color--muted-light);
	border-radius: 0 6px 6px 0;
	background: var(--wp--preset--color--base);
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.tool-flag:last-child {
	margin-bottom: 0;
}

.tool-flag strong {
	color: var(--wp--preset--color--contrast);
}

.tool-flag--good {
	border-left-color: var(--wp--preset--color--green);
}

.tool-flag--bad {
	border-left-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--contrast);
}

.tool-unchanged {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.tool-unchanged h3 {
	margin: 0.85rem 0 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tool-unchanged h3:first-child {
	margin-top: 0;
}

.tool-unchanged ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.tool-unchanged li {
	margin-bottom: 0.3rem;
}

/* ---------- Prose around a tool ---------- */

.tool-note,
.tool-faq,
.tool-more {
	margin: 2.5rem 0;
}

.tool-note h2,
.tool-faq h2,
.tool-more h2 {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.tool-note--figures ul {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.tool-note--figures li {
	margin-bottom: 0.3rem;
}

.tool-note__stamp {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

.tool-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tool-faq__item summary {
	padding: 0.85rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.tool-faq__item summary::-webkit-details-marker {
	display: none;
}

.tool-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand);
	font-weight: 400;
}

.tool-faq__item[open] summary::after {
	content: "\2212";
}

.tool-faq__item p {
	margin: 0 0 1rem;
	font-size: 0.98rem;
	color: var(--wp--preset--color--muted);
}

.tool-more__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.tool-more__list a {
	display: block;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	text-decoration: none;
}

.tool-more__list a:hover {
	border-color: var(--wp--preset--color--brand);
}

.tool-more__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.tool-more__blurb {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.86rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- The hub ---------- */

/* Inline margin stays auto so the constrained layout can keep centring it. The
   block margin has to be stated: shorthanding it to 0 removed the block gap the
   layout would otherwise have given it, and the first row of cards sat directly
   on the last line of the paragraph above. */
.tools-index {
	list-style: none;
	margin: 2rem auto;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.tools-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The card is stretched to the row by making the item a grid, rather than by
   asking the anchor for height:100%. A percentage height against an auto-sized
   row is circular reasoning that browsers resolve inconsistently; stretch is
   what a grid item does by default. */
.tools-index__item {
	display: grid;
}

.tools-index__item a {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--brand);
	border-radius: var(--fm-radius);
	background: var(--wp--preset--color--base);
	text-decoration: none;
}

.tools-index__item--amber a { border-top-color: var(--wp--preset--color--amber); }
.tools-index__item--green a { border-top-color: var(--wp--preset--color--green); }
.tools-index__item--violet a { border-top-color: var(--wp--preset--color--violet); }

.tools-index__item a:hover {
	box-shadow: var(--fm-shadow);
}

.tools-index__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.tools-index__blurb {
	margin-top: 0.4rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	flex: 1 1 auto;
}

.tools-index__go {
	margin-top: 0.85rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}

/* ---------- Sidebar ---------- */

.mini-tool__label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 500;
}

.mini-tool__field {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 0.85rem;
	background: var(--wp--preset--color--base);
}

.mini-tool__field:focus-within {
	border-color: var(--wp--preset--color--brand);
}

.mini-tool__field span {
	display: flex;
	align-items: center;
	padding: 0 0.55rem;
	background: var(--wp--preset--color--surface);
	border-right: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
}

.mini-tool__field input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.5rem 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	color: inherit;
}

.mini-tool__field input:focus {
	outline: none;
}

.mini-tool__result {
	padding-top: 0.85rem;
	border-top: 2px solid var(--wp--preset--color--brand);
}

.mini-tool__big {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.mini-tool__sub {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.mini-tool__out {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.mini-tool__link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.84rem;
	font-weight: 600;
}

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

.sidebar-tools__list li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.sidebar-tools__list a {
	display: block;
	padding: 0.7rem 0;
	text-decoration: none;
}

.sidebar-tools__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sidebar-tools__list a:hover .sidebar-tools__name {
	color: var(--wp--preset--color--brand);
}

.sidebar-tools__blurb {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.sidebar-tools__all {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
}