/* ============================================
   RiverReady — night
   ============================================

   Day and night rather than light and dark, because the whole app is a
   sky. The palette variables in app.css are re-pointed here; nothing
   else in the CSS has to know which mode it's in.

   The weather still reads the same way at night — clear is a calm dark
   blue, a storm is nearly black — so the same glance still works after
   dark, which is when most people are worried about a river.
   ============================================ */

/* Contrast is the whole job here.
   
   Night redefines the tokens once and every surface, border and piece
   of text follows. Before this there were 143 individual overrides and
   the ones I missed rendered dark navy on near-black — unreadable, and
   exactly the kind of thing that only shows up on someone's phone at
   night. Body text is #eef4fa on #101d2b, about 15:1. */
:root[data-theme="night"] {
  --mist:     #101d2b;
  --shallow:  #16283a;
  --current:  #2c5a7d;
  --deep:     #8cc7f0;
  --riverbed: #eef4fa;
  --white:    #1b2c3d;

  --ink:        #eef4fa;
  --ink-85:     rgba(238, 244, 250, 0.92);
  --ink-72:     rgba(238, 244, 250, 0.84);
  --ink-60:     rgba(238, 244, 250, 0.76);
  --ink-55:     rgba(238, 244, 250, 0.72);
  --ink-45:     rgba(238, 244, 250, 0.62);

  /* Lighter than the page, not darker — depth has to read the same way
     round at night as it does by day. */
  --card:       rgba(255, 255, 255, 0.085);
  --card-soft:  rgba(255, 255, 255, 0.055);
  --card-solid: #1b2c3d;

  --edge:       rgba(150, 195, 230, 0.22);
  --edge-soft:  rgba(150, 195, 230, 0.14);

  --on-dark:    #ffffff;
}

:root[data-theme="night"] body {
  color: var(--riverbed);
  background: linear-gradient(180deg, #101d2b 0%, #16283a 100%);
}

/* Cards, panels and inputs are all near-white in day. At night they're
   a shade lighter than the page rather than darker, so depth still
   reads the same way round. */
:root[data-theme="night"] .road,
:root[data-theme="night"] .setting,
:root[data-theme="night"] .gauge-card,
:root[data-theme="night"] .saved-row,
:root[data-theme="night"] .key-box,
:root[data-theme="night"] .how,
:root[data-theme="night"] .route,
:root[data-theme="night"] .profile-card,
:root[data-theme="night"] .empty,
:root[data-theme="night"] .route-trip,
:root[data-theme="night"] .gauge-row,
:root[data-theme="night"] .route-road,
:root[data-theme="night"] .place,
:root[data-theme="night"] .event,
:root[data-theme="night"] .suggest {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(150, 195, 230, 0.18);
}

:root[data-theme="night"] .map-input,
:root[data-theme="night"] .nearme-select,
:root[data-theme="night"] .map-radius,
:root[data-theme="night"] input {
  color: var(--riverbed);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(150, 195, 230, 0.22);
}

:root[data-theme="night"] .tabs {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(150, 195, 230, 0.16);
}

:root[data-theme="night"] .tab { color: rgba(238, 244, 250, 0.75); }
:root[data-theme="night"] .tab--on { color: #0b1622; background: var(--deep); }

:root[data-theme="night"] .btn-small { color: #0b1622; background: var(--deep); font-weight: 600; }
:root[data-theme="night"] .btn-small--quiet { color: var(--deep); background: none; }

:root[data-theme="night"] .chip { color: var(--deep); border-color: rgba(150, 195, 230, 0.3); }
:root[data-theme="night"] .chip--on { color: #0b1622; background: var(--deep); font-weight: 600; }

/* Every muted grey in the day sheet was written as rgba over white.
   These put the same tones back over a dark page. */
:root[data-theme="night"] .road-where,
:root[data-theme="night"] .road-record,
:root[data-theme="night"] .setting-note,
:root[data-theme="night"] .key-text,
:root[data-theme="night"] .app-sub,
:root[data-theme="night"] .app-foot,
:root[data-theme="night"] .data-stamp,
:root[data-theme="night"] .road-count,
:root[data-theme="night"] .nearme-note,
:root[data-theme="night"] .place-where,
:root[data-theme="night"] .saved-where,
:root[data-theme="night"] .gauge-note,
:root[data-theme="night"] .route-note,
:root[data-theme="night"] .empty-text,
:root[data-theme="night"] .history-note,
:root[data-theme="night"] .forecast-source,
:root[data-theme="night"] .rain-source {
  color: rgba(238, 244, 250, 0.78);
}

:root[data-theme="night"] .road-name,
:root[data-theme="night"] .setting-value,
:root[data-theme="night"] .topbar-title,
:root[data-theme="night"] .you-name,
:root[data-theme="night"] .gauge-feet,
:root[data-theme="night"] .empty-title,
:root[data-theme="night"] .saved-name { color: var(--riverbed); }

/* Status tints need more punch against a dark page or they wash out. */
:root[data-theme="night"] .pill--clear { color: #7fe3bd; background: rgba(29, 158, 117, 0.22); }
:root[data-theme="night"] .pill--watch { color: #f0cf8a; background: rgba(176, 125, 26, 0.26); }
:root[data-theme="night"] .pill--avoid { color: #ffa8a8; background: rgba(176, 48, 48, 0.28); }

:root[data-theme="night"] .road-outlook--ok   { color: #7fe3bd; }
:root[data-theme="night"] .road-outlook--warn { color: #f0cf8a; }
:root[data-theme="night"] .road-outlook--bad  { color: #ffa8a8; }

:root[data-theme="night"] .river-pill--normal   { color: #7fe3bd; background: rgba(29, 158, 117, 0.22); }
:root[data-theme="night"] .river-pill--elevated { color: #f0cf8a; background: rgba(176, 125, 26, 0.26); }
:root[data-theme="night"] .river-pill--high     { color: #ffa8a8; background: rgba(176, 48, 48, 0.28); }

:root[data-theme="night"] .rain-box--dry { background: rgba(29, 158, 117, 0.13); }
:root[data-theme="night"] .rain-box--wet { background: rgba(111, 176, 221, 0.15); }
:root[data-theme="night"] .rain-line { color: rgba(232, 241, 248, 0.85); }

:root[data-theme="night"] .forecast { background: rgba(111, 176, 221, 0.1); }
:root[data-theme="night"] .forecast--warn { background: rgba(194, 90, 30, 0.2); }
:root[data-theme="night"] .forecast--close { background: rgba(176, 48, 48, 0.22); }

:root[data-theme="night"] .unusual--clear    { background: rgba(111, 176, 221, 0.12); }
:root[data-theme="night"] .unusual--watch    { background: rgba(176, 125, 26, 0.2); }
:root[data-theme="night"] .unusual--flooding { background: rgba(194, 90, 30, 0.2); }
:root[data-theme="night"] .unusual--avoid    { background: rgba(176, 48, 48, 0.22); }

:root[data-theme="night"] .toast { background: #24384a; }

/* The map is a light-tiled vector style. Rather than swap providers,
   knock it back so it isn't a glowing panel in a dark room. */
:root[data-theme="night"] .map { filter: brightness(0.72) contrast(1.06); }


/* Anything that was a faint grey by design needs lifting at night, or
   it disappears entirely rather than merely receding. */
:root[data-theme="night"] .you-sub,
:root[data-theme="night"] .places-empty,
:root[data-theme="night"] .setting-sub,
:root[data-theme="night"] .road-limit,
:root[data-theme="night"] .gauge-row-meta,
:root[data-theme="night"] .suggest-far,
:root[data-theme="night"] .route-dist,
:root[data-theme="night"] .route-alt,
:root[data-theme="night"] .road-outlook--idle,
:root[data-theme="night"] .history-loading,
:root[data-theme="night"] .map-note,
:root[data-theme="night"] .route-map-note,
:root[data-theme="night"] .watch-note,
:root[data-theme="night"] .detail-stamp,
:root[data-theme="night"] .forecast-levels,
:root[data-theme="night"] .rain-chance,
:root[data-theme="night"] .event-road-where,
:root[data-theme="night"] .year-label,
:root[data-theme="night"] .year-count,
:root[data-theme="night"] .legend-row,
:root[data-theme="night"] .route-road-where {
  color: rgba(238, 244, 250, 0.72);
}

:root[data-theme="night"] .setting-label,
:root[data-theme="night"] .legend-head,
:root[data-theme="night"] .gauge-section,
:root[data-theme="night"] .forecast-title,
:root[data-theme="night"] .rain-title,
:root[data-theme="night"] .route-section,
:root[data-theme="night"] .topbar-eyebrow {
  color: rgba(238, 244, 250, 0.6);
}

:root[data-theme="night"] .road-summary,
:root[data-theme="night"] .gauge-meaning,
:root[data-theme="night"] .unusual-line,
:root[data-theme="night"] .history-summary,
:root[data-theme="night"] .fc-event,
:root[data-theme="night"] .route-advice,
:root[data-theme="night"] .event-date,
:root[data-theme="night"] .how-lead,
:root[data-theme="night"] .how-list {
  color: rgba(238, 244, 250, 0.88);
}

:root[data-theme="night"] .suggest-item:hover { background: rgba(140, 199, 240, 0.16); }
:root[data-theme="night"] .link-quiet { color: var(--deep); }
:root[data-theme="night"] .setting-warn { color: #f3d69a; background: rgba(176, 125, 26, 0.2); }
:root[data-theme="night"] .place-hint,
:root[data-theme="night"] .route-note--bad { color: #ffb3b3; }
:root[data-theme="night"] .route-detour { color: #f3d69a; background: rgba(176, 125, 26, 0.18); }
:root[data-theme="night"] .gauge-fact { border-bottom-color: rgba(150, 195, 230, 0.14); }
:root[data-theme="night"] .gauge-fact span:first-child { color: rgba(238, 244, 250, 0.7); }
:root[data-theme="night"] .detail { border-top-color: rgba(150, 195, 230, 0.16); }
:root[data-theme="night"] .key-foot { color: rgba(238, 244, 250, 0.65); border-top-color: rgba(150, 195, 230, 0.16); }


:root[data-theme="night"] .journey { background: rgba(255,255,255,.055); border-color: rgba(150,195,230,.18); }
:root[data-theme="night"] .journey-name { color: var(--riverbed); }
:root[data-theme="night"] .journey-line { color: rgba(238,244,250,.78); }
:root[data-theme="night"] .journey-prompt { color: rgba(238,244,250,.75); background: rgba(140,199,240,.1); border-color: rgba(140,199,240,.3); }


:root[data-theme="night"] .home-head { color: rgba(238,244,250,.6); }
:root[data-theme="night"] .home-empty { color: rgba(238,244,250,.75); background: rgba(255,255,255,.055); border-color: rgba(150,195,230,.18); }


:root[data-theme="night"] .journey-road { background: rgba(255,255,255,.05); border-color: rgba(150,195,230,.16); }
:root[data-theme="night"] .journey-road-when, :root[data-theme="night"] .journey-none,
:root[data-theme="night"] .map-detail-where, :root[data-theme="night"] .map-detail-when { color: rgba(238,244,250,.7); }
:root[data-theme="night"] .map-detail--on { background: rgba(255,255,255,.06); border-color: rgba(150,195,230,.22); }
:root[data-theme="night"] .map-detail-line { color: rgba(238,244,250,.88); }
:root[data-theme="night"] .route-figure { color: var(--riverbed); }
:root[data-theme="night"] .route-figure--quiet { color: rgba(238,244,250,.65); }
:root[data-theme="night"] .place-pin-label, :root[data-theme="night"] .place-pin-dot { background: #8cc7f0; color: #0b1622; }


:root[data-theme="night"] .switch { background: rgba(238,244,250,.2); }
:root[data-theme="night"] .switch[aria-checked="true"] { background: var(--deep); }
:root[data-theme="night"] .switch-handle { background: #0b1622; }
:root[data-theme="night"] .switch-label { color: var(--riverbed); }


:root[data-theme="night"] .coverage { color: rgba(238,244,250,.82); background: rgba(176,125,26,.16); border-color: rgba(176,125,26,.35); }
:root[data-theme="night"] .coverage strong { color: var(--riverbed); }


:root[data-theme="night"] .pill--stale, :root[data-theme="night"] .pill--unrated { color: #f0cf8a; background: rgba(176,125,26,.26); }
:root[data-theme="night"] .road-outlook--stale { color: #f0cf8a; }

:root[data-theme="night"] .btn-small--danger { color: #fff; background: #b03030; }


/* ---------- Form fields ----------
   Inputs and selects don't inherit page colour, so without this they
   render as dark navy text on a dark field. Every text box in the app
   was invisible at night. */

:root[data-theme="night"] input,
:root[data-theme="night"] select,
:root[data-theme="night"] textarea,
:root[data-theme="night"] .map-input,
:root[data-theme="night"] .nearme-select,
:root[data-theme="night"] .map-radius {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--edge);
  -webkit-text-fill-color: var(--ink);   /* Safari autofill */
}

:root[data-theme="night"] input::placeholder,
:root[data-theme="night"] textarea::placeholder {
  color: rgba(238, 244, 250, 0.5);
}

:root[data-theme="night"] select option {
  color: #eef4fa;
  background: #1b2c3d;
}

:root[data-theme="night"] input:focus,
:root[data-theme="night"] .map-input:focus {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--deep);
  box-shadow: 0 0 0 4px rgba(140, 199, 240, 0.18);
}

/* Autofilled fields in Chrome get a hardcoded near-white background
   unless this is here. */
:root[data-theme="night"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #22384c inset;
  -webkit-text-fill-color: var(--ink);
}


/* ---------- Fields: solid, not translucent ----------
   A translucent field over a translucent card over a gradient is never
   properly dark, and the text fights whatever shows through. These are
   flat near-black so the characters have something to sit on. */

:root[data-theme="night"] input,
:root[data-theme="night"] select,
:root[data-theme="night"] textarea,
:root[data-theme="night"] .map-input,
:root[data-theme="night"] .nearme-select,
:root[data-theme="night"] .map-radius {
  color: #f3f8fc;
  background: #0a121b;
  border-color: rgba(150, 195, 230, 0.35);
  -webkit-text-fill-color: #f3f8fc;
}

:root[data-theme="night"] input:focus,
:root[data-theme="night"] select:focus,
:root[data-theme="night"] .map-input:focus {
  background: #0d1824;
  border-color: var(--deep);
}

/* The dropdown list itself is drawn by the OS and inherits nothing. */
:root[data-theme="night"] select option,
:root[data-theme="night"] select optgroup {
  color: #f3f8fc;
  background: #0a121b;
}

:root[data-theme="night"] .suggest {
  background: #0d1824;
  border-color: rgba(150, 195, 230, 0.3);
}

:root[data-theme="night"] .suggest-item { color: #f3f8fc; }
:root[data-theme="night"] .suggest-item:hover { background: rgba(140, 199, 240, 0.18); }


/* ---------- River gauges ---------- */

:root[data-theme="night"] .gauge-row,
:root[data-theme="night"] .gauge-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(150, 195, 230, 0.22);
}

:root[data-theme="night"] .gauge-row-name,
:root[data-theme="night"] .gauge-name,
:root[data-theme="night"] .gauge-feet,
:root[data-theme="night"] .gauge-row-meta strong { color: #f3f8fc; }

:root[data-theme="night"] .gauge-row-meta,
:root[data-theme="night"] .gauge-meaning,
:root[data-theme="night"] .nearby-sub,
:root[data-theme="night"] .nearby-title { color: rgba(243, 248, 252, 0.82); }


/* ---------- Toast ----------
   Was dark text on a dark panel, because it used --white for its
   lettering and night redefines that to a dark surface colour. */

:root[data-theme="night"] .toast { background: #24384a; color: #ffffff; }
:root[data-theme="night"] .toast--bad { background: #8f2626; color: #ffffff; }
:root[data-theme="night"] .toast--ok  { background: #1d5a3f; color: #ffffff; }