.reading-nook-page {
    width: min(1360px, 100%);
    margin: 0 auto var(--spacing-6);
    display: grid;
    gap: var(--spacing-4);
}

.reading-nook-shell {
    display: grid;
    gap: var(--spacing-4);
}

.reading-nook-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.reading-nook-stat
{
    border: 1px solid var(--color-border, #3a3a3a);
    background: color-mix(in oklab, var(--color-bg-light, #222624) 78%, var(--color-bg, #191c1a));
}

.reading-nook-stat {
    padding: var(--spacing-3);
    display: grid;
    gap: var(--spacing-2);
    align-content: start;
    border-top: 3px solid var(--color-accent, #8fcb7e);
    min-width: 0;
}

.reading-nook-stat__label,
.reading-nook-group__eyebrow,
.reading-nook-item__topline span,
.reading-nook-aside__panel h2,
.reading-nook-field label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reading-nook-stat__label,
.reading-nook-group__eyebrow,
.reading-nook-item__topline span,
.reading-nook-field label,
.reading-nook-aside__panel h2 {
    color: var(--color-text-muted, #8a8a8a);
}

.reading-nook-stat__value {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--color-text, #f5f5f5);
}

.reading-nook-content {
    padding: clamp(var(--spacing-3), 1.75vw, var(--spacing-5));
    display: grid;
    gap: var(--spacing-4);
}

.reading-nook-filters {
    margin: 0;
    display: grid;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border, #3a3a3a);
    background: color-mix(in oklab, var(--color-bg-muted, #282c2a) 55%, var(--color-bg, #191c1a));
}

.reading-nook-filters > div {
    margin-bottom: 0;
}

.reading-nook-filters__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.reading-nook-field {
    grid-column: span 4;
    display: grid;
    gap: var(--spacing-1);
    min-width: 0;
}

.reading-nook-field--search {
    grid-column: 1 / -1;
}

.reading-nook-field input,
.reading-nook-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border, #3a3a3a);
    background: color-mix(in oklab, var(--color-bg, #191c1a) 88%, white 12%);
    color: var(--color-text, #f5f5f5);
    padding: 0.8rem 0.9rem;
}

.reading-nook-field input::placeholder {
    color: var(--color-text-muted, #8a8a8a);
}

.reading-nook-field input:focus,
.reading-nook-field select:focus,
.reading-nook-field input:hover,
.reading-nook-field select:hover {
    border-color: var(--color-accent, #8fcb7e);
}

.reading-nook-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
}

.reading-nook-filters__actions .btn {
    min-width: 8rem;
}

.reading-nook-results-bar {
    display: grid;
    gap: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border, #3a3a3a);
}

.reading-nook-results-bar__summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.reading-nook-results-bar__count {
    display: block;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1;
    color: var(--color-text, #f5f5f5);
}

.reading-nook-results-bar__label {
    color: var(--color-text-mid, #c0c0c0);
}

.reading-nook-results-bar__filters,
.reading-nook-section-stats,
.reading-nook-item__meta,
.reading-nook-item__tags,
.reading-nook-item__footer,
.reading-nook-aside__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.reading-nook-results-bar__filters span,
.reading-nook-section-stats span,
.reading-nook-item__meta span,
.reading-nook-item__tags span,
.reading-nook-item__topline span,
.reading-nook-aside__tags a {
    border: 1px solid var(--color-border, #3a3a3a);
    background: color-mix(in oklab, var(--color-bg, #191c1a) 82%, white 18%);
    color: var(--color-text-mid, #c0c0c0);
    padding: 0.35rem 0.55rem;
    text-decoration: none;
}

.reading-nook-results-bar__filters strong,
.reading-nook-section-stats strong,
.reading-nook-item__meta strong {
    color: var(--color-text, #f5f5f5);
}

.reading-nook-group {
    display: grid;
    gap: var(--spacing-3);
    scroll-margin-top: calc(var(--header-height-with-gap) + var(--spacing-4));
}

.reading-nook-group + .reading-nook-group {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border, #3a3a3a);
}

.reading-nook-group__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--spacing-3);
}

.reading-nook-group__header h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.reading-nook-group__eyebrow {
    margin: 0 0 var(--spacing-1);
}

.reading-nook-group__count {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    line-height: 1;
    color: var(--color-accent, #8fcb7e);
}

.reading-nook-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-3);
}

.reading-nook-item {
    border: 1px solid var(--color-border, #3a3a3a);
    border-left-width: 4px;
    padding: var(--spacing-3);
    display: grid;
    gap: var(--spacing-3);
    align-content: start;
    background: color-mix(in oklab, var(--color-bg-light, #222624) 72%, var(--color-bg, #191c1a));
    min-width: 0;
    transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

.reading-nook-item:hover {
    border-color: var(--color-accent, #8fcb7e);
    transform: translateY(-2px);
}

.reading-nook-item--bookmarks {
    border-left-color: var(--color-accent, #8fcb7e);
}

.reading-nook-item--interests {
    border-left-color: var(--color-teal-500, #78c8bd);
}

.reading-nook-item--reading-lists {
    border-left-color: var(--color-secondary, #d4803f);
}

.reading-nook-item--follow-packs {
    border-left-color: var(--color-lilac-500, #b98bdc);
}

.reading-nook-item--subscriptions {
    border-left-color: var(--color-warning, #d0a84d);
}

.reading-nook-item--my-content {
    border-left-color: var(--color-accent-strong, #e1b574);
}

.reading-nook-item--magazines {
    border-left-color: var(--color-primary, #7a9b6d);
}

.reading-nook-item__topline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.reading-nook-item__header h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
}

.reading-nook-item__header a,
.reading-nook-item__header span {
    color: var(--color-text, #f5f5f5);
    text-decoration: none;
}

.reading-nook-item__header a:hover,
.reading-nook-item__header a:focus-visible {
    color: var(--color-text, #f5f5f5);
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.reading-nook-item__summary {
    margin: 0;
    color: var(--color-text-mid, #c0c0c0);
    line-height: 1.6;
}

.reading-nook-item__meta span,
.reading-nook-item__tags span {
    font-size: var(--font-size-sm);
}

.reading-nook-item__footer {
    align-items: center;
}

.reading-nook-item__footer .btn {
    padding: 0.6rem 1rem;
}

.reading-nook-empty {
    margin: 0;
    padding: var(--spacing-4);
    color: var(--color-text-mid, #c0c0c0);
}

.reading-nook-aside {
    display: grid;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-4);
}

.reading-nook-aside__panel {
    padding: var(--spacing-3);
    display: grid;
    gap: var(--spacing-3);
}

.reading-nook-aside__panel h2 {
    margin: 0;
}

.reading-nook-aside__stats {
    display: grid;
    gap: var(--spacing-2);
}

.reading-nook-aside__stats div {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-2);
    border-bottom: 1px solid var(--color-border, #3a3a3a);
    padding-bottom: var(--spacing-2);
}

.reading-nook-aside__stats div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.reading-nook-aside__stats span {
    color: var(--color-text-mid, #c0c0c0);
}

.reading-nook-aside__stats strong {
    color: var(--color-text, #f5f5f5);
}

.reading-nook-aside__nav {
    display: grid;
    gap: var(--spacing-2);
    padding: 0;
}

.reading-nook-aside__nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: var(--color-text, #f5f5f5);
    border: 1px solid var(--color-border, #3a3a3a);
    background: color-mix(in oklab, var(--color-bg, #191c1a) 84%, white 16%);
}

.reading-nook-aside__nav a:hover,
.reading-nook-aside__tags a:hover {
    border-color: var(--color-accent, #8fcb7e);
    color: var(--color-accent, #8fcb7e);
}

.reading-nook-aside__panel--cta {
    align-items: start;
}

.reading-nook-aside__panel--cta .btn {
    width: 100%;
}

@media (max-width: 1200px) {
    .reading-nook-page {
        width: min(1200px, 100%);
    }

    .reading-nook-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .reading-nook-page {
        gap: var(--spacing-3);
    }

    .reading-nook-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reading-nook-field {
        grid-column: span 6;
    }

    .reading-nook-field--search {
        grid-column: 1 / -1;
    }

    .reading-nook-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .reading-nook-page {
        width: min(100%, calc(100% - 1rem));
        margin-bottom: var(--spacing-5);
    }

    .reading-nook-overview {
        grid-template-columns: 1fr;
    }

    .reading-nook-content,
    .reading-nook-filters,
    .reading-nook-item,
    .reading-nook-empty {
        padding: var(--spacing-3);
    }

    .reading-nook-filters__grid {
        grid-template-columns: 1fr;
    }

    .reading-nook-field,
    .reading-nook-field--search {
        grid-column: auto;
    }

    .reading-nook-results-bar__summary,
    .reading-nook-group__header {
        align-items: start;
        flex-direction: column;
    }

    .reading-nook-filters__actions .btn {
        width: 100%;
    }
}