/* shell.css — screen frame (layout primitives on top of the DS)
   ──────────────────────────────────────────────────────────────
   NOT components — just the screen scaffold: device frame, app-shell
   (header → scroll → nav/footer), safe areas, a few generic helpers.
   Every value is a semantic token. Screen components are wo-* only.
   Link AFTER the DS styles.css.
   ────────────────────────────────────────────────────────────── */

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

/* The only scrolling region (app-shell). */
.wo-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Content padding helpers. */
.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, empty). */
.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. */
.wo-cta-stack { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }

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

/* Screen header: h1 + optional lede. */
.wo-screen-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }

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

/* Desktop: present the screen inside a device frame (tokens only). */
@media (min-width: 760px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    background: var(--surface-sunken);
  }
  .wo-phone {
    height: min(880px, calc(100dvh - var(--sp-12)));
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-pop);
  }
}