/* The planner on a phone (public/plan.php, sent after plan-next.css; plan/sheet.js says which layout the window has and moves the pieces). Three layouts:
     wide    861px and over: the panel beside the map, the profile docked under it (plan-next.css). Nothing here.
     sheet   860px and under, upright or tall enough: the map fills the screen; at its foot a sheet with three heights. PEEK is the figures and the app button, HALF adds the tabs
             and the profile, FULL is everything; a tap, a drag or the arrow keys on the handle move it between them. The map ends where the peek begins, so its credits are
             never under the sheet; what of the sheet is over the map is allowed for in the padding the map's fits are given (sheet.js).
     side    641px to 860px wide, lying on its side (500px high or less): the wide layout, its panel at the wide layout's least width (340px: the four figures need it), which
           scrolls as a whole. (Narrower than that there is no room
           for a panel beside the map, however short the window: it has the sheet.)
   The media queries below are the ones in plan/sheet.js (tests/plan-sheet-test.js holds them to it). Sides are written start and end; sizes in rem and px where a finger decides;
   every control a finger meets is 44px high at least. env(safe-area-inset-*) is read where the page meets a screen's edge (it takes effect only on a page that asks for
   viewport-fit=cover; the site's header does not, and is not changed for this). */

.plan-peekbar:empty, .plan-phone-head:empty { display: none; }

/* ---- every window 860px wide and under: the slim header, the footer's place, the bar on the map, the targets ---- */
@media (max-width: 860px) {
  /* The site's footer is not shown beside the planner at any width (its legal links and the company's details are at the foot of the Route tab). */
  body:has(.plan.next) .app-footer { display: none; }
  /* Until the script has said which layout this is, the panel is not shown half-made. */
  .plan.next:not([data-layout]) .plan-side { visibility: hidden; }

  /* the header: the mark, the menu and the language, 56px (only the planner sets $headerCompact) */
  header.top.is-compact .nav { padding-block: 6px; gap: 8px; }
  header.top.is-compact .wordmark { gap: 8px; font-size: 1.05rem; min-height: 44px; min-width: 44px; }
  header.top.is-compact .menu-button { box-sizing: border-box; min-height: 44px; padding-block: 0; }
  header.top.is-compact .lang-pick summary { box-sizing: border-box; min-height: 44px; min-width: 44px; justify-content: center; padding-block: 0; }

  /* the bar on the map: undo, redo, snap, More (the rest is in More); one line that does not slide */
  .plan.next .plan-maptop { top: 8px; inset-inline: 8px 60px; gap: 6px; }
  .plan.next .plan-layers-btn { height: 44px; padding-inline: 12px 14px; }
  .plan.next .plan-toolbar { height: 44px; min-height: 44px; padding: 0 2px; gap: 0; overflow: visible; flex-wrap: nowrap; }
  .plan.next .plan-edit .plan-tgroup + .plan-tgroup { margin-inline-start: 2px; padding-inline-start: 2px; }
  .plan.next .plan-edit .plan-tgroup:not(:has(*)), .plan.next .plan-edit .plan-tgroup:has(> #plan-avoid) { display: none; }
  .plan.next .plan-toolbar button { height: 44px; min-width: 44px; justify-content: center; border-radius: 9px; }
  .plan.next .plan-edit .plan-switch { gap: 6px; padding-inline: 8px; }
  .plan.next .plan-edit .plan-switch > span:not(.plan-switch-track) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plan.next .plan-edit .plan-menubtn { padding-inline: 8px; }
  .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-menubtn .chev { display: none; }
  .plan.next .plan-edit #plan-more.has-active, .plan.next .plan-edit #plan-more[aria-expanded="true"] { background: var(--pine); color: #fff; }
  .plan.next .plan-edit #plan-more.has-active svg, .plan.next .plan-edit #plan-more[aria-expanded="true"] svg { color: #fff; }
  /* More: a list that opens under its button towards the middle of the screen, with the words beside the icons */
  .plan.next .plan-edit .plan-menuwrap { position: static; }
  .plan.next .plan-edit .plan-menuwrap .plan-menu { inset-inline: 0 auto; min-width: min(260px, calc(100vw - 24px)); max-height: min(70vh, calc(100dvh - 160px)); overflow-y: auto; }
  .plan.next .plan-menu button { min-height: 44px; padding-block: 0; justify-content: flex-start; font-size: .95rem; }
  .plan.next .plan-menu .lbl, .plan.next .plan-menu .lbl-m { display: inline; }
  .plan.next .plan-menu button[aria-pressed="true"] { background: var(--finish); color: #fff; }
  .plan.next .plan-help-pop, .plan.next .plan-trail-pop { inset-inline: 0 auto; width: min(360px, calc(100vw - 24px)); max-height: min(60vh, calc(100dvh - 180px)); }
  .plan.next .plan-help-pop .mouse { display: none; }
  .plan.next .plan-help-pop .touch { display: inline; }
  .plan.next .plan-pop-head button, .plan.next .plan-maphint button { min-width: 44px; min-height: 44px; }
  .plan.next .plan-layers { top: 60px; width: min(320px, calc(100% - 16px)); inset-inline-start: 8px; max-height: calc(100% - 68px); }
  .plan.next .plan-base { padding: 6px 2px; }
  .plan.next .plan-overlay { min-height: 44px; align-items: center; }
  .plan.next .plan-overlay input { width: 22px; height: 22px; }
  .plan.next .plan-toast button { width: 44px; height: 44px; inset-block-start: 0; inset-inline-end: 0; }
  .plan.next .plan-toast { padding-inline-end: 52px; }
  .maplibregl-ctrl-group button, .plan-3d { width: 44px !important; height: 44px !important; }
  .maplibregl-ctrl-group .plan-3d { line-height: 44px; font-size: 13px; }

  /* the journey, the figures, the tabs: a finger's size */
  .plan.next .plan-mode button { min-height: 44px; }
  .plan.next .plan-profile button { min-height: 44px; }
  .plan.next .plan-tripmode button { min-height: 44px; padding-inline: 16px; }
  .plan.next .plan-icon-btn { width: 44px; height: 44px; }
  .plan.next .plan-field { grid-template-columns: 42px 1fr 44px; }
  .plan.next .plan-search input { min-height: 28px; font-size: max(16px, 1rem); }
  .plan.next .plan-loop-length input { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-heading button { min-width: 44px; min-height: 44px; }
  .plan.next .plan-loop-actions button { min-height: 44px; }
  .plan.next .plan-results li[role="option"] { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .plan.next .plan-results li.trail[role="option"] { flex-direction: row; align-items: center; justify-content: flex-start; }
  .plan.next .plan-tablist [role="tab"] { min-height: 44px; min-width: 44px; padding-block: 0; }
  /* four tabs in 320 px: a language with long words ("Wegbeschreibung" and its count) gives the others room by trimming the padding, not the 44 px */
  @media (max-width: 359px) { .plan.next .plan-tablist { padding-inline: 4px; gap: 0; } .plan.next .plan-tablist [role="tab"] { padding-inline: 3px; gap: 3px; font-size: .8rem; } }
  .plan.next .plan-when-field input { min-height: 44px; min-width: 7.5rem; font-size: max(16px, 1rem); }
  .plan.next .plan-when-row { gap: 8px 12px; }
  .plan.next #plan-date-clear { min-width: 44px; min-height: 44px; }
  .plan.next .plan-when-digest { min-height: 44px; padding-block: 10px; text-align: start; }
  .plan.next .plan-dir-copy, .plan.next .plan-dirstep { min-height: 44px; }
  .plan.next .plan-stats-more button, .plan.next #plan-dock-reset { min-height: 44px; display: inline-flex; align-items: center; }
  /* a link in a sentence keeps its place in the line and reaches 44px high by padding that is taken back from the line (the target is bigger than the words) */
  .plan.next .plan-linklike, .plan.next .plan-steepest button { display: inline-block; padding-block: 12px; margin-block: -12px; min-width: 44px; }
  .plan.next .plan-list button, .plan.next .plan-list a { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .plan.next .plan-list .plan-trail-pick { flex-direction: row; align-items: center; justify-content: flex-start; }
  .plan.next .plan-trail-search input { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-empty-acts { display: flex; margin-top: 2px; }
  .plan.next .plan-empty-acts .plan-linklike { display: inline-flex; align-items: center; min-height: 44px; margin-block: 0; padding-block: 0; }
  .plan.next .plan-list .book, .plan.next .plan-stays .book { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; }
  .plan.next .plan-stays button { min-height: 44px; }
  .plan.next .plan-stepper button { width: 44px; height: 44px; }
  .plan.next .plan-dock-modes button { min-height: 44px; min-width: 44px; padding-inline: 12px; }
  .plan.next .plan-dock-toggle { width: 44px; height: 44px; }
  .plan.next .plan-dock-sel button { min-height: 44px; padding-inline: 12px; }
  .plan.next .plan-sharebtn, .plan.next .plan-actions .primary, .plan.next .plan-dialog-actions button { min-height: 44px; }
  .plan-dialog-field input { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-dock-head { height: auto; min-height: 48px; flex-wrap: wrap; gap: 0 8px; padding-block: 2px; }
  .plan.next .plan-dock-readout { order: 3; flex: 1 1 100%; min-height: 0; padding-inline: 4px; }
  .plan.next .plan-dock-chart { --dock-chart-h: 120px; }
  .plan.next .plan-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .plan.next .plan-card .mouse { display: none; }
  .plan.next .plan-card .touch { display: inline; }
  .plan.next .plan-empty .mouse { display: none; }
  .plan.next .plan-empty .touch { display: inline; }
}
/* below 380px the mark stands for the name (the name stays in the page for a screen reader) */
@media (max-width: 380px) {
  header.top.is-compact .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- the sheet ---- */
@media (max-width: 860px) and (min-height: 501px), (max-width: 860px) and (max-aspect-ratio: 1000/1000), (max-width: 640px) {
  .plan.next { position: relative; display: block; height: calc(100vh - var(--plan-top)); height: calc(100dvh - var(--plan-top)); min-height: 260px; overflow: hidden; }
  .plan.next .plan-main { display: contents; }
  /* the map ends where the peek begins */
  .plan.next .plan-map { position: absolute; inset-block: 0 var(--plan-peek-h, 0px); inset-inline: 0; min-height: 0; }
  .plan.next .plan-side { position: absolute; inset-inline: 0; inset-block-end: var(--plan-kb, 0px); z-index: 5; display: flex; flex-direction: column; min-height: 0;
                          height: min(var(--plan-sheet-h, 120px), calc(100% - var(--plan-kb, 0px) - 8px)); overflow: hidden; border: 0; border-radius: 16px 16px 0 0; background: var(--paper);
                          box-shadow: 0 -6px 24px rgba(0,0,0,.18); transition: height var(--plan-sheet-ms, 250ms) ease, inset-block-end var(--plan-sheet-ms, 250ms) ease; }
  .plan.next.sheet-dragging .plan-side, .plan.next.sheet-still .plan-side, .plan.next:not(.sheet-ready) .plan-side { transition: none; }
  .plan.next.sheet-dragging .plan-side { user-select: none; -webkit-user-select: none; }

  /* the handle: a button the width of the sheet, 44px high, over the top of the peek */
  .plan.next .plan-sheet-handle { display: block; position: relative; z-index: 2; flex: none; width: 100%; height: 44px; margin-block-end: -22px; padding: 0; border: 0; border-radius: 16px 16px 0 0; background: none; cursor: grab; touch-action: none; }
  .plan.next .plan-sheet-handle i { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #8a8374; }
  .plan.next .plan-sheet-handle:focus-visible { outline: 2px solid var(--pine); outline-offset: -3px; }

  /* the peek: the figures and the app button (or the empty line), whatever the height */
  .plan.next .plan-peekbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 22px 16px calc(8px + env(safe-area-inset-bottom, 0px)); touch-action: none; cursor: grab; }
  .plan.next .plan-peekbar:empty { display: none; }
  .plan.next .plan-peekbar .plan-empty { flex: 1 1 100%; margin: 0; font-size: .95rem; cursor: auto; touch-action: auto; }
  .plan.next .plan-peekbar .plan-figures { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; min-width: 0; touch-action: none; }
  .plan.next:not(.has-route) .plan-peekbar .plan-figures { display: none; }
  .plan.next .plan-peekbar .plan-figures li { flex: 0 0 auto; padding: 0; border: 0; background: none; }
  .plan.next .plan-peekbar .plan-figures li:has(#f-desc) { display: none; }
  .plan.next[data-sheet="full"] .plan-peekbar .plan-figures li:has(#f-desc) { display: block; }
  .plan.next .plan-peekbar .plan-figures b { font-size: 1rem; line-height: 1.25; }
  .plan.next .plan-peekbar .plan-figures span { font-size: .74rem; white-space: nowrap; }
  .plan.next:not(.has-route) .plan-peekbar #plan-open { display: none; }
  .plan.next .plan-peekbar #plan-open { flex: 1 1 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; box-sizing: border-box; border-radius: 10px; background: var(--pine); color: #fff;
                                        font-weight: 600; font-size: .95rem; text-decoration: none; touch-action: manipulation; cursor: pointer; }
  .plan.next .plan-peekbar #plan-open:hover { background: var(--pine-deep); }
  .plan.next .plan-peekbar #plan-open[aria-disabled="true"] { opacity: .45; pointer-events: none; }
  .plan.next .plan-peekbar #plan-open:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
  .plan.next .plan-peekbar #plan-open svg, .plan.next .plan-open-long { display: none; }
  .plan.next .plan-open-short { display: inline; }
  .plan.next .plan-open-tiny { display: none; }
  @media (max-width: 389px) { .plan.next .plan-open-short { display: none; } .plan.next .plan-open-tiny { display: inline; } }

  /* what is under the peek: shown from HALF, and out of reach (hidden, not only clipped) at the peek */
  .plan.next .plan-stats { flex: none; padding: 0 16px; border: 0; background: none; }
  .plan.next .plan-stats .plan-offpath { margin: 0 0 6px; }
  .plan.next .plan-stats .plan-status { margin: 0 0 6px; }
  .plan.next .plan-stats-more, .plan.next .plan-time-note { display: none; }
  .plan.next[data-sheet="full"] .plan-stats-more { display: flex; }
  .plan.next[data-sheet="full"] .plan-time-note:not([hidden]) { display: block; }
  .plan.next[data-sheet="peek"] .plan-stats { display: none; }
  .plan.next .plan-tabs, .plan.next .plan-actions { transition: visibility 0s linear var(--plan-sheet-ms, 250ms); }
  .plan.next[data-sheet="peek"] .plan-tabs, .plan.next[data-sheet="peek"] .plan-actions { visibility: hidden; }
  .plan.next[data-sheet="half"] .plan-tabs, .plan.next[data-sheet="half"] .plan-actions, .plan.next[data-sheet="full"] .plan-tabs, .plan.next[data-sheet="full"] .plan-actions,
  .plan.next.sheet-still .plan-tabs, .plan.next.sheet-still .plan-actions { transition: none; }

  /* the tabs, and the panel that scrolls */
  .plan.next .plan-tabs { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .plan.next .plan-tablist { flex: none; padding: 0 8px; }
  .plan.next .plan-tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 20px; }
  .plan.next .plan-tabpanel[hidden] { display: none; }
  .plan.next:not(.has-route) .plan-tabpanel:not(#plan-panel-route) { display: none; }
  .plan.next .plan-phone-dock { margin: 0 -16px 12px; }
  .plan.next .plan-phone-dock .plan-dock { border-top: 0; }
  .plan.next .plan-phone-head { margin: 0 0 12px; }
  .plan.next .plan-phone-head .plan-head { padding: 0; }
  .plan.next.has-route .plan-journey-sum { display: flex; min-height: 44px; margin-bottom: 0; }
  .plan.next.has-route .plan-head:not(.is-open) .plan-journey { display: none; }
  .plan.next.has-route .plan-head.is-open .plan-journey-sum { margin-bottom: 8px; }

  /* Share, at the foot of the sheet (GPX, the link and Save; a phone has no print and no embed, and needs no code to send a route to itself) */
  .plan.next .plan-actions { flex: none; display: flex; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .plan.next .plan-share { flex: 1 1 auto; }
  .plan.next .plan-sharebtn { width: 100%; justify-content: center; }
  .plan.next .plan-sharemenu { inset-inline: 0; min-width: 0; }
  .plan.next .plan-sharemenu #plan-qr, .plan.next .plan-sharemenu #plan-print, .plan.next .plan-sharemenu #plan-embed { display: none; }

  /* messages above the peek, not over the tip card's old place; the tip card is the empty line in the peek */
  .plan.next .plan-toast-region { top: auto; bottom: min(calc(var(--plan-sheet-h, 0px) - var(--plan-peek-h, 0px) + 12px), calc(100% - 160px)); }
  .plan.next .plan-card { display: none; }
  .plan.next .plan-maphint { max-width: calc(100vw - 24px); }
}

/* ---- on its side: the wide layout with a panel that scrolls as a whole (its foot stays) ---- */
@media (min-width: 641px) and (max-width: 860px) and (max-height: 500px) and (min-aspect-ratio: 1001/1000) {
  .plan.next { min-height: 0; }
  .plan.next .plan-sheet-handle, .plan.next .plan-peekbar { display: none; }
  .plan.next .plan-side { position: relative; display: block; overflow-y: auto; overscroll-behavior: contain; }   /* (positioned, so that what is hidden for a screen reader and set apart, its headings, scrolls with the panel and does not stretch the page) */
  .plan.next .plan-tabs { display: block; }
  .plan.next .plan-tabpanel { overflow: visible; }
  .plan.next .plan-actions { position: sticky; inset-block-end: 0; z-index: 3; }
  .plan.next .plan-head { padding-inline: 12px; }
  .plan.next .plan-dock-chart { --dock-chart-h: 90px; }
  .plan.next .plan-toast-region { bottom: 12px; }
  .plan.next .plan-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plan.next .plan-side, .plan.next .plan-tabs, .plan.next .plan-actions { transition: none !important; }
}