/*
Theme Name:  SingTracks
Theme URI:   https://singtracks.com
Description: Reference catalog theme for SingTracks.com – vocal learning tracks directory.
Version:     1.1.0
Author:      Scott Anderson
License:     GPL-2.0+
Text Domain: singtracks
*/

:root {
    --c-bg:          #F7F6F2;
    --c-surface:     #FFFFFF;
    --c-ink:         #1A1D2E;
    --c-ink-light:   #4A4E6B;
    --c-accent:      #B5873A;
    --c-accent-dark: #8C6420;
    --c-border:      #E2E0D8;
    --c-hover-row:   #F0EDE4;
    --c-tag-bg:      #EDE9DE;

    --ff-display: 'Libre Baskerville', Georgia, serif;
    --ff-ui:      'Inter', system-ui, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 3px rgba(26,29,46,.08);
    --shadow-md: 0 4px 16px rgba(26,29,46,.10);

    --sidebar-w: 260px;
    --header-h:  64px;
    --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-ui);
    font-size: var(--fs-base);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.st-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--c-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.st-header__logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.st-header__logo-mark {
    width: 36px;
    height: 36px;
    background: var(--c-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-header__logo-mark svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.st-header__site-name {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}

.st-header__site-name span {
    color: var(--c-accent);
}

.st-header__nav {
    display: flex;
    gap: 1.75rem;
    list-style: none;
}

.st-header__nav a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: rgba(255,255,255,.75);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition);
}

.st-header__nav a:hover,
.st-header__nav a.active { color: var(--c-accent); }

.st-header__tagline {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.4);
    font-style: italic;
}

.st-hero {
    background: var(--c-ink);
    padding: 2.5rem 2rem 2rem;
    border-bottom: 3px solid var(--c-accent);
}

.st-hero__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.st-hero__text h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.st-hero__text h1 em {
    font-style: normal;
    color: var(--c-accent);
}

.st-hero__text p {
    margin-top: .5rem;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.55);
}

.st-hero__stat {
    text-align: right;
}

.st-hero__stat .number {
    font-family: var(--ff-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--c-accent);
    line-height: 1;
}

.st-hero__stat .label {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.st-layout {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 0;
    min-height: calc(100vh - var(--header-h));
    align-items: start;
}

.st-sidebar {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--c-border);
    background: var(--c-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

.st-sidebar::-webkit-scrollbar { width: 4px; }
.st-sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.st-sidebar__search {
    position: relative;
    margin-bottom: 1.25rem;
}

.st-sidebar__search input {
    width: 100%;
    /* #5 fix: removed the leftover 2.1rem left padding that reserved space
       for a search icon this layout never renders, which made the placeholder
       look indented. */
    padding: .55rem .75rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    background: var(--c-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

.st-sidebar__search input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(181,135,58,.15);
}

.st-sidebar__search-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--c-ink-light);
    pointer-events: none;
}

.st-clear-all {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: .4rem;
    background: none;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    color: var(--c-ink-light);
    cursor: pointer;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: all var(--transition);
}

.st-clear-all:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.st-filter {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    margin-bottom: .65rem;
    overflow: hidden;
}

.st-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .85rem;
    background: var(--c-bg);
    cursor: pointer;
    user-select: none;
    gap: .5rem;
}

.st-filter__header:hover { background: var(--c-tag-bg); }

.st-filter__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: .01em;
}

.st-filter__badge {
    font-size: var(--fs-xs);
    background: var(--c-accent);
    color: #fff;
    border-radius: 10px;
    padding: 0 .4rem;
    line-height: 1.6;
    display: none;
}

.st-filter__badge.visible { display: inline; }

.st-filter__chevron {
    width: 14px;
    height: 14px;
    color: var(--c-ink-light);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.st-filter.open .st-filter__chevron { transform: rotate(180deg); }

.st-filter__body {
    display: none;
    padding: .5rem .5rem .6rem;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.st-filter.open .st-filter__body { display: block; }

.st-filter__option {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.st-filter__option:hover { background: var(--c-tag-bg); }

.st-filter__option input[type="checkbox"] {
    accent-color: var(--c-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.st-filter__option label {
    font-size: var(--fs-xs);
    color: var(--c-ink);
    cursor: pointer;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-filter__search {
    width: 100%;
    padding: .3rem .5rem;
    margin-bottom: .4rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    outline: none;
}

.st-filter__search:focus { border-color: var(--c-accent); }

.st-main {
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.st-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.st-results-bar__count {
    font-size: var(--fs-sm);
    color: var(--c-ink-light);
}

.st-results-bar__count strong {
    color: var(--c-ink);
    font-weight: 600;
}

.st-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    background: var(--c-tag-bg);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: var(--fs-xs);
    color: var(--c-ink);
}

.st-chip button {
    background: none;
    border: none;
    color: var(--c-ink-light);
    cursor: pointer;
    font-size: .7rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

.st-chip button:hover { color: var(--c-ink); }

.st-table-wrap {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}

.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.st-table thead {
    background: var(--c-ink);
    /* NOTE: position:sticky intentionally removed here. Sticky on a whole
       <thead> isn't reliably supported in Chromium. Sticking is handled
       entirely at the <th> level in the catalog module below. */
}

.st-table thead th {
    padding: .75rem 1rem;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: rgba(255,255,255,.8);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition);
}

.st-table thead th:hover { color: var(--c-accent); }

.st-table thead th.sorted { color: var(--c-accent); }

.st-table thead th .sort-icon {
    display: inline-block;
    margin-left: .25rem;
    opacity: .4;
    font-size: .65rem;
}

.st-table thead th.sorted .sort-icon { opacity: 1; }

.st-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--transition);
}

.st-table tbody tr:last-child { border-bottom: none; }
.st-table tbody tr:hover { background: var(--c-hover-row); }

.st-table tbody td {
    padding: .6rem 1rem;
    vertical-align: middle;
    color: var(--c-ink);
    line-height: 1.4;
}

.st-table tbody td:first-child {
    font-weight: 500;
}

.st-table a {
    color: var(--c-accent);
    text-decoration: none;
}

.st-table a:hover {
    text-decoration: underline;
    color: var(--c-accent-dark);
}

.st-voicing-pill {
    display: inline-block;
    padding: .1rem .5rem;
    background: var(--c-tag-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: var(--fs-xs);
    color: var(--c-ink-light);
    font-weight: 500;
    letter-spacing: .03em;
}

.st-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--c-ink-light);
}

.st-empty svg {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--c-border);
}

.st-empty h3 {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--c-ink);
    margin-bottom: .35rem;
}

.st-page-hero {
    background: var(--c-ink);
    padding: 2rem 2rem 1.75rem;
    border-bottom: 3px solid var(--c-accent);
}

.st-page-hero__inner {
    max-width: 900px;
    margin: 0 auto;
}

.st-page-hero h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    color: #fff;
    margin-bottom: .3rem;
}

.st-page-hero p {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.5);
}

.st-directory {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.st-directory__search {
    position: relative;
    margin-bottom: 1.5rem;
}

.st-directory__search input {
    width: 100%;
    padding: .65rem .85rem .65rem 2.25rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    outline: none;
    background: var(--c-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.st-directory__search input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(181,135,58,.15);
}

.st-directory__search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-ink-light);
    width: 16px;
    height: 16px;
}

.st-alpha-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1.5rem;
}

.st-alpha-jump a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-light);
    text-decoration: none;
    transition: all var(--transition);
}

.st-alpha-jump a:hover, .st-alpha-jump a.has-entries {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.st-dir-section {
    margin-bottom: 1.5rem;
}

.st-dir-section__letter {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-accent);
    border-bottom: 2px solid var(--c-border);
    padding-bottom: .3rem;
    margin-bottom: .75rem;
}

.st-dir-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.st-dir-table td {
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}

.st-dir-table tr:last-child td { border-bottom: none; }
.st-dir-table tr:hover td { background: var(--c-hover-row); }

.st-dir-table td:first-child { font-weight: 500; width: 50%; }
.st-dir-table td:last-child { color: var(--c-ink-light); }

.st-contact {
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.st-contact h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    margin-bottom: .5rem;
}

.st-contact p.intro {
    color: var(--c-ink-light);
    margin-bottom: 1.75rem;
    font-size: var(--fs-sm);
}

.st-form-group {
    margin-bottom: 1.1rem;
}

.st-form-group label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: .35rem;
    color: var(--c-ink);
}

.st-form-group input,
.st-form-group textarea,
.st-form-group select {
    width: 100%;
    padding: .6rem .85rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-base);
    color: var(--c-ink);
    background: var(--c-surface);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.st-form-group input:focus,
.st-form-group textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(181,135,58,.15);
}

.st-form-group textarea { resize: vertical; min-height: 130px; }

.st-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    background: var(--c-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}

.st-btn:hover { background: var(--c-accent-dark); color: #fff; transform: translateY(-1px); }
.st-btn:active { transform: translateY(0); }

.st-footer {
    background: var(--c-ink);
    color: rgba(255,255,255,.45);
    text-align: center;
    padding: 1.5rem;
    font-size: var(--fs-xs);
    letter-spacing: .03em;
    margin-top: 3rem;
}

.st-footer a { color: var(--c-accent); }

@media (max-width: 900px) {
    .st-layout {
        grid-template-columns: 1fr;
    }

    .st-sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    .st-header__tagline { display: none; }

    .st-table td:nth-child(4),
    .st-table th:nth-child(4) { display: none; }
}

@media (max-width: 600px) {
    .st-header { padding: 0 1rem; }
    .st-hero { padding: 1.5rem 1rem 1.25rem; }
    .st-hero__text h1 { font-size: var(--fs-2xl); }
    .st-hero__stat .number { font-size: 2rem; }
    .st-header__nav { gap: 1rem; }
    .st-header__nav a { font-size: .7rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG MODULE
   Merged from the former catalog-voicing.css. Every --color-* reference in
   that file pointed at variables that were never defined, so those rules fell
   back to hard-coded navy/blue defaults instead of the gold theme. They are
   re-expressed here against the real --c-* tokens. This section loads after
   the base above, so for shared selectors it wins — same cascade order the two
   separate files used to have, just with correct colors and the layout fixes
   folded in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Voicing filter: category groups with parent-child indentation ── */
.st-voicing-cat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.25rem;
    background: var(--c-tag-bg);
    border-radius: 4px;
}

.st-voicing-cat-cb {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--c-accent);
    flex-shrink: 0;
}

.st-voicing-cat-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-light);
    cursor: pointer;
}

.st-voicing-children {
    padding-left: 1.4rem;
    border-left: 2px solid var(--c-border);
    margin-left: 0.5rem;
    margin-bottom: 0.25rem;
}

.st-voicing-child {
    padding: 0.2rem 0.5rem;
}

.st-voicing-cat-cb:indeterminate { opacity: 0.7; }

/* ── Accordion open/close arrow ── */
.st-filter__arrow {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--c-ink-light);
    transition: transform 0.15s ease;
    pointer-events: none;
}

/* ── Skeleton loading rows ── */
.st-skeleton {
    height: 1rem;
    background: linear-gradient(90deg, var(--c-border) 25%, var(--c-tag-bg) 50%, var(--c-border) 75%);
    background-size: 200% 100%;
    animation: st-shimmer 1.2s infinite;
    border-radius: 4px;
}

@keyframes st-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── "As done by" secondary line in title cell ── */
.st-as-done-by {
    display: block;
    font-size: 0.78rem;
    color: var(--c-ink-light);
    font-style: italic;
}

/* ── Inline arranger filter links in table ── */
.st-inline-filter {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--c-ink-light);
}
.st-inline-filter:hover {
    color: var(--c-accent);
    border-bottom-style: solid;
}

/* ── Get Tracks button ── */
.st-get-btn {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: var(--c-accent);
    color: #fff !important;
    border-radius: 4px;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.st-get-btn:hover { background: var(--c-accent-dark); }

/* When one arrangement has several sources, each source gets its own labelled
   button stacked in the cell, so the rows are visibly distinguishable instead
   of every button just reading "Get Tracks". */
.st-get-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
}
.st-get-cell .st-get-btn {
    text-align: center;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-get-source-label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-light);
    margin-bottom: 0.15rem;
}

/* ── Active filter chips ── */
.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: var(--c-tag-bg);
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--c-ink);
}
.st-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-accent);
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
}

/* ── Badge on filter header ── */
.st-badge--visible {
    display: inline-block !important;
    background: var(--c-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    min-width: 1.2em;
    padding: 0 0.3em;
    text-align: center;
    line-height: 1.5;
    margin-left: 0.3rem;
}

/* ── Arranger autocomplete ── */
.st-arranger-wrap { position: relative; }

#arranger-autocomplete {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--c-surface);
    color: var(--c-ink);
    box-sizing: border-box;
}

#arranger-autocomplete:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(181,135,58,.15);
}

#arranger-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 220px;
    overflow-y: auto;
}

#arranger-suggestions li {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#arranger-suggestions li:hover,
#arranger-suggestions li.st-ac-active {
    background: var(--c-tag-bg);
    color: var(--c-accent);
}

/* ── #4 fix: the arranger dropdown must escape both its own body AND the outer
   .st-filter box (which has overflow:hidden for the rounded-corner accordion).
   We keep overflow:visible on both so the suggestions render, but DO NOT zero
   the body's bottom padding — that zero padding was crowding the input against
   the bottom edge of the box. ── */
#filter-arranger.st-filter { overflow: visible; }
#filter-arranger .st-filter__body { overflow: visible; }

/* ── #7 fix: give the active chips room to breathe. The chips row no longer
   sits flush against the search box above or the Clear-all button below. ── */
.st-chips-row {
    position: relative;
    z-index: 10;
    margin: 0.25rem 0 1rem;
}
#st-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
#st-chips:not(:empty) { margin-bottom: 0.6rem; }

/* ── Two-column catalog layout ── */
.st-catalog-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
}

.st-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}

.st-main {
    flex: 1;
    min-width: 0;
}

.st-count {
    font-size: var(--fs-sm);
    color: var(--c-ink-light);
}

/* ── #3 fix: collapse the filter "double box". The outer .st-filter is the
   single bordered/rounded card; the header sits flush inside it with no border,
   radius, or bottom margin of its own — so a collapsed filter no longer shows a
   sliver of the outer box peeking out below the header. ── */
.st-filter { background: var(--c-surface); }

.st-filter__header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--c-surface);
    border: none;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    color: var(--c-ink);
}
.st-filter__header:hover { background: var(--c-tag-bg); }

.st-filter__body {
    display: none;
    padding: 0.75rem 0.5rem;
}
.st-filter.is-open .st-filter__body { display: block; }

.st-table-wrap {
    /* ── #8 fix: the old overflow-x:auto here silently promoted overflow-y to
       auto too, turning this wrapper into its own scroll container — which is
       why the sticky header drifted away instead of pinning. Let the page be
       the scroll context; only enable horizontal scroll on narrow screens. ── */
    overflow: visible;
}

.st-table {
    width: 100%;
    /* collapse + position:sticky causes a header-overlap bug; use separate. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.st-table th,
.st-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

/* ── #8 fix: sticky header pinned just below the site nav (header height) so it
   stays visible while scrolling and never overlaps the first data row. ── */
.st-table thead th {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    background: var(--c-ink);
}

/* When logged in, WordPress's admin bar adds a fixed strip at the very top.
   Offset the sticky header (and the site nav) so they aren't hidden beneath it.
   Public visitors never see the admin bar, so these rules don't apply to them. */
body.admin-bar .st-header { top: 32px; }
body.admin-bar .st-table thead th { top: calc(var(--header-h) + 32px); }
@media screen and (max-width: 782px) {
    body.admin-bar .st-header { top: 46px; }
    body.admin-bar .st-table thead th { top: calc(var(--header-h) + 46px); }
}

.st-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.st-pagination {
    display: flex;
    gap: 0.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.st-pagination button {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--c-ink);
}

.st-pagination button.active {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

.st-pagination__ellipsis {
    padding: 0.3rem 0.2rem;
    color: var(--c-ink-light);
}

/* ── Arrangers directory: dense single-column list ── */
.st-arr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.st-arr-sort {
    display: inline-flex;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.st-arr-sort button {
    background: var(--c-surface);
    border: none;
    padding: 0.4rem 0.85rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    color: var(--c-ink-light);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.st-arr-sort button + button { border-left: 1px solid var(--c-border); }
.st-arr-sort button:hover { color: var(--c-accent); }
.st-arr-sort button.active { background: var(--c-accent); color: #fff; }

.st-arr-meta {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--c-ink-light);
}

.st-arr-section { margin-bottom: 1.25rem; }

.st-arr-section__letter {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-accent);
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0.2rem;
    margin-bottom: 0.35rem;
}

.st-arr-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.18rem 0.35rem;
    border-radius: var(--radius-sm);
}
.st-arr-row:hover { background: var(--c-hover-row); }

.st-arr-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-arr-name a { color: var(--c-ink); text-decoration: none; }
.st-arr-name a:hover { color: var(--c-accent); text-decoration: underline; }

.st-arr-count {
    font-size: var(--fs-xs);
    color: var(--c-ink-light);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.st-arr-empty {
    color: var(--c-ink-light);
    padding: 1rem 0;
}

@media (max-width: 768px) {
    .st-catalog-layout { flex-direction: column; }
    .st-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .st-table-wrap { overflow-x: auto; }
}

/* ============================================================================
   SingTracks — Producer Pages (/p/{code})
   Append this block to the theme's style.css (uses the existing :root vars).
   ============================================================================ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.st-producer-hero {
  background: var(--c-ink);
  color: #fff;
}
.st-producer-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.st-producer-hero__photo,
.st-producer-hero__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.25);
}
.st-producer-hero__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
}
.st-producer-hero__body { flex: 1; min-width: 240px; }
.st-producer-hero__name {
  font-family: var(--ff-display);
  font-size: var(--fs-3xl);
  margin: 0;
  color: #fff;
  line-height: 1.1;
}
.st-producer-hero__sub {
  margin: .3rem 0 0;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
}
.st-producer-hero__bio {
  margin: .75rem 0 0;
  max-width: 62ch;
  color: rgba(255,255,255,.85);
  font-size: var(--fs-sm);
}
.st-producer-hero__bio p { margin: 0 0 .5rem; }
.st-producer-hero__actions {
  margin-top: 1.1rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}
.st-producer-email {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--c-accent);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  transition: background var(--transition);
}
.st-producer-email:hover { background: var(--c-accent-dark); }
.st-producer-link {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  font-size: var(--fs-xs);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: .35rem .7rem;
  transition: border-color var(--transition);
}
.st-producer-link:hover { border-color: var(--c-accent); }

/* ── Body panel ───────────────────────────────────────────────────────────── */
.st-producer-wrap { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.st-producer-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.st-producer-toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  border-bottom: 1px solid var(--c-border);
}
#stp-q {
  flex: 1;
  min-width: 220px;
  padding: .55rem .8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  background: var(--c-bg);
  color: var(--c-ink);
}
#stp-q:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-tag-bg); }
.st-producer-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.st-producer-chip {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink-light);
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-ui);
  transition: all var(--transition);
}
.st-producer-chip.is-on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.st-producer-count { color: var(--c-ink-light); font-size: var(--fs-xs); white-space: nowrap; margin-left: auto; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.st-producer-tablewrap { overflow-x: auto; }
.st-producer-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.st-producer-table thead th {
  position: sticky; top: 0;
  background: var(--c-bg);
  text-align: left;
  padding: .6rem .8rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-ink-light);
  border-bottom: 1px solid var(--c-border);
}
.st-producer-table tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.st-producer-table tbody tr:hover { background: var(--c-hover-row); }
.stp-title { font-weight: 600; color: var(--c-ink); }
.stp-sub2 { display: block; font-size: var(--fs-xs); color: var(--c-ink-light); font-style: italic; }
.stp-badge {
  display: inline-block; margin-left: .4rem; vertical-align: middle;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .4rem; border-radius: 999px;
  background: var(--c-tag-bg); color: var(--c-accent-dark);
}
.st-producer-get {
  display: inline-block;
  background: var(--c-accent);
  color: #fff !important;
  text-decoration: none;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  white-space: nowrap;
  transition: background var(--transition);
}
.st-producer-get:hover { background: var(--c-accent-dark); }
.stp-muted { color: var(--c-ink-light); }
.st-producer-loading { text-align: center; color: var(--c-ink-light); padding: 2rem 1rem; font-style: italic; }
.st-producer-foot { color: var(--c-ink-light); font-size: var(--fs-xs); margin: 1rem .25rem 0; }

@media (max-width: 640px) {
  .stp-col-arr, .stp-col-comp { display: none; }
  .st-producer-count { margin-left: 0; }
  .st-producer-hero__inner { padding: 1.5rem 1rem; }
}

/* ── Directory badge for hosted producers (page-producers.php) ─────────────── */
.st-dir-hosted {
  font-size: var(--fs-xs);
  color: var(--c-accent);
  font-weight: 600;
  margin-left: .35rem;
}