/* ═══════════════════════════════════════════════════════════════════════════
   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. */
/* v1264 (wave 4) — the --qh-* family is DEFINED in styles/al.css stratum 4 and
   every token now reads a role, so the hub follows the ground and the accent
   knob. It used to be defined here, and four of the light values read themselves
   (`--qh-card: var(--qh-card)`), which is cyclic and therefore invalid at
   computed-value time: in light mode the hub's card, paper, line and hairline
   painted nothing. This file only var()s now (rule 14). */

#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: var(--f-ar); 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: var(--f-quran); 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); }

/* ── v1410 (owner): the hub in the Mutashabihat window's look ────────────────────────────────────────────────
   One window, two ways in. From the reader (#edition, Settings) it rises as a sheet over a dim, like #ayah-pop
   (a floating card from 744px). From the sūrah navigator's book button it is pushed INSIDE #home: it slides in
   from the right while the list eases left, and ‹ slides it back. Tone: the Drill green (--hm-dr), the app's
   reading colour; the tokens carry light and dark. */
.qh2 { --qg:var(--hm-dr); --qgs:var(--hm-dr-soft); direction:ltr; text-align:left; display:flex; flex-direction:column; min-height:0; overflow:hidden; box-sizing:border-box;
  color:var(--al-ink); font-family:var(--f-ui); background:color-mix(in srgb, var(--hm-dr-soft) 72%, var(--al-surf)); }
.qh2 button { -webkit-tap-highlight-color:transparent; }
.qh2 button:focus-visible { outline:2px solid var(--al-focus); outline-offset:2px; }

/* the sheet */
#qh-scrim.qh2-scrim { align-items:flex-end; justify-content:center; padding:0; background:color-mix(in srgb, var(--al-ink) 26%, transparent); -webkit-backdrop-filter:none; backdrop-filter:none; }
body.theme-dark #qh-scrim.qh2-scrim { background:rgba(0,0,0,.58); }
#qh-scrim .qh2 { position:relative; width:100vw; max-height:min(90dvh, 780px); border-radius:var(--al-rsurf) var(--al-rsurf) 0 0;
  padding:calc(var(--al-u) * 3) 0 env(safe-area-inset-bottom, 0px); box-shadow:var(--al-sh-modal); }
#qh-scrim .qh2::before { content:''; position:absolute; top:calc(var(--al-u) * 2); left:50%; width:36px; height:5px; margin-left:-18px;
  border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 24%, transparent); }
#qh-scrim.show .qh2 { animation:qh2up var(--al-d3) var(--al-eo); }
@keyframes qh2up { from { opacity:.4; transform:translateY(46px); } to { opacity:1; transform:none; } }
#qh-scrim .qh2-back { display:none; }   /* from the reader there is nothing to go back to: ✕ closes */
@media (min-width:744px) {
  #qh-scrim.qh2-scrim { padding-bottom:24px; }
  #qh-scrim .qh2 { width:min(92vw, 720px); max-height:calc(100dvh - 48px); border-radius:var(--al-rsurf); padding:calc(var(--al-u) * 3) 0 0; }
  #qh-scrim .qh2::before { display:none; }
  @keyframes qh2up { from { opacity:.4; transform:translateY(24px); } to { opacity:1; transform:none; } }
}

/* pushed inside the navigator */
.qh2.push { position:absolute; inset:0; z-index:5; width:auto; max-height:none; border-radius:0; padding:calc(12px + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px);
  transform:translateX(100%); transition:transform 460ms cubic-bezier(.32,.72,0,1), box-shadow 460ms; box-shadow:none; }
.qh2.push.in { transform:none; box-shadow:-18px 0 40px -24px rgba(0,0,0,.35); }
#home.floating .qh2.push { padding-top:12px; }
#home.qh-host { overflow:hidden; }   /* a class set by qiraat-hub.js: the old has() selector slowed every DOM insert app-wide (v1417 perf check) */
#home.qh-host > :not(.qh2) { transition:transform 460ms cubic-bezier(.32,.72,0,1), opacity 460ms; }
#home.qh-pushed > :not(.qh2) { transform:translateX(-24%); opacity:.4; pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
  .qh2.push, #home.qh-host > :not(.qh2) { transition:opacity 200ms; }
  .qh2.push { transform:none; opacity:0; } .qh2.push.in { opacity:1; }
  #home.qh-pushed > :not(.qh2) { transform:none; }
  #qh-scrim.show .qh2 { animation:none; }
}

/* the head row: ‹ · tinted icon · title over the reading you are on · ✕ */
.qh2-ph { flex:none; display:flex; align-items:center; gap:calc(var(--al-u) * 2); padding:var(--al-u) var(--al-gut) calc(var(--al-u) * 3); }
.qh2-back, .qh2-x { flex:none; width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; background:var(--al-card2); color:var(--al-ink); border:0; padding:0; cursor:pointer; }
.qh2-x { margin-left:auto; }
.qh2-ic { flex:none; width:40px; height:40px; border-radius:var(--al-rctl); display:grid; place-items:center; background:var(--qg); color:var(--qgs); }
.qh2-tt { display:flex; flex-direction:column; min-width:0; }
.qh2-title { margin:0; padding:0; font:700 var(--al-act)/1.2 var(--f-ui); color:var(--qg); }
.qh2-sub { font:500 var(--al-floor)/1.25 var(--f-ui); color:var(--al-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the list: the reading you are on, then one card per imam */
.qh2-body { flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 var(--al-gut) calc(var(--al-u) * 5); container-type:inline-size; }
.qh2-in { display:grid; grid-template-columns:minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); max-width:1120px; margin:0 auto; align-items:start; }
@container (min-width:700px) { .qh2-in { grid-template-columns:repeat(2, minmax(0, 1fr)); } .qh2-now { grid-column:1 / -1; } }
.qh2-sec { display:grid; gap:calc(var(--al-u) * 1.5); padding:calc(var(--al-u) * 3) calc(var(--al-u) * 3) calc(var(--al-u) * 1.5); border-radius:calc(var(--al-rctl) * 1.25);
  background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); }
.qh2-now { padding-bottom:calc(var(--al-u) * 3); }
.qh2-hd { display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--al-u) * 2.5); min-width:0; }
.qh2-hd b { font:700 calc(var(--al-floor) + 1px)/1.25 var(--f-ui); color:var(--al-ink); }
.qh2-hd > span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); white-space:nowrap; }
.qh2-hd .qh2-iar { font:400 22px/1.2 var(--f-ar); }
.qh2-list { display:grid; }
.qh2-it + .qh2-it { border-top:.5px solid var(--al-line); }
body.theme-dark .qh2-it + .qh2-it { border-top-color:var(--al-line2, var(--al-line)); }
.qh2-row { display:flex; align-items:center; gap:calc(var(--al-u) * 3); width:100%; min-height:56px; padding:calc(var(--al-u) * 1.5) 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.qh2-row:active { opacity:.6; }
.qh2-row.off { cursor:default; opacity:.55; }
.qh2-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.qh2-t b { font:600 calc(var(--al-floor) + 1px)/1.25 var(--f-ui); }
.qh2-t small { font:600 var(--al-floor)/1.2 var(--f-ui); color:var(--qg); }
.qh2-ar { flex:none; font:400 24px/1.2 var(--f-ar); color:var(--al-ink2); }
.qh2-chev { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--qgs); color:var(--qg); }
.qh2-row.cur .qh2-chev { background:var(--qg); color:var(--qgs); }
.qh2-soon { flex:none; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
.qh2-vers { display:flex; gap:4px; padding:4px; margin:0 0 calc(var(--al-u) * 2.5); border-radius:var(--al-rpill); background:var(--al-card2); width:max-content; max-width:100%; overflow-x:auto; }
.qh2-ver { min-height:40px; padding:0 calc(var(--al-u) * 4); border:0; border-radius:var(--al-rpill); background:none; color:var(--al-ink2); font:600 var(--al-floor)/1 var(--f-ui); cursor:pointer; white-space:nowrap; }
.qh2-ver.on { background:var(--al-card); color:var(--qg); box-shadow:0 0 0 .5px var(--al-line), 0 1px 3px rgba(0,0,0,.08); }
.qh2-lead { display:flex; align-items:center; gap:calc(var(--al-u) * 3); width:100%; min-height:64px; padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3) calc(var(--al-u) * 2.5) calc(var(--al-u) * 4);
  border:0; border-radius:var(--al-rctl); background:var(--qg); color:var(--qgs); text-align:left; font:inherit; cursor:pointer; }
.qh2-lead:active { filter:brightness(.95); }
.qh2-lead .qh2-t small { color:inherit; opacity:.85; font-weight:500; }
.qh2-lead .qh2-ar { color:inherit; }
.qh2-go { flex:none; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3.5); border-radius:var(--al-rpill); background:color-mix(in srgb, var(--qgs) 20%, transparent); font:700 var(--al-floor)/1 var(--f-ui); }