/* Night reading mode (Ian AUTH 2026-10-09). LIVE since the go-live prep of
   2026-10-09: baked into every city home and city issue page at build time
   (network home gets the head script and this file, no toggle).

   Everything keys off html[data-theme]; the inline head script sets that
   attribute before first paint. Colors only: no layout properties change
   except where noted, so toggling never shifts the page. Accent values are
   mirrored from render/night-mode.mjs (NIGHT_PALETTE / NIGHT_ACCENTS); the
   night-mode test cross-checks them and verifies WCAG contrast. */

html[data-theme="night"] {
  color-scheme: dark;
  --paper: #1b1916;
  --ink: #efe7d6;
  --accent: #d4a23a;
  --accent-dark: #e5be6a;
  --gray: #b3a996;
  --dune: #453f34;
}

/* Per-city accents, taken from each city's locked theme icons. Houston's
   rocket flame is terracotta; the sun/lamp cities share the house gold. */
html[data-theme="night"][data-night-city="houston"] {
  --accent: #d08a62;
  --accent-dark: #dfa57f;
}

/* Masthead switch (v2, Ian AUTH 2026-10-09; +40% size, Ian 2026-10-10
   12:43 AM ET): a quiet two-state pill in the style of Kindle / Apple
   Books reader controls. The city's locked sun sits at the left end and
   its moon at the right, both always visible; a knob rides under the icon
   of the current mode, positioned by CSS on data-theme so it is correct
   before night.js runs. Anchored to .page rather than the masthead, so it
   parks in the top padding corner, above and clear of the brand art, the
   home wordmark and the city-menu button at every width. The switch with
   its widest focus ring needs 50px (8px top + 36px pill + 6px ring);
   desktop and home pages pad 64px or more, and mobile issue/share pages
   reserve a 52px strip in issue.css, so the pill can never touch the logo
   or the card at 390 or 1280. Absolute, so it cannot shift layout or add
   scroll extent. */
html[data-theme] .page {
  position: relative;
}
.night-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  box-sizing: border-box;
  width: 67px;
  height: 36px;
  padding: 0;
  border: 1px solid #7d766b;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.night-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The knob sits under the active icon: left under the sun in day, right
   under the moon in night. left: 2px centers it on the left icon; night
   slides it 33px to center on the right icon (2px margins both ends). */
.night-toggle-knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 28px;
  height: 28px;
  translate: 0 -50%;
  border-radius: 50%;
  background: #d2d3cf; /* soft ink tint on paper */
  transition: transform 150ms ease;
}
html[data-theme="night"] .night-toggle-knob {
  transform: translateX(33px);
}
.night-toggle-icon {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: flex;
}
.night-toggle-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}
/* The icon of the current mode is ink over the knob; the other is muted
   over the track. var(--ink) and var(--gray) flip with data-theme, so
   both states restate themselves per mode. */
.night-toggle-icon--day {
  left: 5.5px;
  color: var(--ink);
}
.night-toggle-icon--night {
  right: 5.5px;
  color: var(--gray);
}
html[data-theme="night"] .night-toggle-icon--day {
  color: var(--gray);
}
html[data-theme="night"] .night-toggle-icon--night {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .night-toggle-knob {
    transition: none;
  }
}

/* Night switch: track on the warm dark ground with a muted warm border
   (3.38:1), knob a slightly lighter warm dark. The cream active icon on
   the knob measures 10.62:1; the muted inactive icon on the track 7.54:1.
   The focus ring stays dual tone (accent band plus dark outer band, with
   a transparent outline for forced-colors mode), so a band with at least
   3:1 exists on any background, including the cream backing chip the
   masthead art keeps in night mode. */
html[data-theme="night"] .night-toggle {
  background: #1b1916;
  border-color: #756c5a;
}
html[data-theme="night"] .night-toggle-knob {
  background: #35302a;
}
html[data-theme="night"] .night-toggle:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px #1b1916;
}

/* Houston mobile issues used to tighten the page top padding to 20px and
   needed a right: 0 slide to keep the switch off the brand box; the +40%
   pill (Ian 2026-10-10) instead reserves a 52px top strip on every mobile
   issue/share page (issue.css), so no per-city positioning override
   remains and the 390px corner overlap is gone by construction. */

/* Signup forms (home hero + both issue CTAs): hard-coded white inputs and
   the rust error red need dark-ground values. Buttons and focus rings run
   on the accent vars, so they already follow the per-city accents. */
html[data-theme="night"] .form-row input[type="email"],
html[data-theme="night"] .profile-step input[name="zip"],
html[data-theme="night"] .admin-field input,
html[data-theme="night"] .uid {
  background: #262219;
  color: var(--ink);
  border-color: var(--dune);
}
html[data-theme="night"] .form-row input[type="email"]::placeholder {
  color: var(--gray);
}
html[data-theme="night"] .form-status.is-error {
  color: #d97a68;
}
html[data-theme="night"] .form-row button:focus-visible {
  outline-color: var(--accent);
}

/* Weather strip and chips: the teal/slate values are day-only. */
html[data-theme="night"] .weather-day {
  color: var(--ink);
}
html[data-theme="night"] .weather-day--today {
  background: rgba(212, 162, 58, 0.14);
}
html[data-theme="night"] .weather-day-temps .lo {
  color: var(--gray);
}
html[data-theme="night"] .weather-day-rain {
  color: var(--accent);
}
html[data-theme="night"] .weather-attribution,
html[data-theme="night"] .weather-empty {
  color: var(--gray);
}
html[data-theme="night"] .weather-chip {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="night"] .weather-chip--rain {
  background: var(--accent);
  color: #1b1916;
}
html[data-theme="night"] .weather-insight {
  border-color: var(--accent);
  color: var(--accent);
}
/* Sources control and list (b12, Ian 2026-10-18): muted cream toggle, no
   background tiles or cream chips on the control or the list. Source links
   keep the existing night link colour (the accent vars flip with the
   theme), and the focus ring keeps the accent. */
html[data-theme="night"] .sources-toggle {
  color: var(--gray);
  background: none;
}
html[data-theme="night"] .sources-toggle:focus-visible {
  outline-color: var(--accent);
}
html[data-theme="night"] .item-sources,
html[data-theme="night"] .source-list {
  color: var(--gray);
  background: none;
}
/* AirNow forecast discussion (Ian 2026-10-12): primary night ink; the
   forecast second line stays muted. The credits carry .weather-attribution,
   covered by the rule above. */
html[data-theme="night"] [data-weather-city="slc"] .weather-aqi-discussion {
  color: var(--ink);
}
html[data-theme="night"] [data-weather-city="slc"] .weather-aqi-forecast {
  color: var(--gray);
}
/* SLC day-card detail (Ian 2026-10-12): muted labels use --gray (#b3a996 on
   #1b1916 is about 7:1, above the 4.5:1 floor). EPA dot hues lighten for the
   dark background, maroon and purple especially, while staying recognizable. */
html[data-theme="night"] [data-weather-city="slc"] .weather-day-label {
  color: var(--gray);
}
html[data-theme="night"] [data-weather-city="slc"] .weather-day-rain-value {
  color: var(--accent);
}
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--good { background: #35e635; }
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--moderate { background: #ffee58; }
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--usg { background: #ff9633; }
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--unhealthy { background: #ff5252; }
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--very-unhealthy { background: #c07fd6; }
html[data-theme="night"] [data-weather-city="slc"] .weather-day-aqi-dot--hazardous { background: #d0516f; }

/* Night art swap (Ian 2026-10-09): paired day/night SVGs trade places with
   display only, so no flash and no layout shift. The :not() form leaves the
   night image's own layout classes authoritative in night mode. The rules
   carry !important (Ian 2026-10-09 bugfix): issue.css sets display on
   .issue-layout main > .major-section:first-child
   .section-ornament.section-ornament--accent (0,5,1), which otherwise beats
   these selectors (0,2,1) and shows BOTH versions; display-only toggles make
   !important safe. */
html:not([data-theme="night"]) .night-art {
  display: none !important;
}
html[data-theme="night"] .day-art {
  display: none !important;
}

/* Artwork legibility: photos stay untouched. Line-art SVGs WITHOUT a night
   variant (Berkley art, untwinned weather icons) still draw with strokes
   meant for light paper, so they keep the cream backing chip drawn with
   box-shadow spread: zero layout shift. Swapped pairs carry their own night
   palette, so the chip would only wash them out: they are excluded, the SLC
   night-icon weather twins included (Ian 2026-10-18). The SMLS map
   scans keep their light card below. */
html[data-theme="night"] .section-ornament:not(.day-art):not(.night-art),
html[data-theme="night"] .article-header-art:not(.day-art):not(.night-art),
html[data-theme="night"] .art-rule:not(.day-art):not(.night-art),
html[data-theme="night"] .brand:not(.day-art):not(.night-art),
html[data-theme="night"] .weather-day img:not(.day-art):not(.night-art),
html[data-theme="night"] .weather-chip img:not(.day-art):not(.night-art),
html[data-theme="night"] .weather-insight img:not(.day-art):not(.night-art) {
  background: #efe7d6;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #efe7d6;
}
html[data-theme="night"] .weather-chip img:not(.day-art):not(.night-art),
html[data-theme="night"] .weather-insight img:not(.day-art):not(.night-art) {
  box-shadow: 0 0 0 2px #efe7d6;
}

/* The SMLS map scans keep a light card so their baked-in titles stay
   legible; matched by src so real photos are never carded. */
html[data-theme="night"] .article-figure-set img[src*="smls"] {
  background: #f3ecdc;
  border-radius: 4px;
  box-shadow: 0 0 0 8px #f3ecdc;
}

/* Cookie banner: cream/charcoal/teal is hard-coded in consent.css, so the
   night card restates it on the warm dark ground with accent actions. */
html[data-theme="night"] .cookie-consent {
  background: #252119;
  color: var(--ink);
  border-color: var(--dune);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="night"] .cookie-consent h2 {
  color: var(--ink);
}
html[data-theme="night"] .cookie-consent a {
  color: var(--accent);
}
html[data-theme="night"] .cookie-consent-links {
  color: var(--gray);
}
html[data-theme="night"] .cookie-consent .cookie-consent-links a,
html[data-theme="night"] .cookie-consent .cookie-consent-links .cookie-consent-link {
  color: var(--gray);
}
html[data-theme="night"] .cookie-consent .cookie-consent-links a:hover,
html[data-theme="night"] .cookie-consent .cookie-consent-links .cookie-consent-link:hover {
  color: var(--ink);
}
html[data-theme="night"] .cookie-consent-sep {
  color: var(--gray);
}
html[data-theme="night"] .cookie-consent button,
html[data-theme="night"] [data-cookie-preferences] {
  border-color: var(--accent);
  background: none;
  color: var(--accent);
}
html[data-theme="night"] .cookie-consent button[data-consent-choice="accepted"] {
  background: var(--accent);
  color: #1b1916;
}
html[data-theme="night"] .cookie-consent button:focus-visible,
html[data-theme="night"] .cookie-consent a:focus-visible,
html[data-theme="night"] [data-cookie-preferences]:focus-visible {
  outline-color: var(--accent);
}

/* Selection and link underlines stay warm instead of the default blue. */
html[data-theme="night"] ::selection {
  background: rgba(212, 162, 58, 0.35);
  color: var(--ink);
}

/* Elections & Voting badge (Ian 2026-10-12): the day accent sits too dark on
   the night paper; accent-dark keeps the pill readable. */
html[data-theme="night"] .election-badge {
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Share highlight in night mode (b13e, SLC Issue 02 share landings). */
html[data-theme] .issue-layout .share-highlight {
  background: rgba(212, 162, 58, 0.08);
  border-color: rgba(212, 162, 58, 0.25);
}

/* Houston Issue 02 (Ian 2026-10-27): the v25 line art now ships night twins
   (<Name>-night.svg beside each day file), so injectNightArt pairs every
   figure and the v2.5 cream-panel rule is retired. */

/* Houston Issue 02 only (Ian 2026-10-27): the shared share-article.svg draws
   dark strokes on a cream fill, unreadable on the dark share button; invert
   it in night mode. Do NOT edit or twin the shared file: every city uses it. */
html[data-theme="night"][data-night-city="houston"] .issue-sections-layout .share-btn img { filter: invert(1) hue-rotate(180deg); }