/* NautPlot night mode (js/plot-night.js writes <body data-night="dim|red">).
   Dim: the dark colours of the app on every panel, even when the phone is in light mode (the chart itself is dimmed by plot-map.js).
   Red: red on black everywhere (text 7:1 or better on the panels) so the helm keeps its night vision; the chart goes through a red filter.
   Safety things (MOB, anchor alarm, the red shallow / danger colours) stay red, they are the point of the page. */
body.plot-page[data-night="dim"] {
  --bg: #0b1829; --surface: #13243b; --text: #edf4fd; --muted: #a8bad3; --border: #243c5e; --accent: #38b6ff; --accent-text: #061a30;
  --ok-bg: #16311f; --ok-text: #a8e0b5; --err-bg: #3a1714; --err-text: #f4b3ab; --warn-bg: #362a0b; --warn-text: #f2d48a;
  --band-top: #103a70; --band-bottom: #0b1829; color-scheme: dark;
}
body.plot-page[data-night="dim"] .pp-nav, body.plot-page[data-night="dim"] .pp-mob { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; --ro-warn: #ff6b6b; }
body.plot-page[data-night="dim"] .pp-tc-rng { --tc-night-c: color-mix(in srgb, #8fb0ff 45%, transparent); }

body.plot-page[data-night="red"] {
  --bg: #000000; --surface: #140000; --text: #ff6a5e; --muted: #e0554a; --border: #7a1f19; --accent: #ff6a5e; --accent-text: #000000;
  --chrome: #000000; --chrome-text: #ff6a5e; --chrome-link: #ff6a5e;
  --ok-bg: #1c0000; --ok-text: #ff8a7e; --err-bg: #2a0000; --err-text: #ff9d92; --warn-bg: #2a0a00; --warn-text: #ff9a7a;
  --band-top: #000000; --band-bottom: #000000; --surface-2: #260000;
  --ro-bg: #000000; --ro-text: #ff6a5e; --ro-lbl: #e0554a; --ro-line: #ff6a5e; --ro-warn: #ff9d92;
  --brand-from: #5c1410; --brand-to: #5c1410;
  color-scheme: dark; background: #000;
}
body.plot-page[data-night="red"] .pp-nav, body.plot-page[data-night="red"] .pp-mob { --ro-bg: #000000; --ro-text: #ff6a5e; --ro-lbl: #e0554a; --ro-line: #ff6a5e; --ro-warn: #ff9d92; }
body.plot-page[data-night="red"] .pp-tc-rng { --tc-night-c: color-mix(in srgb, #ff6a5e 30%, transparent); }
/* the chart (and its own buttons, markers, scale) through a red filter */
body.plot-page[data-night="red"] #map { filter: grayscale(1) brightness(0.62) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.05); }
body.plot-page[data-night="red"] header.top, body.plot-page[data-night="red"] .fm-launch, body.plot-page[data-night="red"] .fm-panel,
body.plot-page[data-night="red"] .rc-dot, body.plot-page[data-night="red"] .pp-legend i { filter: grayscale(1) brightness(0.75) sepia(1) hue-rotate(-50deg) saturate(6); }
body.plot-page[data-night="red"] :is(.pp-chip, .pp-banner, .pp-tc, .nb-strip, .nb-ms, .pp-an-strip, .pp-sheet, .pp-nav, .pp-menu, #float-strip, .np-pop) { box-shadow: none; border-color: var(--border); }
body.plot-page[data-night="red"] :is(.nb-alert, .nb-alert.warn) { background: #3a0000; color: #ff8a7e; border: 2px solid #ff6a5e; }
body.plot-page[data-night="red"] .nb-alert button, body.plot-page[data-night="red"] .nb-recenter button { background: #ff6a5e; color: #000; border: 0; }
body.plot-page[data-night="red"] .nb-ms { border-color: #ff6a5e; }
body.plot-page[data-night="red"] .nb-ms-btns button[data-done], body.plot-page[data-night="red"] #measure-btn[aria-pressed="true"] { background: #ff6a5e; color: #000; border-color: #ff6a5e; }
body.plot-page[data-night="red"] .nb-bad, body.plot-page[data-night="red"] .pp-an-bad { color: #ff9d92; }
body.plot-page[data-night="red"] .pp-tc.pp-tc-later output, body.plot-page[data-night="red"] .pp-access { color: #ff9a7a; }
body.plot-page[data-night="red"] .pp-banner.rec button { background: #7a1f19; color: #ffd9d4; }
body.plot-page[data-night="red"] .pp-banner.rec .rec-dot { background: #ff6a5e; outline: 0; }
body.plot-page[data-night="red"] .pp-mob-undo { background: #140000; color: #ff6a5e; border: 2px solid #ff6a5e; }
body.plot-page[data-night="red"] .pp-mob-undo button { background: #ff6a5e; color: #000; }
body.plot-page[data-night="red"] .pp-an-strip { border-color: #ff6a5e; }
body.plot-page[data-night="red"] .pp-an-state { background: #7a1f19; color: #ffd9d4; }
body.plot-page[data-night="red"] .anchor input[type=range], body.plot-page[data-night="red"] .pp-tc input[type=range] { accent-color: #ff6a5e; }
body.plot-page[data-night="red"] ::placeholder { color: #c4463c; }
body.plot-page[data-night="red"] :is(.pp-sheet, .pp-dialog, dialog.sheet, .pp-banner:not(.rec), #float-strip, .nb-ms, .pp-an-strip, .pp-nav-lock) :is(button:not(.secondary):not(.pp-x):not(.link), .button:not(.secondary)) { background: #5c1410; color: #ffd9d4; border-color: #7a1f19; }
body.plot-page[data-night="red"] :is(.pp-sheet, .pp-dialog, dialog.sheet) :is(button.secondary, .button.secondary), body.plot-page[data-night="red"] .pp-chip, body.plot-page[data-night="red"] .pp-tc-now { background: #140000; color: #ff6a5e; border: 1px solid #7a1f19; }
body.plot-page[data-night="red"] .pp-tc-now[aria-pressed="true"], body.plot-page[data-night="red"] [aria-pressed="true"].pp-chip { background: #ff6a5e; color: #000; border-color: #ff6a5e; }
body.plot-page[data-night="red"] :is(input, select, textarea):not([type=range]):not([type=checkbox]) { background: #140000; color: #ff6a5e; border-color: #7a1f19; }
body.plot-page[data-night="red"] .pp-mi { background: transparent; color: #ff6a5e; border: 0; }
/* The second line inside those red-filled buttons (route card rows, list rows, the recording strip, the anchor strip): the muted red is
   too dark on #5c1410 / #7a1f19 (2.7–3.6:1), so it's a light red there (≥ 7:1; UI check 2026-10-06). */
body.plot-page[data-night="red"] :is(.pp-sheet, .pp-banner, .pp-an-strip, .pp-dock, #float-strip) :is(button, .button):not(.secondary):not(.pp-mi) :is(.muted, small, span:not([class*="dot"])) { color: #ffb3aa; }
body.plot-page[data-night="red"] .pp-x, body.plot-page[data-night="red"] .pp-tc-x { background: transparent; color: #ff6a5e; border: 0; }
/* the panel's drag handle is a button too: it stays an invisible tap area with the little bar (it showed as a red block) */
body.plot-page[data-night="red"] .pp-grip { background: transparent !important; border: 0 !important; }
body.plot-page[data-night="red"] .pp-grip i { background: #ff6a5e; }
/* The anchor alarm and MOB stay the loudest things on the screen (their own red); only the glare is cut */
body.plot-page[data-night="red"] .pp-an-alarm { background: rgb(120 0 0 / 0.95); }
/* route options (plot-routes.js OPT_COLORS): their swatches in reds, in the same brightness order as their lines through the chart's filter */
body.plot-page[data-night="red"] .pp-opt[data-opt="0"] { --opt-c: #c0473e !important; }
body.plot-page[data-night="red"] .pp-opt[data-opt="1"] { --opt-c: #ff8a7e !important; }
body.plot-page[data-night="red"] .pp-opt[data-opt="2"] { --opt-c: #7a1f19 !important; }