/*
 * Dank fleet big-screen theme for jellyfin-web.
 *
 * Deployed by bind-mounting THIS file over the container's "Media Center"
 * theme (`/jellyfin/jellyfin-web/themes/wmc/theme.css`) — see the Volume line
 * in dankserver/jellyfin/quadlet/jellyfin.container. The slot is deliberately
 * one nobody picks by accident, and its name is the only thing that changes:
 * the colors are the live upstream dark theme, pulled in by @import below, so
 * this file never vendors a snapshot of upstream CSS and cannot drift when the
 * Jellyfin image moves.
 *
 * Why it exists: the living-room client (Jellyfin Desktop on danklivingroom)
 * renders this server-served web app at 3840x2160 with no client-side scaling,
 * so 14 px body text lands on a big panel viewed from three metres. `zoom` on
 * the root element is the one lever that scales the whole UI — the layout code
 * measures layout px, so card grids re-flow to fewer, larger columns instead of
 * overflowing.
 *
 * Adoption is per device, not global: Display Settings -> Theme ->
 * "Media Center" on the screen that wants it. That is the point — a phone
 * browser on the same server must not get a 1.75x interface.
 *
 * Change the size by editing the single number. 1.5 is mild, 1.75 is the
 * three-metre default, 2.0 is for a projector.
 */

@import url("../dark/theme.css");

:root {
  /* Marker the e2e gate reads back; also a tweak hook for a per-client
     override injected by anyone who really wants one. */
  --dank-big-screen: 1;
  --dank-big-screen-zoom: 1.75;
}

html {
  zoom: var(--dank-big-screen-zoom);
}

/* A remote moves focus in discrete jumps, so the ring has to survive a
   three-metre read. */
.emby-focus,
button:focus-visible,
a:focus-visible,
.inputElement:focus-visible {
  outline: 3px solid var(--accentColor, #00a4dc) !important;
  outline-offset: 2px !important;
}

/* Scrollbars are mouse furniture; on a TV they are noise at this size. */
* {
  scrollbar-width: none;
}