/* assets/switcher.css
   Compact popup/dropdown theme switcher
   - Reads your theme tokens:
     --surface-1/2, --border, --text-high/mid/low, --radius, --radius-lg, --gap,
     --focus-ring, --focus-ring-strong, --drop-sm, --drop-md, --ctl-c1.. (for accents)
   - Respects prefers-reduced-motion
*/

:root {
    --sttm-radius: var(--radius, 10px);
    --sttm-pad: 8px;
    --sttm-gap: var(--gap, 6px);
    --sttm-border: var(--border, #ffffff22);
    --sttm-fg: var(--text-high, #e6edf7);
    --sttm-fg-mid: var(--text-mid, #b8c3d4);
    --sttm-bg: var(--surface-1, #10101a);
    --sttm-bg-2: var(--surface-2, #131422);
    --sttm-shadow: var(--drop-sm, 0 10px 24px rgba(0,0,0,.35));
    --sttm-ring: var(--focus-ring, rgba(0, 200, 255, .35));
    --sttm-ring-strong: var(--focus-ring-strong, rgba(0, 200, 255, .55));
    --sttm-scale-in: .97;
}

/* shell */
[data-sttm].sttm-compact {
    position: relative;
    display: inline-block;
    font: inherit;
}

    /* trigger (button) */
    [data-sttm].sttm-compact .sttm-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
        background: linear-gradient(180deg, color-mix(in oklch, var(--sttm-bg) 85%, transparent), color-mix(in oklch, var(--sttm-bg-2) 85%, transparent));
        color: var(--sttm-fg);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        cursor: pointer;
        transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
        will-change: transform;
    }

        [data-sttm].sttm-compact .sttm-trigger:hover {
            transform: translateY(-1px);
            border-color: color-mix(in oklch, var(--sttm-border) 60%, var(--ctl-c2, #5cf) 40%);
            box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
        }

        [data-sttm].sttm-compact .sttm-trigger:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 3px var(--sttm-ring), 0 10px 24px rgba(0,0,0,.28);
        }

/* trigger content */
.sttm-trigger-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    background: radial-gradient(circle at 30% 30%, var(--ctl-c1, #888), transparent 60%), radial-gradient(circle at 70% 70%, var(--ctl-c2, #aaa), transparent 60%), linear-gradient(135deg, var(--ctl-c1, #888), var(--ctl-c2, #aaa));
    border: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
}

.sttm-trigger-label {
    font-size: .92rem;
    letter-spacing: .01em;
    color: var(--sttm-fg);
    white-space: nowrap;
}

.sttm-trigger-caret {
    opacity: .85;
}

/* popup container */
.sttm-pop {
    position: absolute;
    z-index: 9999;
    inset: auto auto auto 0; /* default align left under trigger; JS can flip */
    margin-top: 8px;
    min-width: 220px;
    max-width: 320px;
    color: var(--sttm-fg);
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

    .sttm-pop .sttm-pop-inner {
        background: linear-gradient(180deg, color-mix(in oklch, var(--sttm-bg) 94%, transparent), color-mix(in oklch, var(--sttm-bg-2) 94%, transparent));
        border: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
        border-radius: var(--sttm-radius);
        padding: 6px;
        backdrop-filter: blur(10px) saturate(110%);
    }

/* menu */
.sttm-menu {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: grid;
    gap: 2px;
    max-height: 60vh;
    overflow: auto;
}

/* items */
.sttm-item {
    width: 100%;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    font: inherit;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sttm-fg-mid);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

    .sttm-item:hover {
        background: color-mix(in oklch, var(--ctl-c2, #4aa3ff) 10%, transparent);
        color: var(--sttm-fg);
        border-color: color-mix(in oklch, var(--sttm-border) 60%, transparent);
    }

    .sttm-item:focus-visible {
        outline: 0;
        border-color: var(--sttm-ring-strong);
        box-shadow: 0 0 0 2px var(--sttm-ring);
        color: var(--sttm-fg);
    }

    .sttm-item[aria-checked="true"] {
        background: color-mix(in oklch, var(--ctl-c2, #4aa3ff) 16%, transparent);
        color: var(--sttm-fg);
        border-color: color-mix(in oklch, var(--sttm-border) 60%, transparent);
    }

/* swatch and check */
.sttm-item-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--sw1, #777), transparent 60%), radial-gradient(circle at 70% 70%, var(--sw2, #999), transparent 60%), linear-gradient(135deg, var(--sw1, #777), var(--sw2, #999));
    border: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
}

.sttm-item-check {
    opacity: 0;
    transform: scale(.9);
    transition: transform .18s ease, opacity .18s ease;
}

.sttm-item[aria-checked="true"] .sttm-item-check {
    opacity: 1;
    transform: scale(1);
}

/* open/close animation */
.sttm-pop.sh {
    opacity: 0;
    transform-origin: 12px top;
    transform: translateY(-6px) scale(var(--sttm-scale-in));
    transition: opacity .18s ease, transform .18s ease;
}

    .sttm-pop.sh[data-open="true"] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

/* arrow tip */
.sttm-pop[data-open="true"]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: linear-gradient(180deg, color-mix(in oklch, var(--sttm-bg) 94%, transparent), color-mix(in oklch, var(--sttm-bg-2) 94%, transparent));
    border-left: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
    border-top: 1px solid color-mix(in oklch, var(--sttm-border) 100%, transparent);
    transform: rotate(45deg);
    z-index: -1;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sttm-pop.sh,
    .sttm-item,
    .sttm-trigger {
        transition: none !important;
    }
}