/* shell.css — phone caркас (layout-примітиви поверх DS)
   ──────────────────────────────────────────────────────────────
   НЕ компоненти — лише оболонка екрана: рамка телефона, app-shell
   (header → scroll → nav/footer), безпечні зони. Усі значення —
   семантичні токени violet-sun. Компоненти екрана — тільки wo-*.
   Лінкувати ПІСЛЯ ds/violet-sun-entry.css.
   ────────────────────────────────────────────────────────────── */

.wo-phone {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: relative;   /* overlays (--inline) anchor here, not the window */
  overflow: hidden;
}

/* Scrollable content region — the only thing that scrolls (app-shell). */
.wo-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Standard content padding helper. */
.wo-pad { padding: var(--sp-5); }
.wo-pad-x { padding-left: var(--sp-5); padding-right: var(--sp-5); }

/* Centered single-column screen (splash, success, pin, relaunch). */
.wo-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  min-height: 0;
  overflow-y: auto;
}

/* Vertical CTA stack pinned to the bottom of a centered screen. */
.wo-cta-stack { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }

/* Generic lede / subtitle text on tokens. */
.wo-lede { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-muted); max-width: 300px; }
.wo-lede strong { color: var(--text-body); font-weight: var(--w-semibold); }

/* hidden helper */
.is-hidden { display: none !important; }

/* Desktop: present prototype inside a warm device frame. */
@media (min-width: 760px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    background: var(--dusk-100);
  }
  .wo-phone {
    height: min(880px, calc(100dvh - 48px));
    border-radius: 40px;
    box-shadow: 0 0 0 10px var(--dusk-900), 0 24px 60px -20px rgba(28, 25, 23, 0.4);
  }
}