@layer components {

    .toolbar {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-2) var(--s-6);
        min-height: 60px;
        margin-block: var(--s-5) var(--s-6);
        border-block: 1px solid var(--c-line);
    }

    .toolbar__count {
        font-size: var(--t-sm);
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

    .toolbar__filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-1) var(--s-5);
        margin-right: auto;
    }

    .toolbar__sort {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        font-size: var(--t-sm);
    }

    .toolbar__sort-label {
        color: var(--c-muted);
    }

    .toolbar__select {
        min-height: 44px;
        padding-right: var(--s-5);
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 14px no-repeat;
        font-weight: 500;
        cursor: pointer;
        appearance: none;
    }

    .toolbar__active {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-2) var(--s-4);
        margin-top: calc(var(--s-3) * -1);
        margin-bottom: var(--s-6);
    }

    .toolbar__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2);
    }

    .toolbar__clear {
        min-height: 32px;
        font-size: var(--t-sm);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    @media (max-width: 767px) {
        .toolbar {
            gap: 0 var(--s-4);
            padding-block: var(--s-1);
        }

        .toolbar__count {
            order: 2;
            margin-right: auto;
        }

        .toolbar__filters {
            order: 1;
            width: 100%;
            margin-right: 0;
            border-bottom: 1px solid var(--c-line);
        }

        .toolbar__sort {
            order: 3;
        }

        .toolbar__sort-label {
            display: none;
        }
    }

}

@layer components {

    .filter {
        position: relative;
    }

    .filter__summary {
        display: flex;
        align-items: center;
        gap: var(--s-1);
        min-height: 44px;
        font-size: var(--t-sm);
        font-weight: 500;
        user-select: none;
    }

    .filter[open] > .filter__summary .icon {
        transform: rotate(180deg);
    }

    .filter__panel {
        position: absolute;
        top: calc(100% + 4px);
        left: calc(var(--s-4) * -1);
        z-index: var(--z-sticky);
        display: grid;
        gap: 2px;
        min-width: 250px;
        padding: var(--s-3) var(--s-4);
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background: var(--c-surface);
        box-shadow: var(--shadow-pop);
    }

    @media (max-width: 767px) {
        .filter {
            position: static;
        }

        .filter__panel {
            left: 0;
            right: 0;
        }
    }

}

@layer components {

    .check {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        min-height: 40px;
        font-size: var(--t-sm);
        cursor: pointer;
    }

    .check__input {
        position: absolute;
        opacity: 0;
    }

    .check__box {
        position: relative;
        flex: none;
        width: 18px;
        height: 18px;
        border: 1px solid var(--c-line-strong);
        border-radius: 3px;
        transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    }

    .check__box::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid var(--c-page);
        border-width: 0 1.5px 1.5px 0;
        opacity: 0;
        transform: rotate(45deg);
    }

    .check__input:checked + .check__box {
        border-color: var(--c-ink);
        background: var(--c-ink);
    }

    .check__input:checked + .check__box::after {
        opacity: 1;
    }

    .check__input:focus-visible + .check__box {
        outline: 2px solid var(--c-ink);
        outline-offset: 3px;
    }

    .check__n {
        margin-left: auto;
        font-size: var(--t-xs);
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

}

@layer components {

    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        min-height: 32px;
        padding-inline: var(--s-3) var(--s-2);
        border-radius: var(--r-pill);
        background: var(--c-tile);
        font-size: var(--t-xs);
        transition: background-color var(--dur-1) var(--ease);
    }

    .chip:hover {
        background: var(--c-line-strong);
    }

    .chip .icon {
        font-size: 11px;
    }

}

@layer components {

    .collection {
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-7) var(--gutter) 0;
    }

    .collection__lines {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .collection__empty {
        display: grid;
        justify-items: center;
        gap: var(--s-4);
        padding-block: var(--s-9);
        text-align: center;
    }

    .collection__empty-title {
        font-size: var(--t-xl);
    }

    .about-line {
        margin-top: var(--s-10);
        padding: var(--s-9) var(--gutter);
        background: var(--c-tile);
    }

    .about-line__inner {
        display: grid;
        gap: var(--s-4);
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }

    .about-line__title {
        font-size: var(--t-2xl);
    }

    .about-line__text {
        font-size: var(--t-md);
        color: var(--c-muted);
    }

}