/* GENERATED by @prep-partner/waypoint scripts/build.mjs from tokens/waypoint.tokens.json — never hand-edit.
   Waypoint 1.2.0. The controls family of the component layer (src/components/controls.css); load it after components.css. */

/* ============================================================
   CONTROLS — tools, forms and actions (WS1.6)
   ============================================================

   dist/components/controls.css. The tools' inputs (a slider with a 44px
   target where the tools have 11px today, a stepper, a select, a
   checkbox, a field with its hint and its error), the mono readout and
   the result band, and the actions: buttons at 32, 40 and 48px, a
   loading state that keeps its width, an icon button, a sticky phone CTA.

   Every control's border is --u-rule-input (3.85:1, WCAG 1.4.11; the lint
   holds it); every error is --u-error on plate (6.35:1) and always sits
   with words, never colour alone; every target is at least 24px, and the
   primary ones 44px.
   ============================================================ */

/* ---- Buttons: sizes, loading, icon buttons -------------------------- */
.wp-btn--s {
	min-height: 32px;
	padding: 0.375rem 0.75rem;
	font-size: var(--u-fs-13);
	gap: 0.375rem;
}
.wp-btn--m {
	min-height: 40px;
	padding: 0.5rem 1rem;
	font-size: var(--u-fs-14);
}
.wp-btn--l {
	min-height: 48px;
	padding: 0.75rem 1.375rem;
	font-size: var(--u-fs-16);
}
.wp-btn:disabled,
.wp-btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}
/* Loading: the label stays (so the width and the name do not change) and
   fades; a spinner sits over it. */
.wp-btn[aria-busy='true'] {
	position: relative;
	cursor: progress;
}
.wp-btn[aria-busy='true'] .wp-btn__label {
	opacity: 0;
}
.wp-btn__busy {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.wp-spin {
	width: 1.1em;
	height: 1.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--u-r-pill);
	opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-spin {
		animation: wp-spin 0.8s linear infinite;
	}
}
@keyframes wp-spin {
	to {
		transform: rotate(1turn);
	}
}
/* An icon button's name is its aria-label (the lint requires one). */
.wp-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-1);
	background: transparent;
	color: var(--u-text-hi);
	font-size: var(--u-fs-17);
	cursor: pointer;
}
.wp-iconbtn:hover {
	border-color: var(--u-laser-line);
	color: var(--u-laser-text);
}
.wp-iconbtn--s {
	width: 32px;
	height: 32px;
	font-size: var(--u-fs-15);
}
.wp-iconbtn--ghost {
	border-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-iconbtn {
		transition:
			border-color var(--u-t-1) var(--u-ease),
			color var(--u-t-1) var(--u-ease);
	}
}

/* ---- Sticky phone CTA ----------------------------------------------- */
/* Pinned to the bottom of a phone's screen once the page's own call to
   action has scrolled away; gone from a wide screen. */
.wp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--u-z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem var(--u-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: var(--u-plate);
	border-top: 1px solid var(--u-rule);
	box-shadow: var(--u-shadow-3);
}
.wp-sticky-cta[hidden] {
	display: none;
}
.wp-sticky-cta__text {
	min-width: 0;
	font-size: var(--u-fs-14);
	line-height: 1.35;
	color: var(--u-text-2);
}
.wp-sticky-cta .wp-btn {
	flex: none;
}
@media (min-width: 1024px) {
	.wp-sticky-cta {
		display: none;
	}
}

/* ---- Fields: label, input, hint, error ------------------------------ */
.wp-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}
.wp-field__label {
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-14);
	font-weight: 600;
	color: var(--u-text-hi);
}
.wp-field__req {
	margin-left: 0.2rem;
	color: var(--u-error);
}
.wp-field__hint {
	font-size: var(--u-fs-13);
	line-height: 1.5;
	color: var(--u-text-2);
}
.wp-field__error {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	font-size: var(--u-fs-13);
	font-weight: 600;
	line-height: 1.45;
	color: var(--u-error);
}
.wp-field__error .wp-icon {
	margin-top: 0.15em;
}
.wp-input,
.wp-select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-1);
	background: var(--u-plate);
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-16);
	color: var(--u-text);
}
.wp-input::placeholder {
	color: var(--u-text-3);
}
.wp-input:hover,
.wp-select:hover {
	border-color: var(--u-text-2);
}
.wp-input:focus-visible,
.wp-select:focus-visible {
	border-color: var(--u-laser-500);
	box-shadow: var(--u-focus);
	outline: none;
}
.wp-input[aria-invalid='true'],
.wp-select[aria-invalid='true'] {
	border-color: var(--u-error);
}
.wp-input:disabled,
.wp-select:disabled {
	background: var(--u-paper-2);
	color: var(--u-text-3);
	cursor: not-allowed;
}
/* A figure typed in a field reads in mono, its unit or currency beside it. */
.wp-input--num {
	font-family: var(--u-font-mono);
	font-variant-numeric: tabular-nums;
}
.wp-affix {
	display: flex;
	align-items: stretch;
}
.wp-affix__text {
	display: inline-flex;
	align-items: center;
	padding-inline: 0.75rem;
	border: 1px solid var(--u-rule-input);
	background: var(--u-paper-2);
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-14);
	color: var(--u-text-2);
}
.wp-affix__text--pre {
	border-right: 0;
	border-radius: var(--u-r-1) 0 0 var(--u-r-1);
}
.wp-affix__text--post {
	border-left: 0;
	border-radius: 0 var(--u-r-1) var(--u-r-1) 0;
}
.wp-affix .wp-input {
	flex: 1;
	min-width: 0;
}
.wp-affix__text--pre + .wp-input {
	border-radius: 0 var(--u-r-1) var(--u-r-1) 0;
}
.wp-affix .wp-input:has(+ .wp-affix__text--post) {
	border-radius: var(--u-r-1) 0 0 var(--u-r-1);
}
/* The select draws its own chevron, so it reads the same on every platform. */
.wp-select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--u-text-2) 50%), linear-gradient(135deg, var(--u-text-2) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) 55%,
		calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* ---- Checkbox: a native box, 24px, its label a target too ------------ */
.wp-check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 44px;
	padding-block: 0.6rem;
	font-size: var(--u-fs-15);
	line-height: 1.45;
	color: var(--u-text);
	cursor: pointer;
}
.wp-check input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--u-laser-600);
	cursor: pointer;
}

/* ---- Slider: a range with a 44px target and a mono readout ----------- */
.wp-slider {
	display: grid;
	gap: 0.35rem;
}
.wp-slider__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.wp-slider__range {
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	appearance: none;
	cursor: pointer;
	--wp-fill: 50%;
}
.wp-slider__range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: var(--u-r-pill);
	background: linear-gradient(90deg, var(--u-laser-line) var(--wp-fill), var(--u-rule-input) var(--wp-fill));
}
.wp-slider__range::-moz-range-track {
	height: 6px;
	border-radius: var(--u-r-pill);
	background: linear-gradient(90deg, var(--u-laser-line) var(--wp-fill), var(--u-rule-input) var(--wp-fill));
}
.wp-slider__range::-webkit-slider-thumb {
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border: 2px solid var(--u-laser-line);
	border-radius: var(--u-r-pill);
	background: var(--u-plate);
	box-shadow: var(--u-shadow-1);
}
.wp-slider__range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var(--u-laser-line);
	border-radius: var(--u-r-pill);
	background: var(--u-plate);
}
.wp-slider__range:focus-visible {
	outline: none;
	box-shadow: none;
}
.wp-slider__range:focus-visible::-webkit-slider-thumb {
	box-shadow: var(--u-focus);
}
.wp-slider__range:focus-visible::-moz-range-thumb {
	box-shadow: var(--u-focus);
}
.wp-slider__scale {
	display: flex;
	justify-content: space-between;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	color: var(--u-text-3);
}

/* ---- Stepper: a number with − and + (44px each) ---------------------- */
.wp-stepper {
	display: inline-flex;
	/* Its own width in a field's column, not the column's: − 4 + reads as one control. */
	align-self: flex-start;
	align-items: stretch;
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-1);
	background: var(--u-plate);
}
.wp-stepper:focus-within {
	border-color: var(--u-laser-500);
	box-shadow: var(--u-focus);
}
.wp-stepper__btn {
	display: grid;
	place-items: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--u-text-hi);
	font-size: var(--u-fs-17);
	cursor: pointer;
}
.wp-stepper__btn:disabled {
	color: var(--u-text-3);
	cursor: not-allowed;
}
.wp-stepper__btn:hover:not(:disabled) {
	color: var(--u-laser-text);
}
.wp-stepper__input {
	width: 5.5ch;
	min-width: 0;
	border: 0;
	border-inline: 1px solid var(--u-rule);
	background: transparent;
	text-align: center;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-16);
	font-variant-numeric: tabular-nums;
	color: var(--u-text-hi);
	appearance: textfield;
}
.wp-stepper__input::-webkit-inner-spin-button,
.wp-stepper__input::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}
.wp-stepper__input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ---- Readout: a measured figure, in mono ----------------------------- */
/* Its width is the figure's, set in tabular numerals on Geist Mono's
   metric-matched fallback, so it barely moves when the font arrives. */
.wp-readout {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	font-family: var(--u-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--u-fs-24);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--u-text-hi);
}
.wp-readout__unit {
	font-size: var(--u-fs-14);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--u-text-2);
}
.wp-readout--s {
	font-size: var(--u-fs-16);
}

/* ---- Result band: the answer a tool gives ---------------------------- */
/* On the ink band: the figure in the laser, lit — the one thing on the
   page the laser points at. */
.wp-result {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--u-r-3);
}
.wp-result__value {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--u-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--u-fs-d2);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--u-laser-text);
}
.wp-result__unit {
	margin-left: 0.4rem;
	font-size: var(--u-fs-17);
	letter-spacing: 0;
	color: var(--u-text-2);
}
.wp-result__detail {
	margin-top: 0.75rem;
	max-width: 56ch;
	font-size: var(--u-fs-15);
	line-height: 1.55;
	color: var(--u-text-2);
}
.wp-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}