/* zjt.im themes. Each theme sets the --z-* palette; one mapping block hands it to every site's own variables:
   blog and curling (--bg, --text, --accent ...), election (--paper, --ink, --hope ...), Twordle (--color-tone-*).
   ":root:not(#zz)" lifts specificity above each site's own light/dark rules. "House style" sets nothing. */
#zjt-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 5px max(16px, env(safe-area-inset-right, 0px)) 5px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); position: relative; z-index: 30; }
#zjt-bar .zen-in { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
#zjt-bar .zen-home { font-weight: 700; letter-spacing: .02em; }
#zjt-bar a { color: inherit; opacity: .78; text-decoration: none; } #zjt-bar a:hover, #zjt-bar a:focus-visible { opacity: 1; text-decoration: underline; }
#zjt-bar [aria-current] { font-weight: 600; border-bottom: 2px solid currentColor; }
#zjt-bar select { font: inherit; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 6px; padding: 1px 4px; margin-left: 4px; }
#zjt-bar select option { color: #111; background: #fff; }
#zjt-bar.zen-float { position: fixed; top: 52px; left: 0; right: 0; justify-content: center; border: 0; padding: 2px 8px; font-size: 12px; background: transparent; color: var(--color-tone-2, inherit); }

:root:not(#zz)[data-zen="ice"] { --z-bg: #eef5f9; --z-surface: #ffffff; --z-fg: #0d2436; --z-muted: #557083; --z-line: #c9dbe6; --z-soft: #dcebf4; --z-accent: #c8102e;
  --z-dem: #1f5f9e; --z-rep: #c8102e; --z-good: #2f8f5b; --z-warn: #c9a227; --z-ontile: #ffffff; --z-font: "Barlow", system-ui, sans-serif; --z-head: "Barlow", system-ui, sans-serif;
  --z-mono: ui-monospace, Menlo, monospace; color-scheme: light; }
:root:not(#zz)[data-zen="supper"] { --z-bg: #24160f; --z-surface: #33201a; --z-fg: #f1e3cc; --z-muted: #c3a98a; --z-line: #4d3326; --z-soft: #3d281e; --z-accent: #d9a441;
  --z-dem: #8fb3d9; --z-rep: #e07a5f; --z-good: #8fbf7a; --z-warn: #d9a441; --z-ontile: #1b100b; --z-font: "Lora", Georgia, serif; --z-head: "Lora", Georgia, serif;
  --z-mono: ui-monospace, Menlo, monospace; color-scheme: dark; }
:root:not(#zz)[data-zen="terminal"] { --z-bg: #0a0f0a; --z-surface: #0f1a10; --z-fg: #b8f5ad; --z-muted: #6fae68; --z-line: #1f3a20; --z-soft: #13261a; --z-accent: #39ff14;
  --z-dem: #5fd7ff; --z-rep: #ff6b6b; --z-good: #39ff14; --z-warn: #ffb000; --z-ontile: #0a0f0a; --z-font: "IBM Plex Mono", ui-monospace, monospace; --z-head: "IBM Plex Mono", ui-monospace, monospace;
  --z-mono: "IBM Plex Mono", ui-monospace, monospace; color-scheme: dark; }
:root:not(#zz)[data-zen="newsprint"] { --z-bg: #f3f2ee; --z-surface: #fbfbf9; --z-fg: #111111; --z-muted: #555555; --z-line: #cfcbc2; --z-soft: #e7e4dc; --z-accent: #111111;
  --z-dem: #1d3f73; --z-rep: #8a1c1c; --z-good: #2d5d2d; --z-warn: #8a6d1c; --z-ontile: #ffffff; --z-font: "Source Serif 4", Georgia, serif; --z-head: "Oswald", "Arial Narrow", sans-serif;
  --z-mono: ui-monospace, Menlo, monospace; color-scheme: light; }
:root:not(#zz)[data-zen="blueprint"] { --z-bg: #123a6b; --z-surface: #16457d; --z-fg: #eaf3ff; --z-muted: #a9c4e6; --z-line: #3e6ea8; --z-soft: #1b4f8c; --z-accent: #ffd166;
  --z-dem: #9ad1ff; --z-rep: #ff9b85; --z-good: #8be0a4; --z-warn: #ffd166; --z-ontile: #123a6b; --z-font: "Architects Daughter", "Comic Sans MS", cursive; --z-head: "Architects Daughter", "Comic Sans MS", cursive;
  --z-mono: ui-monospace, Menlo, monospace; color-scheme: dark; }
:root:not(#zz)[data-zen="sketch"] { --z-bg: #ffffff; --z-surface: #ffffff; --z-fg: #111111; --z-muted: #555555; --z-line: #111111; --z-soft: #f1f1f1; --z-accent: #111111;
  --z-dem: #2f6fb3; --z-rep: #b8443a; --z-good: #2e7d4f; --z-warn: #b8902a; --z-ontile: #ffffff; --z-font: "Patrick Hand", "Comic Sans MS", cursive; --z-head: "Patrick Hand", "Comic Sans MS", cursive;
  --z-mono: ui-monospace, Menlo, monospace; color-scheme: light; }

/* the mapping: every site's variables, set on :root and body (Twordle sets its own on body.nightmode) */
:root:not(#zz)[data-zen], :root:not(#zz)[data-zen] body {
  --bg: var(--z-bg); --surface: var(--z-surface); --text: var(--z-fg); --muted: var(--z-muted); --line: var(--z-line); --accent: var(--z-accent);
  --accent-soft: var(--z-soft); --mark: var(--z-soft); --code-bg: var(--z-surface); --serif: var(--z-head); --sans: var(--z-font); --mono: var(--z-mono);
  --ice: var(--z-dem); --soft: var(--z-soft); --red: var(--z-rep); --yellow: var(--z-warn);
  --paper: var(--z-bg); --ink: var(--z-fg); --ink-2: var(--z-muted); --rule: var(--z-fg); --faint: var(--z-line); --hope: var(--z-dem); --doom: var(--z-rep);
  --win: var(--z-good); --note: var(--z-soft); --hand: var(--z-head); --body: var(--z-font);
  --color-tone-1: var(--z-fg); --color-tone-2: var(--z-muted); --color-tone-3: var(--z-muted); --color-tone-4: var(--z-line); --color-tone-5: var(--z-surface);
  --color-tone-6: var(--z-surface); --color-tone-7: var(--z-bg); --color-background: var(--z-bg); --key-bg: var(--z-line); --key-text-color: var(--z-fg);
  --modal-content-bg: var(--z-surface); --tile-text-color: var(--z-ontile); --key-evaluated-text-color: var(--z-ontile);
  font-family: var(--z-font);
}
:root:not(#zz)[data-zen] body:not(.colorblind) { --green: var(--z-good); --darkendGreen: var(--z-good); --darkendYellow: var(--z-warn); --color-correct: var(--z-good); --color-present: var(--z-warn); --color-absent: var(--z-muted); }
:root:not(#zz)[data-zen] body { background-color: var(--z-bg); color: var(--z-fg); }
:root:not(#zz)[data-zen] :is(h1, h2, h3) { font-family: var(--z-head); }
:root:not(#zz)[data-zen] a { color: var(--z-accent); }
/* textures */
:root:not(#zz)[data-zen="ice"] body { background-image: radial-gradient(circle at 92% 0%, transparent 0 60px, color-mix(in srgb, var(--z-rep) 12%, transparent) 60px 64px, transparent 64px 140px, color-mix(in srgb, var(--z-dem) 12%, transparent) 140px 144px, transparent 144px); background-attachment: fixed; }
:root:not(#zz)[data-zen="supper"] body { background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .12) 46px 48px, transparent 48px 97px, rgba(255, 255, 255, .025) 97px 99px); }
:root:not(#zz)[data-zen="terminal"] body { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); text-shadow: 0 0 6px color-mix(in srgb, var(--z-good) 35%, transparent); }
:root:not(#zz)[data-zen="newsprint"] :is(h1, h2) { text-transform: uppercase; letter-spacing: .03em; }
:root:not(#zz)[data-zen="blueprint"] body { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 24px 24px; }
@media (prefers-reduced-motion: reduce) { :root:not(#zz)[data-zen="terminal"] body { text-shadow: none; } }
