/* ─────────────────────────────────────────────────────────────────
   J.Hilburn iPhone Prototype · Device frame
   Device frame chrome + status bar + Dynamic Island + mobile fallback.
   The chassis is decorative; live content sits in `.device-screen`.
   ───────────────────────────────────────────────────────────────── */

/* ───── Device stage (the area between portfolio nav + footer) ───── */
.prototype-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Scoped: tighten footer spacing on the prototype page so the chassis
   has room to breathe at typical laptop viewport heights. */
.prototype-stage + .footer {
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ───── Device frame: outer chassis container ─────
   Fluid scale: at smaller viewport heights, shrink the chassis so the
   full frame (including the tab bar) is visible without scrolling.
   --chrome is the vertical space reserved for portfolio nav + stage
   padding (footer is allowed to overflow below the fold per Rebekah's
   sizing call). Capped at 1.0 (no upscaling on tall windows); floored
   at 0.45 so the chassis doesn't collapse on tiny windows. The
   negative margin-bottom collapses the un-scaled layout box. */
.device-frame {
  position: relative;
  /* iPhone 17 portfolio size. Chassis art = assets/frame-iphone-17.svg
     (viewBox 450 × 920). Outer matches the SVG so the chassis renders
     at native scale. Screen-area inset is derived: SVG outer 450 × 920
     minus Rebekah's stated iPhone 17 logical 402 × 874pt = 24px each
     side horizontally, 23px top/bottom — applied on .device-screen. */
  width: 450px;
  height: 920px;
  flex-shrink: 0;
  --chrome: 120px;
  --avail-h: calc(100vh - var(--chrome));
  --scale: max(0.45, min(1, calc(var(--avail-h) / 920px)));
  transform: scale(var(--scale));
  transform-origin: top center;
  margin-bottom: calc((var(--scale) - 1) * 920px);
}

.device-frame__chassis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* the chassis is decorative; taps go to the screen */
  z-index: 1;
  user-select: none;
}

/* ───── Screen viewport: the live HTML surface inside the chassis ───── */
.device-screen {
  position: absolute;
  /* iPhone 17 chassis inset — calculated from frame-iphone-17.svg
     (450 × 920 outer) vs the stated iPhone 17 logical screen 402 × 874pt.
     Tune if the chassis SVG includes outer margin (shadow / glow) that
     the screen shouldn't cover. */
  top: 23px;
  bottom: 23px;
  left: 24px;
  right: 24px;
  /* Display corner radius carried forward from iPhone 15 Pro (55px).
     [Uncertainty] iPhone 17's exact display corner radius isn't
     verified — adjust if it looks off against the chassis. */
  border-radius: 55px;
  overflow: hidden;
  z-index: 2;            /* sits on top of the chassis SVG */
  isolation: isolate;    /* contains screen content z-index */
}

/* ───── Status bar (static — never animates) ───── */
.status-bar {
  position: relative;
  z-index: 30;            /* render above modal sheets (incl. .sheet--full / referee-host) — iOS keeps the status bar on top of a fullScreenCover */
  height: 54px;
  padding: 17px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font: 600 17px/1 var(--app-font-sans);
  color: var(--app-text-primary);
  pointer-events: none;
}

.status-bar__time {
  letter-spacing: -0.01em;
}

.status-bar__indicators {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ───── Dynamic Island (static silhouette — never animates) ───── */
.dynamic-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 122px;
  height: 37px;
  background: #000;
  border-radius: 999px;
  z-index: 30;            /* render above modal sheets so the notch stays visible over .sheet--full */
  pointer-events: none;
}

/* ───── Mobile fallback ─────
   Below 500px viewport: hide chassis + Dynamic Island + fake status bar,
   render the screen full-bleed so the prototype is usable on a real phone. */
@media (max-width: 500px) {
  .prototype-stage {
    padding: 0;
    min-height: 100vh;
  }
  .device-frame {
    width: 100vw;
    height: 100vh;
    /* Cancel the desktop fluid-scale so the full-bleed phone view
       doesn't get transform-shrunk. */
    transform: none;
    margin-bottom: 0;
  }
  .device-frame__chassis,
  .dynamic-island,
  .status-bar {
    display: none;
  }
  .device-screen {
    inset: 0;
    border-radius: 0;
  }
}