/*
 * Skins — what the shell does for any skin. A skin is a design document (OS_TYPES__Skin); the OS's renderer
 * (OsSkinRenderer) writes its values onto the shell's own selectors. Nothing here names a skin: the rules below hold
 * for every one, and read the skin's variables (--skin-*). The brand (the Λ, the rainbow colours) is never restyled.
 */

/* ── Any skin: windows and the composer wear its palette and radii ── */
:root[data-skin] .a-win-frame {
    background: var(--skin-window);
    border-color: var(--skin-border);
    border-radius: var(--skin-r-window);
}
:root[data-skin] .oc-box { border-radius: var(--skin-r-composer); }
:root[data-skin] .rail-item:not(.is-img) { border-radius: var(--skin-r-button); }
:root[data-skin] .uc-user,
:root[data-skin] .ss-pill { border-radius: var(--skin-r-island); }
:root[data-skin] .lh-icon { border-radius: var(--skin-r-card, 14px); }
:root[data-skin] .nx-card { border-radius: var(--skin-r-card, 14px); }

/* ── The app in front: a short bar in its colour above its tile (a design may move, size or swap it) ── */
.rail .rail-dot { display: none; }
@media (min-width: 761px) {
    /* The corner pills are solid unless a design frosts them; the space's mark a solid disc. */
    :root[data-skin] .ss-pill,
    :root[data-skin] .uc-user { backdrop-filter: none; -webkit-backdrop-filter: none; }
    :root[data-skin] .ss-mono { background: hsl(var(--h, 320) 36% 27%); color: #fff; border-color: transparent; }
    :root[data-skin] .rail .rail-item.running::before {
        content: ''; position: absolute; top: -5px; left: 50%; width: 55%; height: 3px; border-radius: 2px;
        transform: translateX(-50%); background: var(--app, var(--skin-accent)); pointer-events: none;
        animation: rail-focus 0.25s cubic-bezier(.2, .8, .2, 1);
    }
    @keyframes rail-focus { from { width: 0; opacity: 0; } }
}

/* ── The OS's decorations' motion (waves under a dock, a star's glint) ── */
@keyframes aos-wave { to { -webkit-mask-position: -384px 0; mask-position: -384px 0; } }
@keyframes aos-glint { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    :root[data-skin] .rail::before, :root[data-skin] .rail::after { animation: none; }
}

/* ── Glass: a skin whose window colour has alpha (#rrggbbaa) in a mode — the shell blurs what is behind it ── */
:root[data-skin-glass="both"] .a-win-frame,
:root[data-skin-glass="dark"]:not([data-theme="light"]) .a-win-frame,
:root[data-skin-glass="light"][data-theme="light"] .a-win-frame {
    backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

/* ── Phones: no bar — the pills and the Apps sheet wear the skin (its text checked against its surface) ── */
@media (max-width: 760px) {
    :root[data-skin] .os-scroll .os-grid .a-win-frame { background: var(--skin-window); }
    :root:is([data-skin-glass="both"], [data-skin-glass="dark"]:not([data-theme="light"]), [data-skin-glass="light"][data-theme="light"]) .os-scroll .os-grid .a-win-frame {
        backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
    }
    :root[data-skin] .rail-sheet {
        background: color-mix(in srgb, var(--skin-surface) 96%, transparent); border-color: var(--skin-border);
        border-radius: var(--skin-r-window, 24px);
    }
    :root[data-skin] .rs-name { color: var(--skin-text2); }
    :root[data-skin] .rs-app.running .rs-name { color: var(--skin-text); }
    :root[data-skin] .rs-app.running .rs-icon::after { background: var(--app, var(--skin-accent)); box-shadow: 0 0 0 2px var(--skin-surface); }
    :root[data-skin] :is(.rail-apps, .rs-get) { border-color: var(--skin-border); background: var(--skin-window); color: var(--skin-text); }
    :root[data-skin] .rail-apps-label { text-transform: var(--skin-title-case, none); letter-spacing: var(--skin-title-spacing, -0.005em); }
    :root[data-skin] :is(.ss-pill, .uc-user) { background: var(--skin-window); border-color: var(--skin-border); }
}