/* Phone layout overrides. Desktop and tablet layouts remain unchanged. */
@media (max-width:620px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .app-shell{width:100%;overflow-x:clip}
  .topbar{gap:12px;padding:18px 16px 16px}
  .topbar>div:first-child{gap:20px}
  .topbar h1{font-size:28px;line-height:1.15}
  .trip-controls{gap:8px;margin:0}
  .trip-all,.trip-current{min-height:42px;padding:9px 11px;font-size:12px}
  .avatar{width:40px;height:40px;flex:0 0 40px}

  .page{padding-right:16px;padding-left:16px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .section-heading{gap:12px;margin-top:24px}
  .section-heading h2{font-size:20px;line-height:1.3}
  .section-heading button{min-height:40px;padding:8px 10px}
  .hero-card{padding:20px;border-radius:19px}
  .hero-card h2{font-size:23px;line-height:1.25}
  .next-stop{gap:11px;padding:14px 13px}
  .quick-grid{gap:12px;margin-top:16px}
  .quick-grid button{min-height:0;padding:15px}
  .members-card,.trip-members-home{margin-top:16px}

  .date-strip{grid-template-columns:1fr;gap:11px;padding:12px;border-radius:14px}
  .date-strip>#backToItineraryDays{grid-column:1;justify-self:start;min-height:40px}
  .date-navigator{grid-column:1;width:100%;grid-template-columns:40px minmax(0,1fr) 40px;gap:7px}
  .date-navigator strong{min-width:0;font-size:15px;line-height:1.35;white-space:normal}
  .date-strip .date-arrow{width:40px;min-height:40px;padding:5px 0}

  .timeline{margin:20px 0 18px;padding-left:20px}
  #itineraryList .timeline-item{grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:26px;padding:0 0 4px}
  #itineraryList .timeline-item:last-child{margin-bottom:10px}
  #itineraryList .timeline-item:before{left:-27px}
  #itineraryList .timeline-item>small,#itineraryList .timeline-item>h3,#itineraryList .timeline-item>p,#itineraryList .timeline-item>.visit-row,#itineraryList .timeline-item>.itinerary-entry-editor,#itineraryList .timeline-item>.map-link{grid-column:1}
  #itineraryList .timeline-item>h3{font-size:19px;line-height:1.3}
  #itineraryList .timeline-item>p{font-size:13px;line-height:1.45}
  .visit-row{gap:8px;margin-top:4px}
  .visit-status{margin-bottom:1px}
  .visit-button,.visit-reset{min-height:40px;padding:8px 10px}
  #itineraryList .map-link{min-height:42px;margin-top:2px;padding:9px 12px;white-space:normal}
  .item-actions{grid-column:1;grid-row:auto;display:flex;align-items:center;align-self:start;gap:9px;margin-top:3px}
  .item-edit,.item-delete{min-height:40px;padding:8px 12px}

  .stack-card,.add-form,.exchange-card{margin-top:22px;padding:18px;border-radius:18px}
  .add-form{gap:14px}
  .add-form h3{margin-bottom:2px;font-size:20px;line-height:1.3}
  .add-form>input,.add-form>label,.add-form>.form-row{margin-bottom:0}
  .add-form .form-row,#itineraryForm .form-row,.trip-date-range .form-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .add-form input,.add-form select,.add-form textarea,.form-row input,.form-row select{min-width:0!important;max-width:100%;width:100%}
  #itineraryForm input[type="time"]{width:100%!important}
  .primary{min-height:48px}

  .exchange-card .form-row{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:7px}
  .exchange-card select{min-width:0;padding-right:30px!important;padding-left:9px!important;font-size:13px}
  .exchange-card .swap{width:42px;padding:10px 6px}
  .expense-day-summary{gap:14px}
  .expense-day-summary .day-total{min-width:104px}
  .expense-item{gap:12px;padding:14px}
  .expense-item>div:first-child{min-width:0}
  .expense-item .amount{flex:0 0 auto}
  .wishlist-item{padding:15px}
  .wish-scheduler{padding:13px}

  .bottom-nav{z-index:20;min-height:68px;gap:0;padding:8px 5px max(8px,env(safe-area-inset-bottom))}
  .nav{flex:1;min-width:0;padding:3px 2px;font-size:10px;line-height:1.3}
  .nav span{margin-bottom:2px;font-size:18px;line-height:1}
}

@media (max-width:380px){
  .topbar,.page{padding-right:13px;padding-left:13px}
  .trip-all,.trip-current{padding-right:8px;padding-left:8px}
  .topbar h1{font-size:26px}
  .date-navigator strong{font-size:14px}
  .visit-button,.visit-reset{padding-right:8px;padding-left:8px;font-size:11px}
  .exchange-card .form-row{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)}
  .exchange-card .swap{width:38px}
}