/* ------------------------------------------------------------------
   responsive-tv.css

   Two cases, and only two:

   1) The set reports a 1920x1080 CSS viewport. This is the common one
      on VIDAA, including on 4K panels — the browser scales its own
      output. Nothing to do; the tokens are authored for it.

   2) The set reports a CSS viewport wider than 1080p — in practice a
      genuine 3840x2160. Then every token must roughly double or the UI
      becomes unreadable from the sofa. The breakpoint is 2560px, not
      3840px, and every 4K override in components.css uses the same
      value; a 2560x1440 window therefore gets the 4K scale too, which
      runs large there but stays usable. The env probe reports both
      matchMedia('(min-width:2560px)') and '(min-width:3840px)'.

   Narrower viewports are handled defensively rather than designed for:
   a VIDAA browser window is occasionally smaller than the panel.
   ------------------------------------------------------------------ */

/* ---- genuine 4K viewport ----------------------------------------- */

@media (min-width: 2560px) {
  :root {
    --fs-xs:   28px;
    --fs-sm:   36px;
    --fs-base: 42px;
    --fs-md:   50px;
    --fs-lg:   60px;
    --fs-xl:   78px;
    --fs-2xl:  98px;
    --fs-3xl: 128px;

    --sp-1:   8px;
    --sp-2:  16px;
    --sp-3:  22px;
    --sp-4:  28px;
    --sp-5:  42px;
    --sp-6:  56px;
    --sp-7:  84px;
    --sp-8: 112px;
    --sp-9: 168px;

    --safe-x: 128px;
    --safe-y:  80px;

    --r-sm:  10px;
    --r-md:  18px;
    --r-lg:  28px;

    --focus-width: 4px;
    --focus-accent: 5px;
    --nav-w: 148px;
    --nav-item-h: 108px;
    --person-size: 190px;

    /* Tracks the type scale (24px base -> 42px). */
    --icon-scale: 1.75;
  }

  .btn        { min-height: 118px; }
  .btn--sm    { min-height:  92px; }

  .row-item   { min-height: 146px; }
  .field__input { min-height: 132px; }
  .spinner__ring { width: 56px; height: 56px; border-width: 5px; }
  .pane-split__side { flex-basis: 660px; }
  .debug { font-size: 26px; }
}

/* ---- smaller-than-1080p window ----------------------------------- */

@media (max-width: 1400px) {
  :root {
    --fs-xs:   14px;
    --fs-sm:   17px;
    --fs-base: 20px;
    --fs-md:   24px;
    --fs-lg:   29px;
    --fs-xl:   36px;
    --fs-2xl:  46px;
    --fs-3xl:  58px;

    --safe-x: 40px;
    --safe-y: 28px;
    --nav-w: 72px;
    --nav-item-h: 52px;
    --person-size: 88px;
  }
  .btn      { min-height: 56px; }

  .row-item { min-height: 70px; }
  .pane-split__side { flex-basis: 300px; }
}

/* ---- very narrow (a phone opening the dev URL by accident) -------- */

@media (max-width: 760px) {
  .pane-split { flex-direction: column; }
  .pane-split__side { flex: 0 0 auto; max-height: 40%; }
  /* A phone that opened the dev URL: keep the rail, just narrow it. */
  .nav { gap: var(--sp-2); padding: var(--sp-3) var(--sp-1); }
  .nav__brand { font-size: calc(var(--fs-xs) * 0.8); }
}

/* ---- landscape safety -------------------------------------------- */

@media (max-height: 620px) {
  /* The one place the rail may not fit: let it scroll, and accept that
     the floating label is clipped there. It is a phone, not the TV. */
  :root { --safe-y: 20px; --nav-item-h: 46px; }
  .nav { overflow-y: auto; overflow-x: hidden; }
  .nav-item__label { display: none; }
}