/* CIS tax calculator: extras on top of tools.css. Tokens only. */

/* £ shown before the input (tools.css styles .wg-field__unit as a suffix) */
.wg-tool[data-tool="cis"] .wg-field__unit.cis-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-tool[data-tool="cis"] .cis-prefix + input {
	border-end-start-radius: 0;
	border-start-start-radius: 0;
}

/* Toggles: equal columns on phones (labels may wrap to two lines), the shared pill from 40em */
.wg-tool[data-tool="cis"] .wg-seg {
	border-radius: var(--radius-m);
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	inline-size: 100%;
}

.wg-tool[data-tool="cis"] .wg-seg button {
	border-radius: var(--radius-s);
	line-height: var(--lh-snug);
	padding: var(--space-3xs) var(--space-2xs);
}

@media (min-width: 40em) {
	.wg-tool[data-tool="cis"] .wg-seg {
		border-radius: var(--radius-pill);
		display: flex;
		inline-size: fit-content;
	}

	.wg-tool[data-tool="cis"] .wg-seg button {
		border-radius: var(--radius-pill);
		padding: 0 var(--space-s);
	}
}

/* Long cost labels: two columns at most, so labels don't wrap to three lines */
.wg-tool[data-tool="cis"] .cis-costs {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.wg-tool[data-tool="cis"] .wg-tool__group > .wg-field__hint {
	margin-block-start: calc(var(--space-2xs) * -1);
}

.wg-tool[data-tool="cis"] [hidden] {
	display: none;
}

/* Result panel notes */
.wg-tool[data-tool="cis"] .cis-note {
	font-size: var(--step--1);
	margin: 0;
}

.wg-tool[data-tool="cis"] .cis-warn {
	border-inline-start: var(--border-w-strong) solid var(--color-focus-inverse);
	color: var(--color-text-inverse);
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	margin: 0;
	padding-inline-start: var(--space-xs);
}

.wg-tool[data-tool="cis"] .wg-result__rows dt {
	min-inline-size: 0;
}

.wg-tool[data-tool="cis"] .wg-result__rows dd {
	white-space: nowrap;
}