/* Collection search (curator_collection_search.js): a magnifier at the right
   of the filter bar opens a field over the filters. */
.curator-profile-collection-tools { position: relative; }
:is(#curator-you, .curator-profile-editorial) .curator-profile-collection-tools .curator-profile-collection-filters {
    padding-right: 44px;
    transition: opacity 0.2s ease;
}
.curator-profile-collection-tools.is-open .curator-profile-collection-filters {
    opacity: 0;
    pointer-events: none;
}

.curator-profile-collection-search {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 40px;
    background: var(--curator-paper, #f1efe9);
    transition: width 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.curator-profile-collection-tools.is-open .curator-profile-collection-search { width: 100%; }

.curator-profile-collection-search input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--you-ink, #3f3c39) 6%, transparent);
    color: var(--you-ink, #3f3c39);
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font: 400 16px/1.2 var(--rh-sans);
    letter-spacing: -0.02em;
    opacity: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 0.2s ease 0.08s, padding 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.curator-profile-collection-search input::placeholder { color: var(--you-muted, #77716a); opacity: 1; }
.curator-profile-collection-search input::-webkit-search-cancel-button,
.curator-profile-collection-search input::-webkit-search-decoration { -webkit-appearance: none; }
.curator-profile-collection-search input:focus { outline: none; }
.curator-profile-collection-tools.is-open .curator-profile-collection-search input {
    padding: 0 14px;
    opacity: 1;
    pointer-events: auto;
}

.curator-profile-collection-search-toggle {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: none;
    color: color-mix(in srgb, var(--you-ink, #3f3c39) 72%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.curator-profile-collection-search-toggle svg {
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.curator-profile-collection-search-toggle .is-close { opacity: 0; transform: rotate(-45deg) scale(0.8); }
.curator-profile-collection-tools.is-open .curator-profile-collection-search-toggle .is-search { opacity: 0; transform: scale(0.8); }
.curator-profile-collection-tools.is-open .curator-profile-collection-search-toggle .is-close { opacity: 1; transform: none; }
.curator-profile-collection-search-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* On phones, search is offered once the sheet is docked, so the field
   always opens clear of the keyboard. */
.curator-profile-sheet-enabled .curator-profile-collection-search-toggle {
    transition: opacity 400ms ease, visibility 400ms;
}
.curator-profile-sheet-enabled:not(.is-profile-sheet-docked) .curator-profile-collection-tools:not(.is-open) .curator-profile-collection-search-toggle {
    opacity: 0;
    visibility: hidden;
}

/* Only in Collection, and faded with the filters while views change. */
.curator-profile-content:is(.is-chronology-view, .is-discography-view) .curator-profile-collection-tools { display: none; }
.curator-profile-content.is-view-changing .curator-profile-collection-tools { opacity: 0; }

/* While searching, the results stand in for the collection and its filters. */
/* Important: the profile's own section grid outranks a plain class. */
[data-curator-collection-stage]:not(.is-searching) > .curator-profile-search-results { display: none !important; }
[data-curator-collection-stage].is-searching > :not(.curator-profile-search-results):not(template) { display: none !important; }
.curator-profile-search-results > section[hidden],
.curator-profile-search-results li[hidden] { display: none !important; }
.curator-profile-search-empty {
    margin: 1.5rem 0 0;
    color: var(--you-muted, #77716a);
    font: 400 0.95rem/1.4 var(--rh-sans);
}

@media (prefers-reduced-motion: reduce) {
    .curator-profile-collection-search,
    .curator-profile-collection-search input,
    .curator-profile-collection-search-toggle svg,
    .curator-profile-sheet-enabled .curator-profile-collection-search-toggle,
    :is(#curator-you, .curator-profile-editorial) .curator-profile-collection-tools .curator-profile-collection-filters { transition: none; }
}