/* ═══════════════════════════════════════════════════════════════════════════
   styles/qiraat-hub.css — Muṣḥaf selector hub + image-mask page viewer
   ─────────────────────────────────────────────────────────────────────────
   CONSUMED BY: modules/mushaf/qiraat-hub.js
   Reuses the shared dock chrome (.dk-scrim/.dk-win/.dk-head/.dk-body, defined
   in zero.html). Only hub-specific classes live here.

   COLOUR MODEL — matches zero.html's actual runtime (NOT the --ms-* token
   system): zero.html does not load tokens.css, so light-mode colours are
   explicit and dark mode uses the --d-* vars defined on body.theme-dark in
   zero.html (--d-surface/--d-ink/--d-ink2/--d-soft/--d-line/--d-line2/--d-acc).

   THE KEY TRICK (the whole point of the image-edition path): an edition page is
   an ink-on-TRANSPARENT image. In dark mode a CSS `filter: invert()` flips the
   dark ink to white; because the page is transparent, only the glyphs flip and
   the paper behind (.qh-paper) shows through. One asset serves both light and
   dark — no separate dark scan. See .qh-stencil below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* v1108 — THE HUB'S TOKENS, NAMED ONCE (rule A2). This surface carried its own
   green (var(--qh-a)) flooding the version chips, the LIVE badge and the View
   button; its own cold navy (var(--qh-paper)) for dark paper, which is not the app's
   warm dark; 99px pills; 14/12/10/9/8px radii; and 28px/34px controls. One
   accent, ranked by a ring, and nothing below names a hex. */
#qh-scrim {
  --qh-a: var(--l-gold,#caa64b); --qh-ai: var(--l-gold-deep,var(--qh-ai));
  --qh-ink: var(--l-ink,var(--qh-ink)); --qh-ink2: var(--l-ink2,var(--qh-ink2));
  --qh-mut: var(--l-mut,var(--qh-mut)); --qh-soft: var(--l-soft,var(--qh-soft));
  --qh-card: var(--qh-card); --qh-paper: var(--qh-paper);
  --qh-line: var(--qh-line); --qh-hair: var(--qh-hair);
  --qh-tint: rgba(202,166,75,.12);
}
body.theme-dark #qh-scrim {
  --qh-a: var(--d-acc,#d4b573); --qh-ai: var(--d-acc-txt,#d4b573);
  --qh-ink: var(--d-ink,#ded6c4); --qh-ink2: var(--d-ink2,#d8cdb4);
  --qh-mut: var(--d-ink3,#a59a80); --qh-soft: var(--d-soft,#a89a7e);
  --qh-card: var(--d-surface,#201913); --qh-paper: var(--d-panel,#241d15);
  --qh-line: var(--d-line2,#4a4234); --qh-hair: var(--d-line,rgba(214,196,158,.12));
  --qh-tint: rgba(202,166,75,.18);
}

#qh-scrim .dk-win { width: min(96vw, 760px); height: min(94vh, 1120px); }

.qh-body { padding: 18px 20px 28px; }



body.theme-dark .qh-intro { color: var(--d-soft); }
body.theme-dark .qh-intro b { color: var(--d-ink2); }

.qh-ar { font-family: "Amiri", "Scheherazade New", serif; font-weight: 400; opacity: .85; }

/* ── reading group ── */
.qh-grp { margin-bottom: 20px; }

.qh-grp-h .qh-ar { font-size: 15px; text-transform: none; letter-spacing: 0; }
body.theme-dark .qh-grp-h { color: var(--d-soft); }



.qh-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 104px; padding: 13px 14px;
  background:var(--qh-card);
  border: 1px solid var(--qh-hair);
  border-radius: 16px;
}
.qh-card.is-soon { opacity: .72; }
body.theme-dark .qh-card { background: var(--d-surface); border-color: var(--d-line2); }

/* ── page-1 preview thumbnail ── */
.qh-prev {
  position: relative; width: 100%; height: 152px;
  border-radius: 12px; overflow: hidden; flex: none;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.qh-prev[role="button"]:active { transform: scale(.985); }
.qh-prev-paper { background: var(--qh-paper); border: 1px solid var(--qh-hair); }
body.theme-dark .qh-prev-paper { background: var(--qh-paper); border-color: var(--d-line2); }
/* image previews are themed masks (.cp-ink) — reuse the global .cp-ink/.cp-mark
   rules from zero.html (mask painted with theme ink; overlay hidden in dark =
   monochrome preview), so they show on light paper and follow light/dark. */
.qh-prev .cp-ink, .qh-prev .cp-mark {
  position: absolute; inset: 6px; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.qh-prev .cp-ink {
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; background: var(--qh-ink);
}
.qh-prev-hafs {
  display: flex; align-items: center; justify-content: center; padding: 10px;
  background: var(--qh-paper); border: 1px solid var(--qh-hair);
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", serif; color: var(--qh-ink2);
}
.qh-prev-hafs span { font-size: 19px; line-height: 1; max-width: 100%; white-space: nowrap; }
body.theme-dark .qh-prev-hafs { background: var(--qh-paper); border-color: var(--d-line2); color: var(--d-ink); }
/* version chips — print versions of the same reader (Ḥafṣ 1405/1421/1440, Warsh
   vector/image). The active edition is highlighted. */
.qh-vers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qh-ver {
  font: 800 10.5px/1 "Manrope", -apple-system, sans-serif; letter-spacing: .02em;
  border: 1px solid var(--qh-line); background: transparent; color: var(--qh-mut);
  border-radius: 12px; padding: 0 12px; cursor: pointer; min-height: 44px;
}
.qh-ver:active { transform: scale(.93); }
.qh-ver.on { color: var(--qh-ink); border-color: var(--qh-a); box-shadow: inset 0 0 0 1px var(--qh-a); }
body.theme-dark .qh-ver { color: var(--d-ink2); border-color: var(--d-line2); }
body.theme-dark .qh-ver.on { color: var(--d-acc-ink); background: var(--d-acc); }

.qh-rawi { font: 700 15px/1.15 "Manrope", -apple-system, sans-serif; color: var(--qh-ink2); }
.qh-rawi .qh-ar { font-size: 17px; margin-inline-start: 5px; }
body.theme-dark .qh-rawi { color: var(--d-ink); }
.qh-name { font: 500 11.5px/1.3 "Manrope", -apple-system, sans-serif; color: var(--qh-soft); margin-top: 3px; }
body.theme-dark .qh-name { color: var(--d-soft); }

.qh-card-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.qh-badge {
  font: 800 10.5px/1 "Manrope", -apple-system, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 12px; padding: 4px 8px;
}
.qh-badge.live { color: var(--qh-ai); background: var(--qh-tint); }
.qh-badge.soon { color: var(--qh-mut); background: rgba(60,50,20,.08); }
body.theme-dark .qh-badge.soon { color: var(--d-soft); background: var(--d-line); }

.qh-btn {
  font: 800 12px/1 "Manrope", -apple-system, sans-serif;
  border: 1px solid var(--qh-line); background: transparent; color: var(--qh-mut);
  border-radius: 12px; padding: 0 12px; cursor: pointer; min-height: 44px;
}
.qh-btn:active { transform: scale(.95); }
.qh-btn.view { color: var(--qh-ink); border-color: var(--qh-a); box-shadow: inset 0 0 0 1px var(--qh-a); }
.qh-btn.dl { margin-inline-start: auto; }
.qh-btn:disabled { opacity: .55; cursor: default; }
body.theme-dark .qh-btn { color: var(--d-ink2); border-color: var(--d-line2); }
body.theme-dark .qh-btn.view { color: var(--d-acc-ink); background: var(--d-acc); }

/* ── viewer ── */
.qh-vtop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qh-back {
  font: 700 12.5px/1 "Manrope", -apple-system, sans-serif; color: var(--qh-ai);
  background: transparent; border: 0; cursor: pointer; padding: 6px 2px;
}
body.theme-dark .qh-back { color: var(--d-soft); }
.qh-vttl { flex: 1; font: 800 15px/1.2 "Manrope", -apple-system, sans-serif; color: var(--qh-ink2); text-align: center; }
body.theme-dark .qh-vttl { color: var(--d-ink); }

.qh-stage { display: flex; align-items: center; gap: 8px; }
.qh-nav {
  flex: none; width: 40px; height: 64px;
  font: 700 26px/1 "Manrope", -apple-system, sans-serif; color: var(--qh-ai);
  background: var(--qh-tint); border: 1px solid var(--qh-line); border-radius: 12px;
  cursor: pointer;
}
.qh-nav:active { transform: scale(.94); }
body.theme-dark .qh-nav { color: var(--d-soft); background: var(--d-line); border-color: var(--d-line2); }

/* the "paper" — a neutral page surface so a transparent stencil reads as a
   real muṣḥaf page on both light and dark themes. */
.qh-paper {
  flex: 1; min-width: 0; display: block;
  background: var(--qh-paper); border: 1px solid var(--qh-line);
  border-radius: 12px; overflow: hidden; padding: 14px;
}
body.theme-dark .qh-paper { background: var(--qh-paper); border-color: var(--d-line2); }

/* The stencil is an <img> of an ink-on-transparent page. We recolour it with a
   CSS filter instead of a mask: bulletproof across browsers/CDNs (masks are
   subject to same-origin rules and sizing footguns; an <img> is not).
     · light themes → show the dark ink as authored.
     · dark mode    → invert() flips the dark ink to white. Because the page is
                      transparent, only the glyphs flip; the (transparent) paper
                      is supplied by .qh-paper behind it. ONE asset, both modes.
   Real editions are processed to dark monochrome ink (see the python tool), so
   invert() yields clean white in dark mode. */
.qh-stencil {
  display: block; width: 100%; height: min(74vh, 1000px);
  object-fit: contain;
}
body.theme-dark .qh-stencil { -webkit-filter: invert(1) brightness(1.55); filter: invert(1) brightness(1.55); }

.qh-vbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.qh-hint { font: 500 11.5px/1.4 "Manrope", -apple-system, sans-serif; color: var(--qh-mut); max-width: 60%; }
body.theme-dark .qh-hint { color: var(--d-soft); }
.qh-pager { font: 700 12.5px/1 "Manrope", -apple-system, sans-serif; color: var(--qh-mut); display: flex; align-items: center; gap: 6px; }
body.theme-dark .qh-pager { color: var(--d-ink2); }
.qh-pager input {
  width: 56px; text-align: center; font: 700 12.5px/1 "Manrope", -apple-system, sans-serif;
  color: inherit; background: var(--qh-tint); border: 1px solid rgba(60,50,20,.14);
  border-radius: 12px; min-height: 44px; padding: 0 4px;
}
body.theme-dark .qh-pager input { background: var(--d-line); border-color: var(--d-line2); color: var(--d-ink); }