/* ============================================================================
   KOSIS — assets/css/kosis-repertoire-filters.css
   ----------------------------------------------------------------------------
   v1.0 · Session 24 ("Tier 1")

   The song filter bar that sits directly above the "All songs" card on the
   Set lists & repertoire page: faceted client-side filters (sheet music /
   audio / added-by) plus a sort control. Behaviour lives in kosis.js §14;
   this file is presentation only. Scoped entirely under .ks-song-filters so
   it cannot affect anything else. Loaded by pages/setlists.php after the page
   stylesheets, so it inherits the brand tokens (--ks-navy, --ks-gold, etc.).
   ========================================================================= */

.ks-song-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(31, 41, 82, 0.12);   /* navy @ 12% */
    border-radius: 10px;
}

.ks-song-filters__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    min-width: 0;
}

.ks-song-filters__label {
    font-weight: 600;
    color: var(--ks-navy, #1F2952);
    letter-spacing: 0.01em;
}

.ks-song-filters__field select {
    font: inherit;
    padding: 7px 9px;
    border: 1px solid rgba(31, 41, 82, 0.22);
    border-radius: 7px;
    background: #fff;
    color: var(--ks-navy, #1F2952);
    min-width: 9.5rem;
    cursor: pointer;
}
.ks-song-filters__field select:focus {
    outline: 2px solid var(--ks-gold, #D4A955);
    outline-offset: 1px;
}

.ks-song-filters__reset {
    margin-left: auto;
    align-self: flex-end;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ks-navy, #1F2952);
    background: transparent;
    border: 1px solid rgba(31, 41, 82, 0.22);
    border-radius: 7px;
    padding: 7px 14px;
    cursor: pointer;
}
.ks-song-filters__reset:hover {
    background: var(--ks-gold, #D4A955);
    border-color: var(--ks-gold, #D4A955);
    color: #fff;
}

/* Phones: stack the facets full-width so each is easy to tap; the reset goes
   full-width at the bottom rather than floating to the right. */
@media (max-width: 640px) {
    .ks-song-filters { gap: 10px; }
    .ks-song-filters__field { flex: 1 1 100%; }
    .ks-song-filters__field select { width: 100%; min-width: 0; }
    .ks-song-filters__reset { margin-left: 0; width: 100%; }
}