/* Desktop-only presentation. Keep phone/tablet layout and shared chrome untouched. */
@media (min-width:1100px) {
  :where(#routePlanner) main {width:100%;max-width:1480px;padding:22px 32px 48px;--desktop-columns:minmax(360px,.42fr) minmax(0,.58fr);}
  :where(#routePlanner) .hero {max-width:none;margin-bottom:14px;}
  :where(#routePlanner) .hero h1 {font-size:34px;line-height:1.15;margin:6px 0 8px;max-width:none;}
  :where(#routePlanner) .hero-copy {font-size:15px;max-width:720px;}
  :where(#routePlanner) .journey-progress {max-width:640px;margin-bottom:16px;}
  :where(#routePlanner) .planner-shell {grid-template-columns:var(--desktop-columns);gap:24px;border:0;background:transparent;overflow:visible;}
  :where(#routePlanner) .planner-panel {padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;}
  :where(#routePlanner) .planner-shell>.map-panel {min-height:520px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  :where(#routePlanner) .form-heading {margin-bottom:14px;}
  :where(#routePlanner) .location-fields {gap:16px;}
  :where(#routePlanner) .results-heading {margin-bottom:14px;}
  :where(#routePlanner) .results-heading h2 {font-size:28px;}
  :where(#routePlanner) #editTrip {background:#fff;border:1px solid var(--line);}

  /* Route choices form one row; vehicle settings and road map stay side by side. */
  :where(#routePlanner) .route-review {display:grid;grid-template-columns:var(--desktop-columns);gap:18px 24px;padding:0;border:0;background:transparent;align-items:start;}
  :where(#routePlanner) .review-heading {grid-column:1/-1;grid-row:1;}
  :where(#routePlanner) .review-heading .eyebrow {display:none;}
  :where(#routePlanner) .review-heading h3 {font-size:21px;margin:0;}
  :where(#routePlanner) .review-layout {display:contents;}
  :where(#routePlanner) .route-tabs {grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
  :where(#routePlanner) .route-tab {padding:14px 16px;}
  :where(#routePlanner) .route-tab:only-child {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 20px;}
  :where(#routePlanner) .route-tab:only-child .route-choice-top {grid-column:1;grid-row:1;}
  :where(#routePlanner) .route-tab:only-child .route-name {grid-column:1;grid-row:2;}
  :where(#routePlanner) .route-tab:only-child .route-metrics {grid-column:2;grid-row:1/3;margin:0;align-self:center;}
  :where(#routePlanner) #vehicleForm {grid-column:1;grid-row:3;min-width:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;}
  :where(#routePlanner) #reviewVehicleMount {max-width:none;}
  :where(#routePlanner) #vehicleSetup {margin:0;padding:0;border:0;}
  :where(#routePlanner) .fuel-step-help {margin-bottom:12px;}
  :where(#routePlanner) .review-map-mount {grid-column:2;grid-row:3/6;height:clamp(400px,calc(100vh - 420px),600px);position:sticky;top:24px;border:1px solid var(--line);border-radius:14px;}
  :where(#routePlanner) #routeReviewError {grid-column:1;grid-row:4;}
  :where(#routePlanner) .review-footer {grid-column:1;grid-row:5;margin-top:0;gap:12px;flex-wrap:wrap;}
  :where(#routePlanner) .review-footer .primary-action-dock {flex-basis:100%;}
  :where(#routePlanner) .review-footer #adjustRoute {padding:4px 0;min-height:36px;}

  /* Compare priorities across the available width, with consistent metrics. */
  :where(#routePlanner) .journey-route-line {padding-bottom:10px;margin-bottom:12px;}
  :where(#routePlanner) .result-priority {display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px 18px;}
  :where(#routePlanner) .priority-heading {display:block;font-size:14px;margin:0;}
  :where(#routePlanner) .priority-heading span {display:block;font-size:12px;margin-top:4px;}
  :where(#routePlanner) #resultPriority {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;padding:0;gap:12px;border:0;background:transparent;}
  :where(#routePlanner) #resultPriority button {display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;text-align:left;gap:6px 10px;min-height:84px;padding:14px 16px;border:1px solid var(--line);background:#fff;border-radius:12px;}
  :where(#routePlanner) #resultPriority button[aria-pressed="true"] {background:var(--blue-soft);border-color:var(--blue);}
  :where(#routePlanner) #resultPriority button[aria-pressed="true"]::after {width:18px;height:18px;font-size:11px;top:-5px;right:-5px;}
  :where(#routePlanner) .priority-mode {grid-column:1;grid-row:1;font-size:14px;}
  :where(#routePlanner) .priority-cost {grid-column:2;grid-row:1;font-size:24px;white-space:nowrap;}
  :where(#routePlanner) .priority-detail {grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);}
  :where(#routePlanner) .priority-detail>span {display:inline;margin:0;}
  :where(#routePlanner) #priorityStatus,:where(#routePlanner) #priorityError {grid-column:2;}

  :where(#routePlanner) .results-primary {grid-template-columns:var(--desktop-columns);gap:24px;padding-top:18px;}
  :where(#routePlanner) .best-station {padding:22px;border-radius:16px;}
  :where(#routePlanner) .plan-budget-top>strong {font-size:34px;}
  :where(#routePlanner) .plan-budget-top>span {font-size:15px;max-width:none;}
  :where(#routePlanner) .plan-budget-top small {font-size:13px;}
  :where(#routePlanner) .plan-stop+.plan-stop {margin-top:0;padding-top:0;}
  :where(#routePlanner) .stop-row {min-height:78px;padding:12px 0;gap:10px;}
  :where(#routePlanner) .stop-row-place {padding-right:8px;}
  :where(#routePlanner) .stops-heading {font-size:20px;}
  :where(#routePlanner) .stop-row-place>strong {font-size:15px;}
  :where(#routePlanner) .stop-row-place>small,:where(#routePlanner) .stop-row-purchase small {font-size:12px;}
  :where(#routePlanner) .stop-row-purchase strong {font-size:17px;}
  :where(#routePlanner) .results-map-mount {position:sticky;top:24px;height:clamp(440px,calc(100vh - 160px),640px);border:1px solid var(--line);border-radius:16px;}
  :where(#routePlanner) .navigation-dock {position:static;margin-top:16px;}
  :where(#routePlanner) .navigation-dock .navigation-app {min-height:58px;}

  /* Desktop has room to keep the plan/map and alternatives in the same document. */
  :where(#routePlanner) .results-workspace {display:block;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
  :where(#routePlanner) .alternative-heading {margin-bottom:16px;max-width:none;}
  :where(#routePlanner) .alternative-heading h3 {font-size:23px;}
  :where(#routePlanner) .station-results {gap:18px;}
  :where(#routePlanner) .station-card {padding:20px;}
  :where(#routePlanner) .mobile-results-nav {width:auto;justify-content:flex-end;margin-top:12px;}
  :where(#routePlanner) .mobile-results-nav button {flex:none;min-width:170px;}
  :where(#routePlanner) .mobile-results-nav [data-results-view="map"] {display:none;}
  :where(#routePlanner) .results[data-mobile-view="alternatives"] .results-primary {display:grid;}
  :where(#routePlanner) .results[data-mobile-view="alternatives"] .mobile-results-nav {display:flex;}
  :where(#routePlanner) .results[data-mobile-view="alternatives"] .view-back {display:none;}
}

@media (min-width:1100px) and (max-width:1250px) {
  :where(#routePlanner) main {padding-inline:24px;}
  :where(#routePlanner) .result-priority {grid-template-columns:1fr;gap:8px;}
  :where(#routePlanner) .priority-heading {display:flex;justify-content:space-between;}
  :where(#routePlanner) .priority-heading span {margin-top:0;}
  :where(#routePlanner) #priorityStatus,:where(#routePlanner) #priorityError {grid-column:1;}
  :where(#routePlanner) .review-map-mount {height:480px;}
}