/* NautPlot sheet manager (js/plot-sheet.js): the panel's three heights, its drag handle, and the status dock above it.
   Phones / tablets in the bottom-sheet layout (up to 899 px) get the handle, the heights and the dock; computers keep the left column and
   only the "one at a time" rule (a status item is a one-line chip while a panel is open). */
.pp-grip { display: none; }
.pp-sheet-ttl { flex: 1; min-width: 0; }
.pp-peek-sum { display: none; margin: 0; font-size: 0.86rem; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-dock { display: none; }

@media (max-width: 899px) {
  /* the handle floats over the top of the title bar (a 96 × 44 px tap area, the little bar is drawn at its top) */
  .pp-grip { display: block; position: absolute; top: 0; left: 50%; width: 96px; height: 44px; margin: 0 0 0 -48px; padding: 0; border: 0; border-radius: 12px; z-index: 2;
    background: transparent; touch-action: none; cursor: grab; }
  .pp-grip i { position: absolute; left: 26px; right: 26px; top: 6px; height: 5px; border-radius: 3px; background: var(--muted); opacity: 0.6; }
  .pp-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pp-sheet-head { touch-action: none; padding-top: 16px; }
  .pp-sheet { transition: max-height 0.2s ease, height 0.2s ease; }
  .pp-sheet-body { flex: 1 1 auto; min-height: 0; }
  .pp-sheet[data-h="half"] { max-height: calc(min(62%, 100% - var(--pp-top, 118px) + 6px) - var(--pp-dock-h, 0px)); }   /* the panel and the dock above it share the old 62% */
  .pp-sheet[data-h="peek"] { max-height: none; }
  .pp-sheet[data-h="peek"] .pp-sheet-body { display: none; }
  .pp-sheet[data-h="peek"] .pp-peek-sum:not([hidden]) { display: block; }
  .pp-sheet[data-h="peek"] .pp-sheet-head { padding-bottom: 8px; }
  .pp-sheet[data-h="full"] { max-height: var(--pp-full, 90%); height: var(--pp-full, auto); }
  /* the dock: above whatever is at the bottom (panel, navigation readouts, MOB); its height is the sum of its items */
  .pp-dock { position: absolute; left: 0; right: 0; bottom: var(--pp-bottom, 0px); z-index: 5; display: grid; gap: 6px; padding: 0 10px 8px; pointer-events: none; }
  .pp-dock[hidden] { display: none; }
  .pp-dock > * { pointer-events: auto; margin: 0; }
  body.pp-mob-on #sheet { display: none !important; }   /* MOB beats everything: the panel goes; the dock keeps only the safety items (plot-sheet.js) */
}
@media (prefers-reduced-motion: reduce) { .pp-sheet { transition: none; } }

/* ---- status items as one-line chips (a panel is open, or another item is the one shown in full) */
[data-dock="chip"] { cursor: pointer; }
[data-dock="hide"] { display: none !important; }
.pp-banner[data-dock="chip"] { flex-wrap: nowrap; gap: 6px; padding: 2px 6px 2px 12px; min-height: 48px; }
.pp-banner[data-dock="chip"] .pp-banner-text, .pp-banner.rec[data-dock="chip"] .pp-banner-text, .pp-banner.two[data-dock="chip"] .pp-banner-text { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-banner[data-dock="chip"] :is(br, .small, .muted, .pp-rec-stats, #rec-details, #rec-undo, .pp-pick-boat) { display: none; }
.pp-banner.two[data-dock="chip"] a.button { display: none; }
.pp-banner[data-dock="chip"] .pp-chip-hide { display: none; }   /* "Continue recording" → "Continue" in the one-line chip, so the trip's boat still shows */
.fp-strip[data-dock="chip"] { flex-wrap: nowrap; gap: 6px; padding: 2px 8px 2px 12px; min-height: 48px; }
.fp-strip[data-dock="chip"] .fp-strip-text { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-strip[data-dock="chip"] .fp-strip-btns > :not(:first-child) { display: none; }
.pp-tc[data-dock="chip"] :is(.pp-tc-scale, .pp-tc-info, .pp-tc-sun) { display: none; }
.pp-tc[data-dock="chip"] { padding-top: 2px; padding-bottom: 2px; }
.pp-wx-note[data-dock="chip"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }