/* App-layer styles loaded on every _app variant, after the skin.
   Keep this small - it is for cross-variant fixes, not design. */

/* Labels for screen readers on inputs that only had a placeholder.
   A placeholder is not an accessible name, and it disappears on focus. */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The progress bar is now painted on load, so give it a real transition
   instead of snapping between widths. */
.progress-fill {
	transition: width 260ms cubic-bezier(.4, 0, .2, 1);
}

/* iOS zooms the page when a focused input is under 16px. That zoom does not
   reverse on blur, so the visitor is left on a zoomed, sideways-scrolling
   page mid-funnel - a silent killer on the typed steps. */
.text-input,
select,
textarea {
	font-size: max(16px, 1rem);
}

/* Comfortable tap targets. Apple and Google both put the floor at ~44px;
   several option buttons render smaller than that on narrow screens. */
.option-button,
.continue-button,
.back-button,
.callbtn {
	min-height: 44px;
}

/* Respect the OS reduced-motion setting - the fade and the indeterminate
   results bar both animate continuously. */
@media (prefers-reduced-motion: reduce) {
	.progress-fill { transition: none; }
	#progress-bar { animation: none; width: 100%; }
	.fade-in, .fade-out { animation: none !important; transition: none !important; }
}