/* Authored night palette. Loaded by media preference or browser auto-dark detection. */
:root {
  color-scheme: only dark;
  --sand-surface: #142626;
  --shell-surface: #1b3030;
  --page-fg: #fff3db;
  --page-soft: #c0d4ca;
  --page-accent: #ffbd70;
  --page-line: rgba(214, 241, 222, .25);
  --page-card: #223b3a;
  --shell-card: #243d3a;
  --page-edge: #648a7d;
  --field-bg: #102523;
}
.band--sunset {
  --bg: #512c24; --fg: var(--page-fg); --soft: #ead2c5;
  --accent: #ffca7a; --line: rgba(255, 209, 174, .3);
  --card: #643a30; --outline: #b87556;
}
.band--mango { --bg: #4c3818; --fg: var(--page-fg); --soft: #ead8b5; --accent: var(--mango); }
.band--sunset .trio p, .band--sunset .steps p { color: var(--soft); }
.band--sunset .trio article { border-top-color: var(--line); }
.panel, .tile, .filters button, .quote-form, .storm-col, .check-group {
  color: var(--fg); border-color: var(--outline); box-shadow: 0 5px 0 #070f0e;
}
.tile[aria-selected="true"] { color: var(--ink); border-color: var(--sunset); }
.filters button[aria-pressed="true"] { background: var(--mango); color: var(--ink); }
.bigphone, .check-offer, .reach-number { color: var(--page-accent); }
.check-offer:hover { color: var(--page-fg); }
.check input:checked ~ .check-text { color: var(--page-soft); }
.check-box { background: var(--field-bg); border-color: var(--page-edge); }
.field input, .field select, .field textarea, .draft textarea, .reach textarea {
  background: var(--field-bg); color: var(--page-fg); border-color: var(--page-edge);
  caret-color: var(--page-fg); color-scheme: only dark;
}
.field ::placeholder { color: #afc4ba; opacity: 1; }
.field select option { background: var(--field-bg); color: var(--page-fg); }
.field input:autofill {
  -webkit-text-fill-color: var(--page-fg); caret-color: var(--page-fg);
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
}
dialog { background: var(--sand-surface); color: var(--page-fg); border-color: var(--page-edge); }
.viewer-photo { background: var(--shell-surface); border-color: var(--page-edge); }
.viewer-photo figcaption, .viewer-copy .note { color: var(--page-soft); }
.reach .soft { color: var(--page-soft); }
.viewer-copy .tagline, .viewer-nav button, .dialog-close { color: var(--ink); color-scheme: only light; }
.skip { background: var(--sand-surface); color: var(--page-fg); }
.route-road, .route-stops li:not(:last-child)::before { box-shadow: 0 0 0 1px var(--page-edge); }
.band--sand :focus-visible, .band--shell :focus-visible, .band--sunset :focus-visible,
.check input:focus-visible + .check-box { outline-color: var(--mango); }

/* Aggressive auto-dark engines can still repaint black text on a bright button.
   Give those controls deeper tropical colors and a light foreground to begin with. */
.auto-dark-theme .btn:not(.btn--cream):not(.btn--ink) {
  --btn-bg: #9b3b0d; --btn-fg: #fff3db;
}
.auto-dark-theme .tile[aria-selected="true"], .auto-dark-theme .dock .dock-main,
.auto-dark-theme .sticker { background: #9b3b0d; color: #fff3db; }
.auto-dark-theme .filters button[aria-pressed="true"], .auto-dark-theme .callout,
.auto-dark-theme .step-n, .auto-dark-theme .ticker, .auto-dark-theme .dialog-close,
.auto-dark-theme .viewer-copy .tagline { background: #604117; color: #fff3db; }
.auto-dark-theme .check input:checked + .check-box { background: #604117; }
.auto-dark-theme .check input:checked + .check-box::after { border-color: #fff3db; }

/* A forced-dark renderer can invert SVG fill colors and a bright daytime sky.
   Use a night sky and normalize silhouette paint after that conversion. */
.auto-dark-theme .sky-day {
  --sky: linear-gradient(180deg, #0c0a22 0%, #24143d 48%, #51283c 84%, #6f3525 100%);
  --sea: linear-gradient(180deg, #254448 0%, #103e43 50%, #145951 100%);
  --scene-fg: #fff3d6; --scene-soft: #e0ccbc;
  --sun-glow: rgba(220, 143, 44, .4);
  --glint: rgba(255, 204, 135, .8);
  --cloud: linear-gradient(90deg, transparent, rgba(182, 111, 82, .4), transparent);
}
.auto-dark-theme .sky-day .scene-stars { display: block; opacity: .4; }
.auto-dark-theme .palm, .auto-dark-theme .islands,
.auto-dark-theme .scene-birds, .auto-dark-theme .boat-bob { filter: brightness(0); }
.auto-dark-theme .scene-sun {
  filter: brightness(0) invert(84%) sepia(62%) saturate(885%) hue-rotate(345deg);
}