/* The 16 Google Fonts families this file names in --font-heading/--font-body are loaded by a in partials/head-assets.php, not by an @import here. An @import cannot start downloading until this file has arrived and been parsed, which put two serial round trips in front of the first painted glyph — worst on the venue wifi this app is used on (UI/UX finding 18). Adding a family to a theme below means adding it to that too; verify_head_assets.php fails if the two drift apart. */ *, *::before, *::after { box-sizing: border-box; } :root { --black: #000; --white: #fff; --gray: #888; --red: #f15bb5; --orange: #ff8000; --yellow: #fbf540; --yellow-green: #9f0; --green: #0f0; --green-cyan: #09bbf9; --blue-green: #0ff; --blue: #09bbf9; /* Raised from #2e3192 in the UI/UX pass. Tavern had already overridden this for itself (see its block) because #2e3192 is too dark to carry Center Stage; measured across all eleven themes, so is every other theme — --button-text on a Center Stage fill failed on 8 of 10, including Dark at 3.21:1, and --mod-center as text on a dark card ran 2.02–2.56:1. The variable feeds --mod-center and nothing else, in any theme, so this is the whole fix. */ --blue-violet: #4b4fc0; --violet: #9b5de5; --magenta: #f09; --pink: #f6c; } :root, :root option { color-scheme: dark; --bg: #07111f; --bg-2: #18223b; --text: #f4f7fb; --muted: rgb(212, 212, 212); --accent: #2dffff; --accent-solid: #5460cf; --panel-bg: rgba(255, 255, 255, 0.05); --panel-border: rgba(255, 255, 255, 0.1); --card-bg: rgba(255, 255, 255, 0.02); --border-soft: rgba(255, 255, 255, 0.08); --field-bg: rgba(255, 255, 255, 0.04); --field-border: rgba(255, 255, 255, 0.16); --field-focus: rgba(123, 140, 255, 0.35); --bg: #07111f; --bg-2: #18223b; --text: #f4f7fb; --muted: #9fb0cb; --accent: #7b8cff; --accent-solid: #5460cf; --panel-bg: rgba(255, 255, 255, 0.05); --panel-border: rgba(255, 255, 255, 0.1); --card-bg: rgba(255, 255, 255, 0.02); --border-soft: rgba(255, 255, 255, 0.08); --field-bg: rgba(255, 255, 255, 0.04); --field-border: rgba(255, 255, 255, 0.16); --field-focus: rgba(123, 140, 255, 0.35); --button-text: #211f2e; /* Three colours that used to be hardcoded in the rules that used them, and so assumed a dark background. Measured across all eleven themes, all three were unreadable on the six light ones — .error reached 1.02:1 on Golden Hour Sunset and the Center Stage turn marker 1.02:1 on Parchment. Base values here are the dark-theme ones (unchanged in appearance); every light theme overrides all three. --danger is deliberately NOT --red. --red is the Cast module's identity hue and is #f15bb5, a hot pink: a destructive button was rendering in the same pink as a Cast chip, which is the wrong signal twice over. Splitting them lets Cast stay pink and danger be red. */ --error-text: #ff9a9a; --combat-active: #e8b339; --danger: #ff8a8a; /* Text drawn on an --accent or --danger fill, as opposed to --button-text which is text on a MODULE fill. On ten of the eleven themes these are the same colour and this just forwards. They part company on Light, where module fills are bright (so they need dark lettering) but the accent and danger fills are deep (so they need light lettering) — one "text on a fill" token cannot answer both. */ --on-accent: var(--button-text); /* Ink for a button, matched to whichever fill that button actually got. A .button inside a .mod-* section is filled with --mod and takes --button-text; a .button with no module in scope is filled with --accent and takes --on-accent. The .mod-* rule below flips this to --button-text, so the default here is the mod-LESS case. This exists because `background: var(--mod, var(--text))` used to pair a --text fill with --button-text ink, which is neither of the two cases the token above describes — and on Light and Auto-light that is #1a1a1a on #303030, **1.32:1**. It reached the landing hero, the login card's submit, signup, forgot-password, join, and help.php's logged-out CTA: every button a logged-out visitor can see, illegible on the default light theme. Nothing noticed for the life of the app because the contrast harness only ever composited --button-text against a MODULE fill — the fallback branch had never been in the inventory. Same shape as findings 23 and 24, and the reason theme-contrast.py now carries the pair explicitly. */ --button-ink: var(--on-accent); /* How far --mod-ink is pulled toward --text; see the .mod-* rule below. 0% means the ink IS the module colour, which is correct wherever the module colour is already legible as text on a card — that is every theme except Light, whose fills are deliberately too bright to write with. */ --mod-ink-mix: 0%; --font-heading: "Manrope", system-ui, sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --border-width: 1px; --border-style: solid; --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-button: none; --shadow-popover: 0 0.8rem 2rem -0.5rem rgba(0, 0, 0, 0.5); --icon-stroke-width: 2; /* THE DARK-THEME MODULE SET — inherited by Dungeon Stone and Brass & Gaslight, overridden by Tavern (chalk) and Neon Circuit (magenta). Mixed toward --text, exactly like the light-theme rule further down, and for the same reason in mirror. These used to mix toward --muted, which is MID-TONE on every theme — so the darker hues (--blue-violet feeding Center Stage, --violet feeding Backstage) never got light enough to read on a dark card or to sit under a dark --button-text. Center Stage failed on 8 of 10 themes and Backstage on 8. One principle for the whole app: a module colour is mixed toward the far end of its theme. Light themes mix toward a dark --text at 75%; dark themes mix toward a light --text at 60%. Tavern was already doing this by hand with --chalk before it was a rule, which is most of why it was the only healthy theme in the audit. 60% is the minimum that clears 4.5:1 in both directions on all four themes that use it; Dungeon Stone is the binding one at 4.85:1 as text on its card. Below 60% it fails; above, the hues start converging on --text. */ --mod-campaigns: color-mix(in srgb, var(--gray), var(--text) 60%); --mod-players: color-mix(in srgb, var(--white), var(--text) 60%); --mod-cast: color-mix(in srgb, var(--red), var(--text) 60%); --mod-locations: color-mix(in srgb, var(--orange), var(--text) 60%); --mod-props: color-mix(in srgb, var(--yellow), var(--text) 60%); --mod-groups: color-mix(in srgb, var(--green), var(--text) 60%); --mod-callback: color-mix(in srgb, var(--blue), var(--text) 60%); --mod-center: color-mix(in srgb, var(--blue-violet), var(--text) 60%); --mod-backstage: color-mix(in srgb, var(--violet), var(--text) 60%); --mod-tags: color-mix(in srgb, var(--blue-green), var(--text) 60%); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } :root:not([data-theme]), :root:not([data-theme]) option { --bg: #f7f5f2; --bg-2: #eef1f8; --text: #303030; --muted: #635f74; /* #5460cf was 5.03:1 as a link on this theme's panel but only 2.45:1 on the explicit Light theme, whose panel carries a module tint. One value for both, measured against the tinted one. */ --accent: #3f49b0; --accent-solid: #3f49b0; --panel-bg: rgba(255, 255, 255, 0.55); --panel-border: rgba(20, 20, 35, 0.1); --card-bg: rgba(255, 255, 255, 0.5); --border-soft: rgba(20, 20, 35, 0.08); --field-bg: rgba(231, 231, 231, 0.788); --field-border: rgba(20, 20, 35, 0.18); --field-focus: rgba(84, 96, 207, 0.25); --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --font-heading: "Manrope", system-ui, sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --border-width: 1px; --border-style: solid; --shadow-panel: 0 1px 3px rgba(20, 20, 35, 0.1); --shadow-card: 0 1px 2px rgba(20, 20, 35, 0.08); --shadow-button: none; --shadow-popover: 0 0.8rem 2rem -0.5rem rgba(0, 0, 0, 0.25); --icon-stroke-width: 2; /* Same bright set as the explicit Light theme — see the shared rule below. Restated here because a rule inside this media query cannot be merged with one outside it, and kept identical on purpose: Auto and Light are the same palette, and a chip must not change colour when someone switches between them on a light-mode device. */ --button-text: #1a1a1a; --on-accent: #f7f9ff; --mod-ink-mix: 75%; --mod-campaigns: color-mix(in srgb, var(--gray), var(--white) 25%); --mod-players: #c9c7d6; --mod-cast: color-mix(in srgb, var(--red), var(--white) 25%); --mod-locations: color-mix(in srgb, var(--orange), var(--white) 25%); --mod-props: color-mix(in srgb, var(--yellow), var(--white) 25%); --mod-groups: color-mix(in srgb, var(--green), var(--white) 25%); --mod-callback: color-mix(in srgb, var(--blue), var(--white) 25%); --mod-center: color-mix(in srgb, var(--blue-violet), var(--white) 40%); --mod-backstage: color-mix(in srgb, var(--violet), var(--white) 25%); --mod-tags: color-mix(in srgb, var(--blue-green), var(--white) 25%); } } :root[data-theme="light"], :root[data-theme="light"] option { color-scheme: light; --bg: #f7f5f2; --bg-2: #eef1f8; --text: #303030; --muted: #635f74; --accent: #3f49b0; --accent-solid: #3f49b0; --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --panel-bg: rgba(255, 255, 255, 0.55); --panel-border: rgba(20, 20, 35, 0.1); --card-bg: rgba(255, 255, 255, 0.5); /* §12: "the light gray chosen for Party notes is too close to the white text." Measured, the problem is not a gray anywhere in the party-notes block — it sets none — it is that on this theme a .section-card is white over a white panel over a near-white page: 1.02:1 card-to-panel, with a border at 1.18:1 against the card it outlines. The block had no edge, so it stopped reading as a block. The border is the fix rather than the card surface, because darkening the card would move every text contrast measured on it. 0.24 puts the edge at 1.69:1 — visible as a hairline, still quiet. Every other theme has real card separation and is left alone. */ --border-soft: rgba(20, 20, 35, 0.24); --field-bg: rgba(231, 231, 231, 0.788); --field-border: rgba(20, 20, 35, 0.18); --field-focus: rgba(84, 96, 207, 0.25); /* Dark, because this theme's module fills are bright — see the Light module rule below. Every other light theme fills dark and keeps a light one. */ --button-text: #1a1a1a; --on-accent: #f7f9ff; --mod-ink-mix: 75%; } /* Five colorful, textured themes — alternatives to dark/light, not replacements. These used to share one module-color set "nudged to clear 4.5:1 against the tightest of the five card surfaces (Tavern's)". That claim expired twice over: Tavern has since moved to its own chalk recipe and left the set, and tuning colors for four LIGHT themes against a DARK theme's card is backwards regardless — a color light enough to read on Tavern's slate is exactly the color that disappears on Parchment's paper. Measured on their own surfaces, Parchment failed 56 of 64 checks and Meadow 42. Tavern is now grouped here only for `color-scheme`. The four genuinely light ones take the shared light-theme module rule further down, with Light and Auto-light. */ :root[data-theme="parchment"], :root[data-theme="meadow"], :root[data-theme="tavern"], :root[data-theme="grove"], :root[data-theme="cartographer"] { color-scheme: light; } :root[data-theme="parchment"], :root[data-theme="parchment"] option { --red: rgb(182, 24, 0); --bg: #f6ecd6; --bg-2: #dcb877; --text: #3d2b20; --muted: #7a6552; --accent: #8a2733; --accent-solid: #6d1d27; /* Was #dbccaf, which is only a little lighter than the tan surfaces it sits on. Now that fills are dark (see the shared module rule below) the button text is doing real work and needs to be a true light. */ --button-text: #fbf4e4; --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --panel-bg: rgba(251, 245, 230, 0.92); --panel-border: rgba(61, 43, 32, 0.16); /* Lifted off the tan wash it used to share with --field-bg. A card at rgba(199,174,158,0.25) over this theme's panel is mid-tan, and a module colour written on it topped out at 3.61:1 no matter how dark the module went — the card was the limit, not the ink. */ --card-bg: rgba(255, 250, 238, 0.55); --border-soft: rgba(61, 43, 32, 0.12); --field-bg: rgba(199, 174, 158, 0.25); --field-border: rgba(61, 43, 32, 0.2); --field-focus: rgba(156, 61, 71, 0.22); --font-heading: "Cormorant Garamond", serif; --font-body: "EB Garamond", serif; --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 10px rgba(61, 43, 32, 0.25); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 4px rgba(61, 43, 32, 0.18); --shadow-button: 0 2px 0 rgba(61, 43, 32, 0.3); --shadow-popover: 0 1rem 2rem -0.5rem rgba(61, 43, 32, 0.4); --icon-stroke-width: 1.5; --border-radius: 3px; --corner-shape: scoop; } :root[data-theme="meadow"], :root[data-theme="meadow"] option { --red: rgb(202, 0, 51); --yellow: rgb(241, 189, 140); --bg: #f3d9c4; --bg-2: #8f7aa3; --text: #1b151d; /* Was #9771a8 — OKLCH lightness 0.606, where every other light theme's muted sits at 0.50–0.55. It was a decorative sunset purple being used as a text colour, and it put --text-muted at 3.62:1 and raw --muted at 1.05:1. Same hue and chroma, dropped to L 0.52. */ --muted: #7d588d; --button-text: #fff1e6; --accent: #5a3a5f; --accent-solid: #402a44; --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --panel-bg: rgba(250, 243, 240, 0.85); --panel-border: rgba(74, 51, 80, 0.14); --card-bg: rgba(255, 255, 255, 0.5); --border-soft: rgba(74, 51, 80, 0.1); --field-bg: rgba(255, 215, 188, 0.5); --field-border: rgba(74, 51, 80, 0.2); --field-focus: rgba(107, 76, 111, 0.22); --font-heading: "Playfair Display", serif; --font-body: "Poppins", sans-serif; --border-radius: 1.4rem; --corner-shape: round; --border-width: 1px; --border-style: solid; --shadow-panel: 0 0 24px rgba(200, 150, 180, 0.35); --shadow-card: 0 0 12px rgba(200, 150, 180, 0.28); --shadow-button: 0 0 14px rgba(107, 76, 111, 0.4); --shadow-popover: 0 0 30px rgba(200, 150, 180, 0.4); --icon-stroke-width: 1.75; } /* Tavern Common Room — a wood wall hung with blackboards, written in chalk. Reworked Batch 3 Day 6 against Vi's "it doesn't look like a tavern." Three things here were measured, not eyeballed, and undoing any of them brings back the thing that was wrong: 1. The module colours mix toward --chalk, NOT toward --muted. Tavern is the only one of the five "light textured" themes with DARK surfaces, and it was still using their recipe — each identity hue mixed 75% into a pale sage --muted. That put five of the ten under 0.04 chroma: Campaigns, Players, Center Stage, Cast and Backstage all came out the same washed sage. Chalk sticks come in colours; those didn't read as any of them. Mixing 50% toward a chalk white keeps the hue and still clears the bar. 2. --muted stays DIM (#a9a396) and is NOT the chalk. `.muted` and `label` mix --muted only 40% with --text, so a chalk-bright --muted would put muted text 0.02 apart in lightness from body text — invisible as a distinction. At #a9a396 it is 0.08 apart and still reads 7.8:1. 3. --blue-violet used to be overridden for tavern alone: #2e3192 was dark enough that 50% chalk left Center Stage as the one module with no headroom, and #4b4fc0 raised both its contrast and its chroma. The UI/UX pass found every other theme had the same problem and promoted #4b4fc0 to the base :root, so tavern no longer needs its own copy — but tavern is still the theme with the least headroom here, so it is the one to re-measure first if that base value is ever moved again. Per PLAN §10's 4.5:1 bar, measured against the flattened card surface (#131917), the tightest module is now Center Stage at 6.36:1 — up from 5.64:1 before — and the eight chromatic modules went from 0.027-0.127 chroma to 0.070-0.209. Contrast went UP while saturation went up too; the old recipe was spending contrast it didn't need. Keep the slate DARK if you retune: lightening the card is what costs Center Stage its headroom, and it is the module that runs out first. */ :root[data-theme="tavern"], :root[data-theme="tavern"] option { --chalk: #e2ddcc; --bg: #5c3f2a; --bg-2: #38251a; --text: #e8e4d8; --button-text: #1f2b22; --muted: #a9a396; --accent: #e0c468; --accent-solid: #b89a3f; --panel-bg: rgba(26, 33, 31, 0.96); --panel-border: rgba(226, 221, 204, 0.3); --card-bg: rgba(18, 24, 22, 0.92); --border-soft: rgba(226, 221, 204, 0.2); --field-bg: rgba(10, 14, 12, 0.55); --field-border: rgba(226, 221, 204, 0.32); --field-focus: rgba(224, 196, 104, 0.35); --font-heading: "Kalam", cursive; /* Handwriting for headings and labels, the regular face for values and paragraphs — which is what a real pub blackboard looks like, and it also removes 0.9rem cursive body copy on a phone. See the tavern font rules further down; inputs inherit `font: inherit`, so the label rule needs a matching rule putting the controls back. */ --font-body: "Public Sans", system-ui, sans-serif; --border-width: 2px; --border-style: solid; --shadow-panel: 0 6px 14px rgba(0, 0, 0, 0.5); --shadow-card: 0 3px 8px rgba(0, 0, 0, 0.4); --shadow-button: 0 3px 0 rgba(0, 0, 0, 0.4); --shadow-popover: 0 1rem 2rem -0.4rem rgba(0, 0, 0, 0.6); --icon-stroke-width: 2.5; --border-radius: 3px; --corner-shape: notch; --mod-campaigns: color-mix(in srgb, var(--gray), var(--chalk) 50%); --mod-players: color-mix(in srgb, var(--white), var(--chalk) 50%); --mod-cast: color-mix(in srgb, var(--red), var(--chalk) 50%); --mod-locations: color-mix(in srgb, var(--orange), var(--chalk) 50%); --mod-props: color-mix(in srgb, var(--yellow), var(--chalk) 50%); --mod-groups: color-mix(in srgb, var(--green), var(--chalk) 50%); --mod-callback: color-mix(in srgb, var(--blue), var(--chalk) 50%); --mod-center: color-mix(in srgb, var(--blue-violet), var(--chalk) 50%); --mod-backstage: color-mix(in srgb, var(--violet), var(--chalk) 50%); --mod-tags: color-mix(in srgb, var(--blue-green), var(--chalk) 50%); } :root[data-theme="grove"], :root[data-theme="grove"] option { --bg: #7f9e7a; --bg-2: #b2d6ca; /* Was #263329, which put the landing page's footer and attribution at 4.45:1 on the darkest stop of the body gradient — the last failure left in theme-contrast.py, carried unowned out of batch 6. The harness's own note said no ink could fix it and that the surface had to move; that was wrong, and worth correcting rather than quietly deleting, because it is the reason nobody tried. Black on this gradient measures 7.07:1, so there was plenty of room — this is four steps darker along the same hue and lands at 4.82:1. Darkening ink on a light theme cannot cost contrast anywhere else: every other Grove surface (--panel-bg, --card-bg, --field-bg) is lighter than the body, and the one place --text is a *fill* rather than ink is a .button, whose --button-text is #f7f9f1 and only gains. All 867 pairs re-run. */ --text: #222d24; --muted: #5f6f5c; --accent: #9c4a30; --accent-solid: #7d3a26; /* Grove and Cartographer never set --button-text, so they inherited the base dark theme's #211f2e — dark text, on a light theme, over what are now dark module fills. Both need a real light. */ --button-text: #f7f9f1; --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --panel-bg: rgba(245, 247, 238, 0.85); --panel-border: rgba(38, 51, 41, 0.16); --card-bg: rgba(235, 240, 224, 0.55); --border-soft: rgba(38, 51, 41, 0.1); --field-bg: #ebf0e044; --field-border: rgba(38, 51, 41, 0.2); --field-focus: rgba(193, 96, 63, 0.22); --font-heading: "Cinzel", serif; --font-body: "Nunito", sans-serif; --border-radius: 1.6rem; --corner-shape: round; --border-width: 1px; --border-style: solid; --shadow-panel: 0 0 18px rgba(120, 180, 100, 0.3); --shadow-card: 0 0 10px rgba(120, 180, 100, 0.22); --shadow-button: 0 0 12px rgba(156, 74, 48, 0.35); --shadow-popover: 0 0 26px rgba(120, 180, 100, 0.35); --icon-stroke-width: 2; } :root[data-theme="cartographer"], :root[data-theme="cartographer"] option { --bg: #ecdfc2; --bg-2: #e3d1a8; --text: #3a3226; --muted: #7a6f58; --accent: #6f5322; --accent-solid: #574019; --button-text: #fdf8ec; --error-text: #8a1f29; --combat-active: #714100; --danger: #96222a; --panel-bg: rgba(250, 244, 228, 0.88); --panel-border: rgba(58, 50, 38, 0.16); /* Lifted for the same reason as Parchment's — the old tan wash made the card mid-tone and capped module ink at 3.77:1. */ --card-bg: rgba(255, 252, 242, 0.5); --border-soft: rgba(58, 50, 38, 0.1); --field-bg: rgba(58, 50, 38, 0.05); --field-border: rgba(58, 50, 38, 0.2); --field-focus: rgba(138, 106, 47, 0.2); --font-heading: "Special Elite", monospace; --font-body: "EB Garamond", serif; --border-radius: 0.15rem; --corner-shape: bevel; --border-width: 1px; --border-style: dashed; --shadow-panel: none; --shadow-card: none; --shadow-button: none; --shadow-popover: 0 0.5rem 1.2rem -0.3rem rgba(58, 50, 38, 0.3); --icon-stroke-width: 1.5; } /* THE LIGHT-THEME MODULE SET. One rule for all five explicit light themes. `var()` inside a custom property resolves where it is USED, so each theme's own --text feeds this and each gets its own correctly-toned set from a single recipe. The principle, stated once because it is the thing the whole audit turned on: a module color is mixed toward the FAR END of its theme. On the dark themes the eight identity hues are mixed toward a light (Tavern mixes toward --chalk); on a light theme they must be mixed toward --text. The old light themes mixed toward --muted, which is mid-tone on every theme, so the hues stayed pale — simultaneously too pale to read as text on a pale card (down to 1.09:1) and too pale to sit under --button-text (down to 1.44:1). Both directions failed at once, which is why fixing one end never helped. 75% is the minimum that clears 4.5:1 in BOTH directions on all six light themes; measured, the binding pair is Light's "as text on card" at 5.06:1 and Parchment's at 4.88:1. Do not lower it. Raising it is safe for contrast but costs chroma — at 75% the eight hues hold 0.011–0.127 chroma and still read as distinct colors, which is the same trade the Tavern block documents. Grove and Cartographer previously defined NO --mod-* at all and silently inherited the base dark theme's recipe. They are in this list now. Light is NOT in this list — it fills bright and writes with --mod-ink instead. See the rule below it. */ :root[data-theme="parchment"], :root[data-theme="meadow"], :root[data-theme="grove"], :root[data-theme="cartographer"] { --mod-campaigns: color-mix(in srgb, var(--gray), var(--text) 75%); --mod-players: color-mix(in srgb, var(--white), var(--text) 75%); --mod-cast: color-mix(in srgb, var(--red), var(--text) 75%); --mod-locations: color-mix(in srgb, var(--orange), var(--text) 75%); --mod-props: color-mix(in srgb, var(--yellow), var(--text) 75%); --mod-groups: color-mix(in srgb, var(--green), var(--text) 75%); --mod-callback: color-mix(in srgb, var(--blue), var(--text) 75%); --mod-center: color-mix(in srgb, var(--blue-violet), var(--text) 75%); --mod-backstage: color-mix(in srgb, var(--violet), var(--text) 75%); --mod-tags: color-mix(in srgb, var(--blue-green), var(--text) 75%); } /* ========================================================================== COMBATANT PALETTE (playtest fixes batch 9) Six colours a GM assigns to combatants at Center Stage, drawn as a 3px strip on the top of a card. §12: "This would need to be a pre-set list to make it fast at center stage for ad-hoc… maybe a 3px border at the top would give them that direct visual organization?" **DO NOT HAND-EDIT THESE VALUES, and do not reorder the keys.** They are the output of `python docs/playtest/combatant-palette.py`, which solves them against three constraints that no amount of looking at them can check: 1. each colour ≥ 3:1 against the card it sits on (a 3px strip is a non-text mark, so 3:1 rather than 4.5:1); 2. each colour separable from every OTHER colour — a colour-vs-colour question WCAG contrast cannot answer at all, since it is a luminance ratio and scores pure red against pure green at 1.0:1; 3. still separable under deuteranopia and protanopia, which is ~1 in 12 men and therefore likely at any table of five. Run the script to regenerate after ANY change to a theme's --card-bg or --bg; it audits the shipped table and exits non-zero. `--proof` draws the whole thing as a simulated turn order. **Why these are literals and not color-mix() like --mod-* is.** A swatch's lightness is solved per theme AND per hue to hit a contrast target — a binary search, which CSS cannot express. Pinning one lightness for all six (which CSS could do) was tried and ceilinged at three usable colours, because lightness is the one channel a dichromat keeps. **Why not reuse --mod-*.** Those carry module meaning — --mod-cast is Cast, --mod-tags is Tags — and a combatant bordered in Tags-cyan says something the app does not mean. They also measure 0.0000 against each other under protanopia on Dark (--mod-players and --mod-tags are literally identical), which is fine for a chip that carries a text label and fatal where colour is the only signal. The key list is mirrored by combatantPalette() in api/combat_helpers.php, which decides what is *accepted*; these decide what *draws*. A key in one and not the other renders a strip of nothing, silently — the same two-list hazard as combatAttributeIconOptions()/lucideIcon(). tests/verify_combatant_colours.php fails on either direction. ========================================================================== */ :root { --combatant-green: #00932a; --combatant-indigo: #7a6cef; --combatant-chartreuse: #afcb00; --combatant-crimson: #ff6970; --combatant-cyan: #00cfff; --combatant-violet: #f1a3ff; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --combatant-green: #00a43c; --combatant-indigo: #887cff; --combatant-chartreuse: #4b5f00; --combatant-crimson: #d33948; --combatant-cyan: #005c8f; --combatant-violet: #7f30ab; } } :root[data-theme="light"] { --combatant-green: #00932a; --combatant-indigo: #796cef; --combatant-chartreuse: #3e5100; --combatant-crimson: #c2253a; --combatant-cyan: #004d80; --combatant-violet: #711f9b; } :root[data-theme="parchment"] { --combatant-green: #00942b; --combatant-indigo: #7b6df0; --combatant-chartreuse: #3f5200; --combatant-crimson: #c3273b; --combatant-cyan: #004e82; --combatant-violet: #72209d; } :root[data-theme="meadow"] { --combatant-green: #008f26; --combatant-indigo: #7769eb; --combatant-chartreuse: #3c4e00; --combatant-crimson: #be2137; --combatant-cyan: #004a7d; --combatant-violet: #6f1b98; } :root[data-theme="tavern"] { --combatant-green: #007a05; --combatant-indigo: #6554d5; --combatant-chartreuse: #93ae00; --combatant-crimson: #e44a56; --combatant-cyan: #00afe5; --combatant-violet: #cf81ff; } :root[data-theme="grove"] { --combatant-green: #00982f; --combatant-indigo: #7d70f4; --combatant-chartreuse: #425500; --combatant-crimson: #c62b3e; --combatant-cyan: #005185; --combatant-violet: #7524a0; } :root[data-theme="cartographer"] { --combatant-green: #00972f; --combatant-indigo: #7d70f3; --combatant-chartreuse: #425400; --combatant-crimson: #c62b3d; --combatant-cyan: #005184; --combatant-violet: #75249f; } :root[data-theme="dungeon"] { --combatant-green: #00a139; --combatant-indigo: #8579fd; --combatant-chartreuse: #bedc27; --combatant-crimson: #ff8388; --combatant-cyan: #00e4ff; --combatant-violet: #ffb7ff; } :root[data-theme="cyberpunk"] { --combatant-green: #007000; --combatant-indigo: #5d4aca; --combatant-chartreuse: #88a200; --combatant-crimson: #d93f4c; --combatant-cyan: #00a3d9; --combatant-violet: #c376f4; } :root[data-theme="steampunk"] { --combatant-green: #008f25; --combatant-indigo: #7668eb; --combatant-chartreuse: #aac700; --combatant-crimson: #fd616a; --combatant-cyan: #00c9ff; --combatant-violet: #eb9dff; } /* LIGHT IS THE COLOURFUL ONE. It exists for Vi, and the brief for it is gloss and rainbow, not restraint — so it is the one theme that does NOT take the shared light-theme module rule above. Everywhere else a module colour has to be both a fill and a piece of ink, and satisfying both is what forces it dark on a light theme. Light escapes that by refusing to do both with one colour: --mod the identity hue lifted 25% toward white — bright, 0.27 chroma at the top end, and read under a DARK --button-text, which is how a vivid chip is normally built. This is what fills every button, pill, chip and badge. --mod-ink the same hue pulled 75% toward --text, used only where the colour is written rather than filled with. --mod-ink-mix drives this and is 0% on every other theme. 25% is the minimum lift that clears 4.5:1 under #1a1a1a across nine of the ten modules, and it is still the right number for those nine: going brighter is safe for contrast and costs saturation, so don't. Center Stage is lifted 40% instead, and it is worth knowing why that is not the flattening this comment used to warn against. --blue-violet is the darkest of the ten source hues, so an equal lift does not buy it an equal result. Measured under #1a1a1a, the ten used to run: center 4.59 · backstage 6.27 · campaigns 7.15 · cast 7.44 · locations 8.58 · callback 9.35 · players 10.46 · groups 12.93 · tags 14.06 · props 15.58 which is the actual defect: not that 4.59 fails — it passes — but that it is a third of the way to the floor while its nearest sibling is at 6.27 and the spread runs to 15.58. It was reported from the table as the Center Stage and Start-encounter buttons being hard to read on Light (§12, 2026-08-05), which is what a lone outlier looks like to someone who is not reading a table of ratios. 40% puts it at 6.25:1, level with Backstage, and moves nothing else. Checked in both directions, because --mod-center is a fill here and also feeds --mod-ink (--mod-ink-mix is 75% on this theme) where the same hue is *written* rather than filled with, and lifting a fill darkens nothing — it lightens the ink too, on an already-light card. --mod-ink goes 9.25:1 → 8.44:1 on a composited card. Both ends clear, so this is a real fix and not a trade; if you retune it again, measure that second number too. Players is the exception and always will be: its source is --white, which has no hue to be bright with and would leave an invisible white chip on a white card. It gets a literal light silver instead. */ :root[data-theme="light"] { --mod-campaigns: color-mix(in srgb, var(--gray), var(--white) 25%); --mod-players: #c9c7d6; --mod-cast: color-mix(in srgb, var(--red), var(--white) 25%); --mod-locations: color-mix(in srgb, var(--orange), var(--white) 25%); --mod-props: color-mix(in srgb, var(--yellow), var(--white) 25%); --mod-groups: color-mix(in srgb, var(--green), var(--white) 25%); --mod-callback: color-mix(in srgb, var(--blue), var(--white) 25%); --mod-center: color-mix(in srgb, var(--blue-violet), var(--white) 40%); --mod-backstage: color-mix(in srgb, var(--violet), var(--white) 25%); --mod-tags: color-mix(in srgb, var(--blue-green), var(--white) 25%); } /* The gloss. Two numbers make this panel look wet rather than painted: the spread between the lightness stops, and the chroma. The audit flattened both — it took the spread from 0.30 to 0.07 and left chroma at 0.09, which is how a glossy sheet became a flat tint. But the original 0.6 stop at 40% was a genuine mid-tone band across the middle of every panel, and it is what held h3 to 3.91:1 and links to 2.45:1. So: keep a real sweep, but raise its floor and push the colour up to pay for it. Spread is back to 0.19 (0.97 down to 0.78) and chroma goes 0.09 -> 0.15, which is more colour than this theme has ever had. The light-dark-light-dark sweep across 0/40/75/90% is the sheen and is unchanged in shape. Only the HUE of --mod-bg survives into this gradient; the lightness and chroma here are literal. That is why brightening --mod above did not brighten the panel, and why these two have to be tuned separately. */ :root[data-theme="light"] .panel { background: linear-gradient( 100deg, oklch(from var(--mod-bg) 0.97 0.15 h) 0%, oklch(from var(--mod-bg) 0.78 0.15 h) 40%, oklch(from var(--mod-bg) 0.92 0.15 h) 75%, oklch(from var(--mod-bg) 0.88 0.15 h) 90% ); } :root[data-theme="parchment"] body .panel { background-image: url("/assets/images/paper_1.webp"), radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 255, 255, 0.35), transparent 60%), linear-gradient(160deg, #f4ead4 0%, #ecddb5 55%, #e3cca3 100%); background-position: top right, bottom left, center center; background-blend-mode: multiply, overlay, normal; background-size: 100px 75px, cover, cover; background-repeat: repeat, repeat, repeat; } :root[data-theme="parchment"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.18; mix-blend-mode: multiply; } /* The sunset, compressed into a narrow light band. .panel is `min-height: 100vh; height: fit-content`, so this gradient does not sit behind a hero — it stretches over the WHOLE page, and its last stop is the bottom of every screen. --text is fixed at #1b151d, so a gradient that ran from L 0.89 down to L 0.61 meant readability fell off as you scrolled: at the old #8f7aa3 body copy was 4.68:1, h3 2.03:1 and muted text 1.05:1. Measured, the old bottom stop had luminance 0.224 — at which point even pure black only reaches 5.48:1, so no amount of darkening the *text* could have fixed it. The surface had to move. Same four hues in the same order, held between L 0.90 and L 0.82 with chroma capped at 0.06 so they stay sunset rather than going candy. Still warm at the top, still cool and violet at the bottom — it just no longer sets all the way. The three radial washes above are unchanged and still do most of the mood. */ :root[data-theme="meadow"] body .panel { background: radial-gradient(ellipse 55% 40% at 18% 12%, rgba(240, 208, 160, 0.65), transparent 60%), radial-gradient(ellipse 50% 38% at 82% 8%, rgba(184, 169, 201, 0.55), transparent 62%), radial-gradient(ellipse 65% 45% at 50% 100%, rgba(107, 76, 111, 0.28), transparent 65%), linear-gradient(180deg, #f3d9c4 0%, #f9c5c9 38%, #d9c3e4 72%, #cfbae3 100%); } /* Golden Hour Sunset fills light and letters dark — Gail's call: "lighter pills/buttons outlined and texted in darker." Structurally this is the Tavern rule with its polarity flipped. Tavern is a dark theme, so it washes the module colour down toward transparent and letters IN it; Meadow is light, so it washes the module colour into WHITE and letters in it at full strength. Both land in the same place: the colour moves off the fill and onto the line and the lettering. --mod itself is deliberately untouched. It still draws every card's left border, every Reserve pip, the active-pill ring and the Bit cost outline, and all of those want the dark solid value — lightening --mod would have bleached them. The wash happens here, at the point of use, and nowhere else. Measured: lettering on the washed fill runs 6.40–11.61:1, and the border holds 4.46–8.65:1 against both the panel and the card, which matters more than usual here — the fill sits at roughly 1:1 against the panel, so the outline is the only thing giving the chip a shape. */ :root[data-theme="meadow"] .button, :root[data-theme="meadow"] .nav-pill, :root[data-theme="meadow"] a.nav-pill, :root[data-theme="meadow"] a.nav-pill:visited, :root[data-theme="meadow"] .badge-mod, :root[data-theme="meadow"] .tag-chip { background: color-mix(in srgb, var(--mod, var(--accent)) 14%, var(--white)); border: var(--border-width, 1px) var(--border-style, solid) var(--mod, var(--accent)); color: var(--mod, var(--accent)); box-shadow: none; } /* The shared hover paints --mod-bg, a 45% alpha of the module colour. Over a fill this light that lands mid-tone and takes the dark lettering on it down to 2.02:1, so the hover has to be a wash on the same scale as the rest state rather than a tint of it. 26% is a visible step from 14% and holds 5.24:1. */ :root[data-theme="meadow"] .nav-pill:hover, :root[data-theme="meadow"] a.nav-pill:hover, :root[data-theme="meadow"] .tag-chip button:hover { background: color-mix(in srgb, var(--mod, var(--accent)) 26%, var(--white)); color: var(--mod, var(--accent)); } :root[data-theme="meadow"] .button.secondary { background: color-mix(in srgb, var(--accent) 14%, var(--white)); border-color: var(--accent); color: var(--accent); } :root[data-theme="meadow"] .button.secondary:hover { background: color-mix(in srgb, var(--accent) 26%, var(--white)); } /* Danger stays loud. With everything else on this theme reduced to an outline, one solid red button is the only thing that shouts — which is exactly the right amount of shouting for the action that leaves a campaign. */ :root[data-theme="meadow"] .button.danger { background: var(--danger); border-color: color-mix(in srgb, var(--danger), var(--black) 25%); color: var(--on-accent); } /* The wall. This used to be wood10.jpg, which is not a wood texture — it is a photo of a framed board, dark frame and all. Tiled at 75% it produced a grid of rectangles across the page, which is a large part of why the theme never read as a tavern. dark_wood.webp is a real, seamlessly tiling plank texture with actual seams and grain. It is also nearly black, so the brown is applied by SCREENing a warm gradient over it rather than multiplying one under it — multiply against near-black wood just stays near-black. The gradient darkens toward the bottom, which is the room falling off below the lamp. */ :root[data-theme="tavern"] body { background-color: #4a3120; background-image: radial-gradient(ellipse 130% 70% at 50% -10%, rgba(255, 206, 138, 0.5), transparent 62%), linear-gradient(180deg, #7a5334 0%, #5c3f2a 45%, #3d281a 100%), url("/assets/images/dark_wood.webp"); background-blend-mode: soft-light, screen, normal; background-size: cover, cover, 320px 320px; background-repeat: no-repeat, no-repeat, repeat; background-position: top center; } /* The slate. Two things it needs that a flat dark rectangle doesn't have: grain, and a frame. This rule is the grain — an inline SVG turbulence data-URI, the same no-extra-request technique parchment and steampunk already use. The frame is the pair of box-shadow rules below. background-COLOR here, not just background-image, and that is load-bearing: the unscoped `.panel` rule further down (~1061) paints every panel with its module colour at 45% alpha, so without an opaque colour the wall shows straight through the board and the slate reads as tinted wood. A blackboard is not pink. The module identity survives as the 12% wash below, plus the heading, chip and pill colours — which is where it does its work anyway. */ :root[data-theme="tavern"] body .panel, :root[data-theme="tavern"] body .section-card { background-color: #1b211f; background-image: radial-gradient(ellipse 90% 55% at 16% 0%, rgba(226, 221, 204, 0.07), transparent 62%), radial-gradient(ellipse 70% 45% at 88% 6%, rgba(226, 221, 204, 0.05), transparent 60%), linear-gradient( 160deg, color-mix(in srgb, var(--mod, transparent) 12%, transparent), transparent 70% ), url("data:image/svg+xml;utf8,"); background-blend-mode: normal, normal, normal, soft-light; background-size: cover, cover, cover, 160px 160px; background-repeat: no-repeat, no-repeat, no-repeat, repeat; } :root[data-theme="tavern"] body .section-card { background-color: #131917; } /* The frame, and it is the important half — a thin chalk line drawn a few pixels inside the edge is the cue that says "someone drew a box on a blackboard", and it does more for Vi's ask than any colour change did. Two stacked inset shadows: the dark one paints ON TOP of the chalk one and covers all but a 1px ring of it, which is what leaves the line floating inside the border instead of sitting on it. Don't collapse them into one. */ :root[data-theme="tavern"] body .panel { box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.35), inset 0 0 0 7px rgba(226, 221, 204, 0.42), var(--shadow-panel); } :root[data-theme="tavern"] body .section-card { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3), inset 0 0 0 5px rgba(226, 221, 204, 0.3), var(--shadow-card); } /* Chalk, not paint. Buttons, pills, chips and badges are solid `var(--mod)` fills everywhere else in the app — on a blackboard those read as pastel sticky notes, which is most of what was left of "it doesn't look like a tavern" once the wall and the slate were right. The module colour moves from the fill to the line and the lettering. This is exactly what the contrast work at the top of the tavern block measured: every module was checked as a FOREGROUND colour on the slate surfaces, so each of these clears 4.5:1 as chalk on the board. Reverting to fills would need that check redone the other way round, against --button-text on a light-ish fill. */ :root[data-theme="tavern"] .button, :root[data-theme="tavern"] .nav-pill, :root[data-theme="tavern"] a.nav-pill, :root[data-theme="tavern"] a.nav-pill:visited, :root[data-theme="tavern"] .badge-mod, :root[data-theme="tavern"] .tag-chip { background: color-mix(in srgb, var(--mod, var(--accent)) 10%, transparent); border: var(--border-width, 2px) solid color-mix(in srgb, var(--mod, var(--accent)) 60%, transparent); color: var(--mod, var(--accent)); box-shadow: none; } :root[data-theme="tavern"] .button.secondary { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); } /* The hero's second action (SEO_PLAN.md Day 3). .button.secondary could not do this job any more. Once a mod-less .button fills with --accent (see --button-ink), .secondary — which is `color-mix(--mod 12%, --accent)`, i.e. --accent when there is no mod — is the *same colour as the primary*, and the hero's two CTAs become one control wearing two labels. Redefining .secondary app-wide was rejected on blast radius: it carries the number stepper, the tag select-all and "Continue with Google" on three pages, and its per-module contrast is checked ten times over in theme-contrast.py. --text on a transparent fill over the body gradient is the pair batch 7 day 1 closed and Day 3b widened ('landing body-copy ink on body'), green on all eleven. --field-border is decoration at no bar, the same argument .auth-alt-rule already makes. **Placed after the Meadow and Tavern .button overrides deliberately.** Those are `:root[data-theme="…"] .button` — (0,2,0) with the attribute selector, same as `.button.quiet`'s two classes — so on equal specificity the later rule wins, and this has to be later or those two themes would paint their chalk/outline treatment over it and lose the distinction again. Moving this block up the file un-fixes it silently. */ .button.quiet { background: transparent; border-color: var(--field-border); color: var(--text); } .button.quiet:hover { background: var(--field-bg); opacity: 1; } /* Headings and labels in chalk handwriting; values, paragraphs and every form control in the reading face. `input`/`select`/`textarea` are `font: inherit` (styles.css ~1214), so without the second rule the handwriting would leak straight into everything anyone types. */ :root[data-theme="tavern"] label, :root[data-theme="tavern"] .mod-heading, :root[data-theme="tavern"] legend, :root[data-theme="tavern"] th { font-family: var(--font-heading); } :root[data-theme="tavern"] input, :root[data-theme="tavern"] select, :root[data-theme="tavern"] textarea { font-family: var(--font-body); } :root[data-theme="grove"] body { background: radial-gradient(circle at 14% 18%, rgba(255, 244, 196, 0.45), transparent 11%), radial-gradient(circle at 42% 8%, rgba(255, 244, 196, 0.38), transparent 9%), radial-gradient(circle at 72% 22%, rgba(255, 244, 196, 0.32), transparent 13%), radial-gradient(circle at 88% 58%, rgba(255, 244, 196, 0.28), transparent 11%), radial-gradient(circle at 22% 78%, rgba(255, 244, 196, 0.28), transparent 11%), radial-gradient(circle at 55% 92%, rgba(255, 244, 196, 0.24), transparent 12%), linear-gradient(160deg, #b4e1ad 0%, #5f8471 55%, #3f6659 100%); } :root[data-theme="cartographer"] body .panel { background: repeating-radial-gradient( circle at 28% 32%, transparent 0 16px, rgba(122, 111, 90, 0.07) 16px 17px ), repeating-radial-gradient( circle at 78% 68%, transparent 0 20px, rgba(122, 111, 90, 0.06) 20px 21px ), radial-gradient(ellipse 48% 38% at 18% 28%, rgba(122, 150, 140, 0.4), transparent 62%), radial-gradient(ellipse 42% 32% at 82% 22%, rgba(216, 150, 110, 0.38), transparent 60%), radial-gradient(ellipse 50% 40% at 62% 82%, rgba(140, 150, 190, 0.32), transparent 62%), radial-gradient(ellipse 38% 30% at 30% 85%, rgba(200, 120, 120, 0.28), transparent 60%), linear-gradient(160deg, #f0e3c6 0%, #e9d8b0 100%); } :root[data-theme="dungeon"] { color-scheme: dark; --bg: #34383d; --bg-2: #1b1d20; --text: #e9e6dd; --muted: #a9a69c; /* #e08b3d was 4.46:1 as a link on this theme's panel — the only accent left under the bar once the panels stopped being the problem. Same hue and chroma, lifted to L 0.74. */ --accent: #ea9447; --accent-solid: #a8661f; --panel-bg: rgba(233, 230, 221, 0.06); --panel-border: rgba(233, 230, 221, 0.14); --card-bg: rgba(233, 230, 221, 0.03); --border-soft: rgba(233, 230, 221, 0.1); --field-bg: rgba(233, 230, 221, 0.05); --field-border: rgba(233, 230, 221, 0.18); --field-focus: rgba(224, 139, 61, 0.32); --font-heading: "Almendra SC", serif; --font-body: "Oswald", sans-serif; --border-radius: 0.2rem; --corner-shape: notch; --border-width: 3px; --border-style: double; --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.55); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 10px rgba(0, 0, 0, 0.45); --shadow-button: 0 3px 0 rgba(0, 0, 0, 0.5); --shadow-popover: 0 1.2rem 2.4rem -0.4rem rgba(0, 0, 0, 0.6); --icon-stroke-width: 2.5; } :root[data-theme="dungeon"] body .panel { background-color: #1b1d20; background-image: url("/assets/images/white_brick_wall.webp"), radial-gradient(ellipse 55% 40% at 20% 10%, rgba(224, 139, 61, 0.2), transparent 60%), linear-gradient(160deg, #34383d 0%, #292c30 55%, #1b1d20 100%); background-position: top right, bottom left, center center; background-blend-mode: multiply, overlay, normal; background-size: 100px 50px, cover, cover; background-repeat: repeat, repeat, repeat; } :root[data-theme="cyberpunk"] { color-scheme: dark; --bg: #141127; --bg-2: #0a0817; --text: #eaf6ff; --muted: #8fa3c9; --accent: #ff2fb0; --accent-solid: #b8127e; --panel-bg: rgba(234, 246, 255, 0.05); --panel-border: rgba(41, 241, 224, 0.22); --card-bg: rgba(0, 0, 0, 0.712); --border-soft: rgba(41, 241, 224, 0.14); --field-bg: rgba(0, 0, 0, 0.412); --field-border: rgba(41, 241, 224, 0.26); --field-focus: rgba(255, 47, 176, 0.32); --font-heading: "Orbitron", sans-serif; --font-body: "Chakra Petch", sans-serif; --border-width: 1px; --border-style: solid; --shadow-panel: 0 0 24px rgba(255, 47, 176, 0.35), 0 0 44px rgba(41, 241, 224, 0.2); --shadow-card: 0 0 14px rgba(41, 241, 224, 0.25); --shadow-button: 0 0 16px rgba(255, 47, 176, 0.5); --shadow-popover: 0 0 30px rgba(41, 241, 224, 0.35); --icon-stroke-width: 1.5; /* Neon Circuit keeps its magenta wash — that shared pink cast across all ten identity colours is the theme — but the magenta step alone left them mid-tone, so Center Stage sat at 2.42:1 and Backstage at 3.63:1. The magenta happens first, then the result is lifted toward --text like every other dark theme. 45% rather than the base 60% because the magenta step has already done some of the lifting; measured, this holds 0.056-0.138 chroma, which is more saturation than the base set carries. */ --mod-campaigns: color-mix( in srgb, color-mix(in srgb, var(--gray), var(--magenta) 30%), var(--text) 45% ); --mod-players: color-mix( in srgb, color-mix(in srgb, var(--white), var(--magenta) 30%), var(--text) 45% ); --mod-cast: color-mix( in srgb, color-mix(in srgb, var(--red), var(--magenta) 30%), var(--text) 45% ); --mod-locations: color-mix( in srgb, color-mix(in srgb, var(--orange), var(--magenta) 30%), var(--text) 45% ); --mod-props: color-mix( in srgb, color-mix(in srgb, var(--yellow), var(--magenta) 30%), var(--text) 45% ); --mod-groups: color-mix( in srgb, color-mix(in srgb, var(--green), var(--magenta) 30%), var(--text) 45% ); --mod-callback: color-mix( in srgb, color-mix(in srgb, var(--blue), var(--magenta) 30%), var(--text) 45% ); --mod-center: color-mix( in srgb, color-mix(in srgb, var(--blue-violet), var(--magenta) 30%), var(--text) 45% ); --mod-backstage: color-mix( in srgb, color-mix(in srgb, var(--violet), var(--magenta) 30%), var(--text) 45% ); --mod-tags: color-mix( in srgb, color-mix(in srgb, var(--blue-green), var(--magenta) 30%), var(--text) 45% ); --border-radius: 0 1rem 0 0; --corner-shape: bevel; } :root[data-theme="cyberpunk"] body .panel { background-color: rgb(165, 29, 113); background: linear-gradient(160deg, #14112767 0%, #100c22 55%, #0a0817 100%), radial-gradient(ellipse 60% 205% at 80% 90%, rgba(237, 41, 255, 0.534), transparent 60%), radial-gradient(ellipse 60% 205% at 20% 10%, rgba(30, 192, 178, 0.692), transparent 60%), repeating-linear-gradient(190deg, rgba(255, 0, 234, 0.336) 0 1px, rgba(0, 0, 0, 0.5) 2px 24px), repeating-linear-gradient(90deg, rgba(255, 0, 157, 0.685) 0 1px, transparent 2px 14px), repeating-linear-gradient(210deg, rgba(134, 255, 54, 0.363) 0 1px, transparent 2px 34px), url("/assets/images/carbon_fibre.png"); background-position: top right, bottom left, center center, center center, top right, bottom left, center center; background-blend-mode: difference, hard-light, hard-light, soft-light, soft-light, soft-light, normal; background-size: cover, cover, cover, cover, cover, cover, 50px 20px; background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat; } :root[data-theme="steampunk"] { color-scheme: dark; --bg: #33261a; --bg-2: #170f09; --text: #f0e4c8; --muted: #b39a72; --accent: #c8863a; --accent-solid: #8f5c22; --panel-bg: rgba(240, 228, 200, 0.06); --panel-border: rgba(200, 134, 58, 0.24); --card-bg: rgba(240, 228, 200, 0.03); --border-soft: rgba(200, 134, 58, 0.14); --field-bg: rgba(240, 228, 200, 0.05); --field-border: rgba(200, 134, 58, 0.26); --field-focus: rgba(200, 134, 58, 0.32); --font-heading: "Cinzel Decorative", serif; --font-body: "Crimson Text", serif; --border-radius: 0.35rem; --corner-shape: scoop; --border-width: 3px; --border-style: double; --shadow-panel: inset 0 1px 0 rgba(240, 228, 200, 0.15), 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-card: inset 0 1px 0 rgba(240, 228, 200, 0.1), 0 3px 8px rgba(0, 0, 0, 0.35); --shadow-button: 0 3px 0 rgba(0, 0, 0, 0.45); --shadow-popover: 0 1rem 2.2rem -0.4rem rgba(0, 0, 0, 0.5); --icon-stroke-width: 2; } :root[data-theme="steampunk"] body .panel { background: radial-gradient(ellipse 50% 40% at 85% 5%, rgba(200, 134, 58, 0.22), transparent 60%), linear-gradient(160deg, #33261a 0%, #251b12 55%, #170f09 100%); } :root[data-theme="steampunk"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.22; mix-blend-mode: overlay; } /* Removed: a hand-nudged --mod-campaigns (#9c8fbb) that these three shared because the old mix-toward---muted recipe left Campaigns at 4.01:1 on Dungeon Stone. The base recipe now mixes toward --text and Campaigns clears the bar on its own, so the override had become a hardcoded value silently winning over the rule that replaced it. Neon Circuit also gets its magenta back this way — the override was overwriting it there too. */ body { margin: 0; min-height: 100vh; font-family: var(--font-body, "Public Sans"), system-ui, sans-serif; background: linear-gradient(135deg, var(--bg), var(--bg-2)); color: var(--text); transition: background 0.2s ease, color 0.2s ease; } a.nav-pill { color: var(--button-text); } a.nav-pill:visited { color: var(--button-text); } a.nav-pill:hover { color: var(--mod, var(--accent-solid)); } a { color: var(--accent); } a:visited { color: var(--accent); } a:hover { color: var(--mod-ink, var(--accent-solid)); } /* A link styled as a button takes the button's ink, not the link palette's. Without this, `a:visited` and `a:hover` above both reach a `` and recolour its text against a fill chosen for different ink — visibly, on the landing CTAs, which are the app's only visited button links. Two things here are load-bearing and neither is visible in the declaration. **It has to sit after `a:visited`/`a:hover`**: all three score (0,1,1), so this wins on source order alone and moving it above them silently restores the bug. And **it must never gain `:visited`** — `a.button:visited` would score (0,2,1) and out-specify `.button.secondary` and `.button.danger` (both (0,2,0)), so every visited Delete would swap `--on-accent` for `--button-ink`: near-black ink on the danger fill on Light. It shipped as `a.button , a.button :visited`, where the stray space made the second half a descendant selector that matched nothing, which is the only reason that never landed. */ a.button { color: var(--button-ink); } .app-shell { min-height: 100vh; position: relative; z-index: 1; display: flex; justify-content: center; } .panel { width: min(100%, 640px); height: fit-content; min-height: 100vh; padding: 1.4rem; background: var(--panel-bg); border: var(--border-width, 1px) var(--border-style, solid) var(--panel-border); box-shadow: var(--shadow-panel, none); } /* * Saves land on the row that was written rather than at the top of the page * (audit finding 20; api/redirect_helpers.php builds the fragment). Without a * scroll margin the browser puts that row flush against the top edge, where * .theme-picker — position: fixed, top: 1rem, ~2.3rem tall — sits over it, and * where a row has no visible context above it to read against. * * 4rem clears the theme button with room to spare and leaves the preceding row * partly visible, which is what makes the landing legible as "here is where you * were" rather than "here is a new top of page". Applied to [id] rather than to * a list of components so that anchoring a new element is a matter of giving it * an id, with no second edit here to forget. */ [id] { /* Was a flat 4rem; now derived, so the corner cluster growing a control moves this with it. See --chrome-* under .panel h1. */ scroll-margin-top: var(--chrome-height); } .panel-wide { width: min(100%, 1000px); } .panel.login-card { width: min(100%, 480px); margin: 0 auto; min-height: auto; } /* The auth screens are one screen repeated — a form, sometimes a second way in, and a way out to the sibling page — and before finding 23 the last two were bare siblings of the
with nothing grouping them. Every .button is inline-flex with `min-width: 8rem` and an is inline text, so they flowed into whatever space was left: a text link and a button shared a line by accident, and "Continue with Google" read as a step *after* the password form rather than an alternative *to* it. Each of the three is now its own row, and the buttons go full-width so the alternative reads as a peer of the submit above it rather than a fragment beside it. */ .auth-panel .button { width: 100%; } /* "Forgot password?" lives inside the , because it is about the password field above it. Left as an ordinary link rather than the .muted it used to be — on its own row it no longer competes with anything, and the thing you reach for when you are locked out should not be the quietest text on the screen. */ .auth-aside { display: block; margin-top: 0.8rem; font-size: 0.9rem; } .auth-alt { display: grid; gap: 0.7rem; margin-top: 1.5rem; } /* The rule either side of the word is what makes these read as two ways to do one thing. The word carries that meaning and the lines only assist it, so they are decoration — which is why --border-soft is fine here at no contrast bar, the same use it already has on every card edge. */ .auth-alt-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7rem; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .auth-alt-rule::before, .auth-alt-rule::after { content: ""; height: var(--border-width, 1px); background: var(--border-soft); } .auth-footer { margin: 1.5rem 0 0; padding-top: 1rem; border-top: var(--border-width, 1px) var(--border-style, solid) var(--border-soft); text-align: center; font-size: 0.9rem; color: var(--text-muted); } .landing-grid { display: grid; grid-template-columns: 1fr minmax(300px, 380px); grid-template-areas: "intro auth"; gap: 2rem; align-items: start; } .landing-intro { grid-area: intro; padding-top: 0.5rem; } .landing-intro h1 { margin-bottom: 0.5rem; } .landing-intro .tagline { color: var(--text-muted); font-size: 1.1rem; margin-top: 0; } .landing-auth { grid-area: auth; } .landing-features { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; } .landing-feature { display: flex; gap: 0.8rem; align-items: flex-start; } .landing-feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; corner-shape: var(--corner-shape, round); border-radius: var(--border-radius, 0.5rem); background: var(--field-bg); color: var(--accent); } .landing-feature h3 { margin: 0 0 0.2rem; text-transform: none; letter-spacing: normal; color: var(--text); font-size: 1rem; } .landing-feature p { margin: 0; color: var(--text-muted); font-size: 0.92rem; } @media (max-width: 760px) { .landing-grid { grid-template-columns: 1fr; grid-template-areas: "auth" "intro"; } } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; align-items: start; } .form-grid > label, .form-grid > .field-control, .form-grid > .checkbox-field, .form-grid > .icon-picker, .form-grid > .field-row, .form-grid > .actions { margin: 0; } /* The Bit form's prose field takes the whole row — "the Bits have a description text box that is unnecessarily small (should take both columns instead of only the left column) on desktop" (§12 pair 1, U12). Scoped to the Bit form's grid rather than every .form-grid on purpose: the entity Details/Sharing grids also hold textareas and their two-column layout is the one signed off on device — widening a selector here is a layout change on screens nobody complained about. */ .bit-form-grid > label:has(textarea) { grid-column: 1 / -1; } .form-grid .actions { grid-column: 1 / -1; justify-content: flex-start; } .form-stack { display: grid; gap: 0.9rem; } .field-row { display: grid; gap: 0.75rem; align-items: center; grid-template-columns: minmax(0, 1fr) auto; } .confirm-dialog-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); } .confirm-dialog-backdrop[hidden] { display: none; } .confirm-dialog { width: min(100%, 480px); padding: 1.3rem; background: var(--panel-bg); border: var(--border-width, 1px) var(--border-style, solid) var(--panel-border); border-radius: var(--border-radius, 0.9rem); corner-shape: var(--corner-shape, round); box-shadow: var(--shadow-popover, 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.35)); } .confirm-dialog p { margin: 0; color: var(--text); line-height: 1.5; } .confirm-dialog .dialog-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1.15rem; } .confirm-dialog .button { min-width: 0; } .section-card { display: grid; align-content: start; gap: 0.9rem; padding: 1rem; background: var(--card-bg); border: var(--border-width, 1px) var(--border-style, solid) var(--border-soft); border-radius: var(--border-radius, 0.7rem); corner-shape: var(--corner-shape, round); box-shadow: var(--shadow-card, none); } .section-card > h2 { margin-top: 0; } .section-card > :last-child { margin-bottom: 0; } /* One labelled block in the read view on Locations/Props/Ensembles (Notes, What players see). .section-card is a grid, so its own gap already separates these — an inner paragraph's bottom margin would stack on top of it and make the spacing between blocks uneven depending on what each one ends with. */ .entity-read-block > :last-child { margin-bottom: 0; } .entity-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr); gap: 1rem; align-items: start; } .backstage-grid { display: grid; gap: 1rem; } @media (min-width: 1040px) { .backstage-grid { /* **Three equal columns, and every panel spans 1, 2 or 3 of them** (Gail's layout, 2026-08-18). Two columns could only say wide-or-narrow; this says how wide, which is what let the pairing below be chosen rather than fallen into. */ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* **Named, never positional, and the positional version shipped broken.** This was `nth-child(1), nth-child(6)`, which is a rule about where a panel sits in the list rather than about what it is — so deleting the Your Tags panel on 2026-08-17 shifted every panel below it up one and silently re-pointed both selectors. Starting Character Fields, which had been in the wide column, landed in the 320px one; Starting Reserves quietly lost its full width to the Bit Catalog. Nothing looked broken in the CSS and nothing failed, which is exactly why it took a GM opening the panel to find it. Keyed on data-section, so these travel with the panels they are about and an added or removed panel cannot move them. verify_backstage_sections.php holds every key named here against backstageSectionKeys(). The four are the ones that hold a *form* rather than a list of controls — Starting Character Fields most of all, which is a save-all over every template in the campaign and the reason this was noticed. */ /* Full width: the three that are a *form* over a whole campaign rather than a list of controls. Starting Character Fields most of all — in edit mode it is a save-all over every template, and 320px is not a form, which is what a GM with 91 of them reported. */ .backstage-grid > [data-section='starting-fields'], .backstage-grid > [data-section='entity-fields'], .backstage-grid > [data-section='danger-zone'] { grid-column: 1 / -1; } /* Two thirds, each paired with a one-third panel beside it. **The pairing is produced by source order, not declared here** — auto-placement fills each row because every row's spans sum to exactly 3, which is why verify_backstage_sections.php asserts that sum rather than the pixels. Get the order or a span wrong and the rows go ragged with nothing failing. */ .backstage-grid > [data-section='players'], .backstage-grid > [data-section='starting-reserves'], .backstage-grid > [data-section='center-stage-setup'] { grid-column: span 2; } } .entity-column { display: grid; gap: 1rem; } .page-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.75rem 0 1.2rem; } .page-actions .button { width: auto; } @media (max-width: 760px) { .field-list li, .field-row, .entity-layout { grid-template-columns: 1fr; } } /* The panel's 1.4rem gutters cost ~45px of a 390px phone — real money on the device the table actually plays on, and on every page in the app. */ @media (max-width: 480px) { .panel { padding: 1rem 0.8rem; } } @media (max-width: 980px) { .entity-layout { grid-template-columns: 1fr; } } @media (min-width: 840px) { .panel-wide { width: min(100%, 1100px); } } /* packs.php's "Build your own" rail, and admin-packs.php's upload rail (2026-08-12): plain .entity-layout for the two-column split on both pages (was .backstage-grid, which is Backstage's own shape — its nth-child(1)/(6) full-span rule doesn't mean anything here). Both sidebars come SECOND in source order already, unlike the character sheet's rail, so no grid-column/row repositioning is needed — this only adds the same sticky-on-desktop treatment .sheet-rail already established, at the same 981px breakpoint .entity-layout itself collapses at. */ @media (min-width: 981px) { .packs-byo, .admin-packs-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } } .mod-campaigns { --mod: var(--mod-campaigns); --mod-fill: color-mix(in srgb, var(--mod-campaigns), var(--muted) 20%); } .mod-players { --mod: var(--mod-players); --mod-fill: color-mix(in srgb, var(--mod-players), var(--muted) 20%); } .mod-cast { --mod: var(--mod-cast); --mod-fill: color-mix(in srgb, var(--mod-cast), var(--muted) 20%); } .mod-locations { --mod: var(--mod-locations); --mod-fill: color-mix(in srgb, var(--mod-locations), var(--muted) 20%); } .mod-props { --mod: var(--mod-props); --mod-fill: color-mix(in srgb, var(--mod-props), var(--muted) 20%); } .mod-groups { --mod: var(--mod-groups); --mod-fill: color-mix(in srgb, var(--mod-groups), var(--muted) 20%); } .mod-callback { --mod: var(--mod-callback); --mod-fill: color-mix(in srgb, var(--mod-callback), var(--muted) 20%); } .mod-center { --mod: var(--mod-center); --mod-fill: color-mix(in srgb, var(--mod-center), var(--muted) 20%); } .mod-backstage { --mod: var(--mod-backstage); --mod-fill: color-mix(in srgb, var(--mod-backstage), var(--muted) 20%); } .mod-tags { --mod: var(--mod-tags); --mod-fill: color-mix(in srgb, var(--mod-tags), var(--muted) 20%); } .mod-campaigns, .mod-players, .mod-cast, .mod-locations, .mod-props, .mod-groups, .mod-callback, .mod-center, .mod-backstage, .mod-tags { /* Inside a module, a button is filled with --mod, so its ink is the module-fill token rather than the accent-fill one. Set here rather than as a fallback because --on-accent and --button-text are the same colour on ten of eleven themes and part company on Light — see --button-ink above. This block already lists all ten module classes, so it costs one declaration and no new list. Every module button is byte-identical after the change. */ --button-ink: var(--button-text); --mod-bg: color-mix(in srgb, var(--mod) 45%, transparent); /* The module colour as INK — for the handful of places it is written rather than filled with (.bit-cost, .reserve-meter-count, the collapsed-form summaries, link hovers). A fill and a piece of lettering want opposite things from a colour, and Light is the theme where that stops being a detail: its fills are bright rainbow, which is unreadable as 0.78rem text on a white card. --mod-ink-mix is 0% everywhere else, so on every other theme this resolves to exactly --mod and nothing moves. */ --mod-ink: color-mix(in srgb, var(--mod), var(--text) var(--mod-ink-mix)); } /* Removed in the UI/UX pass: an unscoped copy of the Light theme's module-tinted panel gradient (see `:root[data-theme="light"] .panel` above) with a leading `oklch(...)` colour layer. `background` only accepts a colour in its FINAL layer, so the whole declaration was invalid and every browser dropped it — Dark, Grove and Auto-light have always fallen through to the plain `var(--panel-bg)` on `.panel` further up. Deleted rather than repaired on purpose. Making it valid would newly paint those three themes with a 45%-alpha pastel at lightness 0.6–0.9; on Dark that puts #f4f7fb body text on a mid-tone surface. If module-tinted panels are wanted beyond Light, they need per-theme lightness and a re-measure, not this rule switched back on. */ .mod-heading { color: var(--text); } /* --button-text, not --bg. This is the Shared / Not-shared badge on Locations, Props and Ensemble — the visual signal for per-item GM→Player sharing — and it was the single most broken component in the app, failing on all ten themes for at least one module and reaching 1.12:1 on Enchanted Grove. --bg is the page background, i.e. the one colour guaranteed to sit close to the surface behind the badge on a light theme. Every other filled component already used --button-text; this one now matches them. */ .badge-mod { background: var(--mod, var(--text)); color: var(--button-text); } /* The fixed corner cluster: theme picker, then the help button. Two controls as of the help track (2026-08-02), which is why the position moved off .theme-picker and onto a container — and why --chrome-width below is worked out from the count rather than typed. .theme-picker keeps `position: relative` because .theme-menu is absolutely positioned against it; without that the eleven-entry menu would anchor to the cluster and sit under the help button. */ .page-chrome { position: fixed; top: var(--chrome-offset); right: var(--chrome-offset); z-index: 50; display: flex; align-items: flex-start; gap: var(--chrome-gap); } .theme-picker { position: relative; } /* The help button borrows the picker trigger's styling wholesale rather than declaring its own: same size, same border, same fill, already measured on every theme. An rather than a