/* The planner's new look (public/plan.php?ui=next): sent with the new look only, after plan.css, whose rules for the map, the layers, the lists, the toast and the
   dialog it shares. Everything here is under .plan.next. Sizes in rem; sides written as start and end (tests/plan-css-test.js holds that, and the contrast of every
   colour of type: the site's tokens, --ink 16:1, --ink-soft 8.9:1, --pine 9.6:1 on the paper, never the lighter --muted). The profile and its chart are not mirrored in a
   right-to-left page (a route's distance always runs one way): .plan-dock-chart is direction: ltr.

   Wide (861px and over, and a phone lying on its side): the panel on the inline-start side, the map beside it with the profile docked under it. A phone upright
   (860px and under) has the map full screen and a sheet over its foot: assets/css/plan-phone.css, plan/sheet.js. */

/* ---- both widths ---- */
.plan.next { --plan-w: clamp(340px, 28vw, 440px); --dock-chart-h: 116px; }
.plan.next .plan-title { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.005em; color: var(--ink); }
.plan.next .plan-tabpanel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the journey: compact */
.plan.next .plan-head { padding: 12px 16px 4px; }
.plan.next .plan-mode { margin-bottom: 6px; }
.plan.next .plan-mode button { padding: 6px 8px; }
.plan.next .plan-profile { gap: 4px; margin-bottom: 8px; }
.plan.next .plan-profile button { flex: 1 1 auto; padding: 5px 9px; font-size: .82rem; }
.plan.next .plan-tripmode { margin-bottom: 8px; }
.plan.next .plan-trip { margin-bottom: 8px; }
.plan.next .plan-search label { padding-top: 5px; color: var(--ink-soft); }
.plan.next .plan-search input { padding-bottom: 6px; }
.plan.next .plan-vias { margin: -2px 0 8px; font-size: .8rem; color: var(--ink-soft); }
.plan.next .plan-loop { margin: -2px 0 8px; }

/* the journey, folded to one line in a short window once there is a route (the button is only there then) */
.plan.next .plan-journey-sum { display: none; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
                               font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); text-align: start; cursor: pointer; }
.plan.next .plan-journey-sum span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan.next .plan-journey-sum:hover { background: var(--paper-2); }
.plan.next .plan-journey-sum:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-head.is-open .plan-journey-sum .chev { transform: rotate(180deg); }

/* the figures: one strip that stays; the empty state until there is a route */
.plan.next .plan-stats { padding: 8px 16px 10px; border-block: 1px solid var(--line); background: var(--paper); }
.plan.next .plan-empty { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.plan.next .plan-empty .touch { display: none; }
.plan.next .plan-edit .lbl-m { display: none; }
/* (min-content, not 0, so that a long figure in another language, "3 Std. 21 Min.", "3 שע׳ 21 דק׳", keeps its box: the other columns give way; where every figure fits the four are equal, as before) */
.plan.next .plan-figures { grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: 6px; margin: 0 0 6px; }
.plan.next.paddling .plan-figures { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
.plan.next .plan-figures li { padding: 6px 6px; background: var(--card); border-color: var(--line); }
.plan.next .plan-figures b { font-size: .98rem; line-height: 1.3; white-space: nowrap; }
.plan.next .plan-figures span { font-size: .72rem; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink-soft); }
.plan.next .plan-offpath { display: inline-block; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.plan.next .plan-offpath[hidden] { display: none; }
.plan.next .plan-stats-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .8rem; }
.plan.next .plan-stats-more button { font-size: .8rem; font-weight: 500; }
.plan.next .plan-time-note { margin: 4px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.plan.next .plan-time-note[hidden] { display: none; }
.plan.next .plan-status { min-height: 0; margin: 4px 0 0; font-size: .84rem; line-height: 1.4; color: var(--ink-soft); }
.plan.next .plan-status.error { color: var(--finish); }
.plan.next .plan-status:empty { display: none; }
.plan.next:not(.has-route) .plan-figures, .plan.next:not(.has-route) .plan-stats-more, .plan.next:not(.has-route) .plan-time-note, .plan.next:not(.has-route) .plan-offpath { display: none; }
.plan.next.has-route .plan-empty { display: none; }

/* the tabs */
.plan.next .plan-tablist { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.plan.next .plan-tablist [role="tab"] { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 5px 8px; border: 0; border-bottom: 3px solid transparent; background: none;
                                       font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.plan.next .plan-tablist [role="tab"][hidden] { display: none; }
.plan.next .plan-tablist [role="tab"]:hover { color: var(--pine); }
.plan.next .plan-tablist [role="tab"][aria-selected="true"] { color: var(--pine); border-bottom-color: var(--pine); }
.plan.next .plan-tablist [role="tab"]:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; border-radius: 4px; }
.plan.next .plan-badge { min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--pine); color: #fff; font-size: .72rem; line-height: 1.55; text-align: center; font-variant-numeric: tabular-nums; }
.plan.next .plan-badge[hidden] { display: none; }
.plan.next .plan-tabpanel { padding: 12px 16px 16px; }
.plan.next .plan-tabpanel:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
.plan.next .plan-tabpanel > .plan-section:first-child, .plan.next .plan-tabpanel > .plan-profile-note:first-child { margin-top: 0; }
.plan.next .plan-profile-note { margin: 0 0 10px; font-size: .86rem; color: var(--ink-soft); min-height: 0; }
.plan.next .plan-profile-note:empty { display: none; }
.plan.next .plan-paddle-caveat { margin: 0 0 12px; }
.plan.next .plan-along > h2 { display: none; }
.plan.next .plan-steepest { color: var(--ink-soft); }
.plan.next .plan-section h2 { color: var(--ink-soft); }
.plan.next .plan-list li.muted, .plan.next .plan-stays li.muted { color: var(--ink-soft); }
.plan.next .plan-about { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan.next .plan-legal { font-size: .78rem; }
.plan.next:not(.has-route) .plan-tablist { display: none; }
.plan.next:not(.has-route) .plan-tabpanel:not(#plan-panel-route) { display: none; }
.plan.next:not(.has-route) #plan-panel-route { display: block; }
.plan.next:not(.has-route) .plan-dock { display: none; }

/* the foot: the app button and Share */
.plan.next .plan-actions { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: none; }
.plan.next .plan-actions[hidden] { display: none; }
.plan.next .plan-actions .primary { flex: 1 1 auto; min-width: 0; padding: 9px 10px; font-size: .9rem; line-height: 1.25; text-align: center; text-wrap: balance; }
.plan.next .plan-share { position: relative; flex: none; }
.plan.next .plan-sharebtn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.plan.next .plan-sharebtn:hover { background: var(--paper-2); }
.plan.next .plan-sharebtn:disabled { opacity: .45; cursor: default; }
.plan.next .plan-sharebtn[aria-expanded="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.plan.next .plan-sharebtn:focus-visible, .plan.next .plan-menu button:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .chev { flex: none; }
.plan.next .plan-sharemenu { inset-block-end: calc(100% + 6px); inset-inline-end: 0; min-width: 230px; }

/* menus: Avoid, More, Share */
.plan.next .plan-menuwrap { position: relative; }
.plan.next .plan-menu { position: absolute; z-index: 30; display: grid; gap: 1px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-2); }
.plan.next .plan-menu[hidden] { display: none; }
.plan.next .plan-menuwrap .plan-menu { inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-width: 190px; }
.plan.next .plan-menu button { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 7px; background: none;
                               font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); text-align: start; cursor: pointer; white-space: nowrap; }
.plan.next .plan-menu button svg { flex: none; color: var(--ink-soft); }
.plan.next .plan-menu button:hover { background: var(--paper-2); }
.plan.next .plan-menu button:disabled { opacity: .45; cursor: default; background: none; }
.plan.next .plan-menu button[hidden] { display: none; }
.plan.next .plan-menu button[aria-pressed="true"] { background: var(--finish); color: #fff; }
.plan.next .plan-menu button[aria-pressed="true"] svg { color: #fff; }

/* the bar on the map: one line */
.plan.next .plan-edit { flex-wrap: nowrap; gap: 0; }
.plan.next .plan-edit .plan-tgroup + .plan-tgroup { margin-inline-start: 4px; padding-inline-start: 4px; border-inline-start: 1px solid var(--line); }
.plan.next .plan-edit .lbl { display: none; }
.plan.next .plan-edit button:not(:has(span)) { padding: 0 8px; }
.plan.next .plan-edit .plan-tgroup-help { margin-inline-start: 4px; }
.plan.next .plan-edit .plan-menubtn { padding-inline: 8px 6px; }
.plan.next .plan-edit .plan-menubtn.is-on { background: var(--finish); color: #fff; }
.plan.next .plan-edit .plan-menubtn.is-on svg { color: #fff; }
.plan.next .plan-switch { gap: 7px; }
.plan.next .plan-switch-track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px; background: #767a70; }
.plan.next .plan-switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s ease; }
.plan.next .plan-switch[aria-checked="true"] .plan-switch-track { background: var(--pine); }
.plan.next .plan-switch[aria-checked="true"] .plan-switch-track::after { inset-inline-start: 14px; }
.plan.next .plan-switch:hover .plan-switch-track { filter: brightness(1.1); }
.plan.next .plan-edit button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.plan.next .plan-help-pop { width: 360px; }
.plan.next .plan-keys-title { margin: 8px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.plan.next .plan-keys { display: grid; gap: 4px; margin: 0 0 8px; font-size: .84rem; }
.plan.next .plan-keys div { display: flex; align-items: baseline; gap: 10px; }
.plan.next .plan-keys dt { flex: 0 0 84px; margin: 0; white-space: nowrap; }
.plan.next .plan-keys dd { margin: 0; color: var(--ink); }
.plan.next kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--card); font: 600 .74rem/1.4 var(--sans); color: var(--ink); }

/* the profile docked under the map */
.plan.next .plan-dock { position: relative; z-index: 2; border-top: 1px solid var(--line); background: var(--paper); }
.plan.next .plan-dock-head { display: flex; align-items: center; gap: 12px; height: 40px; padding-inline: 12px 6px; }
.plan.next .plan-dock-modes { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--paper-2); }
.plan.next .plan-dock-modes button { padding: 4px 11px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.plan.next .plan-dock-modes button[hidden] { display: none; }
.plan.next .plan-dock-modes button:hover { color: var(--pine); }
.plan.next .plan-dock-modes button[aria-pressed="true"] { background: var(--card); color: var(--pine); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.plan.next .plan-dock-modes button:disabled { opacity: .45; cursor: default; }
.plan.next .plan-dock-modes button:focus-visible, .plan.next .plan-dock-toggle:focus-visible, .plan.next .plan-dock-sel button:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-dock-legs { padding: 4px 11px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.plan.next .plan-dock-legs[hidden] { display: none; }
.plan.next .plan-dock-readout { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan.next .plan-dock-toggle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); cursor: pointer; }
.plan.next .plan-dock-toggle:hover { background: var(--paper-2); color: var(--pine); }
.plan.next .plan-dock-toggle svg { transition: transform .15s ease; }
.plan.next .plan-dock[data-state="closed"] .plan-dock-toggle svg { transform: rotate(180deg); }
.plan.next .plan-dock[data-state="closed"] .plan-dock-body { display: none; }
.plan.next .plan-dock-chart { position: relative; height: var(--dock-chart-h); margin-inline: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); direction: ltr; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.plan.next .plan-dock-chart:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-dock-chart canvas { display: block; width: 100%; height: 100%; border-radius: 8px; }
.plan.next .plan-dock-sel { position: absolute; z-index: 3; inset-block-start: 4px; inset-inline-start: var(--sel-x, 50%); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 10px 5px; border-radius: 10px;
                            background: var(--ink); color: #fff; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--shadow-2); cursor: default; }
.plan.next .plan-dock-sel[hidden] { display: none; }
.plan.next .plan-dock-sel button { padding: 4px 9px; border: 0; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.plan.next .plan-dock-sel button:hover { background: rgba(255,255,255,.3); }
.plan.next .plan-dock-sel #plan-dock-selclear { padding: 4px 8px; }
.plan.next .plan-dock-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; padding: 1px 14px 5px; font-size: .74rem; color: var(--ink-soft); }
.plan.next .plan-dock-foot .plan-gradekey { margin: 0; color: var(--ink-soft); font-size: .74rem; }
.plan.next .plan-dock-foot .plan-linklike { font-size: .78rem; }
.plan.next .plan-dock-foot [hidden] { display: none; }
.plan.next .plan-dock-summary { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a paddle has a bar of legs where the heights were (the classic page hides the chart for a paddle) */
.plan.next.paddling #plan-profile-chart { display: block !important; }
.plan.next.paddling .plan-figures .f-climb { display: none !important; }

/* the date (P10): in the figures strip, the two inputs on a line and one line of what follows from them (a button to the full sentences in the Route tab); the note says what
   choosing a date sends where, until a date is chosen (then the forecast's own source line says it) */
.plan.next .plan-when { margin: 6px 0 0; }
.plan.next:not(.has-route) .plan-when { display: none; }
.plan.next .plan-when-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.plan.next .plan-when-field { display: grid; gap: 1px; font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--ink-soft); }
.plan.next .plan-when-field input { box-sizing: border-box; min-height: 30px; min-width: 0; padding: 2px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.plan.next #plan-date { width: 8.4rem; }
.plan.next #plan-time { width: 5.6rem; }
.plan.next #plan-date-clear { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.15rem; line-height: 1; text-decoration: none; cursor: pointer; }
.plan.next #plan-date-clear:hover { background: var(--paper-2); }
.plan.next #plan-date-clear:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next #plan-date-clear[hidden] { display: none; }
.plan.next .plan-when-field input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-when-field input:disabled { opacity: .55; }
.plan.next .plan-when-note { margin: 3px 0 0; font-size: .74rem; line-height: 1.35; color: var(--ink-soft); }
.plan.next .plan-when-note a, .plan.next .plan-weather a { color: var(--pine); }
.plan.next.has-date .plan-when-note { display: none; }
.plan.next .plan-when-digest { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .82rem; line-height: 1.3; text-align: start; cursor: pointer;
                               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan.next .plan-when-digest[hidden] { display: none; }
.plan.next .plan-when-digest:hover { color: var(--pine); text-decoration: underline; }
.plan.next .plan-when-digest:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-when-detail[hidden] { display: none; }
.plan.next .plan-when-out p { margin: 0 0 6px; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.plan.next .plan-when-out p[hidden] { display: none; }
.plan.next .plan-weather small { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-soft); }

/* ground (P8): the kinds of ground, each in its colour AND its pattern (a swatch, the bar, the profile's key), "not recorded" pale, striped and outlined */
.plan.next .gsw { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-inline-end: 5px; box-shadow: inset 0 0 0 1px rgba(28,32,29,.4); }
.plan.next .g-paved { background-color: #5c6678; }
.plan.next .g-gravel { background-color: #d1ad66; background-image: radial-gradient(rgba(28,32,29,.65) 1px, transparent 1.3px); background-size: 5px 5px; }
.plan.next .g-earth { background-color: #5c9e54; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 1px, transparent 1px 4px); }
.plan.next .g-rock { background-color: #9e5438; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1px, transparent 1px 5px), repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 1px, transparent 1px 5px); }
.plan.next .g-sand { background-color: #edd578; background-image: radial-gradient(rgba(28,32,29,.6) .8px, transparent 1px); background-size: 3px 3px; }
.plan.next .g-boardwalk { background-color: #e08533; background-image: repeating-linear-gradient(0deg, rgba(28,32,29,.65) 0 1px, transparent 1px 3.5px); }
.plan.next .g-unpaved { background-color: #99856e; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.8) 0 1px, transparent 1px 7px); }
.plan.next .g-other { background-color: #8c6bbd; background-image: conic-gradient(rgba(255,255,255,.75) 25%, transparent 0 50%, rgba(255,255,255,.75) 0 75%, transparent 0); background-size: 8px 8px; }
.plan.next .g-notRecorded { background-color: #ccccd1; background-image: repeating-linear-gradient(135deg, rgba(90,90,100,.75) 0 1.2px, transparent 1.2px 5px); box-shadow: inset 0 0 0 1px #8e8e98; }
.plan.next .g-ferry { background-color: #4d7f9c; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 1px, transparent 1px 4px); }
.plan.next .plan-waymix h2 { margin-bottom: 8px; }
.plan.next .plan-gbar { display: flex; gap: 1.5px; height: 14px; margin: 0 0 8px; overflow: hidden; border-radius: 7px; }
.plan.next .plan-gbar i { flex: 1 1 0; min-width: 3px; transition: opacity .12s ease; }
.plan.next .plan-waymix.has-lit .plan-gbar i:not(.is-lit) { opacity: .3; }
.plan.next .plan-glist { display: grid; gap: 1px; margin: 0 0 6px; padding: 0; list-style: none; }
.plan.next .plan-gkind { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none;
                         font: inherit; font-size: .88rem; color: var(--ink); text-align: start; cursor: pointer; }
.plan.next .plan-gkind .gsw { margin: 0; }
.plan.next .plan-gkind .gval { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan.next .plan-gkind:hover, .plan.next .plan-gkind.is-lit { background: var(--paper-2); border-color: var(--line); }
.plan.next .plan-gkind[aria-pressed="true"] { border-color: var(--pine); background: var(--card); box-shadow: 0 0 0 1px var(--pine); }
.plan.next .plan-gkind:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-ghint, .plan.next .plan-gfoot { margin: 4px 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); }
.plan.next .plan-dock-foot .plan-gradekey .gsw { margin-inline-end: 4px; }

/* directions (P9): the turns, in order; each is a button (hover or focus shows it on the map, a press goes there) */
.plan.next .plan-directions > h2 { display: none; }
.plan.next .plan-dir-lede, .plan.next .plan-dir-empty, .plan.next .plan-dir-offpath { margin: 0 0 10px; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.plan.next .plan-dir-lede[hidden], .plan.next .plan-dir-empty[hidden], .plan.next .plan-dir-offpath[hidden], .plan.next .plan-dir-tools[hidden] { display: none; }
.plan.next .plan-dir-tools { margin: 0 0 8px; }
.plan.next .plan-dir-copy { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.plan.next .plan-dir-copy:hover { background: var(--paper-2); }
.plan.next .plan-dir-copy:focus-visible, .plan.next .plan-dirstep:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-dirlist { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.plan.next .plan-dirstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 0; border-inline-start: 3px solid transparent; border-radius: 8px; background: none;
                           color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.plan.next .plan-dirstep:hover, .plan.next .plan-dirstep.is-pinned { background: var(--paper-2); }
.plan.next .plan-dirstep.is-pinned { border-inline-start-color: var(--pine); }
.plan.next .dir-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); color: var(--pine); }
.plan.next .plan-dirstep:hover .dir-ico, .plan.next .plan-dirstep.is-pinned .dir-ico { background: var(--card); }
.plan.next .dir-body b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.plan.next .dir-body small { display: block; font-size: .76rem; line-height: 1.35; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan.next .ga-turn { width: 20px; height: 20px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: var(--pine); box-shadow: 0 1px 5px rgba(0,0,0,.45); pointer-events: none; }

/* ---- wide: the panel beside the map, the profile under the map, the page itself does not scroll ---- */
@media (min-width: 861px), (min-width: 641px) and (max-width: 860px) and (max-height: 500px) and (min-aspect-ratio: 1001/1000) {
  .plan.next { display: grid; grid-template-columns: var(--plan-w) minmax(0, 1fr); height: calc(100dvh - var(--plan-top)); min-height: 440px; }
  .plan.next .plan-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .plan.next .plan-head, .plan.next .plan-stats, .plan.next .plan-actions { flex: none; }
  .plan.next .plan-tabs { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .plan.next .plan-tablist { flex: none; }
  .plan.next .plan-tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .plan.next .plan-tabpanel[hidden] { display: none; }
  .plan.next .plan-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
  .plan.next .plan-map { min-height: 0; }
  .plan.next .plan-phone-dock { display: none; }
  /* the page's own footer is not shown beside the planner (the legal links and the company's details are at the foot of the Route tab): the page does not scroll */
  body:has(.plan.next) .app-footer { display: none; }
  /* a window under 1120 px leaves the map under 780 px: the bar (622 px with its words in English, up to 675 in German) does not fit beside its Layers button and the map's own buttons, and
     the page scrolled sideways in every language from 861 px to about 975: icons only there, the words kept for a screen reader (and as the tooltips), as on the phone */
  @media (max-width: 1119px) {
    .plan.next .plan-edit .plan-switch > span:not(.plan-switch-track), .plan.next .plan-edit .plan-menubtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .plan.next .plan-edit .plan-switch { gap: 0; padding-inline: 8px; }
  }
  /* the words of the one-line bar, where the window has room for them */
  @media (min-width: 1500px) {
    .plan.next .plan-edit .lbl { display: inline; }
    .plan.next .plan-edit button:has(.lbl) { padding-inline: 8px 10px; }
  }
  /* a tall window gives the profile more */
  @media (min-width: 1800px) and (min-height: 900px) { .plan.next { --dock-chart-h: 150px; } }
  /* a short window (up to 960px high: the figures strip now carries the date, and the tabs need their room): once there is a route the journey is folded to one line; under 800px high everything is tighter still */
  @media (max-height: 960px) {
    .plan.next.has-route .plan-journey-sum { display: flex; }
    .plan.next.has-route .plan-head:not(.is-open) .plan-journey { display: none; }
    .plan.next .plan-head { padding-top: 8px; }
    .plan.next .plan-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @media (max-height: 800px) {
    .plan.next .plan-search label { padding-top: 3px; font-size: .62rem; }
    .plan.next .plan-search input { padding-bottom: 4px; font-size: .95rem; }
    .plan.next .plan-trip { margin-bottom: 6px; }
    .plan.next .plan-tripmode { margin-bottom: 6px; }
    .plan.next .plan-profile { margin-bottom: 6px; }
    .plan.next .plan-stats { padding-block: 6px 8px; }
    .plan.next { --dock-chart-h: 100px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan.next .plan-switch-track::after, .plan.next .plan-dock-toggle svg { transition: none; }
}

/* the printout's page of directions */
@media print {
  .pp-dirpage { break-inside: auto; }
  .pp-turns { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 8mm; counter-reset: turn; }
  .pp-turns li { display: flex; flex-direction: column; break-inside: avoid; padding-block: 1.2mm; padding-inline-start: 6mm; border-bottom: .2mm solid #e6e1d6; position: relative; counter-increment: turn; }
  .pp-turns li::before { content: counter(turn) "."; position: absolute; inset-inline-start: 0; color: #666; font-size: 8pt; }
  .pp-turns b { font-size: 9.5pt; }
  .pp-turns span { font-size: 7.5pt; color: #555; font-variant-numeric: tabular-nums; }
  .pp-note { margin: 2mm 0 0; font-size: 7.5pt; color: #555; }
}