/*
 * Mobile accessibility floor.
 *
 * Roughly nine in ten visitors are on a phone, so this file sets the minimums
 * the rest of the stylesheets are allowed to build on top of:
 *
 *   - Touch targets of at least 44x44px (WCAG 2.5.5, Apple HIG).
 *   - No body text below 12px.
 *   - Form fields at 16px, because iOS Safari zooms the viewport on focus for
 *     anything smaller and never zooms back out.
 *
 * Loaded last so it wins without needing !important on every rule. Where
 * !important does appear it is because the file it is correcting used it
 * first; those can be removed as the CSS consolidation progresses.
 */

@media (max-width: 767px) {

	/* --- Touch targets --- */
	.nb-pred-wrap button,
	.nb-pred-wrap .nb-btn,
	.nb-pred-wrap a.nb-btn,
	.nb-share-btn,
	.nb-score-step,
	.nbpl-wrap button,
	.nbpl-btn,
	.nbpl-orientation-btn,
	.nb-mobile-nav a,
	.nb-mobile-tabbar a {
		min-height: 44px !important;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Score steppers are the most-tapped control in the whole product. */
	.nb-score-step,
	.nb-score-stepper button {
		min-height: 48px !important;
		min-width: 48px !important;
	}

	/* Small icon-only controls still need a full-size hit area, so grow the
	   target without growing the visible control. */
	.nbpl-slot-remove,
	.nb-modal-close {
		position: relative;
	}
	.nbpl-slot-remove::after,
	.nb-modal-close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* --- Legibility --- */
	.nb-pred-wrap,
	.nbpl-wrap,
	.nb-mobile-platform-shell {
		font-size: 15px;
	}

	.nb-pred-wrap *,
	.nbpl-wrap *,
	.nb-mobile-platform-shell * {
		/* Nothing drops below the readable floor, however small it was set. */
		font-size: max(12px, 1em);
	}

	/* Labels and metadata may be small, but not invisibly so. */
	.nb-section-kicker,
	.nb-meta,
	.nbpl-bench-pos,
	.nb-competition-code,
	.nb-card-meta {
		font-size: 12px !important;
		letter-spacing: .04em;
	}

	/* --- Inputs: 16px stops iOS zooming on focus --- */
	.nb-pred-wrap input,
	.nb-pred-wrap select,
	.nb-pred-wrap textarea,
	.nbpl-wrap input,
	.nbpl-wrap select,
	.nbpl-wrap textarea,
	.nb-mobile-platform-shell input,
	.nb-mobile-platform-shell select,
	.nb-mobile-platform-shell textarea {
		font-size: 16px !important;
		min-height: 48px;
	}

	/* --- Spacing between adjacent targets, so taps do not misfire --- */
	.nb-share-btns { gap: 10px; }
	.nb-pred-actions { gap: 10px; }
}

/* Keyboard focus must stay visible on every platform, not just mobile. */
.nb-pred-wrap :focus-visible,
.nbpl-wrap :focus-visible,
.nb-mobile-platform-shell :focus-visible {
	outline: 3px solid #E8BD43;
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.nb-pred-wrap *,
	.nbpl-wrap *,
	.nb-mobile-platform-shell * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}