.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;
}

// Canonical palette swatch gradient. Single source of truth for every place
// a palette is rendered as a 4-band swatch (applet thumb, billnote thumb,
// billnote modal options). The palette-* class on the element supplies the
// --priUser/--secUser/--terUser/--quiUser vars; this mixin paints them.
@mixin palette-swatch-bg {
    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);
}

.swatch {
    position: relative;
    width: 7rem;
    height: 7rem;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    @include palette-swatch-bg;

    &.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` deliberately NOT listed here: the shared `.token-tooltip h4
    // { display: flex }` rule in _tooltips.scss must win so wallet-shop's
    // `<h4 class="tt-title"><span>name</span><span class="tt-price">$X</span></h4>`
    // can `justify-content: space-between` + `margin-left: auto` the price to
    // the right edge. ID-scoped `display: block` here used to silently clobber
    // that (1,1,0 beats 0,1,1) — bug caught 2026-05-22. The palette tooltip's
    // h4 has only a text child, so leaving it flex is visually identical for
    // palette while unblocking the wallet-shop layout.
    .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;
    }
}
