/* ===========================================================================
   POP — iOS shell: device frame, status bar, screen stack, transitions
   =========================================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #eceae7;
  font-family: var(--font-ui);
  color: var(--neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The panel is pinned to the window edge and taken out of flow, so the phone
   gets the middle of the stage instead of being pushed right by a 268px column
   sitting next to it. `--panel-w` reserves the space back as padding. */
:root { --panel-w: 264px; --panel-gap: 18px; }

.stage {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 40px;
  /* Symmetric, so the phone sits in the centre of the window and the panel
     occupies margin that was empty anyway. */
  padding: 40px 32px;
}

/* Once the window is too narrow for the centred phone to clear a fixed 264px
   column, reserve the space instead and let the phone centre in what's left. */
@media (max-width: 1040px) {
  .stage { padding-left: calc(var(--panel-w) + var(--panel-gap) * 2); }
}

/* The exploded grid is full-width, so unlike the phone it has no empty margin
   for the panel to sit in — it ran straight underneath it. Reserve the column
   whenever the grid is showing, at any window width. */
body.is-exploded .stage {
  padding-left: calc(var(--panel-w) + var(--panel-gap) * 2);
}

/* --- Device ------------------------------------------------------------- */
.device {
  position: relative;
  width: var(--screen-w); height: var(--screen-h);
  flex: 0 0 auto;
  border-radius: var(--r-device);
  background: #000;
  padding: 0;
  box-shadow:
    0 0 0 11px #1c1c1e,
    0 0 0 12px #3a3a3c,
    0 30px 70px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.12);
}

.viewport {
  position: absolute; inset: 0;
  border-radius: var(--r-device);
  overflow: hidden;
  background: var(--surface-app);
  isolation: isolate;
}

/* Dynamic Island */
.island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 125px; height: 36px; border-radius: 20px;
  background: #000; z-index: 900; pointer-events: none;
}

/* --- Status bar --------------------------------------------------------- */
.statusbar {
  position: relative; z-index: 500;
  height: var(--statusbar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 21px 24px 19px;
  gap: 154px;
  background: var(--neutral-0);
  flex: 0 0 auto;
}
.statusbar.is-transparent { background: transparent; }
.statusbar__time {
  flex: 1 0 0; min-width: 0; height: 22px;
  display: flex; align-items: center; justify-content: center; padding-top: 1.5px;
  font: 590 17px/22px var(--font-system);
  color: var(--neutral-900); white-space: nowrap;
}
.statusbar__levels {
  flex: 1 0 0; min-width: 0; height: 22px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding-right: 1px; padding-top: 1px;
}
.statusbar__levels svg { display: block; }

/* --- Screen stack ------------------------------------------------------- */
.stack { position: absolute; inset: 0; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--surface-app);
  will-change: transform, opacity;
}

/* Push: incoming from right, outgoing parallax to -30% with a dimming veil */
.screen--enter-push { animation: pushIn var(--dur-push) var(--ease-ios) both; }
.screen--exit-push  { animation: pushOut var(--dur-push) var(--ease-ios) both; }
.screen--enter-pop  { animation: popIn var(--dur-push) var(--ease-ios) both; }
.screen--exit-pop   { animation: popOut var(--dur-push) var(--ease-ios) both; }
.screen--enter-fade { animation: fadeIn 260ms var(--ease-out-ios) both; }
.screen--exit-fade  { animation: fadeOut 200ms ease both; }

@keyframes pushIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pushOut { from { transform: translateX(0); filter: brightness(1); }
                     to   { transform: translateX(-30%); filter: brightness(.92); } }
@keyframes popIn   { from { transform: translateX(-30%); filter: brightness(.92); }
                     to   { transform: translateX(0); filter: brightness(1); } }
@keyframes popOut  { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes fadeIn  { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* --- Scroll body -------------------------------------------------------- */
.screen__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.screen__body::-webkit-scrollbar { display: none; }

/* Space so sticky bottom bar never covers the last element */
.screen__body--has-bar { padding-bottom: calc(var(--buttonbar-h) + 8px); }

/* --- Home indicator ----------------------------------------------------- */
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 139px; height: 5px; border-radius: 3px;
  background: var(--neutral-900); opacity: .28;
  z-index: 850; pointer-events: none; /* above the keyboard, as on iOS */
}

/* --- Keyboard ----------------------------------------------------------- */
.kb-host {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Above the drawer (810) and its scrim (800). iOS never dims or blurs the
     keyboard — it is system chrome drawn on top of the app. Leaving this at
     800 made the winner depend on DOM order, so it blurred or not depending
     on which screens you had visited first. */
  z-index: 830;
  transform: translateY(100%);
  transition: transform var(--dur-kb) var(--ease-kb);
  will-change: transform;
}
.kb-host.is-up { transform: translateY(0); }

/* Anything that should ride above the keyboard */
.kb-lift { transition: transform var(--dur-kb) var(--ease-kb); will-change: transform; }

/* --- Sheets / overlays -------------------------------------------------- */
.scrim {
  position: absolute; inset: 0; z-index: 750;
  background: rgba(0,0,0,.42);
  opacity: 0; transition: opacity var(--dur-sheet) var(--ease-ios);
}
.scrim.is-on { opacity: 1; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 760;
  background: var(--neutral-0);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-ios);
}
.sheet.is-up { transform: translateY(0); }

/* --- Side panel (prototype chrome, outside the phone) ------------------- */
.panel {
  position: fixed; z-index: 10;
  left: var(--panel-gap); top: var(--panel-gap); bottom: var(--panel-gap);
  width: var(--panel-w);
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid #e2e0dd; border-radius: 16px;
  padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
  scrollbar-width: thin;
}

/* Narrow windows: put it back in the flow rather than letting a fixed column
   overlap the phone. */
@media (max-width: 860px) {
  .stage { padding: 40px 24px; flex-direction: column; }
  .panel { position: static; width: 100%; max-width: 420px; bottom: auto; }
}
.panel h1 { font: 600 16px/22px var(--font-display); margin: 0 0 2px; }
.panel p  { font: var(--t-regular-12); color: var(--neutral-500); margin: 0 0 14px; }
.panel__label {
  font: 700 10px/14px var(--font-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--neutral-400);
  margin: 16px 0 8px;
}
.panel__list { display: flex; flex-direction: column; gap: 2px; }
.panel__item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 0;
  background: transparent; text-align: left; width: 100%;
  font: var(--t-medium-13); color: var(--neutral-900);
}
.panel__item:hover { background: #f5f3f1; }
.panel__item.is-active { background: var(--beige-50); color: var(--orange-700); }
.panel__num {
  font: 700 10px/1 var(--font-ui); color: var(--neutral-400);
  min-width: 16px;
}
.panel__item.is-active .panel__num { color: var(--orange-500); }
.panel__note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #eceae7;
  font: var(--t-regular-12); color: var(--neutral-500);
}
.panel__note b { color: var(--neutral-900); font-weight: 600; }
kbd {
  font: 600 10px/1 var(--font-ui); background: #f1efec; border: 1px solid #e2e0dd;
  border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--neutral-500);
}