.list-sort-heading {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: -.35rem 0 -.35rem -.5rem;
    padding: .42rem .5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    border-radius: .48rem;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.list-sort-heading::after {
    content: "↕";
    color: var(--ink-soft);
    font-size: .82em;
    opacity: 0;
    transition: opacity .15s ease;
}

.list-sort-heading:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.list-sort-heading:hover::after,
.list-sort-heading:focus-visible::after { opacity: .7; }
th[aria-sort="ascending"] .list-sort-heading,
th[aria-sort="descending"] .list-sort-heading { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, transparent); }
th[aria-sort="ascending"] .list-sort-heading::after { content: "↑"; color: var(--brand-ink); opacity: 1; }
th[aria-sort="descending"] .list-sort-heading::after { content: "↓"; color: var(--brand-ink); opacity: 1; }
.list-sort-heading:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sort-header-link { color: inherit; text-decoration: none; }
.sort-header-link:hover { color: var(--brand-ink); }

.list-sort-mobile,
.list-sort-controls {
    width: min(100%, 30rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .65rem;
    margin-left: auto;
}

.list-sort-mobile { display: none; padding: .75rem .85rem; border-bottom: 1px solid var(--line); }
.list-sort-mobile label,
.list-sort-controls label { min-width: 0; display: grid; gap: .35rem; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.list-sort-mobile select,
.list-sort-controls select { width: 100%; min-width: 0; min-height: 3rem; margin: 0; }
.list-sort-controls { margin: 0 0 .8rem auto; }

@media (max-width: 760px) {
    .list-sort-mobile { display: grid; }
    .list-sort-heading::after { display: none; }
    .list-sort-controls select { width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
    .list-sort-mobile,
    .list-sort-controls { grid-template-columns: 1fr; }
}