.yours-set {
    padding: 25px var(--pad-x) 0;
    background: #fff;
    /* border-bottom: 1px solid #eee; */

    /* ── Tabs sitting on top of the card ───────────────────────── */
    .yours-set-tabs {
        display: flex;
        gap: 2px;
        align-items: flex-end;
        

        .yours-set-tab {
            padding: 8px 16px 10px;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            background-color: #f0f0f0;
            color: #666;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            margin-bottom: -1px;        /* overlap card border so active tab merges in */
            position: relative;

            &:hover { background-color: #e5e5e5; color: #333; }

            &.on {
                background-color: #fafafa;
                color: #333;
                z-index: 1;
            }

            &.new {
                background-color: transparent;
                border-style: dashed;
                border-color: #bbb;
                color: #888;
                border-bottom: 0;

                &:hover { border-color: #777; color: #333; }
            }
        }

        .yours-set-auto-fill {
            margin-left: auto;
            padding: 8px 11px 10px;
            font-size: 0.75rem;
            color: #aaa;
            cursor: pointer;
            user-select: none;
            align-self: flex-end;

            &:hover { color: #444; text-decoration: underline; }
        }

        .yours-set-help {
            align-self: flex-end;
            margin-bottom: 7px;
            margin-left: 8px;
        }
    }

    /* ── Card body holding the 10 tracks ───────────────────────── */
    .yours-set-card {
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 0 8px 8px 8px;
        padding: 14px 16px 12px;
        position: relative;

        .yours-set-notice {
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 0.75rem;
            color: #888;
            padding: 2px 8px;
            border-radius: 10px;
            background-color: #f5f5f5;

            &.fade {
                animation: yours-set-notice-fade 4s ease-out forwards;
                pointer-events: none;
            }
        }
    }

    .yours-set-slots {
        display: grid;
        grid-template-columns: repeat(10, minmax(35px, 1fr));
        gap: 14px;

        /* Query the resizable dashboard-left panel, not the viewport, so the
           2-row layout kicks in when the user drags the divider narrower too. */
        @container city-list (max-width: 750px) {
            grid-template-columns: repeat(5, minmax(35px, 1fr));
        }
    }

    .yours-set-track {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .level-bar {
            height: 4px;
            margin: 0 5px 4px;        /* 10px inset from each side of the tile */
            background: transparent;    /* no rail - fill alone shows the value */

            .fill {
                height: 100%;
                background: #4caf50;    /* green */
                border-radius: 2px;
                transition: width 0.2s ease, background-color 0.2s ease;
            }
        }

        .yours-set-tile {
            aspect-ratio: 1 / 1;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            transition: box-shadow 0.2s ease;

            &.filled {
                border: 1px solid #e5e5e5;

                .thumb {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                &:hover { border-color: #999; }
            }

            &.empty {
                border: 1px dashed #ccc;
                color: #aaa;

                .plus {
                    font-size: 1.625rem;
                    line-height: 1;
                }

                &:hover {
                    border-color: #777;
                    color: #555;
                }
            }
        }

        .track-label {
            margin-top: 6px;
            font-size: 0.6875rem;
            color: #666;
            text-align: center;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: color 0.2s ease;
        }

        /* Filter-active track: blue glow on the tile, blue level bar, blue label */
        &.on-filter {
            .yours-set-tile { box-shadow: 0 0 4px 2px rgba(76, 111, 255, 0.85); }
            .track-label    { color: #4c6fff; font-weight: 600; }
            .level-bar .fill { background: #4c6fff; }
        }

        /* Briefly applied by YoursSet.flash_track() after add/remove, to draw the
           eye to the slot that just changed. */
        &.just-changed .yours-set-tile {
            animation: yours-set-tile-flash 1.5s ease-out;
        }
    }

    /* ── Tier colours ──────────────────────────────────────────
       Empty and Foundation share a neutral gray. Established → Apex is a
       linear RGB spectrum from that gray into the Apex purple.
         0 (empty)     #585858
         1 Foundation  #585858
         2 Established #615370
         3 Curator     #6a4d88
         4 Treasury    #7248a0
         5 Apex        #7b42b8 */
    &.tier-0 { --tier-bg: #585858; }
    &.tier-1 { --tier-bg: #585858; }
    &.tier-2 { --tier-bg: #615370; }
    &.tier-3 { --tier-bg: #6a4d88; }
    &.tier-4 { --tier-bg: #7248a0; }
    &.tier-5 { --tier-bg: #7b42b8; }

    &:is(.tier-0, .tier-1, .tier-2, .tier-3, .tier-4, .tier-5) {
        .yours-set-tab.on {
            background-color: var(--tier-bg);
            border-color: var(--tier-bg);
            color: #fff;
        }

        .yours-set-card {
            background: var(--tier-bg);
            border-color: var(--tier-bg);
        }

        .yours-set-notice {
            background-color: rgba(255,255,255,0.18);
            color: #fff;
        }

        .yours-set-track {
            .track-label { color: rgba(255,255,255,0.9); }
            .level-bar .fill { background: #fff; }

            .yours-set-tile.empty {
                border-color: rgba(255,255,255,0.55);
                color: rgba(255,255,255,0.8);
                background-color: rgba(255,255,255,0.05);

                &:hover {
                    border-color: #fff;
                    color: #fff;
                }
            }

            /* Filter selection stays high-contrast against the coloured card */
            &.on-filter {
                .yours-set-tile { box-shadow: 0 0 0 2px #fff, 0 0 6px 2px rgba(255,255,255,0.55); }
                .track-label    { color: #fff; font-weight: 700; }
                .level-bar .fill { background: #fff; }
            }
        }
    }

    /* ── Loading skeleton (pre-Sets.List) ──────────────────────── */
    &.loading {
        .yours-set-tab.skeleton-tab {
            width: 110px;
            min-height: 13px;            /* matches .yours-set-tab line-height so height lines up */
            background: var(--tier-bg);  /* merge with card background so the tab reads as active */
            border-color: var(--tier-bg);
            color: transparent;
            z-index: 1;                  /* merge with the card like an active tab, not behind it */
            pointer-events: none;
        }

        .yours-set-track {
            .yours-set-tile {
                border: 1px solid #e5e5e5 !important;
                cursor: default;
                pointer-events: none;
                animation: yours-set-tile-pulse 1.2s ease-in-out infinite;

                .plus { visibility: hidden; }
            }

            .level-bar .fill {
                width: 100% !important;
                background: #e5e5e5;
                animation: yours-set-tile-pulse 1.2s ease-in-out infinite;
            }
        }
    }
}

/* Skeleton pulse for city thumbnails + level bars - stronger contrast than a simple
   opacity fade so the loading state is visible against the light card background. */
@keyframes yours-set-tile-pulse {
    0%, 100% { background-color: #ececec; }
    50%      { background-color: #cfcfcf; }
}

/* Single white halo expanding outwards - fires once on a slot immediately after
   add/remove. Matches the shape of .city-page-action.is-promoted's pulse. */
@keyframes yours-set-tile-flash {
    0%   { box-shadow: 0 0 0 0    rgba(255, 255, 255, 0.85); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

@keyframes yours-set-notice-fade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}