/* theme-toggle.css — HUB-VENDORED universal theme-toggle CHROME. Framework-neutral, shared cross-stack:
   pc / la / go vendor the SAME file from design-templates (templates/components/theme-toggle/css/theme-toggle.css).

   WHAT: the ONE segmented sun/moon pill reused identically across every admin tool — the page-editor bar
   (BAR-THEME preview), the /sections library toolbar, and the section-editor canvas control. No text/readout;
   the active mode is the filled --editor-accent segment (aria-pressed="true"). Zero dependency (inline-SVG,
   currentColor). CSS twin of the shared js/theme-toggle.js behaviour.

   CHROME-INVARIANT: styled ONLY by fixed --editor-* tokens (never --sem, never brand) so it never flips with
   the theme it toggles. Bare var(--editor-*): the toggle only ever renders inside admin/editor chrome where the
   --editor-* token layer (editor-chrome.css :root) is loaded — no literal fallbacks needed (that's the one
   difference from the auth-status cluster, which renders on live public pages and carries fallbacks). */

.editor-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 9999px;
    background: var(--editor-btn-bg);
    border: 1px solid var(--editor-border);
}

.editor-theme-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--editor-ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.editor-theme-toggle button:hover {
    color: var(--editor-ink);
}

/* Active (current) mode — filled accent, white icon, not re-clickable. */
.editor-theme-toggle button[aria-pressed="true"] {
    background: var(--editor-accent);
    color: #fff;
    cursor: default;
}