/* Mobile layer (phones, ≤700px). Loaded AFTER landing.css / survey.css so it
   only overrides — desktop rendering is untouched.

   The mobile thesis: Anna is the screen. She stays big and centered the whole
   time so you watch her react while you type; every stage's controls live in
   a sticky bottom sheet / strip, thumb range. */

@media (max-width: 700px) {

  /* ================= landing (index.html) ================= */

  .photo { width: min(88vw, calc((100vh - 320px) * 1.3333)); }

  footer { padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }

  .candy {
    font-size: 19px;
    padding: 15px 24px;
    white-space: nowrap; /* keep the → off its own line */
  }

  /* ================= survey: progress rail ================= */

  .map { height: 86px; }

  .route {
    top: 38px;
    height: 14px;
    left: max(4%, 34px);
    right: max(4%, 34px);
  }

  .node {
    top: 45px;
    width: 38px;
    height: 38px;
    border-width: 4px;
    font-size: 15px;
  }

  .n1 { left: max(4%, 34px); }
  .n2 { left: calc(25% + max(2%, 17px)); }
  .n3 { left: 50%; }
  .n4 { left: calc(75% - max(2%, 17px)); }
  .n5 { left: calc(100% - max(4%, 34px)); }

  /* stage names don't fit five-across on a phone — the glowing node says
     where you are */
  .lbl { display: none; }

  .page { height: calc(100vh - 86px); height: calc(100dvh - 86px); }

  /* ================= Anna, front and center ================= */

  /* Centered, behind every sheet. Anchored by the HEAD (top), not the feet —
     on short screens the bottom sheet swallows a bottom-anchored Anna's face,
     so instead her face always sits just under the rail and her body runs
     behind the sheet */
  .avatar {
    top: 12px;
    bottom: auto;
    /* eyes sit ~40% down the portrait; this scales her so they clear the
       ~56dvh bottom sheet on any screen height (92dvh−180px ≈ 74dvh on an
       iPhone, shrinks faster than the gap does on short windows) */
    height: calc(92vh - 180px);
    height: calc(92dvh - 180px);
    z-index: 1;
    pointer-events: none;
  }

  /* Feather only Anna's full-page portrait into the mobile background.
     Height-check art and polaroids use separate elements and stay unmasked. */
  .avatar > #anna {
    -webkit-mask-image: radial-gradient(
      ellipse 180% 100% at 50% 0%,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, .7) 88%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 180% 100% at 50% 0%,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, .7) 88%,
      transparent 100%
    );
  }

  /* On the birth-details stage, lift Anna well above the bottom sheet so her
     face stays visible instead of sitting behind the form. */
  body:not(.s2):not(.s3):not(.s4):not(.s5) .avatar {
    bottom: 24vh;
    bottom: 24dvh;
  }

  /* undo the desktop corner-shrink so she stays centered on s2/s3 */
  body.s2 .avatar,
  body.s3 .avatar {
    transform: translateX(-50%);
    z-index: 1;
  }

  /* dev panels don't fit the phone screen — desktop-only */
  .betas { display: none; }

  #moreInfo {
    bottom: auto;
    top: 96px;
    right: 8px;
  }

  /* ================= stage 1: birth card = bottom sheet ================= */

  .card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 56vh;
    max-height: 56dvh;
    overflow-y: auto;
    z-index: 6;
    border-radius: var(--text-box-radius);
    box-shadow: 0 -8px 26px rgba(120, 20, 80, .4);
    padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
  }

  /* compact the sheet so it clears Anna's face on short screens */
  .card b { margin: 8px 0 5px; }

  .card select,
  .card input,
  .ampm button { height: 42px; }

  .card .next {
    margin-top: 12px;
    padding: 12px;
    font-size: 18px;
  }

  /* the sheet sits at the screen bottom, so suggestions must open upward */
  #locList {
    top: auto;
    bottom: 100%;
    margin: 0 0 4px;
  }

  /* ================= stage 2: horizontal movie strip ================= */

  body.s2 #stage2 {
    inset: 0;
    z-index: 3;
  }

  .shelfHead { margin: 2px 0 0; }

  .shelfHead b { font-size: 19px; letter-spacing: 2px; }

  .shelfHead span { font-size: 12px; }

  /* Dissolve the two desktop rows into one swipeable strip. Keeping part of
     the next case visible makes the horizontal interaction discoverable. */
  .shelf {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: end;
    gap: 14px;
    width: 100%;
    margin-top: auto;
    margin-bottom: -31px;
    padding: 20px 18px 50px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border: 0;
    border-image: none;
  }

  .shelf::-webkit-scrollbar { display: none; }

  #stage2.needsFaves .shelf { display: none; }

  .shelfRow {
    display: contents;
  }

  .case {
    flex: 0 0 auto;
    width: calc((100vw - 60px) / 3.5);
    max-width: 160px;
    margin-bottom: 6px;
    scroll-snap-align: center;
  }

  /* no hover on touch: picked lift is the only resting transform */
  .case.picked:not(:hover) { transform: translateY(-6px); }

  .shelfFoot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    justify-content: space-between;
  }

  #stage2 .shelfFoot {
    margin-top: 24px;
    padding-top: 0;
    padding-left: 18px;
    padding-right: 18px;
  }

  #stage2 .shelfFoot .next {
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  #faves {
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 94vw;
  }

  #stage2.needsFaves #faves {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* ================= stage 3: looks match ================= */

  body.s3 #stage3 { inset: 0 4% 1%; }

  .booth,
  .lmDrop { width: min(460px, 54vh, calc(100vw - 32px)); }

  .lmDrop {
    aspect-ratio: 7 / 6;
    padding-block: 28px;
  }

  .lmDrop.hasPhoto { padding-block: 0; }

  /* bottom-sheet vibes: booth + CAPTURE hug the bottom so Anna's face stays
     visible above while she watches you pick a photo */
  .lmUpload {
    gap: 14px;
    justify-content: flex-end;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .lmMedia { flex: 0 0 auto; }

  .lmCapture { width: min(460px, 54vh, calc(100vw - 36px)); }

  .lmVerdict { margin-top: 18px; }

  /* the paired polaroids shrink to sit side by side on a phone */
  .pol {
    width: min(40vw, 38vh);
    padding: 8px 8px 30px;
  }

  /* Keep the result cards anchored just above their footer instead of
     floating in the middle of Anna's face. */
  .lmPair {
    align-items: flex-end;
    padding-bottom: 18px;
  }

  /* Center the heart over the two photo images, not near their top edges. */
  .lmHeart {
    top: 72%;
    bottom: auto;
  }

  .lmStage .shelfFoot,
  #stage3 .shelfFoot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  #stage3 .lmFoot {
    padding-left: 18px;
    padding-right: 18px;
  }

  #stage3 .lmFoot .next {
    width: 100%;
  }

  /* ================= stage 4: height check ================= */

  body.s4 #stage4 { z-index: 3; }

  #stage4 .shelfFoot {
    padding: 12px 18px calc(10px + env(safe-area-inset-bottom));
  }

  #stage4 .shelfFoot .next {
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  /* Final verdict: use the full mobile portrait instead of the half-scale
     desktop corner treatment, so Anna remains a strong background presence. */
  body.s5 .avatar {
    transform: translateX(-50%);
    z-index: 4;
  }
}

/* ================= mobile hardening (appended layer) ================= */
@media (max-width: 700px) {

  /* the oversized Anna cutout is wider than the phone screen — never let the
     page scroll sideways out of view */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* 16px+ inputs stop iOS Safari's focus auto-zoom */
  .card select,
  .card input,
  #faves input {
    font-size: 16px;
  }

  /* Swap the mobile prompt and count: instruction beneath the title, live
     count directly above the swipe strip. */
  .shelfCta {
    display: block;
    margin: 2px 0 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .35);
  }

  #stage2 > #seenCount {
    display: block !important;
    margin-top: auto;
    font-size: 14px;
  }

  /* The count owns the flex push; the strip hugs it. */
  .shelf { margin-top: 4px; }
}

/* looks match: pin the score + NEXT above Safari's bottom bar; the verdict
   content scrolls/sits above the pinned strip instead of underneath it */
@media (max-width: 700px) {
  .lmStage .shelfFoot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    margin: 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(60, 5, 35, 0), rgba(60, 5, 35, .45) 60%);
  }

  .lmStage { padding-bottom: 96px; }
}