/* ============================================================
   iPhone frame (393×852) - dynamic island, status bar, tab bar,
   home indicator. From DESIGN-BRIEF §3.2.
   ============================================================ */
.iphone{width:393px;height:852px;background:#000;border-radius:55px;padding:11px;
  box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 2px #2a2a2c;flex:none}
.screen{width:100%;height:100%;background:var(--bg);border-radius:45px;overflow:hidden;
  display:flex;flex-direction:column;position:relative}

/* dynamic island */
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:124px;height:35px;background:#000;border-radius:20px;z-index:40}

/* status bar */
.statusbar{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 30px 0 34px;z-index:30;position:relative;background:transparent}
.statusbar .st-time{font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.statusbar .st-icons{display:flex;align-items:center;gap:6px}
.statusbar .st-icons svg{height:13px;width:auto;display:block}
.statusbar.dark,.statusbar.dark .st-time{color:#fff}
.statusbar.dark .st-icons svg{color:#fff}

/* the area that holds the screens */
.frame-body{flex:1;position:relative;display:flex;min-height:0;background:var(--bg)}
.frame-body.grouped{background:var(--grouped)}
.screen-view.is-active{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.screen-view::-webkit-scrollbar{display:none}
.screen-view > .nav{flex:none}
.pagepad{padding-bottom:24px}

/* tab bar */
.tabbar{flex:none;height:83px;padding:7px 6px 22px;display:flex;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);position:relative;z-index:30}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--label2);
  position:relative;padding-top:3px}
.tab svg{width:26px;height:26px;stroke-width:1.7}
.tab span{font-size:10px;font-weight:500;letter-spacing:-.01em}
.tab.on{color:var(--tint)}
.tab .tabbadge{position:absolute;top:-1px;left:calc(50% + 7px);min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}

/* home indicator */
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:135px;height:5px;border-radius:3px;background:var(--label);opacity:.85;z-index:35}

/* prototype stage caption sizing for phone */
.page-iphone .cap{max-width:393px}

/* a full-bleed dark screen (onboarding / live) */
.screen-dark{background:var(--bg)}