/* One visual system for planning, confirming the road and choosing a fuel stop. */ /* Loading placeholders preserve the active form/plan and never imply progress. */ :where(#routePlanner) .skeleton-line {display:block;height:9px;width:100%;border-radius:5px;background:#dce6f3;animation:route-skeleton-pulse 1.4s ease-in-out infinite;} :where(#routePlanner) .skeleton-short {width:65%;} :where(#routePlanner) .suggestion-placeholder,:where(#routePlanner) .discount-placeholder {display:grid;gap:9px;padding:14px 10px;min-height:52px;} :where(#routePlanner) .pending-preview {display:flex;align-items:center;gap:12px;padding:10px 0 12px;color:var(--muted);font-size:12px;line-height:1.4;text-align:left;} :where(#routePlanner) .pending-preview-lines {display:grid;gap:7px;width:62px;flex:none;} :where(#routePlanner) .pending-preview .loading-copy {flex:1;min-width:0;} :where(#routePlanner) .priority-cost .skeleton-price {display:inline-block;width:58px;height:.7em;vertical-align:middle;} :where(#routePlanner) .is-awaiting-price .priority-detail::after {content:"";display:block;height:1.3em;} @keyframes route-skeleton-pulse {0%,100% {opacity:.55;}50% {opacity:1;}} @media(prefers-reduced-motion:reduce){:where(#routePlanner) .skeleton-line {animation:none;opacity:1;}} :where(#routePlanner) .icon-definitions {position:absolute;width:0;height:0;overflow:hidden;} :where(#routePlanner) .ui-icon {width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;} :where(#routePlanner) { --ink:#17324f; --muted:#596d83; --line:#dce5f0; --paper:#fff; --bg:#f4f8fc; --blue:#406ab8; --blue-soft:#edf3fc; --accent:#1c67c9; --brand-sky:#33adff; --success:#16704c; } html:has(body.route-page) {scroll-padding-bottom:110px;} :where(#routePlanner) * { box-sizing:border-box; } :where(#routePlanner) [hidden] { display:none!important; } :where(#routePlanner) { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; } :where(#routePlanner) button,:where(#routePlanner) input,:where(#routePlanner) select { font:inherit; } :where(#routePlanner) button,:where(#routePlanner) a,:where(#routePlanner) input,:where(#routePlanner) select,:where(#routePlanner) summary { -webkit-tap-highlight-color:transparent; } :where(#routePlanner) button,:where(#routePlanner) summary { cursor:pointer; } :where(#routePlanner) button { color:inherit; } :where(#routePlanner) a { color:var(--accent); text-decoration:none; } :where(#routePlanner) button:focus-visible,:where(#routePlanner) a:focus-visible,:where(#routePlanner) input:focus-visible,:where(#routePlanner) select:focus-visible,:where(#routePlanner) summary:focus-visible { outline:3px solid #2c7eca; outline-offset:3px; } :where(#routePlanner) :disabled { opacity:.6; cursor:wait; } :where(#routePlanner) [tabindex="-1"]:focus { outline:none; } :where(#routePlanner) h1,:where(#routePlanner) h2,:where(#routePlanner) h3,:where(#routePlanner) h4,:where(#routePlanner) p { margin:0; } :where(#routePlanner) .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } :where(#routePlanner) .brand { display:flex; align-items:center; } :where(#routePlanner) .brand img { width:124px; height:auto; } :where(#routePlanner) .dev-pill { font-size:11px; color:var(--muted); letter-spacing:.02em; background:#fff; padding:4px 9px; border:1px solid var(--line); border-radius:20px; } :where(#routePlanner) main { max-width:1180px; margin:auto; padding:26px 30px 70px; } :where(#routePlanner) .hero { max-width:720px; margin-bottom:32px; } :where(#routePlanner) .eyebrow { color:var(--blue); font-size:11px; font-weight:750; letter-spacing:.12em; line-height:1.4; } :where(#routePlanner) .hero h1 { font-size:42px; line-height:1.12; letter-spacing:-.045em; margin:10px 0 14px; max-width:650px; } :where(#routePlanner) .hero-copy { max-width:540px; color:var(--muted); font-size:16px; } :where(#routePlanner) .hero-stat { display:none; } body.is-results-mode :where(#routePlanner) .hero { display:none; } :where(#routePlanner) .planner-shell { display:grid; grid-template-columns:minmax(0,510px) minmax(0,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; } :where(#routePlanner) .planner-panel { padding:28px; min-width:0; } :where(#routePlanner) .form-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } :where(#routePlanner) .form-heading>div { display:flex; align-items:center; gap:10px; } :where(#routePlanner) .form-heading h2 { font-size:18px; letter-spacing:-.02em; } :where(#routePlanner) .step-number { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:750; } :where(#routePlanner) .icon-button,:where(#routePlanner) .inside-button { border:0; background:var(--blue-soft); border-radius:9px; display:grid; place-items:center; min-width:44px; min-height:44px; color:var(--blue); } :where(#routePlanner) .icon-button { font-size:23px; } :where(#routePlanner) .location-stack { display:grid; gap:14px; } :where(#routePlanner) .location-field { position:relative; min-width:0; } :where(#routePlanner) .location-field label,:where(#routePlanner) .field>span { display:block; font-size:13px; font-weight:650; margin-bottom:7px; } :where(#routePlanner) .location-dot { display:none; } :where(#routePlanner) .location-field input,:where(#routePlanner) .field select,:where(#routePlanner) .unit-input input { width:100%; min-width:0; height:48px; background:#fff; color:var(--ink); border:1px solid #cdd8db; border-radius:10px; padding:0 12px; font-size:16px; } :where(#routePlanner) .input-actions { position:relative; } :where(#routePlanner) .input-actions input { padding-right:52px; } :where(#routePlanner) .inside-button { position:absolute; right:3px; top:2px; } :where(#routePlanner) .via-fields { display:contents; } :where(#routePlanner) .location-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; } :where(#routePlanner) .text-button { padding:8px 0; min-height:44px; border:0; background:none; font-size:13px; font-weight:650; color:var(--blue); text-align:left; } :where(#routePlanner) .choose-on-map { display:none; } :where(#routePlanner) .map-hint,:where(#routePlanner) .field-help { display:block; color:var(--muted); font-size:12px; margin-top:6px; line-height:1.5; } :where(#routePlanner) .suggestions { display:none; position:absolute; left:0; right:0; top:100%; z-index:50; border:1px solid var(--line); background:#fff; border-radius:10px; padding:5px; box-shadow:0 12px 30px #182b3820; max-height:270px; overflow:auto; } :where(#routePlanner) .suggestions.is-open { display:block; } :where(#routePlanner) .suggestion { display:block; width:100%; min-height:48px; padding:9px 10px; border:0; text-align:left; background:#fff; border-radius:6px; } :where(#routePlanner) .suggestion:hover { background:var(--blue-soft); } :where(#routePlanner) .suggestion strong,:where(#routePlanner) .suggestion small { display:block; } :where(#routePlanner) .suggestion small { color:var(--muted); font-size:12px; } :where(#routePlanner) .divider { border-top:1px solid var(--line); margin:24px 0; } :where(#routePlanner) .departure-field { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:16px; } :where(#routePlanner) .departure-field strong { font-size:13px; } :where(#routePlanner) .departure-field small { display:block; color:var(--muted); font-size:11px; } :where(#routePlanner) .departure-field input { width:190px; min-width:0; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:6px; font-size:13px; background:#fff; } :where(#routePlanner) .field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } :where(#routePlanner) .primary-preferences>.field:nth-child(3) { display:none; } :where(#routePlanner) .unit-input { position:relative; } :where(#routePlanner) .unit-input input { padding-right:50px; } :where(#routePlanner) .unit-input>span { position:absolute; right:12px; top:12px; color:var(--muted); font-size:14px; } :where(#routePlanner) .unit-input--large input { font-size:20px; font-weight:650; } :where(#routePlanner) .priority-preference,:where(#routePlanner) .route-options { border:0; padding:0; margin:20px 0 0; } :where(#routePlanner) .priority-preference legend,:where(#routePlanner) .route-options legend { font-size:13px; font-weight:650; margin-bottom:9px; } :where(#routePlanner) .priority-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; border-radius:11px; padding:4px; background:var(--blue-soft); } :where(#routePlanner) .priority-option { position:relative; cursor:pointer; } :where(#routePlanner) .priority-option input { position:absolute; opacity:0; width:100%; height:100%; margin:0; } :where(#routePlanner) .priority-option>span { display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:8px; padding:7px 4px; text-align:center; } :where(#routePlanner) .priority-option strong { font-size:12px; font-weight:650; } :where(#routePlanner) .priority-option small,:where(#routePlanner) .priority-option em { display:none; } :where(#routePlanner) .priority-option input:checked+span { background:#fff; color:var(--blue); box-shadow:0 1px 4px #182b3814; } :where(#routePlanner) .priority-option input:focus-visible+span { outline:3px solid #2c7eca; } :where(#routePlanner) .stop-preference { display:block; margin-top:16px; } :where(#routePlanner) .stop-preference select { width:100%; } :where(#routePlanner) .stop-preference .field-help { display:none; } :where(#routePlanner) .secondary-preferences { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:18px; border-top:1px solid var(--line); } :where(#routePlanner) .secondary-preferences>details { min-width:0; } :where(#routePlanner) .secondary-preferences>details[open] { grid-column:1/-1; } :where(#routePlanner) .secondary-preferences summary small { display:none!important; } :where(#routePlanner) .secondary-preferences>details { border-bottom:1px solid var(--line); } :where(#routePlanner) .secondary-preferences summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; } :where(#routePlanner) summary::-webkit-details-marker { display:none; } :where(#routePlanner) .secondary-preferences summary strong { font-size:13px; font-weight:650; } :where(#routePlanner) .secondary-preferences summary small { display:block; font-size:11px; color:var(--muted); } :where(#routePlanner) .count-pill { display:grid; place-items:center; min-width:24px; height:24px; border-radius:6px; font-size:12px; background:var(--blue-soft); color:var(--blue); } :where(#routePlanner) .advanced-content,:where(#routePlanner) .discount-content { padding:12px 0 18px; } :where(#routePlanner) .advanced-content>.departure-field { margin:0 0 16px; } :where(#routePlanner) .advanced-content>.priority-preference { margin:0 0 18px; } :where(#routePlanner) .advanced-content>.stop-preference { margin-bottom:20px; } :where(#routePlanner) .field-grid--single { grid-template-columns:1fr; } :where(#routePlanner) .vehicle-box { margin-top:20px; } :where(#routePlanner) .vehicle-heading { display:flex; gap:10px; margin-bottom:16px; } :where(#routePlanner) .vehicle-heading h3 { font-size:15px; } :where(#routePlanner) .vehicle-heading p,:where(#routePlanner) .vehicle-note { color:var(--muted); font-size:12px; } :where(#routePlanner) .vehicle-icon { display:none; } :where(#routePlanner) .field--full { grid-column:1/-1; } :where(#routePlanner) .vehicle-note { margin-top:10px; } :where(#routePlanner) .route-options label { display:flex; align-items:center; gap:10px; min-height:40px; font-size:13px; } :where(#routePlanner) .route-options input { width:18px; height:18px; accent-color:var(--blue); } :where(#routePlanner) .discount-search input { width:100%; padding:10px; min-height:44px; border:1px solid var(--line); border-radius:8px; } :where(#routePlanner) .discount-operator { margin-top:10px; } :where(#routePlanner) .discount-operator summary { gap:8px; justify-content:flex-start; } :where(#routePlanner) .discount-operator summary img { width:30px; height:30px; object-fit:contain; } :where(#routePlanner) .discount-plan { display:flex; align-items:start; gap:10px; padding:10px 0; font-size:12px; } :where(#routePlanner) .discount-plan input { width:18px; height:18px; accent-color:var(--blue); } :where(#routePlanner) .discount-plan strong,:where(#routePlanner) .discount-plan small { display:block; } :where(#routePlanner) .discount-plan small,:where(#routePlanner) .muted { color:var(--muted); } :where(#routePlanner) .primary-button,:where(#routePlanner) .secondary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:14px; min-height:48px; padding:12px 18px; border-radius:10px; font-size:14px; font-weight:650; border:1px solid transparent; line-height:1.4; text-decoration:none; } :where(#routePlanner) .primary-button { background:var(--accent); color:#fff; box-shadow:0 3px 8px #1c67c918; } :where(#routePlanner) .primary-button:hover { background:#1555ab; } :where(#routePlanner) .secondary-button { border-color:var(--line); background:#fff; color:var(--ink); } :where(#routePlanner) .secondary-button:hover { border-color:var(--blue); } :where(#routePlanner) #submitRoute { width:100%; margin-top:22px; } :where(#routePlanner) .form-error { margin-top:14px; padding:12px; background:#fff0eb; color:#943d24; font-size:13px; border-radius:8px; } :where(#routePlanner) .loading-status { color:var(--muted); font-size:13px; padding-top:12px; } :where(#routePlanner) .map-panel { position:relative; min-width:0; min-height:0; height:100%; background:#e7eeeb; overflow:hidden; } :where(#routePlanner) .planner-shell>.map-panel { min-height:640px; } :where(#routePlanner) .map { position:absolute; inset:0; width:100%; height:100%; } :where(#routePlanner) .map-overlay--top { position:absolute; z-index:3; left:12px; top:12px; display:flex; flex-wrap:wrap; gap:10px; padding:8px 10px; border-radius:9px; background:#fffffff2; box-shadow:0 2px 8px #182b380d; } :where(#routePlanner) .legend-item { display:flex; align-items:center; gap:4px; font-size:10px; color:#52636a; } :where(#routePlanner) .legend-line { display:inline-block; width:16px; border-top:3px solid #2f76bd; } :where(#routePlanner) .legend-line--detour { border-top:3px dashed #ef8a17; } :where(#routePlanner) .legend-dot { display:inline-block; width:8px; height:8px; border:2px solid #1267e5; border-radius:50%; } :where(#routePlanner) .legend-dot--plan { border-color:#ef8a17; } :where(#routePlanner) .map-station-mode { position:absolute; right:12px; top:52px; z-index:3; display:flex; gap:3px; padding:3px; border-radius:8px; background:#fff; } :where(#routePlanner) .map-station-mode button { border:0; border-radius:6px; background:#fff; min-height:40px; padding:0 10px; font-size:12px; } :where(#routePlanner) .map-station-mode button.is-active { background:var(--blue-soft); color:var(--blue); } :where(#routePlanner) .map-pick-tools { position:absolute; bottom:25px; left:16px; z-index:3; padding:12px; border-radius:10px; background:#fffffff5; max-width:calc(100% - 85px); } :where(#routePlanner) .map-pick-tools strong { display:block; font-size:12px; } :where(#routePlanner) .map-pick-buttons { display:flex; gap:6px; margin-top:8px; } :where(#routePlanner) .map-pick-buttons button { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--blue); font-size:12px; } :where(#routePlanner) .map-pick-buttons button.is-active { background:var(--blue-soft); } :where(#routePlanner) .map-pick-tools small { display:block; font-size:11px; margin-top:6px; color:var(--muted); } :where(#routePlanner) .map-empty { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); padding:20px; border-radius:12px; background:#fffffff5; width:270px; max-width:80%; text-align:center; } :where(#routePlanner) .map-empty strong,:where(#routePlanner) .map-empty span { display:block; } :where(#routePlanner) .map-empty span { font-size:12px; color:var(--muted); margin-top:6px; } :where(#routePlanner) .fit-route,:where(#routePlanner) .close-mobile-map { display:none; } :where(#routePlanner) .planner-shell .map-station-mode { display:none; } body.is-results-mode :where(#routePlanner) .fit-route { display:block; position:absolute; z-index:3; bottom:24px; left:12px; padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12px; font-weight:650; } body.is-results-mode :where(#routePlanner) .map-pick-tools,body.is-results-mode :where(#routePlanner) .map-empty { display:none; } body.is-reviewing-route :where(#routePlanner) .map-station-mode,body.is-reviewing-route :where(#routePlanner) .map-overlay--top { display:none; } :where(#routePlanner) .ol-zoom { top:auto!important; left:auto!important; right:12px; bottom:22px; border-radius:8px!important; } :where(#routePlanner) .ol-zoom button { width:36px!important; height:36px!important; background:#fff!important; color:var(--ink)!important; font-size:22px!important; } :where(#routePlanner) .ol-attribution { font-size:9px; } :where(#routePlanner) .results-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:25px; } :where(#routePlanner) .results-heading .eyebrow { display:none; } :where(#routePlanner) .results-heading h2 { font-size:32px; letter-spacing:-.035em; line-height:1.2; } :where(#routePlanner) #resultsSummary { color:var(--muted); font-size:13px; margin-top:6px; } :where(#routePlanner) #editTrip { white-space:nowrap; background:transparent; } :where(#routePlanner) .route-review { padding:28px; border-radius:18px; background:#fff; border:1px solid var(--line); } :where(#routePlanner) .review-heading h3 { font-size:26px; line-height:1.25; letter-spacing:-.025em; margin:6px 0 8px; } :where(#routePlanner) .review-heading>p:last-child { font-size:14px; color:var(--muted); } :where(#routePlanner) .review-layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:24px; margin-top:22px; } :where(#routePlanner) .route-tabs { display:flex; flex-direction:column; gap:12px; } :where(#routePlanner) .route-tab { width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; padding:16px; text-align:left; } :where(#routePlanner) .route-tab.is-active { border-color:var(--blue); background:var(--blue-soft); box-shadow:inset 3px 0 var(--blue); } :where(#routePlanner) .route-choice-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--blue); font-size:11px; } :where(#routePlanner) .route-name { display:block; margin:7px 0; font-size:17px; line-height:1.3; } :where(#routePlanner) .route-metrics { display:flex; gap:9px; color:var(--muted); font-size:14px; } :where(#routePlanner) .review-map-mount { height:360px; min-width:0; border-radius:12px; overflow:hidden; } :where(#routePlanner) .review-footer { display:flex; align-items:center; gap:20px; margin-top:22px; } :where(#routePlanner) .journey-route-line { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 0 16px; margin-bottom:8px; border-bottom:1px solid var(--line); } :where(#routePlanner) .journey-route-line p { color:var(--muted); font-size:13px; } :where(#routePlanner) .journey-route-line button { flex-shrink:0; } :where(#routePlanner) .results-primary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:start; padding-top:18px; } :where(#routePlanner) .best-station { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; min-width:0; } :where(#routePlanner) .recommendation-heading { margin-bottom:20px; } :where(#routePlanner) .recommendation-heading h3 { font-size:22px; margin-top:7px; } :where(#routePlanner) .plan-stop+.plan-stop { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; } :where(#routePlanner) .next-stops { border-top:1px solid var(--line); margin-top:14px; } :where(#routePlanner) .next-stops summary { display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:8px 0; font-size:13px; color:var(--blue); font-weight:650; list-style:none; } :where(#routePlanner) .next-stops[open] summary { margin-bottom:16px; } :where(#routePlanner) .stop-topline { display:flex; justify-content:space-between; gap:14px; font-size:12px; color:var(--muted); line-height:1.4; margin-bottom:19px; } :where(#routePlanner) .stop-topline>span:last-child { text-align:right; } :where(#routePlanner) .stop-identity { display:flex; align-items:center; gap:14px; } :where(#routePlanner) .brand-logo,:where(#routePlanner) .brand-fallback { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; object-fit:contain; border-radius:10px; background:#fff; } :where(#routePlanner) .brand-logo img { width:100%; height:100%; object-fit:contain; } :where(#routePlanner) .brand-logo--large { width:50px; height:50px; } :where(#routePlanner) .station-logo { position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:48px; height:48px; border-radius:10px; background:#fff; } :where(#routePlanner) .station-logo img { position:relative; width:100%; height:100%; object-fit:contain; } :where(#routePlanner) .station-logo-fallback { display:none; font-size:17px; color:var(--blue); font-weight:650; } :where(#routePlanner) .station-logo.is-missing .station-logo-fallback { display:block; } :where(#routePlanner) .station-logo.is-missing img { display:none; } :where(#routePlanner) .brand-fallback { color:var(--blue); font-size:16px; font-weight:700; background:var(--blue-soft); } :where(#routePlanner) .stop-identity h3 { font-size:27px; letter-spacing:-.035em; line-height:1.15; overflow-wrap:anywhere; } :where(#routePlanner) .stop-identity p { margin-top:5px; color:var(--muted); font-size:13px; } :where(#routePlanner) .stop-opening { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--success); font-size:12px; margin-top:15px; } :where(#routePlanner) .stop-opening.is-unknown { color:#886323; } :where(#routePlanner) .status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; } :where(#routePlanner) .stop-purchase { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:23px; padding-top:19px; border-top:1px solid var(--line); } :where(#routePlanner) .stop-purchase span { display:block; color:var(--muted); font-size:12px; } :where(#routePlanner) .stop-purchase strong { display:block; font-size:32px; letter-spacing:-.035em; line-height:1.3; margin-top:4px; font-weight:650; white-space:nowrap; } :where(#routePlanner) .stop-purchase strong small { font-size:20px; font-weight:450; } :where(#routePlanner) .stop-price { color:var(--muted); font-size:12px; margin-top:8px; } :where(#routePlanner) .stop-map-link { font-size:12px; margin-top:5px; } :where(#routePlanner) .arrival-note { color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:17px; margin-top:12px; } :where(#routePlanner) .arrival-note strong { color:var(--ink); font-weight:550; } :where(#routePlanner) .best-navigation { display:flex; width:100%; margin-top:20px; } :where(#routePlanner) .navigation-note { font-size:11px; text-align:center; color:var(--muted); line-height:1.5; margin-top:9px; } :where(#routePlanner) .journey-total { display:flex; justify-content:space-between; gap:14px; padding-top:18px; font-size:13px; } :where(#routePlanner) .journey-total span { color:var(--muted); } :where(#routePlanner) .results-map-mount { height:540px; overflow:hidden; border-radius:18px; min-width:0; scroll-margin-top:15px; } :where(#routePlanner) .mobile-results-nav { display:flex; justify-content:space-between; gap:14px; width:calc(50% - 15px); margin-top:14px; } :where(#routePlanner) .mobile-results-nav button { display:flex; align-items:center; justify-content:space-between; gap:18px; flex:1; min-height:48px; padding:10px 0; font-size:13px; color:var(--blue); font-weight:650; background:none; border:0; border-bottom:1px solid var(--line); } :where(#routePlanner) .view-back,:where(#routePlanner) .results-workspace { display:none; } :where(#routePlanner) .view-back { position:sticky; top:0; z-index:6; width:100%; background:var(--bg); font-size:14px; } :where(#routePlanner) .results[data-mobile-view="alternatives"] .results-primary,:where(#routePlanner) .results[data-mobile-view="alternatives"] .mobile-results-nav { display:none; } :where(#routePlanner) .results[data-mobile-view="alternatives"] .results-workspace { display:block; } :where(#routePlanner) .results[data-mobile-view="alternatives"] .view-back { display:block; margin:10px 0 20px; } :where(#routePlanner) .alternative-heading { max-width:650px; margin-bottom:24px; scroll-margin-top:15px; } :where(#routePlanner) .station-column,:where(#routePlanner) .alternative-heading { scroll-margin-top:64px; } :where(#routePlanner) .alternative-heading h3 { font-size:28px; letter-spacing:-.025em; margin:5px 0 8px; } :where(#routePlanner) .alternative-heading>p:last-child { color:var(--muted); font-size:14px; } :where(#routePlanner) .station-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; } :where(#routePlanner) .station-card { border:1px solid var(--line); background:#fff; padding:22px; border-radius:14px; min-width:0; } :where(#routePlanner) .option-label { color:var(--blue); font-size:12px; font-weight:650; margin-bottom:18px; } :where(#routePlanner) .option-identity { display:flex; align-items:center; gap:12px; } :where(#routePlanner) .option-identity h4 { font-size:18px; line-height:1.3; overflow-wrap:anywhere; } :where(#routePlanner) .option-identity p { font-size:12px; color:var(--muted); margin-top:4px; } :where(#routePlanner) .option-difference { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); } :where(#routePlanner) .option-difference strong { display:block; font-size:21px; letter-spacing:-.02em; } :where(#routePlanner) .option-difference span,:where(#routePlanner) .option-summary,:where(#routePlanner) .option-opening { display:block; margin-top:7px; color:var(--muted); font-size:12px; } :where(#routePlanner) .option-opening { color:var(--success); } :where(#routePlanner) .choose-stop-plan { width:100%; margin-top:20px; } :where(#routePlanner) .comparison-note,:where(#routePlanner) .empty-stations { grid-column:1/-1; font-size:13px; color:var(--muted); max-width:750px; margin-top:10px; } :where(#routePlanner) .plan-empty h3 { font-size:27px; letter-spacing:-.025em; line-height:1.25; margin:12px 0; } :where(#routePlanner) .plan-empty p { color:var(--muted); font-size:14px; margin-bottom:20px; } :where(#routePlanner) .station-popup { position:relative; width:310px; max-width:calc(100vw - 40px); padding:18px; border-radius:14px; background:#fff; box-shadow:0 5px 25px #182b3830; } :where(#routePlanner) .station-popup-close { position:absolute; right:5px; top:5px; width:36px; height:36px; background:#fff; border:0; border-radius:8px; font-size:22px; } :where(#routePlanner) .station-popup-heading { display:flex; gap:10px; align-items:center; padding-right:20px; } :where(#routePlanner) .station-popup-heading strong,:where(#routePlanner) .station-popup-heading small { display:block; } :where(#routePlanner) .station-popup-heading strong { font-size:16px; } :where(#routePlanner) .station-popup-heading small,:where(#routePlanner) .station-popup-kicker { color:var(--muted); font-size:10px; } :where(#routePlanner) .station-popup-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:15px; } :where(#routePlanner) .station-popup-metrics small,:where(#routePlanner) .station-popup-metrics strong { display:block; } :where(#routePlanner) .station-popup-metrics small { font-size:10px; color:var(--muted); } :where(#routePlanner) .station-popup-metrics strong { font-size:12px; } :where(#routePlanner) .station-popup-schedule,:where(#routePlanner) .station-popup-arrival { font-size:11px; margin-top:12px; color:var(--muted); } :where(#routePlanner) .station-popup-actions { display:flex; justify-content:space-between; gap:10px; margin-top:10px; } :where(#routePlanner) .station-popup-actions button,:where(#routePlanner) .station-popup-actions a { border:0; background:none; color:var(--blue); font-size:12px; font-weight:650; padding:8px 0; min-height:40px; } @media (max-width:1050px) { :where(#routePlanner) .station-results {grid-template-columns:repeat(2,minmax(0,1fr));} :where(#routePlanner) .review-layout {grid-template-columns:minmax(0,300px) minmax(0,1fr);} :where(#routePlanner) .stop-purchase strong {font-size:28px;} } @media (max-width:820px) { :where(#routePlanner) main {padding:15px 20px 48px;} :where(#routePlanner) .hero {margin-bottom:20px;} :where(#routePlanner) .hero .eyebrow {display:none;} :where(#routePlanner) .hero h1 {font-size:30px;margin-top:0;} :where(#routePlanner) .planner-shell {grid-template-columns:1fr;} :where(#routePlanner) .planner-shell>.map-panel {display:none;} :where(#routePlanner) .planner-panel {padding:24px;} :where(#routePlanner) .choose-on-map {display:block;background:none;border:0;min-height:44px;color:var(--blue);font-size:12px;font-weight:650;padding:6px 0;} :where(#routePlanner) .results-heading {margin-bottom:20px;gap:12px;align-items:flex-start;} :where(#routePlanner) .results-heading h2 {font-size:27px;} :where(#routePlanner) #resultsSummary {font-size:12px;max-width:310px;line-height:1.6;} :where(#routePlanner) #editTrip {font-size:12px;min-height:44px;padding:8px 0;border:0;color:var(--blue);} :where(#routePlanner) .route-review {padding:22px;} :where(#routePlanner) .review-heading h3 {font-size:23px;} :where(#routePlanner) .review-layout {display:flex;flex-direction:column;gap:16px;margin-top:20px;} :where(#routePlanner) .route-tabs {gap:8px;} :where(#routePlanner) .route-tab {padding:12px 14px;} :where(#routePlanner) .route-name {font-size:16px;margin:3px 0;} :where(#routePlanner) .route-metrics {font-size:13px;} :where(#routePlanner) .review-map-mount {height:260px;} :where(#routePlanner) .review-footer {flex-direction:column;gap:7px;align-items:stretch;margin-top:18px;} :where(#routePlanner) .review-footer .text-button {text-align:center;font-size:12px;} :where(#routePlanner) .journey-route-line {align-items:flex-start;gap:12px;margin-bottom:0;padding-bottom:12px;} :where(#routePlanner) .journey-route-line p {font-size:12px;max-width:65%;padding-top:8px;} :where(#routePlanner) .journey-route-line button {font-size:11px;text-align:right;} :where(#routePlanner) .results-primary {display:block;padding-top:18px;} :where(#routePlanner) .best-station {padding:24px;border-radius:16px;} :where(#routePlanner) .results-map-mount {display:none;scroll-margin-top:64px;} :where(#routePlanner) .stop-identity h3 {font-size:28px;} :where(#routePlanner) .stop-purchase strong {font-size:32px;} :where(#routePlanner) .mobile-results-nav {width:100%;margin-top:10px;} :where(#routePlanner) .results[data-mobile-view="map"] .best-station,:where(#routePlanner) .results[data-mobile-view="map"] .mobile-results-nav {display:none;} :where(#routePlanner) .results[data-mobile-view="map"] .results-map-mount {display:block;height:calc(100dvh - 110px);min-height:400px;} :where(#routePlanner) .results[data-mobile-view="map"] .view-back {display:block;margin-top:10px;} :where(#routePlanner) .station-results {grid-template-columns:1fr;gap:14px;} :where(#routePlanner) .station-card {padding:20px;} :where(#routePlanner) .option-difference {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;} :where(#routePlanner) .option-difference span {margin:0;} body.is-planner-map-open.route-page {overflow:hidden;} body.is-planner-map-open :where(#routePlanner) .planner-shell>.map-panel {display:block;position:fixed;inset:0;z-index:1000;height:100dvh;min-height:0;} body.is-planner-map-open :where(#routePlanner) .close-mobile-map {display:block;position:absolute;z-index:4;top:14px;left:14px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;} body.is-planner-map-open :where(#routePlanner) .map-overlay--top,body.is-planner-map-open :where(#routePlanner) .map-empty {display:none;} :where(#routePlanner) .ol-zoom button {width:44px!important;height:44px!important;} } @media (max-width:420px) { :where(#routePlanner) main {padding:12px 16px 40px;} :where(#routePlanner) .hero h1 {font-size:28px;} :where(#routePlanner) .hero-copy {font-size:14px;} :where(#routePlanner) .planner-panel {padding:20px;} :where(#routePlanner) .field-grid {gap:12px;} :where(#routePlanner) .field>span {font-size:12px;} :where(#routePlanner) .field-help {font-size:11px;} :where(#routePlanner) .primary-preferences .field-help {display:none;} :where(#routePlanner) .priority-option strong {font-size:11px;} :where(#routePlanner) .departure-field {align-items:flex-start;flex-direction:column;gap:6px;} :where(#routePlanner) .departure-field input {width:100%;font-size:16px;} :where(#routePlanner) .route-review {padding:18px;} :where(#routePlanner) .review-map-mount {height:230px;} :where(#routePlanner) .review-heading h3 {font-size:22px;} :where(#routePlanner) .review-heading>p:last-child {font-size:13px;} :where(#routePlanner) .best-station {padding:20px;} :where(#routePlanner) .stop-topline {font-size:11px;gap:12px;} :where(#routePlanner) .stop-purchase {gap:12px;} :where(#routePlanner) .stop-purchase span {font-size:11px;} :where(#routePlanner) .stop-purchase strong {font-size:29px;} :where(#routePlanner) .stop-identity {gap:11px;} :where(#routePlanner) .stop-identity h3 {font-size:25px;} :where(#routePlanner) .arrival-note {font-size:12px;} :where(#routePlanner) .best-navigation {font-size:13px;padding-inline:13px;} :where(#routePlanner) .journey-route-line {display:block;} :where(#routePlanner) .journey-route-line p {max-width:none;padding-top:0;} :where(#routePlanner) .journey-route-line button {min-height:44px;padding:3px 0;text-align:left;font-size:12px;} :where(#routePlanner) .results-heading h2 {font-size:25px;} } @media (prefers-reduced-motion:reduce) { html:has(body.route-page) {scroll-behavior:auto;} :where(#routePlanner) *,:where(#routePlanner) *::before,:where(#routePlanner) *::after {animation:none!important;transition:none!important;} } :where(#routePlanner) .result-priority {margin:0 0 18px;} :where(#routePlanner) #resultPriority {display:flex;gap:4px;padding:4px;max-width:460px;background:var(--blue-soft);border:1px solid var(--line);border-radius:14px;} :where(#routePlanner) #resultPriority button {flex:1;min-width:0;min-height:44px;padding:8px 6px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;} :where(#routePlanner) #resultPriority button[aria-pressed="true"] {background:var(--accent);color:#fff;box-shadow:0 2px 5px #17324f18;} :where(#routePlanner) #resultPriority button:disabled {cursor:wait;opacity:.65;} :where(#routePlanner) #priorityStatus {margin:7px 0 0;font-size:12px;color:var(--muted);} :where(#routePlanner) #priorityError {margin-top:8px;} /* Mobile: keep the decision, purchase and navigation close together. */ :where(#routePlanner) .best-station {box-shadow:0 6px 24px #17324f06;border-top:3px solid var(--blue);} :where(#routePlanner) .stop-purchase {background:var(--blue-soft);border:0;border-radius:12px;padding:14px;gap:12px;} :where(#routePlanner) .stop-purchase strong {font-variant-numeric:tabular-nums;color:var(--ink);} :where(#routePlanner) .secondary-preferences {grid-template-columns:1fr;} :where(#routePlanner) .secondary-preferences summary small {display:block!important;font-size:11px;line-height:1.5;font-weight:400;} :where(#routePlanner) .secondary-preferences summary {padding:10px 0;} :where(#routePlanner) .form-error {line-height:1.55;} :where(#routePlanner) #reserveConflict .secondary-button {margin-top:10px;} :where(#routePlanner) .priority-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;max-width:460px;font-size:12px;font-weight:650;margin-bottom:8px;} :where(#routePlanner) .priority-heading span {font-size:10px;font-weight:400;color:var(--muted);} :where(#routePlanner) #resultPriority[aria-busy="true"] {position:relative;overflow:hidden;} :where(#routePlanner) #resultPriority[aria-busy="true"]::after {content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),var(--brand-sky),var(--blue));background-size:200% 100%;animation:priority-loading 1s linear infinite;} @keyframes priority-loading {to {background-position:200% 0;}} @media (max-width:820px) { :where(#routePlanner) .brand img {width:116px;} :where(#routePlanner) main {padding:18px 14px 32px;} :where(#routePlanner) .hero {margin-bottom:14px;} :where(#routePlanner) .hero h1 {font-size:clamp(22px,6vw,26px);line-height:1.2;max-width:none;margin-bottom:6px;} :where(#routePlanner) .hero-copy {font-size:13px;line-height:1.4;max-width:360px;} :where(#routePlanner) .planner-shell {border-radius:16px;box-shadow:0 6px 24px #17324f05;} :where(#routePlanner) .planner-panel {padding:18px;} :where(#routePlanner) .location-stack {gap:12px;} :where(#routePlanner) .map-hint {font-size:12px;} :where(#routePlanner) .divider {margin:18px 0;} :where(#routePlanner) .primary-preferences .field-help {display:block;font-size:11px;} :where(#routePlanner) .results-heading {margin-bottom:12px;gap:8px;} :where(#routePlanner) .results-heading>div {min-width:0;} :where(#routePlanner) .results-heading h2 {font-size:24px;overflow-wrap:anywhere;} :where(#routePlanner) #resultsSummary {font-size:12px;line-height:1.45;} :where(#routePlanner) #editTrip {min-width:62px;text-align:right;} :where(#routePlanner) .journey-route-line {display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:10px;} :where(#routePlanner) .journey-route-line p {font-size:11px;line-height:1.45;max-width:none;flex:1;padding:0;} :where(#routePlanner) .journey-route-line button {font-size:12px;min-height:44px;text-align:right;padding:4px 0;} :where(#routePlanner) .result-priority {position:sticky;top:0;z-index:8;margin:0 -4px;padding:10px 4px 8px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 8px 12px -12px #17324f60;} :where(#routePlanner) .priority-heading {max-width:none;margin-bottom:6px;} :where(#routePlanner) .view-back {top:var(--priority-height,110px);z-index:7;} :where(#routePlanner) .station-column,:where(#routePlanner) .alternative-heading,:where(#routePlanner) .results-map-mount {scroll-margin-top:calc(var(--priority-height,110px) + 60px);} :where(#routePlanner) .best-station {scroll-margin-top:calc(var(--priority-height,110px) + 12px);} :where(#routePlanner) .results[data-mobile-view="map"] .results-map-mount {height:calc(100dvh - var(--priority-height,110px) - 70px);min-height:280px;} :where(#routePlanner) #priorityError {max-height:140px;overflow:auto;} :where(#routePlanner) #resultPriority {max-width:none;border-radius:12px;gap:2px;padding:3px;} :where(#routePlanner) #resultPriority button {font-size:12px;padding:8px 3px;white-space:nowrap;min-height:44px;} :where(#routePlanner) #priorityStatus {font-size:11px;margin:5px 0 0;min-height:17px;} :where(#routePlanner) .results-primary {padding-top:12px;} :where(#routePlanner) .best-station {padding:16px;border-radius:16px;} :where(#routePlanner) .recommendation-heading {margin-bottom:12px;} :where(#routePlanner) .eyebrow {font-size:10px;letter-spacing:.09em;} :where(#routePlanner) .stop-topline {margin-bottom:12px;font-size:11px;gap:8px;} :where(#routePlanner) .stop-identity h3 {font-size:24px;} :where(#routePlanner) .stop-identity p {font-size:12px;margin-top:3px;} :where(#routePlanner) .station-logo {width:40px;height:40px;} :where(#routePlanner) .stop-opening {margin-top:10px;font-size:11px;gap:4px;} :where(#routePlanner) .stop-purchase {margin-top:14px;padding:12px 10px;gap:8px;} :where(#routePlanner) .stop-purchase span {font-size:11px;line-height:1.4;min-height:2.8em;} :where(#routePlanner) .stop-purchase strong {font-size:28px;line-height:1.2;margin-top:6px;} :where(#routePlanner) .stop-purchase strong small {font-size:18px;} :where(#routePlanner) .stop-price {font-size:11px;margin-top:6px;} :where(#routePlanner) .stop-map-link {margin:0;min-height:44px;font-size:12px;} :where(#routePlanner) .arrival-note {margin-top:0;padding-top:10px;font-size:12px;line-height:1.45;} :where(#routePlanner) .best-navigation {margin-top:12px;min-height:48px;font-size:13px;padding:12px;} :where(#routePlanner) .navigation-note {font-size:10px;margin-top:7px;} :where(#routePlanner) .mobile-results-nav {gap:10px;margin-top:10px;} :where(#routePlanner) .mobile-results-nav button {padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;gap:6px;} :where(#routePlanner) .route-review {padding:16px;} :where(#routePlanner) .review-heading h3 {font-size:22px;} :where(#routePlanner) .review-heading>p:last-child {font-size:13px;} :where(#routePlanner) .review-layout {gap:14px;margin-top:16px;} :where(#routePlanner) .route-choice-top {font-size:10px;} :where(#routePlanner) .route-tab {padding:11px 12px;} :where(#routePlanner) .route-name {font-size:15px;} :where(#routePlanner) .review-map-mount {height:220px;} :where(#routePlanner) .review-footer {margin-top:14px;} :where(#routePlanner) .station-card {padding:16px;} :where(#routePlanner) .alternative-heading {margin-bottom:16px;} :where(#routePlanner) .alternative-heading h3 {font-size:24px;} :where(#routePlanner) .option-label {margin-bottom:12px;} } @media (max-width:360px) { :where(#routePlanner) main {padding-inline:10px;} :where(#routePlanner) .planner-panel {padding:15px;} :where(#routePlanner) .best-station {padding:14px;} :where(#routePlanner) .stop-purchase strong {font-size:26px;} :where(#routePlanner) .stop-purchase span {font-size:10px;} :where(#routePlanner) .results-heading h2 {font-size:22px;} } :where(#routePlanner) #vehicleSetup>.divider {display:none;} :where(#routePlanner) #vehicleSetup {margin-top:22px;padding-top:20px;border-top:1px solid var(--line);} :where(#routePlanner) #roadSettings {margin-top:10px;} :where(#routePlanner) #roadSettings .route-options {margin:0 0 12px;} :where(#routePlanner) #reviewVehicleMount {max-width:620px;} :where(#routePlanner) .review-progress,:where(#routePlanner) #backToRoute,:where(#routePlanner) #continueFuelDock {display:none;} :where(#routePlanner) .fuel-step-help {font-size:13px;line-height:1.45;color:var(--muted);margin-bottom:16px;} :where(#routePlanner) .journey-details {border-top:1px solid var(--line);margin-top:6px;} :where(#routePlanner) .journey-details summary {min-height:44px;display:flex;align-items:center;color:var(--blue);font-size:12px;font-weight:600;} :where(#routePlanner) .journey-details .arrival-note {border:0;} :where(#routePlanner) .primary-action-dock {min-width:0;} :where(#routePlanner) .review-footer>.primary-action-dock {flex:1;} :where(#routePlanner) .review-footer #confirmRoute {width:100%;} @media(max-width:820px) { :where(#routePlanner) .review-progress {display:block;font-size:12px;font-weight:650;color:var(--blue);margin-bottom:12px;} body.is-reviewing-route :where(#routePlanner) #resultsSummary {display:none;} :where(#routePlanner) #routeComparison[data-step="route"] #vehicleForm,:where(#routePlanner) #routeComparison[data-step="route"] #calculateFuelDock {display:none;} :where(#routePlanner) #routeComparison[data-step="route"] #continueFuelDock {display:block;} :where(#routePlanner) #routeComparison[data-step="fuel"] .review-heading,:where(#routePlanner) #routeComparison[data-step="fuel"] .review-layout,:where(#routePlanner) #routeComparison[data-step="fuel"] #adjustRoute {display:none;} :where(#routePlanner) #routeComparison[data-step="fuel"] #backToRoute {display:inline-flex;min-height:44px;align-items:center;margin-bottom:8px;} :where(#routePlanner) #routeComparison[data-step="fuel"] #vehicleSetup {margin-top:0;padding-top:0;border-top:0;} :where(#routePlanner) #routeComparison[data-step="fuel"] .form-heading .step-number {display:none;} :where(#routePlanner) #routeComparison[data-step="fuel"] .primary-preferences {grid-template-columns:1fr;gap:14px;} :where(#routePlanner) #routeComparison[data-step="fuel"] .field:has(#fuelCode) {grid-row:1;} :where(#routePlanner) #routeComparison {padding-bottom:24px;} :where(#routePlanner) #vehicleForm input,:where(#routePlanner) #vehicleForm select,:where(#routePlanner) #vehicleForm summary {scroll-margin-bottom:120px;} :where(#routePlanner) main {padding-bottom:calc(110px + env(safe-area-inset-bottom));} :where(#routePlanner) .primary-action-dock {position:fixed;bottom:0;left:0;right:0;z-index:12;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px #17324f0b;} :where(#routePlanner) .primary-action-dock .primary-button {width:100%;margin:0!important;min-height:48px;} :where(#routePlanner) .planner-shell {overflow:visible;} :where(#routePlanner) .suggestions {scroll-padding-bottom:0;} :where(#routePlanner) .review-map-mount {height:170px;} :where(#routePlanner) .review-heading h3 {font-size:20px;} :where(#routePlanner) .review-heading .eyebrow {display:none;} :where(#routePlanner) .review-layout {margin-top:12px;gap:12px;} :where(#routePlanner) .route-tabs {gap:6px;} :where(#routePlanner) .route-tab {padding:9px 12px;} :where(#routePlanner) .review-footer {margin-top:8px;} :where(#routePlanner) #vehicleSetup {margin-top:16px;padding-top:16px;} :where(#routePlanner) #vehicleSetup .form-heading {margin-bottom:12px;} :where(#routePlanner) #vehicleSetup .secondary-preferences {margin-top:12px;} :where(#routePlanner) #vehicleSetup .secondary-preferences summary {min-height:44px;padding:7px 0;} :where(#routePlanner) .secondary-preferences summary small {display:none!important;} :where(#routePlanner) .recommendation-heading h3 {font-size:18px;} :where(#routePlanner) .stop-opening {font-size:11px;} :where(#routePlanner) .stop-purchase {margin-top:10px;} :where(#routePlanner) .best-station {padding-bottom:8px;} :where(#routePlanner) .results-heading {margin-bottom:8px;} :where(#routePlanner) .result-priority {padding-top:6px;padding-bottom:6px;} :where(#routePlanner) .priority-heading {margin-bottom:4px;} } /* Final polish: shared icon, field, selection and navigation treatments. */ :where(#routePlanner) .journey-progress {display:none;} :where(#routePlanner) .icon-button,:where(#routePlanner) .inside-button {border-radius:10px;} :where(#routePlanner) .inside-button {background:transparent;color:var(--accent);} :where(#routePlanner) .inside-button:hover,:where(#routePlanner) .icon-button:hover {background:#e4edfb;} :where(#routePlanner) .location-field input,:where(#routePlanner) .field select,:where(#routePlanner) .unit-input input {border-color:var(--line);border-radius:12px;} :where(#routePlanner) .location-field input:focus,:where(#routePlanner) .field select:focus,:where(#routePlanner) .unit-input input:focus {border-color:var(--accent);} :where(#routePlanner) .primary-button {border-radius:12px;box-shadow:none;} :where(#routePlanner) .route-tab {border-radius:14px;transition:border-color .15s,background .15s;} :where(#routePlanner) .route-tab.is-active {box-shadow:inset 0 0 0 1px var(--accent);border-color:var(--accent);background:#f0f5ff;} :where(#routePlanner) .route-selected-label {width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;flex:none;} :where(#routePlanner) .is-active .route-selected-label {background:var(--accent);border-color:var(--accent);color:#fff;} :where(#routePlanner) .route-selected-label .ui-icon {width:15px;height:15px;stroke-width:2.3;} :where(#routePlanner) .route-metrics {align-items:baseline;gap:12px;margin:5px 0 3px;font-variant-numeric:tabular-nums;} :where(#routePlanner) .route-metrics strong {font-size:22px;letter-spacing:-.035em;color:var(--ink);font-weight:700;} :where(#routePlanner) .route-metrics>span {font-size:13px;} :where(#routePlanner) .route-name {font-size:13px;font-weight:450;margin:0;color:var(--muted);} :where(#routePlanner) .stop-map-link {display:inline-flex;align-items:center;gap:8px;} :where(#routePlanner) #backToRoute {gap:6px;} :where(#routePlanner) #backToRoute .ui-icon {width:16px;height:16px;transform:rotate(180deg);} :where(#routePlanner) .navigation-dock {display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px;} :where(#routePlanner) .navigation-dock .navigation-app {display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;min-height:58px;margin:0;padding:9px 14px;border-radius:12px;line-height:1.3;text-align:left;} :where(#routePlanner) .navigation-app img {flex:none;object-fit:contain;} :where(#routePlanner) .navigation-app span {min-width:0;} :where(#routePlanner) .navigation-app strong,:where(#routePlanner) .navigation-app small {display:block;} :where(#routePlanner) .navigation-app strong {font-size:12px;font-weight:650;white-space:nowrap;} :where(#routePlanner) .navigation-app small {font-size:10px;font-weight:450;margin-top:3px;white-space:nowrap;} :where(#routePlanner) .best-navigation img {background:white;border-radius:6px;padding:2px;width:24px;height:24px;} @media(max-width:820px) { :where(#routePlanner) .brand img {width:108px;} :where(#routePlanner) main {padding-top:14px;} :where(#routePlanner) .journey-progress {display:block;margin-bottom:12px;} :where(#routePlanner) .journey-progress ol {display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;list-style:none;margin:0;padding:0;} :where(#routePlanner) .journey-progress li {display:flex;align-items:center;gap:5px;font-size:11px;font-weight:550;color:var(--muted);border-bottom:2px solid var(--line);padding:0 0 9px;white-space:nowrap;} :where(#routePlanner) .journey-progress li>span {width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#e7edf5;font-size:10px;flex:none;} :where(#routePlanner) .journey-progress [aria-current="step"] {color:var(--accent);font-weight:750;border-color:var(--accent);} :where(#routePlanner) .journey-progress [aria-current="step"]>span {background:var(--accent);color:white;} :where(#routePlanner) .journey-progress .is-complete {color:var(--blue);border-color:#a6bee5;} body.is-results-mode:not(.is-reviewing-route) :where(#routePlanner) .journey-progress {display:none;} :where(#routePlanner) .review-progress {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} :where(#routePlanner) .form-heading .step-number {display:none;} :where(#routePlanner) .results-heading {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;margin-bottom:12px;} :where(#routePlanner) .results-heading>div {display:contents;} :where(#routePlanner) .results-heading .eyebrow {display:none;} :where(#routePlanner) .results-heading h2 {font-size:21px;grid-column:1;grid-row:1;} :where(#routePlanner) #resultsSummary {grid-column:1/-1;grid-row:2;margin-top:0;} :where(#routePlanner) #editTrip {font-size:12px;padding:8px 0;min-height:44px;grid-column:2;grid-row:1;} :where(#routePlanner) .route-review,:where(#routePlanner) .planner-shell {border-radius:18px;} :where(#routePlanner) .route-tab {padding:11px 12px;} :where(#routePlanner) .route-choice-top {font-size:10px;} :where(#routePlanner) .route-name {font-size:12px;line-height:1.45;} :where(#routePlanner) .route-metrics strong {font-size:21px;} :where(#routePlanner) .review-heading h3 {font-size:20px;margin-top:0;} :where(#routePlanner) .review-heading>p:last-child {font-size:12px;} :where(#routePlanner) #routeComparison[data-step="fuel"] #backToRoute {margin:-8px 0 4px;font-size:12px;} :where(#routePlanner) #fuelStepTitle {font-size:20px;} :where(#routePlanner) #vehicleSetup .form-heading {margin-bottom:6px;} :where(#routePlanner) .fuel-step-help {font-size:12px;margin-bottom:18px;} :where(#routePlanner) .unit-input--large input {font-size:19px;} :where(#routePlanner) .location-actions {gap:8px;} :where(#routePlanner) #addVia,:where(#routePlanner) .choose-on-map {display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;line-height:1.25;} :where(#routePlanner) #addVia .ui-icon,:where(#routePlanner) .choose-on-map .ui-icon {width:17px;height:17px;} :where(#routePlanner) .primary-action-dock {box-shadow:0 -2px 12px #17324f05;border-top-color:#e5ebf3;} :where(#routePlanner) .navigation-dock {margin:0;} :where(#routePlanner) .navigation-dock .navigation-app {min-height:54px;} } @media(prefers-reduced-motion:reduce) {:where(#routePlanner) .route-tab {transition:none;}} :where(#routePlanner) #resultPriority[aria-busy="true"] button:disabled {opacity:1;} :where(#routePlanner) #resultPriority .is-pending {box-shadow:inset 0 0 0 2px var(--accent);} :where(#routePlanner) #resultPriority button {transition:background-color .16s,color .16s,box-shadow .16s;} :where(#routePlanner) #addVia {display:inline-flex;align-items:center;justify-content:flex-start;justify-self:start;gap:6px;min-height:44px;margin:-6px 0;} :where(#routePlanner) #addVia .ui-icon {width:17px;height:17px;} :where(#routePlanner) .via-add-action .map-hint {margin:2px 0 0;font-size:11px;} :where(#routePlanner) .location-actions {justify-content:flex-end;} :where(#routePlanner) #addVia:disabled {cursor:default;} :where(#routePlanner) .map-pick-tools {max-width:calc(100% - 32px);} :where(#routePlanner) .map-pick-buttons {flex-wrap:wrap;} :where(#routePlanner) .map-pick-buttons button {flex:1;padding-inline:8px;white-space:nowrap;} :where(#routePlanner) .map-via-points {display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} :where(#routePlanner) .map-via-points>span {display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;} :where(#routePlanner) .map-via-points button {border:0;min-height:44px;background:white;color:var(--blue);font-size:11px;padding:0 8px;} :where(#routePlanner) .map-via-points button[aria-pressed="true"] {background:var(--blue-soft);font-weight:700;} :where(#routePlanner) .map-via-points [data-via-remove] {min-width:36px;} @media(prefers-reduced-motion:reduce) {:where(#routePlanner) #resultPriority button {transition:none;}} /* Trip overview: compare the whole plan before opening individual purchases. */ :where(#routePlanner) .journey-progress {display:block;max-width:620px;margin-bottom:12px;} :where(#routePlanner) .journey-progress ol {display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;list-style:none;margin:0;padding:0;} :where(#routePlanner) .journey-progress li {padding:0;min-width:0;border-bottom:2px solid var(--line);color:var(--muted);} :where(#routePlanner) .journey-progress button {display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:4px 0;border:0;background:transparent;color:inherit;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap;} :where(#routePlanner) .journey-progress button span {width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#e7edf5;font-size:11px;flex:none;} :where(#routePlanner) .journey-progress button:disabled {opacity:.5;cursor:default;} :where(#routePlanner) .journey-progress button:focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;} :where(#routePlanner) .journey-progress [aria-current="step"] {color:var(--accent);border-color:var(--accent);} :where(#routePlanner) .journey-progress button[aria-current="step"] span {background:var(--accent);color:white;} body.is-results-mode:not(.is-reviewing-route) :where(#routePlanner) .journey-progress {display:block;} :where(#routePlanner) .detour-preference {margin:14px 0;padding:12px;border:1px solid #c9daf2;border-radius:12px;background:var(--blue-soft);} :where(#routePlanner) .detour-preference .field>span {font-size:13px;font-weight:700;color:var(--ink);} :where(#routePlanner) .detour-preference p {font-size:11px;color:var(--muted);line-height:1.45;margin:7px 0 0;} @media(max-width:820px){:where(#routePlanner) .journey-progress button{font-size:11px;}:where(#routePlanner) .journey-progress li{padding:0;}:where(#routePlanner) .detour-preference{margin:12px 0;padding:10px;}} :where(#routePlanner) #priorityStatus:empty {display:none;} :where(#routePlanner) #resultPriority button {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;white-space:normal;} :where(#routePlanner) .priority-mode {font-size:12px;font-weight:650;} :where(#routePlanner) .priority-cost {font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15;} :where(#routePlanner) .priority-detail {font-size:10px;font-weight:450;white-space:normal;line-height:1.35;} :where(#routePlanner) .trip-via-summary {font-size:12px;color:var(--muted);margin-top:4px;} :where(#routePlanner) .trip-via-summary:empty {display:none;} :where(#routePlanner) .best-station {border-top:1px solid var(--line);box-shadow:none;padding:20px;} :where(#routePlanner) .plan-budget {border-bottom:1px solid var(--line);padding-bottom:12px;} :where(#routePlanner) .plan-budget-top {display:flex;justify-content:space-between;align-items:center;gap:14px;} :where(#routePlanner) .plan-budget-top>span {font-size:13px;max-width:150px;font-weight:650;} :where(#routePlanner) .plan-budget-top>strong {font-size:34px;font-weight:750;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums;} :where(#routePlanner) .plan-budget-meta {font-size:12px;color:var(--muted);margin-top:4px;} :where(#routePlanner) #planDifference {font-size:12px;color:var(--blue);margin-top:8px;line-height:1.5;} :where(#routePlanner) .cost-explanation summary,:where(#routePlanner) .navigation-details summary {font-size:12px;color:var(--blue);font-weight:650;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;} :where(#routePlanner) .cost-explanation summary::after,:where(#routePlanner) .navigation-details summary::after {content:'⌄';margin-left:auto;} :where(#routePlanner) .cost-explanation p,:where(#routePlanner) .navigation-details p {font-size:12px;color:var(--muted);margin:4px 0 12px;line-height:1.55;} :where(#routePlanner) .stops-heading {font-size:16px;margin:16px 0 8px;} :where(#routePlanner) .stops-heading>span {display:block;font-size:11px;font-weight:450;color:var(--muted);margin-top:3px;} :where(#routePlanner) .plan-stop {padding:0!important;border-bottom:1px solid var(--line);} :where(#routePlanner) .plan-stop+.plan-stop {margin-top:0;border-top:0;} :where(#routePlanner) .arrival-calculation {padding-bottom:12px;} :where(#routePlanner) .arrival-calculation p {margin:0 0 8px;line-height:1.5;} :where(#routePlanner) .arrival-calculation .calculation-heading {margin:12px 0 8px;font-size:12px;} :where(#routePlanner) .calculation-settings {display:grid;grid-template-columns:1fr 1fr;gap:8px;} :where(#routePlanner) .calculation-setting {display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:56px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--blue-soft);color:var(--ink);text-align:left;cursor:pointer;} :where(#routePlanner) .calculation-setting>span {min-width:0;font-size:11px;} :where(#routePlanner) .calculation-setting strong {display:block;font-size:13px;margin-top:3px;} :where(#routePlanner) .calculation-setting small {font-size:10px;color:var(--blue);} :where(#routePlanner) .calculation-setting:last-child {grid-column:1/-1;} :where(#routePlanner) .calculation-setting:hover {border-color:var(--blue);} :where(#routePlanner) .calculation-setting:focus-visible {outline:2px solid var(--accent);outline-offset:2px;} :where(#routePlanner) .consumption-field>label {font-size:13px;font-weight:650;} :where(#routePlanner) #resetConsumption {font-size:11px;text-align:left;min-height:44px;} :where(#routePlanner) #fuelConsumptionHint {font-size:12px;color:var(--muted);} @media(max-width:360px){:where(#routePlanner) .calculation-settings{grid-template-columns:1fr;}} :where(#routePlanner) .fit-points {position:absolute;top:14px;left:14px;z-index:3;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;font-weight:650;} :where(#routePlanner) .planner-shell .map-overlay--top,body.is-results-mode :where(#routePlanner) .fit-points {display:none;} body.is-planner-map-open :where(#routePlanner) .fit-points {top:68px;} :where(#routePlanner) .stop-row {display:flex;align-items:center;gap:9px;min-height:80px;cursor:pointer;list-style:none;padding:12px 0;} :where(#routePlanner) .stop-row::-webkit-details-marker {display:none;} :where(#routePlanner) .stop-number {display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;color:var(--blue);background:var(--blue-soft);flex:none;} :where(#routePlanner) .stop-row .station-logo {width:32px;height:32px;border-radius:8px;} :where(#routePlanner) .station-logo.is-missing {background:var(--blue-soft);border:1px solid var(--line);} :where(#routePlanner) .station-logo-fallback {font-size:12px;} :where(#routePlanner) .stop-row-place {min-width:0;flex:1;} :where(#routePlanner) .stop-row-place>strong {display:block;font-size:14px;font-weight:650;overflow-wrap:anywhere;} :where(#routePlanner) .stop-row-place>small {display:block;font-size:10px;color:var(--muted);line-height:1.45;margin-top:3px;overflow-wrap:anywhere;} :where(#routePlanner) .stop-row-purchase {flex:none;text-align:right;font-variant-numeric:tabular-nums;} :where(#routePlanner) .stop-row-purchase strong {font-size:15px;display:block;white-space:nowrap;} :where(#routePlanner) .stop-row-purchase small {font-size:11px;color:var(--muted);display:block;} :where(#routePlanner) .stop-row-chevron {font-size:15px;color:var(--blue);} :where(#routePlanner) .plan-stop[open] .stop-row-chevron {transform:rotate(180deg);} :where(#routePlanner) .stop-details {padding:0 0 12px 29px;} :where(#routePlanner) .stop-details .stop-opening {margin:0 0 8px;} :where(#routePlanner) .stop-details .stop-purchase {margin-top:10px;padding:10px;} :where(#routePlanner) .stop-details .stop-purchase span {min-height:0;font-size:11px;} :where(#routePlanner) .stop-details .stop-purchase strong {font-size:22px;} :where(#routePlanner) .stop-leg,:where(#routePlanner) .stop-address {font-size:11px;color:var(--muted);} :where(#routePlanner) .navigation-details {border-top:1px solid var(--line);} :where(#routePlanner) .navigation-segments {list-style:none;padding:0;margin:0;} :where(#routePlanner) .navigation-segments li {margin-bottom:14px;} :where(#routePlanner) .navigation-segments .secondary-button {font-size:12px;width:100%;} :where(#routePlanner) .via-reorder {position:absolute;top:-9px;right:0;display:flex;gap:2px;} :where(#routePlanner) .via-reorder button {width:44px;min-height:36px;border:0;background:transparent;color:var(--blue);border-radius:8px;} :where(#routePlanner) .via-reorder button:disabled {opacity:.25;cursor:default;} :where(#routePlanner) .location-field--via {padding-top:1px;} :where(#routePlanner) .map-via-points>span {max-width:100%;} :where(#routePlanner) .map-via-points [data-via-select] {max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media(max-width:820px) { :where(#routePlanner) #tripViaSummary {grid-column:1/-1;grid-row:2;margin:2px 0 4px;} :where(#routePlanner) #resultsSummary {grid-row:3;font-size:11px;} :where(#routePlanner) .journey-route-line {padding-bottom:6px;margin-bottom:4px;} :where(#routePlanner) .best-station {padding:14px;} :where(#routePlanner) .results-primary {padding-top:8px;} :where(#routePlanner) .priority-heading {font-size:11px;} :where(#routePlanner) .priority-heading span {font-size:9px;} :where(#routePlanner) #resultPriority button {padding:8px 3px;min-height:78px;gap:4px;} :where(#routePlanner) .priority-mode {font-size:11px;} :where(#routePlanner) .priority-cost {font-size:18px;} :where(#routePlanner) .priority-detail {font-size:9px;} :where(#routePlanner) .plan-budget-top>strong {font-size:30px;} :where(#routePlanner) .plan-budget-top>span {font-size:12px;max-width:125px;} :where(#routePlanner) .plan-budget-meta {font-size:11px;} :where(#routePlanner) #planDifference {font-size:11px;} :where(#routePlanner) .stop-row {gap:6px;min-height:66px;padding:10px 0;} :where(#routePlanner) .plan-budget {padding-bottom:6px;} :where(#routePlanner) .stop-row .station-logo {width:28px;height:28px;} :where(#routePlanner) .stop-row-place>strong {font-size:13px;} :where(#routePlanner) .stop-row-purchase strong {font-size:14px;} :where(#routePlanner) .navigation-app small {font-size:9px;} } /* Mobile review: useful information first, with a quieter shared visual system. */ :where(#routePlanner) .planner-shell>.map-panel .ol-zoom {top:14px!important;bottom:auto!important;right:14px;} :where(#routePlanner) .planner-shell>.map-panel .map-pick-tools {max-height:55%;overflow:auto;} :where(#routePlanner) .via-summary {display:none;} :where(#routePlanner) .location-field--via.is-set:not(.is-editing) {display:flex;align-items:center;gap:4px;padding:0;border-bottom:1px solid var(--line);} :where(#routePlanner) .location-field--via.is-set:not(.is-editing)>label,:where(#routePlanner) .location-field--via.is-set:not(.is-editing) input,:where(#routePlanner) .location-field--via.is-set:not(.is-editing) .via-reorder {display:none;} :where(#routePlanner) .location-field--via.is-set:not(.is-editing) .via-summary {display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:48px;padding:6px 0;border:0;background:transparent;text-align:left;} :where(#routePlanner) .via-summary strong {flex:1;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;} :where(#routePlanner) .via-summary .ui-icon {width:17px;height:17px;color:var(--blue);} :where(#routePlanner) .via-number {width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:12px;flex:none;} :where(#routePlanner) .location-field--via.is-set:not(.is-editing) .input-actions {flex:none;width:44px;height:44px;} :where(#routePlanner) .location-field--via.is-set:not(.is-editing) .remove-via {position:static;background:transparent;} :where(#routePlanner) .via-reorder button {min-height:44px;} :where(#routePlanner) .via-reorder .ui-icon {width:18px;height:18px;} :where(#routePlanner) .via-add-action.is-full #addVia {display:none;} :where(#routePlanner) .via-add-action .map-hint {font-size:12px;} :where(#routePlanner) .vehicle-summary {display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:13px;font-weight:500;border-bottom:1px solid var(--line);} :where(#routePlanner) .vehicle-summary span {min-width:0;overflow-wrap:anywhere;} :where(#routePlanner) .vehicle-summary .ui-icon {width:17px;height:17px;} :where(#routePlanner) .detour-preference .field>span {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;} :where(#routePlanner) #detourHeading small {font-size:12px;color:var(--muted);font-weight:400;} :where(#routePlanner) .detour-preference p {font-size:12px;} :where(#routePlanner) .route-metadata {flex:1;min-width:0;} :where(#routePlanner) .route-metadata summary {min-height:44px;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;} :where(#routePlanner) .route-metadata summary::after {content:'⌄';color:var(--blue);} :where(#routePlanner) .route-metadata p {max-width:none!important;font-size:12px!important;margin:0 0 8px;} :where(#routePlanner) .priority-detail {font-size:11px;} :where(#routePlanner) .priority-detail span {display:block;} :where(#routePlanner) .priority-heading,:where(#routePlanner) .priority-heading span {font-size:12px;} :where(#routePlanner) .plan-budget-top>span {font-size:14px;max-width:170px;} :where(#routePlanner) .plan-budget-top small {display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:3px;} :where(#routePlanner) #planDifference {font-size:13px;line-height:1.4;} :where(#routePlanner) .stops-heading {font-size:16px;margin:12px 0 0;} :where(#routePlanner) .stop-row-place>small,:where(#routePlanner) .stop-row-purchase small,:where(#routePlanner) .stop-leg,:where(#routePlanner) .stop-address {font-size:12px;} :where(#routePlanner) .stop-row-place>strong {font-size:15px;} :where(#routePlanner) .stop-row-purchase strong {font-size:16px;} :where(#routePlanner) .cost-explanation {margin-top:4px;} :where(#routePlanner) .cost-explanation summary,:where(#routePlanner) .navigation-details summary {font-size:13px;} :where(#routePlanner) .calculation-settings {grid-template-columns:1fr;gap:0;} :where(#routePlanner) .calculation-setting {border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:9px 0;min-height:48px;} :where(#routePlanner) .calculation-setting>span {display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex:1;flex-wrap:wrap;font-size:12px;} :where(#routePlanner) .calculation-setting strong {font-size:14px;margin:0;} :where(#routePlanner) .calculation-setting .ui-icon {width:16px;height:16px;color:var(--blue);} :where(#routePlanner) .calculated-liters {font-size:12px;} :where(#routePlanner) .option-itinerary summary {min-height:44px;display:flex;align-items:center;color:var(--blue);font-size:13px;} :where(#routePlanner) .option-itinerary summary::after {content:'⌄';margin-left:auto;} :where(#routePlanner) .option-itinerary ol {padding-left:20px;margin:0 0 10px;font-size:13px;color:var(--muted);} :where(#routePlanner) .option-itinerary li {padding:4px 0;} :where(#routePlanner) .option-itinerary .is-changed {color:var(--ink);font-weight:600;} :where(#routePlanner) .navigation-selector select {width:100%;min-height:44px;padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;font-size:13px;text-overflow:ellipsis;} :where(#routePlanner) .navigation-selector {min-width:0;} :where(#routePlanner) .navigation-app strong {font-size:14px;} :where(#routePlanner) .navigation-app small {font-size:12px;} @media(max-width:820px) { :where(#routePlanner) main {padding-top:8px;padding-bottom:calc(152px + env(safe-area-inset-bottom));} :where(#routePlanner) .journey-progress {margin-bottom:6px;} :where(#routePlanner) .journey-progress button {font-size:12px;gap:4px;} :where(#routePlanner) .planner-panel {padding:16px;} :where(#routePlanner) .form-heading {margin-bottom:10px;} :where(#routePlanner) .location-stack {gap:10px;} :where(#routePlanner) .results-heading {margin-bottom:0;gap:0 8px;} :where(#routePlanner) .results-heading h2 {font-size:20px;} body.is-results-mode:not(.is-reviewing-route) :where(#routePlanner) #resultsSummary {display:none;} :where(#routePlanner) #tripViaSummary {font-size:12px;margin:0;} :where(#routePlanner) .journey-route-line {margin:0;padding:0;border-bottom:0;gap:6px;} :where(#routePlanner) .route-metadata summary {font-size:12px;line-height:1.4;} :where(#routePlanner) .journey-route-line button {font-size:12px;} :where(#routePlanner) .result-priority {padding:4px 0 6px;margin:0;box-shadow:none;} :where(#routePlanner) .priority-heading {font-size:12px;margin-bottom:4px;} :where(#routePlanner) .priority-heading span {font-size:12px;} :where(#routePlanner) #resultPriority {max-width:none;gap:2px;padding:3px;border-radius:12px;} :where(#routePlanner) #resultPriority button {padding:6px 2px;gap:2px;min-height:82px;} :where(#routePlanner) .priority-mode {font-size:12px;} :where(#routePlanner) .priority-cost {font-size:18px;} :where(#routePlanner) .priority-detail {font-size:11px;line-height:1.3;} :where(#routePlanner) .results-primary {padding-top:10px;} :where(#routePlanner) .best-station {padding:12px;border-radius:12px;} :where(#routePlanner) .plan-budget {padding-bottom:10px;} :where(#routePlanner) .plan-budget-top {gap:8px;} :where(#routePlanner) .plan-budget-top>span {font-size:13px;max-width:145px;} :where(#routePlanner) .plan-budget-top>strong {font-size:28px;} :where(#routePlanner) #planDifference {font-size:11px;margin-top:6px;} :where(#routePlanner) .stop-row {display:grid;grid-template-columns:34px minmax(0,1fr) auto 10px;gap:7px;min-height:76px;padding:10px 0;} :where(#routePlanner) .stop-row .station-logo {display:inline-flex;grid-column:1;grid-row:1;width:32px;height:32px;} :where(#routePlanner) .stop-row .stop-number {grid-column:1;grid-row:1;align-self:center;justify-self:start;transform:translate(-4px,17px);z-index:1;width:18px;height:18px;border:2px solid #fff;font-size:10px;} :where(#routePlanner) .stop-row-place {grid-column:2;grid-row:1;} :where(#routePlanner) .stop-row-purchase {grid-column:3;grid-row:1;} :where(#routePlanner) .stop-row-chevron {grid-column:4;grid-row:1;} :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:16px;} :where(#routePlanner) .stop-opening {font-size:12px;} :where(#routePlanner) .stop-details {padding-left:0;} :where(#routePlanner) .stop-details .stop-purchase span {font-size:12px;} :where(#routePlanner) .alternative-heading {margin:12px 0;} :where(#routePlanner) .alternative-heading h3 {font-size:21px;margin:0 0 4px;} :where(#routePlanner) .alternative-heading>p:last-child {font-size:13px;} :where(#routePlanner) .station-card {padding:14px;border-radius:12px;} :where(#routePlanner) .option-identity {margin:8px 0;} :where(#routePlanner) .option-identity h4 {font-size:18px;} :where(#routePlanner) .option-identity p,:where(#routePlanner) .option-summary,:where(#routePlanner) .option-opening {font-size:13px;} :where(#routePlanner) .option-difference {margin-top:10px;padding-top:10px;} :where(#routePlanner) .option-difference strong {font-size:23px;} :where(#routePlanner) .option-difference span {font-size:13px;} :where(#routePlanner) .navigation-dock {gap:5px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));} :where(#routePlanner) .navigation-dock .navigation-app {min-height:48px;} :where(#routePlanner) .navigation-dock:has(.navigation-selector) .best-navigation small {display:none;} :where(#routePlanner) .navigation-app strong {font-size:14px;} :where(#routePlanner) .navigation-app small {font-size:12px;} :where(#routePlanner) #routeComparison[data-step="fuel"] #backToRoute {display:none;} :where(#routePlanner) .fuel-step-help {margin-bottom:10px;font-size:13px;} :where(#routePlanner) #routeComparison[data-step="fuel"] .primary-preferences {gap:10px;} :where(#routePlanner) .review-map-mount {height:220px;} :where(#routePlanner) .map-pick-tools {font-size:13px;} :where(#routePlanner) .map-via-points button {font-size:12px;} :where(#routePlanner) .arrival-calculation {padding-top:10px;padding-bottom:6px;} :where(#routePlanner) .arrival-calculation p {font-size:12px;line-height:1.4;margin-bottom:4px;} :where(#routePlanner) .arrival-calculation .calculation-heading {font-size:11px;margin:8px 0 2px;} :where(#routePlanner) .calculation-settings {grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;} :where(#routePlanner) .calculation-setting {min-height:48px;padding:6px 0;gap:5px;} :where(#routePlanner) .calculation-setting>span {display:block;font-size:11px;} :where(#routePlanner) .calculation-setting strong {font-size:13px;line-height:1.3;margin-top:2px;} :where(#routePlanner) .calculation-setting:last-child {min-height:44px;} :where(#routePlanner) .calculation-setting:last-child>span {display:flex;align-items:center;justify-content:space-between;gap:6px;} :where(#routePlanner) .calculation-setting:last-child strong {margin:0;} } @media(max-width:360px) { :where(#routePlanner) .journey-progress ol {gap:4px;} :where(#routePlanner) .journey-progress button span {width:18px;height:18px;} :where(#routePlanner) .results-heading h2 {font-size:19px;} :where(#routePlanner) .plan-budget-top>strong {font-size:27px;} :where(#routePlanner) .stop-row {gap:5px;} } /* Quieter selection and a single, consistent navigation surface. */ :where(#routePlanner) .priority-sentinel {height:1px;margin-bottom:-1px;pointer-events:none;} :where(#routePlanner) #resultPriority {background:#fff;border-color:var(--line);} :where(#routePlanner) #resultPriority button[aria-pressed="true"] {background:var(--blue-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--blue);} :where(#routePlanner) #resultPriority button[aria-pressed="true"] .priority-cost {color:var(--accent);} :where(#routePlanner) #resultPriority button {position:relative;} :where(#routePlanner) #resultPriority button[aria-pressed="true"]::after {content:'✓';position:absolute;top:-3px;right:-2px;display:grid;place-items:center;width:14px;height:14px;border:2px solid white;border-radius:50%;background:var(--accent);color:white;font-size:8px;line-height:1;} :where(#routePlanner) .arrival-summary {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 8px;} :where(#routePlanner) .arrival-summary>span {font-size:12px;} :where(#routePlanner) .arrival-summary>strong {font-size:14px;white-space:nowrap;} :where(#routePlanner) .arrival-summary small {font-size:12px;color:var(--muted);font-weight:400;} :where(#routePlanner) .arrival-calculation {border-top:0;padding-top:8px;padding-bottom:8px;} :where(#routePlanner) .calculation-settings {grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin-top:6px;padding:0 10px;border:1px solid #e0e8f1;border-radius:10px;background:#f6f9fd;} :where(#routePlanner) .calculation-setting {border:0;border-radius:6px;min-height:50px;padding:6px 0;color:var(--muted);} :where(#routePlanner) .calculation-setting>span {display:block;font-size:11px;} :where(#routePlanner) .calculation-setting strong {display:flex;align-items:center;gap:6px;margin-top:2px;font-size:13px;line-height:1.3;color:var(--blue);text-decoration:none;font-weight:600;} :where(#routePlanner) .calculation-setting strong .ui-icon {width:14px;height:14px;flex:none;} :where(#routePlanner) .calculation-setting:hover {background:#eaf1fb;} :where(#routePlanner) .calculation-setting:hover strong,:where(#routePlanner) .calculation-setting:focus-visible strong {color:var(--accent);} :where(#routePlanner) .calculation-setting:active {background:#e1ecfa;} :where(#routePlanner) .calculation-setting:last-child {min-height:44px;border-top:1px solid #e0e8f1;border-radius:0;} :where(#routePlanner) .calculation-setting:last-child>span {display:flex;align-items:center;justify-content:space-between;gap:6px;} :where(#routePlanner) .calculation-setting:last-child strong {margin:0;} :where(#routePlanner) .navigation-details {border-top:1px solid var(--line);} :where(#routePlanner) .navigation-selector select {border:0;border-radius:0;background:transparent;padding-left:0;color:var(--muted);font-size:13px;} :where(#routePlanner) .mobile-results-nav {gap:16px;margin-top:8px;} :where(#routePlanner) .mobile-results-nav button {justify-content:flex-start;gap:7px;padding:6px 0;min-height:44px;border:0;background:transparent;border-radius:0;font-size:12px;} :where(#routePlanner) .mobile-results-nav .ui-icon {width:18px;height:18px;} @media(max-width:820px){ :where(#routePlanner) .result-priority {margin-bottom:var(--priority-reserved-gap,0px);} :where(#routePlanner) .result-priority.is-compact .priority-heading {display:none;} :where(#routePlanner) .result-priority.is-compact #resultPriority button {min-height:49px;padding:5px 2px;} :where(#routePlanner) .result-priority.is-compact .priority-cost {font-size:16px;} :where(#routePlanner) .result-priority.is-compact .priority-detail {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} :where(#routePlanner) .result-priority.is-compact {padding-top:4px;padding-bottom:4px;} :where(#routePlanner) .arrival-calculation p.arrival-summary {margin-bottom:4px;} :where(#routePlanner) .arrival-calculation {padding-top:8px;padding-bottom:8px;} :where(#routePlanner) .navigation-dock {gap:0;padding-top:2px;} :where(#routePlanner) .navigation-selector select {min-height:44px;} :where(#routePlanner) .mobile-results-nav button {font-size:12px;white-space:nowrap;} } /* Whole journey first. Segments are a clearly explained compatibility fallback. */ :where(#routePlanner) .navigation-dock--complete .navigation-app {min-height:62px;padding:10px 14px;gap:12px;border:1px solid #1559af;border-radius:12px;box-shadow:0 3px 8px #17324f12;} :where(#routePlanner) .navigation-dock--complete .navigation-app img {width:36px;height:36px;padding:5px;background:white;border-radius:9px;} :where(#routePlanner) .navigation-dock--complete .navigation-app>span {flex:1;min-width:0;} :where(#routePlanner) .navigation-dock--complete .navigation-app strong {font-size:15px;line-height:1.25;font-weight:650;white-space:normal;} :where(#routePlanner) .navigation-dock--complete .navigation-app small {display:block;font-size:12px;line-height:1.3;margin-top:3px;font-weight:400;opacity:.9;} :where(#routePlanner) .navigation-dock--complete .navigation-app>.ui-icon {width:18px;height:18px;opacity:.85;} :where(#routePlanner) .navigation-dock--complete .navigation-app:hover {background:#195fb9;box-shadow:0 4px 12px #17324f20;} :where(#routePlanner) .navigation-dock--complete .navigation-app:active {background:#1554a5;} :where(#routePlanner) .maps-compatibility {font-size:11px;line-height:1.4;color:var(--muted);margin:7px 0 0;text-align:left;} :where(#routePlanner) .maps-fallback {display:flex;align-items:center;gap:7px;min-height:44px;width:100%;font-size:12px;padding:6px 0;} :where(#routePlanner) .maps-fallback .ui-icon {width:16px;height:16px;} :where(#routePlanner) .maps-fallback small {margin-left:auto;color:var(--muted);font-size:11px;font-weight:400;} :where(#routePlanner) .navigation-details {scroll-margin-bottom:170px;scroll-margin-top:calc(var(--priority-height,66px) + 12px);} @media(max-width:820px){ :where(#routePlanner) .navigation-dock--complete {padding-top:8px;padding-bottom:calc(4px + env(safe-area-inset-bottom));} :where(#routePlanner) .navigation-dock--complete .navigation-app {min-height:60px;} :where(#routePlanner) .navigation-dock--complete .navigation-app strong {font-size:14px;} body.is-results-mode:not(.is-reviewing-route) :where(#routePlanner) main {padding-bottom:calc(180px + env(safe-area-inset-bottom));} } /* Keep calculation accessible at desktop widths, including the 821px breakpoint. */ @media (min-width:821px) { body.is-reviewing-route :where(#routePlanner) main {padding-bottom:110px;} body.is-reviewing-route :where(#routePlanner) #calculateFuelDock { position:fixed;left:0;right:0;bottom:0;z-index:12; padding:12px 24px calc(12px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px #17324f0b; } body.is-reviewing-route :where(#routePlanner) #calculateFuelDock #confirmRoute, body.is-reviewing-route :where(#routePlanner) #calculateFuelDock #planLoading { width:100%;max-width:560px;margin:0 auto;min-height:48px; } body.is-reviewing-route :where(#routePlanner) #calculateFuelDock #confirmRoute {display:flex;} } :where(#routePlanner) .form-error {scroll-margin-block:24px 120px;}