/* * Active-state indicator for the light/dark/system toggle (partials/theme_toggle.html.twig). * * Hand-written, not Tailwind-generatable: it has to react to `data-theme` on , which is set * by the inline bootstrap script in layouts/base.html.twig BEFORE this stylesheet's sibling * app.css finishes loading, so the correct button is highlighted from first paint with no JS * framework (Alpine) needed for it. Loaded after app.css/rtl.css so nothing here needs !important. */ /* The inactive buttons hide their dot; the active one shows it and lifts onto the panel surface — the redesign's dot+label pill (2026-08-09). */ [data-theme-btn] .theme-dot { display: none; } html[data-theme="light"] [data-theme-btn="light"], html[data-theme="dark"] [data-theme-btn="dark"], html[data-theme="system"] [data-theme-btn="system"] { background: var(--surface-panel); color: var(--ink-900); border-radius: 9999px; box-shadow: 0 1px 2px oklch(0 0 0 / 12%); } html[data-theme="light"] [data-theme-btn="light"] .theme-dot, html[data-theme="dark"] [data-theme-btn="dark"] .theme-dot, html[data-theme="system"] [data-theme-btn="system"] .theme-dot { display: inline-block; }