/* V6.0.10 — mobile visual audit fixes from iPhone screen recording */

/* Keep content clear of the fixed bottom navigation on mobile. */
@media (max-width: 720px){
  main,.view,.app-main{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important}

  /* Hero: reduce vertical bulk and keep the title readable. */
  .scenic-hero{padding-bottom:18px!important}
  .scenic-hero h1{font-size:clamp(3rem,13vw,4.2rem)!important;line-height:.94!important;letter-spacing:-.055em!important}
  .scenic-hero .trip-route-tagline{font-size:1rem!important;margin-top:12px!important}

  /* Countdown was collapsing into one horizontal row on iPhone. */
  .scenic-hero .trip-countdown,
  .trip-countdown{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    padding:18px 16px!important;
    text-align:center!important;
  }
  .trip-countdown #countdownKicker{
    display:block!important;
    width:100%!important;
    margin:0 0 5px!important;
    font-size:.78rem!important;
    line-height:1.2!important;
  }
  .trip-countdown #countdownPrimary{
    display:block!important;
    width:100%!important;
    margin:0!important;
    line-height:1!important;
  }
  .trip-countdown #countdownPrimary .countdown-days-line{
    display:block!important;
    font-size:2.55rem!important;
    line-height:.95!important;
    white-space:nowrap!important;
  }
  .trip-countdown #countdownPrimary .countdown-hours-line{
    display:block!important;
    margin-top:6px!important;
    font-size:1.5rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .trip-countdown #countdownSecondary{
    display:block!important;
    width:100%!important;
    margin-top:10px!important;
    font-size:.82rem!important;
    line-height:1.35!important;
    white-space:normal!important;
  }

  /* Current-trip library page: headings were visually oversized on phone. */
  #home .page-title h1,
  #home .hero h1{font-size:clamp(2.75rem,12vw,3.8rem)!important;line-height:.98!important}

  /* Trip itinerary: compact long cards/actions while keeping 44px tap targets. */
  .trip-stop-card,.timeline-card,.itinerary-stop-card{padding-left:14px!important;padding-right:14px!important}
  .route-between-card,.route-leg-card{padding:14px!important}
  .row-actions{gap:4px!important;flex-wrap:wrap!important}
  .row-actions button,.text-action{min-height:40px!important;padding:8px 10px!important;border:1px solid rgba(198,90,50,.22)!important;border-radius:10px!important;background:#fffaf5!important;color:#9d4a2f!important}

  /* Map info cards: slightly tighter so useful information fits before the nav bar. */
  #map .trip-summary-card,#map .map-summary-card{padding:14px!important}
  #map .nearby-grid a{min-height:58px!important;padding:13px 14px!important}

  /* Memory recap: six one-column KPI cards created excessive vertical scrolling. */
  .recap-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .recap-stat{padding:14px!important;min-width:0!important}
  .recap-stat strong{font-size:1.35rem!important}
  .recap-stat span{font-size:.72rem!important;line-height:1.35!important}

  /* Splitwise header/viewer: do not squeeze label and select beside each other. */
  #splitwise .compact-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  #splitwise .splitwise-viewer{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important}
  #splitwise .splitwise-viewer label{font-size:.72rem!important;font-weight:850!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#8a5b44!important}
  #splitwise .splitwise-viewer select{width:100%!important;min-height:46px!important;font-size:1rem!important;padding:10px 12px!important}
  #splitwise .reimbursement-row{padding:14px!important}
  #splitwise .reimbursement-row .settle-actions{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:10px!important;width:100%!important}
  #splitwise .reimbursement-row .settle-actions .btn{min-height:42px!important;padding:8px 11px!important;white-space:nowrap!important}

  /* Moon day selector: show all four trip days instead of clipping Sunday. */
  .moon-day-switcher{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    width:100%!important;
    margin-bottom:16px!important;
  }
  .moon-day-switcher button{
    min-width:0!important;
    width:100%!important;
    padding:9px 4px!important;
    border-radius:14px!important;
  }
  .moon-day-switcher button small{font-size:.65rem!important;letter-spacing:.08em!important}
  .moon-day-switcher button b{font-size:.86rem!important;white-space:nowrap!important}
  .moon-svg{max-width:270px!important;max-height:270px!important}
  .moon-phase-copy h2{font-size:clamp(2.2rem,10vw,3rem)!important}

  /* Weather: keep horizontal hourly cards obvious and avoid accidental clipping. */
  .weather-hourly-scroll{padding-right:8px!important;scroll-padding-right:8px!important}
  .weather-hour-card{min-width:112px!important}

  /* Checklists: edit/delete controls took too much horizontal space. */
  .checklist-toolbar{align-items:center!important;gap:10px!important}
  .checklist-toolbar .btn{min-height:44px!important}
  .check-item-row{gap:6px!important;padding-right:8px!important}
  .check-item-row .row-actions{display:grid!important;grid-template-columns:auto 44px!important;gap:6px!important;flex:0 0 auto!important}
  .check-item-row .row-actions button{min-height:44px!important;height:44px!important;padding:0 12px!important;display:grid!important;place-items:center!important}
  .check-item-row .row-actions button:last-child{width:44px!important;padding:0!important;font-size:1.1rem!important}

  /* General section typography: reduce occasional oversized display headings. */
  .page-title h1{font-size:clamp(2.55rem,11vw,3.55rem)!important;line-height:1!important}
  .page-title p{font-size:1rem!important;line-height:1.55!important}
}

@media (max-width: 390px){
  .scenic-hero h1{font-size:2.85rem!important}
  .trip-countdown #countdownPrimary .countdown-days-line{font-size:2.25rem!important}
  .trip-countdown #countdownPrimary .countdown-hours-line{font-size:1.35rem!important}
  .moon-day-switcher{gap:5px!important}
  .moon-day-switcher button b{font-size:.78rem!important}
  .recap-stats{grid-template-columns:1fr 1fr!important}
}