/* =============================================================================
   SudaHub redesign — Library grid (CLAUDE.md §5.4, §7.3)
   Phase 5c. Dense cover grid: 2 cols @360, 3 @768, 5 @1280, 7 @1920, tight
   16px gutters. Library is a BRAND surface (§0) — gradient cover fallbacks
   are the content standing in for real cover art, not chrome decoration, so
   they're not counted against the "one gradient per viewport" budget. The
   Reader itself is Phase 5d — this file only covers browsing.

   Search and filters (originally a permanent rail here) were moved behind a
   search toggle and a Filter button + sheet on request — the grid keeps the
   full content width and either opens only on demand. ========================================================================== */

/* ---------- Toolbar: expandable search + Filter button ---------- */
.library-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.library-search-wrap { display: flex; align-items: center; }
.library-search-toggle { flex-shrink: 0; }
.library-search-input-wrap {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.library-search-wrap.is-expanded .library-search-input-wrap {
    max-width: 320px;
    opacity: 1;
    margin-inline-start: 8px;
}
.library-search-input-wrap .input { width: 280px; max-width: 100%; }

#library-filter-toggle { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }

/* ---------- Filter sheet ---------- */
.library-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.library-filter-sheet-title { font-size: var(--fs-body-l); font-weight: 700; color: var(--text-primary); margin: 0; }
.library-filter-groups { display: flex; flex-direction: column; gap: 20px; max-height: 60vh; overflow-y: auto; }
.library-filter-group-label {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
[lang="en"] .library-filter-group-label { text-transform: uppercase; }
[lang="ar"] .library-filter-group-label { letter-spacing: 0; }
.library-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Cover grid ---------- */
.library-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .library-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .library-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1920px) {
    .library-grid { grid-template-columns: repeat(7, 1fr); }
}

/* These cards are real <button> elements (keyboard/screen-reader reachable),
   not styled divs — reset the UA button chrome back to plain block content. */
.library-cover-card {
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: start;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    appearance: none;
}
.library-cover-frame {
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-raised);
    /* Many Arabic covers have white edges that vanish on dark surfaces (§7.3). */
    border: 1px solid var(--line-subtle);
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.library-cover-card:hover .library-cover-frame { border-color: var(--line-strong); transform: translateY(-2px); }
.library-cover-category {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    background: rgba(var(--scrim-rgb), 0.55);
    color: rgb(var(--text-on-accent-rgb));
    backdrop-filter: blur(4px);
}
[lang="en"] .library-cover-category { text-transform: uppercase; }
[lang="ar"] .library-cover-category { letter-spacing: 0; }

.library-cover-title { margin-top: 8px; font-size: var(--fs-label); font-weight: 700; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.library-cover-author { font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-cover-progress-label { font-family: var(--font-label); font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

/* ================= SHELF TABS + LISTS (RESKIN §2.4) ================= */
/* Centred: #libraryContainer is not a flex parent, so align-self did
   nothing here — margin-inline:auto on a max-content box is what actually
   centres it. */
#shelf-tabs {
    width: max-content;
    margin-inline: auto;
    margin-block-end: var(--space-6);
}

/* Saved wire and Notes are lists, not a cover grid — the grid's column
   rules would squash both into unreadable columns. */
.shelf-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.shelf-saved-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    text-align: start;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-900);
    background: var(--color-surface);
    cursor: pointer;
}
.shelf-saved-card:hover { border-color: var(--color-accent-800); }
.shelf-saved-meta {
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-label);
    color: var(--color-neutral-500);
}
[lang="en"] .shelf-saved-meta { text-transform: uppercase; }
.shelf-saved-title {
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-l);
    line-height: var(--lh-snug);
    color: var(--color-neutral-100);
    text-wrap: pretty;
}

/* The mockup's pull-quote note card: an accent rule on the inline-START
   edge, which mirrors on its own under RTL. */
.shelf-note-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    text-align: start;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-900);
    background: var(--color-surface);
    cursor: pointer;
}
.shelf-note-card:hover { border-color: var(--color-accent-800); }
.shelf-note-quote {
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-accent);
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-accent-200);
    text-wrap: pretty;
}
.shelf-note-source {
    font-size: var(--fs-caption);
    color: var(--color-neutral-500);
}

/* ---------- Shelf list rows (Continue reading / Favourites) ---------- */
.shelf-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-900);
    background: var(--color-surface);
}
.shelf-row:hover { border-color: var(--color-accent-800); }
.shelf-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}
.shelf-row-cover {
    flex: none;
    width: 44px;
    height: 62px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: block;
}
.shelf-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shelf-row-title {
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-s);
    line-height: var(--lh-snug);
    color: var(--color-neutral-100);
}
.shelf-row-author { font-size: var(--fs-caption); color: var(--color-neutral-500); }
.shelf-row-extra {
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-label);
    color: var(--color-accent-200);
}
[lang="en"] .shelf-row-extra { text-transform: uppercase; }
.shelf-fav-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-neutral-600);
    cursor: pointer;
}
.shelf-fav-btn svg { width: 20px; height: 20px; }
.shelf-fav-btn.is-on { color: var(--color-accent); }
.shelf-fav-btn:hover { background: var(--color-bg); color: var(--color-accent-200); }

/* ================= BOOK PAGE =================
   Between the Shelf and the reader. Deliberately NOT the reader's chrome-free
   treatment (§7.4) — this is a brand surface where you decide what to read,
   not the reading surface itself. */
.book-page {
    position: fixed;
    inset: 0;
    z-index: 155;              /* over the Shelf, under the reader's 160 */
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    overflow-y: auto;
}
.book-page-chrome {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-block-end: 1px solid var(--line-subtle);
}
.book-page-body {
    padding: var(--space-6) var(--space-4) var(--space-8);
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
}

/* Cover beside the facts, which is the layout the request describes: the
   stats and the summary sit next to the cover, not under it. */
.book-hero { display: flex; gap: var(--space-4); align-items: flex-start; }
.book-hero-cover {
    flex-shrink: 0;
    width: 116px;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line-subtle);
    background: var(--surface-sunken);
}
/* min-width:0 so a long title wraps instead of forcing the row wider than the
   screen — the same flex trap that letterboxed the premiere room. */
.book-hero-info { flex: 1 1 auto; min-width: 0; }
.book-hero-title { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-snug); color: var(--color-neutral-100); }
.book-hero-author { margin: var(--space-1) 0 0; font-size: var(--fs-body-s); color: var(--color-neutral-400); }

.book-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-3); }
.book-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-label);
    color: var(--color-neutral-400);
}
[lang="ar"] .book-stat { letter-spacing: 0; }
.book-stat svg { width: 15px; height: 15px; flex-shrink: 0; }

.book-summary {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-body-s);
    line-height: var(--lh-body);
    color: var(--color-neutral-300);
}

.book-read-btn { width: 100%; margin-block-start: var(--space-6); }
.book-note {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-body-s);
    color: var(--color-neutral-500);
    line-height: var(--lh-body);
}

.book-chapters { margin-block-start: var(--space-8); }
.book-chapters-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-label);
    color: var(--color-neutral-500);
}
[lang="en"] .book-chapters-title { text-transform: uppercase; }
[lang="ar"] .book-chapters-title { letter-spacing: 0; text-transform: none; }

.book-chapter-list { list-style: none; margin: 0; padding: 0; }
.book-chapter-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;                 /* §9 hit area */
    padding: var(--space-3) var(--space-2);
    background: none;
    border: none;
    border-block-end: 1px solid var(--line-subtle);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.book-chapter-row:hover { background: var(--color-surface); }
.book-chapter-n {
    flex-shrink: 0;
    min-width: 2ch;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-neutral-500);
}
.book-chapter-title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body-s);
    color: var(--color-neutral-200);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The favourite star sits in the stats row and must read as one of them, not
   as a button bolted on: same size, same spacing, same label treatment. It IS
   interactive though, so it gets the affordances the spans do not. */
.book-fav-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-neutral-400);
    transition: color var(--dur-base) var(--ease-out);
    position: relative;
}
/* The label is gone, so the star is the whole control — and a 15px glyph is
   not a tap target (§9 floor is 44px). This grows the touch area to ~45px
   without taking any layout space, so the stats row keeps its spacing.
   Padding would have pushed the neighbouring stats apart instead. */
.book-fav-btn::after {
    content: '';
    position: absolute;
    inset: -15px;
}
/* Slightly larger than the reads/chapters icons beside it: those are
   labels, this one is a button, and it should read as pressable. */
.book-fav-btn svg { width: 17px; height: 17px; }
.book-fav-btn:hover { color: var(--color-neutral-200); }
.book-fav-btn.is-on { color: var(--color-accent-200, var(--color-accent)); }
/* The fill on the SVG already carries the state (§9 — never colour alone);
   this only reinforces it. */
.book-fav-btn:active { transform: scale(0.94); }