:root{
  /* light */
  --bg:#faf9f5; --fg:#211f1b; --muted:#716c61; --line:#e6e1d6;
  --card:#ffffff; --accent:#1b1a17; --chip:#eeebe2; --chip-on:#1b1a17; --chip-on-fg:#faf9f5;
  --star:#c08800;
  --shadow:0 1px 3px rgba(0,0,0,.10),0 6px 20px rgba(0,0,0,.06);
  --pad:18px; --gap:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* dark palette — defined once, applied for both system-auto and forced-dark.
   Surfaces step up clearly: bg < card < chip, so panels/tags separate. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141310; --fg:#f3efe6; --muted:#aaa495; --line:#39342b;
    --card:#221f19; --accent:#f3efe6; --chip:#322d24; --chip-on:#f3efe6; --chip-on-fg:#141310;
    --star:#edc049;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#141310; --fg:#f3efe6; --muted:#aaa495; --line:#39342b;
  --card:#221f19; --accent:#f3efe6; --chip:#322d24; --chip-on:#f3efe6; --chip-on-fg:#141310;
  --star:#edc049;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:30;display:flex;gap:10px;align-items:center;
  padding:10px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
/* shared squircle pill used by every topbar control */
.btn,.stars,.density{
  height:38px;border:1px solid var(--line);border-radius:12px;background:var(--card);
}
/* no focus ring on topbar controls (click/tab should not outline them) */
header button:focus,header button:focus-visible,
header input:focus,header input:focus-visible,
.btn:focus,.star:focus,.rl-toggle:focus,.density input:focus{outline:none}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:0 12px;
  white-space:nowrap;font-size:14px;transition:border-color .15s,background .15s;
}
.btn:hover{border-color:var(--muted)}
/* filters button: icon + "shown/total" readout, no label text */
#filterBtn{position:relative;padding:0 12px 0 11px}
/* active filters: a small accent dot on the icon, not a heavy border */
#filterBtn.active::after{content:"";position:absolute;top:7px;left:21px;
  width:6px;height:6px;border-radius:50%;background:var(--star);
  box-shadow:0 0 0 2px var(--card)}
.btn .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  letter-spacing:.2px}
#filterBtn.active .count{color:var(--fg)}

/* search: fills the available width; icon-only placeholder */
.search{position:relative;flex:1 1 auto;min-width:0}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none;z-index:1}
.search input{
  width:100%;height:38px;padding:0 12px 0 36px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);font-size:15px;
}
.search input:focus{outline:none;border-color:var(--muted)}

/* star section toggles + reading-list toggle */
.stars{display:inline-flex;align-items:center;gap:1px;padding:0 9px}
.star{font-size:18px;line-height:1;padding:2px 3px;color:var(--line);
  transition:color .12s,transform .1s}
.star:hover{transform:scale(1.12)}
.star.on{color:var(--star)}
.stars-sep{width:1px;height:18px;background:var(--line);margin:0 7px}
.rl-toggle{display:inline-flex;align-items:center;color:var(--line);padding:2px;
  transition:color .12s,transform .1s}
.rl-toggle:hover{transform:scale(1.12)}
.rl-toggle.on{color:var(--accent)}
.rl-toggle.on svg{fill:currentColor}

.density{display:flex;align-items:center;padding:0 12px}
.density input[type=range]{width:96px;accent-color:var(--accent);cursor:pointer}

/* theme toggle: square pill, one icon for the active mode */
.theme{padding:0;width:38px;justify-content:center;color:var(--muted)}
.theme:hover{color:var(--fg)}
.theme svg{display:none}
.theme .ic-auto{display:block}                       /* default = auto */
:root[data-theme="light"] .theme .ic-auto{display:none}
:root[data-theme="light"] .theme .ic-light{display:block}
:root[data-theme="dark"] .theme .ic-auto{display:none}
:root[data-theme="dark"] .theme .ic-dark{display:block}

/* ---------- grid ---------- */
#scroller{position:absolute;inset:0;top:59px;overflow-y:auto;overflow-x:hidden;padding:var(--pad)}
#sizer{position:relative;width:100%}
#content{position:absolute;left:0;right:0;display:grid;gap:var(--gap)}
.tile{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--chip);
  box-shadow:var(--shadow)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;font-size:13px;line-height:1.3;font-weight:600}
.tile.noimg img{display:none}

/* section headers span the full grid width; match the topbar star sizing */
.sechead-row{grid-column:1/-1}
.sechead{display:flex;align-items:center;gap:10px;padding:30px 2px 14px}
.sh-stars{color:var(--star);font-size:18px;letter-spacing:1px;line-height:1}
.sh-list{display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;letter-spacing:.2px;line-height:1}
.sh-list svg{width:15px;height:15px;color:var(--accent);fill:currentColor}
.sh-n{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.empty{padding:60px 20px;text-align:center;color:var(--muted)}

/* ---------- filter modal ---------- */
#filterModal[hidden]{display:none}
#filterModal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
#filterModal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.fsheet{position:relative;z-index:1;width:min(560px,100%);max-height:82vh;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden}
.fsheet .close{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;
  border-radius:999px;background:color-mix(in srgb,var(--card) 65%,transparent);backdrop-filter:blur(4px);
  font-size:21px;line-height:1;color:var(--fg);display:flex;align-items:center;justify-content:center}
.fsheet .close:hover{background:var(--chip)}
.fclear{position:absolute;top:14px;right:54px;z-index:2;width:30px;height:30px;
  border-radius:999px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.fclear:hover{color:var(--fg);background:var(--chip)}
.panel-body{flex:1;overflow-y:auto;padding:20px 4px 24px}
.group{border-bottom:1px solid var(--line)}
.group:last-child{border-bottom:none}
.group>summary{list-style:none;cursor:pointer;padding:12px 18px;font-weight:600;
  font-size:14px;display:flex;justify-content:space-between;align-items:center}
.group>summary::-webkit-details-marker{display:none}
.group>summary .chev{color:var(--muted);transition:transform .15s}
.group[open]>summary .chev{transform:rotate(90deg)}
.group .gfilter{margin:2px 18px 10px;width:calc(100% - 36px);height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:13px}
.group .gfilter:focus{outline:none;border-color:var(--muted)}
.opts{padding:0 14px 14px;display:flex;flex-wrap:wrap;gap:6px}
.opt{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--chip);
  color:var(--fg);border:1px solid transparent;white-space:nowrap}
.opt .n{color:var(--muted);margin-left:5px}
.opt.on{background:var(--chip-on);color:var(--chip-on-fg)}
.opt.on .n{color:var(--chip-on-fg);opacity:.7}

/* ---------- modal ---------- */
#modal[hidden]{display:none}
#modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
#modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
/* sheet fits its content but never exceeds the viewport (minus 24px padding).
   Only .m-desc scrolls; the cover + fixed metadata never do. */
#modal .sheet{position:relative;z-index:1;width:min(760px,100%);
  max-height:calc(100vh - 48px);
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:266px 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch}
#modal .close{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;
  border-radius:999px;background:color-mix(in srgb,var(--card) 65%,transparent);
  backdrop-filter:blur(4px);
  font-size:21px;line-height:1;color:var(--fg);display:flex;align-items:center;justify-content:center}
#modal .close:hover{background:var(--chip)}
/* fixed cover column, top-aligned, tinted backdrop */
.m-cover{display:flex;align-items:flex-start;justify-content:center;padding:28px 24px;
  background:color-mix(in srgb,var(--fg) 4%,var(--card))}
.m-cover img{max-width:100%;box-shadow:var(--shadow);display:block}
.m-cover .ph{width:100%;aspect-ratio:2/3;background:var(--chip);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:14px;font-weight:600}
/* detail column: fixed head/tags + scrollable description */
.m-body{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.m-fixed{flex:0 0 auto;padding:30px 30px 0}
.m-head{margin-bottom:16px}
.m-body h1{font-size:23px;line-height:1.22;margin:6px 0 5px;letter-spacing:-.01em}
.m-body .auth{color:var(--muted);font-size:15px}
.m-body .auth .dot{margin:0 7px;opacity:.6}
.m-series{margin-top:8px;font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.m-series .si{color:var(--fg);opacity:.8}
.m-rating{font-size:17px;letter-spacing:2px;color:var(--star);line-height:1}
.m-rating .off{color:var(--line)}
.m-rating.list{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;display:inline-block}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0}
.m-tags .opt{cursor:pointer}
/* the only scrolling region */
.m-desc{flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:18px 30px 30px;font-size:14.5px;line-height:1.62}
.m-desc p{margin-bottom:11px}
.m-desc p:last-child{margin-bottom:0}
.m-desc b{font-weight:650}
.m-desc i{font-style:italic}
.m-desc ul,.m-desc ol{margin:0 0 11px 1.2em}
.m-desc li{margin-bottom:4px}
.m-desc .none{font-style:italic;color:var(--muted)}

/* ---------- external links in the modal ---------- */
/* title -> Amazon: keep the heading look, reveal underline on hover */
.mtitle-link{color:inherit;text-decoration:none}
.mtitle-link:hover{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
/* author/series -> Wikipedia: inherit muted tone, subtle dotted underline */
.wlink{color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-decoration-thickness:1px;text-underline-offset:2px;
  transition:text-decoration-color .12s,color .12s}
.wlink:hover{color:var(--fg);text-decoration-color:currentColor}
/* italic book titles in the description -> Amazon search */
.tlink{color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-decoration-thickness:1px;text-underline-offset:2px;
  transition:text-decoration-color .12s}
.tlink:hover{text-decoration-color:currentColor}

/* ---------- mobile ---------- */
@media (max-width:640px){
  header{gap:8px;padding:8px 12px}
  .stars{order:1;flex:0 0 auto}
  #filterBtn{order:2}
  .search{order:3;flex:1 1 auto;width:auto;min-width:0}
  .search input{cursor:text}
  .density{display:none}
  #scroller{top:55px;padding:12px}
  /* modal: single column, whole sheet scrolls, cover at top */
  #modal{padding:0}
  #modal .sheet{grid-template-columns:1fr;grid-template-rows:auto auto;
    width:100%;height:100%;max-height:100vh;border-radius:0;overflow-y:auto}
  #modal .m-cover{padding:20px 18px 4px;background:none}
  #modal .m-cover img{max-width:220px}
  .m-body{overflow:visible;min-height:0}
  .m-fixed{padding:18px 18px 0}
  .m-desc{overflow:visible;min-height:0;padding:14px 18px 28px}
}