/* The Logbook colour themes (18 Oct 2026).
   styles.css holds the original Logbook palette on :root. Each theme here
   re-sets the base colours and the roles, on whatever element carries
   data-theme: <html> for the whole page, or a swatch in the picker so it
   can preview a theme without switching to it.

   Roles have to be restated on every [data-theme] element, because a
   custom property that says var(--navy) is worked out where it is declared
   and then inherited as a finished colour. */

[data-theme] {
  --page: var(--cream);
  --heading: var(--navy);
  --strong: var(--navy);
  --strong-deep: var(--navy-deep);
  --on-strong: var(--cream);
  --header-bg: var(--navy);
  --header-ink: var(--cream);
  --header-mark: var(--brass-soft);
  --on-strong-accent: var(--brass-soft);
  --brass-deep: var(--brass-ink);
  --icon-warm: var(--icon);
  /* non-colour defaults, so a swatch never borrows from the page's theme */
  --on-teal: #ffffff;
  --paper: transparent;
  --wash: rgba(28, 44, 76, 0.05);
  --ink-faint: rgba(28, 44, 76, 0.35);
  --radius: 14px;
  --shadow: 0 2px 10px rgba(28, 44, 76, 0.07), 0 10px 30px rgba(28, 44, 76, 0.06);
  --shadow-lift: 0 4px 14px rgba(28,44,76,0.1), 0 14px 34px rgba(28,44,76,0.09);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* ---------- Logbook: the original navy, cream and brass ---------- */
[data-theme="logbook"] {
  --navy: #1c2c4c;
  --navy-deep: #142038;
  --ink: #24304a;
  --cream: #faf6ee;
  --card: #ffffff;
  --brass: #b8892d;
  --brass-soft: #e9d9b4;
  --brass-ink: #8a6d15;
  --brass-deep: #6d5317;
  --teal: #35766b;
  --teal-soft: #d9eae6;
  --teal-line: #bcd9d3;
  --rose: #a24a3f;
  --rose-soft: #f3e0dc;
  --line: #e6dfd2;
  --muted: #6b7386;
  --ink-soft: #4d5568;
  --field: #fffdf9;
  --icon: #98a0af;
  --icon-warm: #b6afa0;
  --ok-bg: #e3f0e4; --ok-ink: #2e6b46; --ok-line: #c4dfc9;
  --nudge-bg: #fdf1d8; --nudge-line: #ecd9a5;
}

/* ---------- Citrus: lemons, limes and oranges ---------- */
[data-theme="citrus"] {
  --board: #7c2d12; --board-deep: #5a200c; --board-lift: #9a3412;
  --on-brass: #2b1600; --on-brass-dark: #2b1600;
  --navy: #3d6b0e;          /* headings: lime rind */
  --navy-deep: #9a3412;
  --ink: #2b2a1c;
  --cream: #fff8d6;
  --card: #ffffff;
  --brass: #f08c00;
  --brass-soft: #ffe8a3;
  --brass-ink: #8f4a00;
  --teal: #4d7c0f;
  --teal-soft: #eafbc8;
  --teal-line: #bfe68a;
  --rose: #c0262d;
  --rose-soft: #ffe2dc;
  --line: #f2e2a4;
  --muted: #6b6547;
  --ink-soft: #4a4530;
  --field: #fffdf0;
  --icon: #c2a94e;
  --ok-bg: #eafbc8; --ok-ink: #3d6b0e; --ok-line: #bfe68a;
  --nudge-bg: #fff0c7; --nudge-line: #f7cf6a;
  --strong: #c2410c;        /* orange peel */
  --strong-deep: #9a3412;
  --on-strong: #fffbea;
  --header-bg: linear-gradient(100deg, #c2410c, #e0620f);
  --header-ink: #fffbea;
  --header-mark: #ffe066;
  --on-strong-accent: #ffe066;
  --radius: 20px;
  --shadow: 0 2px 10px rgba(194, 65, 12, 0.08), 0 10px 30px rgba(161, 98, 7, 0.08);
  --shadow-lift: 0 4px 14px rgba(194, 65, 12, 0.12), 0 14px 34px rgba(161, 98, 7, 0.12);
  --font-display: "Fredoka", "Inter", sans-serif;
}

/* ---------- Mint: cool and fresh, with a peppermint stripe ---------- */
[data-theme="mint"] {
  --board: #0b4f42; --board-deep: #073a31; --board-lift: #11745f;
  --on-brass: #ffffff; --on-brass-dark: #ffffff;
  --navy: #0f5144;
  --navy-deep: #0b4f42;
  --ink: #1d3b35;
  --cream: #ecfaf3;
  --card: #ffffff;
  --brass: #e0457b;
  --brass-soft: #fde0ea;
  --brass-ink: #ad2458;
  --teal: #0b7d66;
  --teal-soft: #d2f4e6;
  --teal-line: #9fe3c9;
  --rose: #c2410c;
  --rose-soft: #ffe8d6;
  --line: #cbeedf;
  --muted: #557a70;
  --ink-soft: #36564e;
  --field: #f7fefb;
  --icon: #84bcad;
  --ok-bg: #d2f4e6; --ok-ink: #0b6b57; --ok-line: #9fe3c9;
  --nudge-bg: #fde8ef; --nudge-line: #f5b3c9;
  --strong: #11745f;
  --strong-deep: #0b5a4a;
  --on-strong: #effcf6;
  --header-bg: #11745f;
  --header-ink: #effcf6;
  --header-mark: #ffb3cd;
  --on-strong-accent: #b5f5dc;
  --radius: 22px;
  --shadow: 0 2px 10px rgba(17, 116, 95, 0.07), 0 10px 30px rgba(17, 116, 95, 0.07);
  --shadow-lift: 0 4px 14px rgba(17, 116, 95, 0.12), 0 14px 34px rgba(17, 116, 95, 0.1);
  --font-display: "Quicksand", "Inter", sans-serif;
}

/* ---------- Berry: bright pinks and purples ---------- */
[data-theme="berry"] {
  --board: #3b0f6b; --board-deep: #2a0a4d; --board-lift: #5b21b6;
  --on-brass: #2b1600; --on-brass-dark: #2b1600;
  --navy: #6b1f8f;
  --navy-deep: #581c87;
  --ink: #3a1d47;
  --cream: #fdf0f7;
  --card: #ffffff;
  --brass: #e08a00;
  --brass-soft: #fff0c2;
  --brass-ink: #8f4f00;
  --teal: #be185d;
  --teal-soft: #fce4f1;
  --teal-line: #f6b0d3;
  --rose: #b91c1c;
  --rose-soft: #fee2e2;
  --line: #f1d2e5;
  --muted: #7d5f8a;
  --ink-soft: #57406a;
  --field: #fffafd;
  --icon: #c79ad9;
  --ok-bg: #f3e8ff; --ok-ink: #6b21a8; --ok-line: #d8b4fe;
  --nudge-bg: #fff3cf; --nudge-line: #f8cf6b;
  --strong: #7e22ce;
  --strong-deep: #6b21a8;
  --on-strong: #ffffff;
  --header-bg: linear-gradient(100deg, #7e22ce, #c026a3);
  --header-ink: #ffffff;
  --header-mark: #ffc4e6;
  --on-strong-accent: #ffc4e6;
  --radius: 20px;
  --shadow: 0 2px 10px rgba(126, 34, 206, 0.08), 0 10px 30px rgba(190, 24, 93, 0.07);
  --shadow-lift: 0 4px 14px rgba(126, 34, 206, 0.13), 0 14px 34px rgba(190, 24, 93, 0.1);
  --font-display: "Baloo 2", "Inter", sans-serif;
}

/* ---------- Mono: black and white, sharp as a pencil ---------- */
[data-theme="mono"] {
  --board: #000000; --board-deep: #262626; --board-lift: #333333;
  --on-brass: #ffffff; --on-brass-dark: #ffffff;
  --navy: #000000;
  --navy-deep: #333333;
  --ink: #1f1f1f;
  --cream: #f2f2f2;
  --card: #ffffff;
  --brass: #000000;
  --brass-soft: #e4e4e4;
  --brass-ink: #333333;
  --teal: #000000;
  --teal-soft: #e6e6e6;
  --teal-line: #b3b3b3;
  --on-teal: #ffffff;
  --rose: #4d4d4d;
  --rose-soft: #ececec;
  --line: #cfcfcf;
  --muted: #5e5e5e;
  --ink-soft: #3d3d3d;
  --field: #ffffff;
  --icon: #8c8c8c;
  --ok-bg: #ffffff; --ok-ink: #000000; --ok-line: #000000;
  --nudge-bg: #ececec; --nudge-line: #9e9e9e;
  --on-strong: #ffffff;
  --header-ink: #ffffff;
  --header-mark: #ffffff;
  --on-strong-accent: #ffffff;
  --radius: 6px;
  --shadow: 0 0 0 2px #000000;
  --shadow-lift: 0 0 0 2px #000000, 5px 5px 0 #000000;
  --font-display: "Space Mono", ui-monospace, monospace;
}
/* the coloured story tiles go grey too, so the theme stays true */
[data-theme="mono"] .story-card,
[data-theme="mono"] .fun-card,
[data-theme="mono"] .badge-new,
[data-theme="mono"] .badge-topup,
[data-theme="mono"] .countdown-card,
[data-theme="mono"] .cd-hub-card,
[data-theme="mono"] .lt-tile-front,
[data-theme="mono"] .lt-mini i { filter: grayscale(1); }

/* ---------- Old Library: leather, parchment and ink ---------- */
[data-theme="library"] {
  --board: #3b2314; --board-deep: #2a170c; --board-lift: #5a3a22;
  --on-brass: #ffffff; --on-brass-dark: #ffffff;
  font-variant-numeric: lining-nums;   /* Playfair's old-style 3s and 5s dip below the line: not for sums */
  --navy: #4a2210;
  --navy-deep: #3a190b;
  --ink: #33261a;
  --cream: #efe3c4;
  --card: #faf3df;
  --brass: #a0701a;
  --brass-soft: #ead7a6;
  --brass-ink: #7a5410;
  --teal: #2f5d47;
  --teal-soft: #dfe6cd;
  --teal-line: #b7c69e;
  --on-teal: #faf3df;
  --rose: #8b2e1f;
  --rose-soft: #f1d9cc;
  --line: #dbc89c;
  --muted: #6f5c44;
  --ink-soft: #4f3e2c;
  --field: #fdf8ea;
  --icon: #a89472;
  --ok-bg: #e3e8d0; --ok-ink: #2f5d47; --ok-line: #b7c69e;
  --nudge-bg: #f3e4bd; --nudge-line: #d9bd7e;
  --strong: #6b2a17;        /* oxblood leather */
  --strong-deep: #521f10;
  --on-strong: #f6ecd2;
  --header-bg: #3b2314;
  --header-ink: #f1e4c4;
  --header-mark: #d8b26a;
  --on-strong-accent: #e6c784;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(59, 35, 20, 0.12), 0 8px 24px rgba(59, 35, 20, 0.1);
  --shadow-lift: 0 2px 4px rgba(59, 35, 20, 0.16), 0 14px 32px rgba(59, 35, 20, 0.14);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
}

/* ---------- Future: neon in deep space (dark) ---------- */
[data-theme="future"] {
  --board: #1c2768; --board-deep: #070b20; --board-lift: #2c3a96;
  --on-brass: #04121c; --on-brass-dark: #04121c;
  --navy: #8ff7ff;          /* headings glow cyan */
  --navy-deep: #b8fbff;
  --ink: #e3e9ff;
  --cream: #0b1026;
  --card: #141b3a;
  --brass: #ff5fd8;
  --brass-soft: #3b1747;
  --brass-ink: #ff9be6;
  --teal: #3fe0f0;
  --teal-soft: #0f3a4a;
  --teal-line: #1f6f80;
  --on-teal: #04121c;
  --rose: #ff7a9a;
  --rose-soft: #3f1628;
  --line: #26315f;
  --muted: #95a2cf;
  --ink-soft: #c2cbee;
  --ink-faint: rgba(227, 233, 255, 0.4);
  --wash: rgba(143, 247, 255, 0.08);
  --field: #0f1631;
  --icon: #6f7db3;
  --ok-bg: #0f3a4a; --ok-ink: #8ff7ff; --ok-line: #1f6f80;
  --nudge-bg: #3b1747; --nudge-line: #7a2d86;
  --strong: #2de2f0;
  --strong-deep: #8ff7ff;
  --on-strong: #04121c;
  --header-bg: #060a1c;
  --header-ink: #dff9ff;
  --header-mark: #ff5fd8;
  --on-strong-accent: #04121c;
  --paper: #fffdf9;
  --radius: 12px;
  --shadow: 0 0 0 1px #26315f, 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 0 0 1px #3fe0f0, 0 0 24px rgba(63, 224, 240, 0.28);
  --font-display: "Exo 2", "Inter", sans-serif;
  color-scheme: dark;
}
[data-theme="future"] .brand span,
[data-theme="future"] .hero-title { font-family: "Orbitron", "Exo 2", sans-serif; letter-spacing: 0.04em; }
[data-theme="future"] .site-header { box-shadow: 0 1px 0 #3fe0f0, 0 0 18px rgba(63, 224, 240, 0.3); }

/* ---------- Midnight: calm, starry and quiet (dark) ---------- */
[data-theme="midnight"] {
  --board: #33357e; --board-deep: #0e0f2b; --board-lift: #4a4ca6;
  --on-brass: #1b1840; --on-brass-dark: #1b1840;
  --navy: #f6dfa4;          /* headings in starlight gold */
  --navy-deep: #f9e7bb;
  --ink: #e8e6fa;
  --cream: #15163a;
  --card: #1f2150;
  --brass: #f2c66d;
  --brass-soft: #3a375f;
  --brass-ink: #f5d38a;
  --teal: #8edfd0;
  --teal-soft: #1f3b55;
  --teal-line: #3b6a7c;
  --on-teal: #102030;
  --rose: #f3a0a8;
  --rose-soft: #432a4a;
  --line: #33366e;
  --muted: #a9aad6;
  --ink-soft: #cfcdee;
  --ink-faint: rgba(232, 230, 250, 0.4);
  --wash: rgba(246, 223, 164, 0.08);
  --field: #1a1c47;
  --icon: #7779b3;
  --ok-bg: #1f3b55; --ok-ink: #a6efe2; --ok-line: #3b6a7c;
  --nudge-bg: #3a375f; --nudge-line: #6a6496;
  --strong: #f2c66d;
  --strong-deep: #f7d58f;
  --on-strong: #1b1840;
  --header-bg: #0e0f2b;
  --header-ink: #ece9ff;
  --header-mark: #f2c66d;
  --on-strong-accent: #1b1840;
  --paper: #fffdf9;
  --shadow: 0 0 0 1px #2c2f66, 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 0 0 1px #4a4d8f, 0 14px 34px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
html[data-theme="midnight"] body {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 68% 9%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 85% 42%, rgba(246, 223, 164, 0.6), transparent 60%),
    radial-gradient(1px 1px at 33% 61%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 52% 83%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 6% 76%, rgba(246, 223, 164, 0.45), transparent 60%),
    radial-gradient(1px 1px at 92% 88%, rgba(255, 255, 255, 0.35), transparent 60%);
  background-size: 420px 420px;
  background-attachment: fixed;
}

/* ---------- dark themes: drawings sit on a sheet of paper ----------
   The tools draw in the Logbook's own ink, so on a dark page they get a
   light page of their own, like a worksheet on a desk. */
[data-theme="future"] .tool-svg,
[data-theme="future"] .q-diagram svg,
[data-theme="midnight"] .tool-svg,
[data-theme="midnight"] .q-diagram svg {
  background: var(--paper);
  border-radius: 10px;
}
/* note-length buttons become little paper cards, so the notes show */
[data-theme="future"] .value-btn,
[data-theme="midnight"] .value-btn { background: var(--paper); color: #1c2c4c; border-color: transparent; }
[data-theme="future"] .value-btn.chosen,
[data-theme="midnight"] .value-btn.chosen { background: #d9eae6; border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
/* pop-up cards stand off the page rather than melting into it */
[data-theme="future"] .levelup-card,
[data-theme="midnight"] .levelup-card { background: var(--card); box-shadow: var(--shadow), 0 24px 70px rgba(0, 0, 0, 0.5); }
[data-theme="future"] .chess-board .sq.light,
[data-theme="midnight"] .chess-board .sq.light { background: #e9e4f2; }
[data-theme="future"] .chess-board .sq.dark,
[data-theme="midnight"] .chess-board .sq.dark { background: #8e9bc4; }
[data-theme="future"] .chess-board,
[data-theme="midnight"] .chess-board { color: #1c2c4c; }

/* ---------- the picker ---------- */

.theme-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.theme-dots { display: inline-flex; }
.theme-dots i {
  width: 12px; height: 12px; border-radius: 50%; display: block;
  border: 1.5px solid currentColor; margin-left: -4px;
}
.theme-dots i:first-child { margin-left: 0; background: var(--header-mark); }
.theme-dots i:nth-child(2) { background: var(--teal); }
.theme-dots i:nth-child(3) { background: var(--brass); }

.theme-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 14, 30, 0.55); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .theme-overlay { align-items: center; padding: 20px; } }
.theme-sheet {
  background: var(--card); color: var(--ink); width: 100%; max-width: 720px;
  border-radius: 22px 22px 0 0; padding: 22px 18px 18px; max-height: 92dvh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) { .theme-sheet { border-radius: 22px; padding: 26px 26px 22px; } }
.theme-sheet h2 { font-family: var(--font-display); color: var(--heading); margin: 0 0 4px; font-size: 1.55rem; }
.theme-sheet .theme-sub { color: var(--muted); margin: 0 0 18px; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.theme-tile {
  border: none; padding: 0; text-align: left; cursor: pointer; background: none; color: inherit;
  border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
}
.theme-tile:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.theme-mini {
  display: block; border-radius: 14px; overflow: hidden; background: var(--page);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.theme-tile:hover .theme-mini { transform: translateY(-2px); }
.theme-tile[aria-pressed="true"] .theme-mini { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--heading); }
.theme-mini-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; background: var(--header-bg); color: var(--header-ink); font: 700 0.68rem/1 var(--font-display); }
.theme-mini-bar b { width: 8px; height: 8px; border-radius: 2px; background: var(--header-mark); }
.theme-mini-body { display: block; padding: 9px 9px 10px; }
.theme-mini-card {
  display: block; background: var(--card); border-radius: min(var(--radius), 12px); padding: 8px 9px 9px;
  box-shadow: var(--shadow);
}
.theme-mini-card em { display: block; font: 600 1.05rem/1.1 var(--font-display); color: var(--heading); font-style: normal; }
.theme-mini-row { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.theme-mini-btn { height: 14px; flex: 1; border-radius: 999px; background: var(--strong); }
.theme-mini-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); flex: none; }
.theme-mini-dot.b { background: var(--brass); }
.theme-name { font-weight: 700; color: var(--heading); font-size: 0.98rem; line-height: 1.2; }
.theme-mood { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.theme-on { font-size: 0.78rem; font-weight: 700; color: var(--teal); margin-left: 4px; }
.theme-foot { display: flex; justify-content: flex-end; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .theme-mini { transition: none; }
  .theme-tile:hover .theme-mini { transform: none; }
}

/* small phones: the colours button needs the room more than the name does */
@media (max-width: 480px) {
  .site-header .who { display: none; }
  .brand { white-space: nowrap; }
  .header-nav { gap: 10px; }
  /* the three dots alone, still named for screen readers */
  .theme-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-btn { min-width: 44px; min-height: 40px; justify-content: center; }
  .theme-dots i { width: 15px; height: 15px; }
}