/* ==================================================================
   THE DEVICE'S SCREENS — layout and type.
   Spec: docs/superpowers/specs/2026-07-31-site-device-screens-design.md

   SURFACES COME FROM kithe-web.css, which is generated from the app's
   own tokens. If a value has a token it is taken from there and never
   overridden — that is the one rule the app lane's handoff asks of us,
   and a guard in scripts/site-screens.test.mjs enforces it.

   This file carries what the generated skin does NOT: layout, type, and
   values with no token behind them.
   ================================================================== */

/* 867, not 844. The frame is exactly 9:20 (--ar-device); a real 390x844
   handset is 0.462, so a screen built at 844 and scaled to the frame's WIDTH
   lands 17px short of its foot at 1440x900 and shows a strip of bare frame
   under the tab bar. 390x867 is 0.4498 and fills it to within 1px.

   Each screen is built at that size and scaled to the frame. The frame
   is 235–306px wide on desktop and 100vw+46 on narrow, and the generated
   recipes carry absolute pixel shadows tuned for a real phone — so building
   at the frame's literal width would scale everything except the shadows.
   transform-origin is top left because the device is top-anchored and
   cropped at the foot; scaling from the centre would move the crop. */
.screen-stack { position: absolute; inset: 0; }

.screen {
  position: absolute; top: 0; left: 0;
  width: 390px; height: 867px;   /* 9:20, the frame's own --ar-device */
  transform: scale(var(--screen-scale, 1));
  transform-origin: top left;
  opacity: 0;
  transition: opacity var(--swap-in) var(--swap-ease);
  /* A screen that is off must not catch a tap meant for the rail behind it. */
  pointer-events: none;
}
.screen.is-on { opacity: 1; }

/* The handset's speaker pill is .device::before and is chrome, so it sits
   ABOVE the screen. A stacking order, not a design value. */
.device::before { z-index: 1; }

/* ---- Screen furniture -------------------------------------------------
   Names are scr-* so nothing here can be mistaken for a generated .k-* class.
   .scr carries NO padding of its own: --scr-window-top/-bottom are measured
   from the screen's true edge (y=0 of the 867px canvas), so a padded .scr
   would push .scr-head and .scr-payload down by the padding and silently
   break that contract. Each block below owns its own inset instead. */
.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font: var(--text-caption);
  color: var(--k-color-ink);
}

/* The window a phone actually sees, in unscaled screen pixels. The window
   varies with each beat's OWN text height — where the words' scrim clears
   and where the note's box starts move beat to beat — so a single pair of
   constants can only ever be the INTERSECTION across every lit beat, not
   one beat's window generalised. Measured per beat at 390x844:

     beat 0  card      clears 232   note 537
     beat 2  edited    clears 232   note 555
     beat 4  people    clears 179   note 520
     beat 7  sharing   clears 205   note 537
     beat 10 backup    clears 205   note 537
     beat 11 pause     clears 206   note 537

   The intersection across all six is 232–520 — a 288px window. Deferred:
   scoping these per-screen instead of one shared pair. */
:root {
  --scr-window-top: 232px;
  --scr-window-bottom: 520px;
}

.scr-head {
  height: var(--scr-window-top);
  display: flex; align-items: flex-end; gap: var(--sp-12);
  padding: 0 var(--sp-16) var(--sp-16);
}
.scr-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--k-radius-control);
  display: grid; place-items: center;
  font: var(--text-caption); color: var(--k-color-faint);
}
.scr-name { font: var(--text-lead); color: var(--k-color-ink); }

.scr-payload {
  height: calc(var(--scr-window-bottom) - var(--scr-window-top));
  margin: 0 var(--sp-16);
  overflow: hidden;
}
.scr-bar {
  font: var(--text-caption); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--k-color-muted);
  padding: var(--sp-8) var(--sp-16);
}
.scr-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-16);
}
.scr-label {
  font: var(--text-caption); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--k-color-muted);
}
.scr-value { font: var(--text-caption); color: var(--k-color-ink); }