/* Keyboard / controller focus ring (nav.js). html.kbnav is on while the keyboard or a pad is driving. */

/* Room inside the strips so the ring's glow and scale aren't clipped by their sideways scroll.
   The negative margins keep the cards exactly where they were. */
.strip{padding:14px 16px 18px;margin:-12px -14px -10px}

/* Leave room for the sticky top bar and the row title when focus scrolls the page or a strip. */
#main :is(button,input,select,[tabindex]:not(#main)){scroll-margin:124px 48px 48px}

html.kbnav :focus:not(.card):not(main){outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 22px rgba(234,165,60,.45)}
html.kbnav :is(.btn,.chip,.ico,.who,.circ,.pchip,.nav button,.brand,.toggle,.swatch,.pbody,.seg button,.day,.gear):focus{transform:scale(1.05);transition:transform .15s}
html.kbnav .card:focus{outline:none}
html.kbnav .card:focus :is(.poster,.thumb){outline:3px solid var(--accent);outline-offset:3px;transform:scale(1.05);box-shadow:0 0 26px rgba(234,165,60,.5),0 10px 24px rgba(0,0,0,.45)}
html.kbnav .card.nav-press :is(.poster,.thumb){transform:scale(1.09)}
/* wide schedule cards have no poster/thumb: the ring goes on the card itself */
html.kbnav .wcard:focus{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 22px rgba(234,165,60,.45);transform:scale(1.03)}
/* rail sections: no scale (they fill the rail), the ring sits inside it */
html.kbnav .rsec:focus{outline-offset:-3px}
html.kbnav .nav-press:not(.card){transform:scale(1.09)}
html.kbnav .stile:focus{outline:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  html.kbnav .card:focus :is(.poster,.thumb),html.kbnav :focus,html.kbnav .nav-press,html.kbnav .card.nav-press :is(.poster,.thumb){transform:none}
}