/* Littlest Dreamer — dark theme overrides
 *
 * Activated by `html.lr-dark` (set by lr-theme.js + the per-page
 * pre-paint inline script reading `lr-theme` from localStorage).
 *
 * Strategy: override the shared CSS variables so the existing palette
 * tokens (--cream, --charcoal, --sage-light, etc.) keep their semantic
 * roles but resolve to dark-friendly values. All four core HTML files
 * (scheduler, tracker, insights, shared) declare these same variable
 * names in their :root, so a single override block covers them.
 *
 * Conservative approach: text + surfaces invert; brand mid-tones (sage,
 * honey) stay close to their light-mode values (already mid-tone, read
 * fine on dark); status colours are slightly desaturated to avoid
 * neon vibration on a dark surface.
 *
 * Add a `:root.lr-dark` block too because some pages (notably index
 * marketing landing) declare tokens on :root rather than the implicit
 * html element — :root and html.lr-dark have equal specificity, so we
 * spell both selectors to be safe.
 */

html.lr-dark,
:root.lr-dark {
  color-scheme: dark;

  /* Surfaces — page bg darker than card bg so cards lift visually. */
  --cream: #14131c;
  --warm-white: #1d1c2a;
  --surface: #1d1c2a;
  --moonlight: #232133;
  --sage-bg: #1f1e30;
  --sage-light: #2c2c4d;
  --blush-light: #2e2531;
  --honey-light: #2f2a1d;
  --dusk-bg: #1f2330;
  --status-good-bg: #1c2a26;
  --status-warn-bg: #2e251f;
  --status-bad-bg:  #2b2225;

  /* Brand — slightly lighten the dark periwinkle so it remains
     legible on a near-charcoal surface. Sage stays mid-tone. */
  --sage-dark: #b3b6e8;
  --sage: #8b8fcf;
  --sage-mid: #6f72b8;

  /* Accents — gold reads well on dark already; nudge slightly warmer.
     Plum lifts a touch for contrast. */
  --honey: #e6c07a;
  --plum: #c79bd7;
  --blush: #d4a8b8;
  --terracotta: #d4a37e;
  --twilight: #2a2945;

  /* Text. */
  --charcoal: #ECEAF2;
  --muted: #9D99AC;

  /* Borders — soft, low-contrast. */
  --border: #2a2937;

  /* Status colours — desaturated for dark surface comfort. */
  --status-good: #6cc28a;
  --status-warn: #d8a86a;
  --status-bad:  #d68a8a;
  --dusk: #9aa6c2;

  /* Drop the lavender-tint shadows used in light mode — they don't
     read on dark backgrounds. Use plain near-black drops instead. */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.45);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.40), 0 12px 40px rgba(0,0,0,0.55);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.45), 0 20px 60px rgba(0,0,0,0.60);
}

/* ── Targeted fix-ups for hardcoded colours that don't flow through
   the variable map. Kept short on purpose — only patch what's
   actually visible. ─────────────────────────────────────────────── */

html.lr-dark body { background: var(--cream); color: var(--charcoal); }

/* Inputs / textareas — most pages style these against #fff. */
html.lr-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.lr-dark textarea,
html.lr-dark select {
  background: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--border);
}
html.lr-dark input::placeholder,
html.lr-dark textarea::placeholder { color: var(--muted); }

/* Cards / sheets — many use literal #fff or #fdfbff. Dim those.
 *
 * Selectors are :not()-guarded so the rule only matches container
 * classes (ending with -card / -sheet / -modal) and NOT their
 * descendants. Pre-polish bug: the broad [class*="-card"] selector
 * was painting --warm-white on every descendant containing "-card-"
 * in its class name — including .coach-hub-card-headline and
 * .coach-hub-card-text. The bug was invisible while the card bg
 * equalled --warm-white; the v1.1 design polish shifted card bg via
 * color-mix, surfacing the existing strips as visible row bars
 * behind each text line. */
html.lr-dark .card,
html.lr-dark [class*="-card"]:not([class*="-card-"]):not(.coach-hub-card),
html.lr-dark [class*="-sheet"]:not([class*="-sheet-"]),
html.lr-dark [class*="-modal"]:not([class*="-modal-"]),
html.lr-dark .lr-account-menu-row,
html.lr-dark .lr-hh-block {
  background-color: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--border);
}

/* Coach hub cards are excluded from the broad rule above because the
 * border-color shorthand would clobber the per-tone border-left-color
 * set in lr-coach.css. The bg flip is restored here as a standalone
 * rule. Without this, dark-mode Coach cards lost their tone stripe
 * (all five tones resolved to --border = #2a2937, a neutral). */
html.lr-dark .coach-hub-card {
  background-color: var(--coach-card-bg);
}

/* Anything using a literal white background as a chip/pill. */
html.lr-dark [style*="background:#fff"],
html.lr-dark [style*="background: #fff"],
html.lr-dark [style*="background:#FFFFFF"] {
  background: var(--warm-white) !important;
}

/* SVG strokes that hardcode the cream/warm-white colour for ring
   tracks now read invisibly. Most rings on the insights page use
   currentColor or var(--border) already; nothing to do here unless
   we spot a regression. */

/* ── Account modal — lr-auth.css uses a lot of hardcoded literals.
   Re-skin the visible surfaces under .lr-dark so the modal lifts
   correctly on a dark page. Kept tight: only the rules whose hex
   values would otherwise sit visibly wrong. ───────────────────── */
html.lr-dark .lr-account-menu-row {
  background: var(--warm-white);
  border-color: var(--border);
  color: var(--charcoal);
}
html.lr-dark .lr-account-menu-row:hover {
  background: var(--moonlight);
  border-color: var(--sage-mid);
}
html.lr-dark .lr-account-menu-label { color: var(--charcoal); }
html.lr-dark .lr-account-menu-sub   { color: var(--muted); }
html.lr-dark .lr-account-menu-chev  { color: var(--sage-mid); }
html.lr-dark .lr-account-menu-icon {
  background: linear-gradient(135deg, var(--moonlight), var(--sage-light));
  color: var(--sage-dark);
  border-color: var(--border);
}
html.lr-dark .lr-profile-stats {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--moonlight) 100%);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
html.lr-dark .lr-profile-stat       { border-right-color: var(--border); }
html.lr-dark .lr-profile-stat-value { color: var(--sage-dark); }
html.lr-dark .lr-profile-stat-label { color: var(--muted); }
html.lr-dark .lr-profile-stat-label em { color: var(--honey); }
html.lr-dark .lr-profile-hero {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(135deg, var(--moonlight) 0%, var(--sage-light) 55%, var(--honey-light) 100%);
  box-shadow: var(--shadow-md);
}
html.lr-dark .lr-profile-greeting,
html.lr-dark .lr-profile-bio       { color: var(--sage-dark); }
html.lr-dark .lr-profile-name      { color: var(--charcoal); }
html.lr-dark .lr-account-signed-in        { color: var(--muted); }
html.lr-dark .lr-account-signed-in strong { color: var(--sage-dark); }
html.lr-dark .lr-account-hero-sub strong  { color: var(--sage-dark); }
html.lr-dark .lr-auth-field input {
  background: var(--moonlight);
  color: var(--charcoal);
  border-color: var(--border);
}
html.lr-dark .lr-hh-row,
html.lr-dark .lr-hh-row-btn,
html.lr-dark .lr-hh-empty,
html.lr-dark .lr-hh-loading {
  background: var(--moonlight);
  color: var(--charcoal);
  border-color: var(--border);
}
html.lr-dark .lr-hh-row-btn:hover { background: var(--warm-white); border-color: var(--sage-mid); }

/* ── Theme toggle (segmented control inside account modal) ──────── */
.lr-theme-block {
  margin: 16px 0 4px;
}
.lr-theme-block-label {
  font: 600 12px 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.lr-theme-seg {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 8px 0 4px;
  background: var(--sage-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lr-theme-seg button {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 500 13px 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  min-height: 36px;
}
.lr-theme-seg button:hover { color: var(--charcoal); }
.lr-theme-seg button[aria-checked="true"] {
  background: var(--warm-white);
  color: var(--charcoal);
  box-shadow: var(--shadow-sm);
}
html.lr-dark .lr-theme-seg button[aria-checked="true"] {
  background: var(--moonlight);
}

/* ─────────────────────────────────────────────────────────────────
   Dark-mode patch pack — addresses "bright periwinkle on dark" bug.
   The four app pages (scheduler/tracker/insights/shared) and the
   shared CSS files (lr-auth.css, lr-billing.css, lr-baby-switcher.css)
   contain a non-trivial amount of literal hex / rgba colours that
   bypass the CSS-variable palette, so the var() override above
   doesn't reach them. Patch each visible offender below.
   ───────────────────────────────────────────────────────────────── */

/* 1. Page-level ambient gradient overlays (body::before).
      Each app page paints fixed radial gradients in periwinkle /
      honey / lavender at low alpha. On a dark background those
      bright hues add a pale haze — the "bright periwinkle mixed
      with darker colours" the user reported. Repaint them with
      near-black tints in dark mode so the page stays dark. */
html.lr-dark body::before {
  background-image:
    radial-gradient(ellipse at 18% 8%,  rgba(0,0,0,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(0,0,0,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 45%, rgba(255,255,255,0.02) 0%, transparent 45%) !important;
}

/* 2. Hardcoded hover/active colours on primary CTAs.
      Light mode uses dark-periwinkle hovers (#3a3a72, #37376a) and
      a dark plum/terracotta hover for honey CTAs. In dark mode the
      base button is light periwinkle (--sage-dark = #b3b6e8) so
      the hover needs to be slightly lighter, not darker. */
html.lr-dark .btn-generate,
html.lr-dark .btn-end-nap,
html.lr-dark .btn-start-nap,
html.lr-dark .btn-edit-save,
html.lr-dark .btn-confirm-start,
html.lr-dark .btn-log,
html.lr-dark .btn-night-save,
html.lr-dark .sht-btn-primary,
html.lr-dark .sht-unlock-btn,
html.lr-dark .drift-btn-primary,
html.lr-dark .drift-hint-btn.primary,
html.lr-dark .lr-bill-cta,
html.lr-dark .lr-invite-banner-cta {
  color: #14131c;
}
html.lr-dark .btn-generate:hover,
html.lr-dark .btn-end-nap:hover,
html.lr-dark .btn-start-nap:hover,
html.lr-dark .btn-edit-save:hover,
html.lr-dark .btn-confirm-start:hover,
html.lr-dark .btn-log:hover,
html.lr-dark .btn-night-save:hover,
html.lr-dark .sht-btn-primary:hover,
html.lr-dark .sht-unlock-btn:hover,
html.lr-dark .drift-btn-primary:hover,
html.lr-dark .drift-hint-btn.primary:hover,
html.lr-dark .lr-bill-cta:hover,
html.lr-dark .lr-invite-banner-cta:hover {
  background: #c8cbef;
  color: #14131c;
}
html.lr-dark .btn-unlock { color: #14131c; }
html.lr-dark .btn-unlock:hover { background: #e6c98a; color: #14131c; }

/* 3. Ripple-flash keyframe in the scheduler timeline uses literal
      cream tints. Repaint dark. */
html.lr-dark .timeline-item.rippling .event-card { animation: lrDarkRippleFlash 0.6s ease forwards !important; }
@keyframes lrDarkRippleFlash {
  0%   { background: #2a2530; }
  40%  { background: #3a2a26; }
  100% { background: var(--warm-white); }
}

/* 4. lr-auth.css — account modal panels with hardcoded periwinkle
      gradients / cream surfaces. Repaint visible offenders. */
html.lr-dark .lr-account-hero,
html.lr-dark .lr-account-card,
html.lr-dark .lr-modal,
html.lr-dark .lr-auth-modal,
html.lr-dark .lr-bill-modal,
html.lr-dark .lr-bill-card,
html.lr-dark .lr-share-card {
  background: var(--warm-white) !important;
  color: var(--charcoal);
  border-color: var(--border);
}
html.lr-dark .lr-account-hero {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(135deg, var(--moonlight) 0%, var(--sage-light) 55%, var(--honey-light) 100%) !important;
}
/* Plan tier card / pricing row with literal #fdfbff & #f0f0fa gradient. */
html.lr-dark .lr-plan-card,
html.lr-dark .lr-account-status,
html.lr-dark .lr-bill-tier,
html.lr-dark .lr-account-stat-row,
html.lr-dark .lr-hh-empty {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--moonlight) 100%) !important;
  color: var(--charcoal);
  border-color: var(--border);
}
/* Status pill — green-on-light-green premium pill stays bright in
   dark mode. Re-tint. */
html.lr-dark .lr-bill-pill-active,
html.lr-dark .lr-tier-active,
html.lr-dark .lr-bill-status-active,
html.lr-dark .lr-account-pill-active {
  background: var(--status-good-bg) !important;
  color: var(--status-good) !important;
  border-color: var(--status-good) !important;
}
html.lr-dark .lr-bill-pill-trial,
html.lr-dark .lr-bill-status-trial,
html.lr-dark .lr-account-pill-trial {
  background: var(--status-warn-bg) !important;
  color: var(--status-warn) !important;
}
html.lr-dark .lr-bill-pill-error,
html.lr-dark .lr-bill-status-error,
html.lr-dark .lr-account-pill-error {
  background: var(--status-bad-bg) !important;
  color: var(--status-bad) !important;
}
/* Auth title em (literal honey #d4a857) — already mid-tone, but force
   to var so palette nudges in dark mode flow through. */
html.lr-dark .lr-auth-title em { color: var(--honey) !important; }

/* 5. Baby-switcher rows with literal #fbf9f6 / #cfc6ba / #f4f9f4. */
html.lr-dark .lr-baby-row {
  background: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--border);
}
html.lr-dark .lr-baby-row:hover {
  background: var(--moonlight) !important;
  border-color: var(--sage-mid) !important;
}
html.lr-dark .lr-baby-row.active,
html.lr-dark .lr-baby-row[aria-current="true"] {
  background: var(--sage-bg) !important;
  border-color: var(--sage) !important;
}
html.lr-dark .lr-baby-badge {
  background: var(--sage-bg) !important;
  color: var(--sage-dark) !important;
}

/* 6. Generic fallback: any inline style hardcoding the canonical
      light-mode warm-white backgrounds — re-skin. */
html.lr-dark [style*="background:#fdfbff"],
html.lr-dark [style*="background: #fdfbff"],
html.lr-dark [style*="background:#fefcf9"],
html.lr-dark [style*="background: #fefcf9"],
html.lr-dark [style*="background:#fbf9f6"],
html.lr-dark [style*="background: #fbf9f6"],
html.lr-dark [style*="background:#f0f0fa"],
html.lr-dark [style*="background: #f0f0fa"] {
  background: var(--warm-white) !important;
}

/* 7. Hardcoded "lavender" #f5f3ff / #ece9f5 surfaces (moonlight + cream). */
html.lr-dark [style*="background:#f5f3ff"],
html.lr-dark [style*="background: #f5f3ff"],
html.lr-dark [style*="background:#ece9f5"],
html.lr-dark [style*="background: #ece9f5"] {
  background: var(--moonlight) !important;
}

/* 8. Shared-page wrap card uses linear-gradient(180deg, --warm-white,
      #fbf7ef). Repaint with all-var gradient in dark mode. */
html.lr-dark .sched-header,
html.lr-dark .hdr,
html.lr-dark .ftr {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--moonlight) 100%) !important;
}

/* 9. .form-card / generic container surfaces that use --warm-white
      now correctly invert; but a stubborn box-shadow lavender tint
      can remain. The shadow vars above already cover global cards;
      this catches any element that hardcodes its own shadow. */
html.lr-dark .form-card,
html.lr-dark .timeline,
html.lr-dark .event-card,
html.lr-dark .nap-card,
html.lr-dark .insight-card,
html.lr-dark .summary-card,
html.lr-dark .quality-card {
  background: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* 10. Sticky bottom-nav — most pages give it --warm-white background,
       but some borders are literal. Force border to var. */
html.lr-dark .sticky-nav,
html.lr-dark .lr-nav,
html.lr-dark nav.bottom-nav {
  background: var(--warm-white) !important;
  border-top-color: var(--border) !important;
  color: var(--charcoal);
}

/* 11. Insights quality-axis / callouts use literal pastel hexes that
       stay too bright on dark. Recolour callouts via var(). */
html.lr-dark .qaxis-callout.warn  { background: var(--status-warn-bg) !important; border-left-color: var(--status-warn) !important; color: var(--charcoal); }
html.lr-dark .qaxis-callout.alert { background: var(--status-bad-bg)  !important; border-left-color: var(--status-bad)  !important; color: var(--charcoal); }

/* 12. Date-strip scrollbar thumbs (literal #c5bdb5) — minor but cheap. */
html.lr-dark .date-strip::-webkit-scrollbar-thumb { background: var(--border) !important; }

/* ─────────────────────────────────────────────────────────────────
   Subjective tweaks (post-audit) — bumping a few of the agent's
   "needs your eyeballs" calls based on the user's preference.
   ───────────────────────────────────────────────────────────────── */

/* Event-type tints in the scheduler timeline. Light-mode rgba alphas
   are 0.09-0.12 — too low against the dark-surface card background to
   read as differentiated category swatches. Bump to ~0.20 in dark
   mode. The hue is unchanged; only the saturation against the dark
   surface goes up so the wake/feed/nap/play/bedtime/dreamfeed types
   are visually distinct again. */
html.lr-dark .type-wake .event-card,
html.lr-dark .type-wake .duration-fill        { background: rgba(212,168,64,0.20) !important; }
html.lr-dark .type-feed .event-card,
html.lr-dark .type-feed .duration-fill        { background: rgba(212,168,130,0.22) !important; }
html.lr-dark .type-nap .event-card,
html.lr-dark .type-nap .duration-fill         { background: rgba(139,143,207,0.22) !important; }
html.lr-dark .type-play .event-card,
html.lr-dark .type-play .duration-fill        { background: rgba(107,174,214,0.20) !important; }
html.lr-dark .type-bedtime .event-card,
html.lr-dark .type-bedtime .duration-fill     { background: rgba(178,120,210,0.22) !important; }
html.lr-dark .type-dreamfeed .event-card,
html.lr-dark .type-dreamfeed .duration-fill   { background: rgba(86,209,180,0.20) !important; }

/* .btn-unlock — light-mode is honey gold with white text. The agent's
   default dark treatment used a light-honey background with dark text
   (matches other CTAs). User prefers the brand association preserved:
   deeper gold background, white text, deeper-still gold on hover.
   Closer to a "premium upgrade" feel on dark. */
html.lr-dark .btn-unlock {
  background: #8a6920 !important;
  color: #ffffff !important;
}
html.lr-dark .btn-unlock:hover {
  background: #a07b30 !important;
  color: #ffffff !important;
}

/* Today Mode bar (.sht-strip in scheduler) — light-mode background is
   hardcoded #e2f0e7 mint, way too bright against the dark page. Repaint
   with the dark-surface palette while keeping the periwinkle accent
   stripe so it still reads as the active-mode marker. */
html.lr-dark .sht-strip {
  background: var(--moonlight) !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
  border-left-color: var(--sage-dark) !important;
  color: var(--charcoal);
}
html.lr-dark .sht-strip-icon {
  background: var(--warm-white) !important;
  color: var(--sage-dark) !important;
}
html.lr-dark .sht-mode-label,
html.lr-dark .sht-date,
html.lr-dark .sht-strip-desc {
  color: var(--charcoal) !important;
}

/* Invite banner (lr-auth.css .lr-invite-banner + .is-success / .is-error)
   uses literal pastel cream / mint / peach. Repaint with semantic
   status backgrounds in dark mode so the meaning carries (info /
   success / error) but the surface stays dark. */
html.lr-dark .lr-invite-banner {
  background: var(--moonlight) !important;
  color: var(--charcoal) !important;
  border-color: var(--border) !important;
}
html.lr-dark .lr-invite-banner.is-success {
  background: var(--status-good-bg, rgba(120,175,140,0.15)) !important;
  color: var(--charcoal) !important;
  border-color: rgba(120,175,140,0.45) !important;
}
html.lr-dark .lr-invite-banner.is-error {
  background: var(--status-bad-bg, rgba(200,110,110,0.15)) !important;
  color: var(--charcoal) !important;
  border-color: rgba(200,110,110,0.45) !important;
}
html.lr-dark .lr-invite-banner-cta {
  background: var(--sage-dark) !important;
  color: #14131c !important;
}
html.lr-dark .lr-invite-banner-cta:hover {
  background: #c8cbef !important;
  color: #14131c !important;
}

/* .partner-nudge uses var(--surface) which IS overridden, but the
   border falls back to --sage-light (= #2c2c4d in dark) which can
   look almost-invisible against the dark surface. Bump border to
   the standard --border so the card edge reads. */
html.lr-dark .partner-nudge {
  border-color: var(--border) !important;
  background: var(--moonlight) !important;
}
html.lr-dark .partner-nudge-title { color: var(--charcoal) !important; }
html.lr-dark .partner-nudge-sub { color: var(--muted) !important; }

/* ─────────────────────────────────────────────────────────────────
   Second-pass patch pack — surfaces missed by the first audit.
   ───────────────────────────────────────────────────────────────── */

/* 13. Sticky-nav text colour. Patch 10 inverted the nav background
       from periwinkle (--sage-dark) to dark moonlight (--warm-white)
       in dark mode, but the inner .sticky-nav-btn rules still hardcode
       white text (rgba(255,255,255,0.62) idle, #ffffff active). White
       on dark moonlight is fine — the issue is the BABY PILL inside
       the nav, which uses translucent white surfaces meant to lift off
       a dark periwinkle base; on the new dark surface those translucent
       whites read as faint glass and the pill border vanishes. Re-skin
       with sage-mid borders and a moonlight tinted bg so the pill keeps
       the same affordance. The .sticky-nav-btn text colour is left
       alone — white on dark moonlight already passes contrast. */
html.lr-dark .lr-baby-pill {
  background: var(--moonlight) !important;
  border-color: var(--sage-mid) !important;
  color: var(--charcoal) !important;
}
html.lr-dark .lr-baby-pill:hover {
  background: var(--sage-bg) !important;
  border-color: var(--sage) !important;
}
html.lr-dark .lr-baby-pill.is-unnamed {
  background: var(--honey-light) !important;
  border-color: var(--honey) !important;
}
html.lr-dark .lr-baby-pill.is-unnamed:hover {
  background: var(--honey-light) !important;
  border-color: #e6c07a !important;
}

/* 14. Date-strip active chip — both tracker + insights set the active
       chip background to --sage-dark with white text. In dark mode
       --sage-dark resolves to light periwinkle (#b3b6e8) so white text
       on a near-white pill is unreadable. Flip the active chip to a
       darker periwinkle band with light text. */
html.lr-dark .date-chip.active {
  background: var(--sage-mid) !important;
  border-color: var(--sage-mid) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
}
html.lr-dark .date-chip.active .chip-day,
html.lr-dark .date-chip.active .chip-num { color: var(--charcoal) !important; }
html.lr-dark .date-chip.active.has-data .chip-dot { background: var(--charcoal) !important; opacity: 0.55; }

/* 15. Bill-toast (return-from-checkout). Literal mint / peach pastel
       backgrounds with periwinkle text. Re-skin with semantic status
       surfaces so the meaning carries on dark. */
html.lr-dark .lr-bill-toast {
  background: var(--warm-white) !important;
  color: var(--charcoal) !important;
  border-color: var(--border) !important;
}
html.lr-dark .lr-bill-toast-ok {
  background: var(--status-good-bg) !important;
  color: var(--status-good) !important;
  border-color: rgba(108,194,138,0.35) !important;
}
html.lr-dark .lr-bill-toast-info {
  background: var(--status-warn-bg) !important;
  color: var(--status-warn) !important;
  border-color: rgba(216,168,106,0.35) !important;
}
html.lr-dark #lr-activating-banner {
  background: var(--status-good-bg) !important;
  color: var(--status-good) !important;
  border-color: rgba(108,194,138,0.35) !important;
}
html.lr-dark .lr-activating-spinner {
  border-color: rgba(108,194,138,0.25) !important;
  border-top-color: var(--status-good) !important;
}

/* 16. lr-auth-error / lr-auth-success / lr-bill-error inline status
       blocks — literal peach / mint surfaces. Same semantic remap. */
html.lr-dark .lr-auth-error,
html.lr-dark .lr-bill-error {
  background: var(--status-bad-bg) !important;
  color: var(--status-bad) !important;
}
html.lr-dark .lr-auth-success {
  background: var(--status-good-bg) !important;
  color: var(--status-good) !important;
}

/* 17. lr-baby sheet panel — literal var(--cream) which now resolves
       to the page background (#14131c) in dark mode, making the sheet
       indistinguishable from the page behind it. Lift to warm-white so
       the sheet actually reads as a raised surface. Plus the row badge
       (literal #e6f0e7 mint). */
html.lr-dark .lr-baby-sheet-panel {
  background: var(--warm-white) !important;
  box-shadow: 0 -16px 48px rgba(0,0,0,0.6) !important;
}
html.lr-dark .lr-baby-sheet-handle { background: var(--border) !important; }
html.lr-dark .lr-baby-sheet-title { color: var(--charcoal) !important; }
html.lr-dark .lr-baby-sheet-close { color: var(--muted) !important; }
html.lr-dark .lr-baby-sheet-close:hover { background: var(--moonlight) !important; }
html.lr-dark .lr-baby-row-badge {
  background: var(--sage-bg) !important;
  color: var(--sage-dark) !important;
}

/* 18. Household management chips/buttons in the account modal — owner
       badge (honey cream), danger button (peach), armed-delete (red),
       and the dashed add-baby action button (literal white). */
html.lr-dark .lr-hh-badge-owner {
  background: var(--honey-light) !important;
  color: var(--honey) !important;
}
html.lr-dark .lr-hh-row-btn-danger {
  background: var(--status-bad-bg) !important;
  color: var(--status-bad) !important;
  border-color: rgba(214,138,138,0.4) !important;
}
html.lr-dark .lr-hh-row-btn-danger:hover {
  background: rgba(214,138,138,0.18) !important;
}
html.lr-dark .lr-hh-row-btn.is-armed {
  background: #b84a2a !important;
  border-color: #b84a2a !important;
  color: #ffffff !important;
}
html.lr-dark .lr-hh-action-btn {
  background: var(--moonlight) !important;
  color: var(--sage-dark) !important;
  border-color: var(--border) !important;
}
html.lr-dark .lr-hh-action-btn:hover {
  background: var(--sage-bg) !important;
  border-color: var(--sage) !important;
}

/* 19. Invite-link readout (cream box with link text) + signed-in pill. */
html.lr-dark .lr-invite-link {
  background: var(--moonlight) !important;
  color: var(--charcoal) !important;
  border-color: var(--border) !important;
}
html.lr-dark .lr-signed-in-badge {
  background: var(--moonlight) !important;
  color: var(--muted) !important;
}

/* 20. Notifications view — pink permission banner, grey toggle track,
       cream time input. */
html.lr-dark .lr-notify-permission {
  background: var(--status-bad-bg) !important;
  color: var(--status-bad) !important;
}
html.lr-dark .lr-notify-toggle-track { background: var(--border) !important; }
html.lr-dark .lr-notify-toggle-track::before {
  background: var(--charcoal) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
html.lr-dark .lr-notify-toggle input:checked + .lr-notify-toggle-track {
  background: var(--sage-dark) !important;
}
html.lr-dark .lr-notify-toggle input:checked + .lr-notify-toggle-track::before {
  background: var(--cream) !important;
}
html.lr-dark .lr-notify-time-input {
  background: var(--moonlight) !important;
  color: var(--charcoal) !important;
  border-color: var(--border) !important;
}
html.lr-dark .lr-notify-row { border-bottom-color: var(--border) !important; }

/* 21. Auth-close (X) button — translucent-white pill on light mode reads
       as glass over the periwinkle hero. In dark mode the same translucent
       white sits invisibly on a dark hero. Tint it with moonlight so the
       affordance is visible. */
html.lr-dark .lr-auth-close {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--border) !important;
  color: var(--charcoal) !important;
}
html.lr-dark .lr-auth-close:hover {
  background: rgba(255,255,255,0.16) !important;
  color: var(--charcoal) !important;
}

/* 22. Tracker .planned-badge.complete — literal mint #c8e6c9 + dark
       sage text. Re-tint with the dark status palette. */
html.lr-dark .planned-badge.complete {
  background: var(--status-good-bg) !important;
  color: var(--status-good) !important;
}

/* 23. Tracker .btn-log-actual:hover paints var(--sage) bg with white
       text. In dark, --sage = mid periwinkle and white-on-mid-periwinkle
       has marginal contrast. Lift to charcoal text on the lighter
       sage-dark band for legibility. */
html.lr-dark .btn-log-actual:hover {
  background: var(--sage-dark) !important;
  color: var(--charcoal) !important;
  border-color: var(--sage-dark) !important;
}

/* 24. Shared-page (.ftr-cta) hover paints literal #3a3a72 — that's the
       light-mode "darker periwinkle" hover, which on the dark mode's
       light-periwinkle base goes the wrong direction (darker, not
       lighter). Match the patch-2 pattern used for the four-page CTAs. */
html.lr-dark .ftr-cta {
  background: var(--sage-dark) !important;
  color: #14131c !important;
}
html.lr-dark .ftr-cta:hover {
  background: #c8cbef !important;
  color: #14131c !important;
}

/* 25. .qaxis-bar track — literal #e2d9c8 cream. Too bright on dark.
       Drop to the standard border tone so the segmented bar (positive /
       neutral / negative segments) still reads against the track. */
html.lr-dark .qaxis-bar { background: var(--border) !important; }
/* The neutral / negative axis segments stay literal pastel (see source
   #d8cfc4, #d49a82). Both are mid-tone enough that they read on dark
   without retinting; revisit only if the segmented composition becomes
   illegible. */

/* 26. .lr-bill-toggle background (literal var(--border) which IS dark
       in dark mode — fine), but the active toggle pill inside it sets
       background: var(--warm-white) which is also dark, so the active
       state vanishes against the dark track. Lift the active pill. */
html.lr-dark .lr-bill-toggle-btn.is-active {
  background: var(--sage-bg) !important;
  color: var(--charcoal) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* 27. Insights legend swatch for "Assisted" naps — literal #e8d8b8
       cream-honey. Bright on dark. Re-tint to honey-light so it still
       reads as the warm side of the paired good/assisted swatches. */
html.lr-dark .legend-block[style*="background:#e8d8b8"],
html.lr-dark .legend-block[style*="background: #e8d8b8"] {
  background: var(--honey-light) !important;
  border: 1px solid var(--honey) !important;
}

/* 28. Nap-in-progress pulse halo. The light-mode keyframe pulses
       rgba(74,74,140,0.50) (deep periwinkle) — invisible against the
       near-black dark surface. Swap to a lighter periwinkle that
       actually contrasts. The dot itself uses var(--sage-dark) so it
       stays visible on its own; only the halo needs the override. */
@keyframes nap-pulse-halo-dark {
  0%   { box-shadow: 0 0 0 0   rgba(179,182,232,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(179,182,232,0); }
  100% { box-shadow: 0 0 0 0   rgba(179,182,232,0); }
}
html.lr-dark .nap-inprogress-dot {
  animation:
    nap-pulse-dot 2s ease-in-out infinite,
    nap-pulse-halo-dark 2s ease-out infinite !important;
}

/* ── iOS Capacitor — viewport hygiene ──────────────────────────────
 * Two fixes that are only needed inside the native shell:
 *
 * 1. Horizontal scroll lock — without this, a small horizontal pan
 *    rubber-bands the page sideways (and on some pages with a wide
 *    chip strip, the parent scroll axis follows the inner scroll).
 *    overflow-x:hidden on body alone doesn't always win against
 *    WKWebView's gesture coalescing; clamp at html too and disable
 *    horizontal overscroll explicitly.
 *
 * 2. Status-bar backdrop — capacitor.config.json sets
 *    `contentInset: "never"` so the WKWebView extends under the
 *    system status bar. The body's `padding-top:
 *    env(safe-area-inset-top)` shifts initial content down, but as
 *    the page scrolls upward, content moves *through* that padding
 *    region (padding belongs to the body box, which translates with
 *    scroll). On iOS the status bar is a translucent overlay, so
 *    scrolling content visibly bleeds behind the clock/battery/
 *    signal icons. A fixed-position cream strip pinned to the top
 *    of the viewport with height = safe-area-inset-top hides that
 *    bleed; the status-bar overlay then sits on a solid colour
 *    band, no overlap visible.
 *
 * Both rules are scoped to `body.is-ios` (stamped by lr-platform.js
 * when running under Capacitor on iOS), so web and Android are
 * untouched.
 */

html, body { overscroll-behavior-x: none; }
/* Belt + suspenders for the WKWebView rubber-band bleed in dark mode.
 *
 * Capacitor's ios.backgroundColor is set once at native build time to
 * the cream light value (#ede8e0). When the user pulls past the
 * scroll bounds, the WKWebView bounces and reveals that fixed cream
 * color underneath the page — looks correct in light mode, jarring
 * cream stripe in dark mode.
 *
 * Two layered fixes:
 *  1. overscroll-behavior:none on html AND body — the iOS docs say
 *     html is the proper target, but covering both in case a child
 *     scroll container relays it differently.
 *  2. html.background = var(--cream) so even if WKWebView still
 *     bounces (older iOS / Capacitor combos), the visible bounce
 *     area shows the theme background instead of the native cream.
 *     The variable resolves to dark cream automatically in dark
 *     mode via the html.lr-dark override.
 *
 * Scoped to body.is-ios so web users keep their native pull-to-
 * refresh / bounce behaviour. !important defends against any per-
 * page background overrides in the four main HTML files. */
html { background-color: var(--cream); }
body.is-ios,
html.lr-ios {
  overflow-x: hidden;
  max-width: 100vw;
  overscroll-behavior: none !important;
}
body.is-ios::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: var(--cream);
  z-index: 9998;
  pointer-events: none;
}
/* Dark mode: same idea, just resolves to the dark cream value
   automatically via the variable override on html.lr-dark. */

/* ─── Hardcoded brand colours that need dark-mode patches ──────────────
 * lr-auth.css ships with a few literal hex values (premium gold ring,
 * profile-role gradient, Google/Apple OAuth hover states). Those
 * bypass the `--honey` / `--sage-dark` token overrides above, so they
 * need explicit `html.lr-dark` rules to read correctly on the dark
 * surface. Tap target heights are handled in lr-auth.css directly. */
html.lr-dark .lr-account-avatar.is-premium { border-color: var(--honey); }
html.lr-dark .lr-profile-role {
  background: linear-gradient(135deg, var(--honey), #e6c97a);
}
html.lr-dark .lr-oauth-google:hover:not(:disabled) {
  background: #2a2937;
  border-color: var(--border, #2f2e3f);
}
html.lr-dark .lr-oauth-apple {
  background: #2a2937;
  border-color: #2a2937;
}
html.lr-dark .lr-oauth-apple:hover:not(:disabled) {
  background: #1c1b27;
}
/* Scoped to the pill-context placement only. In the bottom nav the
   account button gets .sticky-nav-btn which already strips its pill
   chrome to match the other tabs — re-applying a translucent-white
   background here in dark mode would re-bubble the button out of the
   bar (visible as a distinct light block against the dark navbar). */
html.lr-dark .lr-account-btn:not(.sticky-nav-btn) {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}
html.lr-dark .lr-account-btn:not(.sticky-nav-btn):hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.50);
}