/* One geometry and layout in both themes; preference changes only the palette. */
:root {
  --focus:#6e8f51;
  --step-ink:#819273;
  --empty-ink:#7c9770;
  --setup-line:#93a87d;
  --badge-line:#dae2d2;
  --notice-bg:#f7f1dc;
  --notice-line:#d9c993;
  --notice-ink:#645739;
  --empty-line:#c8d1c1;
  --metric-line:#cfd8c8;
  --status-ready:#648346;
  --status-complete:#52743d;
  --status-running:#527580;
  --status-attention:#946332;
  --status-idle:#7b857e;
  --welcome-shadow:#26372c06;
  --wordmark-light:block;
  --wordmark-dark:none;
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#171d19;
  --surface:#202921;
  --ink:#eceee2;
  --muted:#b2bcae;
  --line:#3b483d;
  --green:#bbd2a1;
  --soft:#2b382d;
  --accent:#cce1ad;
  --focus:#bfdc9d;
  --step-ink:#bfd4a4;
  --empty-ink:#bfd4a4;
  --setup-line:#a4bf8f;
  --badge-line:#56664c;
  --notice-bg:#392f21;
  --notice-line:#80663d;
  --notice-ink:#ecd7ab;
  --empty-line:#5c715a;
  --metric-line:#4b5c4c;
  --status-ready:#acd28a;
  --status-complete:#acd28a;
  --status-running:#9bc8cf;
  --status-attention:#dfb36d;
  --status-idle:#a4b09e;
  --welcome-shadow:#0003;
  --wordmark-light:none;
  --wordmark-dark:block;
}

/* The same palette also works without JS, and reacts to OS changes in System. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme:dark;
    --paper:#171d19;
    --surface:#202921;
    --ink:#eceee2;
    --muted:#b2bcae;
    --line:#3b483d;
    --green:#bbd2a1;
    --soft:#2b382d;
    --accent:#cce1ad;
    --focus:#bfdc9d;
    --step-ink:#bfd4a4;
    --empty-ink:#bfd4a4;
    --setup-line:#a4bf8f;
    --badge-line:#56664c;
    --notice-bg:#392f21;
    --notice-line:#80663d;
    --notice-ink:#ecd7ab;
    --empty-line:#5c715a;
    --metric-line:#4b5c4c;
    --status-ready:#acd28a;
    --status-complete:#acd28a;
    --status-running:#9bc8cf;
    --status-attention:#dfb36d;
    --status-idle:#a4b09e;
    --welcome-shadow:#0003;
    --wordmark-light:none;
    --wordmark-dark:block;
  }
}

:focus-visible { outline-color:var(--focus); }
::selection { background:var(--accent); color:#25372f; }
.skip-link { color:var(--surface); }
.welcome-card { box-shadow:0 18px 50px var(--welcome-shadow); }
.step-number { color:var(--step-ink); }
.empty-mark { color:var(--empty-ink); }
.setup-note { border-color:var(--setup-line); }
.badge, .beta-badge { border-color:var(--badge-line); }
.notice { background:var(--notice-bg); border-color:var(--notice-line); color:var(--notice-ink); }
.empty-state { border-color:var(--empty-line); }
.metrics>div+div { border-color:var(--metric-line); }
.status-dot { background:var(--status-ready); }
.status-dot-attention { background:var(--status-attention); }
.status-dot-idle { background:var(--muted); }
.run-status::before { background:var(--status-idle); }
.run-status[data-status="complete"]::before { background:var(--status-complete); }
.run-status[data-status="running"]::before { background:var(--status-running); }
.run-status:is([data-status="failed"],[data-status="incomplete"],[data-status="blocked"],
               [data-status="timed_out"])::before { background:var(--status-attention); }
.mnemoverse-logo .mnemoverse-logo-light { display:var(--wordmark-light); }
.mnemoverse-logo .mnemoverse-logo-dark { display:var(--wordmark-dark); }

select, textarea, input:is([type="text"],[type="search"],[type="url"],[type="email"],
                         [type="password"],[type="number"]) {
  color:var(--ink);
  background:var(--surface);
  border-color:var(--line);
}
input:is([type="checkbox"],[type="radio"]) { accent-color:var(--green); }
.footer-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; }
.theme-control { display:flex; align-items:center; gap:8px; }
.theme-control select {
  font:inherit;
  color:var(--ink);
  min-height:44px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:6px;
}
@media(max-width:580px) {
  .footer-tools { width:100%; justify-content:space-between; gap:8px 18px; }
  .theme-control { font-size:12px; }
}
/* Let the existing header reflow when text is enlarged on narrow screens. */
@media(max-width:580px) {
  .brand-row, .site-header nav { flex-wrap:wrap; }
  .brand-row { max-width:100%; }
}