/* Authoritative mobile layer. Loaded after styles.css so older desktop and
   calibration rules cannot override the phone composition. */
@media (max-width: 760px) {
  html, body, #app { height: 100%; min-height: 0; overflow: hidden; }
  .screen { width: 100%; height: 100dvh; min-height: 0 !important; overflow: hidden; }
  .screen::after { display: none !important; }

  /* Shared modal frame and typography. */
  .orbit-modal,
  .person-flow .orbit-modal,
  .change-flow .orbit-modal,
  .moment-flow .orbit-modal {
    width: 90.5vw !important;
    height: clamp(490px, 58dvh, 650px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 130px) !important;
    padding: 0 !important;
    border-radius: clamp(34px, 9vw, 48px) !important;
    background: rgba(27, 27, 30, .975) !important;
    box-shadow: 0 0 18px rgba(255,255,255,.42), 0 0 48px rgba(185,136,212,.28) !important;
  }
  .modal-screen .modal-orbit-backdrop { filter: brightness(.34) !important; opacity: .9 !important; }
  .modal-screen .modal-glow { opacity: .72 !important; }
  .orbit-modal .counter { top: 5.4% !important; right: 7% !important; font-size: clamp(16px, 4.25vw, 21px) !important; }
  .orbit-modal .modal-content h2,
  .person-flow .modal-content h2,
  .change-flow .modal-content h2,
  .moment-flow .modal-content h2 {
    top: 11% !important;
    width: 94% !important;
    font-size: clamp(21.5px, 5.65vw, 29px) !important;
    line-height: 1.055 !important;
    text-wrap: balance !important;
  }
  .orbit-modal .modal-content > p,
  .person-flow .modal-content > p,
  .change-flow .modal-content > p,
  .moment-flow .modal-content > p {
    width: 86% !important;
    font-size: clamp(12.5px, 3.5vw, 16px) !important;
    line-height: 1.28 !important;
    text-wrap: balance !important;
  }
  .orbit-modal footer,
  .person-flow .orbit-modal footer,
  .change-flow .orbit-modal footer,
  .moment-flow .orbit-modal footer {
    left: 5.5% !important;
    right: 5.5% !important;
    bottom: 9% !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
  }
  .orbit-modal footer .capsule,
  .person-flow .orbit-modal footer .capsule,
  .change-flow .orbit-modal footer .capsule,
  .moment-flow .orbit-modal footer .capsule {
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(56px, 6.9vh, 68px) !important;
    padding: 0 9px !important;
    font-size: clamp(13px, 3.55vw, 16px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    gap: 6px !important;
  }

  /* Landing, sign-in and empty map. */
  .landing-copy { top: 38.5% !important; }
  .landing-copy p { font-size: clamp(14px, 3.75vw, 20px) !important; line-height: 1.12 !important; }
  .landing .capsule.dark { top: 25.5vh !important; width: min(74vw,430px) !important; font-size: clamp(14px,3.75vw,19px) !important; }
  .auth-card { width: 90.5vw !important; background: rgba(24,24,27,.94) !important; }
  .auth-card h2 { margin-top: calc(17% + 30px) !important; font-size: clamp(25px,6.45vw,33px) !important; }
  .auth-card p { font-size: clamp(11.5px,3vw,15px) !important; line-height: 1.42 !important; }
  .auth-code, .auth-email > span { font-size: clamp(10px,2.65vw,13px) !important; }
  .auth-email input { font-size: clamp(14px,3.75vw,19px) !important; }
  .auth-card .auth-submit { font-size: clamp(14px,3.7vw,18px) !important; }
  .empty-message p { font-size: clamp(13px,3.45vw,18px) !important; }
  .empty-cta { font-size: clamp(14px,3.7vw,18px) !important; }

  /* Main orbit and selected relationship card. */
  .orbit-screen .universe .planet-person:not(.you) { transform: translate(-50%,-50%) scale(.74) !important; }
  .orbit-screen .universe .planet-person.is-focused { transform: translate(-50%,-50%) scale(.76) !important; opacity: .12 !important; }
  .orbit-screen .universe .planet-person span { font-size: clamp(12.5px,3.4vw,15px) !important; line-height: 1 !important; }
  .orbit-screen:not(.modal-screen) > .orbit-header .capsule { font-size: clamp(14px,3.75vw,18px) !important; }
  .orbit-screen .person-card { left: auto !important; right: 4.5vw !important; top: 36.5% !important; bottom: auto !important; width: 74vw !important; max-width: none !important; }
  .orbit-screen .person-card-panel {
    height: auto !important;
    min-height: 210px !important;
    padding: 24px 20px 18px !important;
    border-radius: 30px !important;
    background: rgba(19,18,22,.94) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 46px rgba(0,0,0,.36) !important;
  }
  .orbit-screen .person-card-panel strong { font-size: clamp(14px,3.65vw,18px) !important; line-height: 1.16 !important; }
  .orbit-screen .person-card-panel small { font-size: clamp(9px,2.4vw,12px) !important; line-height: 1.25 !important; }
  .orbit-screen .person-change { height: 38px !important; font-size: clamp(10.5px,2.7vw,13px) !important; }
  .orbit-screen .person-card > button { font-size: clamp(9px,2.35vw,12px) !important; }

  /* Six-step person flow. */
  .person-flow.step-0 .modal-content > p { top: 25.5% !important; }
  .person-flow.step-0 .line-input { top: 42.5% !important; }
  .person-flow.step-0 footer { left: 22% !important; right: 22% !important; bottom: 9% !important; grid-template-columns: 1fr !important; }
  .person-flow.step-0 footer .secondary:empty { display: none !important; }
  .person-flow.step-0 .line-input span { font-size: clamp(10px,2.7vw,13px) !important; }
  .person-flow.step-0 .line-input input { font-size: clamp(15px,3.95vw,20px) !important; }
  .person-flow.step-1 .roles { top: 32% !important; width: 86% !important; grid-template-rows: repeat(4,42px) !important; gap: 9px 10px !important; }
  .person-flow.step-1 .roles .pill-choice { height: 42px !important; padding: 0 9px !important; font-size: clamp(11.5px,3vw,14px) !important; }
  .person-flow.step-2 .modal-content > p { top: 43% !important; font-size: clamp(10.5px,2.8vw,13px) !important; }
  .person-flow.step-2 .year-scale { top: 51.5% !important; }
  .person-flow.step-2 .year-scale button { font-size: clamp(13px,3.5vw,17px) !important; text-shadow: none !important; }
  .person-flow.step-2 .year-scale button.selected { text-shadow: none !important; }
  .person-flow.step-3 .modal-content > p { top: 30% !important; }
  .person-flow.step-3 .distance-scene { top: 41% !important; }
  .person-flow.step-3 .distance-person { font-size: clamp(10.5px,2.85vw,14px) !important; }
  .person-flow.step-3 .distance-options { top: 69.5% !important; }
  .person-flow.step-3 .distance-options .pill-choice { height: 27px !important; font-size: clamp(9px,2.4vw,11px) !important; }
  .person-flow.step-4 .modal-content > p { top: 22.5% !important; }
  .person-flow.step-4 .trends { top: 32.7% !important; width: 76% !important; gap: 10px !important; }
  .person-flow.step-4 .trends .pill-choice { height: 36px !important; font-size: clamp(12px,3.1vw,15px) !important; }
  .person-flow.step-5 .modal-content h2 { top: 10.5% !important; font-size: clamp(22px,5.8vw,29px) !important; }
  .person-flow.step-5 .modal-content > p { top: 28.5% !important; }
  .person-flow.step-5 .custom-color { top: 37% !important; font-size: clamp(10px,2.65vw,13px) !important; }
  .person-flow.step-5 .color-planets { top: 43% !important; height: 137px !important; }
  .person-flow.step-5 .color-customizer { top: 37% !important; background: rgba(16,16,19,.99) !important; box-shadow: 0 18px 48px rgba(0,0,0,.55),0 0 26px rgba(255,255,255,.1) !important; }

  /* Relationship change and calendar. */
  .change-flow.step-0 .modal-content > p { top: 24% !important; }
  .change-flow .change-line-input { top: 40% !important; }
  .change-flow.step-1 .modal-content > p { top: 24% !important; }
  .change-flow.step-1 .change-types { top: 33.5% !important; gap: 10px !important; }
  .change-flow.step-1 .change-types .pill-choice { height: 40px !important; font-size: clamp(10px,2.65vw,13px) !important; }
  .change-flow.step-2 .change-line-input.detail { top: 38% !important; height: 27% !important; }
  .change-flow.step-2 .change-line-input textarea { font-size: clamp(13px,3.45vw,17px) !important; }
  .orbit-calendar { width: 84% !important; }
  .orbit-calendar-title { font-size: clamp(14px,3.7vw,18px) !important; }
  .orbit-calendar-day { font-size: clamp(12px,3.2vw,15px) !important; }
  .orbit-calendar-weekdays { font-size: clamp(8px,2.15vw,11px) !important; }
  .orbit-calendar-footer button { font-size: clamp(13px,3.35vw,16px) !important; }

  /* Four-step moment flow. */
  .moment-flow.step-0 .modal-content > p { top: 24% !important; }
  .moment-flow.step-0 .moments-options { top: 39% !important; width: 84% !important; gap: 14px 10px !important; }
  .moment-flow.step-0 .moments-options .pill-choice { height: 34px !important; font-size: clamp(11.5px,3vw,14px) !important; }
  .moment-flow.step-1 .modal-content > p { top: 24% !important; }
  .moment-flow.step-1 .moment-kind-input { top: 39% !important; height: 25% !important; }
  .moment-flow.step-1 .moment-kind-input span { font-size: clamp(10px,2.65vw,13px) !important; }
  .moment-flow.step-1 .moment-kind-input textarea { font-size: clamp(13px,3.45vw,17px) !important; line-height: 1.35 !important; }
  .moment-flow.step-1 .moment-media-stage,
  .moment-flow.step-1 .audio-stage { top: 28% !important; width: 86% !important; height: 47% !important; flex-direction: column !important; justify-content: flex-start !important; gap: 10px !important; }
  .moment-flow.step-1 .moment-upload-card,
  .moment-flow.step-1 .audio-stage .music-card { width: 160px !important; height: 160px !important; max-width: 160px !important; max-height: 160px !important; aspect-ratio: 1/1 !important; border-radius: 30px !important; }
  .moment-flow.step-1 .moment-upload-action,
  .moment-flow.step-1 .audio-stage .moment-upload-action { width: 100% !important; gap: 7px !important; }
  .moment-flow.step-1 .moment-file-button { width: 190px !important; height: 38px !important; font-size: clamp(10px,2.7vw,13px) !important; }
  .moment-flow.step-1 .moment-upload-action small { font-size: clamp(8px,2.1vw,10px) !important; }
  .moment-flow.step-1 .has-media { top: 28% !important; height: 45% !important; flex-direction: column !important; }
  .moment-flow.step-1 .has-media .moment-upload-card { width: auto !important; height: 160px !important; max-width: 210px !important; max-height: 160px !important; aspect-ratio: var(--media-aspect,.8) !important; }
  .moment-flow.step-1 .moment-replace { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; margin-top: 2px !important; font-size: clamp(9px,2.35vw,11px) !important; }
  .moment-flow.step-2 .moment-form { top: 37% !important; bottom: 28% !important; width: 88% !important; left: 6% !important; right: 6% !important; }
  .moment-flow.step-2 .modal-content h2 { text-wrap: initial !important; }
  .moment-flow.step-2 .moment-form label { height: auto !important; }
  .moment-flow.step-2 .moment-form label span { font-size: clamp(9.5px,2.5vw,12px) !important; }
  .moment-flow.step-2 .moment-form input { font-size: clamp(12px,3.15vw,15px) !important; }
  .moment-flow.step-3 .final-memory { top: 27% !important; bottom: 27% !important; width: 88% !important; left: 6% !important; right: 6% !important; }
  .moment-flow.step-3 .moment-preview-media { width: auto !important; height: 162px !important; max-width: 168px !important; max-height: 162px !important; aspect-ratio: 1/1 !important; border-radius: 30px !important; }
  .moment-flow.step-3 .moment-preview-media img { object-fit: cover !important; }
  .moment-flow.step-3 .moment-preview-text,
  .moment-flow.step-3 .moment-preview-audio { width: 86% !important; min-height: 132px !important; padding: 24px !important; }
  .moment-flow.step-3 .moment-preview-text blockquote { font-size: clamp(10px,2.75vw,13px) !important; line-height: 1.35 !important; }
  .moment-flow.step-3 .final-memory > b,
  .moment-flow.step-3 .final-memory > span { font-size: clamp(10px,2.7vw,12.5px) !important; }
  .moment-flow.step-3 .final-memory > small { font-size: clamp(9.25px,2.45vw,11px) !important; line-height: 1.25 !important; }
  .moment-flow.step-3 .final-memory > b { font-size: clamp(9px,2.4vw,11px) !important; }
  .moment-flow.step-3 .final-memory > span { font-size: clamp(9.5px,2.55vw,12px) !important; }
  .moment-flow.step-3 .final-memory > small { font-size: clamp(8px,2.15vw,10px) !important; }

  /* History, archive and recap. */
  .person-view .orbit-header .logo-person { font-size: clamp(10px,2.7vw,13px) !important; }
  .person-view .tabs button { font-size: clamp(16px,4.2vw,21px) !important; }
  .history-map .timeline:has(li:nth-child(6)) { overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: none !important; padding: 8px 0 !important; }
  .history-map .timeline:has(li:nth-child(6))::-webkit-scrollbar { display: none; }
  .history-map .timeline:has(li:nth-child(6)) li { flex: 0 0 64px !important; min-height: 64px !important; }
  .history-map .timeline:has(li:nth-child(6)) b { font-size: clamp(13px,3.5vw,16px) !important; }
  .history-map .timeline:has(li:nth-child(6)) span { font-size: clamp(9px,2.45vw,11px) !important; line-height: 1.14 !important; }
  .history-map .timeline:has(li:nth-child(6)) small { font-size: clamp(8px,2.1vw,9.5px) !important; }
  .moments-view .space-memory small,
  .moments-view .space-memory p { font-size: clamp(10px,2.65vw,12px) !important; }
  .moments-view .memory-note q { font-size: clamp(10.25px,2.75vw,12px) !important; line-height: 1.25 !important; }
  .closest-recap .planet-person span { font-size: clamp(13.5px,3.65vw,16px) !important; }
  .closest-recap .recap-you { transform: translate(-50%,-50%) scale(.76) !important; }
  .recap-person small { font-size: clamp(11.5px,3.05vw,14px) !important; }
  .closest-title { bottom: 15.5% !important; width: 80% !important; min-height: 62px !important; padding: 10px 18px !important; }
  .closest-title h1 { font-size: clamp(10px,2.7vw,13px) !important; line-height: 1.28 !important; }
  .closest-title h1 br { display: block !important; }
  .delete-person-modal { width: calc(100% - 38px) !important; height: min(520px,66dvh) !important; padding: 36px 22px 28px !important; }
  .delete-person-modal p { font-size: clamp(11px,2.85vw,14px) !important; }
  .delete-person-modal .capsule { font-size: clamp(10.5px,2.75vw,13px) !important; line-height: 1.12 !important; white-space: normal !important; }
}

@media (max-width: 390px) and (max-height: 700px) {
  .orbit-modal,
  .person-flow .orbit-modal,
  .change-flow .orbit-modal,
  .moment-flow .orbit-modal { height: calc(100dvh - 96px) !important; max-height: none !important; }
  .orbit-modal footer { bottom: 6.5% !important; }
}