/* =====================================================================
   Pelagic State - Light theme finish (2026-10-27, UI lane)

   One place for the light theme's colours. Loaded LAST in map.html so it
   sits on top of the many older light-theme patches. Dark theme is not
   touched: every rule below starts with body.theme-light.

   Why the repeated .theme-light: older inline rules use up to four
   repeats plus !important; five repeats (plus the html element) wins
   without fighting rule order. Keep new light rules in this file.

   Palette (contrast on white): text 14.7:1, text-2 6.0:1, text-3 4.9:1,
   accent 5.8:1, accent-strong 6.8:1.
   ===================================================================== */

body.theme-light {
  --pl-page: #eef3f7;
  --pl-surface: #ffffff;
  --pl-surface-2: #f4f7fa;
  --pl-surface-grad: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  --pl-sheet-grad: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
  --pl-line: rgba(15, 42, 64, 0.10);
  --pl-line-2: rgba(15, 42, 64, 0.17);
  --pl-line-3: rgba(15, 42, 64, 0.28);
  --pl-text: #0f2a40;
  --pl-text-2: #4e6679;
  --pl-text-3: #5d7385;
  --pl-accent: #0a6aa6;
  --pl-accent-strong: #075f94;
  --pl-accent-soft: #e8f3fb;
  --pl-accent-soft-2: #d6ebf8;
  --pl-accent-line: #9ccbea;
  --pl-brand: #35bfff;
  --pl-primary: linear-gradient(180deg, #23a0e6 0%, #0b70b2 100%);
  --pl-primary-hover: linear-gradient(180deg, #33aaee 0%, #0d79c0 100%);
  --pl-on: linear-gradient(180deg, #2ea6ec 0%, #0d6fb6 58%, #0a5c99 100%);
  --pl-danger: #b42318;
  --pl-danger-soft: #fdeceb;
  --pl-danger-line: #f1b3ad;
  --pl-warn: #8a5300;
  --pl-good: #1b7f4f;
  --pl-shadow-1: 0 1px 2px rgba(15, 42, 64, 0.07), 0 2px 6px rgba(15, 42, 64, 0.06);
  --pl-shadow-2: 0 1px 2px rgba(15, 42, 64, 0.08), 0 8px 22px rgba(15, 42, 64, 0.14);
  --pl-shadow-3: 0 2px 6px rgba(15, 42, 64, 0.08), 0 22px 56px rgba(15, 42, 64, 0.22);
  --pl-ring: 0 0 0 3px rgba(10, 106, 166, 0.22);
  --pl-backdrop: rgba(17, 38, 58, 0.30);
}

/* ---------------------------------------------------------------------
   1. Lite / Pro / Custom selector
   The shared pressed style (custom-views.css) is a dark navy pill; on a
   light chart that read as a hole, and LITE's blue text vanished on it.
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mode-toggle {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--pl-line-2) !important;
  box-shadow: var(--pl-shadow-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mode-toggle button {
  color: var(--pl-text-2) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mode-toggle button[aria-pressed="true"] {
  background: var(--pl-on) !important;
  color: #ffffff !important;
  border: 1px solid #0b6aa8 !important;
  text-shadow: 0 1px 1px rgba(4, 40, 70, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(11, 106, 168, 0.35) !important;
}

/* ---------------------------------------------------------------------
   2. Map buttons (Lite overlays, Custom rail, marks, locate, Tools)
   Keep the existing pearl finish; soften the outline so they sit lighter
   on the chart. "On" overlays use one clear brand blue.
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-tools-launcher, .mark-manager-btn, .mark-fab, .locate-control .locate-btn, .ps-lite-ov-btn:not([aria-pressed="true"]), .active-trip-badge, .layer-panel.fully-collapsed) {
  border-color: rgba(15, 42, 64, 0.26) !important;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(33, 66, 91, 0.10), 0 1px 2px rgba(15, 42, 64, 0.16), 0 6px 14px rgba(15, 42, 64, 0.18) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-ov-btn[aria-pressed="true"] {
  background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 62%), var(--pl-on) !important;
  border-color: #0b6aa8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(53, 191, 255, 0.28), 0 6px 14px rgba(11, 90, 150, 0.32) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-ov-btn[aria-pressed="true"] :is(svg, span) {
  color: #ffffff !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-ov-btn:not([aria-pressed="true"]) span {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-ov-btn:disabled {
  opacity: 0.5;
}

/* ---------------------------------------------------------------------
   3. Shared surfaces: panels, sheets, cards, dialogs
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-modal, .wptmgr-modal, .credits-modal, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-signout-confirm, .ps-upgrade-card, .ps-welcome-card) {
  background: var(--pl-surface-grad) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--pl-shadow-3) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-signout-confirm)::backdrop {
  background: var(--pl-backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-modal-overlay, .wptmgr-overlay, .ps-lite-sheet) {
  background: var(--pl-backdrop) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.active-trip-quickswitch, .new-trip-panel, .coord-search-panel, .mobile-measure-bar, .draw-toolbox, .offline-info, .offline-finder-panel) {
  background: var(--pl-surface-grad) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: var(--pl-shadow-2) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-lite-bg-panel, .ps-custom-dock) {
  background: var(--pl-surface-grad) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line-2) !important;
  box-shadow: var(--pl-shadow-2) !important;
}

/* Headings and close buttons in every panel. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-modal-header, .wptmgr-header, .ps-custom-dialog h2, .ps-delete-dialog h2, .ps-mark-details-dialog h2, .ps-feedback-form h2) {
  color: var(--pl-text) !important;
  border-color: var(--pl-line) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-modal-close, .settings-hub-back, .wptmgr-close, .new-trip-panel-close, .coord-search-close) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-modal-close, .settings-hub-back):hover {
  color: var(--pl-accent) !important;
  background: var(--pl-accent-soft) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .settings-hub-back {
  border-color: var(--pl-line-2) !important;
  background: var(--pl-surface) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-group-label, .settings-group-title) {
  color: var(--pl-accent-strong) !important;
}

/* ---------------------------------------------------------------------
   4. Settings rows (hub, Help & About, System & App)
   Help/System titles were hard-coded near-white: invisible on light.
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-hub-row, .settings-help-row, .settings-system-row) {
  background: var(--pl-surface) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: var(--pl-shadow-1) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-hub-row, .settings-help-action):hover {
  border-color: var(--pl-accent-line) !important;
  background: #fbfdff !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-hub-row strong, .settings-help-row-text strong, .settings-system-row-text strong, .settings-system-row strong, .settings-help-value) {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-hub-row small, .settings-help-row-text small, .settings-system-row-text small, .settings-help-label, .settings-help-diagnostics, .settings-hub-intro, .settings-group-hint) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.settings-help-arrow, .settings-hub-chevron) {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .settings-option {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .settings-option:has(input:checked) {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .settings-layer-group-label {
  color: var(--pl-text-2) !important;
}

/* ---------------------------------------------------------------------
   5. Buttons and fields (shared)
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :where(.settings-system-action, .temp-scale-reset, .trip-set-active-btn, .coord-search-paste, .waypoint-new-trip-btn, .active-trip-create-btn, .active-trip-cancel-btn, .ps-account-btn:not(.primary):not(.ps-danger), .ps-custom-dialog button, .ps-custom-dock button:not(.ps-custom-picker), .ps-custom-editfoot button, .ps-mark-details-actions button, .ps-feedback-actions button, .ps-signout-confirm button, .offline-progress-cancel, .offline-finder-buttons button, .mobile-measure-bar button, .ps-mark-visibility-toolbar button, .wpt-popup-actions button, .mark-popup-actions button, .query-copy-btn, .query-share-btn, .query-gpx-btn, .query-waypoint-btn, .query-mark-btn, .query-done-btn) {
  background: var(--pl-surface) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-line-2) !important;
  box-shadow: 0 1px 2px rgba(15, 42, 64, 0.08) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :where(.ps-custom-primary, .ps-feedback-actions .primary, .mobile-measure-done, .coord-search-go, .ps-account-btn.primary, .ps-custom-dialog .ps-custom-primary, .ps-custom-editbar .ps-custom-primary, .offline-finder-buttons .offline-finder-go, .wptmgr-modal .waypoint-new-trip-btn.primary) {
  background: var(--pl-primary) !important;
  color: #ffffff !important;
  border: 1px solid #0b6aa8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(11, 106, 168, 0.28) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-primary, .coord-search-go, .mobile-measure-done):disabled {
  opacity: 0.45;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :where(.ps-custom-danger, .ps-account-btn.ps-danger, .ps-custom-dialog .ps-custom-danger, .wpt-popup-actions button.delete, .mark-popup-actions button.delete) {
  background: var(--pl-danger-soft) !important;
  color: var(--pl-danger) !important;
  border: 1px solid var(--pl-danger-line) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dialog, .ps-custom-editor, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-signout-confirm, .wptmgr-modal, .settings-modal, .coord-search-panel, .new-trip-panel, .active-trip-quickswitch, .ps-mark-visibility-toolbar) :is(input:not([type="range"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
  background: #ffffff !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line-3) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 2px rgba(15, 42, 64, 0.05) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(input:not([type="range"]):not([type="radio"]):not([type="checkbox"]), select, textarea):focus {
  border-color: var(--pl-accent) !important;
  box-shadow: var(--pl-ring) !important;
  outline: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(input, textarea)::placeholder {
  color: #7d909f !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-dialog, .ps-custom-editor, .ps-custom-editbar, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog) :focus-visible {
  outline-color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--pl-accent);
}

/* ---------------------------------------------------------------------
   6. Custom (viewing card, editor, views list) - light like the Lite card
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-dock {
  border-radius: 18px !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-dock .ps-custom-picker {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-caret, .ps-custom-view-row.active .ps-custom-view-open b::before) {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-description {
  color: var(--pl-text) !important;
  font-weight: 550;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-age, .ps-custom-view-open span, .ps-custom-foot, .ps-custom-temperature-hint, .ps-custom-sechead i) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-note, .ps-custom-status, .ps-custom-warn) {
  color: var(--pl-warn) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-editor) .ps-custom-blend {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-editor) .ps-custom-blend output {
  color: var(--pl-text-2) !important;
  font-weight: 650;
}
/* Slider track on white: same handle as the Pro dock, darker empty track. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-editor) input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--ps-range-fill) 0 calc(var(--p, .5) * 100%), #d5e0e8 calc(var(--p, .5) * 100%) 100%);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-editor) input[type="range"]::-moz-range-track {
  background: #d5e0e8;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-dock, .ps-custom-editor) input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 2px 5px rgba(15, 42, 64, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Editing bar and editor sheet. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-custom.ps-custom-editing .ps-custom-editbar {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--pl-text) !important;
  border-bottom: 1px solid var(--pl-line) !important;
  box-shadow: 0 6px 18px rgba(15, 42, 64, 0.12) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-editbar .ps-custom-ghost {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-edittitle small {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-edittitle b {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-custom.ps-custom-editing .ps-custom-editor {
  background: var(--pl-sheet-grad) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  border-bottom: 0 !important;
  box-shadow: 0 -10px 34px rgba(15, 42, 64, 0.20) !important;
}
@media (min-width: 621px) {
  html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-custom.ps-custom-editing .ps-custom-editor {
    border-bottom: 1px solid var(--pl-line) !important;
    box-shadow: var(--pl-shadow-3) !important;
  }
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-grab {
  background: #c4d2dc !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-custom-namefield span, .ps-custom-sechead) {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-chip {
  background: var(--pl-surface) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line-2) !important;
  box-shadow: 0 1px 2px rgba(15, 42, 64, 0.06) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-chip[aria-pressed="true"] {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
  border-color: var(--pl-accent) !important;
  box-shadow: inset 0 0 0 1px var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-chip:disabled {
  opacity: 0.4;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-toggle {
  border-bottom-color: var(--pl-line) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-toggle input {
  background: #c9d6df !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-toggle input:checked {
  background: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-toggle input::after {
  box-shadow: 0 1px 3px rgba(15, 42, 64, 0.30);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-temperature {
  border-color: var(--pl-line-2) !important;
  background: var(--pl-surface-2) !important;
}

/* Views list (bottom sheet on phones). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-view-row {
  background: var(--pl-surface) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: var(--pl-shadow-1) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-view-row.active {
  background: var(--pl-accent-soft) !important;
  border-color: var(--pl-accent-line) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-dialog .ps-custom-view-open {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-dialog .ps-custom-close {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-editor,
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-custom-dialog {
  scrollbar-color: #9cb6c9 transparent;
}

/* ---------------------------------------------------------------------
   7. Layers sheet / panel and the Pro dock
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .layer-panel:not(.fully-collapsed) :is(.layer-panel-header-title-text, .layer-panel-title) {
  color: var(--pl-text) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .layer-panel:not(.fully-collapsed) .layer-panel-header-title > svg {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .layer-panel:not(.fully-collapsed) .layer-panel-minimize {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-save-custom {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-accent-line) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font: 650 12.5px/1.2 system-ui, -apple-system, sans-serif !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-save-custom:hover {
  background: var(--pl-accent-soft-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-strip-head span:first-child {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) :is(.ps-sheet-strip-head, .ps-sheet-overlays) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-ov-chip {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-accent-line) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-slot:not(.ps-sheet-slot-free) {
  background: var(--pl-accent-soft) !important;
  border-color: var(--pl-accent-line) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-slot-free {
  color: var(--pl-text-2) !important;
  border-color: var(--pl-line-2) !important;
  background: transparent !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .layer-active .ps-sheet-tag {
  color: var(--pl-accent-strong) !important;
  border-color: var(--pl-accent-line) !important;
  background: var(--pl-accent-soft) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .layer-active .ps-sheet-tag.is-overlay {
  color: var(--pl-text-2) !important;
  border-color: var(--pl-line-2) !important;
  background: var(--pl-surface-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-section {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) :is(.ps-sheet-sub, .freshness, .ps-sst-auto-text small, .ps-sheet-guide-text small, .ps-sheet-count, .layer-panel-offline-status) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .layer-panel:not(.fully-collapsed) :is(.isotherm-toggle-label, .enhance-style-btn) {
  background: var(--pl-surface) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-accent-line) !important;
  text-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .layer-panel:not(.fully-collapsed) :is(.isotherm-toggle-label:has(input:checked), .enhance-style-btn[aria-pressed="true"]) {
  background: var(--pl-on) !important;
  color: #ffffff !important;
  border-color: #0b6aa8 !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-guide {
  background: var(--pl-accent-soft) !important;
  border: 1px solid var(--pl-accent-line) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-guide-text b {
  color: var(--pl-text) !important;
}

/* Pro dock rows: Lines / Enhance chips and the kind tag. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-pro-dock-enhance {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
  border-color: var(--pl-accent-line) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-pro-dock-enhance[aria-pressed="true"] {
  background: var(--pl-on) !important;
  color: #ffffff !important;
  border-color: #0b6aa8 !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-pro-dock-kind {
  color: var(--pl-text-2) !important;
  border-color: var(--pl-line-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-pro-dock-row {
  background: var(--pl-surface) !important;
  border-color: var(--pl-line) !important;
  box-shadow: 0 1px 2px rgba(15, 42, 64, 0.06) !important;
}

/* ---------------------------------------------------------------------
   8. Lite bottom card and Chart background sheet
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-bg-panel {
  border-radius: 18px !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-sheet-panel {
  background: var(--pl-sheet-grad) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: 0 -10px 34px rgba(15, 42, 64, 0.20) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-sheet-grip {
  background: #c4d2dc !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-sheet-title h2 {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-sheet-title span {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-tile {
  background: var(--pl-surface) !important;
  color: var(--pl-text) !important;
  border: 1.5px solid var(--pl-line) !important;
  box-shadow: var(--pl-shadow-1) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-tile[aria-pressed="true"] {
  background: var(--pl-accent-soft) !important;
  border-color: var(--pl-accent) !important;
  box-shadow: inset 0 0 0 1px var(--pl-accent), var(--pl-shadow-1) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-tile-note {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-tile-swatch {
  box-shadow: inset 0 0 0 1px rgba(15, 42, 64, 0.10);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-sst-auto-text b) {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-sst-auto-text small) {
  color: var(--pl-text-2) !important;
}

/* ---------------------------------------------------------------------
   9. Tools: search, measure, offline, marks/trips managers
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.mobile-coord-label, .coord-search-hint, .desktop-measure-header) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .coord-search-header {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mobile-coord-sign-btn {
  background: var(--pl-accent-soft) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-accent-line) !important;
  font-weight: 700 !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mobile-coord-sign-picker {
  background: var(--pl-surface) !important;
  border-color: var(--pl-line-2) !important;
  box-shadow: var(--pl-shadow-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mobile-coord-sign-picker button {
  background: var(--pl-surface) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .coord-search-error {
  color: var(--pl-danger) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mobile-measure-total {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .offline-finder-buttons .offline-finder-go {
  background: linear-gradient(180deg, #2f9a66 0%, #1f7a4e 100%) !important;
  border-color: #1f7a4e !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .offline-finder-buttons .offline-finder-go:disabled {
  opacity: 1 !important;
  background: #e3ebe7 !important;
  border-color: #c9d6cf !important;
  color: #6c8077 !important;
  box-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mark-visibility-toolbar {
  border-color: var(--pl-line) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mark-visibility-toolbar small {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mark-row .ps-mark-name {
  background: var(--pl-surface) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mark-row .ps-mark-name:hover {
  border-color: var(--pl-accent) !important;
  background: var(--pl-accent-soft) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .mark-row .mark-row-btn {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.wptmgr-footer, .wptmgr-stats, .trip-count) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .wptmgr-footer button {
  color: var(--pl-accent-strong) !important;
}

/* ---------------------------------------------------------------------
   10. Account, deletion, mark details, feedback, sign-out dialogs
   (all were dark-only)
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-delete-status) {
  color: var(--pl-warn) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-account-consent {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-account-consent a {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-avatar-choice[aria-pressed="true"] {
  border-color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mark-snapshot {
  background: var(--pl-surface-2) !important;
  border: 1px solid var(--pl-line) !important;
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mark-snapshot small {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-feedback-details, .ps-feedback-outbox) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-feedback-status {
  color: var(--pl-warn) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-beta-feedback-submit {
  background: var(--pl-surface) !important;
  color: var(--pl-accent-strong) !important;
  border-color: var(--pl-accent-line) !important;
}

/* ---------------------------------------------------------------------
   11. Confirm dialogs (delete mark/trip, choose-a-trip), plan popups,
   chart popup links
   --------------------------------------------------------------------- */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-overlay {
  background: var(--pl-backdrop) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.ps-delete-title) {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-message {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-warning {
  background: var(--pl-danger-soft) !important;
  border-color: var(--pl-danger-line) !important;
  color: var(--pl-danger) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-warning.ps-trip-warning-icon {
  background: #fff4e0 !important;
  border-color: #f0c27a !important;
  color: var(--pl-warn) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-cancel {
  background: var(--pl-surface) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-line-2) !important;
  box-shadow: 0 1px 2px rgba(15, 42, 64, 0.08) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-delete-confirm {
  background: var(--pl-danger-soft) !important;
  color: var(--pl-danger) !important;
  border: 1px solid var(--pl-danger-line) !important;
  box-shadow: none !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-trip-warning-action {
  background: var(--pl-primary) !important;
  color: #ffffff !important;
  border: 1px solid #0b6aa8 !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-upgrade-title {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-offline-reminder .ps-upgrade-title {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-upgrade-sub {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .leaflet-popup :is(button.copy, .popup-gpx-btn, .popup-share-pair button) {
  color: var(--pl-accent) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: var(--pl-shadow-2) !important;
  border: 1px solid var(--pl-line) !important;
  background: var(--pl-surface) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .leaflet-popup-tip {
  background: var(--pl-surface) !important;
}
/* The confirming action (last button) in mark dialogs reads as primary. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-mark-details-actions button:last-child {
  background: var(--pl-primary) !important;
  color: #ffffff !important;
  border: 1px solid #0b6aa8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(11, 106, 168, 0.28) !important;
}

/* Layers panel top strip groups (OVERLAYS / COLOUR LAYERS). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) :is(.ps-sheet-group-head, .ps-sheet-strip-head) {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) :is(.ps-sheet-group-head, .ps-sheet-strip-head) span:first-child {
  color: var(--pl-accent-strong) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked .layer-panel:not(.fully-collapsed) .ps-sheet-overlays + .ps-sheet-colours {
  border-top-color: var(--pl-line) !important;
}

/* Layers button (Lite card + Pro dock): light tile, keeps its blue ring. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-bg-chevron {
  background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #dbe7f0 0%, #c3d5e3 55%, #aec5d7 100%) !important;
  border: 1.5px solid #2fa8e8 !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(53, 191, 255, 0.22), 0 0 10px rgba(53, 191, 255, 0.35), 0 3px 8px rgba(15, 42, 64, 0.20) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lite-bg-chevron .ps-lite-layers-img {
  width: 36px !important;
  height: 36px !important;
}
/* Same tile when the Pro dock is put away (desktop top-right Layers square). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked.ps-dock-hidden .layer-panel.fully-collapsed > .layer-panel-restore-btn {
  background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #dbe7f0 0%, #c3d5e3 55%, #aec5d7 100%) !important;
  border: 1.5px solid #2fa8e8 !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(53, 191, 255, 0.22), 0 0 10px rgba(53, 191, 255, 0.35), 0 3px 8px rgba(15, 42, 64, 0.20) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light.ps-pro-docked.ps-dock-hidden .layer-panel.fully-collapsed > .layer-panel-restore-btn img {
  width: 36px !important;
  height: 36px !important;
}

/* ---------------------------------------------------------------------
   12. Audit sweep (27 Oct): remaining dark-only bits
   --------------------------------------------------------------------- */
/* Layers list bottom fade: it copied the panel's (dark) base colour. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .ps-lp-fade {
  background: linear-gradient(180deg, rgba(243, 247, 250, 0) 0%, rgba(243, 247, 250, 0.96) 100%) !important;
}
/* Short messages (e.g. "Copied"). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .global-toast {
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: var(--pl-shadow-2) !important;
}
/* Data refresh status square (top left). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .refresh-status {
  background: var(--pl-surface-grad) !important;
  color: var(--pl-text) !important;
  border-color: var(--pl-line-2) !important;
  box-shadow: var(--pl-shadow-1) !important;
}
/* Dropdown lists inside managers. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.wptmgr-sort, .wptmgr-modal select, .settings-modal select) option {
  background: #ffffff !important;
  color: var(--pl-text) !important;
}
/* Draw tool panel (inside the Tools tray). */
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(#ps-tools-drawer, body) .draw-toolbox-actions button {
  background: var(--pl-surface) !important;
  color: var(--pl-accent-strong) !important;
  border: 1px solid var(--pl-line-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .draw-toolbox-close {
  color: var(--pl-text-2) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light :is(.draw-toolbox-size label, .draw-toolbox-header) {
  color: var(--pl-text) !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .draw-color-btn.active {
  border-color: var(--pl-text) !important;
}

/* Settings title (Help & About etc.) was the dark theme's light blue. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .settings-hub-modal .settings-modal-header > span {
  color: var(--pl-text) !important;
}
/* White draw colour needs an edge on a white panel. */
html body.theme-light.theme-light.theme-light.theme-light.theme-light .draw-color-btn {
  box-shadow: inset 0 0 0 1px rgba(15, 42, 64, 0.22) !important;
}

/* ---------------------------------------------------------------------
   Scrollbars with pill-shaped ends (both themes, Rosco 27 Oct).
   Chrome ignores ::-webkit-scrollbar styling while scrollbar-color is
   set, so that is reset here for the app's own scrolling panels.
   --------------------------------------------------------------------- */
body :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info) {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}
body :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
body :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info)::-webkit-scrollbar-track {
  background: rgba(53, 191, 255, 0.12) padding-box !important;
  border: 3px solid transparent !important;
  border-radius: 999px !important;
  margin: 10px 0 !important;
}
body :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info)::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5fd0ff 0%, #2f86d8 100%) padding-box !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  min-height: 40px;
}
body :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info)::-webkit-scrollbar-corner {
  background: transparent;
}
html body.theme-light :is(.settings-modal-body, .settings-modal, .wptmgr-body, .wptmgr-modal, .layer-guide-body, .credits-modal, .ps-custom-editor, .ps-custom-dialog, .ps-delete-dialog, .ps-mark-details-dialog, .ps-feedback-dialog, .ps-lite-sheet-panel, .active-trip-quickswitch, .coord-search-panel, .offline-info)::-webkit-scrollbar-track {
  background: rgba(15, 42, 64, 0.07) padding-box !important;
}
html body.theme-light.theme-light.theme-light.theme-light.theme-light .desktop-measure-header {
  color: var(--pl-text) !important;
  border-color: var(--pl-line) !important;
}