/* Dark mode. Loaded last on every page; only active when <html data-theme="dark">. */
.theme-toggle { border: 1.5px solid currentColor; background: transparent; color: inherit; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1; margin-right: 8px; flex: none; }
.theme-toggle.floating { position: fixed; right: 14px; bottom: 14px; z-index: 40; background: var(--card, #fff); }

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf5; --paper: #0b111b; --bg: #0b111b; --white: #141c2a; --card: #141c2a;
  --slate: #9aa6b8; --muted: #9aa6b8; --line: #26324a;
  --danger: #ff8b82; --ok: #6fdc9f; --accent: #e8edf5; --accent-dark: #ffffff;
}
[data-theme="dark"] body { background: var(--paper); color: var(--ink); }

/* things that use the ink colour as a solid fill: keep them as readable dark-on-gold buttons */
[data-theme="dark"] .btn, [data-theme="dark"] .nav a.btn,
[data-theme="dark"] .tab.active, [data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="dark"] .act[aria-pressed="true"] { background: var(--gold); color: #0d1726; border-color: var(--gold); }
[data-theme="dark"] .btn:hover, [data-theme="dark"] .nav a.btn:hover { background: #ffc94d; }
[data-theme="dark"] .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: #0b111b; }
[data-theme="dark"] .btn-grey { background: #223049; color: var(--ink); }
[data-theme="dark"] .btn-danger { background: transparent; border-color: #6b3b37; }
[data-theme="dark"] .admin-tag { background: var(--gold); color: #0d1726; }
[data-theme="dark"] .act.reported[aria-pressed="true"] { background: #b3261e; color: #fff; border-color: #b3261e; }
[data-theme="dark"] .mark b, [data-theme="dark"] .logo span { color: #0d1726; }
[data-theme="dark"] .box-credit { color: #0d1726; }

/* the marigold band stays marigold with dark text */
[data-theme="dark"] .indie { color: #0d1726; --ink: #0d1726; --white: #ffffff; --slate: #3a4658; }
[data-theme="dark"] .indie .btn { background: #0d1726; color: #fff; border-color: #0d1726; }

/* footer stays dark */
[data-theme="dark"] footer, [data-theme="dark"] .foot { background: #070b12; color: #b8c2d2; }
[data-theme="dark"] footer a, [data-theme="dark"] .foot a { color: #fff; }

/* surfaces and fields */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0f1724; color: var(--ink); border-color: #34425e; }
[data-theme="dark"] .box-img, [data-theme="dark"] .card img, [data-theme="dark"] .lead-img { background: #1b2638; }
[data-theme="dark"] .lead-teaser { color: #c3ccda; }
[data-theme="dark"] .skip { background: #141c2a; color: var(--ink); }
[data-theme="dark"] .top, [data-theme="dark"] .site-header { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .nav a:hover, [data-theme="dark"] .chip:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .notice { background: #1a2335; color: var(--ink); }
[data-theme="dark"] .notice.ok { background: #12301f; color: #8be5b0; }
[data-theme="dark"] .notice.warn, [data-theme="dark"] .why, [data-theme="dark"] .correction { background: #33290f; color: #ffdf8a; }
[data-theme="dark"] .notice.bad, [data-theme="dark"] .msg.err { background: #3a1a18; color: #ff9d95; }
[data-theme="dark"] .msg.ok { background: #12301f; color: #8be5b0; }
[data-theme="dark"] .badge { background: #12301f; color: #8be5b0; }
[data-theme="dark"] .badge.warn { background: #33290f; color: #ffdf8a; }
[data-theme="dark"] .badge.bad { background: #3a1a18; color: #ff9d95; }
[data-theme="dark"] .badge.grey { background: #223049; color: #c3ccda; }
[data-theme="dark"] .own-note { background: var(--white); color: var(--slate); }
[data-theme="dark"] .own-note a { color: var(--ink); }
[data-theme="dark"] .arrows button { background: var(--white); color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .arrows button:hover { background: var(--ink); color: #0b111b; }
[data-theme="dark"] .row-img { background: #1b2638; }
[data-theme="dark"] .row-credit { color: #0d1726; }
[data-theme="dark"] .indie .arrows button { background: #ffffff; color: #0d1726; border-color: #0d1726; }
[data-theme="dark"] .indie .arrows button:hover { background: #0d1726; color: #fff; }
[data-theme="dark"] .sidebox { color: #0d1726; }