/* Open Design · OD Next handheld shell — platform-neutral phone (Apache-2.0 template).
   Shared by every variant. Presentation only: it sets no app typography, palette, spacing or navigation.
   Each variant overrides --phone-screen-bg / --phone-system-fg / --phone-stage-bg on :root.
   html.embed (?embed=1) is the compact mode used by the comparison board iframes. */
:root {
  --phone-screen-width: 390px;
  --phone-screen-height: 844px;
  --phone-bezel: 10px;
  --phone-outer-radius: 52px;
  --phone-screen-radius: 42px;
  --phone-safe-top: 50px;
  --phone-safe-bottom: 29px;
  --phone-system-fg: #17181a;
  --phone-screen-bg: #f8f8f9;
  --phone-stage-bg: #eaebee;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: radial-gradient(circle at 50% 15%, rgba(255,255,255,.94), transparent 35%), var(--phone-stage-bg);
}
html.embed body { padding: 0; min-height: 0; display: block; background: transparent; }

.phone-frame {
  position: relative;
  width: calc(var(--phone-screen-width) + var(--phone-bezel) * 2);
  height: calc(var(--phone-screen-height) + var(--phone-bezel) * 2);
  padding: var(--phone-bezel);
  border-radius: var(--phone-outer-radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), transparent 17%),
    linear-gradient(160deg, #3f4146 0%, #202227 48%, #0b0c0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 0 0 2px rgba(0,0,0,.85),
    0 32px 68px -20px rgba(10,12,16,.52),
    0 10px 24px -10px rgba(10,12,16,.32);
  isolation: isolate;
}
html.embed .phone-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), inset 0 0 0 2px rgba(0,0,0,.85); }
.phone-frame::before, .phone-frame::after {
  content: ""; position: absolute; z-index: -1; top: 96px; bottom: 96px; width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.13) 16%, transparent 30%, transparent 72%, rgba(255,255,255,.07) 88%, transparent);
}
.phone-frame::before { left: 0; }
.phone-frame::after { right: 0; }
.hardware-button { position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #08090b, #2a2d33 60%, #08090b); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.hardware-button.volume { left: -3px; top: 222px; height: 86px; }
.hardware-button.power { right: -3px; top: 270px; height: 82px; }
.phone-screen {
  position: relative; width: var(--phone-screen-width); height: var(--phone-screen-height);
  overflow: hidden; border-radius: var(--phone-screen-radius); background: var(--phone-screen-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-content {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-top: var(--phone-safe-top); padding-bottom: var(--phone-safe-bottom);
  background: var(--phone-screen-bg);
}
.phone-content::-webkit-scrollbar { display: none; }
.camera-dot {
  position: absolute; z-index: 20; top: 13px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 38% 35%, #344154 0 12%, #0a0c10 34%, #000 76%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06); pointer-events: none;
}
.status-bar {
  position: absolute; z-index: 15; inset: 0 0 auto; height: var(--phone-safe-top);
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: start;
  padding: 14px 20px 0; color: var(--phone-system-fg); opacity: .8; pointer-events: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.status-time { justify-self: start; display: flex; align-items: center; height: 15px; font-size: 14px; font-weight: 560; line-height: 1; letter-spacing: .01em; }
.status-cutout-zone { width: 56px; }
.status-icons { justify-self: end; display: inline-flex; align-items: center; height: 15px; gap: 6px; }
.status-icons svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.status-icons .connectivity { width: 15px; height: 12px; }
.status-icons .wifi { width: 15px; height: 12px; }
.status-icons .battery { width: 19px; height: 11px; }
.gesture-indicator {
  position: absolute; z-index: 20; left: 50%; bottom: 8px; width: 96px; height: 4px; transform: translateX(-50%);
  border-radius: 99px; background: var(--phone-system-fg); opacity: .86; pointer-events: none;
}

/* Presentation scaling: keep the whole handset visible on short viewports (standalone only). */
@media (max-height: 927px) { html:not(.embed) .phone-frame { zoom: 0.9; } }
@media (max-height: 840px) { html:not(.embed) .phone-frame { zoom: 0.82; } }
@media (max-height: 771px) { html:not(.embed) .phone-frame { zoom: 0.74; } }
@media (max-height: 702px) { html:not(.embed) .phone-frame { zoom: 0.66; } }
/* Narrow viewports: the handset chrome collapses and the screen fills the viewport. */
@media (max-width: 480px) {
  html:not(.embed) body { padding: 0; display: block; }
  html:not(.embed) .phone-frame { width: 100%; height: 100dvh; padding: 0; border-radius: 0; background: none; box-shadow: none; zoom: 1; }
  html:not(.embed) .phone-frame::before, html:not(.embed) .phone-frame::after, html:not(.embed) .hardware-button { display: none; }
  html:not(.embed) .phone-screen { width: 100%; height: 100%; border-radius: 0; }
}