/* ==== TV-SAFE BASE LAYER (core) ==== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: inherit; color: var(--txt); background: var(--bg); }
img, svg, video { display: block; max-width: 100%; }

input, select, textarea, button { font: inherit; }

:root{
  --focus: #ffd54f;
  --ring: var(--focus);
  --ring-w: 3px;
}
[data-focusable] { position: relative; outline: none; }
[data-focusable].is-focus::after,
[data-focusable]:focus-visible::after{
  content: ""; position: absolute; 
  top:0; right:0; bottom:0; left:0; 
  border-radius: inherit;
  border: var(--ring-w) solid var(--ring);
  box-shadow: 0 0 0 6px rgba(255,213,79,.18);
  pointer-events: none; z-index: 9;
}
[data-focusable].is-focus { outline: 2px solid var(--ring) !important; }

.tv-scale-boost.is-focus { transform: scale(1.04); transition: transform 120ms cubic-bezier(.2,.8,.2,1); }
.no-scroll { overflow: hidden !important; }
.visually-hidden { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

:root {
  --z-modal: 9999;
  --z-overlay: 5000;
  --z-topbar: 2000;
  --z-default: 1;
}
.app-modal__backdrop { z-index: var(--z-modal); }
.topbar { z-index: var(--z-topbar); }