/* Compact comic shelves, with details lifted above the scrolling rails. */
.library-page { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; --library-ink:#203453; --library-muted:#596a7c; background:radial-gradient(ellipse at 0 0,#d8eeff,transparent 34%),radial-gradient(ellipse at 100% 12%,#ffe7b7,transparent 28%),#fffcf5; }
.library-page button, .library-page input { font:inherit; }
.library-page button { cursor:pointer; }
.library-page [hidden] { display:none !important; }
.library-page a { color:inherit; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 16px; background:white; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.library-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px clamp(16px,4vw,60px); }
.library-brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:850; text-decoration:none; letter-spacing:-.035em; }
.library-brand img { object-fit:cover; border-radius:9px; border:1px solid #ffe4a2; }
.library-header nav { display:flex; gap:6px; }
.library-header nav a { padding:8px 12px; min-height:44px; display:inline-flex; align-items:center; font-size:13px; text-decoration:none; border-radius:10px; color:#fff; }
.library-header nav a:hover { background:#ffffff18; }
.library-header :focus-visible { outline-color:#ffe4a2; }
.library-main { max-width:1440px; margin:auto; padding:28px clamp(16px,4vw,60px) 44px; }
.library-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; border:1px solid #cae0ed; border-radius:22px; background:linear-gradient(120deg,#e7f5ffcc,#fff2c9b8 55%,#f5e8ffb8); box-shadow:0 12px 30px #25476f0d; }
.library-eyebrow { margin:0 0 5px; color:#54718a; font-size:10px; line-height:1.4; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.library-intro h1 { margin:0; font-size:clamp(30px,4vw,43px); line-height:1.1; letter-spacing:-.06em; }
.library-intro h1 span { color:#d47a43; }
.library-intro p:last-child { margin:8px 0 0; color:var(--library-muted); font-size:13px; }
.library-tools { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.library-search { display:block; width:320px; max-width:100%; }
.library-search span { display:block; font-size:11px; font-weight:650; margin-bottom:4px; }
.library-search input { width:100%; min-height:44px; padding:10px 14px; color:var(--library-ink); border:1px solid #b9ccdd; border-radius:12px; background:#ffffffc9; }
.library-filters { display:flex; gap:6px; }
.library-filters button { border:1px solid #cad6df; border-radius:8px; padding:7px 13px; min-height:40px; background:#fffdf8; color:#476078; font-size:12px; }
.library-filters button[aria-pressed="true"] { background:#25476f; color:white; border-color:#25476f; }
.library-status-line { display:flex; justify-content:space-between; align-items:center; min-height:50px; gap:12px; }
.library-page .catalog-status { margin:8px 0; color:var(--library-muted); font-size:12px; }
#clear-filters { background:none; border:0; color:#24547f; text-decoration:underline; font-size:12px; min-height:40px; }
.library-section { margin:26px 0 0; scroll-margin-top:18px; }
.shelf { min-width:0; margin:0; }
.shelf.library-section { margin-top:26px; }
.section-heading, .shelf-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.section-heading h2, .shelf-heading h2 { margin:0; font-size:21px; line-height:1.25; letter-spacing:-.035em; }
.shelf-heading h3 { margin:0; font-size:16px; line-height:1.3; }
.shelf-count { display:inline-block; margin-left:8px; font-size:11px; color:var(--library-muted); font-weight:500; vertical-align:middle; }
.shelf-nav { display:flex; gap:6px; }
.shelf-nav button { width:36px; min-height:36px; border:1px solid #c5d5e1; border-radius:50%; background:#fffdfa; color:#25476f; font-size:18px; }
.shelf-nav button:disabled { opacity:.35; cursor:default; }
.shelf-track { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#bdcddd transparent; padding:4px 3px 12px; }
.comic-tile { flex:0 0 172px; min-width:0; scroll-snap-align:start; transition:transform .18s ease; }
.cover-trigger { width:100%; display:block; padding:0; border:0; background:none; color:var(--library-ink); text-align:left; border-radius:12px; }
.tile-cover { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4 / 3; position:relative; border:1px solid #bfceda; border-bottom:3px solid #9dbbd1; border-radius:12px; overflow:hidden; background:#eaf1f5; box-shadow:0 4px 10px #1e36520a; }
.tile-cover img { width:100%; height:100%; object-fit:contain; display:block; }
.tile-placeholder { font-size:25px; font-weight:900; letter-spacing:-.04em; color:#537464; background:repeating-linear-gradient(0deg,transparent 0 19px,#90b8a31c 19px 20px),#e9f3e8; width:100%; height:100%; display:grid; place-items:center; }
.tile-badge { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:3px 7px; border-radius:5px; background:#fffbeded; color:#5a4322; font-size:9px; line-height:1.5; font-weight:800; letter-spacing:.03em; }
.tile-title { display:block; margin:8px 0 3px; font-size:12px; font-weight:750; line-height:1.35; min-height:2.7em; }
.tile-footer { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:10px; color:#667788; }
.tile-read { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:4px 6px; color:#24547f !important; font-weight:750; text-decoration:none; border-radius:6px; }
.tile-read:hover { background:#e6f0fa; }
.comic-tile[data-edition="special"] .tile-cover { border:3px double #b68c4d; background:#f5eede; }
.comic-tile[data-edition="special"] .tile-title { color:#67448c; }
.comic-tile.is-previewing .tile-cover { outline:2px solid #315e8b; outline-offset:2px; }
.genre-shelves { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.genre-shelves .shelf { padding:16px; border:1px solid #dae5ec; border-radius:16px; background:#edf5fa88; }
.genre-shelves .shelf:nth-child(2) { background:#fff0f080; border-color:#ebd4d9; }
.genre-shelves .shelf:nth-child(3) { background:#eff7e880; border-color:#d8e4cc; }
.genre-shelves .shelf:nth-child(4) { background:#f2edfa88; border-color:#ded1e8; }
.genre-shelves .shelf:nth-child(5) { background:#fff4d980; border-color:#ead8a9; }
.genre-shelves .shelf:nth-child(6) { background:#e9f6f080; border-color:#cce2d8; }
.genre-shelves .shelf:nth-child(7) { background:#e8f2ff80; border-color:#cbdced; }
.genre-shelves .shelf:nth-child(8) { background:#ffeef680; border-color:#ead2df; }
.genre-shelves .comic-tile { flex-basis:148px; }
.pack-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.collection-card { display:flex; align-items:center; justify-content:space-between; gap:18px; min-width:0; padding:20px; border:1px solid #b6d5c8; border-left:5px solid #448a78; border-radius:8px 18px 18px 8px; background:repeating-linear-gradient(0deg,transparent 0 23px,#73a89612 23px 24px),#e9f5ed; color:#20564d !important; text-decoration:none; transition:transform .18s ease; }
.collection-card[data-pack="special"] { background:linear-gradient(130deg,#35294c,#64427e); color:#fff1cf !important; border:3px double #dfba70; border-radius:18px; }
.collection-card h3 { margin:3px 0 7px; font-size:21px; line-height:1.2; letter-spacing:-.03em; }
.collection-card[data-pack="special"] h3 { font-family:Georgia,serif; font-size:23px; }
.collection-card p { margin:0 0 8px; font-size:12px; line-height:1.5; }
.pack-count { font-size:10px; opacity:.85; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.pack-arrow { font-size:24px; }
.universe-timeline { border-top:1px solid #d6e0e7; padding-top:24px; }
.timeline-label { display:inline-block; background:#fff0be; border:1px solid #e7d395; color:#6d521d; font-size:10px; font-weight:750; padding:4px 8px; border-radius:6px; }
.timeline-intro, .timeline-note { color:var(--library-muted); font-size:12px; margin:8px 0 18px; }
.timeline-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; list-style:none; padding:0; margin:22px 0 14px; }
.timeline-item { min-width:0; position:relative; }
.timeline-item::before { content:""; height:2px; background:#d0dce4; position:absolute; top:16px; left:38px; right:-18px; }
.timeline-item:last-child::before { display:none; }
.timeline-number { display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px; border:1px solid #b9cddd; border-radius:50%; background:#e5f0f9; color:#315476; font-size:12px; font-weight:800; }
.timeline-item:last-child .timeline-number { background:#fff1c9; color:#7b5a1d; border-color:#e2cb8b; }
.timeline-item .comic-tile { max-width:172px; }
.timeline-note { border-left:3px solid #d8bd83; padding:4px 0 4px 12px; }
.library-footer { text-align:center; padding:24px 16px; font-size:12px; }
.library-footer p { margin:0 0 6px; }
.library-page:not(.pack-page) #recent,
.library-page:not(.pack-page) #upcoming { padding:18px; border-radius:18px; }
.library-page:not(.pack-page) #recent { background:linear-gradient(110deg,#e3f4ffb8,#f0ecff8f); border:1px solid #cfe0ee; }
.library-page:not(.pack-page) #upcoming { background:linear-gradient(110deg,#fff0c9b8,#ffe7d48f); border:1px solid #ead7b3; }
/* One floating preview avoids clipping inside horizontal scroll containers. */
.comic-preview { position:fixed; z-index:80; width:320px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; border:1px solid #a7bfd3; border-radius:16px; background:#fffefa; box-shadow:0 18px 55px #142f5740,0 0 0 3px #ffffffab; color:var(--library-ink); transform-origin:center center; animation:preview-in .16s ease-out; }
.comic-preview[data-edition="special"] { border:2px solid #c5a16a; background:#fffaf0; }
.preview-close { position:absolute; right:8px; top:8px; z-index:2; width:36px; height:36px; border:1px solid #c8d2dc; border-radius:50%; color:#25476f; background:#fffffff2; font-size:24px !important; line-height:1; }
.preview-art { height:180px; background:#e8eef3; }
.preview-art img { width:100%; height:100%; object-fit:contain; }
.preview-art .tile-placeholder { min-height:180px; }
.preview-content { padding:16px; }
.preview-content h2 { margin:3px 0 10px; font-size:19px; line-height:1.2; letter-spacing:-.03em; }
.preview-edition { margin:0 0 5px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#806126; font-weight:800; }
.preview-tags { display:flex; flex-wrap:wrap; gap:5px; }
.preview-tags span { font-size:10px; padding:2px 7px; border-radius:5px; background:#eaf2f8; color:#355e7e; }
.preview-description { font-size:12px; line-height:1.6; margin:12px 0; color:#4f6274; }
.preview-meta, .preview-continuity { font-size:10px; color:#65727f; margin:7px 0; }
.preview-continuity { color:#765989; }
.preview-read { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:10px 13px; margin-top:14px; border-radius:10px; background:#28517b; color:white !important; font-size:12px; font-weight:750; text-decoration:none; }
.comic-preview[data-edition="special"] .preview-read { background:#69488d; }
.preview-upcoming { padding:10px; margin:14px 0 0; border:1px dashed #d6c48b; border-radius:8px; text-align:center; font-size:12px; color:#725b25; background:#fff5d8; }
@keyframes preview-in { from {opacity:0;transform:scale(.97)} to {opacity:1;transform:scale(1)} }
@media(hover:hover) { .collection-card:hover { transform:translateY(-3px); } .cover-trigger:hover .tile-title { text-decoration:underline; text-underline-offset:3px; } }
@media(max-width:1100px) { .genre-shelves { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .library-intro { align-items:flex-start; flex-direction:column; gap:16px; }
 .library-tools { width:100%; align-items:flex-start; }
 .library-search { width:100%; }
 .library-header { flex-wrap:wrap; gap:8px; }
 .library-brand { font-size:16px; }
 .library-header nav a { font-size:12px; padding:8px; }
 .pack-grid { grid-template-columns:1fr; }
 .genre-shelves { gap:16px; }
 .genre-shelves .shelf { padding:12px; }
 .comic-tile { flex-basis:148px; }
 .timeline-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 .timeline-item:nth-child(2)::before { display:none; }
}
@media(max-width:500px) {
 .library-main { padding-top:20px; }
 .library-header { padding:10px 16px; }
 .library-brand img { width:36px; height:28px; }
 .library-header nav { gap:0; }
 .library-header nav a { padding:6px; }
 .genre-shelves { grid-template-columns:1fr; }
 .genre-shelves .comic-tile { flex-basis:140px; }
 .section-heading h2 { font-size:19px; }
 .shelf-track { gap:12px; }
 .comic-preview { width:auto; left:12px !important; right:12px; top:auto !important; bottom:12px; max-width:none; }
 .preview-art { height:150px; }
 .preview-art .tile-placeholder { min-height:150px; }
 .timeline-label { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .comic-preview { animation:none; } .comic-tile,.collection-card { transition:none; } }