/* Library page: components that exist only here (book cards, filters). Base look = kit/common.css + kit/skins/library.css. */
body{min-height:100vh}
.spacer{flex:1}
.seg{display:inline-flex;border:var(--bw) solid var(--bd);border-radius:var(--radius-sm);overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;color:var(--mut);padding:6px 12px;font:600 13px/1.4 inherit;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
main{max-width:1160px;margin:0 auto;padding:36px clamp(16px,4vw,40px) 40px}
.hero h1{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:0 0 10px;letter-spacing:-.02em;font-weight:var(--hw)}
.hero .lead{margin:0 0 26px}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}
#q{flex:1;min-width:200px;max-width:380px;height:40px;border:var(--bw) solid var(--bd);border-radius:var(--radius-sm);background:var(--card);color:var(--fg);padding:0 14px;font:inherit;font-size:15px}
#q:focus,select:focus{outline:2px solid var(--acc)}
.sort{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:14px;margin-left:auto}
select{height:40px;border:var(--bw) solid var(--bd);border-radius:var(--radius-sm);background:var(--card);color:var(--fg);padding:0 10px;font:inherit;font-size:14px}
.count{color:var(--mut);font-size:14px;margin:6px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));column-gap:22px;row-gap:0;align-items:stretch}

/* a book card; --accent is the book's own color (set inline from the book's icon) */
.book{--accent:#0073ea;display:flex;flex-direction:column;margin-bottom:22px;background:var(--card);border:var(--bw) solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
@supports (grid-template-rows:subgrid){.book{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}}
.book:hover{transform:translateY(-3px)}
.cover{position:relative;height:132px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));display:flex;align-items:flex-end;padding:0 22px}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 55%)}
.ico{position:relative;z-index:1;width:84px;height:84px;border-radius:calc(var(--radius) + 2px);background:#fff;object-fit:cover;box-shadow:0 8px 22px rgba(0,0,0,.28);transform:translateY(34px);border:3px solid #fff}
.num{position:absolute;right:16px;top:12px;font:700 13px/1 var(--mono);color:rgba(255,255,255,.8);letter-spacing:.04em;z-index:1}
.t{font-size:21px;line-height:1.25;margin:0;padding:50px 22px 0}.t a{color:inherit;text-decoration:none}.t a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.desc{margin:0;padding:10px 22px 0;color:var(--mut);font-size:15px;line-height:1.55}
.sec{padding:18px 22px 0}
.lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:700;margin-bottom:8px}
.btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.25;padding:9px 12px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:var(--hw);font-size:15px;text-decoration:none}
.rbtn small{font-weight:500;opacity:.85;font-size:12px}.rbtn:hover{filter:brightness(1.1)}
.rbtn.ghost{background:var(--bg2);color:var(--fg)}
.frow{display:flex;align-items:flex-start;gap:8px}.frow + .frow{margin-top:8px}
.fl{width:26px;flex:none;font-size:12px;color:var(--mut);letter-spacing:.04em;padding-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.chip{display:inline-flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:var(--pill);background:var(--bg2);font-size:13px;font-weight:700;color:var(--fg);border:1px solid transparent;text-decoration:none}
.chip:hover{border-color:var(--accent)}.chip em{font-style:normal;font-weight:500;color:var(--mut);font-size:12px}
.meta{margin-top:auto;padding:18px 22px 18px;color:var(--mut);font-size:13px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.prog{display:flex;flex-direction:column;gap:6px}
.pbar{height:8px;border-radius:var(--pill);background:var(--bg2);overflow:hidden}.pbar span{display:block;height:100%;background:var(--accent)}
.ptxt b{color:var(--fg)}
.presume{color:var(--accent);font-weight:700;font-size:13px;line-height:1.35;text-decoration:none}.presume:hover{text-decoration:underline;text-underline-offset:3px}
.empty{text-align:center;color:var(--mut);padding:60px 10px}.empty code{background:var(--inline-bg);padding:2px 6px;border-radius:6px}
footer{max-width:1160px;margin:0 auto;padding:10px clamp(16px,4vw,40px) 40px;color:var(--mut);font-size:13px}
@media (max-width:560px){.sort{margin-left:0}.brand span{font-size:16px}}
@media (prefers-reduced-motion:reduce){.book{transition:none}}