/* Copyright (c) 2026, TuwaTech and contributors
 * License: MIT
 *
 * Accessibility floor for the customer-facing pages (GP-PRD-003: WCAG 2.1 AA).
 * These pages are read on a phone, in a waiting room, by whoever the customer
 * is — so the rules that matter here are the ones a design review tends to
 * miss: a focus ring you can actually see, a tap target a thumb can hit, and
 * text that survives being zoomed.
 */

/* A label that is there for a screen reader and not for the eye. Never
 * display:none — that hides it from assistive technology too. */
.gp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 2.4.7 Focus Visible. The browser default disappears against a coloured
 * button, so every interactive thing gets the same high-contrast ring. */
.gp-portal :is(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid #0b5cab;
	outline-offset: 2px;
	border-radius: 6px;
}

/* 2.5.5 Target Size: a thumb is about 9mm. */
.gp-portal :is(button, a.gp-action, input[type="checkbox"], input[type="radio"]) {
	min-height: 44px;
}
.gp-portal input[type="checkbox"] {
	min-width: 24px;
	width: 24px;
	height: 24px;
	min-height: 24px; /* the box itself; its label row carries the 44px */
}
.gp-portal label:has(> input[type="checkbox"]) {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 1.4.11 Non-text Contrast: a disabled control still has to be readable
 * enough to be understood as disabled rather than invisible. */
.gp-portal button:disabled {
	opacity: 1;
	background: #e4e8ee !important;
	color: #4a5462 !important;
	border-color: #b9c2cd !important;
	cursor: not-allowed;
}

/* 1.4.12 Text Spacing / 1.4.4 Resize: nothing may be pinned to a height that
 * clips its own text when the reader zooms or overrides spacing. */
.gp-portal * {
	max-height: none;
}
.gp-portal .gp-scroll {
	max-height: 60vh;
	overflow-y: auto;
}

/* 1.4.1 Use of Colour: the selected option is not signalled by colour alone —
 * a check mark rides with it. */
.gp-portal [aria-pressed="true"]::after,
.gp-portal [aria-checked="true"]::after {
	content: " ✓";
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.gp-portal * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}