/* Phone layout: natural page height, readable controls and safe-area spacing. */
@media (max-width:600px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .shell, .shell:has(#home.active) { width:100%; max-width:600px; }
  .screen { padding-left:16px; padding-right:16px; overflow-wrap:anywhere; }
  .screen.active:not(#home) { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .screen .bottom { position:sticky; left:auto; right:auto; bottom:0; margin-top:16px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); z-index:2; }
  .screen :is(input,select,textarea) { font-size:16px; max-width:100%; }
  .screen :is(button,.primary,.secondary,.back) { min-height:44px; touch-action:manipulation; }
  .screen .back { min-width:44px; }
  .screen .top { gap:10px; }
  .screen .top h2 { min-width:0; }
  #home.active { padding:10px 14px calc(10px + env(safe-area-inset-bottom)); min-height:100dvh; }
  #home .hero { margin:0; padding:16px; border-radius:18px; flex-shrink:0; }
  #home .brand-home { font-size:30px; line-height:1.1; letter-spacing:-.7px; }
  #home .brand-home small { font-size:17px; }
  #home .hero h1 { font-size:17px; margin:10px 0 0; max-width:100%; }
  #home .hero p { display:none; }
  #home .home-welcome { font-size:21px; margin:12px 0 10px; }
  #home .quick { margin:0; gap:9px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home .quick .secondary { min-width:0; min-height:76px; padding:12px 10px; gap:9px; font-size:15px; line-height:1.25; }
  #home .home-action-icon,#home .quick .warning-icon { width:27px; height:30px; }
  #home .journey-points-notice { font-size:12px; line-height:1.35; margin:8px 0 0; }
  #home .home-how-panel { margin:12px 0 0; }
  #home .home-how-panel .section-title { font-size:21px; margin:0 0 7px; }
  #home .home-how-panel .cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #home .home-how-panel .card { flex-direction:column; align-items:flex-start; gap:6px; padding:9px 7px; min-height:0; }
  #home .home-how-panel .home-step { width:28px; height:28px; font-size:19px; }
  #home .home-how-panel .card strong { font-size:13px; line-height:1.25; }
  #home .home-how-panel .card small { display:none; }
  #home .home-review-note { font-size:11px; line-height:1.35; margin:6px 0 0; }
  #home .home-rewards { margin-top:10px; padding:10px 12px 8px; }
  #home .home-rewards-intro { gap:10px; }
  #home .reward-gift { width:36px; height:42px; flex-shrink:0; }
  #home .home-rewards h2 { font-size:20px; line-height:1.15; }
  #home .home-rewards p { font-size:12px; line-height:1.35; }
  #home .home-rewards-button { min-height:44px; font-size:17px; margin-top:8px; }
  #home .home-rewards .home-rewards-note { font-size:11px; line-height:1.35; }
  #home .home-account-footer { margin-top:auto; padding-top:10px; }
  #home .home-account-footer>p { font-size:12px; }
  #home .home-account-footer .passenger-account-bar { gap:8px; }
  #home .home-account-footer .passenger-account-bar :is(a,button) { min-height:48px; font-size:14px; padding:10px 7px; }
  #home .home-account-footer .passenger-account-bar:has(#passengerLogout:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home .home-account-footer .passenger-account-bar:has(#passengerLogout:not([hidden])) .home-institutional-access { grid-column:1 / -1; }
  #route .top { min-height:68px; padding-top:14px; padding-bottom:14px; }
  #route .progress { margin-bottom:12px; }
  #route .prompt { margin:8px 0 12px; }
  #route .field { padding:10px; margin:9px 0; }
  #vehicle .prompt { margin-bottom:14px; }
  #vehicle .field { margin-bottom:14px; }
  #vehicle #types .choice { font-size:14px; min-height:62px; }
  #vehicle .perspective-select #reportPerspective { font-size:16px; }
  #safety .question .seg button { min-width:44px; }
  #optionalEvidence .optional-evidence-card { padding-top:14px; }
  #loginChoice { max-height:calc(100dvh - 32px); overflow-y:auto; }
}
@media (max-width:600px) and (max-height:740px) {
  #home .hero { padding:12px 14px; }
  #home .brand-home { font-size:28px; }
  #home .hero h1 { font-size:16px; margin-top:7px; }
  #home .home-welcome { margin:9px 0 8px; font-size:20px; }
  #home .quick .secondary { min-height:64px; padding:9px; }
  #home .home-how-panel { margin-top:9px; }
  #home .home-rewards { margin-top:8px; }
}
@media (max-width:350px) {
  #home .quick .secondary { flex-direction:column; align-items:flex-start; gap:6px; }
  #home .home-how-panel .cards { grid-template-columns:1fr; }
  #home .home-how-panel .card { flex-direction:row; align-items:center; }
  #home .home-account-footer .passenger-account-bar :is(a,button) { font-size:13px; }
}
@media (max-width:600px) {
  :is(#vehicle,#route,#safety,#rating,#review,#community) .bottom {
    position:sticky; bottom:0; left:auto; right:auto;
    margin-top:16px; padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(transparent,#edf7f5 16%); z-index:2;
  }
  #route #routeNext,#vehicle #vehicleNext { min-height:48px; }
}

/* Compact home sizing comes last so older phone rules cannot enlarge it. */
#home .home-action-icon,#home .quick .warning-icon { width:24px; height:26px; }
#home .home-how-panel .home-step { width:24px; height:24px; font-size:17px; }
#home .reward-gift { width:32px; height:38px; }
@media (max-width:600px) {
  #home.active { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
  #home .hero { padding:12px 14px; }
  #home .brand-home { font-size:28px; }
  #home .brand-home small { font-size:16px; }
  #home .hero h1 { font-size:16px; margin-top:7px; }
  #home .home-welcome { font-size:20px; margin:9px 0 7px; }
  #home .quick { gap:7px; }
  #home .quick .secondary { flex-direction:row; align-items:center; min-height:58px; padding:8px; gap:7px; font-size:14px; }
  #home .home-how-panel { margin-top:9px; }
  #home .home-how-panel .section-title { font-size:20px; margin-bottom:5px; }
  #home .home-how-panel .cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  #home .home-how-panel .card { flex-direction:column; align-items:flex-start; justify-content:center; padding:7px 6px; gap:4px; }
  #home .home-how-panel .card strong { font-size:12px; }
  #home .home-review-note { font-size:10px; margin-top:4px; }
  #home .home-rewards { margin-top:7px; padding:8px 10px 6px; }
  #home .home-rewards-intro { gap:8px; }
  #home .home-rewards-intro>div { min-width:0; }
  #home .home-rewards h2 { font-size:18px; margin-bottom:3px; }
  #home .home-rewards p { font-size:11px; }
  #home .home-rewards-button { font-size:16px; padding:8px 24px; margin-top:6px; }
  #home .home-rewards .home-rewards-note { font-size:10px; }
  #home .home-account-footer { margin-top:7px; padding-top:0; }
  #home .home-account-footer>p { font-size:11px; margin-bottom:4px; }
  #home .home-account-footer .passenger-account-bar { gap:6px; }
  #home .home-account-footer .passenger-account-bar :is(a,button) { min-height:44px; padding:8px 6px; font-size:12px; }
  #home .home-account-footer .passenger-account-bar:has(#passengerLogout:not([hidden])) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #home .home-account-footer .passenger-account-bar:has(#passengerLogout:not([hidden])) .home-institutional-access { grid-column:auto; }
}
@media (max-width:600px) and (max-height:680px) {
  #home.active { padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
  #home .hero { padding:10px 12px; }
  #home .brand-home { font-size:26px; }
  #home .brand-home small { font-size:15px; }
  #home .hero h1 { font-size:14px; margin-top:6px; }
  #home .home-welcome { font-size:18px; margin:7px 0 6px; }
  #home .quick .secondary { min-height:54px; font-size:13px; padding:7px; gap:6px; }
  #home .home-how-panel { margin-top:7px; }
  #home .home-how-panel .section-title { font-size:18px; }
  #home .home-how-panel .card { padding:6px 5px; }
  #home .home-rewards { margin-top:6px; }
}

/* Spread spare height between sections instead of leaving an empty bottom. */
#home.active { justify-content:space-between; }
#home.active>* { flex-shrink:0; }