/* ============================================================
   المكتبة — "Scholar's ink & viridian"
   neutrals biased green-grey; accent = manuscript viridian;
   brass reserved ONLY for search highlights.
   ============================================================ */
:root{
  color-scheme: light dark;
  --paper:#e9ece6; --sheet:#fbfcfa; --sheet-edge:#d9ded2;
  --ink:#1b201c; --ink-soft:#5c655b; --ink-faint:#8a9384;
  --accent:#1f5c4b; --accent-2:#2c7a63; --accent-soft:#e2ebe4;
  --hit:#c8973f; --hit-bg:#f6e6c4;
  --line:#cfd6c8; --topbar:#12241d; --topbar-ink:#eaf1e9;
  --shadow:0 1px 2px rgba(20,30,22,.06), 0 8px 30px rgba(20,30,22,.08);
  --ui:"Segoe UI","Dubai","Noto Kufi Arabic",Tahoma,sans-serif;
  --naskh:"Amiri","Scheherazade New","Noto Naskh Arabic","Traditional Arabic","Sakkal Majalla","Segoe UI",serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#12150f; --sheet:#191d15; --sheet-edge:#2b3227;
    --ink:#e2e7da; --ink-soft:#9aa393; --ink-faint:#6f7867;
    --accent:#5aa98d; --accent-2:#78c2a6; --accent-soft:#1e2a23;
    --hit:#e0b25f; --hit-bg:#3a3220;
    --line:#2c3327; --topbar:#0d1611; --topbar-ink:#dfe8dd;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
  }
}
/* Explicit theme choice (toggle) — wins over the OS preference in both directions. */
:root[data-theme="light"]{
  --paper:#e9ece6; --sheet:#fbfcfa; --sheet-edge:#d9ded2;
  --ink:#1b201c; --ink-soft:#5c655b; --ink-faint:#8a9384;
  --accent:#1f5c4b; --accent-2:#2c7a63; --accent-soft:#e2ebe4;
  --hit:#c8973f; --hit-bg:#f6e6c4;
  --line:#cfd6c8; --topbar:#12241d; --topbar-ink:#eaf1e9;
  --shadow:0 1px 2px rgba(20,30,22,.06), 0 8px 30px rgba(20,30,22,.08);
}
:root[data-theme="dark"]{
  --paper:#12150f; --sheet:#191d15; --sheet-edge:#2b3227;
  --ink:#e2e7da; --ink-soft:#9aa393; --ink-faint:#6f7867;
  --accent:#5aa98d; --accent-2:#78c2a6; --accent-soft:#1e2a23;
  --hit:#e0b25f; --hit-bg:#3a3220;
  --line:#2c3327; --topbar:#0d1611; --topbar-ink:#dfe8dd;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
}
.theme-toggle{width:38px; height:38px; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:rgba(255,255,255,.08); color:var(--topbar-ink); border:1px solid rgba(255,255,255,.14)}
.theme-toggle:hover{background:rgba(255,255,255,.16)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--ui);
  min-height:100vh;
  background-image:radial-gradient(circle at 1px 1px, rgba(31,92,75,.05) 1px, transparent 0);
  background-size:22px 22px;
}
a{color:inherit; text-decoration:none}

/* ————— site top nav ————— */
.nav{
  position:sticky; top:0; z-index:20; background:var(--topbar); color:var(--topbar-ink);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px clamp(14px,4vw,34px); border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .brand{display:flex; align-items:center; gap:11px}
.nav .brand b{font-family:var(--naskh); font-size:1.35rem; font-weight:700}
.nav .brand span{font-size:.8rem; opacity:.6}
.brand-logo{height:38px; width:auto; display:block; border-radius:7px}
.brand-logo.sm{height:30px; border-radius:6px}
.reader-top .home-logo{display:flex; align-items:center}
.nav .spacer{flex:1}
.searchbox{display:flex; flex:0 1 380px; min-width:200px}
.searchbox input{
  flex:1; font-family:var(--naskh); font-size:1rem; color:var(--ink);
  background:var(--sheet); border:1px solid rgba(255,255,255,.14); border-inline-end:none;
  border-radius:0 10px 10px 0; padding:9px 14px; outline:none;
}
.searchbox input::placeholder{color:var(--ink-faint)}
.searchbox button{
  font-family:var(--ui); font-weight:600; cursor:pointer; color:#fff;
  background:var(--accent); border:none; padding:0 16px; border-radius:10px 0 0 10px;
}
.searchbox button:hover{filter:brightness(1.1)}

/* ————— library grid ————— */
.page-wrap{max-width:1100px; margin:0 auto; padding:clamp(20px,4vw,44px) clamp(14px,4vw,28px) 80px}
.page-title{font-family:var(--naskh); font-size:2rem; margin:0 0 6px; color:var(--ink)}
.page-sub{color:var(--ink-soft); margin:0 0 28px; font-size:.95rem}

/* category filter bar */
.filter-bar{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 26px}
.filter-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--naskh); font-size:1.02rem;
  background:var(--sheet); color:var(--ink-soft); border:1px solid var(--sheet-edge);
  border-radius:999px; padding:6px 15px; transition:all .15s ease}
.filter-chip b{font-family:var(--ui); font-size:.74rem; font-weight:700; background:var(--paper);
  color:var(--ink-faint); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums}
.filter-chip:hover{border-color:var(--accent); color:var(--accent)}
.filter-chip.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.filter-chip.on b{background:rgba(255,255,255,.22); color:#fff}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px}
.card .meta .cat{font-size:.75rem; color:var(--accent); background:var(--accent-soft);
  border-radius:999px; padding:2px 9px; white-space:nowrap}
.card{
  display:flex; flex-direction:column; border-radius:12px; overflow:hidden;
  background:var(--sheet); border:1px solid var(--sheet-edge); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 34px rgba(20,30,22,.14)}
.card .spine{
  position:relative; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  padding:22px 18px; text-align:center;
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--topbar) 100%);
  color:#f3efe2;
}
.card .spine::before{ /* binding edge */
  content:""; position:absolute; inset-inline-end:0; top:0; bottom:0; width:8px;
  background:linear-gradient(90deg, rgba(0,0,0,.28), transparent);
}
.card .spine::after{ /* illumination frame */
  content:""; position:absolute; inset:12px; border:1px solid rgba(243,239,226,.28); border-radius:4px;
}
.card .spine h3{position:relative; font-family:var(--naskh); font-size:1.24rem; line-height:1.5; margin:0; text-wrap:balance}
.card .meta{padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.card .meta .pages{font-size:.8rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.card .meta .go{font-size:.82rem; color:var(--accent); font-weight:700}

.card .spine.cover{padding:0}
.card .spine.cover img{width:100%; height:100%; object-fit:cover; display:block}
.card .spine.cover::after{display:none}

/* ————— breadcrumbs + book landing ————— */
.crumbs{font-size:.85rem; color:var(--ink-soft); margin-bottom:18px}
.crumbs a{color:var(--accent)}
.crumbs span{margin:0 4px; color:var(--ink-faint)}
.book-hero{display:grid; grid-template-columns:230px 1fr; gap:32px; align-items:start}
.book-hero-cover{border-radius:12px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:3/4}
.book-hero-cover img{width:100%; height:100%; object-fit:cover; display:block}
.book-hero-cover .spine{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; color:#f3efe2;
  background:linear-gradient(135deg, var(--accent) 0%, var(--topbar) 100%)}
.book-hero-cover .spine h3{font-family:var(--naskh); font-size:1.3rem; line-height:1.5; margin:0}
.book-hero-body h1{font-family:var(--naskh); font-size:2.1rem; margin:0 0 8px; color:var(--ink); text-wrap:balance}
.book-hero-body .by{color:var(--ink-soft); margin:0 0 14px; font-size:1rem}
.book-hero-body .tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.tag{font-size:.82rem; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:4px 12px}
.tag.ghost{background:transparent; border:1px solid var(--line); color:var(--ink-soft)}
.book-hero-body .desc{font-family:var(--naskh); font-size:1.18rem; line-height:2; color:var(--ink);
  margin:0 0 22px; max-width:60ch}
.hero-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn-read{background:var(--accent); color:#fff; font-family:var(--ui); font-weight:700; font-size:1rem;
  padding:12px 22px; border-radius:12px; box-shadow:var(--shadow)}
.btn-read:hover{filter:brightness(1.08)}
.searchbox.inline{flex:0 1 320px}
.searchbox.inline input{background:var(--sheet); border:1px solid var(--line); border-inline-end:none; color:var(--ink)}
.searchbox.inline button{background:var(--accent); color:#fff}
@media (max-width:640px){ .book-hero{grid-template-columns:1fr} .book-hero-cover{max-width:200px; margin:0 auto} }

/* ————— reader ————— */
.reader-top{
  position:sticky; top:0; z-index:20; background:var(--topbar); color:var(--topbar-ink);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:11px clamp(14px,4vw,30px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.reader-top .home{font-size:1.25rem; opacity:.85}
.reader-top .btitle{font-family:var(--naskh); font-size:1.2rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:46vw}
.stage{display:flex; justify-content:center; padding:clamp(18px,4vw,46px) 16px 120px}
.sheet-wrap{width:100%; max-width:760px}
.page-meta{text-align:center; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px; font-variant-numeric:tabular-nums}
.sheet{
  background:var(--sheet); border:1px solid var(--sheet-edge); border-radius:6px; box-shadow:var(--shadow);
  padding:clamp(26px,5vw,54px) clamp(24px,5vw,58px);
  font-family:var(--naskh); color:var(--ink); font-size:1.28rem; line-height:2.2; text-align:justify;
  position:relative;
}
.sheet::after{content:""; position:absolute; top:8%; bottom:8%; inset-inline-end:-1px; width:3px;
  background:linear-gradient(var(--accent), transparent); opacity:.25; border-radius:3px}
.sheet p{margin:0 0 1.05em; text-indent:1.4em}
.sheet p:first-child{text-indent:0}
.sheet mark, .snippet mark{background:var(--hit-bg); color:inherit; border-radius:3px;
  box-shadow:inset 0 -2px 0 var(--hit); padding:0 1px}
.sheet mark.active{background:var(--hit); color:#1b201c}
.empty-note{color:var(--ink-faint); font-family:var(--ui); text-align:center; font-size:1rem}

/* footer controls */
.controls{
  position:fixed; bottom:0; inset-inline:0; z-index:15;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:12px 16px;
  background:color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.nav-btn{font-family:var(--ui); font-size:.9rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; background:var(--sheet); color:var(--accent);
  border:1px solid var(--line); border-radius:10px; padding:8px 15px}
.nav-btn:hover{border-color:var(--accent)}
.nav-btn.disabled{opacity:.4; pointer-events:none}
.jump{display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:.85rem}
.jump input{width:66px; text-align:center; font-family:var(--ui); font-variant-numeric:tabular-nums;
  background:var(--sheet); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:7px}

/* ————— table of contents drawer ————— */
.toc-btn{font-family:var(--ui); font-size:.85rem; font-weight:600; cursor:pointer; color:var(--topbar-ink);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:6px 12px}
.toc-btn:hover{background:rgba(255,255,255,.2)}
.drawer-scrim{position:fixed; inset:0; z-index:25; background:rgba(10,16,12,.42);
  opacity:0; pointer-events:none; transition:opacity .28s}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.toc-drawer{position:fixed; top:0; bottom:0; right:0; width:min(380px,90vw); z-index:30;
  background:var(--sheet); border-inline-start:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column}
.toc-drawer.open{transform:translateX(0)}
.toc-drawer > header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  background:var(--topbar); color:var(--topbar-ink); font-family:var(--naskh); font-size:1.15rem}
.toc-drawer > header .close{background:none; border:none; color:var(--topbar-ink); font-size:1.5rem;
  cursor:pointer; line-height:1; opacity:.8}
.toc-drawer > header .close:hover{opacity:1}
.toc-list{overflow-y:auto; padding:6px}
.toc-item{display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-decoration:none;
  padding:9px 12px; border-radius:8px; color:var(--ink); border:1px solid transparent}
.toc-item:hover{background:var(--accent-soft)}
.toc-item .tt{font-family:var(--naskh); font-size:1.04rem; line-height:1.65}
.toc-item .pn{font-family:var(--ui); font-size:.74rem; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; flex-shrink:0}
.toc-item.lvl-2{padding-inline-start:28px}
.toc-item.lvl-2 .tt{font-size:.95rem; color:var(--ink-soft)}
.toc-item.here{background:var(--accent)}
.toc-item.here .tt, .toc-item.here .pn{color:#fff}

/* ————— search results ————— */
.results-list{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.result{
  display:block; background:var(--sheet); border:1px solid var(--sheet-edge); border-radius:10px;
  padding:14px 18px; box-shadow:var(--shadow);
}
.result:hover{border-color:var(--accent)}
.result .rp{font-family:var(--ui); font-size:.74rem; font-weight:700; color:var(--accent);
  letter-spacing:.05em; margin-bottom:6px}
.result .snippet{font-family:var(--naskh); font-size:1.1rem; line-height:1.9; color:var(--ink)}
.result-group{margin-bottom:26px}
.result-group > .gh{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.result-group > .gh h3{font-family:var(--naskh); font-size:1.3rem; margin:0}
.result-group > .gh .c{font-size:.8rem; color:var(--ink-soft)}
.count-line{color:var(--ink-soft); margin:6px 0 0; font-size:.92rem}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:560px){
  .reader-top .btitle{max-width:38vw}
  .sheet{font-size:1.18rem; line-height:2.08}
  /* keep the theme toggle on row 1 next to the title; push search to its own row */
  .nav .searchbox, .reader-top .searchbox{order:1; flex:1 1 100%; min-width:0}
}