.planner-primary-action{display:contents}
.mobile-map-zoom{display:none}
.dialog-actions{margin-top:12px}
.nearby-access-warning{font-size:.875rem;line-height:1.45;color:var(--ink);margin:0 0 10px}
.compact-help{font-size:.875rem;line-height:1.45;color:var(--muted);margin:10px 0}
.compact-help>summary,.endpoint-gap-note>summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--ink);font-weight:600;line-height:1.4}
.compact-help p{margin:6px 0 10px}
.compact-help .data-note{margin:0}
.route-network-details{margin-top:12px}
.phone-route-identity{display:flex;align-items:center;gap:5px}
.phone-access-flag{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;background:#ffe0a6;color:#443823;font-size:14px;line-height:1;font-weight:800}
.legend-label-short{display:none}
/* All map keys and notices share one bottom stack, clear of the pin-picking banner. */
.map-bottom-controls{display:grid;position:absolute;left:25px;right:25px;bottom:28px;z-index:650;gap:8px;pointer-events:none}
.map-bottom-controls>*{pointer-events:auto}
.map-bottom-controls .map-legend{position:static;inset:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;justify-self:center;flex-wrap:wrap;width:fit-content;min-width:0;max-width:100%;margin:0;padding:6px 12px;gap:4px 16px;font-size:14px;line-height:1.4}
.legend-routes{display:contents}
.legend-routes>.legend-key{display:flex;align-items:center;gap:6px;min-height:24px}
.map-legend .network-key,.map-legend .legend-label-full,.map-legend .legend-label-short{font-weight:650}
.map-legend .coverage-caption{display:contents;margin:0;padding:0;border:0;font-size:inherit;line-height:inherit}
.map-legend .coverage-key{gap:6px;min-height:24px}
.coverage-label-short{display:none}
.map-legend .coverage-key>i{flex-basis:18px;width:18px}
.map-legend .coverage-outside-key{height:14px}
.map-bottom-controls #map-error{position:static;inset:auto;margin:0;max-height:min(30dvh,180px);overflow:auto;overscroll-behavior:contain}
.map-start-hint{position:absolute;top:12px;left:12px;right:78px;max-width:440px;z-index:500;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 3px 15px #10251d15;font-size:1rem;line-height:1.4}
.map-start-hint>span{flex:1 1 150px;min-width:0}
.map-start-hint .primary{flex:0 1 auto;width:auto;min-height:44px;padding:8px 10px;justify-content:center;font-size:.875rem;line-height:1.4}
.detour-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
.detour-option{padding:8px 5px;overflow-wrap:anywhere}
#detour-help{min-height:0;margin:8px 0 0;font-size:14px;line-height:1.4}

@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  /* Primary actions stay within reach while the form or route details scroll. */
  body[data-phone-view=plan]{padding-bottom:calc(var(--phone-nav) + env(safe-area-inset-bottom) + 66px)}
  .planner-primary-action,.walk-primary-action{display:block;position:fixed;left:0;right:0;bottom:calc(var(--phone-nav) + env(safe-area-inset-bottom));z-index:1100;padding:8px 16px;background:var(--paper);border-top:1px solid var(--line)}
  .planner-primary-action .primary,.walk-primary-action .primary{min-height:48px;margin:0;justify-content:center}
  body[data-phone-view=plan] .route-loading{bottom:calc(var(--phone-nav) + env(safe-area-inset-bottom) + 76px)}
  .search-results{max-height:min(40dvh,260px);overflow-y:auto;overscroll-behavior:contain}
  .route-network-details .route-summary{margin-top:8px}
  .endpoint-gap-note{padding:8px 12px;margin:12px 0}
  .endpoint-gap-note>summary{padding:6px 0}
  .access-note{margin:12px 0;padding:10px 12px}
  .access-note .compact-help{margin:4px 0}
  .access-note .gate-closed-button{margin-top:6px}

  /* Share the same responsive header in Plan and Map; only map overlays compact. */
  .map-tools{top:8px;right:8px}
  .map-tools button{width:44px;height:44px;min-height:44px}
  .map-tools #zoom-in,.map-tools #zoom-out{display:none}
  .mobile-map-zoom{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
  .mobile-map-zoom button{min-height:44px;padding:7px 5px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.35}
  .map-layers-panel{top:8px;right:60px;width:min(300px,calc(100% - 72px));max-height:calc(100% - 16px)}
  .coverage-key{gap:6px}
  .coverage-key>i{width:18px;flex-basis:18px}
  .coverage-outside-key{height:14px}
  .phone-route-card{top:8px;left:8px;right:60px;padding:8px;border-radius:11px}
  .phone-route-top{gap:6px}
  .phone-route-top>div:first-child{flex:1;min-width:0}
  .phone-route-buttons{display:flex;align-items:center;gap:4px;flex:0 0 auto}
  .phone-route-label{font-size:14px;line-height:1.3;gap:5px;margin:0}
  .phone-route-label:before{width:14px;flex:none;height:4px}
  #phone-route-summary{font-size:16px;line-height:1.4;margin-top:2px;letter-spacing:0}
  .phone-route-toggle{min-height:44px;padding:5px 7px;font-size:14px}
  /* The same switch still accepts a tap or swipe, without a separate wide row. */
  #phone-route-swipe-track{display:grid;grid-template-columns:1fr;grid-template-rows:24px 16px;place-items:center;flex:0 0 56px;width:56px;min-height:50px;height:auto;margin:0;padding:4px;border-radius:8px}
  #phone-route-swipe-track[hidden]{display:none}
  #phone-route-swipe-track:before{display:none}
  #phone-route-swipe-track .phone-route-swipe-thumb{grid-column:1;grid-row:1;min-height:0;background:transparent;color:inherit;transform:none;transition:none}
  #phone-route-swipe-track .phone-route-swipe-thumb svg{width:21px;height:21px;transform:none}
  #phone-route-swipe-track #phone-route-swipe-text{display:block;grid-column:1;grid-row:2;padding:0;font-size:12px;line-height:16px;font-weight:500;color:inherit}
  #phone-route-swipe-track[data-next^="circle"]{--swipe-color:#6435c9;--swipe-fill:#f3effb}
  [data-theme=dark] #phone-route-swipe-track[data-next^="circle"]{--swipe-color:#ba97ff;--swipe-fill:#302842}
  .phone-route-extra{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);max-height:min(42dvh,300px)}
  .phone-gap-note,.phone-direction-note{margin:0 0 8px;font-size:14px;line-height:1.4}
  .phone-guidance-status{margin-top:6px;font-size:14px;line-height:1.4}
  .phone-route-extra .phone-swipe-hint{display:none}
  .map-instruction{top:8px;left:8px;right:60px;padding:6px 6px 6px 10px;font-size:14px;line-height:1.4}
  .map-start-hint{top:8px;left:8px;right:60px;padding:8px 10px;font-size:14px}
  .map-bottom-controls{left:8px;right:8px;bottom:24px;gap:6px}
  .map-bottom-controls .phone-notice{padding:8px 10px;font-size:14px;line-height:1.4}
  .map-bottom-controls .map-legend{justify-self:stretch;width:auto;max-width:none;padding:4px 8px 7px;gap:2px;border-radius:9px}
  .legend-routes{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex:1 0 100%;gap:2px 10px;min-width:0}
  .map-legend .coverage-caption{display:flex;justify-content:center;flex-wrap:wrap;flex:1 0 100%;gap:4px 10px;padding:0;border:0}
  .coverage-label-full{display:none}
  .coverage-label-short{display:inline}
  .map-legend .legend-key{flex:0 1 auto;max-width:none;min-height:24px;flex-direction:row;gap:5px;font-size:14px;line-height:1.3;white-space:normal}
  .map-legend .legend-key>i{margin:0}
  .map-legend .legend-line{width:16px;flex:0 0 16px}
  .map-legend .official-gap-key,.map-legend .hide-stops{min-height:44px}
  .map-legend .hide-stops{flex:0 1 auto;margin:0;padding:6px 8px}
  .legend-label-full{display:none}
  .legend-label-short{display:inline}
  #phone-start-walk{min-height:44px;padding:8px 12px;font-size:16px;line-height:1.4;border-radius:9px}

  /* Header and decision buttons are outside the scrollable dialog content. */
  .feature-dialog{padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))}
  .dialog-card{display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;padding:12px;border-radius:14px}
  .dialog-header{flex:none;gap:8px;padding-bottom:8px;margin-bottom:8px}
  .dialog-header h2{font-size:20px;line-height:1.25}
  #dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #dialog-body:has(>.dialog-scroll){display:flex;flex-direction:column;overflow:hidden}
  .dialog-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 8px;-webkit-overflow-scrolling:touch}
  .dialog-actions{flex:0 0 auto;margin:0;padding-top:8px;border-top:1px solid var(--line);background:var(--paper)}
  .dialog-actions .dialog-primary{margin-top:0;min-height:48px;justify-content:center;white-space:normal}
  .nearby-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}
  .nearby-actions .nearby-pick{margin:0;min-height:48px;font-size:14px;line-height:1.3;padding:8px}
  .dialog-intro{font-size:16px;line-height:1.4;margin:0 0 10px}
  .nearby-access-warning{font-size:14px;line-height:1.4;margin-bottom:8px}
  .station-access-map{height:clamp(140px,26dvh,200px);min-height:140px}
  .nearby-distance{margin:8px 0;font-size:14px;line-height:1.4}
  .nearby-choices{gap:6px}
  .nearby-choices button{min-height:44px;padding:8px 10px;gap:8px;line-height:1.35}
  .nearby-choices button[aria-pressed=true]{padding:7px 9px}
  .compact-help{margin:6px 0;font-size:14px;line-height:1.45}
  .compact-help>summary{min-height:44px;padding:10px 0;font-size:14px}
  .data-note,.circle-help,.dialog-status,.check-row small{font-size:14px;line-height:1.4}
  .data-note{padding:8px 10px;margin:8px 0}
  .circle-start{padding:10px;gap:3px}
  .circle-start-actions{margin-top:8px;gap:8px}
  .circle-help{margin:8px 0}
  .dialog-card input[type=range]{min-height:44px;margin:0}
  .field-label{margin-top:10px}
  .dialog-actions #circle-status{margin:0 0 8px}
  .dialog-actions .circle-progress{padding:8px;margin-bottom:8px;font-size:14px;line-height:1.4}
  .station-entrances{gap:8px;margin:10px 0}
  .station-entrances button{min-height:64px;padding:10px;gap:4px}
  .station-point-details{min-height:0;margin:8px 0;font-size:14px;line-height:1.4}
  .check-row{padding:8px 0;gap:10px}
  .check-row strong{line-height:1.4}
  .dialog-card textarea{min-height:90px}
  .large-text .dialog-header h2{font-size:23px}
  .large-text .dialog-intro,.large-text .nearby-access-warning,.large-text .nearby-distance,.large-text .compact-help,.large-text .compact-help>summary{font-size:18px}
  .large-text .nearby-choices button,.large-text .nearby-actions button{font-size:18px}
}

@media(max-height:500px) and (orientation:landscape) and (min-width:500px) and (max-width:1000px){
  .phone-route-card{left:8px;right:auto;width:270px;max-height:calc(100% - 16px);overflow:auto}
  .map-bottom-controls{left:292px;right:8px}
  .map-tools{display:flex;right:8px}
  .map-layers-panel{right:8px;top:58px;max-height:calc(100% - 66px)}
}