/* Follow the device preference live, without cookies or a manual override. */
:root {
  color-scheme: light;
  --shell: #f5f4ee;
  --shell-text: #172e29;
  --shell-muted: #4c6056;
  --shell-line: #c5cfc3;
  --lime: #376449;
  --surface: #f5f4ee;
  --surface-alt: #e9eddf;
  --surface-inset: #e4eadd;
  --surface-accent: #dfebd0;
  --control-border: #6f8069;
  --action-background: #31583f;
  --action-text: #ffffff;
  --paper: var(--surface);
  --ink: var(--shell-text);
  --muted: var(--shell-muted);
  --line: var(--shell-line);
  --accent: var(--lime);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --shell: #111817;
    --shell-text: #ecefe8;
    --shell-muted: #afbeb3;
    --shell-line: #435347;
    --lime: #d9edbc;
    --surface: #161f1c;
    --surface-alt: #1c2822;
    --surface-inset: #1e2d25;
    --surface-accent: #243a27;
    --control-border: #819580;
    --action-background: #d9edbc;
    --action-text: #132017;
  }
}

.discipline-filters button { border-color: var(--control-border); }
.site-nav a:hover { background: var(--surface-inset); }
.site-nav a[aria-current=page]:hover { background: var(--lime); }
.detail-body { color: var(--shell-text); background: var(--surface); }
.detail-body .case,
.detail-body .character { background: var(--surface-alt); }
.detail-body .cave-study,
.detail-body .learning { background: var(--surface); }
.detail-body .process { background: var(--surface-inset); color: var(--shell-text); }
.detail-body .play { background: var(--surface-accent); color: var(--shell-text); }
.detail-body .case-intro > div > p:not(.eyebrow),
.detail-body .case-intro .eyebrow,
.detail-body .decision p,
.detail-body .download-help,
.detail-body .section-head p,
.detail-body .filter-row > span { color: var(--shell-muted); }
.detail-body .process > .eyebrow,
.detail-body .play .eyebrow,
.detail-body .learning .eyebrow,
.detail-body .cave-stage,
.detail-body .decision .num,
.detail-body .decision strong,
.detail-body .workflow b { color: var(--lime); }
.detail-body dl div,
.detail-body .decision,
.detail-body .workflow,
.detail-body .character-stage-group,
.detail-body .concept img { border-color: var(--shell-line); }
.detail-body .filter-row button { color: var(--shell-text); border-color: var(--control-border); }
.detail-body .filter-row button.active,
.detail-body .download-button { background: var(--action-background); color: var(--action-text); border-color: var(--action-background); }
.detail-body .text-link { color: var(--shell-text); border-color: var(--shell-text); }
.detail-body a:focus-visible,
.detail-body button:focus-visible { outline-color: var(--lime); }
.character-image-link:hover .character-zoom,
.character-image-link:focus-visible .character-zoom { background: #172e29; color: #ffffff; }
#lightbox { color-scheme: inherit; background: var(--surface); color: var(--shell-text); border-color: var(--control-border); }
#lightbox button { color: var(--shell-text); }
#lightbox figcaption { color: var(--shell-muted); }