/* NautPlot (/plot/): a full-screen chart under the header, search + chips floating on top, one panel (bottom sheet on phones,
   left side panel from 900 px), the navigation readouts (high contrast for sunlight). Colours come from css/app.css tokens. */
body.plot-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.pp-stage { flex: 1; position: relative; min-height: 0; padding: 0; max-width: none; margin: 0; overflow: hidden; }
.pp-stage > .pp-map { position: absolute; inset: 0; background: #c6dbe9; }
@media (prefers-color-scheme: dark) { .pp-stage > .pp-map { background: #1b3550; } }

/* ---------- top: search, chips, banner */
.pp-top { position: absolute; z-index: 4; top: 10px; left: 10px; right: 10px; display: grid; gap: 8px; pointer-events: none; }
.pp-top > * { pointer-events: auto; }
.pp-search { margin: 0; }
.pp-search input { min-height: 40px; }
.pp-top .dir-drop { margin: -2px 0 0; max-height: min(60dvh, 420px); }
.pp-top .dir-drop li[data-i] { min-height: 44px; }
.pp-top .dir-drop li > span.dir-txt { display: grid; flex: 1; min-width: 0; }
.pp-top .dir-drop li.has-dir { align-items: center; padding-right: 4px; }
.dir-go, .dir-fav { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--accent, #0a63e0); border: 0; cursor: pointer; }
.dir-go:hover, .dir-fav:hover { background: var(--bg); }
.dir-go:focus-visible, .dir-fav:focus-visible { outline: 2px solid var(--accent, #0a63e0); outline-offset: -2px; }
/* The heart on a search result / the place card: outline = not a favourite, filled red = favourite. */
.dir-fav svg path, .pp-fav svg path { fill: none; }
.dir-fav[aria-pressed="true"], .pp-fav[aria-pressed="true"] { color: #d6246e; }
.dir-fav[aria-pressed="true"] svg path, .pp-fav[aria-pressed="true"] svg path { fill: currentColor; }
.pp-top .dir-drop li.has-dir .dir-fav { margin-right: -6px; }
.pp-fav { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pp-fav svg { width: 20px; height: 20px; flex: none; }
.pp-pick-favs .pp-list-row { display: grid; }
.pp-top .dir-drop li.dir-act { align-items: center; }
.pp-top .dir-drop li.dir-act strong { color: var(--accent, #0a63e0); }
/* While the route panel is open the From / To fields stand in for the search bar; folded into its bar, the search is back. */
body:has(#sheet[data-kind="plan"]:not([hidden])) #search, body:has(#sheet[data-kind="plan"]:not([hidden])) #drop { display: none; }
/* …then the toolbar is the top row: it keeps the MOB button's height (56 px), so the data bar under it never touches MOB (UI check 2026-10-06). */
@media (max-width: 899px) { body:has(#sheet[data-kind="plan"]:not([hidden])) .pp-chips { min-height: 58px; align-items: flex-start; } }
.pp-sheet-head .pp-shrink { margin-left: auto; }
.pp-sheet-head .pp-shrink[hidden] { display: none; }
.pp-sheet-head h2 { flex: 1; min-width: 0; }
.pp-chips { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }   /* one toolbar row: wide screens run it past the 380 px column */
.dir-drop:not([hidden]) ~ .pp-chips, .dir-drop:not([hidden]) ~ .pp-banner { display: none; }
.pp-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--surface);
  color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); font-size: 0.9rem; font-weight: 600; white-space: nowrap; flex: none; }
.pp-chip:hover { border-color: var(--accent); }
.pp-chip svg { flex: none; color: var(--accent); }
.pp-chip .rec-dot { width: 11px; height: 11px; box-shadow: none; }
/* The toolbar is three buttons: Layers, Record (red dot; "Recording" while a trip records) and ⋯ More, which opens a menu (Plan a route,
   Tides & weather, Share trip, Measure, Settings, Hide map buttons). Up to 700 px (phones) the buttons are icons only (44 px round, name in
   aria-label / title / for screen readers); wider: icon + name. The menu is a small popover under ⋯ on computers and a bottom sheet on phones. */
@media (max-width: 700px) {
  .pp-chip { width: 44px; padding: 0; }
  .pp-chip-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pp-chip .pp-dot, .pp-dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #d97706; border: 2px solid var(--surface); pointer-events: none; }
.pp-dot[hidden] { display: none; }
.pp-rec.on { border-color: #e5322d; }
.pp-rec.on .rec-dot { animation: pp-rec-pulse 1.6s ease-out infinite; }
@media (min-width: 701px) { .pp-rec.on .pp-chip-lbl { color: #c81e1e; } }   /* "Recording": ≥ 4.5:1 on the chip (was #e5322d, 4.35:1; UI check 2026-10-06) */
@media (min-width: 701px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-rec.on .pp-chip-lbl { color: #ff7a6e; } }
@media (min-width: 701px) { body.plot-page[data-night] .pp-rec.on .pp-chip-lbl { color: #ff7a6e; } }   /* night Dim / Red: dark chips */
.pp-menu { position: absolute; z-index: 8; width: 264px; padding: 4px 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.28); }
.pp-menu[hidden], .pp-menu-scrim[hidden] { display: none; }
.pp-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-align: left; cursor: pointer; }
.pp-mi + .pp-mi { border-top: 1px solid var(--border); }
.pp-mi:hover, .pp-mi:focus-visible { background: var(--surface-2, rgb(127 127 127 / 0.12)); }
.pp-mi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pp-mi[hidden] { display: none; }
.pp-mi svg { flex: none; color: var(--accent); }
.pp-mi .pp-mi-on { margin-left: auto; visibility: hidden; color: var(--accent); font-weight: 800; }
.pp-mi[aria-checked="true"] .pp-mi-on { visibility: visible; }
.pp-menu-scrim { position: fixed; inset: 0; z-index: 7; background: rgb(0 0 0 / 0.25); }
@media (max-width: 700px) {
  .pp-menu { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 80dvh; overflow: auto; }
  .pp-mi { min-height: 52px; font-size: 1rem; }
  /* the chat button would otherwise float over the dimmed map buttons above the menu sheet (UI check 2026-10-06) */
  body.plot-page:has(#more-scrim:not([hidden])) .fm-root { visibility: hidden; }
}
/* Hide the map buttons (the first thing in ⋯ More's list): Layers, Record and the right-hand stack go so the chart is clear; ⋯ More, MOB,
   the search bar, banners and every readout (recording, navigation, anchor strip, float plan) are never hidden. Remembered per device
   (nf-plot-ctl-hidden). */
.pp-ctl-toggle .ic-show, body.pp-ctl-off .pp-ctl-toggle .ic-hide { display: none; }
body.pp-ctl-off .pp-ctl-toggle .ic-show { display: block; }
body.pp-ctl-off .pp-chips > .pp-chip:not(#more-btn) { display: none; }
body.pp-ctl-off .maplibregl-ctrl-top-right .maplibregl-ctrl { display: none; }
.pp-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); font-size: 0.92rem; }
.pp-banner.rec { border-color: #e5322d; }
.pp-banner.rec .rec-dot { width: 12px; height: 12px; animation: pp-rec-pulse 1.6s ease-out infinite; }
/* the recording dot: a soft ring pulsing out (stays fully visible, unlike a blink); brighter red + light edge in dark mode */
@keyframes pp-rec-pulse { 0% { box-shadow: 0 0 0 0 rgb(229 50 45 / 0.6); } 70% { box-shadow: 0 0 0 8px rgb(229 50 45 / 0); } 100% { box-shadow: 0 0 0 0 rgb(229 50 45 / 0); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plot-page .rec-dot { background: #ff5148; outline: 1.5px solid rgb(255 255 255 / 0.85); outline-offset: 1px; }
  :root:not([data-theme="light"]) .pp-banner.rec { border-color: #ff6b63; border-width: 2px; }
  :root:not([data-theme="light"]) .pp-rec-form .rec-dot { background: #fff; outline: 0; }
}
.pp-banner-text { flex: 1 1 160px; min-width: 0; }
.pp-banner.two .pp-banner-text { flex-basis: 100%; }
.pp-banner.rec .pp-banner-text { flex: 1 1 calc(100% - 30px); }   /* the name on its own row; Add trip details · Stop under it, the numbers last */
.pp-banner.two { padding: 8px 8px 8px 14px; }
.pp-banner button, .pp-banner .button { min-height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; text-decoration: none; }
.pp-banner.rec button { background: #b3261e; }
.pp-banner.rec .pp-rec-stats { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 2px; min-height: 48px; margin: 0 0 0 -8px;
  padding: 2px 4px; border-radius: 12px; background: transparent; color: var(--text); border: 0; text-align: left; cursor: pointer; }
.pp-rec-stats:hover { background: var(--surface-2, rgb(127 127 127 / 0.08)); }
/* Trip rules (2026-10-02): Undo / Keep recording / OK are quiet buttons; "Pick a boat" sits in the text; "finish the trip?" spans the banner */
.pp-banner .pp-undo, .pp-banner.rec .pp-undo { background: transparent; color: var(--text); border: 1px solid var(--border); }
.pp-banner.rec .pp-pick-boat { min-height: 44px; margin-left: 4px; padding: 0 12px; background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.pp-rec-ask { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface-2, rgb(127 127 127 / 0.1)); font-weight: 600; }
.pp-rec-ask span { flex: 1 1 180px; }
.pp-rs { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 5px; border-left: 1px solid var(--border); }
.pp-rs:first-child { border-left: 0; }
.pp-rs strong { font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rs:first-child strong { font-size: 1.4rem; }
.pp-rs small { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-offline { margin: 0; justify-self: start; box-shadow: 0 2px 10px rgb(0 0 0 / 0.15); }
.pp-fail { position: absolute; inset: 16px; margin: auto; height: fit-content; max-width: 420px; padding: 16px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); z-index: 5; }

/* MapLibre controls: 44 px targets, clear of the floating top on phones */
.plot-page .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.plot-page .maplibregl-ctrl-top-right { top: calc(var(--pp-top, 112px) + 6px); }
.plot-page .maplibregl-ctrl-scale { font-size: 12px; }
.plot-page .maplibregl-ctrl-group button.pp-me { display: grid; place-items: center; color: #fff; }
.plot-page .maplibregl-ctrl-group button.pp-me[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #7fd0ff; }

/* ---------- the panel (sheet) */
.pp-sheet { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; max-height: 56%; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.22); padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 899px) { .pp-sheet { max-height: 62%; } }
/* Phones: one height cap for every panel (Layers, Routes, planning, Tides & weather, place cards) so they all stop at the same
   line. Map buttons the panel would cover are hidden while it's open (plot page: .pp-ctrl-under, js decides per button group). */
.plot-page .maplibregl-ctrl.pp-ctrl-under { visibility: hidden; pointer-events: none; }
.pp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px 16px; }
.pp-sheet-head h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.pp-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--text); border: 0; font-size: 1.15rem; }
.pp-x:hover { background: var(--bg); }
.pp-sheet-body { overflow-y: auto; padding: 0 16px 14px; overscroll-behavior: contain; }
.pp-sheet-body > p { margin: 4px 0; }
.pp-sub { color: var(--muted); }
.pp-from { font-weight: 600; }
.pp-access { margin: 0; color: #8a5a00; }
@media (prefers-color-scheme: dark) { .pp-access { color: #f0b84a; } }
.pp-acc-tag { margin-left: 6px; font-size: 11px; }
.pp-ll { font-variant-numeric: tabular-nums; }
.pp-notes { white-space: pre-wrap; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.pp-actions, .pp-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pp-actions > button, .pp-actions > .button, .pp-row > button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pp-actions .button { text-decoration: none; }
.pp-hint { margin: 6px 0 0; }
.pp-disclaim { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.86rem; }
.pp-h3 { margin: 12px 0 6px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-seg button { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--bg); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.pp-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
label.check.pp-check { display: flex; align-items: center; min-height: 44px; gap: 10px; color: var(--text); font-size: 0.95rem; }
.pp-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.pp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pp-grid2 select, .pp-draft input { min-height: 44px; }
.pp-draft { margin-top: 8px; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; }
.pp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pp-legend i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 700 10px/1 system-ui, sans-serif;
  font-style: normal; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
.pp-legend i.mine { background: #d4145a; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); width: 14px; height: 14px; }
.pp-sources summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: 0.86rem; cursor: pointer; }
.pp-sources p { margin: 0; }
.pp-sources a { color: var(--accent); }
.pp-plan-sum { font-size: 1.05rem; }
.pp-plan-sum strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pp-legs { list-style: none; margin: 6px 0; padding: 0; max-height: 140px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.pp-legs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.pp-legs li:first-child { border-top: 0; }
.pp-legs li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-leg-num { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-list { list-style: none; margin: 8px 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pp-list li + li { border-top: 1px solid var(--border); }
.pp-list-row { display: grid; gap: 2px; width: 100%; text-align: left; background: none; color: var(--text); border: 0; border-radius: 0; padding: 10px 14px; min-height: 52px; font-weight: 400; }
.pp-list-row:hover { background: var(--bg); }
.pp-list-row strong { font-weight: 650; }
.pp-boats { border: 0; margin: 0; padding: 0; }
.pp-boats legend { font-weight: 650; margin-bottom: 2px; padding: 0; }
.pp-rec-form { display: block; }
.pp-rec-form .rec-dot { width: 11px; height: 11px; box-shadow: none; background: #fff; }

/* waypoints while planning: numbered, draggable */
.pp-wp { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #d4145a; color: #fff; border: 3px solid #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
  font: 700 13px/1 system-ui, sans-serif; cursor: grab; display: grid; place-items: center; }
.pp-wp:active { cursor: grabbing; }

/* small menus on the map (long-press, a route point) */
.pp-menu .maplibregl-popup-content { padding: 10px 12px; }
.pp-menu-body { display: grid; gap: 6px; min-width: 200px; }
.pp-menu-body button { min-height: 44px; }
.pp-menu-body input { min-height: 44px; }
.pp-menu-body .pp-row { margin: 4px 0 0; }

/* the first-open warning */
.pp-warn { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 16px; max-width: 460px; margin: 0 auto; padding: 14px 16px; border-radius: 14px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid currentColor; box-shadow: 0 8px 28px rgb(0 0 0 / 0.3); }
.pp-warn p { margin: 6px 0 10px; color: var(--text); }
.pp-warn button { min-height: 44px; }

/* ---------- navigation readouts: high contrast, big numbers (works in sunlight) */
.pp-nav { --ro-bg: #ffffff; --ro-text: #000000; --ro-lbl: #333333; --ro-line: #000000; --ro-warn: #b00020;
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; background: var(--ro-bg); color: var(--ro-text); border-top: 3px solid var(--ro-line);
  border-radius: 14px 14px 0 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgb(0 0 0 / 0.3); }
@media (prefers-color-scheme: dark) { .pp-nav { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; --ro-warn: #ff6b6b; } }
.pp-nav-head { display: flex; align-items: center; gap: 8px; }
.pp-nav-to { flex: 1; min-width: 0; display: grid; }
.pp-nav-to strong { font-size: 1.15rem; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere;   /* long names: 2 lines, then … */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pp-nav-lbl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ro-lbl); }
.pp-nav-tide { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 12px; background: var(--ro-bg);
  color: var(--ro-text); border: 2px solid var(--ro-line); border-radius: 999px; font-weight: 800; }
@media (max-width: 899px) { .pp-nav-tide { padding: 0; width: 44px; justify-content: center; } .pp-nav-tide .pp-nav-tide-lbl { display: none; } }
.pp-nav-stop { min-height: 44px; padding: 0 18px; background: var(--ro-text); color: var(--ro-bg); border-radius: 999px; font-weight: 800; }
.pp-ro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 6px; border: 2px solid var(--ro-line); border-radius: 10px; overflow: hidden; }
.pp-ro { display: grid; align-content: start; padding: 5px 8px 6px; border-left: 2px solid var(--ro-line); border-top: 2px solid var(--ro-line); min-width: 0; }
.pp-ro:nth-child(3n + 1) { border-left: 0; }
.pp-ro:nth-child(-n + 3) { border-top: 0; }
.pp-ro strong { font-size: 1.55rem; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ro small { font-size: 0.78rem; font-weight: 700; color: var(--ro-lbl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ro.xte.off strong, .pp-ro.xte.off small { color: var(--ro-warn); }
.pp-nav-end, .pp-nav-gps { margin: 6px 2px 0; font-size: 0.88rem; font-weight: 700; }
.pp-nav-gps { color: var(--ro-warn); }
.pp-nav-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-nav-btns button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; background: var(--ro-bg); color: var(--ro-text); border: 2px solid var(--ro-line); font-weight: 800; }
.pp-nav-btns button:disabled { opacity: 0.4; }
.pp-nav-lock { padding-top: 6px; }
.pp-nav-lock .lock-note { margin: 4px 0; }
.pp-nav-lock .lock-note a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
body.pp-sheet-open .pp-nav { display: none; }   /* phones: one panel at a time (the sheet is on top) */

/* ---------- wide screens: a left column for the search, panel and readouts */
@media (min-width: 900px) {
  .pp-top { right: auto; width: 380px; }
  .plot-page .maplibregl-ctrl-top-right { top: 0; }
  .pp-sheet { left: 12px; right: auto; bottom: auto; top: var(--pp-top, 118px); width: 380px; max-height: calc(100% - var(--pp-top, 118px) - 12px);
    border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.25); padding-bottom: 0; }
  .pp-nav { left: 12px; right: auto; bottom: 12px; width: 380px; border: 3px solid var(--ro-line); border-radius: 16px; }
  body.pp-sheet-open .pp-nav { display: block; }
  body.pp-sheet-open[data-mode="nav"] .pp-sheet { max-height: calc(100% - var(--pp-top, 118px) - 350px); }
  .pp-warn { left: auto; right: 60px; bottom: 40px; margin: 0; }
}
@media (max-width: 380px) { .pp-ro strong { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .pp-banner.rec .rec-dot { animation: none; box-shadow: 0 0 0 3px rgb(229 50 45 / 0.35); } }

/* tap-for-details pop-ups (js/plot-info.js), restyled with the page tokens */
.np-pop { max-width: min(320px, calc(100vw - 32px)) !important; z-index: 4; }
/* phones: leave the map buttons (right, 44 px + margins) clear; js/plot-info.js also nudges the map so the pop-up sits left of them */
@media (max-width: 899px) { .np-pop { max-width: min(320px, calc(100vw - 84px)) !important; } }
.np-pop .maplibregl-popup-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 4px 18px rgb(14 26 43 / 0.25); padding: 12px 44px 10px 14px; font: inherit; font-size: 0.92rem; max-height: min(50dvh, 420px); overflow-y: auto; }
.np-pop.pp-menu .maplibregl-popup-content { padding: 10px 12px; }
.np-pop .maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; color: var(--muted); border-radius: 0 14px 0 10px; background: transparent; padding: 0; }
.np-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .np-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.np-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.np-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip, .np-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.np-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.np-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.np-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.np-title { font-weight: 700; font-size: 1rem; line-height: 1.3; display: flex; gap: 8px; align-items: baseline; }
.np-sub { color: var(--muted); font-size: 0.82rem; margin-top: 1px; }
.np-lines { margin: 6px 0 0; padding: 0; list-style: none; }
.np-lines li { margin: 3px 0; padding-left: 12px; position: relative; }
.np-lines li::before { content: '·'; position: absolute; left: 2px; color: var(--muted); font-weight: 700; }
.np-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.35); align-self: center; }
.np-item { border-top: 1px solid var(--border); }
.np-item:first-of-type { border-top: 0; }
.np-item > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 4px 0; }
.np-item > summary::-webkit-details-marker { display: none; }
.np-item > summary .np-title::after { content: '▸'; margin-left: auto; color: var(--muted); font-weight: 400; }
.np-item[open] > summary .np-title::after { content: '▾'; }
.np-item > .np-lines { margin: 0 0 8px; }
.np-more, .np-ctx { color: var(--muted); font-size: 0.82rem; margin-top: 6px; }
.np-ctx { border-top: 1px solid var(--border); padding-top: 6px; }
.np-foot { color: var(--muted); font-size: 0.75rem; margin-top: 8px; }
.np-foot b { color: var(--warn-text); font-weight: 700; }
.np-msg { padding: 4px 0; }
.np-act { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.np-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  vertical-align: -2px; margin-right: 8px; animation: np-spin 0.8s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-spin { animation: none; } }
.pp-dialog .pp-row { margin-top: 4px; }
.plot-page .maplibregl-canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* while navigating, toasts show at the top (the readouts fill the bottom) */
body[data-mode="nav"] .toast { bottom: auto; top: calc(var(--hdr-h, 56px) + 10px); transform: translate(-50%, -12px); }   /* fades in / out below the header (never slides over its buttons) */
body[data-mode="nav"] .toast.show { transform: translate(-50%, 0); }

/* "Tides & currents" overlay (js/plot-currents.js): the time strip under the chips + the Layers legend */
.pp-tc { display: grid; gap: 2px; padding: 4px 8px 4px 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); }
.pp-tc[hidden] { display: none; }
.dir-drop:not([hidden]) ~ .pp-tc { display: none; }
.pp-tc-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--text); border: 0; font-size: 1.1rem; cursor: pointer; }
.pp-tc-x:hover { background: var(--bg); }
/* the clock map button (round, in the right-hand stack): shows the chosen time when it isn't Now and the strip is shut */
.plot-page .maplibregl-ctrl.pp-tc-ctl[hidden] { display: none; }
.plot-page .maplibregl-ctrl-group button.pp-tc-btn { display: grid; place-items: center; align-content: center; gap: 0; color: #fff; }
.plot-page .maplibregl-ctrl-group button.pp-tc-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 3px #7fd0ff; }
.pp-tc-btn .pp-tc-badge { display: none; font: 800 10px/1 system-ui, sans-serif; color: #fff; background: #b45309; border-radius: 6px; padding: 2px 3px; margin-top: -1px; white-space: nowrap; }
.pp-tc-btn.later { gap: 1px; }
.pp-tc-btn.later svg { width: 18px; height: 18px; }
.pp-tc-btn.later .pp-tc-badge { display: block; }
.pp-tc-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-tc-now { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; flex: none; }
.pp-tc-now[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-tc-rng { position: relative; flex: 1 1 auto; min-width: 0; --tc-night-c: color-mix(in srgb, #1d2f66 38%, transparent); }
.pp-tc-rng input[type=range] { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pp-tc-night { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 5px; border-radius: 3px; background: var(--tc-night, none); pointer-events: none; }
@media (prefers-color-scheme: dark) { .pp-tc-rng { --tc-night-c: color-mix(in srgb, #8fb0ff 45%, transparent); } }
.pp-tc-sun { margin: 0 4px 2px 6px; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.pp-tc-sun:empty { display: none; }
.pp-tc output { flex: none; min-width: 7.6em; text-align: right; font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-tc.pp-tc-later output { color: #b45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-tc.pp-tc-later output { color: #f0ad3a; } }
.pp-tc-info { margin: 0 4px 2px 6px; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.pp-tc-info:empty { display: none; }
.pp-tc-info .offline-note { display: inline; padding: 0; margin: 0; background: none; border: 0; font-size: inherit; }
.pp-tc-at { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.86rem; }
.pp-tc-at[hidden] { display: none; }
.pp-tc-legend { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 0.78rem; color: var(--muted); }
.pp-tc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pp-tc-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
@media (max-width: 899px) { .pp-tc-info:has(> .pp-tc-plain) { display: none; } }

/* ---------- safety: man overboard (js/plot-mob.js) + anchor watch (js/plot-anchor.js). Always red / high contrast. */
.pp-mob-btn { position: absolute; z-index: 10; top: 10px; right: 10px; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  background: #d00000; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 14px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.25);
  font: 900 15px/1 system-ui, sans-serif; letter-spacing: 0.03em; display: grid; place-items: center; cursor: pointer; }
.pp-mob-btn:hover { background: #b00000; }
.pp-mob-btn:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.pp-mob-btn.on { animation: pp-mob-pulse 1.2s ease-out infinite; }
@keyframes pp-mob-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 0 0 / 0.7); } 70% { box-shadow: 0 0 0 14px rgb(255 0 0 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 0 0 / 0); } }
/* phones: the search bar stops short of the MOB button (it sits in the top-right corner, beside the search, never under a panel;
   the chips start below it) */
@media (max-width: 899px) { .pp-search, .pp-top .dir-drop { margin-right: 66px; } }
@media (min-width: 900px) { .plot-page .maplibregl-ctrl-top-right { top: 70px; } }

/* the MOB spot on the chart: a yellow / red ring that pulses (a picture: no taps) */
.pp-mob-mark { width: 40px; height: 40px; border-radius: 50%; background: #ffd400; border: 4px solid #d00000; box-shadow: 0 0 0 3px #fff, 0 2px 10px rgb(0 0 0 / 0.5);
  display: grid; place-items: center; pointer-events: none; animation: pp-mob-pulse 1.2s ease-out infinite; }
.pp-mob-mark span { font: 900 10px/1 system-ui, sans-serif; color: #000; letter-spacing: 0.02em; }

/* the MOB panel: takes the bottom panel's place (phones) / the left column (wide) while a MOB is marked */
.pp-mob { --ro-bg: #ffffff; --ro-text: #000000; --ro-lbl: #333333; --ro-line: #000000;
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background: var(--ro-bg); color: var(--ro-text); border-top: 4px solid #d00000;
  border-radius: 14px 14px 0 0; padding: 0 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgb(0 0 0 / 0.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-mob { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; } }
:root[data-theme="dark"] .pp-mob { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; }
body.pp-mob-on .pp-sheet, body.pp-mob-on .pp-nav { display: none !important; }
.pp-mob-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -10px; padding: 8px 12px; background: #d00000; color: #fff;
  border-radius: 10px 10px 0 0; }
.pp-mob-title { white-space: nowrap; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; }
.pp-mob-el { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.pp-mob-el b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pp-mob-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; margin-top: 8px; border: 2px solid var(--ro-line); border-radius: 10px; overflow: hidden; }
.pp-mob-cell { display: grid; align-content: start; gap: 1px; padding: 6px 7px; border-left: 2px solid var(--ro-line); min-width: 0; }
.pp-mob-cell:first-child { border-left: 0; }
.pp-mob-cell small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ro-lbl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mob-cell strong { font-size: 1.7rem; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mob-cell > span { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob-steer { white-space: normal; overflow-wrap: anywhere; }   /* "You're there" / "Head 245°T" wraps instead of being cut on narrow phones (UI check 2026-10-06) */
.pp-mob-arrow-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pp-mob-arrow-wrap b { font-size: 0.95rem; font-weight: 900; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
#mob-arrow { flex: none; color: #d00000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #mob-arrow { color: #ff4d4d; } }
#mob-arrow.pp-mob-dim { opacity: 0.3; }
.pp-mob-pos { margin: 6px 2px 0; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-mob-note { display: inline; font-weight: 600; color: var(--ro-lbl); }
.pp-mob-call { margin: 2px 2px 0; font-size: 0.85rem; font-weight: 600; color: var(--ro-lbl); }
.pp-mob-btns { display: flex; gap: 8px; margin-top: 8px; }
.pp-mob-btns button { flex: 1 1 0; min-height: 52px; padding: 0 10px; border-radius: 999px; font-size: 1rem; font-weight: 900; }
#mob-silence { background: #d00000; color: #fff; border: 2px solid #d00000; }
#mob-silence[aria-pressed="true"] { background: var(--ro-bg); color: var(--ro-text); border-color: var(--ro-line); }
#mob-clear { background: var(--ro-bg); color: var(--ro-text); border: 2px solid var(--ro-line); }
/* "MOB marked · Undo" (5 s), over the search bar next to the button */
.pp-mob-undo { position: absolute; z-index: 10; top: 10px; left: 10px; right: 76px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 4px 14px; border-radius: 16px; background: #1a1a1a; color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / 0.4); font-size: 0.95rem; }
.pp-mob-undo[hidden] { display: none; }
.pp-mob-undo .muted { color: #cfcfcf; }
.pp-mob-undo button { min-height: 48px; padding: 0 20px; border-radius: 999px; background: #ffd400; color: #000; border: 0; font-weight: 900; font-size: 1rem; }
/* toasts go to the top while the MOB panel fills the bottom */
body.pp-mob-on .toast { bottom: auto; top: calc(var(--hdr-h, 56px) + 76px); transform: translate(-50%, -12px); }
body.pp-mob-on .toast.show { transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .pp-mob { left: 12px; right: auto; bottom: 12px; width: 380px; border: 3px solid var(--ro-line); border-top: 4px solid #d00000; border-radius: 16px; }
  .pp-mob-head { border-radius: 12px 12px 0 0; }
  .pp-mob-undo { left: auto; right: 76px; width: 340px; }
}
@media (max-width: 380px) { .pp-mob-cell strong { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .pp-mob-btn.on, .pp-mob-mark { animation: none; } }

/* anchor watch: the map button, the strip under the chips, the chart mark, the alarm */
.plot-page .maplibregl-ctrl-group button.pp-anchor-ctl { display: grid; place-items: center; color: #fff; }
.plot-page .maplibregl-ctrl-group button.pp-anchor-ctl[aria-pressed="true"] { background: #15803d; box-shadow: inset 0 0 0 3px #a7f3c0; }
.pp-an-mark { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111; border: 2px solid #15803d; display: grid; place-items: center;
  font-size: 17px; line-height: 1; box-shadow: 0 1px 6px rgb(0 0 0 / 0.4); pointer-events: none; }
.pp-an-strip { display: flex; align-items: stretch; gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface); border: 2px solid #15803d;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); }
.pp-an-strip[hidden] { display: none; }
.dir-drop:not([hidden]) ~ .pp-an-strip { display: none; }
.pp-an-strip.out { border-color: #d00000; background: color-mix(in srgb, #d00000 10%, var(--surface)); }
.pp-an-open { flex: 1 1 auto; min-width: 0; min-height: 48px; display: grid; gap: 1px; padding: 2px 8px; background: transparent; color: var(--text); border: 0;
  border-radius: 12px; text-align: left; font: inherit; font-size: 0.92rem; cursor: pointer; }
.pp-an-open:hover { background: var(--bg); }
.pp-an-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pp-an-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-an-line b { font-variant-numeric: tabular-nums; }
.pp-an-state { flex: none; padding: 1px 8px; border-radius: 999px; background: #15803d; color: #fff; font-size: 0.78rem; font-weight: 800; }
.pp-an-strip.out .pp-an-state { background: #d00000; }
.pp-an-sub { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-an-strip.warn .pp-an-sub { color: var(--warn-text); font-weight: 700; }
.pp-an-stop { flex: none; min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; align-self: center; }
.pp-an-seg { flex-wrap: nowrap; }
.pp-an-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pp-an-row input { width: 6.5em; min-height: 44px; flex: none; }
.pp-an-row #an-sug { min-width: 0; }
.pp-an-seg button { flex: 1 1 auto; padding: 0 10px; font-size: 0.9rem; white-space: nowrap; }
.pp-an-radius { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pp-an-radius > span { flex: none; }
.pp-an-radius input[type=range] { flex: 1 1 auto; min-width: 0; width: auto; }
.pp-an-acts { flex-wrap: nowrap; }
.pp-an-acts button { flex: 1 1 0; padding: 0 10px; white-space: nowrap; }
.pp-an-bad { color: #c00000; font-weight: 800; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-an-bad { color: #ff6b63; } }
.pp-an-note { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.84rem; line-height: 1.35; }
.pp-an-off { margin-top: 8px; }
.pp-an-off input, .pp-an-off select { min-height: 44px; }
.pp-an-where { margin: 6px 0 0; min-height: 1.2em; }
.anchor .pp-grid2 input[type=number] { min-height: 44px; }
.anchor input[type=range] { display: block; width: 100%; height: 44px; margin: 0; accent-color: #15803d; }
.anchor output { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pp-an-live { display: grid; gap: 0; margin: 2px 0 4px; font-size: 1rem; }
.pp-an-live b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.pp-an-warn { color: var(--warn-text); font-weight: 700; font-size: 0.9rem; }
.anchor .pp-actions button.danger { background: #b3261e; color: #fff; border-color: #b3261e; }
/* the alarm: the whole chart area turns red */
.pp-an-alarm { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(190 0 0 / 0.93); color: #fff;
  animation: pp-an-flash 1s steps(2, jump-none) infinite; }
.pp-an-alarm[hidden] { display: none; }
@keyframes pp-an-flash { 50% { background: rgb(120 0 0 / 0.95); } }
.pp-an-alarm-box { max-width: 440px; text-align: center; }
.pp-an-alarm-box p { margin: 6px 0; font-size: 1.05rem; font-weight: 600; }
.pp-an-alarm-title { font-size: 1.5rem !important; font-weight: 900 !important; letter-spacing: 0.06em; text-transform: uppercase; }
.pp-an-alarm-big { font-size: 2.2rem !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pp-an-alarm-btns { display: grid; gap: 10px; margin-top: 16px; }
.pp-an-alarm-btns button { min-height: 56px; border-radius: 999px; font-size: 1.1rem; font-weight: 900; background: #fff; color: #b00000; border: 0; }
.pp-an-alarm-btns button + button { background: transparent; color: #fff; border: 2px solid #fff; }
@media (prefers-reduced-motion: reduce) { .pp-an-alarm { animation: none; } }

/* Route check (js/plot-routes.js + js/route-check.js): leg colours green / orange / red, what to look at, tap → the spot. */
.pp-check { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pp-check.bare { padding: 0; border: 0; background: none; }
.pp-check-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.pp-check-for { margin-left: auto; }
.pp-check-for .link { font-size: inherit; min-height: 44px; display: inline-flex; align-items: center; }
.pp-check-src { margin: 6px 0 0; font-size: 0.75rem; }
.pp-check-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pp-check-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; min-height: 44px; padding: 7px 9px; text-align: left; font: inherit;
  font-size: 0.86rem; font-weight: 400; line-height: 1.3; color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-left-width: 4px; border-radius: 8px; cursor: pointer; }
.pp-check-item:disabled { cursor: default; }
.pp-check-item.lv-blocked { border-left-color: #dc2626; }
.pp-check-item.lv-caution { border-left-color: #d97706; }
.pp-check-item.lv-note { border-left-color: var(--muted); }
.pp-check-item .rc-ico { flex: none; width: 1.2em; text-align: center; }
.pp-check-more { margin-top: 6px; font-size: 0.86rem; }
.pp-check-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent-strong); }   /* (was 32 px: a 39 px tap target next to the list; UI check 2026-10-06) */
.rc-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: transparent;
  border: 2px solid var(--border); vertical-align: -1px; }
.pp-check-head .rc-dot { width: 14px; height: 14px; margin: 0; }
.rc-dot.st-ok { background: #15803d; border-color: #15803d; }
.rc-dot.st-caution { background: #d97706; border-color: #d97706; }
.rc-dot.st-blocked { background: #dc2626; border-color: #dc2626; }
.rc-dot.st-nodata, .rc-dot.st-offline { background: transparent; border: 2px dashed var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-dot.st-ok { background: #22c55e; border-color: #22c55e; }
  :root:not([data-theme="light"]) .rc-dot.st-caution { background: #f59e0b; border-color: #f59e0b; }
  :root:not([data-theme="light"]) .rc-dot.st-blocked { background: #f87171; border-color: #f87171; }
  :root:not([data-theme="light"]) .pp-check-item.lv-blocked { border-left-color: #f87171; }
  :root:not([data-theme="light"]) .pp-check-item.lv-caution { border-left-color: #f59e0b; }
}
:root[data-theme="dark"] .rc-dot.st-ok { background: #22c55e; border-color: #22c55e; }
:root[data-theme="dark"] .rc-dot.st-caution { background: #f59e0b; border-color: #f59e0b; }
:root[data-theme="dark"] .rc-dot.st-blocked { background: #f87171; border-color: #f87171; }

/* New route, auto first (js/plot-routes.js): pick the ends, "Planning a route…", failures, the planned route's notes. */
.pp-ask { margin: 8px 0 4px; }
.pp-pick-sum { margin: 2px 0; overflow-wrap: anywhere; }
.pp-pick-pins { margin: 6px 0; }
.pp-pick-pin { min-height: 44px; padding-block: 6px; }
.pp-pick-pin strong { overflow-wrap: anywhere; }
.pp-busy { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 1.05rem; }
.pp-spin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: pp-spin 0.9s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp-spin { animation-duration: 3s; } }
.pp-planfail { margin: 8px 0 2px; color: var(--text); }
.pp-note { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 0.86rem; }
.pp-auto-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; }
.pp-auto-bar .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.88rem; }
.pp-assumed { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.pp-assumed .link { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }
.pp-sheet-body > .pp-check-more > summary { min-height: 44px; }
.pp-auto-notes { margin: 0 0 4px; padding-left: 1.2em; display: grid; gap: 4px; font-size: 0.86rem; }

/* ---------- offline chart areas (js/offline-areas.js) */
.pp-oa-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pp-oa-entry button { min-height: 44px; padding: 0 16px; }
.oa .pp-row > button, .oa-opt, .oa-name input { min-height: 44px; }
.oa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oa-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.oa-main { display: grid; gap: 2px; overflow-wrap: anywhere; }
.oa-btns { align-items: center; margin: 8px 0 0; }
.oa-warn { color: var(--warn, #b45309); }
.oa-over { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #dc2626 12%, var(--surface)); border: 1px solid #dc2626; color: var(--text); }
.oa-opts { display: grid; gap: 6px; }
.oa-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.oa-opt input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.oa-opt > span { display: grid; gap: 2px; }
.oa-name { display: grid; gap: 4px; margin-top: 10px; }
.oa-name input { width: 100%; box-sizing: border-box; }
.oa-bar { height: 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.oa-bar > i { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.oa .lock-note a { display: inline-flex; align-items: center; min-height: 44px; }
/* Route options (js/plot-routes.js): up to 3 cards side by side (time · distance · fuel, badges); the selected one is outlined. */
.pp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 6px 0; }
.pp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; min-width: 0; padding: 7px 8px; text-align: left;
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pp-opt[aria-checked="true"] { border: 2px solid var(--accent); padding: 6px 7px; background: var(--bg); box-shadow: 0 0 0 1px var(--accent) inset; }
.pp-opt-time { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.2; display: flex; align-items: center; gap: 6px; }
/* each option's colour: its swatch here, its line on the map (plot-routes.js OPT_COLORS); the selected card also carries it as a band */
.pp-opt-sw { flex: none; width: 14px; height: 6px; border-radius: 3px; background: var(--opt-c, var(--accent)); box-shadow: 0 0 0 1.5px var(--surface); }
.pp-opt { border-left: 5px solid var(--opt-c, var(--border)); }
.pp-opt[aria-checked="true"] { border-left: 6px solid var(--opt-c, var(--accent)); }
.pp-opt-sub { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-opt-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pp-tag { font-size: 0.7rem; font-weight: 700; line-height: 1.25; padding: 1px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.pp-tag.warn { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.pp-tag.note { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.pp-opt-wait { flex-direction: row; align-items: center; gap: 6px; cursor: default; color: var(--muted); }
.pp-opt-wait .pp-spin { width: 14px; height: 14px; border-width: 2px; }
.pp-cruise { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.pp-cruise .link { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }
/* "This route crosses water shallower than your boat needs in N places" (top of the panel; open → each place, tap → the map flies there) */
.pp-shallow { margin: 8px 0 4px; border-radius: 10px; background: var(--err-bg); color: var(--err-text); font-size: 0.88rem; }
.pp-shallow > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; line-height: 1.3; }
.pp-shallow > .pp-check-list { margin: 0; padding: 0 6px 6px; }

/* Stops (js/plot-routes.js): From / stops / To fields like a car navigator; ⇅ swaps; ＋ Add stop; ↑ ↓ on the field being edited. */
.pp-stops { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; margin: 4px 0 6px; }
.pp-stop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.pp-stop { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pp-stop-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800;
  background: var(--surface); color: #d4145a; border: 2px solid #d4145a; }
.pp-stop:last-child .pp-stop-dot { background: #d4145a; color: #fff; }
.pp-stop-in { flex: 1; min-width: 0; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; text-overflow: ellipsis; }
.pp-stop.on .pp-stop-in { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pp-stop-btn { flex: none; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; font-size: 1.05rem; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 10px; }
.pp-stop-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--border); }
.pp-stop-btn:disabled { opacity: 0.35; }
.pp-stops-side { grid-column: 2; grid-row: 1; }
.pp-swap { font-size: 1.3rem; border-color: var(--border); }
.pp-stops-bar { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; }   /* ＋ Add stop at the right end (Done to its left) */
.pp-stops-bar .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; }
.pp-stop-res .pp-ask { margin-top: 4px; }
/* The panel folded away: a small bar that opens it again */
.pp-peek { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; font: inherit; font-weight: 700;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 22px rgb(0 0 0 / 0.28); }
.pp-peek[hidden] { display: none; }
body.pp-sheet-open .pp-peek { display: none; }   /* a folded route's bar waits while another sheet (Layers, Tides, a place card) is open */
body:has(#nav:not([hidden])) .pp-peek { display: none; }   /* the navigation panel takes the bottom of the screen: a folded route bar must not sit over its buttons */
.pp-peek-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .pp-peek { right: auto; bottom: auto; top: var(--pp-top, 118px); width: 380px; } }
body.pp-mob-on .pp-peek { display: none !important; }
/* "When to leave" (js/route-depart.js): best vs now, a bar per half hour (taller = longer trip), a slider, flags, tide notes. */
.pp-depart { margin: 4px 0 2px; padding-top: 0; border-top: 0; }
.pp-depart:has(.pp-dep-fold[open]) { margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.pp-dep-h { margin: 0 0 6px; font-size: 1rem; }
.pp-dep-fold > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.pp-dep-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 0; }
.pp-dep-picks.one { grid-template-columns: minmax(0, 1fr); }
.pp-dep-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 7px 9px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pp-dep-pick[aria-pressed="true"] { border: 2px solid var(--accent); padding: 6px 8px; background: var(--bg); }
.pp-dep-pick strong { font-size: 0.88rem; line-height: 1.25; }
.pp-dep-min { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pp-dep-pick small { font-size: 0.76rem; color: var(--muted); line-height: 1.3; }
.pp-dep-best, .pp-dep-none { margin: 4px 0; font-size: 0.9rem; }
.pp-dep-chart { display: flex; align-items: flex-end; gap: 1px; height: 46px; margin: 8px 0 0; }
.pp-dep-chart i { flex: 1 1 0; min-width: 0; background: var(--border); border-radius: 2px 2px 0 0; }
.pp-dep-chart i.now { background: var(--muted); }
.pp-dep-chart i.best { background: var(--accent); }
.pp-dep-chart i.nodepth { background: repeating-linear-gradient(135deg, #dc2626 0 2px, var(--border) 2px 4px); box-shadow: inset 0 3px 0 #dc2626; }
.pp-dep-chart i.nodepth.now { background: repeating-linear-gradient(135deg, #dc2626 0 2px, var(--muted) 2px 4px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-dep-chart i.nodepth { background: repeating-linear-gradient(135deg, #f87171 0 2px, var(--border) 2px 4px); box-shadow: inset 0 3px 0 #f87171; } }
:root[data-theme="dark"] .pp-dep-chart i.nodepth { background: repeating-linear-gradient(135deg, #f87171 0 2px, var(--border) 2px 4px); box-shadow: inset 0 3px 0 #f87171; }
.pp-dep-depth { margin: 6px 0 2px; font-size: 0.9rem; font-weight: 500; }
.pp-dep-depth.lv-blocked, .pp-dep-nodepth, .pp-dep-best.lv-low { color: var(--err-text); }
.pp-dep-nostn { margin: 6px 0 2px; font-size: 0.85rem; color: var(--muted); }
button.pp-dep-spot { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; text-align: left; font-weight: 400; color: inherit; cursor: pointer; }
.pp-dep-chart i.sel { outline: 2px solid var(--text); outline-offset: 0; }
.pp-dep-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-dep-range { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.pp-dep-sel { margin: 2px 0 4px; font-size: 0.9rem; }
.pp-dep-sel .link { display: inline-flex; align-items: center; min-height: 44px; }
.pp-dep-flags { margin: 2px 0; }
.pp-dep-tide { margin: 6px 0 2px; font-size: 0.9rem; }
.pp-dep-spot { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 0.88rem; line-height: 1.35; }
.pp-dep-spot.lv-tight, .pp-dep-spot.lv-range { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.pp-dep-spot.lv-low { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.pp-depart .lock-note a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Settings (⚙ in ⋯ More): tabs, one section at a time */
.pp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.pp-tabs button { min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--text); border: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; }
.pp-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pp-st-panel[hidden] { display: none; }
.pp-st-panel label { display: grid; gap: 4px; }
.pp-st-panel label.check { display: flex; }
.pp-st-link { margin: 0 0 2px; }
.pp-st-link .link, .pp-hint .link { min-height: 44px; padding: 0 4px; }

/* ---------- Recording… overlay (Record starts at once; everything in it is optional) */
.pp-rec-ov .pp-sheet-head h2 { display: flex; align-items: center; gap: 8px; }
.pp-rec-ov .pp-sheet-head .rec-dot { width: 12px; height: 12px; animation: pp-rec-pulse 1.6s ease-out infinite; }
.pp-ov-det { border-top: 1px solid var(--border); }
.pp-ov-det > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; font-weight: 650; }
.pp-ov-body { padding: 2px 0 10px; display: grid; gap: 8px; }
.pp-ov-body .trip-block { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-ov-body .trip-block legend { font-weight: 650; padding: 0; margin-bottom: 4px; }
.pp-ov-body .trip-engine { display: grid; gap: 4px; }
.pp-ov-body .check-list { display: grid; gap: 2px; }
.pp-ov-body .check-list .check { min-height: 44px; }
.pp-ov-go { position: sticky; bottom: 0; margin: 6px 0 0; padding: 8px 0 2px; background: var(--surface); }
.pp-ov-go button { width: 100%; min-height: 56px; font-size: 1.1rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pp-rec-ov .pp-sheet-head .rec-dot { animation: none; } }
.pp-tc-scale { margin: 0 4px 0 6px; font-size: 0.74rem; line-height: 1.2; color: var(--muted); }

/* The route-result card (js/plot-routes.js cardHtml): the selected route's numbers, Depart at, the hazards headline, Go / Review / Save */
.pp-card { display: grid; gap: 6px; margin: 6px 0 8px; padding: 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.pp-card-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.pp-card-nums strong { display: block; font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pp-card-nums small { display: block; font-size: 0.74rem; color: var(--muted); min-height: 1.2em; }
.pp-card-nums small .link { font-size: 0.74rem; min-height: 0; padding: 0; text-decoration: underline; }
.pp-card-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); text-align: left; font-weight: 500; }
.pp-card-row > span:first-child { color: var(--muted); }
.pp-card-row strong { flex: 1; min-width: 0; }
.pp-card-haz > span:first-child { flex: none; }
.pp-card-dep { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 6px; }
.pp-card-tide { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; line-height: 1.3; }
.pp-card-tide[hidden] { display: none; }
.pp-card-tide .rc-dot { flex: none; }
.pp-card-row .pp-card-tide > span:first-child { color: inherit; }
.pp-card-btns { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }   /* Go takes the room; "Save route" never breaks onto two lines (UI check 2026-10-06) */
.pp-card-btns button { min-height: 48px; padding: 0 14px; justify-content: center; font-weight: 800; white-space: nowrap; }
.pp-review[hidden] { display: none; }