/* ==============================================
   LIBRARY PAGE -- Claude Design reskin
   Ported from the "unQbd Library page redesign" (Library.dc.html).
   Scope: page chrome (hero + sticky controls) + the books grid shell
   and its loading/empty/load-more/end states. The book card itself
   stays BookCard / book-card.css (shared with Discover/Search/Author),
   so it is intentionally NOT restyled here. The status badges are a
   shared primitive standardized in book-card.css (not here).
   --lib-* tokens resolve from brand-tokens.css with safe fallbacks.
   Dark mode is handled via body.dark-mode (never prefers-color-scheme).
   ============================================== */

@keyframes library-spin { to { transform: rotate(360deg); } }
@keyframes lib-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==============================================
   TOKEN LAYER
   ============================================== */

.page-library {
    --lib-blue: var(--brand-primary, #00B4FF);
    --lib-blue-deep: var(--brand-secondary, #0174B1);
    --lib-blue-light: var(--brand-primary-light, #4DB8FF);
    --lib-orange: var(--brand-cta, #FFAA00);

    --lib-page: #FFFFFF;
    --lib-surface: #FFFFFF;
    --lib-surface-alt: #F8FAFC;
    --lib-bar-bg: rgba(255, 255, 255, 0.85);
    --lib-fg: var(--brand-charcoal, #222222);
    --lib-fg-secondary: #475569;
    --lib-fg-muted: #64748B;
    --lib-border: #E5EAF0;
    --lib-track: #E5EAF0;

    --lib-hero-grad: radial-gradient(120% 92% at 50% -12%, #E6F7FF 0%, #F6FBFF 55%, #FFFFFF 100%);
    --lib-accent-soft: #E6F7FF;

    --lib-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.06);
    --lib-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.08);
    --lib-shadow-blue: 0 10px 28px rgba(0, 180, 255, 0.28);

    --lib-r-md: 10px;
    --lib-r-lg: 14px;
    --lib-r-xl: 20px;
    --lib-r-2xl: 28px;
    --lib-r-pill: 999px;
    --lib-ease: cubic-bezier(0.22, 1, 0.36, 1);

    min-height: 100vh;
    min-height: 100dvh;
    background: var(--lib-page);
    color: var(--lib-fg);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.page-library *,
.page-library *::before,
.page-library *::after { box-sizing: border-box; }

body.dark-mode .page-library {
    --lib-page: #0B1119;
    --lib-surface: #141D29;
    --lib-surface-alt: #10171F;
    --lib-bar-bg: rgba(11, 17, 25, 0.82);
    --lib-fg: #EAF1F8;
    --lib-fg-secondary: #9FB1C4;
    --lib-fg-muted: #6E8096;
    --lib-border: #253347;
    --lib-track: #253347;

    --lib-hero-grad: radial-gradient(120% 92% at 50% -12%, rgba(0, 180, 255, 0.18) 0%, rgba(0, 180, 255, 0.05) 46%, #0B1119 100%);
    --lib-accent-soft: rgba(0, 180, 255, 0.15);

    --lib-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --lib-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.library-content {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

/* ==============================================
   FULL-PAGE LOADING / SIGNED-OUT STATE
   (rendered outside .page-library, so it uses brand tokens directly)
   ============================================== */

.library-loading {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 2rem;
    background: #FFFFFF;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body.dark-mode .library-loading { background: #0B1119; }

.library-loading-spinner {
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    border: 3px solid #E5EAF0;
    border-top-color: var(--brand-primary, #00B4FF);
    border-radius: 50%;
    animation: library-spin 0.8s linear infinite;
}

body.dark-mode .library-loading-spinner {
    border-color: #253347;
    border-top-color: var(--brand-primary-light, #4DB8FF);
}

.library-loading-text {
    margin: 0;
    color: #64748B;
    font-size: 0.95rem;
    font-weight: 500;
}

body.dark-mode .library-loading-text { color: #6E8096; }

/* ==============================================
   HERO
   ============================================== */

.library-header-section {
    width: 100%;
    margin: 0;
    padding: 7.5rem 0 2.75rem;
    background: var(--lib-hero-grad);
    border-bottom: 1px solid var(--lib-border);
}

.library-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.library-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.library-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 20px;
    border-radius: var(--lib-r-xl);
    background: var(--lib-accent-soft);
    color: var(--lib-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: var(--lib-shadow-sm);
    transition: background 200ms var(--lib-ease);
}

body.dark-mode .library-icon { color: var(--lib-blue-light); }

.library-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lib-fg);
}

.library-subtitle {
    margin: 12px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--lib-fg-secondary);
}

/* ==============================================
   STICKY CONTROLS BAR
   ============================================== */

.library-controls-section {
    position: sticky;
    top: 70px;
    z-index: 40;
    background: var(--lib-bar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lib-border);
}

.library-controls-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
}

.library-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Filter tabs (segmented group) */
.library-filter-tabs {
    display: flex;
    gap: 3px;
    padding: 4px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.library-filter-tabs::-webkit-scrollbar { display: none; }

.library-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--lib-fg-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 160ms var(--lib-ease);
}

.library-filter-tab:hover { color: var(--lib-fg); }

.library-filter-tab.active {
    background: var(--lib-blue);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.30);
}

.library-filter-tab i { font-size: 18px; line-height: 1; }

/* Right group: category + search */
.library-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category dropdown (native select, styled) */
.library-category-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.library-category-select {
    width: 100%;
    padding: 10px 30px 10px 32px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-md);
    color: var(--lib-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 160ms var(--lib-ease), box-shadow 160ms var(--lib-ease);
}

.library-category-select:hover { border-color: var(--lib-blue); }

.library-category-select:focus {
    outline: none;
    border-color: var(--lib-blue);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2);
}

.library-category-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

.library-dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

/* Search */
.library-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
}

.library-search-icon {
    position: absolute;
    left: 12px;
    color: var(--lib-fg-muted);
    font-size: 18px;
    pointer-events: none;
}

.library-search-input {
    width: 100%;
    padding: 10px 38px;
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-r-pill);
    color: var(--lib-fg);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms var(--lib-ease), box-shadow 160ms var(--lib-ease);
}

.library-search-input::placeholder { color: var(--lib-fg-muted); }

.library-search-input:focus {
    border-color: var(--lib-blue);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2);
}

.library-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--lib-surface-alt);
    color: var(--lib-fg-muted);
    cursor: pointer;
    transition: background 160ms var(--lib-ease), color 160ms var(--lib-ease);
}

.library-search-clear:hover {
    background: var(--lib-border);
    color: var(--lib-fg);
}

.library-search-clear i { font-size: 14px; }

/* ==============================================
   BOOKS SECTION
   ============================================== */

.library-books-section {
    padding: 30px 0 88px;
}

.library-books-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 46vh;
}

/* ==============================================
   BOOK DISPLAY COMPONENT (grid shell + states)
   ============================================== */

/* Inline loading */
.book-display-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 96px 0;
    text-align: center;
}

.book-display-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid var(--lib-track);
    border-top-color: var(--lib-blue);
    border-radius: 999px;
    animation: library-spin 0.8s linear infinite;
}

.book-display-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.book-display-loading-text {
    margin: 0;
    color: var(--lib-fg-muted);
    font-size: 15px;
    font-weight: 500;
}

/* Empty state */
.book-display-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
    padding: 76px 24px;
    animation: lib-fade 240ms var(--lib-ease);
}

.book-display-empty-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: var(--lib-r-2xl);
    background: var(--lib-surface);
    border: 1px solid var(--lib-border);
    color: var(--lib-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lib-shadow-sm);
}

body.dark-mode .book-display-empty-icon { color: var(--lib-blue-light); }

.book-display-empty-icon i { font-size: 40px; }

.book-display-empty-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lib-fg);
}

.book-display-empty-description {
    margin: 8px 0 0;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lib-fg-secondary);
}

.book-display-empty-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.book-display-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--lib-r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms var(--lib-ease), transform 200ms var(--lib-ease);
}

.book-display-empty-btn.primary {
    background: var(--lib-blue);
    color: #FFFFFF;
    box-shadow: var(--lib-shadow-blue);
}

.book-display-empty-btn.primary:hover {
    background: var(--lib-blue-deep);
    transform: translateY(-1px);
}

/* Secondary empty-state action: the quieter "Browse all books" door out of an empty
   personal Library tab. Outline treatment so it never competes with the primary CTA. */
.book-display-empty-btn.secondary {
    background: transparent;
    color: var(--lib-blue, #00B4FF);
    border: 1px solid var(--lib-blue, #00B4FF);
}

.book-display-empty-btn.secondary:hover {
    background: rgba(0, 180, 255, 0.08);
}

body.dark-mode .book-display-empty-btn.secondary {
    color: var(--lib-blue-light, #4DB8FF);
    border-color: var(--lib-blue-light, #4DB8FF);
}

body.dark-mode .book-display-empty-btn.secondary:hover {
    background: rgba(77, 184, 255, 0.12);
}

.book-display-empty-btn i { font-size: 18px; }

/* Grid */
.book-display-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.book-display-item { width: 100%; }

/* A show tile carries 16:9 artwork into a grid whose columns are sized for 5:8 book covers.
   In one column it would render about a third the height of its neighbours with dead space
   beneath it, so it takes two. At the 380px breakpoint the grid switches to a fixed two
   columns, which makes a show tile full width there. Above that, down to 768px, the grid
   stays auto-fill with a shrinking minmax() column, so a span-2 tile there is just narrower,
   not necessarily full width. */
.book-display-item-show { grid-column: span 2; }

/* WatchContinueCard's own stylesheet (watch-show.css) fixes .wsp-continue-card to a 200px
   (240px above 720px) width for its native home, the /watch hub's flex row. Loaded here
   inside Library's grid, that fixed width leaves the spanned cell above mostly empty --
   exactly what the span-2 rule was added to avoid.
   watch-show.css is injected by WatchContinueCard's own <link> tag, which is appended to
   <head> after this stylesheet, so an equal-specificity rule here would lose on source
   order alone. Two classes (0,2,0) beats watch-show.css's one-class rules (0,1,0)
   regardless of order, including its own 720px breakpoint override, so do not "simplify"
   this back to a bare .wsp-continue-card selector. */
.book-display-item-show .wsp-continue-card { width: 100%; }

/* Loading more */
.book-display-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
    color: var(--lib-fg-muted);
    font-size: 14px;
    font-weight: 500;
}

/* End of results */
.book-display-end {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 44px;
    color: var(--lib-fg-muted);
}

.book-display-end-line {
    flex: 1;
    height: 1px;
    background: var(--lib-border);
}

.book-display-end-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Status badges are standardized in book-card.css (shared primitive). */

/* ==============================================
   RESPONSIVE
   ============================================== */

/* The filter tab group carries six tabs (All / Reading / Finished / Following /
   Audiobooks / Read-along). Below ~1200px it can no longer share a row with the
   category + search controls without clipping the last (Read-along) tab, so drop
   the controls onto their own full-width row first. Tab labels stay visible here;
   the icon-only treatment kicks in lower down at 768px. */
@media (max-width: 1199px) {
    .library-controls-row { flex-wrap: wrap; }
    .library-controls-right { flex: 1 1 100%; }
    .library-search-bar { flex: 1 1 200px; width: auto; }
}

@media (max-width: 992px) {
    .library-header-section { padding: 7rem 0 2rem; }
    .library-icon { width: 56px; height: 56px; font-size: 26px; }
}

@media (max-width: 768px) {
    .library-header-section { padding: 6.5rem 0 1.5rem; }
    .library-header-container { padding: 0 16px; }

    .library-controls-section { top: 60px; }
    .library-controls-container { padding: 12px 16px; }
    /* row wrap + full-width controls are inherited from the max-width:1199px block */

    .library-filter-tab { padding: 9px 12px; }
    .library-filter-tab span { display: none; }
    .library-filter-tab i { font-size: 20px; }

    .library-search-bar { flex: 1 1 160px; width: auto; }

    .library-books-container { padding: 0 16px; }
    .book-display-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
}

@media (max-width: 480px) {
    .library-header-section { padding: 6rem 0 1.25rem; }
    .library-title { font-size: 26px; }
    .library-subtitle { font-size: 15px; }
    .library-books-section { padding: 20px 0 64px; }

    /* On phones the native category <select> sizes itself to its widest option
       ("Classics & Literary Fiction"), which crushes the search input on the
       same row down to just its icon. Stack the two so the search bar always
       gets the full row width and stays readable. */
    .library-controls-right { flex-direction: column; align-items: stretch; }
    .library-category-dropdown { width: 100%; }
    .library-search-bar { width: 100%; flex: none; }
}

@media (max-width: 380px) {
    .book-display-grid { grid-template-columns: repeat(2, 1fr); }
}