/* The theme toggle's three states, chosen in CSS rather than in script.
 *
 * The React version kept the preference in component state and re-rendered the
 * icon and the label. Static server rendering has no such state: the page is
 * built once, before the server can know what this reader chose. So all three
 * variants are in the markup and the one that matches wins, keyed off the
 * data-theme-pref the inline head script stamps before first paint.
 *
 * This is why the label cannot flash. The React version rendered "Светлая" on
 * the server whatever the reader had chosen, and corrected it after hydration.
 *
 * The last selector covers a reader with JavaScript disabled: nothing stamps
 * data-theme-pref, and without it the button would draw empty.
 */

.theme-toggle [data-pref] {
  display: none;
}

:root[data-theme-pref='light'] .theme-toggle [data-pref='light'],
:root[data-theme-pref='dark'] .theme-toggle [data-pref='dark'],
:root[data-theme-pref='system'] .theme-toggle [data-pref='system'],
:root:not([data-theme-pref]) .theme-toggle [data-pref='light'] {
  display: inline;
}