.filters { margin-bottom: var(--len-16); display: grid; gap: var(--len-8); }

.filter { min-width: 0; }

.filter-label {
    margin-bottom: var(--len-4);
    display: block;
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    font-weight: var(--weight-semibold);
    color: var(--charcoal);
}

.rec-card { padding: var(--len-12); overflow: hidden; }

.rec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--len-8);
}

.rec-title {
    font-family: var(--font-display);
    font-size: var(--fs-14);
    font-weight: var(--weight-semibold);
    color: var(--charcoal);
}

.weeks { display: flex; gap: var(--len-4); }

.week-btn { min-height: var(--len-32); padding-inline: var(--len-12); font-size: var(--fs-11); }

.week-clip { overflow: hidden; }

.week-track {
    display: grid;
    grid-template-columns: repeat(var(--cols-2), minmax(0, 1fr));
    width: var(--double);
    transform: translateX(0);
    transition: transform var(--t-520) var(--e-week);
    will-change: transform;
}

.week-track-next { transform: translateX(var(--half-back)); }

.week { min-width: 0; padding-inline: 1px; }

.day { margin-top: var(--len-20); }

.day-head {
    font-family: var(--font-display);
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
    color: var(--charcoal);
}

.day-rows { margin-top: var(--len-8); display: grid; gap: var(--len-8); }

.no-match-rows,
.no-class {
    padding-block: var(--len-32);
    text-align: center;
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    color: var(--charcoal-m);
}

.viewall {
    margin-top: var(--len-16);
    display: flex;
    width: var(--fill);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--len-12);
    background-color: var(--ds-blue-lightest);
    padding: var(--len-12);
    text-align: left;
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    font-weight: var(--weight-semibold);
    color: var(--ogblue-m);
}

.viewall-lead { display: inline-flex; align-items: center; gap: var(--len-8); }

.viewall-lead svg { width: var(--len-16); height: var(--len-16); }

.viewall-tail { display: inline-flex; align-items: center; }

.viewall-arrow { margin-left: var(--len-4); width: var(--len-16); height: var(--len-16); }

.pager {
    margin-top: var(--len-16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--len-4);
}

.pager-btn {
    display: grid;
    width: var(--len-32);
    height: var(--len-32);
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--charcoal);
    transition: background-color var(--t-150);
}

.pager-btn:hover { background-color: var(--ds-overlay-hover); }

.pager-btn:disabled { pointer-events: none; color: var(--ds-disabled-content); }

.pager-btn svg { width: var(--len-16); height: var(--len-16); }

.pager-page {
    display: grid;
    width: var(--len-32);
    height: var(--len-32);
    place-items: center;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
    color: var(--charcoal);
    transition: background-color var(--t-150);
}

.pager-page:hover { background-color: var(--ds-overlay-hover); }

.is-current.pager-page { background-color: var(--ogblue-m); color: var(--white); }

.pager-gap {
    display: grid;
    width: var(--len-32);
    height: var(--len-32);
    place-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-12);
    color: var(--ds-tertiary);
}

@media (min-width: 40rem) {
    .filters { grid-template-columns: repeat(var(--cols-2), minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .filters { grid-template-columns: repeat(var(--cols-3), minmax(0, 1fr)); }

    .filter-code { grid-column: 1 / -1; }
}