/* ========================================================================== Debate page stylesheet (spec v2 §C4, §C6, §C7, §C8). Rules enforced here: - rem-only: every font-size is rem (grep: no "font-size: px"). - --font-scale on scales ALL text together (§C7). - 14 complete themes via [data-theme]; default = Dark Sky Blue (§C8). - --glow drives the cross-link hover pulse (§C3). - tooltips via [data-tip] (§C5); full justification (§C6). Two sides get equal visual weight on purpose — the scores rank them, not the design. ========================================================================== */ /* ---- Font scaling: the ONLY thing the A cycle button changes (§C7) ----- */ :root { --font-scale: 1; --font-base: 16px; } html { font-size: calc(var(--font-base) * var(--font-scale)); } /* ---- Default theme: Dark Mode Sky Blue (§C8 default) ------------------- */ :root, html[data-theme="sky-blue"] { --bg: #0d1a2b; --surface: #14263c; --surface-2: #1b344f; --text: #e8eef6; --muted: #9db4cf; --border: #294863; --aff: #4aa3ff; --neg: #ff8f6b; --link: #7cc4ff; --glow: #7cc4ff; --tip-bg: #0a1420; --tip-text: #eef5ff; --cat-scripture:#b98bff; --cat-scholar:#5bc0ff; --cat-history:#e0b25a; --cat-science:#4fd1a5; --cat-logic:#9aa7ff; --cat-statistic:#ff9ecb; --cat-testimony:#8fd06a; --atk-fallacy:#ff6b6b; --atk-evidence:#5bc0ff; --atk-counter:#ffab5b; --atk-warrant:#c08bff; --atk-weighing:#4fd1a5; --flag:#ffcf5b; } /* Dark themes ----------------------------------------------------------- */ html[data-theme="midnight-purple"] { --bg:#150f26; --surface:#211636; --surface-2:#2c1e49; --text:#efe9fb; --muted:#b6a6d8; --border:#3a2a5c; --aff:#b18bff; --neg:#ff8fd0; --link:#c9a7ff; --glow:#c9a7ff; --tip-bg:#0f0a1c; --tip-text:#f3ecff; } html[data-theme="forest-night"] { --bg:#0c1a12; --surface:#132a1d; --surface-2:#1a3728; --text:#e6f2e9; --muted:#9dc4ac; --border:#254a35; --aff:#54c98a; --neg:#e0b25a; --link:#7fe0a8; --glow:#7fe0a8; --tip-bg:#08130d; --tip-text:#ecf7ef; } html[data-theme="charcoal-amber"] { --bg:#161512; --surface:#221f1a; --surface-2:#2f2a22; --text:#f2ece1; --muted:#c3b7a2; --border:#3d3527; --aff:#f0a63c; --neg:#5bc0ff; --link:#ffbf66; --glow:#ffbf66; --tip-bg:#100f0c; --tip-text:#f7f1e6; } html[data-theme="deep-ocean"] { --bg:#071824; --surface:#0d2635; --surface-2:#123448; --text:#e3f0f7; --muted:#96bccf; --border:#1e4560; --aff:#3fc7d4; --neg:#ff9f7a; --link:#6fdbe6; --glow:#6fdbe6; --tip-bg:#04121b; --tip-text:#e9f5fa; } html[data-theme="crimson-night"] { --bg:#1c0f12; --surface:#2a161b; --surface-2:#391d24; --text:#f7e9ec; --muted:#d3a7b0; --border:#4d2830; --aff:#ff7a90; --neg:#ffc04d; --link:#ff9db0; --glow:#ff9db0; --tip-bg:#14090c; --tip-text:#fceef1; } html[data-theme="slate-green"] { --bg:#101917; --surface:#1a2724; --surface-2:#233531; --text:#e6efec; --muted:#a3c0b8; --border:#2f4842; --aff:#5ec8a8; --neg:#e6a95c; --link:#84e0c2; --glow:#84e0c2; --tip-bg:#0b1210; --tip-text:#ecf5f2; } /* Light themes ---------------------------------------------------------- */ html[data-theme="paper-white"] { --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eef1f5; --text:#151a21; --muted:#5a6675; --border:#d3dae3; --aff:#1f6feb; --neg:#c2410c; --link:#1257c9; --glow:#1f6feb; --tip-bg:#1b2430; --tip-text:#f4f7fb; } html[data-theme="warm-cream"] { --bg:#f6f1e7; --surface:#fffdf8; --surface-2:#efe7d6; --text:#241d12; --muted:#6b5d45; --border:#ddd1ba; --aff:#b5651d; --neg:#1f6f8b; --link:#9a5316; --glow:#b5651d; --tip-bg:#2a2213; --tip-text:#faf5ea; } html[data-theme="day-sky"] { --bg:#eef4fb; --surface:#ffffff; --surface-2:#e0eaf6; --text:#122033; --muted:#4d6785; --border:#c6d7ea; --aff:#1565c0; --neg:#c14a1f; --link:#0f57ab; --glow:#1565c0; --tip-bg:#12233a; --tip-text:#eef5fd; } html[data-theme="mint"] { --bg:#eef7f1; --surface:#ffffff; --surface-2:#dcefe3; --text:#0f2119; --muted:#4a6a5a; --border:#c2ddcd; --aff:#0f7a52; --neg:#b5651d; --link:#0b6644; --glow:#0f7a52; --tip-bg:#0f2419; --tip-text:#edf7f1; } html[data-theme="lavender"] { --bg:#f3f0fa; --surface:#ffffff; --surface-2:#e7e0f4; --text:#1c1430; --muted:#5f5480; --border:#d6cbec; --aff:#6d3fc0; --neg:#b5651d; --link:#5a2fab; --glow:#6d3fc0; --tip-bg:#1c1330; --tip-text:#f2ecfb; } html[data-theme="sandstone"] { --bg:#f5efe6; --surface:#fffcf6; --surface-2:#ece1cf; --text:#251d10; --muted:#6d5c3f; --border:#dccdb2; --aff:#9a6a1c; --neg:#1f6f8b; --link:#835512; --glow:#9a6a1c; --tip-bg:#271f11; --tip-text:#faf4e9; } html[data-theme="rose-quartz"] { --bg:#faf0f2; --surface:#ffffff; --surface-2:#f3e0e6; --text:#2a141b; --muted:#7a5560; --border:#e8cdd5; --aff:#c02f6a; --neg:#1f7a8b; --link:#a82559; --glow:#c02f6a; --tip-bg:#2a141b; --tip-text:#fbeef2; } /* Light themes share readable (darker) accent tag colors for AA legibility. */ html[data-theme="paper-white"], html[data-theme="warm-cream"], html[data-theme="day-sky"], html[data-theme="mint"], html[data-theme="lavender"], html[data-theme="sandstone"], html[data-theme="rose-quartz"] { --cat-scripture:#7c3aed; --cat-scholar:#0369a1; --cat-history:#a16207; --cat-science:#0f766e; --cat-logic:#4f46e5; --cat-statistic:#be185d; --cat-testimony:#3f7d20; --atk-fallacy:#dc2626; --atk-evidence:#0369a1; --atk-counter:#c2410c; --atk-warrant:#7c3aed; --atk-weighing:#0f766e; --flag:#b45309; --tip-text:#f4f7fb; } /* ---- Base layout ------------------------------------------------------ */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.55; transition: background .2s, color .2s; } p, li, blockquote, .block p { text-align: justify; hyphens: auto; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 78rem; margin: 0 auto; padding: 1.25rem; } /* ---- Fixed controls (A cycle + theme cycle + help) --------------------- */ .controls { position: fixed; top: .75rem; right: .75rem; display: flex; gap: .4rem; z-index: 50; } .controls button, .controls #help-btn { font-size: 1rem; font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: .5rem; padding: .35rem .6rem; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .controls button:hover, .controls #help-btn:hover { border-color: var(--link); } /* An , not a