/*
 * Three-way theme control (system / light / dark).
 *
 * static/js/main.js sets body[data-theme-pref] to the current preference; the
 * #mode button then shows just that state's icon. These rules replace the
 * theme's two-state (moon/sun) icon logic — they are loaded after main.css, so
 * on equal specificity they win by source order. Before the (deferred) JS runs,
 * no data-theme-pref is set and the theme's default moon icon shows briefly.
 */
body[data-theme-pref] .toggle-system,
body[data-theme-pref] .toggle-light,
body[data-theme-pref] .toggle-dark { display: none; }

body[data-theme-pref="system"] .toggle-system,
body[data-theme-pref="light"] .toggle-light,
body[data-theme-pref="dark"] .toggle-dark { display: block; }