/*
 * phone.css (W23g-WEB, drafts A2 and A3): draft A's phone, as a part any
 * section can place. The page sizes .ph (the glass: the app's 402 x 874
 * screen; a3.css gives each phone its width and its height), so the phone's box is known before any script
 * runs (no layout shift); the black border, the metal rim and the buttons
 * are drawn round it, outside its box, in the glass's own width units (cqw).
 * feed.js fills .ph-ui (the app's screen in its own points, scaled by --k).
 *
 * A reel's gestures (the save's burst, the bookmark's flight, the 2x pill)
 * are drawn in that reel's own layer (.ph-fx inside its .ph-slot), inside
 * the glass, which clips them: nothing drawn for one phone shows outside it.
 */
/* The phones' metal: natural titanium in Light, black titanium in Dark (it
   came with the old flip phone's style sheet; the phones below still use it). */
:root {
  --flip-metal: #BDB7AD;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flip-metal: #48484B;
  }
}
:root[data-theme="dark"] {
  --flip-metal: #48484B;
}

.ph {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 402 / 874;
  -webkit-tap-highlight-color: transparent;
}
.ph-bezel {
  position: absolute;
  inset: -3.2cqw;
  display: block;
  border-radius: 16.9cqw;
  background: #050607;
  box-shadow:
    inset 0 0 0 max(1.5px, 0.5cqw) var(--flip-metal, #BDB7AD),
    inset 0 0 0 max(2.5px, 0.8cqw) rgba(0, 0, 0, 0.6),
    0 10cqw 18cqw -6cqw rgba(10, 16, 22, 0.42);
}
/* the buttons on its sides: Action and volume on the left, side button and
   Camera Control on the right */
.ph-btn {
  position: absolute;
  display: block;
  width: max(2px, 0.8cqw);
  border-radius: 0.4cqw;
  background: var(--flip-metal, #BDB7AD);
}
.ph-l1,
.ph-l2,
.ph-l3 { left: -3.8cqw; }
.ph-r1,
.ph-r2 { right: -3.8cqw; }
.ph-l1 { top: 17%; height: 4.5%; }
.ph-l2 { top: 25%; height: 8.5%; }
.ph-l3 { top: 35.5%; height: 8.5%; }
.ph-r1 { top: 27%; height: 13%; }
.ph-r2 { top: 56%; height: 7%; background: #2A2C30; }
.ph-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 13.7cqw;
  background: #000;
  isolation: isolate;
}
.ph-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
/* the window the reels show through: it ends 1 point under the dock's top
   edge (feed.js sets its height from the app's layout), so no reel is ever
   under the dock and none shows beneath it or round its corners (the owner,
   4 Oct: "Make the dock flush to the mock phones edges") */
.ph-reels {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  overflow: hidden;
}
.ph-slot,
.ph-fx,
.ph-shot,
.ph-shot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
}
.ph-slot {
  visibility: hidden;
  will-change: transform;
}
.ph-fx {
  pointer-events: none;
}
.ph-shot img {
  display: block;
  max-width: none;
}
/* a phone a reader may tap: the thumb shows where they tapped */
.ph[role="button"] {
  cursor: pointer;
}
.ph[role="button"]:focus-visible {
  outline: none;
}
.ph[role="button"]:focus-visible .ph-bezel {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--ink),
    inset 0 0 0 max(1.5px, 0.5cqw) var(--flip-metal, #BDB7AD);
}

/* ------------------------------------------------------------ the solid phone
   solid.js builds a body round a .ph that turns (the hero's, the
   walkthrough's): the front moved half the thickness (6.118cqw: 11.5% of the
   outer width, halved) toward the eye, the back as far behind, the metal
   band of facets and the buttons between. Nothing on .ph.solid may flatten
   its 3D (no opacity, filter, mask, clip-path or overflow on it or on
   .sb-band); the faces are flat planes, so their insides may clip. */
:root {
  --sb-metal-hi: #F1EDE6;
  --sb-metal-lo: #8E887E;
  --sb-back: #CEC9C0;              /* the back glass, natural titanium's tone (Light) */
  --sb-back-2: #B5AFA5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-metal-hi: #8D8D91;
    --sb-metal-lo: #252527;
    --sb-back: #3C3C3F;            /* black titanium's (Dark) */
    --sb-back-2: #28282B;
  }
}
:root[data-theme="dark"] {
  --sb-metal-hi: #8D8D91;
  --sb-metal-lo: #252527;
  --sb-back: #3C3C3F;
  --sb-back-2: #28282B;
}
.ph.solid {
  transform-style: preserve-3d;
}
.ph.solid > .ph-bezel,
.ph.solid > .ph-glass {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ph.solid > .ph-bezel {
  transform: translateZ(6.118cqw);
  /* its shadow lies behind the body instead (.sb-drop), or on the floor */
  box-shadow:
    inset 0 0 0 max(1.5px, 0.5cqw) var(--flip-metal, #BDB7AD),
    inset 0 0 0 max(2.5px, 0.8cqw) rgba(0, 0, 0, 0.6);
}
.ph.solid > .ph-glass {
  transform: translateZ(6.218cqw);   /* a hair over its border, so the two never fight */
}
.ph.solid[role="button"]:focus-visible .ph-bezel {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--ink),
    inset 0 0 0 max(1.5px, 0.5cqw) var(--flip-metal, #BDB7AD);
}
.ph.solid > .ph-btn {                /* the band carries them */
  display: none;
}
.sb-band {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  display: block;
  transform-style: preserve-3d;
  pointer-events: none;
}
/* a facet of the band: the metal, bright where it rounds into the front
   and the back, darker at their edges */
.sb-f {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, var(--sb-metal-lo) 0, var(--sb-metal-hi) 12%, var(--flip-metal, #BDB7AD) 30%,
    var(--flip-metal, #BDB7AD) 70%, var(--sb-metal-hi) 88%, var(--sb-metal-lo) 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sb-s {
  position: absolute;
  inset: 0;
  display: block;
  background: #000;
  opacity: 0.3;
}
.sb-btn {
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, var(--sb-metal-lo), var(--sb-metal-hi) 30%, var(--flip-metal, #BDB7AD) 60%, var(--sb-metal-lo));
}
.sb-cc {                             /* Camera Control: a sapphire window, flush */
  background: linear-gradient(90deg, #1E2023, #4A4E54 45%, #26282B);
}
/* the back: frosted glass, lit from the upper left */
.sb-back {
  position: absolute;
  inset: -3.2cqw;
  display: block;
  overflow: hidden;
  border-radius: 16.9cqw;
  background:
    radial-gradient(130% 80% at 18% 4%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%),
    radial-gradient(110% 70% at 96% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(162deg, var(--sb-back) 0%, var(--sb-back-2) 100%);
  box-shadow: inset 0 0 0 max(1.5px, 0.5cqw) var(--flip-metal, #BDB7AD), inset 0 0 0 max(2.5px, 0.8cqw) rgba(0, 0, 0, 0.12);
  transform: rotateY(180deg) translateZ(6.118cqw);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}
/* the camera's plateau: a raised square of the same glass, polished, top
   left as the back is seen */
.sb-cam {
  position: absolute;
  left: 6.5%;
  top: 3.2%;
  width: 43%;
  aspect-ratio: 1;
  display: block;
  border-radius: 24%;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 42%),
    linear-gradient(152deg, var(--sb-back), var(--sb-back-2));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.18),
    0 1.2cqw 3cqw rgba(0, 0, 0, 0.28),
    0 0.3cqw 0.4cqw rgba(0, 0, 0, 0.3);
}
/* a lens: a machined ring, the dark barrel stepping down, the glass */
.sb-lens {
  position: absolute;
  display: block;
  width: 41%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #E4E5E8, #7E828A 18%, #F5F6F7 34%, #5E626A 52%, #D3D5D9 70%, #6B6F77 86%, #E4E5E8);
  box-shadow: 0 0.5cqw 1.2cqw rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.sb-lens > i {
  position: absolute;
  inset: 8%;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #1B1F28 0 50%, #0A0C11 51% 60%, #262B35 61% 64%, #06070A 65% 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.85), inset 0 -1px 1px rgba(255, 255, 255, 0.14);
}
.sb-lens > i > b {
  position: absolute;
  inset: 24%;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(210, 225, 255, 0.85) 0 5%, rgba(110, 140, 220, 0.4) 11%, rgba(0, 0, 0, 0) 26%),
    radial-gradient(circle at 66% 70%, rgba(170, 95, 210, 0.4) 0 7%, rgba(0, 0, 0, 0) 22%),
    radial-gradient(circle, #1C2644 0, #0A0F1E 62%, #04060C 100%);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
}
.sb-l1 { left: 7%; top: 7%; }
.sb-l2 { left: 7%; top: 52%; }
.sb-l3 { left: 52%; top: 29.5%; }
.sb-flash,
.sb-lidar {
  position: absolute;
  display: block;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.sb-flash {
  left: 71%;
  top: 9%;
  background: radial-gradient(circle at 40% 35%, #FFF8E4 0, #EADFBD 45%, #B4A984 100%);
}
.sb-lidar {
  left: 71%;
  top: 79%;
  background: radial-gradient(circle at 40% 35%, #3A3C42, #0A0A0C 70%);
}
/* the light on a glass: a soft band that slides as the phone turns; the
   shade: the glass darker as it turns from the light (solid.js sets both) */
.sb-glare {
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 100%;
  display: block;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  pointer-events: none;
}
.sb-back .sb-glare {
  background: linear-gradient(102deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.36) 47%, rgba(255, 255, 255, 0.1) 53%, rgba(255, 255, 255, 0) 61%);
}
.sb-shade {
  position: absolute;
  inset: 0;
  display: block;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.ph-glass > .sb-glare,
.ph-glass > .sb-shade {
  z-index: 5;
}
/* the phone's shadow on the page, on a plane behind the body */
.sb-drop {
  position: absolute;
  inset: -3.2cqw;
  display: block;
  border-radius: 16.9cqw;
  box-shadow: 0 10cqw 18cqw -6cqw rgba(10, 16, 22, 0.42);
  transform: translateZ(-6.118cqw);
  pointer-events: none;
}