/* phone.css — shared titanium iPhone frame APPEARANCE.
   Geometry (size, button positions, island placement) stays per-host:
   the flipbook is full-bleed + orientation-aware; the hero is small,
   portrait, and shown two-up. This file is the single source of truth
   for how the device LOOKS so the two mockups can't drift apart. */

:root {
  --ti-1: #c5beb3;
  --ti-2: #a89f91;
  --ti-3: #8a8174;
  --ti-highlight: #e8e2d6;
}

/* Natural-titanium body: eight-stop diagonal ramp + tight contact shadow
   + long soft ambient shadow. Shadow spreads are scaled by --short-edge,
   which each host must define.
   HOST CONTRACT: set `border-radius` (and size + padding) on the host
   element — `.phone-frame::before` clips its scratch texture via
   `border-radius: inherit`, so an unset host radius leaves the texture
   square. */
.phone-frame {
  position: relative;
  background: linear-gradient(135deg,
    var(--ti-2) 0%, var(--ti-1) 15%, var(--ti-3) 30%,
    var(--ti-2) 45%, var(--ti-highlight) 55%, var(--ti-2) 65%,
    var(--ti-3) 80%, var(--ti-1) 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -1px 1px rgba(0,0,0,0.2),
    0 calc(var(--short-edge) * 0.012) calc(var(--short-edge) * 0.03) rgba(0,0,0,0.10),
    0 calc(var(--short-edge) * 0.05)  calc(var(--short-edge) * 0.16) rgba(0,0,0,0.18);
}

/* Barely-visible diagonal machining texture that breaks the flat gradient. */
.phone-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg,
    transparent 0px, rgba(255,255,255,0.03) 1px,
    transparent 2px, rgba(0,0,0,0.02) 3px);
  pointer-events: none;
}

/* Inner bezel ring between body and screen. Host sets inset + radius. */
.phone-bezel-inner {
  position: absolute;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 0 2px rgba(60,55,48,0.5);
  pointer-events: none;
  z-index: 5;
}

/* Dynamic-island pill — colour only; host sets geometry/position. */
.phone-island {
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Side-button rail — horizontal gradient (top/bottom edges). Vertical
   hosts override `background` to the 180deg ramp. Host sets position/size. */
.phone-btn {
  position: absolute;
  background: linear-gradient(90deg, var(--ti-3), var(--ti-1), var(--ti-3));
}