/* Studio component: the Mushaf screen of the Sabeel app (inbox #17). Reads tokens only (color-page-*, color-*).
   The page is drawn exactly as Marsa's reader draws it (15 lines of the Complex's page fonts, quran-reader.js lineEl);
   this part only gives it its own screen: a head with Back, the page, a foot with the place, and a night page.
   Night: the page fonts carry their own dark palettes; the screen sets
     @font-palette-values --qnight<p> { font-family: qp<p>; base-palette: 1; }   (tajweed; 4 for plain text)
   and each line uses font-palette: var(--qnight-palette) when [data-theme="dark"].
   Sizes: --qfs (font size), --qlh (line height), --qpw (page width) are set by the reader's relayout, as today. */

.mushaf { position: fixed; inset: 0; height: 100dvh; z-index: 15; display: grid; grid-template-rows: auto 1fr auto; background: var(--color-page-ground); color: var(--color-page-ink); }
.mushaf .shead { background: color-mix(in srgb, var(--color-page-ground) 94%, transparent); border-bottom-color: var(--color-line); }
.mushaf .shead h1 { display: grid; gap: 1px; justify-items: center; text-align: center; }
.mushaf .shead h1 small { font: var(--font-weight-regular) var(--font-size-caption)/1.2 var(--font-family-body); color: var(--color-muted); }
.mushaf .stage { display: flex; justify-content: center; align-items: center; gap: 0; min-height: 0; overflow: auto; padding: var(--space-2) 10px; }
.mushaf.chromeless .shead, .mushaf.chromeless .mfoot { opacity: 0; pointer-events: none; }
.mushaf .shead, .mushaf .mfoot { transition: opacity var(--motion-duration-move) var(--motion-easing-out); }

.qp { width: var(--qpw); display: flex; flex-direction: column; }
.stage[dir="rtl"] .qp + .qp { border-inline-start: 1px solid var(--color-line); }
.qprun { display: flex; justify-content: space-between; padding: 0 2px 4px; font: 500 var(--font-size-caption)/1.4 var(--font-family-quran); color: var(--color-page-run); }
.qpfoot { text-align: center; padding-top: 4px; font: 500 var(--font-size-label)/1.6 var(--font-family-quran); color: var(--color-page-run); }
.qpb { display: flex; flex-direction: column; }
.qpb.short { justify-content: center; min-height: calc(var(--qlh) * 15); }
.ql { height: var(--qlh); line-height: var(--qlh); font-size: var(--qfs); display: flex; justify-content: space-between; align-items: center; white-space: nowrap; direction: rtl; color: var(--color-page-ink); }
.ql.c { justify-content: center; gap: .22em; }
.ql .w { border-radius: 4px; }
.ql .w.sel { background: var(--color-page-sel); }
.ql.qhead { justify-content: center; }
.qframe { display: flex; align-items: center; justify-content: center; width: 97%; height: 80%; border-radius: 3px; border: 1.5px solid var(--color-page-frame); }
.qhn { padding: .08em 1.3em .16em; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-page-frame); font: 700 calc(var(--qfs) * .8)/1.25 var(--font-family-quran); color: var(--color-accent); }
[data-theme="dark"] .ql:not(.qhead) { font-palette: var(--qnight-palette); }

/* the foot: where you are, and the tools; the arrows sit in the foot, never over the words */
.mfoot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); min-height: var(--size-head); padding: 0 var(--space-2) env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--color-page-ground) 94%, transparent); border-top: 1px solid var(--color-line); }
.mfoot .where { display: grid; justify-items: center; gap: 4px; font-size: var(--font-size-label); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mfoot .bar { width: min(var(--size-meter), 60%); height: 3px; border-radius: 2px; background: var(--color-raise); overflow: hidden; }
.mfoot .bar i { display: block; height: 100%; background: var(--color-gold); }

/* the index sheet (surahs and juz) */
.sheet { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; max-height: 82dvh; display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--color-bg); color: var(--color-fg); box-shadow: var(--elevation-dock); }
.sheet .grip { justify-self: center; width: var(--space-8); height: 4px; border-radius: 2px; background: var(--color-line); }
.sheet .list { overflow: auto; }
.scrim { position: fixed; inset: 0; z-index: 29; background: color-mix(in srgb, var(--color-hero-deep) 40%, transparent); }
.sura { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: var(--space-3); min-height: var(--size-head); padding: 0 var(--space-3); border-radius: var(--radius-row); color: var(--color-fg); text-decoration: none; }
.sura .no { font: var(--font-weight-semibold) var(--font-size-label)/1 var(--font-family-name); color: var(--color-gold-ink); text-align: center; font-variant-numeric: tabular-nums; }
.sura .nm { display: grid; gap: 1px; }
.sura .nm b { font-weight: var(--font-weight-medium); }
.sura .nm span { font-size: var(--font-size-caption); color: var(--color-muted); }
.sura .ar, .sura .nm b.arn { font: 400 var(--font-size-surah)/1.7 var(--font-family-quran); color: var(--color-accent); }
.sura.here { background: var(--color-raise); }
@media (min-width: 1024px) {
  .mushaf { position: static; height: 100dvh; }
  .sheet { inset-inline: auto; inset-inline-end: var(--space-6); bottom: auto; top: calc(var(--size-head) + var(--space-4)); width: var(--size-sheet); border-radius: var(--radius-sheet); }
}