/* Shared local-only moon control. The pressed state always means Dark mode. */
.appearance-toggle { display: flex; align-items: center; gap: 12px; }
.appearance-preference { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appearance-preference > span { min-width: 0; }
.appearance-preference .appearance-toggle { flex: none; }
.appearance-toggle [data-appearance-help] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.appearance-moon.iconbtn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); background: transparent; }
.appearance-moon.iconbtn[aria-pressed="true"] { color: var(--p); border-color: var(--pLine); background: var(--pTint); }
.appearance-moon[aria-pressed="true"] svg { fill: currentColor; }
.appearance-moon:focus-visible { outline: 2px solid var(--pT); outline-offset: 3px; }