/* ============================================================
   LIBRARY — FreeReads
   Page head with live search · category pills · grid/list toggle
   (forthandback pattern: both views rendered, filtered via
   .is-hidden) · saved-books toggle with empty state.
   ============================================================ */

.library{padding-top:150px;padding-bottom:96px;background:var(--paper)}

/* ---------- page head ---------- */
.library__head{max-width:760px}
.library__head h1{margin-bottom:14px}
.library__head p{margin-bottom:30px}

.search-box{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:14px 18px;
  max-width:520px;
  transition:border-color .3s, box-shadow .3s;
}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,122,30,.12)}
.search-box svg{width:19px;height:19px;flex:none;color:rgba(25,25,33,.45)}
.search-box input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:16px;color:var(--ink);
}
.search-box input::placeholder{color:rgba(25,25,33,.4)}
.search-box__clear{
  display:none;flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--paper-2);color:rgba(25,25,33,.6);
  align-items:center;justify-content:center;font-size:15px;line-height:1;
}
.search-box__clear:hover{background:var(--paper-3)}
.search-box.has-value .search-box__clear{display:flex}

/* ---------- controls row ---------- */
.library__controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  margin:38px 0 26px;
}
.filter-pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{
  padding:9px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;
  font-size:14px;font-weight:600;color:rgba(25,25,33,.72);
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.pill:hover{border-color:var(--ink);transform:translateY(-2px)}
.pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.library__tools{display:flex;gap:10px;align-items:center}
.layout-toggle{
  display:inline-flex;border:1.5px solid var(--line);
  border-radius:11px;background:#fff;overflow:hidden;
}
.layout-toggle button{
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;font-size:14px;font-weight:600;
  color:rgba(25,25,33,.6);transition:background .25s, color .25s;
}
.layout-toggle button + button{border-left:1.5px solid var(--line)}
.layout-toggle button svg{width:15px;height:15px}
.layout-toggle button.is-active{background:var(--ink);color:#fff}
.saved-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:11px;border:1.5px solid var(--line);
  background:#fff;font-size:14px;font-weight:600;color:rgba(25,25,33,.72);
  transition:background .25s, color .25s, border-color .25s;
}
.saved-toggle:hover{border-color:var(--ink)}
.saved-toggle.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.saved-toggle svg{width:15px;height:15px}
.saved-toggle__count{
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.saved-toggle.is-active .saved-toggle__count{background:rgba(255,255,255,.25);color:#fff}

/* ---------- results meta + empty state ---------- */
.library__meta{font-size:14px;color:rgba(25,25,33,.55);margin-bottom:22px;min-height:21px}
.library__empty{
  display:none;text-align:center;padding:70px 20px;
  background:#fff;border:1.5px dashed var(--line);border-radius:18px;
}
.library__empty.is-visible{display:block}
.library__empty svg{width:44px;height:44px;margin:0 auto 16px;color:rgba(25,25,33,.3)}
.library__empty h3{font-family:var(--font-display);font-size:22px;margin-bottom:8px}
.library__empty p{color:rgba(25,25,33,.6);font-size:15px;margin-bottom:20px}

/* ---------- grid view ---------- */
.library__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.library__grid .book-card.is-hidden{display:none}

/* ---------- list view (forthandback rows) ---------- */
.library__list{display:none;flex-direction:column;border-top:1px solid var(--line)}
.library.is-list .library__list{display:flex}
.library.is-list .library__grid{display:none}
.list-row{
  display:flex;align-items:center;gap:20px;
  padding:18px 6px;border-bottom:1px solid var(--line);
  transition:background .25s, padding-left .25s;
}
.list-row:hover{background:#fff;padding-left:14px}
.list-row.is-hidden{display:none}
.list-row__cover{flex:none;width:46px}
.list-row__main{flex:1;min-width:0}
.list-row__title{display:block;font-size:16.5px;font-weight:600;font-family:var(--font-display);line-height:1.3}
.list-row__author{font-size:13.5px;color:rgba(25,25,33,.55)}
.list-row__cats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.list-row__time{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:rgba(25,25,33,.55)}
.list-row__time svg{width:14px;height:14px}
.list-row__num{
  flex:none;font-family:var(--font-display);font-size:15px;
  color:rgba(25,25,33,.35);min-width:28px;text-align:right;
}
.list-row__saved{flex:none;color:var(--accent)}
.list-row__saved svg{width:16px;height:16px;fill:currentColor}

/* saved bookmark badge on cards */
.book-card__saved{
  position:absolute;top:8px;right:8px;z-index:2;
  color:var(--accent);display:none;
}
.book-card__saved svg{width:18px;height:18px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(25,25,33,.35))}
.book-card.is-saved .book-card__saved{display:block}

/* ---------- responsive ---------- */
@media screen and (max-width:1100px){
  .library__grid{grid-template-columns:repeat(3,1fr)}
}
@media screen and (max-width:991px){
  .library{padding-top:120px}
  .library__grid{grid-template-columns:repeat(2,1fr)}
  .library__controls{flex-direction:column;align-items:stretch}
  .filter-pills{justify-content:center}
  .library__tools{justify-content:center}
}
@media screen and (max-width:560px){
  .library{padding:104px 0 64px}
  .library__grid{grid-template-columns:1fr}
  .list-row__num{display:none}
  .list-row__time{display:none}
}