.palette {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
}

.palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.swatch {
    position: relative;
    width: 7rem;
    height: 7rem;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    background: linear-gradient(
        to bottom,
        rgba(var(--secUser), 1) 0%,
        rgba(var(--secUser), 1) 30%,
        rgba(var(--priUser), 1) 30%,
        rgba(var(--priUser), 1) 70%,
        rgba(var(--terUser), 1) 70%,
        rgba(var(--terUser), 1) 85%,
        rgba(var(--quiUser), 1) 85%,
        rgba(var(--quiUser), 1) 100%
    );
    border: 0.15rem solid rgba(var(--secUser), 0.5);

    &.active {
        border: 0.2rem solid rgba(var(--ninUser), 1);
        box-shadow: 0 0 0.5rem rgba(var(--ninUser), 0.5);
    }

    &.locked {
        opacity: 0.5;
        filter: saturate(0.4);
    }

    &.previewing {
        border: 0.2rem solid rgba(var(--ninUser), 1);
        box-shadow: 0 0 0.75rem rgba(var(--ninUser), 0.6);

        &.locked {
            opacity: 1;
            filter: none;
        }
    }

    // OK / × centred inside swatch — hidden until previewing
    .palette-ok {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        margin: 0;
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        min-width: 0;
        line-height: 1;
    }
}


// ── Palette tooltip portal ────────────────────────────────────────────────────

#id_tooltip_portal {
    // Override .tt { display: none } — portal content is shown/hidden by JS
    .tt-title,
    .tt-description,
    .tt-date,
    .tt-lock {
        display: block;
    }

    .tt-title {
        color: rgba(var(--terUser), 1);
        font-size: 0.95rem;
        margin: 0 0 0.1rem;
        font-weight: bold;
    }

    .tt-lock {
        margin: 0.75rem 0 0.1rem;
        font-size: 0.8rem;
        opacity: 0.85;

        i { margin-right: 0.25rem; }
    }

    .tt-date {
        font-size: 0.75rem !important;
        font-variant-caps: small-caps;
    }
}