/* ==========================================================================
   phone-frame.css — realistic phone on desktop, full-bleed on real phones.

   <body>                                   (or any element with .phone-host)
     <div class="phone">
       <div class="phone-screen">
         <div class="phone-status"><span>9:41</span><span class="phone-status-icons">…</span></div>  (optional)
         … app …
       </div>
       <div class="phone-caption">Pasagjeri</div>                                                   (optional)
     </div>
   </body>

   • Wider than 520 px: a modern phone (thin black bezel, titanium rim, side buttons,
     dynamic island, home indicator) centred on a subtle branded background.
     The screen is 390×844 when the window is tall enough; on shorter windows the
     screen height shrinks (min 560 px) and the width stays 360–390 px, so app
     layouts must be height-flexible (they are on real phones too).
   • 520 px or narrower (real phones, narrow iframes): full-bleed, no frame.
   • Inside .phone-screen use var(--safe-top) / var(--safe-bottom) as padding so content
     clears the status bar / home indicator in both modes (54/34 px framed, env() on phones).
   • position:fixed children (sheets, toasts) are contained by the screen when framed.
   • .phone-status.is-light gives white status text; .phone.is-dark-ui lightens the rim
     (automatic on data-product="screens" and data-theme="dark"). The home indicator
     auto-contrasts (mix-blend-mode: difference).
   • Status icons without SVG: <span class="phone-status-icons"><i class="ps-signal"></i>
     <i class="ps-wifi"></i><i class="ps-battery"></i></span>
   • Host background follows data-product="ride" | "screens" (+ data-theme="dark").
   • In an iframe (deck .phone-mock, stage) brand.js marks <html data-embedded>: full-bleed,
     but with the 54/34 px safe areas, status bar and home indicator (the host draws the island).
   ========================================================================== */

.phone {
  --screen-h: clamp(560px, calc(100dvh - 64px), 844px);
  --screen-w: clamp(360px, calc(var(--screen-h) * 0.5), 390px);
  --screen-radius: 48px;
  --bezel: 11px;
  --safe-top: 54px;
  --safe-bottom: 34px;
  --rim: #2b2d32;
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: var(--screen-w);
  height: var(--screen-h);
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: #060607;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),         /* bezel inner edge   */
    0 0 0 1px #0d0e10,                                 /* bezel outer edge   */
    0 0 0 3.5px var(--rim),                            /* titanium band      */
    0 0 0 4.5px #6d7078,                               /* polished chamfer   */
    0 0 0 5.5px #18191c,                               /* outer lip          */
    0 2px 3px 5px rgba(0, 0, 0, .12),
    0 40px 80px -24px rgba(12, 14, 22, .55),
    0 24px 50px -30px rgba(12, 14, 22, .45);
}
/* Side buttons: action + volume up/down (left), side button (right). One element per
   side; the left strip is three buttons drawn with a hard-stop gradient. */
.phone::before, .phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 5px;
  border-radius: 2px;
}
.phone::before {
  left: -9px;
  top: 112px;
  height: 196px;
  background: linear-gradient(180deg,
    #4a4d54 0 30px, transparent 30px 58px,
    #4a4d54 58px 120px, transparent 120px 134px,
    #4a4d54 134px 196px);
}
.phone::after {
  right: -9px;
  top: 178px;
  height: 100px;
  background: linear-gradient(90deg, #2c2e33, #55585f);
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--screen-radius);
  background: var(--bg, #fff);
  color: var(--fg, #111418);
  isolation: isolate;
  transform: translateZ(0);          /* contain position:fixed children */
  display: flex;
  flex-direction: column;
}
/* Dynamic island */
.phone-screen::before {
  content: "";
  position: absolute;
  z-index: 2147483000;
  top: 11px; left: 50%;
  width: 124px; height: 36px;
  margin-left: -62px;
  border-radius: 20px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  pointer-events: none;
}
/* Home indicator (auto-contrasts with whatever is underneath) */
.phone-screen::after {
  content: "";
  position: absolute;
  z-index: 2147483000;
  bottom: 8px; left: 50%;
  width: 136px; height: 5px;
  margin-left: -68px;
  border-radius: 3px;
  background: #fff;
  mix-blend-mode: difference;
  opacity: .85;
  pointer-events: none;
}

/* Optional status bar */
.phone-status {
  position: absolute;
  z-index: 2147482000;
  top: 0; left: 0; right: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 30px 0 44px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;   /* vendored: no fallback fonts on Linux */
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--status-fg, var(--fg, #111418));
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.phone-status > span:first-child { min-width: 54px; text-align: center; }
.phone-status-icons { display: inline-flex; align-items: center; gap: 6px; }
.phone-status-icons svg { width: 17px; height: 17px; display: block; }
.phone-status.is-light { --status-fg: #fff; }

/* Built-in status icons: <span class="phone-status-icons"><i class="ps-signal"></i><i class="ps-wifi"></i><i class="ps-battery"></i></span> */
.ps-signal, .ps-wifi, .ps-battery { display: block; position: relative; color: currentColor; }
.ps-signal { width: 18px; height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 100% / 3px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 100% / 3px 8.5px no-repeat,
    linear-gradient(currentColor, currentColor) 15px 100% / 3px 11px no-repeat; }
.ps-signal { border-radius: 1px; }
.ps-wifi { width: 16px; height: 12px;
  background: radial-gradient(circle at 50% 100%, currentColor 0 2.6px, transparent 3.1px 5px, currentColor 5.4px 7.4px, transparent 7.9px 9.8px, currentColor 10.2px 12.2px, transparent 12.6px);
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 0 90deg, transparent 90deg);
          mask: conic-gradient(from -45deg at 50% 100%, #000 0 90deg, transparent 90deg); }
.ps-battery { width: 25px; height: 12px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, currentColor 45%, transparent); }
.ps-battery::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 72%; border-radius: 1.5px; background: currentColor; }
.ps-battery::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: color-mix(in srgb, currentColor 45%, transparent); }

.phone-caption {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 16px);
  text-align: center;
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted, #6B7280);
}

/* ── Page that hosts a phone: centred on a subtle branded background ─── */
body:has(> .phone), .phone-host {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: #EEF0F3;
  background-image:
    radial-gradient(rgba(17, 20, 24, .06) 1px, transparent 1.4px),
    radial-gradient(60% 55% at 12% 8%, rgba(120, 120, 140, .14), transparent 60%);
  background-size: 22px 22px, auto;
  overflow: hidden;
}
[data-product="ride"] body:has(> .phone), [data-product="ride"] .phone-host, .phone-host[data-product="ride"] {
  background-color: #F4EFE8;
  background-image:
    radial-gradient(rgba(17, 20, 24, .07) 1px, transparent 1.4px),
    radial-gradient(55% 50% at 10% 6%, rgba(229, 38, 46, .13), transparent 62%),
    radial-gradient(50% 45% at 92% 96%, rgba(255, 198, 41, .22), transparent 62%);
  background-size: 22px 22px, auto, auto;
}
[data-product="ride"][data-theme="dark"] body:has(> .phone),
[data-product="ride"][data-theme="dark"] .phone-host,
.phone-host[data-product="ride"][data-theme="dark"] {
  background-color: #0C0E11;
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px),
    radial-gradient(55% 50% at 10% 6%, rgba(229, 38, 46, .22), transparent 62%),
    radial-gradient(50% 45% at 92% 96%, rgba(255, 198, 41, .12), transparent 62%);
  background-size: 22px 22px, auto, auto;
}
[data-product="screens"] body:has(> .phone), [data-product="screens"] .phone-host, .phone-host[data-product="screens"] {
  background-color: #0B0D17;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(55% 50% at 12% 8%, rgba(123, 92, 255, .32), transparent 62%),
    radial-gradient(50% 45% at 90% 95%, rgba(0, 209, 193, .2), transparent 62%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
/* On dark hosts the black bezel needs a lighter rim to read as a device. */
[data-product="screens"] .phone, [data-theme="dark"] .phone, .phone.is-dark-ui { --rim: #3a3d44; }

/* Short windows: let the page scroll rather than clip the phone. */
@media (max-height: 624px) and (min-width: 521px) {
  body:has(> .phone), .phone-host { overflow: auto; place-items: start center; }
}

/* ── Real phones / narrow iframes: full-bleed, no frame ───────────── */
@media (max-width: 520px) {
  body:has(> .phone), .phone-host {
    display: block;
    padding: 0;
    background: var(--bg, #fff);
    min-height: 100dvh;
    overflow: hidden;
  }
  .phone {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .phone::before, .phone::after,
  .phone-screen::before, .phone-screen::after,
  .phone-status, .phone-caption { display: none; }
  .phone-screen { border-radius: 0; transform: none; }

  /* Embedded in a device mock (deck .phone-mock, stage layouts — brand.js sets data-embedded
     on <html> when the page runs in an iframe): the host draws the bezel and the island, so
     keep the framed safe areas and show the status bar and home indicator. */
  [data-embedded] .phone { --safe-top: 54px; --safe-bottom: 34px; }
  [data-embedded] .phone-status { display: flex; }
  [data-embedded] .phone-screen::after { display: block; }
}