/* Quest Board redesign — look directions (#661).
 *
 * Loaded after kit.css. Each direction overrides the kit's tokens for light and
 * dark and adds the tokens the redesign needs (chrome, player colours, kinds,
 * icon rendering). The page sets two attributes on <html>:
 *   data-look = board | dice | ink
 *   data-mode = light | dark   (resolved from the theme switch and the OS)
 * Components below only read tokens, so the three looks share one set of markup.
 * See docs/design/redesign-surfaces/look/DIRECTIONS.md for the reasoning.
 */

/* ── Tokens every look defines, with neutral fallbacks ─────────────────── */
:root {
  --on-accent: #ffffff;
  --good-soft: #e3f1e6;
  --chrome-bg: var(--paper-sunk);
  --chrome-ink: var(--ink);
  --chrome-soft: var(--ink-soft);
  --chrome-rule: var(--rule);
  --prose: var(--serif);
  --display: var(--serif);
  --on-pc: #ffffff;
  --pc-1: #2a4d9c; --pc-2: #a3262d; --pc-3: #22683f; --pc-4: #7a4f0e; --pc-5: #6a3d8f; --pc-6: #0f6e7a;
  --kind-people: var(--pc-1); --kind-places: var(--pc-3); --kind-groups: var(--pc-2);
  --kind-things: var(--pc-4); --kind-events: var(--pc-5); --kind-lore: var(--ink-soft);
  --i-stroke: 1.75; --i-cap: round; --i-join: round; --i-s-fill: .22; --i-s-stroke: 0; --initial-font: var(--display);
  --card-shadow: none;
  --label-style: normal; --label-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   1. NOTICE BOARD  — painted board, pinned notices, wax seals
   ════════════════════════════════════════════════════════════════════════ */
:root[data-look="board"] {
  --paper: #dde3dc; --paper-raised: #fdfcf9; --paper-sunk: #cfd7cf;
  --rule: #c3ccc3; --rule-strong: #7f8b81;
  --ink: #1d2531; --ink-soft: #3f4a58; --ink-faint: #505a68;
  --accent: #2a4d9c; --accent-soft: #e3eaf8; --accent-ink: #1c3775; --on-accent: #ffffff;
  --warn: #7a5708; --warn-soft: #f6ecd2;
  --live: #a3262d; --live-soft: #f8e3e3;
  --good: #1f6139; --good-soft: #e1efe5;
  --gm: #7a4f0e; --gm-soft: #f7ecd9; --gm-hatch: rgba(122, 79, 14, .12);
  --chrome-bg: #2f4a44; --chrome-ink: #f2f5f1; --chrome-soft: #c5d6ce; --chrome-rule: #46625b; --chrome-current: #46665e; --chrome-current-ink: #ffffff; --chrome-accent: #e3c06a;
  --table-bg: #1a2320; --table-raised: #24302c; --table-rule: #3a4843; --table-ink: #edf2ee; --table-soft: #b3c1ba;
  --pc-1: #2a4d9c; --pc-2: #a3262d; --pc-3: #1f6139; --pc-4: #7a4f0e; --pc-5: #663a8a; --pc-6: #0e6570; --on-pc: #ffffff;
  --kind-people: #2a4d9c; --kind-places: #1f6139; --kind-groups: #a3262d;
  --kind-things: #7a5708; --kind-events: #663a8a; --kind-lore: #3f4a58;
  --display: "Young Serif", Georgia, serif; --serif: var(--sans);
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --prose: var(--sans);
  --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 8px;
  --shadow: 0 1px 0 rgba(29, 37, 49, .10), 0 3px 0 -1px rgba(29, 37, 49, .07);
  --card-shadow: 0 1px 0 rgba(29, 37, 49, .10), 0 3px 0 -1px rgba(29, 37, 49, .07);
  --i-stroke: 2.25; --i-cap: square; --i-join: miter; --i-s-fill: 1; --i-s-stroke: 0;
}
:root[data-look="board"][data-mode="dark"] {
  --paper: #121a18; --paper-raised: #1b2522; --paper-sunk: #0d1311;
  --rule: #2c3834; --rule-strong: #6a7a73;
  --ink: #e9eee9; --ink-soft: #bac5bf; --ink-faint: #97a39d;
  --accent: #9db8ff; --accent-soft: #1d2a45; --accent-ink: #c7d6ff; --on-accent: #0f1b33;
  --warn: #e7bd62; --warn-soft: #33291a;
  --live: #ff8e8a; --live-soft: #3a1f21;
  --good: #7fd19f; --good-soft: #17301f;
  --gm: #e8b86a; --gm-soft: #2e2416; --gm-hatch: rgba(232, 184, 106, .14);
  --chrome-bg: #17221f; --chrome-ink: #e9eee9; --chrome-soft: #aebdb6; --chrome-rule: #2c3834; --chrome-current: #2b3b36; --chrome-current-ink: #ffffff; --chrome-accent: #e8b86a;
  --pc-1: #9db8ff; --pc-2: #ff8e8a; --pc-3: #7fd19f; --pc-4: #e8b86a; --pc-5: #c9a4f0; --pc-6: #6fd3dd; --on-pc: #10161a;
  --kind-people: #9db8ff; --kind-places: #7fd19f; --kind-groups: #ff8e8a;
  --kind-things: #e7bd62; --kind-events: #c9a4f0; --kind-lore: #bac5bf;
  --shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 3px 0 -1px rgba(0, 0, 0, .35);
  --card-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 3px 0 -1px rgba(0, 0, 0, .35);
}

/* ════════════════════════════════════════════════════════════════════════
   2. GAME NIGHT  — baize, dice-coloured people, tokens
   ════════════════════════════════════════════════════════════════════════ */
:root[data-look="dice"] {
  --paper: #eef1ef; --paper-raised: #ffffff; --paper-sunk: #e3e8e5;
  --rule: #d2d9d5; --rule-strong: #85928b;
  --ink: #15201b; --ink-soft: #3a4841; --ink-faint: #55655d;
  --accent: #0b6e55; --accent-soft: #dcf1ea; --accent-ink: #07503e; --on-accent: #ffffff;
  --warn: #7f5a00; --warn-soft: #fbf1d6;
  --live: #b93c0a; --live-soft: #fdebe1;
  --good: #0a6b43; --good-soft: #dff3e8;
  --gm: #6b3fb8; --gm-soft: #efe8fb; --gm-hatch: rgba(107, 63, 184, .12);
  --chrome-bg: #0f3a2e; --chrome-ink: #eef8f3; --chrome-soft: #b3d9ca; --chrome-rule: #22574a; --chrome-current: #1b5445; --chrome-current-ink: #ffffff; --chrome-accent: #7fe0bd;
  --table-bg: #0c2e24; --table-raised: #123b2f; --table-rule: #22574a; --table-ink: #ecf7f1; --table-soft: #aad2c2;
  --pc-1: #2456c9; --pc-2: #b93c0a; --pc-3: #0a6e52; --pc-4: #7a3fd0; --pc-5: #7f5a00; --pc-6: #b52a66; --on-pc: #ffffff;
  --kind-people: #2456c9; --kind-places: #0a6e52; --kind-groups: #b52a66;
  --kind-things: #7f5a00; --kind-events: #7a3fd0; --kind-lore: #3a4841;
  --display: "Unbounded", system-ui, sans-serif; --serif: var(--sans);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --prose: var(--sans);
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
  --shadow: 0 2px 0 var(--rule);
  --card-shadow: none;
  --i-stroke: 2; --i-cap: round; --i-join: round; --i-s-fill: .25; --i-s-stroke: 0;
}
:root[data-look="dice"][data-mode="dark"] {
  --paper: #0f1513; --paper-raised: #161f1b; --paper-sunk: #0b100e;
  --rule: #26332d; --rule-strong: #63776d;
  --ink: #e6efe9; --ink-soft: #b3c2ba; --ink-faint: #8d9d95;
  --accent: #4fd1a5; --accent-soft: #0f2f26; --accent-ink: #9ce8cc; --on-accent: #06231a;
  --warn: #f0c050; --warn-soft: #33290f;
  --live: #ff8a5b; --live-soft: #3a1d12;
  --good: #56d39a; --good-soft: #0f2c1e;
  --gm: #b894ff; --gm-soft: #241a3a; --gm-hatch: rgba(184, 148, 255, .14);
  --chrome-bg: #0b261e; --chrome-ink: #e6f4ec; --chrome-soft: #a6cdbd; --chrome-rule: #1d4a3d; --chrome-current: #16453a; --chrome-current-ink: #ffffff; --chrome-accent: #4fd1a5;
  --pc-1: #7aa2ff; --pc-2: #ff8a5b; --pc-3: #45d3a5; --pc-4: #b894ff; --pc-5: #f0c64a; --pc-6: #ff7eb3; --on-pc: #0c1210;
  --kind-people: #7aa2ff; --kind-places: #45d3a5; --kind-groups: #ff7eb3;
  --kind-things: #f0c64a; --kind-events: #b894ff; --kind-lore: #b3c2ba;
  --shadow: 0 2px 0 var(--rule);
}

/* ════════════════════════════════════════════════════════════════════════
   3. ILLUMINATED  — manuscript pigments, initials, glosses
   ════════════════════════════════════════════════════════════════════════ */
:root[data-look="ink"] {
  --paper: #f4f3ef; --paper-raised: #fdfdfb; --paper-sunk: #eceae3;
  --rule: #dad6cb; --rule-strong: #928b7b;
  --ink: #1f1c29; --ink-soft: #464252; --ink-faint: #5f5a6b;
  --accent: #1d4ea6; --accent-soft: #e3eafa; --accent-ink: #163d84; --on-accent: #ffffff;
  --warn: #7f5500; --warn-soft: #f7eed8;
  --live: #b1261c; --live-soft: #fae6e3;
  --good: #19654a; --good-soft: #e1f0e9;
  --gm: #735208; --gm-soft: #f6eedb; --gm-hatch: rgba(115, 82, 8, .12);
  --chrome-bg: #fdfdfb; --chrome-ink: #1f1c29; --chrome-soft: #464252; --chrome-rule: #dad6cb; --chrome-current: #e3eafa; --chrome-current-ink: #163d84; --chrome-accent: #b1261c;
  --table-bg: #17141f; --table-raised: #211d2c; --table-rule: #3a3448; --table-ink: #efeaf6; --table-soft: #bdb5cd;
  --pc-1: #1d4ea6; --pc-2: #b1261c; --pc-3: #19654a; --pc-4: #7f5500; --pc-5: #7b2a6e; --pc-6: #0c6480; --on-pc: #ffffff;
  --kind-people: #1d4ea6; --kind-places: #19654a; --kind-groups: #b1261c;
  --kind-things: #7f5500; --kind-events: #7b2a6e; --kind-lore: #464252;
  --display: "Alegreya", Georgia, serif; --serif: var(--display); --prose: var(--display);
  --sans: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-1: 2px; --r-2: 3px; --r-3: 5px; --r-4: 8px;
  --shadow: none; --card-shadow: none;
  --i-stroke: 1.5; --i-cap: round; --i-join: round; --i-s-fill: .16; --i-s-stroke: 1;
  --label-style: italic; --label-weight: 500;
}
:root[data-look="ink"][data-mode="dark"] {
  --paper: #14121b; --paper-raised: #1c1926; --paper-sunk: #0f0d15;
  --rule: #2e2a3b; --rule-strong: #6e6683;
  --ink: #ece8f4; --ink-soft: #bdb6cc; --ink-faint: #9890a8;
  --accent: #93b4ff; --accent-soft: #1c2440; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e9bd62; --warn-soft: #312615;
  --live: #ff8f84; --live-soft: #3a1c1f;
  --good: #6fd0a3; --good-soft: #13291f;
  --gm: #e6c36e; --gm-soft: #2d2517; --gm-hatch: rgba(230, 195, 110, .14);
  --chrome-bg: #1c1926; --chrome-ink: #ece8f4; --chrome-soft: #bdb6cc; --chrome-rule: #2e2a3b; --chrome-current: #1c2440; --chrome-current-ink: #c3d4ff; --chrome-accent: #ff8f84;
  --pc-1: #93b4ff; --pc-2: #ff8f84; --pc-3: #6fd0a3; --pc-4: #e9bd62; --pc-5: #de8fd3; --pc-6: #6cc9e3; --on-pc: #14121b;
  --kind-people: #93b4ff; --kind-places: #6fd0a3; --kind-groups: #ff8f84;
  --kind-things: #e9bd62; --kind-events: #de8fd3; --kind-lore: #bdb6cc;
}

/* ── Components that change with the look (tokens only) ───────────────── */

/* Labels: sentence case everywhere; the kit's tracked capitals are retired. */
:root[data-look] .label { text-transform: none; letter-spacing: 0; font-style: var(--label-style); font-weight: var(--label-weight); font-size: var(--step--1); color: var(--ink-soft); }
:root[data-look] .screen__num { text-transform: none; letter-spacing: 0; }

:root[data-look] h1, :root[data-look] h2, :root[data-look] h3, :root[data-look] h4 { font-family: var(--display); }
:root[data-look] .prose { font-family: var(--prose); }
:root[data-look] .btn--primary { color: var(--on-accent); }
:root[data-look] .card { box-shadow: var(--card-shadow); }

/* Chrome: the app bar and the Contents take the look's chrome colour. */
:root[data-look] .appbar { background: var(--chrome-bg); color: var(--chrome-ink); border-bottom-color: var(--chrome-rule); }
:root[data-look] .appbar a, :root[data-look] .appbar .appbar__title, :root[data-look] .appbar .btn--ghost { color: var(--chrome-ink); }
:root[data-look] .appbar .appbar__sub { color: var(--chrome-soft); }
:root[data-look] .rail { background: var(--chrome-bg); color: var(--chrome-ink); border-right-color: var(--chrome-rule); }
:root[data-look] .rail .label, :root[data-look] .rail .rail__meta, :root[data-look] .rail .toc__count { color: var(--chrome-soft); }
:root[data-look] .rail a, :root[data-look] .rail button { color: var(--chrome-ink); }

/* Icons: one geometry (icons.js), three renderings. */
.qi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; overflow: visible; }
.qi--lg { width: 1.5em; height: 1.5em; }
.qi .qi-p { fill: none; stroke: currentColor; stroke-width: var(--i-stroke); stroke-linecap: var(--i-cap); stroke-linejoin: var(--i-join); }
.qi .qi-s { fill: currentColor; fill-opacity: var(--i-s-fill); stroke: currentColor; stroke-width: var(--i-s-stroke); stroke-linejoin: var(--i-join); }
:root[data-look="board"] .qi .qi-s { stroke-width: 0; }

/* People: one colour per member, always with their initial. */
:root[data-look] .who__disc[data-pc] { background: var(--pc); color: var(--on-pc); border-color: transparent; }
.who__disc[data-pc="1"] { --pc: var(--pc-1); } .who__disc[data-pc="2"] { --pc: var(--pc-2); }
.who__disc[data-pc="3"] { --pc: var(--pc-3); } .who__disc[data-pc="4"] { --pc: var(--pc-4); }
.who__disc[data-pc="5"] { --pc: var(--pc-5); } .who__disc[data-pc="6"] { --pc: var(--pc-6); }
/* Notice Board: a quiet ring; Illuminated: a thin pigment ring; Game Night: the token is the colour. */
:root[data-look="board"] .who__disc[data-pc] { background: var(--paper-raised); color: var(--pc); box-shadow: inset 0 0 0 2px var(--pc); }
:root[data-look="ink"] .who__disc[data-pc] { background: transparent; color: var(--pc); box-shadow: inset 0 0 0 1.5px var(--pc); font-family: var(--display); }
:root[data-look="dice"] .who__disc { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; }

/* Kinds: the wiki groups carry their colour on marked elements. */
[data-kind="people"] { --kind: var(--kind-people); } [data-kind="places"] { --kind: var(--kind-places); }
[data-kind="groups"] { --kind: var(--kind-groups); } [data-kind="things"] { --kind: var(--kind-things); }
[data-kind="events"] { --kind: var(--kind-events); } [data-kind="lore"] { --kind: var(--kind-lore); }
:root[data-look] .kind-mark[data-kind] { color: var(--kind); }
:root[data-look] .kind-head[data-kind] { border-top: 3px solid var(--kind); padding-top: var(--sp-3); }
:root[data-look="board"] .kind-head[data-kind] { border-top-width: 6px; }
:root[data-look="ink"] .kind-head[data-kind] { border-top: 1px solid var(--kind); box-shadow: inset 0 3px 0 -2px var(--kind); }

/* Chips: wax seals, tokens, rubrics. */
:root[data-look="board"] .chip { border-radius: 999px; border-width: 1.5px; font-weight: 600; }
:root[data-look="board"] .chip--live, :root[data-look="board"] .chip.qbw-chip--live { background: var(--live); color: #fff; border-color: var(--live); }
:root[data-look="board"][data-mode="dark"] .chip--live, :root[data-look="board"][data-mode="dark"] .chip.qbw-chip--live { color: #1a0d0d; }
:root[data-look="dice"] .chip { border-radius: 999px; border-width: 2px; font-weight: 600; }
:root[data-look="ink"] .chip { border-radius: var(--r-1); background: transparent; font-style: italic; }

/* Notice Board: campaign and session notices carry a brass pin. */
:root[data-look="board"] .card--lift { position: relative; }
:root[data-look="board"] .card--lift::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--gm); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset -2px -2px 0 rgba(0, 0, 0, .18);
}

/* Illuminated: articles and recaps open with an initial in the kind's pigment. */
:root[data-look="ink"] .initial > p:first-of-type::first-letter,
:root[data-look="ink"] .initial::first-letter {
  float: left; font-family: var(--initial-font); font-weight: 700; font-size: 3.1em; line-height: .82;
  padding: .08em .12em 0 0; color: var(--kind, var(--live));
}


/* ── Fixes after the first screenshots ─────────────────────────────────── */

/* Type roles: the display face is for headings and titles only. Board and Dice
   set --serif to their sans, so running text (intros, recaps, quotes, prose)
   stays readable; these selectors opt titles back into the display face. */
:root[data-look] :is(h1, h2, h3, .appbar__brand, .rail__title, .qbw-head__title, .qbw-info__title,
  .qbw-party__name, .qbw-arc__title, .qbw-health__n, .stat-row b, .hero__when, .spot__title, .pc__title) {
  font-family: var(--display);
}
:root[data-look="dice"] :is(h1, h2, h3, .appbar__brand, .rail__title, .qbw-head__title, .hero__when, .spot__title, .pc__title) {
  font-weight: 500; letter-spacing: -0.01em;
}
:root[data-look="board"] :is(h1, h2, h3, .rail__title, .qbw-head__title, .hero__when, .spot__title, .pc__title) { font-weight: 400; }

/* Sentence case: retire the tracked capitals. Rules-system stat blocks keep
   their conventional capitals (.qbw-sb__name, .qbw-sb__lvl, .qbw-trait). */
:root[data-look] :is(.frame__cap, .screen__num, .toc__tag, .qbw-gm__label, .qbw-gmtag, .qbw-rtag, .qbw-hc__eyebrow,
  .qbw-sb__src, .qbw-crumb__lvl, .qbw-map__gmnote, .qbw-mem__kind, .qbw-rep__now, .qbw-rep__lvl, .qbw-arc__ch,
  .qbw-quest__facts dt, .qbw-verb, .tag, .ev-kind) {
  text-transform: none; letter-spacing: 0;
}

/* Chrome: brand, breadcrumb and the current Contents entry. */
:root[data-look] .appbar .appbar__brand { color: var(--chrome-accent); }
:root[data-look] .appbar .appbar__brand span { color: var(--chrome-ink); }
:root[data-look] .appbar .crumb { color: var(--chrome-soft); }
:root[data-look] .appbar .crumb b { color: var(--chrome-ink); }
:root[data-look] .rail .toc button:hover, :root[data-look] .rail .toc a:hover { background: var(--chrome-rule); color: var(--chrome-ink); }
:root[data-look] .rail .toc [aria-current="page"] { background: var(--chrome-current); color: var(--chrome-current-ink); border-left-color: var(--chrome-accent); }
:root[data-look] .rail .toc--sub [aria-current="location"] { background: none; color: var(--chrome-ink); }
:root[data-look] .rail .toc--sub { border-left-color: var(--chrome-rule); }

/* Table mode is dark in every theme, so it takes each look's dark palette. */
:root[data-look="board"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #141c19; --rule: var(--table-rule); --rule-strong: #6a7a73;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #97a39d;
  --accent: #9db8ff; --accent-soft: #1d2a45; --accent-ink: #c7d6ff; --on-accent: #0f1b33;
  --warn: #e7bd62; --warn-soft: #33291a; --live: #ff8e8a; --live-soft: #3a1f21; --good: #7fd19f; --good-soft: #17301f;
  --gm: #e8b86a; --gm-soft: #2e2416; --gm-hatch: rgba(232, 184, 106, .14);
  --pc-1: #9db8ff; --pc-2: #ff8e8a; --pc-3: #7fd19f; --pc-4: #e8b86a; --pc-5: #c9a4f0; --pc-6: #6fd3dd; --on-pc: #10161a;
  --kind-people: #9db8ff; --kind-places: #7fd19f; --kind-groups: #ff8e8a; --kind-things: #e7bd62; --kind-events: #c9a4f0; --kind-lore: #b3c1ba;
}
:root[data-look="dice"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #0a261e; --rule: var(--table-rule); --rule-strong: #4f8a78;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #8fbcaa;
  --accent: #4fd1a5; --accent-soft: #0f3a2e; --accent-ink: #9ce8cc; --on-accent: #06231a;
  --warn: #f0c050; --warn-soft: #33290f; --live: #ff8a5b; --live-soft: #3a1d12; --good: #56d39a; --good-soft: #0f2c1e;
  --gm: #b894ff; --gm-soft: #241a3a; --gm-hatch: rgba(184, 148, 255, .14);
  --pc-1: #7aa2ff; --pc-2: #ff8a5b; --pc-3: #45d3a5; --pc-4: #b894ff; --pc-5: #f0c64a; --pc-6: #ff7eb3; --on-pc: #0c1210;
  --kind-people: #7aa2ff; --kind-places: #45d3a5; --kind-groups: #ff7eb3; --kind-things: #f0c64a; --kind-events: #b894ff; --kind-lore: #aad2c2;
}
:root[data-look="ink"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #110f18; --rule: var(--table-rule); --rule-strong: #6e6683;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #9890a8;
  --accent: #93b4ff; --accent-soft: #1c2440; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e9bd62; --warn-soft: #312615; --live: #ff8f84; --live-soft: #3a1c1f; --good: #6fd0a3; --good-soft: #13291f;
  --gm: #e6c36e; --gm-soft: #2d2517; --gm-hatch: rgba(230, 195, 110, .14);
  --pc-1: #93b4ff; --pc-2: #ff8f84; --pc-3: #6fd0a3; --pc-4: #e9bd62; --pc-5: #de8fd3; --pc-6: #6cc9e3; --on-pc: #14121b;
  --kind-people: #93b4ff; --kind-places: #6fd0a3; --kind-groups: #ff8f84; --kind-things: #e9bd62; --kind-events: #de8fd3; --kind-lore: #bdb5cd;
}

/* Notice Board's bold element: campaign notices on Home are pinned. */
:root[data-look="board"] .card.camp { position: relative; }
:root[data-look="board"] .card.camp::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--gm); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset -2px -2px 0 rgba(0, 0, 0, .2);
}

/* Phone app bar: brand, page title, bell and Contents must share 390px. */
@container app (max-width: 520px) {
  :root[data-look] .appbar .appbar__brand { font-size: var(--step-0); }
  :root[data-look] .appbar .appbar__title, :root[data-look] .appbar .appbar__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-look="dice"] .appbar .appbar__brand { font-size: .8125rem; letter-spacing: 0; }
  :root[data-look="dice"] .hero__when { font-size: var(--step-2); }
}

/* ════════════════════════════════════════════════════════════════════════
   HYBRIDS (owner, 2026-09-15): Illuminated's blues and its opening initial,
   with Game Night's type. They differ in how much chrome and colour they
   carry. The initial keeps a serif face (--initial-font) so the manuscript
   touch survives in a sans design.
   ════════════════════════════════════════════════════════════════════════ */

/* Shared by all three: type, and the blue-weighted pigments. */
:root[data-look="lapisbook"], :root[data-look="lapistable"], :root[data-look="lapisbright"] {
  --display: "Unbounded", system-ui, sans-serif; --serif: var(--sans);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --prose: var(--sans);
  --initial-font: "Alegreya", Georgia, serif;
}

/* ── Lapis Book: Illuminated's quiet page, set in Game Night's type ────── */
:root[data-look="lapisbook"] {
  --paper: #f3f5f9; --paper-raised: #ffffff; --paper-sunk: #e8ecf3;
  --rule: #d5dbe6; --rule-strong: #868fa1;
  --ink: #171b26; --ink-soft: #434a5c; --ink-faint: #5a6277;
  --accent: #1d4ea6; --accent-soft: #e4ebf9; --accent-ink: #163d84; --on-accent: #ffffff;
  --warn: #7f5500; --warn-soft: #f8eed9;
  --live: #b3261e; --live-soft: #fbe7e4;
  --good: #106b4f; --good-soft: #e0f1ea;
  --gm: #5f46ad; --gm-soft: #ebe7fa; --gm-hatch: rgba(95, 70, 173, .12);
  --chrome-bg: #ffffff; --chrome-ink: #171b26; --chrome-soft: #434a5c; --chrome-rule: #d5dbe6;
  --chrome-current: #e4ebf9; --chrome-current-ink: #163d84; --chrome-accent: #1d4ea6;
  --table-bg: #141a2b; --table-raised: #1d2437; --table-rule: #333c55; --table-ink: #eceff8; --table-soft: #b4bdd2;
  --pc-1: #1f57c4; --pc-2: #0d6d6f; --pc-3: #5138b8; --pc-4: #9c2f78; --pc-5: #7a5310; --pc-6: #10657f; --on-pc: #ffffff;
  --kind-people: #1d4ea6; --kind-places: #106b63; --kind-groups: #8c2f6f;
  --kind-things: #7f5500; --kind-events: #4b3fb0; --kind-lore: #3c4a63;
  --r-1: 3px; --r-2: 5px; --r-3: 8px; --r-4: 12px;
  --shadow: none; --card-shadow: none;
  --i-stroke: 1.5; --i-cap: round; --i-join: round; --i-s-fill: .16; --i-s-stroke: 1;
}
:root[data-look="lapisbook"][data-mode="dark"] {
  --paper: #11141c; --paper-raised: #181d27; --paper-sunk: #0c0f15;
  --rule: #262d3a; --rule-strong: #6b7589;
  --ink: #e9ecf4; --ink-soft: #b6bdcc; --ink-faint: #939cae;
  --accent: #93b4ff; --accent-soft: #1a2540; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e3b35c; --warn-soft: #2f2615;
  --live: #ff8f84; --live-soft: #3a1c1f;
  --good: #5ec8a6; --good-soft: #10291f;
  --gm: #b3a4ff; --gm-soft: #211c3a; --gm-hatch: rgba(179, 164, 255, .14);
  --chrome-bg: #181d27; --chrome-ink: #e9ecf4; --chrome-soft: #b6bdcc; --chrome-rule: #262d3a;
  --chrome-current: #1a2540; --chrome-current-ink: #c3d4ff; --chrome-accent: #93b4ff;
  --pc-1: #8fb2ff; --pc-2: #4fd0cf; --pc-3: #b0a2ff; --pc-4: #ff92d0; --pc-5: #e6b662; --pc-6: #6fc9e8; --on-pc: #0f1219;
  --kind-people: #8fb2ff; --kind-places: #5ecfc4; --kind-groups: #e08fd0;
  --kind-things: #e3b35c; --kind-events: #a6a4ff; --kind-lore: #aab6cc;
}

/* ── Lapis Table: Game Night's shape and tokens, in blue ──────────────── */
:root[data-look="lapistable"] {
  --paper: #eef1f7; --paper-raised: #ffffff; --paper-sunk: #e3e8f1;
  --rule: #d3d9e5; --rule-strong: #848da0;
  --ink: #161a24; --ink-soft: #414859; --ink-faint: #596175;
  --accent: #1d4ea6; --accent-soft: #e2eafa; --accent-ink: #163d84; --on-accent: #ffffff;
  --warn: #7c5400; --warn-soft: #f8eed9;
  --live: #b3261e; --live-soft: #fbe7e4;
  --good: #0f6a4e; --good-soft: #def0e9;
  --gm: #5f46ad; --gm-soft: #eae6fa; --gm-hatch: rgba(95, 70, 173, .12);
  --chrome-bg: #1b2a4a; --chrome-ink: #eaf0fb; --chrome-soft: #b9c8e4; --chrome-rule: #2c4066;
  --chrome-current: #27406e; --chrome-current-ink: #ffffff; --chrome-accent: #8fb2ff;
  --table-bg: #10182c; --table-raised: #18223a; --table-rule: #2c3a58; --table-ink: #eaeff9; --table-soft: #b2bdd4;
  --pc-1: #1f57c4; --pc-2: #0d6d6f; --pc-3: #5138b8; --pc-4: #9c2f78; --pc-5: #7a5310; --pc-6: #10657f; --on-pc: #ffffff;
  --kind-people: #1d4ea6; --kind-places: #106b63; --kind-groups: #8c2f6f;
  --kind-things: #7f5500; --kind-events: #4b3fb0; --kind-lore: #3c4a63;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
  --shadow: 0 2px 0 var(--rule); --card-shadow: none;
  --i-stroke: 2; --i-cap: round; --i-join: round; --i-s-fill: .25; --i-s-stroke: 0;
}
:root[data-look="lapistable"][data-mode="dark"] {
  --paper: #0f131c; --paper-raised: #161c28; --paper-sunk: #0a0d14;
  --rule: #252d3c; --rule-strong: #69738a;
  --ink: #e8ecf5; --ink-soft: #b4bccd; --ink-faint: #919bb0;
  --accent: #93b4ff; --accent-soft: #19243f; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e3b35c; --warn-soft: #2f2615;
  --live: #ff8f84; --live-soft: #3a1c1f;
  --good: #5ec8a6; --good-soft: #10291f;
  --gm: #b3a4ff; --gm-soft: #211c3a; --gm-hatch: rgba(179, 164, 255, .14);
  --chrome-bg: #131c30; --chrome-ink: #e8eff9; --chrome-soft: #b0bfd8; --chrome-rule: #223052;
  --chrome-current: #1e2f52; --chrome-current-ink: #ffffff; --chrome-accent: #8fb2ff;
  --pc-1: #8fb2ff; --pc-2: #4fd0cf; --pc-3: #b0a2ff; --pc-4: #ff92d0; --pc-5: #e6b662; --pc-6: #6fc9e8; --on-pc: #0f1219;
  --kind-people: #8fb2ff; --kind-places: #5ecfc4; --kind-groups: #e08fd0;
  --kind-things: #e3b35c; --kind-events: #a6a4ff; --kind-lore: #aab6cc;
}

/* ── Lapis Bright: the most colour; kinds colour their cards and chips ── */
:root[data-look="lapisbright"] {
  --paper: #eef2f8; --paper-raised: #ffffff; --paper-sunk: #e2e9f3;
  --rule: #d2dae7; --rule-strong: #828ca1;
  --ink: #151a25; --ink-soft: #3f475a; --ink-faint: #576076;
  --accent: #2a5fd0; --accent-soft: #e4ecfc; --accent-ink: #1b428f; --on-accent: #ffffff;
  --warn: #8a5c00; --warn-soft: #f9efd8;
  --live: #be2a1d; --live-soft: #fce8e5;
  --good: #0d7355; --good-soft: #ddf2ea;
  --gm: #6a4fd0; --gm-soft: #ece7fd; --gm-hatch: rgba(106, 79, 208, .13);
  --chrome-bg: #1d2c56; --chrome-ink: #ecf1fd; --chrome-soft: #bccbe9; --chrome-rule: #30436f;
  --chrome-current: #2c4377; --chrome-current-ink: #ffffff; --chrome-accent: #9dbaff;
  --table-bg: #101833; --table-raised: #192444; --table-rule: #2e3c62; --table-ink: #ebf0fc; --table-soft: #b4c0d9;
  --pc-1: #2a5fd0; --pc-2: #0d6d6f; --pc-3: #5b46d6; --pc-4: #b3247f; --pc-5: #8a5c00; --pc-6: #0d6a8a; --on-pc: #ffffff;
  --kind-people: #2a5fd0; --kind-places: #0f7266; --kind-groups: #a8267a;
  --kind-things: #8a5c00; --kind-events: #5b46d6; --kind-lore: #3d4a66;
  --r-1: 8px; --r-2: 14px; --r-3: 18px; --r-4: 24px;
  --shadow: 0 2px 0 var(--rule); --card-shadow: none;
  --i-stroke: 2.1; --i-cap: round; --i-join: round; --i-s-fill: .32; --i-s-stroke: 0;
}
:root[data-look="lapisbright"][data-mode="dark"] {
  --paper: #0e1320; --paper-raised: #151c2c; --paper-sunk: #090d16;
  --rule: #242d40; --rule-strong: #68738c;
  --ink: #e9edf7; --ink-soft: #b3bccf; --ink-faint: #909ab2;
  --accent: #9dbaff; --accent-soft: #1a2545; --accent-ink: #c8d8ff; --on-accent: #0d1530;
  --warn: #e8b85f; --warn-soft: #302617;
  --live: #ff9084; --live-soft: #3b1d20;
  --good: #58cfa6; --good-soft: #0f2b21;
  --gm: #b9a6ff; --gm-soft: #221c3d; --gm-hatch: rgba(185, 166, 255, .15);
  --chrome-bg: #141d3a; --chrome-ink: #ecf1fd; --chrome-soft: #b6c5e6; --chrome-rule: #25335c;
  --chrome-current: #21325e; --chrome-current-ink: #ffffff; --chrome-accent: #9dbaff;
  --pc-1: #9dbaff; --pc-2: #4fd0cf; --pc-3: #b6a4ff; --pc-4: #ff95d2; --pc-5: #e8bb66; --pc-6: #6ccdea; --on-pc: #0d1018;
  --kind-people: #9dbaff; --kind-places: #5ed3c6; --kind-groups: #e895d4;
  --kind-things: #e8b85f; --kind-events: #b6a4ff; --kind-lore: #aab5cb;
}

/* Table mode keeps each hybrid's dark palette whatever the page theme. */
:root[data-look="lapisbook"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #0c1120; --rule: var(--table-rule); --rule-strong: #6b7793;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #97a2bb;
  --accent: #93b4ff; --accent-soft: #1a2540; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e3b35c; --warn-soft: #2f2615; --live: #ff8f84; --live-soft: #3a1c1f; --good: #5ec8a6; --good-soft: #10291f;
  --gm: #b3a4ff; --gm-soft: #211c3a; --gm-hatch: rgba(179, 164, 255, .14);
  --pc-1: #8fb2ff; --pc-2: #4fd0cf; --pc-3: #b0a2ff; --pc-4: #ff92d0; --pc-5: #e6b662; --pc-6: #6fc9e8; --on-pc: #0f1219;
  --kind-people: #8fb2ff; --kind-places: #5ecfc4; --kind-groups: #e08fd0; --kind-things: #e3b35c; --kind-events: #a6a4ff; --kind-lore: #aab6cc;
}
:root[data-look="lapistable"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #0c1120; --rule: var(--table-rule); --rule-strong: #6b7793;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #97a2bb;
  --accent: #93b4ff; --accent-soft: #1a2540; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e3b35c; --warn-soft: #2f2615; --live: #ff8f84; --live-soft: #3a1c1f; --good: #5ec8a6; --good-soft: #10291f;
  --gm: #b3a4ff; --gm-soft: #211c3a; --gm-hatch: rgba(179, 164, 255, .14);
  --pc-1: #8fb2ff; --pc-2: #4fd0cf; --pc-3: #b0a2ff; --pc-4: #ff92d0; --pc-5: #e6b662; --pc-6: #6fc9e8; --on-pc: #0f1219;
  --kind-people: #8fb2ff; --kind-places: #5ecfc4; --kind-groups: #e08fd0; --kind-things: #e3b35c; --kind-events: #a6a4ff; --kind-lore: #aab6cc;
}
:root[data-look="lapisbright"] .tablemode {
  --paper: var(--table-bg); --paper-raised: var(--table-raised); --paper-sunk: #0c1120; --rule: var(--table-rule); --rule-strong: #6b7793;
  --ink: var(--table-ink); --ink-soft: var(--table-soft); --ink-faint: #97a2bb;
  --accent: #93b4ff; --accent-soft: #1a2540; --accent-ink: #c3d4ff; --on-accent: #0e1630;
  --warn: #e3b35c; --warn-soft: #2f2615; --live: #ff8f84; --live-soft: #3a1c1f; --good: #5ec8a6; --good-soft: #10291f;
  --gm: #b3a4ff; --gm-soft: #211c3a; --gm-hatch: rgba(179, 164, 255, .14);
  --pc-1: #8fb2ff; --pc-2: #4fd0cf; --pc-3: #b0a2ff; --pc-4: #ff92d0; --pc-5: #e6b662; --pc-6: #6fc9e8; --on-pc: #0f1219;
  --kind-people: #8fb2ff; --kind-places: #5ecfc4; --kind-groups: #e08fd0; --kind-things: #e3b35c; --kind-events: #a6a4ff; --kind-lore: #aab6cc;
}

/* People: Lapis Book keeps a filled disc; the two table looks use dice tokens. */
:root[data-look="lapistable"] .who__disc, :root[data-look="lapisbright"] .who__disc {
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0;
}

/* Lapis Bright: kinds colour the article head and its chips, and the opening
   initial sits in a tinted block. */
:root[data-look="lapisbright"] .kind-head[data-kind] { border-top-width: 5px; }
:root[data-look="lapisbright"] .chip { border-radius: 999px; border-width: 2px; font-weight: 600; }
:root[data-look="lapisbright"] .initial > p:first-of-type::first-letter,
:root[data-look="lapisbright"] .initial::first-letter {
  background: color-mix(in srgb, var(--kind, var(--accent)) 14%, transparent);
  padding: .1em .14em .02em; margin-right: .08em; border-radius: var(--r-1);
}

/* All three hybrids open a recap or article with an initial, as Illuminated does. */
:root[data-look="lapisbook"] .initial > p:first-of-type::first-letter,
:root[data-look="lapisbook"] .initial::first-letter,
:root[data-look="lapistable"] .initial > p:first-of-type::first-letter,
:root[data-look="lapistable"] .initial::first-letter,
:root[data-look="lapisbright"] .initial > p:first-of-type::first-letter,
:root[data-look="lapisbright"] .initial::first-letter {
  float: left; font-family: var(--initial-font); font-weight: 700; font-size: 3.1em; line-height: .82;
  padding: .08em .12em 0 0; color: var(--kind, var(--accent));
}