/* quikchaos.com themes. Pages style only through these tokens.
   A theme is one block. Any element can carry data-theme, so a menu row
   previews its theme with no extra code.
   scripts/build-modes.pl reads --modes and writes one static copy of each page per mode.
   palette: lines are read by scripts/check-modes.pl, which fails a mode that uses a
   color outside its hardware or misses 4.5:1. */

:root {
  --modes: "graphite:Graphite,mono:Mono,dotmatrix:Dot Matrix,cga:CGA";
  --font: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --font-display: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --font-prose: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
}

/* Games-page set marks and scores keep their EGA colors in Graphite only. */
[data-theme]:not([data-theme="graphite"]) { --mark: var(--text); }

:root, [data-theme="graphite"] {
  color-scheme: dark;
  --bg: #1c1e22; --card: #242628; --bar: #161819; --border: #303438;
  --text: #c0c8d0; --dim: #a9b1bc; --bright: #e0e4ea; --link: #7cb8ee; --accent: #a8bdd0;
  --ok: #4da885; --watch: #e69f00; --alert: #db8263; --info: #56b4e9; --none: #8e96a2;
  --nav-bg: #161819; --nav-fg: #a9b1bc; --band-bg: #1c1e22; --band-fg: #c0c8d0; --band-link: #7cb8ee;
  --moon: url("moons/moon-graphite.webp"); --moon-render: auto;
}

/* palette: #000000 #707070 #aaaaaa #ffffff */
[data-theme="mono"] {
  color-scheme: light;
  --bg: #ffffff; --card: #ffffff; --bar: #ffffff; --border: #000000;
  --text: #000000; --dim: #000000; --bright: #000000; --link: #707070; --accent: #000000;
  --ok: #000000; --watch: #000000; --alert: #000000; --info: #000000; --none: #000000;
  --nav-bg: #ffffff; --nav-fg: #000000; --band-bg: #000000; --band-fg: #ffffff; --band-link: #aaaaaa;
  --moon: url("moons/moon-mono.png"); --moon-render: pixelated;
}

/* palette: #0f380f #306230 #8bac0f #9bbc0f */
[data-theme="dotmatrix"] {
  color-scheme: light;
  --bg: #9bbc0f; --card: #8bac0f; --bar: #8bac0f; --border: #306230;
  --text: #0f380f; --dim: #0f380f; --bright: #0f380f; --link: #0f380f; --accent: #0f380f;
  --ok: #0f380f; --watch: #0f380f; --alert: #0f380f; --info: #0f380f; --none: #0f380f;
  --nav-bg: #0f380f; --nav-fg: #9bbc0f; --band-bg: #0f380f; --band-fg: #9bbc0f; --band-link: #9bbc0f;
  --moon: url("moons/moon-dotmatrix.png"); --moon-render: pixelated;
}

/* palette: #000000 #55ffff #ff55ff #ffffff */
[data-theme="cga"] {
  color-scheme: dark;
  --bg: #000000; --card: #000000; --bar: #000000; --border: #55ffff;
  --text: #ffffff; --dim: #55ffff; --bright: #ffffff; --link: #55ffff; --accent: #ff55ff;
  --ok: #55ffff; --watch: #ffffff; --alert: #ff55ff; --info: #55ffff; --none: #ffffff;
  --nav-bg: #000000; --nav-fg: #55ffff; --band-bg: #000000; --band-fg: #ffffff; --band-link: #55ffff;
  --moon: url("moons/moon-cga.png"); --moon-render: pixelated;
}

/* A scope paints itself, so a preview shows its own colors. */
[data-theme] { background: var(--bg); color: var(--text); }

/* Switcher: a native popover of plain links, no script. The sticky header keeps
   the button near the top, so the menu has a fixed spot on wide screens. */
.mode-button { font: inherit; color: var(--nav-fg); background: transparent; border: 1px solid currentColor; border-radius: 0; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.mode-button:hover, .mode-button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mode-menu { position: fixed; inset: 44px max(40px, calc(50% - 510px)) auto auto; margin: 0; padding: 0; width: 14rem; background: var(--bg); border: 1px solid var(--text); font-family: var(--font); font-size: 13px; }
.mode-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; color: var(--text); text-decoration: none; }
.mode-menu a:hover .mode-name, .mode-menu a:focus-visible .mode-name { text-decoration: underline; text-underline-offset: 3px; }
.mode-menu a[aria-current="true"] .mode-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mode-sw { display: flex; gap: 2px; flex: none; }
.mode-sw i { display: block; width: 10px; height: 10px; border: 1px solid var(--text); }
.mode-sw i:nth-child(1) { background: var(--link); }
.mode-sw i:nth-child(2) { background: var(--accent); }
.mode-sw i:nth-child(3) { background: var(--card); }
.mode-sw i:nth-child(4) { background: var(--band-bg); }
@media (max-width: 700px) { .mode-menu { inset: 0; margin: auto; height: fit-content; } }