/* ────────────────────────────────────────────────────────────────── TV / D-pad support. Loaded everywhere, but nearly all of it is inert until a D-pad is actually used: the focus ring keys off :focus-visible, which a mouse or finger tap does not trigger. Touch panels therefore look exactly as they do today, and the same build drives a remote. This file used to also carry overscan padding and type-size bumps for the old scrollable wall pages. Both are gone with those pages: - The overscan rule put `padding: 2.5vh 3vw` on at 1920px and up. Against the kiosk, which is exactly 100vh tall, that pushed the bottom 27px of every screen past the viewport edge where overflow:hidden silently cut it off — on precisely the hardware the app is built for. The kiosk keeps its content off the edges with its own internal padding instead, which cannot push the frame around. - The `.sv-sub / .bmeta / .bfoot / .card .lbl / .bottombar / .tv-focusable` rules styled elements that no longer exist. ────────────────────────────────────────────────────────────────── */ :root { --tv-focus: #22d3ee; --tv-focus-glow: rgba(34, 211, 238, 0.55); } /* ── Focus ring ─────────────────────────────────────────────────── On a remote there is no cursor, so the ONLY way a user knows where they are is the focus ring. It has to be unmissable from three metres, which is far heavier styling than a desktop app would use. Two selector sets, deliberately: a) :focus-visible — the ordinary keyboard path. b) html.tv-dpad :focus — the D-pad path. This is NOT redundant. :focus-visible does not match when focus is moved by script, and moving focus by script is exactly what tv-nav.js does on an arrow key. Without this set, focus on a TV travels with no feedback at all. tv-nav.js sets .tv-dpad on the first time an arrow key is seen. */ /* The two paths are separate RULES, not one list. On Chrome 66 — the television — :focus-visible is unknown and poisons any rule it shares, which silently removed the D-pad ring from the sign-in page on the one device that signs in with a D-pad. */ html.tv-dpad a:focus, html.tv-dpad button:focus, html.tv-dpad input:focus, html.tv-dpad select:focus, html.tv-dpad textarea:focus, html.tv-dpad [tabindex]:not([tabindex="-1"]):focus { outline: 3px solid var(--tv-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tv-focus-glow); border-radius: 6px; } a:focus-visible, button:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--tv-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tv-focus-glow); border-radius: 6px; } @media (prefers-reduced-motion: reduce) { html.tv-dpad a:focus, html.tv-dpad button:focus, html.tv-dpad [tabindex]:not([tabindex="-1"]):focus { transition: none; } } /* ── Ten-foot type ──────────────────────────────────────────────── A 14px label is legible at 50cm and illegible at 3m. This lifts the rem floor on TV-sized viewports, which is what the sign-in page and the error pages are sized in. The kiosk itself does not depend on it — its type scales from the viewport, not from rem — so raising this cannot disturb a kiosk layout. */ @media screen and (min-width: 1920px) { html { font-size: 20px; } }