/**
 * Shared Aetia-style theme pill (System → Light → Dark cycle).
 * Markup: views/partials/theme-toggle-pill.php
 * Wiring: [data-theme-toggle] + theme-toggle.js (or site-local cycle JS).
 *
 * Uses currentColor / generic tokens so it works on portal, marketing,
 * fleet, product shells, and CMS chrome without brand-specific vars.
 */
.ls-theme-pill {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
    padding: 7px 12px 7px 9px;
    border: 1px solid var(--line-strong, rgba(128, 140, 160, 0.28));
    border-radius: 999px;
    background: var(--ls-theme-pill-bg, rgba(128, 140, 160, 0.08));
    color: var(--muted, var(--paper-2, #8a93a3));
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ls-theme-pill:hover {
    color: var(--ink, var(--paper, #f2f4f8));
    border-color: var(--accent, rgba(93, 211, 255, 0.45));
    background: var(--ls-theme-pill-bg-hover, rgba(128, 140, 160, 0.12));
}
.ls-theme-pill:focus-visible {
    outline: 2px solid var(--accent, #5dd3ff);
    outline-offset: 2px;
}
.ls-theme-pill-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid currentColor;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Auto / System: gold core (like Aetia) */
.ls-theme-pill-dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--ls-theme-pill-accent, #e8b84a);
    transform: scale(1);
    transition: transform 0.25s ease;
}
/* Light lock: empty disc + moon inset */
.ls-theme-pill[data-theme-state="light"] .ls-theme-pill-dot::after,
html[data-theme="light"] .ls-theme-pill[data-theme-state="auto"] .ls-theme-pill-dot::after {
    transform: scale(0);
}
.ls-theme-pill[data-theme-state="light"] .ls-theme-pill-dot {
    box-shadow: inset -4px -2px 0 0 var(--ls-theme-pill-accent, #e8b84a);
}
/* When auto resolves to light, show moon-ish empty disc */
html[data-theme="light"] .ls-theme-pill[data-theme-state="auto"] .ls-theme-pill-dot {
    box-shadow: inset -4px -2px 0 0 var(--ls-theme-pill-accent, #e8b84a);
}
/* Dark lock: filled core stays (or stronger) */
.ls-theme-pill[data-theme-state="dark"] .ls-theme-pill-dot::after {
    transform: scale(1);
    background: var(--accent, #5dd3ff);
}
.ls-theme-pill[data-theme-state="light"],
.ls-theme-pill[data-theme-state="dark"] {
    color: var(--ink, var(--paper, #f2f4f8));
}

/* Light page chrome */
html[data-theme="light"] .ls-theme-pill {
    --ls-theme-pill-bg: rgba(18, 21, 28, 0.04);
    --ls-theme-pill-bg-hover: rgba(18, 21, 28, 0.07);
    color: var(--muted, #5a6474);
    border-color: var(--line-strong, rgba(18, 21, 28, 0.14));
}
html[data-theme="light"] .ls-theme-pill:hover {
    color: var(--ink, #12151c);
}