/* ============================================================================
   The reader.

   One rule governs every decision here: the reading column is the page, and
   everything else is furniture that must recede. The rails are quiet, the bars
   thin, the chrome desaturated — so that the only thing with real contrast and
   real weight on screen is the text of the book.
   ========================================================================== */

.reader-body { --rail-w: 290px; --rbar-h: 52px; }

/* ================================================== reading context bar */
.rbar {
  position: sticky; inset-block-start: var(--header-h); z-index: calc(var(--z-header) - 1);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--line-soft);
}
.rbar-row {
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--rbar-h);
  padding-inline: clamp(var(--s-3), 2.5vw, var(--s-6));
}

/* where the reader is, in the author's own words */
.rbar-where {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 0; font-size: var(--fs-xs); color: var(--ink-3);
}
.where-sec {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 34ch;
}
.where-pg {
  flex: none; color: var(--accent); font-weight: 600;
  padding-inline-start: var(--s-2); border-inline-start: 1px solid var(--line);
}
@media (max-width: 700px) { .rbar-where { display: none; } }

/* ---- in-book search ----------------------------------------------------- */
.rsearch {
  display: flex; align-items: center; gap: var(--s-1);
  width: min(430px, 46vw); min-width: 160px;
  padding-inline: var(--s-3) var(--s-1);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); height: 36px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.rsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.rsearch-ico { color: var(--ink-3); flex: none; }
.rsearch input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-size: var(--fs-sm); color: var(--ink);
}
.rsearch input::-webkit-search-cancel-button { display: none; }
.rsearch-scope {
  flex: none; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-2xs); color: var(--ink-3);
  padding-inline: var(--s-1); max-width: 5.5rem;
  border-inline-start: 1px solid var(--line);
}
.search-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.match-counter {
  font-size: var(--fs-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-inline: var(--s-1);
}
@media (max-width: 560px) { .rsearch-scope { display: none; } }

/* ---- segmented view control -------------------------------------------- */
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 var(--s-3);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
  border-radius: var(--r-sm); white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1);
}
.seg-out {
  min-width: 3.4rem; text-align: center; font-size: var(--fs-2xs);
  color: var(--ink-2); font-variant-numeric: tabular-nums; align-self: center;
}

/* ================================================== reading settings panel */
.rpanel {
  border-block-start: 1px solid var(--line-soft);
  background: var(--surface);
  animation: panel-down var(--dur-2) var(--ease);
  overflow: hidden;
}
@keyframes panel-down { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rpanel { animation: none; } }

.rpanel-inner {
  display: grid; gap: var(--s-4) var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: var(--s-5) clamp(var(--s-3), 2.5vw, var(--s-6));
  max-width: 1180px;
}
.set-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.set-row-wide { grid-column: 1 / -1; gap: var(--s-6); }
.set-label { font-size: var(--fs-xs); color: var(--ink-3); min-width: 5.5rem; }
.goto { display: flex; gap: var(--s-2); flex: 1 1 auto; max-width: 440px; }
.goto .field { min-width: 0; }
.set-note {
  grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--ink-3);
  line-height: 1.7; max-width: 80ch;
  padding-block-start: var(--s-2); border-block-start: 1px dashed var(--line-soft);
}
.only-mobile-flex { display: none; }
@media (max-width: 860px) { .only-mobile-flex { display: flex; } }

/* ============================================================== workspace */
.rlayout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  max-width: var(--shell-max); margin-inline: auto;
  align-items: start;
}
@media (max-width: 1080px) { .rlayout { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- TOC rail */
.toc-rail {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--rbar-h));
  block-size: calc(100dvh - var(--header-h) - var(--rbar-h));
  display: flex; flex-direction: column;
  border-inline-start: 1px solid var(--line-soft);
  background: var(--surface-2);
}
html[dir="rtl"] .toc-rail { border-inline-start: 0; border-inline-end: 1px solid var(--line-soft); }

.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-4) var(--s-2);
}
.rail-title { font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: 600; color: var(--ink-3); }
.rail-filter { padding: 0 var(--s-4) var(--s-3); }
.rail-filter .field { height: 34px; font-size: var(--fs-xs); }
.rail-empty { padding: var(--s-6) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

.toc {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0;
  padding: 0 var(--s-3) var(--s-10);
}
.toc ol { list-style: none; margin: 0; padding: 0; }

/* the hierarchy is read from indentation and weight, not from boxes */
.toc-item { display: flex; align-items: stretch; gap: 0; }
.toc-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2);
  text-decoration: none; border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.toc-link:hover { background: var(--surface-3); color: var(--ink); }
.toc-link .pg {
  flex: none; margin-inline-start: auto;
  font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.toc-link .lab { flex: none; color: var(--accent); font-weight: 600; }

/* current position: a rule plus a weight change, never colour alone */
.toc-link.is-current {
  background: var(--accent-weak); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
html[dir="rtl"] .toc-link.is-current { box-shadow: inset -2px 0 0 var(--accent); }

.toc > li > .toc-item > .toc-link { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.toc-kids { padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--line-soft); margin-inline-start: var(--s-3); }

.toc-twist {
  flex: none; display: grid; place-items: center;
  width: 26px; color: var(--ink-3); border-radius: var(--r-xs);
}
.toc-twist:hover { color: var(--ink); background: var(--surface-3); }
.toc-twist svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.toc-twist[aria-expanded="false"] svg { transform: rotate(90deg); }
html[dir="rtl"] .toc-twist[aria-expanded="false"] svg { transform: rotate(-90deg); }

/* mobile: the rail becomes a sheet over the text, never a permanent column */
@media (max-width: 1080px) {
  /* inset-inline-start is the right edge in RTL — the side the rail occupies
     on desktop — so the drawer keeps its side and only its travel flips.
     It is removed from layout when closed rather than parked off-screen: a
     fixed element translated past the viewport still extends the scrollable
     area, and `overflow: clip` on the root does not clip fixed descendants. */
  .toc-rail {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    z-index: var(--z-panel); width: min(86vw, 330px);
    background: var(--surface); box-shadow: var(--sh-4);
    block-size: 100dvh;
    display: none;
  }
  body.toc-open .toc-rail { display: flex; animation: rail-in var(--dur-3) var(--ease-soft); }
  @keyframes rail-in { from { transform: translateX(-102%); } }
  html[dir="rtl"] body.toc-open .toc-rail { animation-name: rail-in-rtl; }
  @keyframes rail-in-rtl { from { transform: translateX(102%); } }
  .rail-scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1);
    background: color-mix(in srgb, var(--navy) 50%, transparent);
    animation: fade-in var(--dur-2) var(--ease);
  }
  body.toc-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { body.toc-open .toc-rail { animation: none; } }

/* ============================================================ the reading */
.reader {
  min-width: 0;
  padding: var(--s-8) clamp(var(--s-3), 3vw, var(--s-10)) var(--s-24);
}
.reader:focus-visible { outline: none; }

.reader-loading { max-width: var(--measure); margin-inline: auto; padding-block: var(--s-8); }
.skel-h { height: 34px; width: 55%; margin-block-end: var(--s-6); }
.skel-p { height: 15px; margin-block-end: var(--s-3); }
.reader-loading-note {
  display: flex; align-items: center; gap: var(--s-2);
  margin-block-start: var(--s-8); font-size: var(--fs-sm); color: var(--ink-3);
}

.book { max-width: var(--measure); margin-inline: auto; }

.book-h1 {
  font-size: var(--fs-title); text-align: center; color: var(--ink);
  padding-block: var(--s-8) var(--s-10);
  margin-block-end: var(--s-10);
  border-block-end: 1px solid var(--line-soft);
}
.book-h1-sub {
  display: block; font-size: var(--fs-md); font-weight: 400;
  color: var(--ink-3); margin-block-start: var(--s-3);
  font-family: var(--font-ui);
}

/* -------------------------------------------------------------- one page */
.book-page {
  position: relative;
  padding-block: var(--s-6) var(--s-10);
  scroll-margin-block-start: calc(var(--header-h) + var(--rbar-h) + var(--s-4));
}
.book-page + .book-page { border-block-start: 1px solid var(--line-soft); }

/* the page marker: present, legible, and quiet */
.page-marker {
  display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
  margin-block-end: var(--s-5);
  font-size: var(--fs-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.page-marker .bp {
  font-weight: 600; color: var(--ink-2);
  padding: var(--s-1) var(--s-2);
  background: var(--surface-3); border-radius: var(--r-sm);
  scroll-margin-block-start: calc(var(--header-h) + var(--rbar-h) + var(--s-4));
}
.page-marker .pdfno { color: var(--ink-3); }
.page-marker .est { color: var(--warn); }
.page-marker .review-badge {
  color: var(--warn); background: var(--warn-weak);
  padding: 0 var(--s-2); border-radius: var(--r-sm); font-weight: 600;
}
.page-marker .spacer { flex: 1 1 auto; }
.page-tools { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.book-page:hover .page-tools, .page-tools:focus-within { opacity: 1; }
@media (pointer: coarse) { .page-tools { opacity: 1; } }

/* ------------------------------------------------------ the text itself */
.page-grid { display: grid; gap: var(--s-6); }
.book-body { min-width: 0; }

.book-body p.blk, .book-body li {
  font-family: var(--font-read);
  overflow-wrap: break-word;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink);
  text-align: justify;
  text-justify: inter-word;
  hanging-punctuation: first last;
  margin-block-end: var(--s-4);
  scroll-margin-block-start: calc(var(--header-h) + var(--rbar-h) + var(--s-6));
}
/* a short measure plus justification opens rivers of white space in Arabic */
@media (max-width: 620px) {
  .book-body p.blk, .book-body li { text-align: start; }
}

.book-body .bh {
  font-family: var(--font-read);
  color: var(--ink);
  line-height: var(--lh-head);
  margin-block: var(--s-8) var(--s-4);
  scroll-margin-block-start: calc(var(--header-h) + var(--rbar-h) + var(--s-6));
}
.book-body h2.bh { font-size: calc(1.6rem * var(--fscale)); }
.book-body h3.bh { font-size: calc(1.4rem * var(--fscale)); }
.book-body h4.bh { font-size: calc(1.25rem * var(--fscale)); }
.book-body h5.bh, .book-body h6.bh { font-size: calc(1.12rem * var(--fscale)); }
.book-body .bh .lab {
  display: block; font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
  letter-spacing: .02em; margin-block-end: var(--s-1);
}
/* a heading that opens a باب or فصل earns a rule */
.book-body h2.bh, .book-body h3.bh {
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
}

.book-body p[dir="ltr"], .srcq p[dir="ltr"] {
  font-family: var(--font-ui); font-size: calc(.95rem * var(--fscale));
  text-align: start; direction: ltr;
}

/* footnotes ------------------------------------------------------------- */
.footnotes {
  margin-block-start: var(--s-8); padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}
.footnotes ol { list-style: none; margin: 0; padding: 0; }
.fn-item {
  font-size: var(--fs-read-note) !important;
  line-height: 1.95 !important; color: var(--ink-2) !important;
  margin-block-end: var(--s-3) !important;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2);
  min-width: 0;
}
/* footnotes carry citations, URLs and long Latin references; let them reflow
   rather than push the page sideways */
.fn-item > * { min-width: 0; }
.footnotes, .fn-item { overflow-wrap: anywhere; }
.fn-num, .fn-back {
  flex: none; color: var(--accent); font-weight: 600;
  font-family: var(--font-ui); font-size: var(--fs-2xs);
  text-decoration: none;
}
.fn-back:hover { text-decoration: underline; }
a.anchor {
  color: var(--accent); text-decoration: none; font-size: .72em;
  vertical-align: super; font-family: var(--font-ui); font-weight: 600;
  padding-inline: 1px; scroll-margin-block-start: 7rem;
}
a.anchor:hover { text-decoration: underline; }
body.no-fn .footnotes { display: none; }

/* desktop: the reference answers in place, without losing the reader's line */
.fn-pop {
  position: absolute; z-index: var(--z-panel);
  max-width: min(420px, 78vw);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-over); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-family: var(--font-read); font-size: .98rem; line-height: 1.9;
  animation: fade-in var(--dur-2) var(--ease);
}
.fn-pop .fn-pop-k {
  display: block; font-family: var(--font-ui); font-size: var(--fs-2xs);
  font-weight: 600; color: var(--accent); margin-block-end: var(--s-1);
}
@media (prefers-reduced-motion: reduce) { .fn-pop { animation: none; } }

/* search marks ---------------------------------------------------------- */
mark.hit { background: var(--mark); color: var(--mark-ink); border-radius: 2px; padding: 0 .12em; }
mark.hit.live { background: var(--mark-live); box-shadow: 0 0 0 2px var(--mark-live); }
.flash { animation: flash var(--dur-4) 2 var(--ease); border-radius: var(--r-sm); }
@keyframes flash { 50% { background: var(--accent-weak); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 2px solid var(--accent); } }

/* ----------------------------------------------------- the original scan */
.scan { display: none; margin: 0; }
.scan figcaption {
  font-size: var(--fs-2xs); color: var(--ink-3);
  text-align: center; padding-block-start: var(--s-2);
}
.scan img {
  width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--sh-1);
}

body[data-view="both"] .page-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--s-8); align-items: start;
}
body[data-view="both"] .scan { display: block; position: sticky; inset-block-start: 7.5rem; }
body[data-view="both"] .book { max-width: min(1220px, 100%); }

body[data-view="scan"] .book-body { display: none; }
body[data-view="scan"] .scan { display: block; }
body[data-view="scan"] .book { max-width: min(880px, 100%); }

@media (max-width: 900px) {
  body[data-view="both"] .page-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-view="both"] .scan { position: static; }
}

/* paragraph copy affordance --------------------------------------------- */
.para-copy {
  position: absolute; z-index: 5;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.para-copy:hover { color: var(--accent); border-color: var(--accent-line); }
.para-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ------------------------------------------------------- results panel */
.search-panel {
  position: fixed; inset-block: calc(var(--header-h) + var(--rbar-h)) 0;
  inset-inline-end: 0; z-index: var(--z-rail);
  width: min(430px, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-inline-start: 1px solid var(--line);
  box-shadow: var(--sh-3);
  animation: sp-in var(--dur-3) var(--ease-soft);
}
html[dir="rtl"] .search-panel {
  inset-inline-end: auto; inset-inline-start: 0;
  border-inline-start: 0; border-inline-end: 1px solid var(--line);
}
@keyframes sp-in { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) { .search-panel { animation: none; } }

.sp-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line-soft); background: var(--surface-2);
}
.sp-summary { font-size: var(--fs-xs); color: var(--ink-2); }
.results { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: var(--s-2); }
.res {
  display: block; width: 100%; text-align: start;
  padding: var(--s-3); border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.res:hover, .res:focus-visible { background: var(--surface-3); }
.res.is-current { background: var(--accent-weak); box-shadow: inset 2px 0 0 var(--accent); }
html[dir="rtl"] .res.is-current { box-shadow: inset -2px 0 0 var(--accent); }
.res-head {
  display: flex; gap: var(--s-2); align-items: baseline;
  font-size: var(--fs-2xs); color: var(--ink-3); margin-block-end: var(--s-1);
}
.res-page { color: var(--accent); font-weight: 600; white-space: nowrap; }
.res-snip { display: block; font-family: var(--font-read); font-size: 1rem; line-height: 1.85; color: var(--ink-2); }
.res-more { padding: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }

@media (max-width: 720px) { .search-panel { inset-block-start: 0; width: 100vw; } }

/* ------------------------------------------------------- mobile dock */
.rdock {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-rail);
  display: none; align-items: stretch;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line);
  padding-block-end: env(safe-area-inset-bottom);
}
@media (max-width: 860px) { .rdock { display: flex; } .reader { padding-block-end: var(--s-20); } }
.rdock button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: 54px;
  font-size: .68rem; color: var(--ink-3);
  transition: color var(--dur-1) var(--ease);
}
.rdock button:hover, .rdock button[aria-pressed="true"] { color: var(--accent); }
.rdock .ico { width: 19px; height: 19px; }

/* ------------------------------------------------------ review mode */
body.review .lc-low  { background: color-mix(in srgb, var(--danger) 12%, transparent); }
body.review .lc-med  { background: color-mix(in srgb, var(--warn) 14%, transparent); }

/* --------------------------------------------------------------- print */
@media print {
  .rbar, .toc-rail, .search-panel, .rdock, .para-copy, .rail-scrim,
  .page-tools, .fn-pop { display: none !important; }
  .rlayout { display: block; }
  .reader { padding: 0; }
  .book { max-width: none; }
  .book-page { break-inside: auto; border: 0; padding-block: var(--s-4); }
  .book-body p.blk { orphans: 3; widows: 3; }
  .scan { display: none !important; }
}

/* ---- classes app.js emits that the new system must also dress ---------- */
.title-block {
  font-family: var(--font-read); text-align: center;
  color: var(--ink-2); line-height: 2;
  padding-block: var(--s-4); margin-block-end: var(--s-6);
}
.title-block .ttl { display: block; font-size: calc(1.15rem * var(--fscale)); }
.footnote-ref { font-size: .72em; vertical-align: super; color: var(--accent); }
.book-body .blk.li {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--line-soft);
}
.book-body .blk.cont { text-indent: 0; }
.ocr-uncertain { border-block-end: 1px dotted var(--warn); }
.icon-btn.tiny {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  color: var(--ink-3); border-radius: var(--r-xs);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.icon-btn.tiny:hover { color: var(--accent); background: var(--surface-3); }
.icon-btn.tiny svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (pointer: coarse) { .icon-btn.tiny { width: 36px; height: 36px; } }

/* ======================================== the course's footprint in the book */
/* A paragraph that a lecture teaches carries a quiet mark. It stays out of the
   way until the paragraph is hovered or focused: the book must read as the
   book, not as a syllabus. It is never selectable and never copied. */
.lec-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-ui); font-size: .68rem; line-height: 1.4;
  color: var(--accent); white-space: nowrap;
}
.lec-chip svg {
  width: 11px; height: 11px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lec-chip a { color: inherit; text-decoration: none; border-block-end: 1px dotted currentColor; }
.lec-chip a:hover { border-block-end-style: solid; }

.lec-chip.on-page {
  background: var(--accent-weak); border: 1px solid var(--accent-line);
  border-radius: var(--r-pill); padding: 1px var(--s-2);
}
.lec-para {
  margin-inline-start: var(--s-2);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
  user-select: none; -webkit-user-select: none;
}
.book-body p:hover > .lec-para, .book-body .bh:hover > .lec-para,
.lec-para:focus-within { opacity: 1; }
@media (hover: none) { .lec-para { opacity: .8; } }
body.no-lec-links .lec-para, body.no-lec-links .lec-chip.on-page { display: none; }

/* lecture hits inside the reader's own results panel */
.lec-results { border-block-start: 1px solid var(--line); margin-block-start: var(--s-2); }
.lec-res-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); color: var(--ink-3);
  padding: var(--s-4) var(--s-3) var(--s-2);
}
a.lec-res {
  display: block; padding: var(--s-3); border-radius: var(--r-sm);
  text-decoration: none; color: inherit;
  transition: background var(--dur-1) var(--ease);
}
a.lec-res:hover, a.lec-res:focus-visible { background: var(--surface-3); }

body[data-qscope="lectures"] #searchResults, body[data-qscope="lectures"] #searchNav { display: none; }

@media print { .lec-chip, .lec-para, .lec-results { display: none !important; } }


/* ---------------------------------------------------------------- foreign page
   Eight leaves of a different book were bound into this copy in place of the law
   book's own (printed pages ١٣٠ ١٣١ ١٣٤ ١٣٥ ١٣٨ ١٣٩ ١٤٢ ١٤٣). The scan is
   published unchanged, but the reader must never mistake it for the book. */
.foreign-note {
  margin-block-end: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid #b4541f;
  border-radius: var(--r-2);
  background: #fdf2e9;
  color: #6b3410;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.book-page[data-kind="foreign"] .book-body { opacity: .82; }
.book-page[data-kind="foreign"] .page-marker .bp::after {
  content: ' — ورقة مُقحَمة';
  color: #b4541f;
  font-weight: 600;
}
html[data-theme="dark"] .foreign-note { background: #2a1a10; color: #e9b98d; }