/* Compact planning keeps full touch targets while reducing space between them. */
.place-help-row{display:contents}
.panel-footer{align-items:center;flex-wrap:wrap;gap:0 8px;line-height:1.45}
/* Keep the credit together at normal text sizes; enlarged text may still reflow. */
.footer-credit{flex:1 0 auto;min-width:0;max-width:100%;overflow-wrap:break-word}
.panel-footer #back-to-top{margin-left:auto}
.walk-choice-metrics{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px}
.walk-choice-distance{font-size:15px;line-height:1.45;color:var(--muted);white-space:nowrap}
.large-text .walk-choice-distance{font-size:18px}
.detour-endpoints>span{display:flex;align-items:center;gap:7px;min-width:0}
.detour-endpoints>span:last-child{justify-content:flex-end}
.detour-endpoints svg{display:block;flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--green)}
/* Keep both the label and icon readable on the dark theme's lime action. */
[data-theme=dark] .primary,[data-theme=dark] .primary:hover{background:var(--lime);color:var(--accent-ink)}
[data-theme=dark] .primary>span{color:inherit}

@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  :root{--phone-nav:64px}
  .topbar{padding-left:14px;padding-right:14px;gap:8px}
  /* A single-line wordmark leaves the full-size header controls reachable. */
  .brand{font-size:clamp(16px,4.8vw,20px);gap:8px;flex:0 1 auto}
  .brand-name{white-space:nowrap;line-height:1.05}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;object-fit:contain}
  .header-actions{gap:6px;flex:0 0 auto}
  .theme-button{width:44px;min-width:44px;height:44px;flex:0 0 44px}
  #language{min-width:92px;max-width:100px;min-height:44px;font-size:14px}
  .planner-content{padding:12px 16px 10px}
  body[data-phone-view="walk"] .planner-content{padding-top:12px}
  .plan-intro .eyebrow{display:none}
  .plan-intro h1{font-size:27px;line-height:1.2;margin:0 0 7px}
  .intro{font-size:16px;line-height:1.45;margin:0 0 14px}
  .places{border-radius:12px}
  .place-field{min-height:82px;padding:8px 10px;gap:10px}
  .place-input label{margin-bottom:2px}
  /* Moving swap into the badge column leaves the 44px clear targets separate. */
  .swap{left:4px;right:auto;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;font-size:23px;box-shadow:none}
  .station-selection{margin:8px 0;line-height:1.4}
  .place-help-row{display:flex;align-items:center;gap:10px;margin:8px 0}
  .place-help-row .place-help{order:-1;flex:1;min-width:0;margin:0;font-size:14px;line-height:1.4}
  .place-help-row .new-walk{flex:0 0 auto;max-width:45%;min-height:44px;margin:0;padding:6px 9px;font-size:14px;line-height:1.4;white-space:normal}
  .place-actions{gap:8px;margin:0 0 16px}
  .place-actions button{min-height:64px;padding:8px 3px;gap:4px;font-size:14px;line-height:1.35}
  .place-actions svg{width:22px;height:22px}
  .preference{padding-top:14px;margin-bottom:12px}
  .detour-question{margin:0 0 10px}
  .detour-option{padding:8px 4px;line-height:1.35}
  #detour-help{min-height:0;margin:8px 0 10px;line-height:1.4}
  #detour{height:44px;min-height:44px;margin:0;padding:0}
  .detour-endpoints{font-size:14px;line-height:1.4}
  .detour-note{margin:8px 0 0;line-height:1.4}
  .primary{min-height:48px;padding:11px 14px;font-size:16px;line-height:1.4}
  #plan{justify-content:center}
  #plan>span[aria-hidden=true]{display:none}
  .planner-content>.status{line-height:1.45;margin-top:8px}
  .planner-content>.status:empty{display:none}
  .walk-notices{padding:10px 11px;margin-bottom:14px}
  .walk-choices{margin-top:16px;padding-top:16px}
  .walk-choice-list legend{font-size:21px;line-height:1.35}
  .walk-choice-intro{font-size:14px;line-height:1.45;margin:3px 0 10px}
  .walk-choice{padding:11px;margin-bottom:8px;gap:9px;border-radius:12px}
  .walk-choice-heading{gap:4px 8px}
  .walk-choice-heading strong{font-size:16px;line-height:1.4}
  .walk-choice-badge{font-size:12px;line-height:1.4;padding:2px 5px}
  .walk-choice-metrics{margin:5px 0 3px}
  .walk-choice-time{font-size:25px;line-height:1.25;margin:0;letter-spacing:-.4px}
  .walk-choice-distance,.walk-choice-detail{font-size:14px;line-height:1.45}
  .walk-choice-comparison{font-size:15px;line-height:1.45;margin:12px 0 0}
  .phone-map-open{margin-top:12px}
  .result{margin-top:18px;padding-top:16px}
  .result-heading{margin-bottom:12px}
  .result-quick-actions{margin-top:12px}
  .feature-tools{margin-top:18px;padding-top:16px}
  .feature-heading-row{margin-bottom:10px}
  .feature-grid{gap:8px}
  .feature-grid button{min-height:108px;padding:11px 10px;gap:5px}
  .feature-grid small{margin-top:0;line-height:1.4}
  .data-freshness{margin:12px 0;line-height:1.5}
  .about{margin-top:12px;padding:4px 0}
  .about summary{min-height:48px;gap:10px;line-height:1.4}
  .about p{line-height:1.5}
  .panel-footer{width:100%;max-width:560px;margin:0 auto;padding:10px 16px;min-height:64px;font-size:.8125rem;letter-spacing:0}
  .phone-nav{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
  .phone-nav button{min-height:52px;padding:4px 2px;gap:3px;line-height:1.25}
  .phone-nav svg{width:21px;height:21px}
  /* Keep the explicit accessibility choice larger than the compact defaults. */
  .large-text .place-help,.large-text #detour-help,.large-text .detour-note,.large-text .detour-endpoints{font-size:18px}
  .large-text .detour-option,.large-text .place-help-row .new-walk{font-size:18px}
  .large-text .walk-choice-time{font-size:29px}
}

@media(max-width:360px){
  .topbar{padding-left:10px;padding-right:10px;gap:6px}
  .brand{gap:6px}
  .brand-mark{width:32px;height:32px;flex-basis:32px}
  #language{min-width:86px;max-width:90px;font-size:14px}
  .planner-content{padding-left:12px;padding-right:12px}
  .plan-intro h1{font-size:25px}
  .place-help-row{gap:6px}
  .place-help-row .new-walk{padding-left:6px;padding-right:6px}
  .panel-footer{padding-left:8px;padding-right:8px;gap:0 4px;font-size:.75rem}
}

@media(max-width:340px){
  .topbar{padding-left:8px;padding-right:8px;gap:4px}
  .brand{gap:4px;letter-spacing:-.8px}
  .brand-mark{width:30px;height:30px;flex-basis:30px}
  .header-actions{gap:4px}
}