/* ============================================================================
   Harness — everything that is NOT the SFC+ screen: page backdrop, the phone
   shell, and the faux iOS status bar. The screen itself lives in the app area
   and knows nothing about any of this.
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background: #E9EAEC;
}

.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}

/* The device. 430 x 932 is the iPhone 16 Pro Max logical viewport the
   reference screenshots were taken on, so 1 CSS px here == 1 device px there. */
.phone {
  position: relative;
  width: var(--geo-screen-w);
  height: var(--geo-screen-h);
  max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--c-white);
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Below 470px the shell is pointless — go edge to edge like a real handset. */
@media (max-width: 470px) {
  .stage { padding: 0; }
  .phone { --geo-screen-h: 100dvh; border-radius: 0; box-shadow: none; }
}

/* — status bar — red, because the SFC+ header sits directly beneath it — */
.statusbar {
  flex: 0 0 auto;
  position: relative; z-index: 200;
  height: var(--geo-statusbar);
  background: var(--c-chrome);
  color: var(--c-white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px 0;
  font-size: 17px; font-weight: var(--fw-semi);
  letter-spacing: 0.2px;
}
.statusbar__island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; border-radius: 19px; background: #000;
}
.statusbar__right { display: flex; align-items: center; gap: 7px; }
.statusbar__wifi { width: 17px; height: 12px; fill: currentColor; }
.statusbar__batt {
  position: relative;
  width: 25px; height: 13px; border-radius: 3.5px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 1.5px;
}
.statusbar__batt::after {
  content: ''; position: absolute; top: 3.5px; right: -3px;
  width: 2px; height: 5px; border-radius: 0 1px 1px 0;
  background: rgba(255, 255, 255, 0.55);
}
.statusbar__batt i { display: block; height: 100%; width: 52%; border-radius: 2px; background: var(--c-white); }

/* — the app area: the only thing a real device would render — */
.app {
  position: relative;
  flex: 1; min-height: 0;
  background: var(--c-white);
  overflow: hidden;
}