/*
 * UI styles — a third, independent appearance choice next to Light/Dark and the
 * accent colour (js/theme.js: data-style on <html>, picked in navbar.js's theme
 * modal). Each style re-skins the SAME pages: palette, typography, shape, borders,
 * shadows and background texture. Layout is unchanged.
 *
 *   clarity   — the default look (no data-style attribute, so no rules here)
 *   midnight  — dark, focused, developer-style (always dark)
 *   bold      — bright, chunky outlines, offset shadows (light + dark)
 *   terminal  — hacker shell: monospace, phosphor screen, scanlines (always dark)
 *   editorial — black / white / one colour, big tight type, square edges (light + dark)
 *   notebook  — graph paper, handwritten headings, highlighter (light + dark)
 *
 * Rules of the road:
 *   - Accent colours keep working: a style only sets --accent when NO accent is
 *     chosen (:not([data-accent])), and style.css's [data-accent] rules come later
 *     in specificity, so the user's pick wins.
 *   - Always-dark styles get data-theme="dark" from theme.js too, so every existing
 *     dark-only rule (code highlighting, the Teacher's chalkboard) still applies.
 *   - Fonts are loaded by theme.js only for the active style.
 */

/* ================= Midnight Lab ================= */
:root[data-style="midnight"] {
  --bg: #0a0c11; --bg-elevated: #0f131b; --bg-panel: #0d1017; --bg-panel-2: #141a26; --bg-hover: #1a2030;
  --border: #1d2230; --border-light: #2c3344;
  --text: #e6e9ef; --text-dim: #a3abbb; --text-faint: #8a93a6;
  --glass-bg: rgba(13, 16, 23, 0.82); --dot-color: rgba(255, 255, 255, 0.04);
  --chat-received-bg: #161b28; --chat-received-text: #e6e9ef;
  --radius: 14px; --radius-sm: 10px;
}
:root[data-style="midnight"]:not([data-accent]) {
  --accent: #8b9bff; --accent-dark: #a5b4ff; --blue: #8b9bff;
  --accent-gradient: linear-gradient(135deg, #8b9bff 0%, #c4a7ff 100%);
}
:root[data-style="midnight"] h1, :root[data-style="midnight"] h2, :root[data-style="midnight"] h3,
:root[data-style="midnight"] .navbar .brand { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
:root[data-style="midnight"] .hint, :root[data-style="midnight"] .badge, :root[data-style="midnight"] .status-pill { font-family: "JetBrains Mono", monospace; letter-spacing: 0; }
:root[data-style="midnight"] .card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset; }
:root[data-style="midnight"] { --btn-bg: var(--accent); --btn-fg: #0a0c11; }

/* ================= Bold & Friendly ================= */
:root[data-style="bold"] {
  --bg: #f5f3ff; --bg-elevated: #ffffff; --bg-panel: #f5f3ff; --bg-panel-2: #ede9fe; --bg-hover: #e9e4ff;
  --border: #1b1740; --border-light: #1b1740;
  --text: #1b1740; --text-dim: #433d6b; --text-faint: #5b5680;
  --glass-bg: rgba(255, 255, 255, 0.92); --dot-color: rgba(27, 23, 64, 0.06);
  --radius: 20px; --radius-sm: 14px;
  --ln-ink: #1b1740;
}
:root[data-style="bold"][data-theme="dark"] {
  --bg: #120f2a; --bg-elevated: #1c1840; --bg-panel: #16123a; --bg-panel-2: #241f52; --bg-hover: #2b2560;
  --border: #c4b5fd; --border-light: #c4b5fd;
  --text: #f5f3ff; --text-dim: #d4ccff; --text-faint: #b3a9ea;
  --glass-bg: rgba(28, 24, 64, 0.92); --dot-color: rgba(255, 255, 255, 0.05);
  --chat-received-bg: #241f52; --chat-received-text: #f5f3ff;
  --ln-ink: #c4b5fd;
}
:root[data-style="bold"]:not([data-accent]) { --accent: #6d28d9; --accent-dark: #5b21b6; --blue: #6d28d9; }
:root[data-style="bold"][data-theme="dark"]:not([data-accent]) { --accent: #a78bfa; --accent-dark: #c4b5fd; --blue: #a78bfa; }
:root[data-style="bold"] body { font-family: "Nunito Sans", Inter, sans-serif; }
:root[data-style="bold"] h1, :root[data-style="bold"] h2, :root[data-style="bold"] h3,
:root[data-style="bold"] .navbar .brand { font-family: "Bricolage Grotesque", "Nunito Sans", sans-serif; font-weight: 800; }
:root[data-style="bold"] .card { border-width: 2px; box-shadow: 4px 4px 0 var(--ln-ink); }
:root[data-style="bold"] .navbar { border-bottom-width: 2px; }
:root[data-style="bold"] { --btn-bg: var(--accent); --btn-fg: #ffffff; --btn-border: 2px solid var(--ln-ink); --btn-shadow: 2px 2px 0 var(--ln-ink); }
:root[data-style="bold"] button { font-weight: 800; }
:root[data-style="bold"] button.secondary, :root[data-style="bold"] button.ghost { border: 2px solid var(--ln-ink); box-shadow: 2px 2px 0 var(--ln-ink); }
:root[data-style="bold"] input, :root[data-style="bold"] select, :root[data-style="bold"] textarea { border-width: 2px; border-color: var(--ln-ink); }
:root[data-style="bold"] .badge, :root[data-style="bold"] .status-pill { border: 1.5px solid var(--ln-ink); }

/* ================= Terminal ================= */
/* The whole screen takes its colour from the accent: green by default, cyan with
   Ocean, amber with Sunset, and so on — color-mix keeps text, dim text and borders
   in that same phosphor family. */
:root[data-style="terminal"] {
  --phosphor: var(--accent);
  --bg: #020403; --bg-elevated: #050a07; --bg-panel: #040806; --bg-panel-2: #07110b; --bg-hover: #0b1a12;
  --text: color-mix(in srgb, var(--phosphor) 55%, #ffffff);
  --text-dim: color-mix(in srgb, var(--phosphor) 85%, #ffffff);
  --text-faint: color-mix(in srgb, var(--phosphor) 70%, #050a07);
  --border: color-mix(in srgb, var(--phosphor) 28%, #020403);
  --border-light: color-mix(in srgb, var(--phosphor) 45%, #020403);
  --glass-bg: rgba(5, 10, 7, 0.9); --dot-color: transparent;
  --chat-received-bg: #07110b; --chat-received-text: var(--text);
  --radius: 4px; --radius-sm: 3px;
}
:root[data-style="terminal"]:not([data-accent]) {
  --accent: #39ff88; --accent-dark: #7cffb2; --blue: #39ff88;
  --accent-gradient: linear-gradient(135deg, #39ff88 0%, #7cffb2 100%);
}
:root[data-style="terminal"] body, :root[data-style="terminal"] input, :root[data-style="terminal"] select,
:root[data-style="terminal"] textarea, :root[data-style="terminal"] button {
  font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0;
}
/* Faint CRT scanlines over the whole page. */
:root[data-style="terminal"] body {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  background-size: auto;
}
:root[data-style="terminal"] h1, :root[data-style="terminal"] h2, :root[data-style="terminal"] h3 {
  color: var(--phosphor); text-shadow: 0 0 8px color-mix(in srgb, var(--phosphor) 45%, transparent); letter-spacing: 0.02em;
}
:root[data-style="terminal"] h1::before, :root[data-style="terminal"] h2::before { content: "> "; opacity: 0.7; }
:root[data-style="terminal"] .navbar .brand { color: var(--phosphor); text-shadow: 0 0 8px color-mix(in srgb, var(--phosphor) 45%, transparent); }
:root[data-style="terminal"] .navbar .brand::after { content: "_"; margin-left: 2px; animation: ln-term-blink 1s steps(1) infinite; }
@keyframes ln-term-blink { 50% { opacity: 0; } }
:root[data-style="terminal"] .logo-mark { background: transparent !important; color: var(--phosphor) !important; border: 1px solid var(--phosphor); box-shadow: 0 0 10px color-mix(in srgb, var(--phosphor) 35%, transparent) !important; }
:root[data-style="terminal"] .card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--phosphor) 10%, transparent), 0 0 24px color-mix(in srgb, var(--phosphor) 6%, transparent); }
:root[data-style="terminal"] { --btn-bg: var(--phosphor); --btn-fg: #020403; }
:root[data-style="terminal"] button { text-transform: lowercase; }
:root[data-style="terminal"] button.secondary, :root[data-style="terminal"] button.ghost { background: transparent; color: var(--phosphor); border: 1px solid var(--border-light); }
:root[data-style="terminal"] input, :root[data-style="terminal"] textarea { caret-color: var(--phosphor); }
:root[data-style="terminal"] input::placeholder, :root[data-style="terminal"] textarea::placeholder { color: var(--text-faint); }
:root[data-style="terminal"] a { color: var(--phosphor); }
:root[data-style="terminal"] .badge, :root[data-style="terminal"] .status-pill { border-radius: 2px; }
:root[data-style="terminal"] ::selection { background: var(--phosphor); color: #020403; }

/* ================= Editorial ================= */
:root[data-style="editorial"] {
  --bg: #ffffff; --bg-elevated: #ffffff; --bg-panel: #f6f6f6; --bg-panel-2: #f0f0f0; --bg-hover: #ececec;
  --border: #111111; --border-light: #111111;
  --text: #111111; --text-dim: #333333; --text-faint: #555555;
  --glass-bg: rgba(255, 255, 255, 0.96); --dot-color: transparent;
  --radius: 0px; --radius-sm: 0px;
}
:root[data-style="editorial"][data-theme="dark"] {
  --bg: #0b0b0b; --bg-elevated: #0b0b0b; --bg-panel: #141414; --bg-panel-2: #1b1b1b; --bg-hover: #222222;
  --border: #f2f2f2; --border-light: #f2f2f2;
  --text: #f2f2f2; --text-dim: #d0d0d0; --text-faint: #a8a8a8;
  --glass-bg: rgba(11, 11, 11, 0.96);
  --chat-received-bg: #1b1b1b; --chat-received-text: #f2f2f2;
}
:root[data-style="editorial"]:not([data-accent]) { --accent: #d8261c; --accent-dark: #b3170f; --blue: #d8261c; }
:root[data-style="editorial"][data-theme="dark"]:not([data-accent]) { --accent: #ff4d40; --accent-dark: #ff7a70; --blue: #ff4d40; }
:root[data-style="editorial"] body { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; }
:root[data-style="editorial"] h1, :root[data-style="editorial"] h2, :root[data-style="editorial"] h3,
:root[data-style="editorial"] .navbar .brand { font-weight: 900; letter-spacing: -0.04em; line-height: 1.02; }
:root[data-style="editorial"] h1 { font-size: clamp(1.7em, 4.2vw, 2.6em); }
:root[data-style="editorial"] .navbar { border-bottom-width: 3px; }
:root[data-style="editorial"] .navbar .brand { text-transform: uppercase; }
:root[data-style="editorial"] .card { box-shadow: none; }
:root[data-style="editorial"] .hint, :root[data-style="editorial"] .badge, :root[data-style="editorial"] .status-pill,
:root[data-style="editorial"] .navbar nav a.nav-link { font-family: "Archivo Narrow", Archivo, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
:root[data-style="editorial"] button { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
:root[data-style="editorial"] .logo-mark { border-radius: 0 !important; background: var(--accent) !important; box-shadow: none !important; }
:root[data-style="editorial"] .badge, :root[data-style="editorial"] .status-pill { border-radius: 0; }

/* ================= Notebook ================= */
:root[data-style="notebook"] {
  --bg: #fdfdfb; --bg-elevated: #ffffff; --bg-panel: #fafaf6; --bg-panel-2: #f3f4f0; --bg-hover: #eef2f7;
  --border: #d6dde8; --border-light: #c3ccd9;
  --text: #1f2937; --text-dim: #4b5563; --text-faint: #6b7280;
  --glass-bg: rgba(255, 255, 255, 0.94);
  --grid-line: #e3ebf6; --highlight: #fde68a; --margin-line: #f3a6a6;
  --radius: 8px; --radius-sm: 6px;
}
:root[data-style="notebook"][data-theme="dark"] {
  --bg: #12161f; --bg-elevated: #1a202c; --bg-panel: #161b26; --bg-panel-2: #212836; --bg-hover: #262e3d;
  --border: #303a4d; --border-light: #3d485f;
  --text: #e8ecf3; --text-dim: #c2c9d6; --text-faint: #a0a9b8;
  --glass-bg: rgba(26, 32, 44, 0.94);
  --chat-received-bg: #212836; --chat-received-text: #e8ecf3;
  --grid-line: #1f2633; --highlight: rgba(250, 204, 21, 0.35); --margin-line: #7f3b3b;
}
:root[data-style="notebook"]:not([data-accent]) { --accent: #1e40af; --accent-dark: #1e3a8a; --blue: #1e40af; }
:root[data-style="notebook"][data-theme="dark"]:not([data-accent]) { --accent: #93c5fd; --accent-dark: #bfdbfe; --blue: #93c5fd; }
:root[data-style="notebook"] body {
  font-family: "Atkinson Hyperlegible", Inter, sans-serif;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
:root[data-style="notebook"] h1, :root[data-style="notebook"] h2,
:root[data-style="notebook"] .navbar .brand { font-family: Caveat, "Comic Sans MS", cursive; font-weight: 700; letter-spacing: 0; color: var(--accent); }
:root[data-style="notebook"] h1 { font-size: clamp(1.8em, 4vw, 2.4em); }
:root[data-style="notebook"] h2 { font-size: 1.9em; }
:root[data-style="notebook"] .navbar .brand { font-size: 26px; }
:root[data-style="notebook"] .navbar { border-bottom: 2px solid var(--margin-line); }
:root[data-style="notebook"] .card { box-shadow: 0 2px 0 var(--border); }
:root[data-style="notebook"] .navbar nav a.nav-link.active { background: linear-gradient(transparent 55%, var(--highlight) 55%); }
:root[data-style="notebook"] { --btn-bg: var(--accent); --btn-fg: #ffffff; }
:root[data-style="notebook"][data-theme="dark"] { --btn-fg: #12161f; }
:root[data-style="notebook"] .logo-mark { transform: rotate(-4deg); }

/* ================= The picker's style cards (navbar.js openThemeModal) ================= */
.theme-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.theme-style-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; text-align: left;
  background: var(--bg-panel-2); color: var(--text); border: 2px solid transparent; border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.theme-style-card::before { content: none !important; }
.theme-style-card:hover { border-color: var(--border-light); opacity: 1; }
.theme-style-card.active { border-color: var(--accent); }
.theme-style-card small { font-weight: 500; font-size: 11.5px; color: var(--text-dim); line-height: 1.3; }
.theme-style-preview { height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; overflow: hidden; }
.theme-style-preview i { display: block; width: 26px; height: 14px; border-radius: 3px; }
.theme-mode-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }
/* Wider than the original 320px picker, for the two-column style grid. */
.theme-modal { width: 420px; }
/* Bold's chunky shadow is for real buttons; these component buttons draw their own
   look (and don't all reset box-shadow themselves). */
:root[data-style="bold"] .tab-strip button, :root[data-style="bold"] button.link-btn, :root[data-style="bold"] button.icon-btn,
:root[data-style="bold"] .theme-option, :root[data-style="bold"] .theme-style-card, :root[data-style="bold"] .sheet-item,
:root[data-style="bold"] .quiz-opt, :root[data-style="bold"] .lp-choice, :root[data-style="bold"] .emoji-key,
:root[data-style="bold"] .code-copy, :root[data-style="bold"] .code-more, :root[data-style="bold"] .chip,
:root[data-style="bold"] .nav-link { box-shadow: none; }