/* Light colours remain the fallbacks in component styles. Dark tokens are
 * screen-only: printed pages and downloadable source graphics stay unchanged.
 * Keep the explicit and no-JavaScript system palettes identical. Define tokens
 * on body too: WebKit can lose newly introduced root-only variables on later
 * descendants during initial parsing, despite inheriting older colour tokens. */
:root { color-scheme: light; background:var(--paper); }
@media screen {
  /* Give body its own light values. Linux WebKit can retain a computed dark
   * body custom property after the matching dark rule stops applying. The
   * theme-* reset preserves each component's existing light fallback. */
  :root:not([data-theme]), :root:not([data-theme]) body,
  :root[data-theme="light"], :root[data-theme="light"] body {
    color-scheme: light;
    --ink:#183733; --body:#354b48; --muted:#62726e; --paper:#fbfaf6;
    --white:#fff; --line:#dce3da; --teal:#0e6470; --amber:#fbf0d6;
    --theme-surface:initial; --theme-soft:initial; --theme-warm-surface:initial;
    --theme-readable:initial; --theme-strong:initial; --theme-warm-text:initial;
    --theme-border:initial; --theme-focus:initial; --theme-header:initial;
    --theme-chart-main:initial; --theme-chart-secondary:initial; --theme-chart-third:initial;
    --theme-primary:initial; --theme-on-primary:initial;
  }
  :root[data-theme="dark"], :root[data-theme="dark"] body {
    color-scheme: dark;
    --ink:#eef4ec; --body:#d0dcd4; --muted:#a9bcb0; --paper:#101e1b;
    --white:#192b25; --line:#415c4e; --teal:#8bd7cf; --amber:#392f20;
    --theme-surface:#192b25; --theme-soft:#22382e; --theme-warm-surface:#392f20;
    --theme-readable:#c1d2c6; --theme-strong:#eef4ec; --theme-warm-text:#f0cc94;
    --theme-border:#577461; --theme-focus:#f4c37b; --theme-header:#101e1bf7;
    --theme-chart-main:#8bd7cf; --theme-chart-secondary:#a9c5ac; --theme-chart-third:#e9c68b;
    --theme-primary:#8bd7cf; --theme-on-primary:#101e1b;
  }
}
@media screen and (prefers-color-scheme:dark) {
  :root:not([data-theme]), :root:not([data-theme]) body {
    color-scheme: dark;
    --ink:#eef4ec; --body:#d0dcd4; --muted:#a9bcb0; --paper:#101e1b;
    --white:#192b25; --line:#415c4e; --teal:#8bd7cf; --amber:#392f20;
    --theme-surface:#192b25; --theme-soft:#22382e; --theme-warm-surface:#392f20;
    --theme-readable:#c1d2c6; --theme-strong:#eef4ec; --theme-warm-text:#f0cc94;
    --theme-border:#577461; --theme-focus:#f4c37b; --theme-header:#101e1bf7;
    --theme-chart-main:#8bd7cf; --theme-chart-secondary:#a9c5ac; --theme-chart-third:#e9c68b;
    --theme-primary:#8bd7cf; --theme-on-primary:#101e1b;
  }
}
/* Primary actions keep a visible fill in dark mode. The brand green is almost
 * the dark page and card colour, which left main buttons reading as text. The
 * teal matches the existing Options response button; lime stays reserved for
 * the Parent action plan spotlight and the Share ideas tile. */
.primary { background:var(--theme-primary,var(--green)); color:var(--theme-on-primary,#fff); }

/* Bright participation accents intentionally retain dark lettering. */
.light,.parent-plan-spotlight,.site-header .nav-contribute,.visual-preview .button {
  --theme-strong:#143936;
  --theme-readable:#143936;
}
.site-header .nav-contribute { background:var(--lime); }
.site-header .nav-contribute:hover { background:#c9e7b3; }
.visual-preview .button { background:var(--lime); }
::selection { color:#143936; }
/* Preserve graphic meanings: filled/hollow forecasts and distinct series.
 * Cohort ramp colours and their matching key are retained in both themes. */
.trend-chart polyline { stroke:var(--theme-chart-main,#0e6470); }
.trend-chart circle { fill:var(--theme-chart-main,#0e6470); }
.forecast-region { fill:var(--theme-warm-surface,#f8f1e3); }
.forecast-caption { fill:var(--theme-warm-text,#785b26); }
.roll-axis { fill:var(--theme-readable,#596a60); }
.roll-point.forecast { fill:var(--theme-warm-surface,#fff); }
.roll-legend i { border-color:var(--theme-chart-main,#0e6470); }
.roll-legend i.legend-forecast { border-color:var(--theme-chart-third,#866629); }
.comparison-plot .baseline,.attainment-charts .grid { stroke:var(--theme-border,#758b80); }
.comparison-plot .point { stroke:var(--theme-surface,white); }
.places-key i { background:var(--theme-chart-secondary,#668674); }
.places-key .empty-key { background:#e1e9d9; }
.theme-controls { display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px; }
.theme-controls label { font-weight:700;color:var(--ink); }
.theme-controls select { appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;min-height:44px;min-width:125px;padding:8px 32px 8px 12px;border:1px solid var(--theme-border,#71847b);border-radius:7px;background-color:var(--theme-surface,#fff);color:var(--ink);font-size:16px; }
.theme-controls select:focus-visible { outline:3px solid var(--theme-focus,#b4641d);outline-offset:3px; }
.theme-controls [role="status"] { color:var(--muted);font-size:12px; }
@media print { :root { background:white; } .theme-controls { display:none!important; } }