/* ==========================================================================
   tablet-frame.css — a 1280×800 stage scaled to fit any box, letterboxed.

   Kiosk / full window (the player):
     <body class="tablet-host">
       <div class="tablet-stage"> … 1280×800 app … </div>
     </body>

   Inside any sized box (decks, stage layouts, styleguide):
     <div class="tablet-fit" style="height:480px"> <div class="tablet-stage">…</div> </div>
     <div class="tablet-fit"> <iframe class="tablet-stage" src="/screens/player/"></iframe> </div>

   Looks (add to the host / fit element):
     .tablet-device   black bezel, glass edge and a soft shadow on a dark backdrop
     .tablet-mount    the device clamped to a headrest: leather seat back with stitching,
                      headrest, chrome posts — for demos and decks
   The stage is always exactly 1280×800 CSS px and is scaled with transform: scale(), so
   the app inside lays out identically on a projector, a laptop or a real 10.1" tablet.
   Scale = min(box width / (1280 + 2·padX), box height / (800 + 2·padY)); the looks only
   add padding so the bezel / seat stay visible. Exposed as --tablet-scale (unitless) for
   anything that needs to be positioned around the stage.
   Needs CSS trig functions (Chrome/Edge 111+, Safari 15.4+, Firefox 108+).
   ========================================================================== */

.tablet-host, .tablet-fit {
  --tablet-w: 1280px;
  --tablet-h: 800px;
  --tablet-pad-x: 0px;
  --tablet-pad-y: 0px;
  --tablet-shift-y: 0px;     /* moves the stage down (unscaled px), e.g. under a headrest */
  --tablet-bezel: 0px;
  --tablet-radius: 0px;
  --tablet-scale: min(
    tan(atan2(100cqw, calc(var(--tablet-w) + 2 * var(--tablet-pad-x)))),
    tan(atan2(100cqh, calc(var(--tablet-h) + 2 * var(--tablet-pad-y))))
  );
  position: relative;
  overflow: hidden;
  container-type: size;
  background: #000;
}
body.tablet-host {
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}
.tablet-fit { width: 100%; aspect-ratio: 16 / 10; }
.tablet-fit[style*="height"] { aspect-ratio: auto; }

.tablet-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tablet-w);
  height: var(--tablet-h);
  margin: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);                       /* fallback: no trig support */
  transform: translate(-50%, calc(-50% + var(--tablet-shift-y) * var(--tablet-scale))) scale(var(--tablet-scale));
  border-radius: var(--tablet-radius);
  background: #0B0D17;
  color: #fff;
  display: block;
  isolation: isolate;
}
iframe.tablet-stage { color-scheme: normal; }

/* ── Device: bezel + glass edge ─────────────────────────────────────── */
.tablet-device {
  --tablet-bezel: 26px;
  --tablet-radius: 10px;
  --tablet-pad-x: 64px;
  --tablet-pad-y: 64px;
  background:
    radial-gradient(70% 60% at 50% 40%, #1d2030 0%, #0c0e16 60%, #07080d 100%);
}
.tablet-device > .tablet-stage, .tablet-mount > .tablet-stage {
  box-shadow:
    0 0 0 var(--tablet-bezel) #0a0a0c,                                   /* bezel        */
    0 0 0 calc(var(--tablet-bezel) + 1.5px) #2c2e34,                     /* glass edge   */
    0 0 0 calc(var(--tablet-bezel) + 3px) #121316,                       /* housing      */
    0 calc(var(--tablet-bezel) + 30px) 70px calc(var(--tablet-bezel) - 6px) rgba(0, 0, 0, .55),
    0 calc(var(--tablet-bezel) + 8px) 18px calc(var(--tablet-bezel) - 4px) rgba(0, 0, 0, .45);
}
/* Front camera, centred in the top bezel; sits above the stage. */
.tablet-device::after, .tablet-mount::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  pointer-events: none;
}
.tablet-device::after {
  width: calc(10px * var(--tablet-scale));
  height: calc(10px * var(--tablet-scale));
  transform: translate(-50%, -50%);
  margin-top: calc((var(--tablet-shift-y) - var(--tablet-h) / 2 - var(--tablet-bezel) / 2) * var(--tablet-scale));
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a4a6a 0 18%, #12151c 32% 100%);
  box-shadow: 0 0 0 calc(1.5px * var(--tablet-scale)) #1b1c20;
}

/* ── Mount: device on the headrest posts, leather seat back around it ── */
.tablet-mount {
  --tablet-bezel: 26px;
  --tablet-radius: 10px;
  --tablet-pad-x: 150px;
  --tablet-pad-y: 230px;
  --tablet-shift-y: 110px;
  --mount-gap: 130px;          /* headrest bottom → screen top (posts + clamp + bezel) */
  --leather: #1b1b1e;
  --leather-hi: #2b2b30;
  --stitch: rgba(205, 198, 186, .30);
  --s: var(--tablet-scale);
  background-color: var(--leather);
  background-image:
    radial-gradient(90% 70% at 50% -10%, rgba(255, 240, 220, .10), transparent 60%),
    radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, var(--stitch) 0 55%, transparent 55% 100%),
    linear-gradient(180deg, var(--stitch) 0 55%, transparent 55% 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .045)),
    linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .5)),
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .03) 50%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:
    auto, auto,
    calc(2px * var(--s)) calc(13px * var(--s)),
    calc(2px * var(--s)) calc(13px * var(--s)),
    calc(6px * var(--s)) 100%,
    calc(6px * var(--s)) 100%,
    calc(1440px * var(--s)) 100%,
    220px 220px;
  background-position:
    0 0, 0 0,
    calc(50% - 722px * var(--s)) 0,
    calc(50% + 722px * var(--s)) 0,
    calc(50% - 734px * var(--s)) 0,
    calc(50% + 734px * var(--s)) 0,
    50% 0,
    0 0;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat, repeat;
}
/* Bottom of the headrest, above the tablet. */
.tablet-mount::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(1120px * var(--s));
  height: calc(440px * var(--s));
  transform: translateX(-50%);
  margin-top: calc((var(--tablet-shift-y) - var(--tablet-h) / 2 - var(--mount-gap) - 440px) * var(--s));
  border-radius: calc(220px * var(--s)) calc(220px * var(--s)) calc(80px * var(--s)) calc(80px * var(--s));
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(180deg, #232327, var(--leather-hi) 70%, #1a1a1d);
  box-shadow:
    inset 0 calc(-18px * var(--s)) calc(40px * var(--s)) rgba(0, 0, 0, .45),
    inset 0 0 0 calc(1px * var(--s)) rgba(255, 255, 255, .05),
    0 calc(22px * var(--s)) calc(50px * var(--s)) rgba(0, 0, 0, .6);
  outline: calc(2px * var(--s)) dashed var(--stitch);
  outline-offset: calc(-24px * var(--s));
}
/* Chrome headrest posts, the clamp bar gripping the tablet, and the front camera. */
.tablet-mount::after {
  width: calc((var(--tablet-w) + 2 * var(--tablet-bezel)) * var(--s));
  height: calc(var(--mount-gap) * var(--s));
  transform: translateX(-50%);
  margin-top: calc((var(--tablet-shift-y) - var(--tablet-h) / 2 - var(--mount-gap)) * var(--s));
  background:
    radial-gradient(circle at 50% calc(100% - var(--tablet-bezel) / 2 * var(--s)),
      #34425f 0 calc(1.6px * var(--s)), #0f1117 calc(2.6px * var(--s)) calc(4.6px * var(--s)), #1d1e22 calc(5px * var(--s)) calc(5.8px * var(--s)), transparent calc(6.3px * var(--s))),
    linear-gradient(180deg, #34363c, #18191c 60%, #0d0d0f) 50% calc(100% - (var(--tablet-bezel) - 4px) * var(--s)) / calc(600px * var(--s)) calc(28px * var(--s)) no-repeat,
    linear-gradient(90deg, #5f636b, #e6e9ee 38%, #a2a7af 62%, #44474e) calc(50% - 220px * var(--s)) 0 / calc(24px * var(--s)) calc(100% - 40px * var(--s)) no-repeat,
    linear-gradient(90deg, #5f636b, #e6e9ee 38%, #a2a7af 62%, #44474e) calc(50% + 220px * var(--s)) 0 / calc(24px * var(--s)) calc(100% - 40px * var(--s)) no-repeat;
  border-radius: calc(6px * var(--s));
}
.tablet-mount > .tablet-stage { z-index: 2; }

/* ── Phone in portrait: quarter-turn the stage ───────────────────────────
   A 16:10 stage letterboxed into a ~9:19.5 phone fills only ~29 % of it
   (measured: 375×812 → stage 375×234). Turning it a quarter lifts that to
   ~74 %, because the 1280 edge then spans the viewport's long axis — the
   same coverage the phone gets in landscape. Sideways content reads as
   "turn me", and turning the phone cancels the rule, so the two
   orientations agree.

   Only `body.tablet-host` (the full-window player) is affected. The
   `.tablet-fit` boxes embedded in decks, the stage and the styleguide keep
   their own aspect and must never rotate.                                 */
@media (orientation: portrait) and (max-width: 900px) {
  body.tablet-host {
    /* Axes swap with the rotation: the stage's width is matched against the
       viewport's height (100cqh) and its height against the width (100cqw). */
    --tablet-scale: min(
      tan(atan2(100cqh, calc(var(--tablet-w) + 2 * var(--tablet-pad-x)))),
      tan(atan2(100cqw, calc(var(--tablet-h) + 2 * var(--tablet-pad-y))))
    );
  }
  body.tablet-host > .tablet-stage {
    transform: translate(-50%, -50%) rotate(90deg) scale(var(--tablet-scale));
  }
  /* The camera dot is positioned along the unrotated Y axis; rotating the
     stage without it would leave it stranded on the wrong edge. */
  body.tablet-host.tablet-device::after,
  body.tablet-host.tablet-mount::after { display: none; }
}

/* Glass glare over the screen (optional): <div class="tablet-glare"></div> as last child of the stage. */
.tablet-glare {
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 32%, transparent 33%);
}