/* ==============================================
   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, keep the category dropdown and search box on ONE row (they sit
       below the filter tabs) so the controls take two rows total instead of three.
       The native <select> would otherwise size itself to its widest option and
       crush the search input, so cap the dropdown's width, let its label ellipsize,
       and let the search bar flex-grow to fill the rest of the row. */
    .library-controls-right { flex-direction: row; align-items: center; gap: 8px; }
    .library-category-dropdown { flex: 0 1 auto; min-width: 0; max-width: 46%; width: auto; }
    .library-category-select { width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .library-search-bar { flex: 1 1 auto; width: auto; min-width: 0; }
}

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