/* NautPlot layouts beyond the upright phone and the computer (js/plot-layout.js has the same rule):
   PHONE HELD SIDEWAYS (landscape, height ≤ 500 px): panels are a LEFT side panel (≤ 45% wide, full height), the toolbar sits beside the search,
   the data bar is one row, the status dock sits at the bottom beside the panel, and the map buttons wrap into two short columns on the right
   (under the MOB button, above the First Mate button), so nothing covers MOB, the search box or the First Mate button.
   TABLET HELD UPRIGHT (700–899 px wide, portrait): the bottom sheet capped at 60% and a larger data bar (up to six cells). */

@media (orientation: landscape) and (max-height: 500px) {
  .pp-stage { --pp-side-w: min(45%, 380px); --pp-right: 128px; }

  /* the top column: search + toolbar on one row, then the alerts and the data bar; beside the panel when one is open */
  .pp-top { top: 8px; left: 10px; right: var(--pp-right); width: auto; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; }
  .pp-top > * { grid-column: 1 / -1; }
  .pp-top > .pp-search { grid-column: 1; grid-row: 1; margin-right: 0; }
  .pp-top > .pp-chips { grid-column: 2; grid-row: 1; }
  .pp-top .dir-drop { margin-right: 0; }
  body.pp-sheet-open .pp-top, body:has(#nav:not([hidden])) .pp-top, body.pp-mob-on .pp-top { left: calc(var(--pp-side-w) + 20px); }
  .pp-chip { width: 44px; padding: 0; }   /* icon-only toolbar (names in aria-label), so the search keeps its room beside a panel */
  .pp-chip-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-mob-undo { left: calc(var(--pp-side-w) + 20px); right: var(--pp-right); }
  .nb-sunrow { display: none; }   /* the data bar is one row (the sun times are a field: Customise) */
  .nb-cell { padding: 4px 7px; }
  .nb-cell strong { font-size: 1.08rem; }   /* beside a side panel the bar is ~310 px: the values fit their cells (UI check 2026-10-06) */
  .pp-top .dir-drop { max-height: calc(100dvh - 150px - var(--pp-dock-h, 0px)); }   /* the search list ends above the status dock */
  .pp-banner.rec.asking .pp-rec-stats { display: none; }   /* "finish the trip?" + the strip's numbers were taller than the screen: the question wins */
  .pp-menu { max-height: calc(100% - 70px); overflow-y: auto; }

  /* the map buttons: two short columns under MOB, ending above the First Mate button and the scale */
  .plot-page .maplibregl-ctrl-top-right { top: 72px; right: 0; bottom: 94px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; }
  .plot-page .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0 10px 10px 0; }
  /* the chart credits ⓘ move left of the First Mate button's column (so it isn't pushed up into the map buttons); no scale bar sideways */
  .plot-page .maplibregl-ctrl-bottom-right { right: 100px; }
  .plot-page .maplibregl-ctrl-scale { display: none; }

  /* the one panel: a left side panel at full height (no handle, no peek / half / full) */
  .pp-sheet, .pp-sheet[data-h] { left: 10px; right: auto; top: 8px; bottom: 8px; width: var(--pp-side-w); max-height: none; height: auto;
    border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.25); padding-bottom: 0; }
  .pp-sheet .pp-grip { display: none; }
  .pp-sheet .pp-sheet-head { padding-top: 8px; touch-action: auto; }
  .pp-sheet[data-h="peek"] .pp-sheet-body { display: block; }
  .pp-sheet[data-h="peek"] .pp-peek-sum { display: none; }
  /* the navigation readouts and the MOB panel take the same place */
  .pp-nav, .pp-mob { left: 10px; right: auto; bottom: 8px; width: var(--pp-side-w); max-height: calc(100% - 16px); overflow-y: auto; border-radius: 16px; }
  .pp-nav { border: 3px solid var(--ro-line); }
  .pp-mob { border: 3px solid var(--ro-line); border-top: 4px solid #d00000; }
  .pp-ro strong { font-size: 1.3rem; }
  /* the status dock: at the bottom, beside the panel, clear of the map buttons */
  .pp-dock { left: var(--pp-dock-left, 0px); right: calc(var(--pp-right) + 8px); bottom: 0; padding-left: 10px; padding-right: 0; }
  .pp-peek { left: 10px; right: auto; width: var(--pp-side-w); }
  .pp-warn { left: auto; right: var(--pp-right); bottom: 10px; max-width: 420px; margin: 0; }
}

@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  .pp-sheet[data-h="half"] { max-height: calc(min(60%, 100% - var(--pp-top, 118px) + 6px) - var(--pp-dock-h, 0px)); }
  .pp-stage .nb-strip { min-height: 64px; }
  .pp-stage .nb-strip .nb-cell { padding: 6px 14px; min-height: 60px; }
  .pp-stage .nb-strip .nb-cell small { font-size: 0.76rem; }
  .pp-stage .nb-strip .nb-cell strong { font-size: 1.6rem; }
  .pp-stage .nb-strip .nb-pos strong { font-size: 1rem; }
  .pp-stage .nb-strip .nb-fold { width: 52px; }
}