/**
 * Оформление — тема и палитра (app rail dropdown + mobile gc-dropdown sheet)
 */

.gc-appearance-settings-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.gc-appearance-settings-panel > .gc-dropdown-header {
    padding: 0 var(--space-1);
}

.gc-appearance-settings-panel > .gc-dropdown-header + .gc-appearance-settings-tabs {
    margin-top: calc(-1 * var(--space-1));
}

.gc-appearance-settings-tabs.gc-tabs {
    width: 100%;
    min-height: 36px;
}

.gc-appearance-settings-tabs .gc-tab-link {
    font-size: var(--font-size-13);
    padding: var(--space-2) var(--space-1-5);
    gap: var(--space-1-5);
}

.gc-appearance-settings-tabs .gc-tab-link i {
    font-size: var(--font-size-14);
    opacity: 0.85;
}

/**
 * Pixel-art sprites (горизонтальный strip).
 * NVG: процент + `--gc-px-size` (высота) / `--gc-px-ratio`. 8×384×261.
 * Glock: целые CSS-пиксели (`--gc-px-dw` / `--gc-px-dh`), иначе % даёт соседние кадры.
 * Glock sprite: 8×404×288 из Firefly-v2.png (4×2 → горизонтальный strip).
 */
.gc-nvg,
.gc-glock {
    --gc-px-frames: 8;
    --gc-px-size: var(--font-size-14);
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
}

.gc-nvg {
    --gc-px-ratio: 384 / 261;
    width: calc(var(--gc-px-size) * var(--gc-px-ratio));
    height: var(--gc-px-size);
    aspect-ratio: var(--gc-px-ratio);
    background-size: calc(var(--gc-px-frames) * 100%) 100%;
    background-image: url('../assets/nvg-sprite.png');
}

.gc-glock {
    --gc-px-dw: 24px;
    --gc-px-dh: 17px;
    width: var(--gc-px-dw);
    height: var(--gc-px-dh);
    background-size: calc(var(--gc-px-frames) * var(--gc-px-dw)) var(--gc-px-dh);
    background-image: url('../assets/glock-firering-sprite.png');
}

.gc-nvg--play,
.gc-appearance-settings-tabs .gc-tab-link:hover .gc-nvg,
.gc-appearance-settings-tabs .gc-tab-link:focus-visible .gc-nvg {
    animation: gc-px-play 1s steps(8) infinite;
}

.gc-glock--play,
.gc-appearance-settings-tabs .gc-tab-link:hover .gc-glock,
.gc-appearance-settings-tabs .gc-tab-link:focus-visible .gc-glock {
    animation: gc-glock-play 1s steps(8) infinite;
}

/* Boot / pull-refresh: NVG 96px (`space/12 * 2`); Glock — 96×68, ≥992 — 160×114. */
.gc-nvg--brand {
    --gc-px-size: calc((var(--space-12) * 2) * 261 / 384);
}

.gc-glock--brand {
    --gc-px-dw: 96px;
    --gc-px-dh: 68px;
}

html[data-theme="light"] .gc-brand-loader .gc-nvg,
html[data-theme="light"] .gc-pull-refresh .gc-nvg {
    display: none;
}

html:not([data-theme="light"]) .gc-brand-loader .gc-glock,
html:not([data-theme="light"]) .gc-pull-refresh .gc-glock {
    display: none;
}

@keyframes gc-px-play {
    from {
        background-position: 0 0;
    }

    to {
        /* 100% = последний кадр. to = n/(n-1)*100% — на кадр за листом;
           steps(N, end) + infinite его не показывает. */
        background-position: calc(100% * var(--gc-px-frames) / (var(--gc-px-frames) - 1)) 0;
    }
}

@keyframes gc-glock-play {
    from {
        background-position: 0 0;
    }

    to {
        background-position: calc(var(--gc-px-frames) * var(--gc-px-dw) * -1) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-nvg,
    .gc-glock,
    .gc-nvg--play,
    .gc-glock--play,
    .gc-appearance-settings-tabs .gc-tab-link:hover .gc-nvg,
    .gc-appearance-settings-tabs .gc-tab-link:focus-visible .gc-nvg,
    .gc-appearance-settings-tabs .gc-tab-link:hover .gc-glock,
    .gc-appearance-settings-tabs .gc-tab-link:focus-visible .gc-glock {
        animation: none;
        background-position: 0 0;
    }
}

.gc-palette-swatch {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--border-default) 65%, transparent);
    flex-shrink: 0;
    box-sizing: border-box;
    /* Light: page (100) → mid (500) */
    --gc-swatch-warm-a: #F3F2EF;
    --gc-swatch-warm-b: #928F88;
    --gc-swatch-neutral-a: #F0EFEF;
    --gc-swatch-neutral-b: #908E89;
}

html[data-theme="dark"] .gc-palette-swatch {
    --gc-swatch-warm-a: #CCC9C5;
    --gc-swatch-warm-b: #716E66;
    --gc-swatch-neutral-a: #CFCECE;
    --gc-swatch-neutral-b: #6F6D66;
}

.gc-palette-swatch--warm {
    background: linear-gradient(135deg, var(--gc-swatch-warm-a) 0%, var(--gc-swatch-warm-b) 100%);
}

.gc-palette-swatch--neutral {
    background: linear-gradient(135deg, var(--gc-swatch-neutral-a) 0%, var(--gc-swatch-neutral-b) 100%);
}

/* Desktop app rail */
@media (min-width: 992px) {
    .gc-glock {
        --gc-px-dw: 32px;
        --gc-px-dh: 23px;
    }

    .gc-glock--brand {
        --gc-px-dw: 160px;
        --gc-px-dh: 114px;
    }

    .gc-app-rail-icon-rail-appearance .gc-dropdown-menu.gc-app-rail-settings-menu {
        width: var(--layout-app-rail-menu-width);
        min-width: var(--layout-app-rail-menu-width);
        max-width: var(--layout-app-rail-menu-width);
        padding: 0;
        box-sizing: border-box;
    }

    .gc-app-rail-settings-menu > li {
        margin: 0;
        padding: 0;
    }

    .gc-app-rail-settings-menu .gc-appearance-settings-panel {
        padding: var(--space-2);
        box-sizing: border-box;
    }
}

/* Mobile sheet (gc-dropdown ≤768px) */
@media (max-width: 768px) {
    .gc-appearance-settings-menu .gc-appearance-settings-menu__intro {
        list-style: none;
        margin: 0;
        padding: var(--space-1) var(--space-3) 0;
    }

    .gc-appearance-settings-menu__title {
        margin: 0;
        font-size: var(--font-size-15);
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-primary);
        text-align: center;
    }

    .gc-appearance-settings-menu__body {
        list-style: none;
        margin: 0;
        padding: var(--space-3) var(--space-2) var(--space-1);
    }

    .gc-appearance-settings-menu .gc-appearance-settings-panel {
        gap: var(--space-3);
    }

    .gc-appearance-settings-menu .gc-appearance-settings-tabs .gc-tab-link {
        font-size: var(--font-size-14);
        padding: var(--space-2) var(--space-3);
    }
}