/* immersive.css — the shared shell for the full-bleed onboarding screens:
   /egg, /arrival, /about-you, /about-you-2, /rhythm, /promise, /signin.

   Each of those pages is one scene (drifting art, pet, cream fog, and the
   wordmark + back button absolutely positioned INSIDE it) sitting above a solid
   cream action area that is pulled up over the fog by a negative margin.

   The bug this file fixes: the scene was `flex-1 min-h-0`, so on a short
   viewport it collapsed toward zero height. When it did, the action area rode
   up over the chrome and the headline printed directly on top of the "Meou"
   wordmark — and the pet was pushed off the top of the screen. It only appeared
   below roughly 600px of viewport height, which is an ordinary iPhone SE once
   the address bar is showing, and never in a desktop test window.

   The rule is: on a short screen the ACTION AREA gives, never the scene. Type
   and spacing compact so everything stays visible without scrolling or
   clipping, because these pages are deliberately `overflow: hidden`. */

/* Never let the scene collapse under its own chrome. */
.scene-pane {
    min-height: 188px;
}

/* Keep the two panes from ever painting over each other, whatever happens to
   the flex math: the action area always wins the stacking order, and the scene
   clips its own art. */
.action-pane {
    position: relative;
    z-index: 30;
}

/* ── Short viewports (address bar showing, iPhone SE, small Androids) ────────
   Everything here is a compaction of the action area, in the order a designer
   would sacrifice it: outer padding, then gaps, then type. */
@media (max-height: 720px) {
    .scene-pane { min-height: 150px; }

    /* The pet is authored at 192x208 for a full-height scene; at this height it
       would be cropped in half. Anchored to its feet so it still stands on the
       ground rather than floating. */
    .scene-pane #pet-stage {
        transform: scale(0.78);
        transform-origin: bottom center;
    }

    .action-pane { margin-top: -16px !important; }
    .action-pane .headline { font-size: 21px !important; line-height: 1.12 !important; }
    .action-pane .subline  { font-size: 13.5px !important; line-height: 1.4 !important; margin-top: 4px !important; }
    .action-pane .stack    { margin-top: 12px !important; }
    .action-pane .stack > * + * { margin-top: 7px !important; }
    .action-pane .cta      { padding-top: 13px !important; padding-bottom: 13px !important; }
    .action-pane .cta span { font-size: 17px !important; }
    .action-pane .footnote { font-size: 11px !important; margin-top: 7px !important; }
}

@media (max-height: 600px) {
    .scene-pane { min-height: 118px; }
    .scene-pane #pet-stage { transform: scale(0.62); }
    .action-pane .headline { font-size: 19px !important; }
    .action-pane .subline  { font-size: 13px !important; }
    .action-pane .stack    { margin-top: 9px !important; }
    .action-pane .stack > * + * { margin-top: 6px !important; }
    .action-pane .cta      { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* ── Option cards ───────────────────────────────────────────────────────────
   Every card in a group is the same height regardless of whether its label
   wrapped. Without this, one card wrapping to a second line made the row ragged
   — an 18px difference between neighbours on any phone under ~400px wide. */
.option-card {
    min-height: 60px;
    align-items: center;
}
@media (max-height: 720px) {
    .option-card { min-height: 52px; padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* Narrow phones: keep two-up option grids from squeezing their labels into
   stacks of single words. */
@media (max-width: 360px) {
    .option-card .option-label { font-size: 13px !important; }
}