/**
 * Form fields at 16px or more on touch screens (gh #708 SEO-09)
 *
 * Linked only by the pages that allow pinch-zoom: the customer, carrier and
 * driver portals, their sign-in pages, the /update token pages, and the quote
 * response and rate confirmation. Their viewport used to carry
 * maximum-scale=1.0, which blocks zoom on Android (WCAG 2.1 rule 1.4.4). On an
 * iPhone it also stopped Safari zooming in when a field under 16px gets focus.
 * Without it, every field needs 16px or Safari jumps the page on each tap.
 *
 * Touch screens, not a width: an iPhone on its side is 844px wide. 1rem stays
 * when it is larger, so a bigger text size is not shrunk back to 16px.
 */

@media (hover: none) and (pointer: coarse) {
	/* :where() gives this rule no specificity, so the larger size below still
	   wins. Without it, the nine :not()s outrank .form-control-lg, and the
	   portal's 20px forgot-password field came out at 16px. */
	:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea) {
		font-size: max(16px, 1rem) !important;
	}

	.form-control-lg,
	.form-select-lg,
	.input-group-lg > .form-control,
	.input-group-lg > .form-select {
		font-size: max(16px, 1.25rem) !important;
	}
}