/* ============================================================
   IJMA AI — component styles
   ============================================================ */

/* ---- stance label (used in comparison + shape view) ---- */
.stance {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .45em;
}
.stance::before { content:''; width:7px; height:7px; flex:none; transform: rotate(45deg); }
.stance.permit   { color:#2f6a4f; } .stance.permit::before   { background:#2f6a4f; }
.stance.prohibit { color:#9a3d3d; } .stance.prohibit::before { background:#9a3d3d; }
.stance.mid      { color:#8a6a1f; } .stance.mid::before      { background:#8a6a1f; border-radius:50%; transform:none; }

/* ---- consensus status badge ---- */
.status-badge {
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--mono); font-size:12.5px; letter-spacing:.05em;
  padding:.5em 1em; border-radius:var(--r-pill); border:1px solid;
  text-transform:uppercase; font-weight:500;
}
.status-badge .glyph { width:14px; height:14px; flex:none; }
.status-ijma     { color:var(--status-ijma);     border-color:color-mix(in oklab,var(--status-ijma) 40%,transparent);     background:color-mix(in oklab,var(--status-ijma) 9%,var(--card)); }
.status-majority { color:var(--status-major);    border-color:color-mix(in oklab,var(--status-major) 40%,transparent);    background:color-mix(in oklab,var(--status-major) 9%,var(--card)); }
.status-ikhtilaf { color:var(--status-ikhtilaf); border-color:color-mix(in oklab,var(--status-ikhtilaf) 40%,transparent); background:color-mix(in oklab,var(--status-ikhtilaf) 9%,var(--card)); }
.status-shifted  { color:var(--ink); border-color:var(--ink); background:color-mix(in oklab,var(--ink) 6%,var(--card)); }
.status-na       { color:var(--ink-3); border-color:var(--rule-2); background:var(--paper-2); }

/* ---- source-type tag ---- */
.src-tag {
  font-family: var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4em; color:var(--ink-3);
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:.25em .7em; background:var(--paper-2);
}
.src-tag .tick { width:6px; height:6px; border-radius:1px; flex:none; }
.src-classical   .tick { background:#3b4b80; } .src-classical   { color:#3b4b80; }
.src-comparative .tick { background:#6d4470; } .src-comparative { color:#6d4470; }
.src-modern      .tick { background:#2e6a6e; } .src-modern      { color:#2e6a6e; }
.src-quran       .tick { background:#2f6a4f; } .src-quran       { color:#2f6a4f; }
.src-hadith      .tick { background:#8a6a1f; } .src-hadith      { color:#8a6a1f; }
.src-reasoning   .tick { background:#a85a35; } .src-reasoning   { color:#a85a35; }

/* grading pill */
.grading { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:.15em .6em; border-radius:var(--r-pill); border:1px solid var(--rule-2); color:var(--ink-3); }
.grading.sahih    { color:#2f6a4f; border-color:color-mix(in oklab,#2f6a4f 35%,transparent); }
.grading.hasan    { color:#8a6a1f; border-color:color-mix(in oklab,#8a6a1f 35%,transparent); }
.grading.daif,.grading.disputed { color:#9a3d3d; border-color:color-mix(in oklab,#9a3d3d 35%,transparent); }

/* single-source marker */
.single-mark {
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#9a3d3d; border:1px dashed color-mix(in oklab,#9a3d3d 45%,transparent);
  padding:.2em .65em; border-radius:var(--r-pill); background:color-mix(in oklab,#9a3d3d 5%,var(--card));
}

/* ---- evidence (collapsible) ---- */
.evidence { border-top:1px solid var(--rule); margin-top:.7rem; }
.evidence > summary {
  list-style:none; cursor:pointer; user-select:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:.6rem 0 .2rem; display:flex; align-items:center; gap:.5em;
}
.evidence > summary::-webkit-details-marker { display:none; }
.evidence > summary .chev { transition:transform .2s; }
.evidence[open] > summary .chev { transform:rotate(90deg); }
.evidence > summary:hover { color:var(--ink); }
.ev-item { padding:.6rem 0; border-top:1px dotted var(--rule); }
.ev-item:first-of-type { border-top:0; }
.ev-head { display:flex; flex-wrap:wrap; align-items:center; gap:.5em; margin-bottom:.3em; }
.ev-ref { font-weight:600; font-size:14.5px; }
.ev-work { font-style:italic; font-weight:500; }
.ev-author { color:var(--ink-3); font-size:13.5px; }
.ev-text { font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.ev-method { font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.02em; }

/* ---- claimed-vs-demonstrated consensus ---- */
.claim-slip { position:relative; border:1px solid var(--rule-2); border-radius:var(--r-card); background:var(--card); padding:1.3rem 1.4rem; box-shadow:var(--shadow-soft); }
.claim-slip.is-claimed { border-style:dashed; border-color:color-mix(in oklab,var(--status-claimed) 50%,transparent); background:color-mix(in oklab,var(--status-claimed) 5%,var(--card)); }
.claim-slip.is-demonstrated { border-color:color-mix(in oklab,var(--status-ijma) 45%,transparent); background:color-mix(in oklab,var(--status-ijma) 5%,var(--card)); }
.claim-stamp {
  position:absolute; top:1.1rem; right:1.2rem;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.3em .8em; border-radius:var(--r-pill); border:1px solid;
}
.claim-stamp.claimed { color:var(--status-claimed); border-color:var(--status-claimed); }
.claim-stamp.demonstrated { color:var(--status-ijma); border-color:var(--status-ijma); }
.claim-contest {
  margin-top:.9rem; padding-top:.85rem; border-top:1px dashed color-mix(in oklab,#9a3d3d 35%,transparent);
  display:flex; gap:.7em; align-items:flex-start;
}
.claim-contest .x { color:#9a3d3d; font-family:var(--mono); flex:none; margin-top:.1em; }

/* ---- comparison columns — floating rounded panels, not a fused grid ---- */
.cmp-cols { display:grid; gap:.9rem; background:transparent; border:0; border-radius:0; overflow:visible; }
.cmp-col { background:var(--card); padding:0; min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--hair); border-radius:var(--r-panel); overflow:hidden; box-shadow:var(--shadow-soft); }
.cmp-col-head { padding:1rem 1.05rem; background:color-mix(in oklab,var(--sc) 11%,var(--card));
  border-bottom:1px solid color-mix(in oklab,var(--sc) 32%,transparent); }
.cmp-col-body { padding:.9rem 1.05rem 1.1rem; flex:1; }
.cmp-school-name { font-weight:700; font-size:17px; letter-spacing:.01em; color:var(--sc); }
.cmp-school-meta { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; margin-top:.15em; }
.cmp-claim { font-size:15.5px; line-height:1.45; margin:.6rem 0 .2rem; font-weight:500; }
.cmp-detail { font-size:14px; color:var(--ink-2); line-height:1.5; }
.dissent-flag { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#9a3d3d;
  border:1px solid color-mix(in oklab,#9a3d3d 40%,transparent); padding:.15em .6em; border-radius:var(--r-pill); }

/* ---- shape (grouped-by-stance) view ---- */
.shape-group { margin-bottom:1.4rem; }
.shape-group-head { display:flex; align-items:baseline; gap:.8em; padding-bottom:.5rem; margin-bottom:.9rem; border-bottom:1px solid var(--rule); }
.shape-count { font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.shape-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.8rem 2.8rem; background:transparent; border:0; border-radius:0; overflow:visible; }
.shape-card { background:transparent; padding:0; border:0; border-radius:0; box-shadow:none; }
.shape-card > div:first-child { padding-bottom:.45rem; margin-bottom:.55rem; border-bottom:1px solid var(--hair); }

/* ---- matrix view ---- */
.matrix { width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; background:var(--card);
  border:1px solid var(--hair); border-radius:var(--r-panel); overflow:hidden; box-shadow:var(--shadow-soft); }
.matrix th, .matrix td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.matrix tbody tr:last-child td { border-bottom:0; }
.matrix thead th { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--rule-2); background:var(--paper-2); }
.matrix tbody tr:hover { background:color-mix(in oklab,var(--paper-2) 60%,transparent); }
.matrix .m-school { white-space:nowrap; border-left:4px solid var(--sc); padding-left:.9rem; }

/* ---- diachronic then/now ---- */
.dia-split { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.dia-panel { padding:1.4rem 1.5rem; }
.dia-panel.then { background:color-mix(in oklab,var(--ink) 5%,var(--card)); }
.dia-panel.now  { background:var(--card); }
.dia-gap { width:1px; background:var(--rule-2); position:relative; }
.dia-gap .gap-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(0deg);
  background:var(--paper); border:1px solid var(--rule-2); border-radius:100px; padding:.4em .8em;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.dia-school-row { display:flex; align-items:center; gap:.6em; padding:.4rem 0; border-top:1px dotted var(--rule); }
.dia-school-row:first-of-type { border-top:0; }
.dia-arrow-row { display:grid; grid-template-columns:130px 1fr; gap:.8em; align-items:center; padding:.5rem 0; border-top:1px dotted var(--rule); }

/* explanation cards */
.expl-card { background:var(--card); border:1px solid var(--hair); border-radius:var(--r-panel); padding:1.3rem 1.4rem; position:relative; box-shadow:var(--shadow-soft); }
.expl-tag { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--paper); background:var(--ink); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; }

/* header / nav */
.site-head { position:sticky; top:0; z-index:50; background:color-mix(in oklab,var(--paper) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); }
.brandmark { display:flex; align-items:center; gap:.6em; cursor:pointer; }
.brandmark .glyph { width:30px; height:30px; }
.brandmark .name { font-weight:700; font-size:19px; letter-spacing:.01em; }
.brandmark .name .ar { font-size:16px; color:var(--ink-3); margin-left:.4em; }

/* search */
.search-wrap { position:relative; display:flex; align-items:center; }
.search-wrap svg { position:absolute; left:1.4rem; color:var(--ink-3); pointer-events:none; }
.search-input {
  font-family:var(--serif); font-size:18px; color:var(--ink);
  width:100%; padding:1rem 1.4rem 1rem 3.4rem; background:var(--card);
  border:1px solid var(--rule-2); border-radius:var(--r-pill); outline:none;
  box-shadow:var(--shadow-soft);
}
.search-input::placeholder { color:var(--ink-4); }
.search-input:focus { border-color:var(--ink-3); box-shadow:0 0 0 4px color-mix(in oklab,var(--link) 12%,transparent); }
.search-results { position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-panel); box-shadow:var(--shadow-lift); overflow:hidden; z-index:30; padding:.4rem; }
.search-res-item { padding:.7rem .9rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1em; border-radius:var(--r-sm); }
.search-res-item:hover, .search-res-item.active { background:var(--paper-2); }

/* misc */
.section-label { display:flex; align-items:baseline; gap:.8em; margin-bottom:1.1rem; }
.section-label h2 { font-size:15px; font-weight:600; margin:0; }
.tab { font-family:var(--mono); font-size:12px; letter-spacing:.05em; padding:.5em .9em; border:1px solid transparent; border-bottom:2px solid transparent; cursor:pointer; color:var(--ink-3); background:none; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--ink); border-bottom-color:var(--ink); }

/* ---- browse list ---- */
.browse-list { border-top:1px solid var(--rule); }
.browse-row { width:100%; text-align:left; cursor:pointer; background:none; border:0;
  border-bottom:1px solid var(--rule); padding:1.3rem .4rem; display:flex; gap:1.5rem; align-items:center;
  font-family:inherit; color:inherit; transition:background .12s, padding .12s; }
.browse-row:hover { background:color-mix(in oklab,var(--paper-2) 70%,transparent); padding-left:1rem; padding-right:1rem; }
.browse-row-meta { display:flex; align-items:center; gap:.7rem; flex:none; }
.rowtag { display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:.3em .75em; background:var(--paper-2); white-space:nowrap; }

/* ---- filter cards ---- */
.filter-card { flex:1 1 300px; display:flex; align-items:center; gap:1rem; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-card); padding:1.2rem 1.5rem;
  font-family:inherit; color:var(--ink-3); box-shadow:var(--shadow-soft); transition:all .15s; }
.filter-card:hover { border-color:var(--rule-2); color:var(--ink-2); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.filter-card.on { background:var(--ink); color:var(--paper); border-color:var(--ink); transform:none; }
.filter-card.on .fc-sub { color:color-mix(in oklab,var(--paper) 70%,transparent); }
.fc-title { font-size:16px; font-weight:600; color:inherit; }
.filter-card .fc-title { color:var(--ink); }
.filter-card.on .fc-title { color:var(--paper); }
.fc-sub { font-family:var(--mono); font-size:11px; letter-spacing:.03em; margin-top:.2em; color:var(--ink-3); }
.fc-check { margin-left:auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid currentColor; flex:none; }

/* ---- researchers page ---- */
.rsch-photo-note { display:inline-flex; align-items:center; gap:.6em; margin-top:1.2rem;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-3);
  background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-pill); padding:.55em 1em; }
.rsch-sec-head { margin-bottom:1.4rem; }
.rsch-sec-head h2 { font-size:21px; font-weight:700; margin:0 0 .4rem; letterSpacing:-0.01em; }
.rsch-sec-head p { font-size:15px; color:var(--ink-2); margin:0; max-width:70ch; line-height:1.5; }
.rsch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:1.2rem; }
.rsch-card { display:flex; gap:1.3rem; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-card); padding:1.5rem 1.6rem; box-shadow:var(--shadow-soft); }
.rsch-avatar-wrap { flex:none; position:relative; width:88px; height:88px; }
.rsch-monogram { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#ece3cf; box-shadow:inset 0 0 0 1px #d8caa9;
  font-family:var(--serif); font-weight:700; font-size:32px; letter-spacing:.02em; color:#5d4a2c; user-select:none; }
.rsch-avatar-wrap image-slot { position:relative; z-index:1; border-radius:50%; box-shadow:0 0 0 1px var(--rule-2); }
.rsch-body { min-width:0; flex:1; }
.rsch-name { font-size:19px; font-weight:700; margin:0 0 .15rem; letter-spacing:-0.01em; line-height:1.2; }
.rsch-role { font-size:14px; color:var(--ink-2); }
.rsch-affil { font-size:13.5px; margin-top:.1rem; }
.rsch-focus { display:flex; align-items:baseline; gap:.7em; margin:.9rem 0 .2rem;
  padding:.6rem 1rem; background:color-mix(in oklab,var(--link) 7%,var(--card)); border-radius:var(--r-pill);
  font-size:14.5px; font-weight:500; color:var(--ink); }
.rsch-focus .eyebrow { flex:none; }
.rsch-bio { font-size:14.5px; color:var(--ink-2); line-height:1.55; margin:.8rem 0; }
.rsch-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.rsch-tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-3);
  border:1px solid var(--rule-2); border-radius:100px; padding:.25em .7em; background:var(--paper-2); }
.rsch-works { border-top:1px dotted var(--rule); padding-top:.8rem; margin-bottom:.9rem; }
.rsch-works ul { margin:0; padding-left:1.1em; }
.rsch-works li { font-size:13.5px; color:var(--ink-2); line-height:1.5; font-style:italic; margin-bottom:.25rem; }
.rsch-links { display:flex; flex-wrap:wrap; gap:.5rem; }
.link-chip { display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  color:var(--link); border:1px solid color-mix(in oklab,var(--link) 35%,transparent); border-radius:var(--r-pill); padding:.4em .85em;
  background:var(--card); transition:background .12s, border-color .12s; text-decoration:none; }
.link-chip:hover { background:color-mix(in oklab,var(--link) 8%,var(--card)); border-color:var(--link); text-decoration:none; }
.link-chip.is-dead { color:var(--ink-4); border-color:var(--rule); cursor:default; }
@media (max-width:520px){ .rsch-card { flex-direction:column; } .rsch-grid { grid-template-columns:1fr; } }

/* ============================================================
   APPARATUS — small-caps serif for every short label & tag.
   Replaces the former monospace. Spectral SC renders lowercase as
   small caps, so text-transform:lowercase yields an even small-caps
   line regardless of source casing. Appended last so it wins.
   ============================================================ */
.school-chip, .stance, .status-badge, .src-tag, .grading, .single-mark,
.dissent-flag, .tab, .rowtag, .fc-sub, .rsch-tag, .link-chip,
.cmp-school-meta, .claim-stamp, .shape-count, .evidence > summary {
  font-family: var(--label);
  text-transform: lowercase;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .035em;
  font-weight: 500;
}
/* slightly tighter / heavier for the loud status chips */
.status-badge, .claim-stamp, .dissent-flag { font-weight: 600; letter-spacing: .05em; }
.stance { font-weight: 600; letter-spacing: .045em; }
/* school names keep their colour weight */
.school-chip { font-weight: 600; }
.cmp-school-meta, .shape-count { font-weight: 500; letter-spacing: .03em; }
/* small-caps numerals read better as lining figures */
.shape-count, .grading { font-feature-settings: "smcp" 1, "lnum" 1; }

/* ============================================================
   CANONICAL TEXTS PAGE
   ============================================================ */
/* school selector */
.texts-school-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.texts-school-tab { display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  background:var(--card); border:1px solid var(--rule-2); border-radius:var(--r-pill);
  padding:.5em .9em; font-size:14px; color:var(--ink-2); transition:background .12s,border-color .12s; }
.texts-school-tab .dot { width:9px; height:9px; border-radius:50%; background:var(--sc); flex:none; }
.texts-school-tab .ts-name { font-weight:600; color:var(--ink); }
.texts-school-tab .ts-ar { font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.texts-school-tab .ts-count { font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:var(--paper-2); border-radius:100px; padding:.05em .55em; }
.texts-school-tab:hover { border-color:color-mix(in oklab,var(--sc) 45%,var(--rule-2)); }
.texts-school-tab.active { background:color-mix(in oklab,var(--sc) 10%,var(--card));
  border-color:color-mix(in oklab,var(--sc) 50%,transparent); }

/* active school header + blurb */
.texts-school-head { border-left:4px solid var(--sc); padding:.2rem 0 .2rem 1rem; }
.texts-school-blurb { font-size:16px; color:var(--ink-2); line-height:1.6; max-width:74ch; margin:1rem 0 .4rem; }
.texts-group-head { font-family:var(--label,var(--mono)); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--rule); padding-bottom:.5rem; margin-bottom:1rem; }

/* book grid + card */
.book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:1.1rem; }
.book-card { display:flex; gap:1.1rem; background:var(--card); border:1px solid var(--hair);
  border-left:3px solid color-mix(in oklab,var(--sc) 55%,var(--hair)); border-radius:var(--r-card);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow-soft); }
.book-card.is-lost { opacity:.72; border-left-style:dashed; }

.book-cover-wrap { flex:none; position:relative; width:92px; height:128px; }
.book-monogram { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  border-radius:4px; background:linear-gradient(160deg,#efe7d4,#e4d8bd); box-shadow:inset 0 0 0 1px #d3c39f, inset 7px 0 0 -4px color-mix(in oklab,var(--sc) 55%,#c9b88e);
  font-family:var(--serif); font-weight:700; font-size:30px; color:#5d4a2c; user-select:none; }
.book-cover-wrap image-slot { position:relative; z-index:1; border-radius:4px; box-shadow:0 0 0 1px var(--rule-2); }

.book-body { min-width:0; flex:1; }
.book-title-row { display:flex; align-items:flex-start; gap:.5em; }
.book-title { font-size:16px; font-weight:700; line-height:1.25; margin:0 0 .2rem; letter-spacing:-0.005em; }
.book-author { font-size:13.5px; color:var(--ink-2); }
.book-d { color:var(--ink-4); font-family:var(--mono); font-size:12px; }
.book-layer { display:inline-block; margin-top:.5rem; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.02em; color:var(--sc); border:1px solid color-mix(in oklab,var(--sc) 35%,var(--rule-2));
  background:color-mix(in oklab,var(--sc) 7%,var(--card)); border-radius:100px; padding:.2em .65em; }
.book-lost-tag { flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); border:1px dashed var(--rule-2); border-radius:100px; padding:.15em .55em; }
.book-note { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:.6rem 0 0; }

@media (max-width:520px){ .book-grid { grid-template-columns:1fr; } }

/* ============================================================
   IBN AL-MUNDHIR — al-Ijmāʿ browser
   ============================================================ */
.mundhir-controls { display:flex; gap:.8rem; flex-wrap:wrap; align-items:stretch; }
.search-box { position:relative; display:flex; align-items:center; }
.search-ic { position:absolute; left:1rem; color:var(--ink-4); pointer-events:none; display:flex; }
.mundhir-select { font-family:inherit; font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:.6rem 1.1rem; cursor:pointer; min-width:200px; }
.mundhir-toggle { flex:0 0 auto; }

.mundhir-book { margin-top:2rem; }
.mundhir-book-head { display:flex; align-items:baseline; gap:.8em; border-bottom:1px solid var(--rule); padding-bottom:.5rem; margin-bottom:.4rem; }
.mundhir-book-head h2 { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.005em; }
.mundhir-book-count { font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:var(--paper-2); border-radius:100px; padding:.1em .6em; }

.mundhir-list { }
.mundhir-row { display:flex; gap:1rem; padding:.85rem .3rem; border-bottom:1px solid var(--rule); }
.mundhir-row:hover { background:color-mix(in oklab,var(--paper-2) 60%,transparent); }
.mundhir-row.has-dissent { border-left:3px solid color-mix(in oklab,#9a3d3d 55%,transparent); padding-left:.8rem;
  background:color-mix(in oklab,#9a3d3d 3.5%,transparent); }
.mundhir-num { flex:none; width:2.6em; text-align:right; font-family:var(--mono); font-size:12px;
  color:var(--ink-4); padding-top:.15rem; font-feature-settings:"lnum" 1; }
.mundhir-body { min-width:0; flex:1; }
.mundhir-en { font-size:15.5px; line-height:1.45; color:var(--ink); }
.mundhir-ar { font-size:13px; color:var(--ink-3); margin-top:.2rem; }
.mundhir-dissent { display:flex; align-items:flex-start; gap:.5em; margin-top:.5rem; font-size:13px;
  color:var(--ink-2); line-height:1.45; }
.mundhir-dissent .x { flex:none; color:#9a3d3d; margin-top:.15rem; }
.mundhir-dissent strong { color:#9a3d3d; font-weight:600; letter-spacing:.02em; }

/* ---- al-Ijmāʿ FAQ accordion ---- */
.mundhir-faq { margin-top:1.2rem; padding:1.5rem; background:var(--paper-2);
  border:1px solid var(--hair); border-radius:var(--r-card); }
.faq-cats { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.faq-cat-btn { font-family:var(--label,var(--mono)); font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-2); background:var(--card); border:1px solid var(--rule-2);
  border-radius:var(--r-pill); padding:.3em .8em; cursor:pointer; }
.faq-cat-btn.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.faq-list { display:flex; flex-direction:column; gap:.5rem; }
.faq-item { background:var(--card); border:1px solid var(--rule-2); border-radius:var(--r-panel); overflow:hidden; }
.faq-item.open { border-color:color-mix(in oklab,var(--link) 40%,var(--rule-2)); }
.faq-q { width:100%; display:flex; align-items:center; gap:.8em; text-align:left; cursor:pointer;
  background:none; border:0; padding:.9rem 1.1rem; font-family:inherit; }
.faq-q:hover { background:color-mix(in oklab,var(--paper-2) 60%,transparent); }
.faq-cat { flex:none; font-family:var(--label,var(--mono)); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--link); border:1px solid color-mix(in oklab,var(--link) 30%,var(--rule-2));
  border-radius:100px; padding:.2em .6em; }
.faq-qtext { flex:1; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.faq-chev { flex:none; color:var(--ink-4); transition:transform .15s; }
.faq-item.open .faq-chev { transform:rotate(90deg); }
.faq-a { padding:0 1.1rem 1.1rem; }
.faq-ar { font-family:var(--mono); font-size:13px; color:var(--ink-3); margin-bottom:.5rem; }
.faq-a p { margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:74ch; }

/* ---- FAQ link card on the al-Ijmāʿ page ---- */
.mundhir-faq-link { display:flex; align-items:center; gap:1rem; width:100%; text-align:left; cursor:pointer;
  margin-top:1.4rem; padding:1.1rem 1.3rem; background:var(--card); }
.mundhir-faq-link:hover { border-color:color-mix(in oklab,var(--link) 40%,var(--rule-2)); }
.mundhir-faq-ic { flex:none; display:flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:10px; background:color-mix(in oklab,var(--link) 10%,var(--card)); color:var(--link); }

/* ============================================================
   CONCEPTS — index cards + live scripture references
   ============================================================ */
.concept-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.concept-card { position:relative; overflow:hidden; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--hair); border-top:3px solid var(--accent,var(--link)); border-radius:var(--r-card);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow-soft); transition:box-shadow .15s,transform .1s; }
.concept-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.concept-card > :not(.concept-card-art) { position:relative; z-index:1; }
.concept-card-art { position:absolute; inset:0 0 0 30%; z-index:0; pointer-events:none;
  background-size:cover; background-position:center top; opacity:.4;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 60%); mask-image:linear-gradient(to right, transparent, #000 60%); }
.concept-card:hover .concept-card-art { opacity:.55; }
.concept-card-ar { font-family:var(--mono); font-size:21px; color:var(--accent,var(--link)); margin-bottom:.25rem; }
.concept-card-title { font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.concept-card-translit { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-bottom:.55rem; }
.concept-card-blurb { font-size:13px; color:var(--ink-2); line-height:1.5; margin:0 0 .7rem; }
/* category tag — which family of the picture a concept belongs to */
.concept-cat-tag { display:inline-block; font-family:var(--label,var(--mono)); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent,var(--ink-3)); border:1px solid color-mix(in oklab,var(--accent,var(--rule)) 35%,var(--rule-2));
  background:color-mix(in oklab,var(--accent,var(--card)) 7%,var(--card)); border-radius:100px; padding:.25em .7em; }
.concept-card-go { display:inline-flex; align-items:center; gap:.4em; font-family:var(--label,var(--mono));
  font-size:12px; letter-spacing:.04em; color:var(--accent,var(--link)); }

.cncpt-count { font-family:var(--mono); font-size:13px; color:var(--ink-3); background:var(--paper-2);
  border-radius:100px; padding:.1em .55em; margin-left:.5em; vertical-align:2px; font-weight:500; }
.cncpt-muted { font-size:13px; color:var(--ink-3); font-style:italic; }
.cncpt-loading { display:flex; align-items:center; gap:.6em; color:var(--ink-2); font-size:15px; padding:1rem 0; }
.cncpt-err { color:#9a3d3d; font-size:15px; padding:.8rem 0; display:flex; align-items:center; gap:.8em; }
.cncpt-loadbox { background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r-card); padding:1.3rem 1.4rem; }
.spinner { width:15px; height:15px; border:2px solid var(--rule-2); border-top-color:var(--link);
  border-radius:50%; display:inline-block; animation:cncpt-spin .7s linear infinite; }
@keyframes cncpt-spin { to { transform:rotate(360deg); } }

/* verse rows */
.verse-list { border-top:1px solid var(--rule); }
.verse-row { border-bottom:1px solid var(--rule); }
.verse-head { width:100%; display:flex; align-items:baseline; gap:.9em; text-align:left; cursor:pointer;
  background:none; border:0; padding:.8rem .3rem; font-family:inherit; }
.verse-head:hover { background:color-mix(in oklab,var(--paper-2) 60%,transparent); }
.verse-ref { flex:none; font-family:var(--mono); font-size:12px; color:var(--link); font-weight:600; min-width:4.5em; }
.verse-surah { flex:none; font-family:var(--label,var(--mono)); font-size:11px; letter-spacing:.03em;
  color:var(--ink-3); min-width:7em; }
.verse-en { flex:1; font-size:15px; line-height:1.5; color:var(--ink); }
.verse-chev { flex:none; color:var(--ink-4); align-self:center; transition:transform .15s; }
.verse-row.open .verse-chev { transform:rotate(90deg); }
.verse-ar-wrap { padding:0 .3rem 1rem 5.4em; }
.verse-ar { font-family:var(--arabic); font-size:26px; line-height:2; color:var(--ink); text-align:right; }
/* original-language text for non-Arabic scriptures (Sanskrit, Pāli) */
.verse-orig { font-family:var(--serif); font-size:17px; line-height:1.9; color:var(--ink); text-align:left; }

/* hadith cards */
.hadith-coll-head { display:flex; align-items:baseline; gap:.8em; border-bottom:1px solid var(--rule);
  padding-bottom:.4rem; margin-bottom:.8rem; }
.hadith-coll-head strong { font-size:16px; }
.hadith-list { display:flex; flex-direction:column; gap:.7rem; }
.hadith-card { background:var(--card); border:1px solid var(--hair); border-radius:var(--r-panel); padding:.9rem 1.1rem; }
.hadith-head { display:flex; align-items:center; gap:.7em; flex-wrap:wrap; margin-bottom:.45rem; }
.hadith-coll { font-weight:600; font-size:13px; color:var(--ink); }
.hadith-ref { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.hadith-grade { font-family:var(--label,var(--mono)); font-size:10px; letter-spacing:.04em; text-transform:lowercase;
  color:var(--status-ijma); border:1px solid color-mix(in oklab,var(--status-ijma) 35%,var(--rule-2));
  background:color-mix(in oklab,var(--status-ijma) 8%,var(--card)); border-radius:100px; padding:.15em .6em; }
.hadith-text { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-bottom:.6rem; }
.hadith-sources { display:flex; align-items:center; gap:.55em; flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:.5rem; margin-top:.1rem; }
.hadith-src-nav { background:none; border:1px solid var(--hair); border-radius:4px; padding:.1em .45em;
  font-size:13px; color:var(--ink-3); cursor:pointer; line-height:1; }
.hadith-src-nav:hover { border-color:var(--ink-3); color:var(--ink); }
.hadith-src-count { font-family:var(--mono); font-size:10.5px; color:var(--ink-4); margin-left:auto; }
/* quran term frequency pills */
.quran-freq { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.quran-freq-pill { display:inline-flex; align-items:center; gap:0; border-radius:100px; overflow:hidden;
  border:1px solid var(--hair); font-size:11.5px; cursor:pointer; padding:0; background:none;
  transition:border-color .12s, box-shadow .12s; }
button.quran-freq-pill:hover { border-color:color-mix(in oklab,var(--link) 45%,var(--hair)); }
.quran-freq-pill.active { border-color:var(--link); box-shadow:0 0 0 1px var(--link); }
.quran-freq-term { padding:.2em .55em; background:var(--paper-2); color:var(--ink-2); font-family:var(--label,var(--mono));
  letter-spacing:.02em; }
.quran-freq-pill.active .quran-freq-term { background:color-mix(in oklab,var(--link) 16%,var(--paper-2)); color:var(--ink); }
.quran-freq-n { padding:.2em .55em; background:color-mix(in oklab,var(--link) 10%,var(--paper-2));
  color:var(--link); font-family:var(--mono); font-weight:600; }

/* per-concept comparison matrix */
.cmp-matrix { display:flex; flex-direction:column; gap:.4rem; max-width:60ch; }
.cmp-row { display:flex; align-items:center; gap:.8rem; width:100%; background:none; border:0; cursor:pointer;
  padding:.3rem .4rem; border-radius:6px; text-align:left; }
.cmp-row:hover { background:var(--paper-2); }
.cmp-label { flex:0 0 7.5em; font-size:13px; color:var(--ink-2); }
.cmp-bar-wrap { flex:1 1 auto; height:14px; background:var(--paper-2); border-radius:100px; overflow:hidden; }
.cmp-bar { display:block; height:100%; border-radius:100px; min-width:2px;
  background:color-mix(in oklab, var(--accent,var(--link)) 70%, var(--paper)); transition:width .5s ease; }
.cmp-n { flex:0 0 3em; text-align:right; font-family:var(--mono); font-size:12px; color:var(--ink-3); }

/* concept page hero — faded thematic painting in the blank space beside the title */
.concept-hero { position:relative; min-height:240px; }
.concept-hero-text { position:relative; z-index:1; }
.concept-hero-art { position:absolute; inset:-1.5rem -1rem -1.5rem 0; left:38%; pointer-events:none;
  border-radius:var(--r-card); overflow:hidden; }
.concept-hero-img { position:absolute; inset:0; background-size:cover; background-position:center top; opacity:.55;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 38%), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 38%), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.concept-hero-credit { position:absolute; right:.4rem; bottom:.2rem; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.03em; color:var(--ink-4); opacity:.7; }
@media (max-width:760px) { .concept-hero { min-height:0; } .concept-hero-art { display:none; } }

/* concept page Qurʾan / Hadith tabs */
.cncpt-tabs { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.4rem 0; border-bottom:1px solid var(--rule); margin-top:2.2rem; }
/* each tradition group sits together over a thin coloured underline — groups
   abut with no gap, distinguished only by the underline colour */
.cncpt-tabgroup { display:flex; border-bottom:2px solid var(--grp, transparent); margin-bottom:-1px; }
.cncpt-tabgroup .tab.active { border-bottom-color:var(--grp, var(--ink)); }
.cncpt-tabgroup .tab.active { color:var(--grp, var(--ink)); }

/* outbound verse / hadith reference links */
a.verse-ref-link { text-decoration:none; }
a.verse-ref-link:hover { text-decoration:underline; }
a.hadith-ref-link { text-decoration:none; color:var(--link); }
a.hadith-ref-link:hover { text-decoration:underline; }

/* compact quick-filters beside the Browse header */
.browse-quickfilters { display:flex; gap:.5rem; flex-wrap:wrap; flex:none; padding-top:.3rem; }
.quickfilter { display:inline-flex; align-items:center; gap:.45em; font-family:var(--label,var(--mono));
  font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); background:var(--card);
  border:1px solid var(--hair); border-radius:100px; padding:.4em .9em; cursor:pointer; transition:all .12s; }
.quickfilter:hover { border-color:var(--ink-3); color:var(--ink); }
.quickfilter.on { background:color-mix(in oklab,var(--link) 12%,var(--card)); border-color:var(--link); color:var(--link); }

/* mundhir book-category sidebar */
.mundhir-layout { display:flex; gap:2rem; align-items:flex-start; }
.mundhir-side { flex:0 0 230px; position:sticky; top:5rem; max-height:calc(100vh - 6rem); overflow-y:auto;
  border-right:1px solid var(--rule); padding-right:1rem; }
.mundhir-side-title { font-family:var(--label,var(--mono)); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .6rem; }
.mundhir-side-item { display:flex; align-items:baseline; gap:.5em; width:100%; text-align:left; background:none;
  border:0; cursor:pointer; padding:.32rem .5rem; border-radius:6px; font-size:13.5px; color:var(--ink-2); }
.mundhir-side-item:hover { background:var(--paper-2); color:var(--ink); }
.mundhir-side-item.active { background:var(--paper-2); color:var(--ink); font-weight:600; }
.mundhir-side-item .n { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-4); }
.mundhir-faq-btn { font-family:var(--label,var(--mono)); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--link); border:1px solid color-mix(in oklab,var(--link) 35%,var(--rule-2)); background:none;
  border-radius:100px; padding:.15em .6em; cursor:pointer; }
.mundhir-faq-btn:hover { background:color-mix(in oklab,var(--link) 10%,transparent); }
/* filter items in the sidebar */
.mundhir-side-item.flt { gap:.1em; }
.flt-ic { display:inline-flex; align-items:center; margin-right:.5em; color:var(--ink-4); }
.flt-ic.prohibit { color:#9a3d3d; }
.flt-ic.permit { color:#2f6a4f; }
.mundhir-side-item.flt.active { background:var(--paper-2); color:var(--ink); font-weight:600; }
/* prohibition / permissibility marker on a position row */
.rule-mark { display:inline-flex; align-items:center; vertical-align:-2px; margin-right:.45em; }
.rule-mark.prohibit { color:#9a3d3d; }
.rule-mark.permit { color:#2f6a4f; }
.mundhir-main { flex:1 1 auto; min-width:0; }
@media (max-width: 860px) { .mundhir-layout { display:block; } .mundhir-side { position:static; max-height:none;
  border-right:0; border-bottom:1px solid var(--rule); padding:0 0 .8rem; margin-bottom:1rem; } }

/* search-term highlight in verse / hadith text */
mark.hl-term { background:color-mix(in oklab, #ffd84d 45%, transparent);
  color:inherit; border-radius:3px; padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }