:root {
  --bg: #faf8f3; --surface: #ffffff; --text: #1f1d1a; --muted: #6b665d;
  --border: #e4dfd3; --accent: #1f6f5c; --accent-soft: #e3f0ec; --mark: #fbe7a1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --surface: #201f1c; --text: #ece8df; --muted: #a39d91;
    --border: #36332d; --accent: #6cc2a8; --accent-soft: #1d3530; --mark: #6b5414;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; font-size: 15px; line-height: 1.7;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { border-bottom: 1px solid var(--border); background: var(--surface); }
header .wrap { display: flex; align-items: baseline; gap: 12px; padding-block: 12px; }
header .brand { font-weight: 600; font-size: 17px; color: var(--text); }
.wrap { max-width: 860px; margin: 0 auto; padding-inline: 16px; }
main { padding-block: 24px 48px; }
footer { padding-block: 16px 32px; border-top: 1px solid var(--border); }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 32px 0 12px; }
.muted { color: var(--muted); font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.tag { display: inline-block; font-size: 12px; padding: 1px 10px; border-radius: 999px;
       background: var(--accent-soft); color: var(--accent); margin: 2px 0 2px 4px; }
.tag.active { background: var(--accent); color: var(--surface); }
form.search { display: flex; gap: 8px; flex-wrap: wrap; }
form.search input, form.search select, form.search button {
  font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); min-width: 0;
}
form.search input { flex: 1 1 260px; }
form.search button { background: var(--accent); color: var(--surface); border-color: var(--accent); cursor: pointer; }
.snippet { font-family: Amiri, serif; font-size: 18px; line-height: 1.9; margin-top: 6px; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.reading p { font-family: Amiri, serif; font-size: 21px; line-height: 2.1; margin: 0 0 14px; text-align: justify; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px;
         border-top: 1px solid var(--border); padding-top: 16px; font-size: 14px; }
ol.toc { padding-inline-start: 20px; }
ol.toc ol { margin: 4px 0 12px; }
details summary { cursor: pointer; font-weight: 600; }

/* Header navigation */
header nav { margin-inline-start: auto; display: flex; gap: 18px; font-size: 14px; }

/* Tarajem (read-only) */
.scholar-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 16px; }
dl.facts dt { color: var(--muted); font-size: 13px; }
dl.facts dd { margin: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
section.card h2 { margin-top: 0; }
.note-body { white-space: pre-wrap; font-family: Amiri, serif; font-size: 19px; line-height: 1.9; margin: 6px 0; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

/* قراءة مقارنة (read-only) */
.study-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 8px 0; font-size: 14px; }
.study-controls select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.study-row { margin: 22px 0 30px; }
.matn-box { display: flex; gap: 10px; align-items: baseline; background: var(--accent-soft); border-radius: 10px; padding: 10px 14px;
            font-family: Amiri, serif; font-size: 21px; line-height: 2; font-weight: 700; }
.matn-box .num { font-family: "Noto Kufi Arabic", sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); min-width: 1.6em; }
.matn-box .matn-text { flex: 1; }
.matn-box .open-link { font-size: 14px; font-weight: 400; }
.shuruh { display: grid; gap: 12px; margin-top: 10px; }
.shuruh.cols-2 { grid-template-columns: 1fr 1fr; }
.shuruh.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) { .shuruh.cols-2, .shuruh.cols-3 { grid-template-columns: 1fr; } }
.sharh { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.sharh-head { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.sharh-section { font-size: 12px; margin: 6px 0 2px; }
.sharh-text { font-family: Amiri, serif; font-size: 18px; line-height: 1.95; max-height: 22em; overflow: hidden;
              -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.sharh-text.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.sharh-text p { margin: 0 0 8px; text-align: justify; }

/* Footnotes (Shamela «حاشية», marked ⸙ by the scraper): smaller and set apart, like the print. */
p.footnote { font-size: 0.78em !important; line-height: 1.75 !important; color: var(--muted, #555);
             border-top: 1px solid var(--border, #ccc); padding-top: 4px; margin-top: 6px; text-align: right; }
.science-tabs { border-top: 1px solid var(--border); }
.science-tabs .wrap { display: flex; gap: 4px; overflow-x: auto; padding-block: 0; }
.science-tabs a { padding: 8px 14px 7px; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.science-tabs a:hover { color: var(--text); text-decoration: none; }
.science-tabs a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.science-tabs .count { font-size: 11px; background: var(--border); color: var(--muted); border-radius: 999px; padding: 0 7px; }
.science-tabs a.active .count { background: var(--accent-soft); color: var(--accent); }
.science-tabs a.all { margin-inline-start: auto; }
[hidden] { display: none !important; }