/* ──────────────────────────────────────────────────────────────────────────
 * tv.css — Android TV / 10-foot UI overrides
 *
 * Heuristic: large viewport (>=1920px) AND coarse / no-hover input. This
 * matches Android TV (D-pad / remote, no mouse hover) but excludes desktop
 * monitors at the same resolution.
 *
 * Loaded last (after mobile.css) via all.css so its declarations win.
 * ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 1920px) and (pointer: coarse),
       (min-width: 1920px) and (hover: none) {

    /* Larger base font — readable from a couch. */
    html, body {
        font-size: 18px;
    }

    /* Touch / D-pad target sizing: WCAG 2.5.5 minimum is 44x44; 48 gives
       more breathing room for fat-finger / sloppy aim from a remote. */
    button,
    .btn,
    .icon-button,
    .icon-btn,
    [role="button"],
    a.btn {
        min-width: 48px;
        min-height: 48px;
        padding: 12px 18px;
    }

    .icon-button .icon,
    .icon-btn .icon {
        width: 1.4em;
        height: 1.4em;
    }

    /* Bottom nav bar — easier to reach with a D-pad than a top bar.
       Assumes the existing nav uses .tab-bar (verified to exist in mobile.css
       layouts). Override its position. */
    .tab-bar,
    nav.tab-bar,
    header .tab-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        padding: 16px 24px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        z-index: var(--z-sticky);
        box-shadow: 0 -4px 16px var(--shadow-color);
    }

    .tab-bar .tab,
    .tab-bar a,
    .tab-bar button {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 1.05rem;
    }

    /* Reserve space at the bottom of the viewport so content is not
       hidden underneath the fixed nav. */
    body {
        padding-bottom: 96px;
    }

    /* D-pad focus ring — needs to be obvious from across the room. */
    *:focus-visible {
        outline: 3px solid var(--primary-color);
        outline-offset: 3px;
    }

    /* Card hover/elevation effects driven by :hover are useless without a
       pointer; mirror them onto :focus-within so the highlighted card is
       always the focused one. */
    .card:focus-within,
    .template-card:focus-within,
    .dashboard-target:focus-within {
        box-shadow: 0 8px 24px var(--shadow-color);
        transform: translateY(-2px);
    }
}
