/* Shared moon/sun control: compact plum pill with a recessed selected circle. */
:root {
    --theme-pill-track: #2b2042;
    --theme-pill-border: #44305f;
    --theme-pill-selected: #171025;
    --theme-pill-icon: #bba7de;
    --theme-pill-active: #f6f0ff;
}
html[data-theme="light"] {
    --theme-pill-track: #ede6f7;
    --theme-pill-border: #d9cbed;
    --theme-pill-selected: #ffffff;
    --theme-pill-icon: #79618f;
    --theme-pill-active: #542d82;
}
html[data-theme] .theme-pill.theme-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    width: auto;
    padding: 3px;
    border: 1px solid var(--theme-pill-border);
    border-radius: 999px;
    background: var(--theme-pill-track);
    box-shadow: inset 0 1px 0 #ffffff08;
}
html[data-theme] .theme-pill.theme-pill button {
    appearance: none;
    display: grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--theme-pill-icon);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 140ms ease, color 140ms ease;
}
html .theme-pill.theme-pill button svg,
html .theme-pill.theme-pill button .mud-icon-root {
    width: 16px;
    height: 16px;
    fill: currentColor;
    color: inherit !important;
}
html[data-theme] .theme-pill.theme-pill button.is-on,
html[data-theme="dark"] .theme-pill.theme-pill [data-theme-set="dark"],
html:not([data-theme]) .theme-pill.theme-pill [data-theme-set="dark"],
html[data-theme="light"] .theme-pill.theme-pill [data-theme-set="light"] {
    background: var(--theme-pill-selected);
    color: var(--theme-pill-active) !important;
    box-shadow: 0 1px 3px #00000020;
}
html .theme-pill.theme-pill button:hover { background-color: color-mix(in srgb, var(--theme-pill-selected) 65%, transparent); }
html .theme-pill.theme-pill button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
/* Keep MudBlazor and legacy sheet overrides from forcing white icons on the light selected thumb. */
html .theme-pill.theme-pill button.is-on svg,
html .theme-pill.theme-pill button.is-on .mud-icon-root,
html .theme-pill.theme-pill [data-theme-set="dark"] svg,
html .theme-pill.theme-pill [data-theme-set="light"] svg,
html .theme-pill.theme-pill [data-theme-set="dark"] .mud-icon-root,
html .theme-pill.theme-pill [data-theme-set="light"] .mud-icon-root {
    color: inherit !important;
    fill: currentColor;
}
@media (pointer: coarse) {
    html .theme-pill.theme-pill button { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    html .theme-pill.theme-pill button { transition: none; }
}
@media (forced-colors: active) {
    html .theme-pill.theme-pill button.is-on { outline: 1px solid ButtonText; }
}