/* Sabeel. Copyright (c) 2026 Marsa. All rights reserved.
   The Mushaf reader inside Sabeel (studio inbox #17, screen 2). Loaded after the reader's own look
   (engine/quran-reader.css, copied from Marsa) and the studio's part (look/parts/mushaf.css), so the studio's
   tokens win over the reader's fixed colours. Interim until the studio draws the reader's panels: it uses only the
   studio's Sabeel tokens, raw colours none. The page itself (lines, frame, run heads) is the studio's part. */

/* the reader is the studio's .mushaf screen, but keeps its own layout (the turning track under the bars) */
.qreader.skinned { position: fixed; inset: 0; height: auto; display: block; z-index: 19; background: var(--color-page-ground); color: var(--color-page-ink); color-scheme: normal;
  --bg: var(--color-bg); --surface: var(--color-surface); --raise: var(--color-raise); --fg: var(--color-fg); --muted: var(--color-muted); --line: var(--color-line);
  --accent: var(--color-accent); --accent-ink: var(--color-on-accent); --gold: var(--color-gold); }

/* the head and foot: the studio's .shead and .mfoot inside the reader's bars (they still fade with a tap) */
.skinned .qrbar.qrskin { display: block; padding: 0; background: none; box-shadow: none; color: var(--color-fg); }
.skinned .qrbar.qrskin .shead { position: static; padding-top: env(safe-area-inset-top, 0px); }
.skinned .shead .back { border: 0; background: none; font: inherit; cursor: pointer; }
.skinned .qrbar.qrskin .shead h1 { font-size: var(--font-size-label); }
.skinned .qrbar.qrskin .shead h1 > span { font: 400 var(--font-size-surah)/1.25 var(--font-family-quran); color: var(--color-accent); overflow: hidden; text-overflow: ellipsis; }
.skinned .qrbar.qrskin .mfoot { padding-bottom: env(safe-area-inset-bottom, 0px); }
.skinned .mfoot .where { border: 0; background: none; font: inherit; font-size: var(--font-size-label); color: var(--color-muted); cursor: pointer; min-height: var(--size-tap); border-radius: var(--radius-row); }
.skinned .mfoot .where:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skinned .shead .ib[aria-pressed="true"] svg { fill: var(--color-gold); stroke: var(--color-gold-ink); }
.skinned.bars .qrplay { bottom: calc(var(--size-head) + var(--space-2) + env(safe-area-inset-bottom, 0px)); }

/* the page: the day palette unless the studio's night rule ([data-theme="dark"] .ql) takes the line */
.skinned .ql { font-palette: var(--qday-palette, normal); }
.skinned .qpb.wait { background: repeating-linear-gradient(var(--color-page-ground) 0 calc(var(--qlh) * .38), var(--color-raise) calc(var(--qlh) * .38) calc(var(--qlh) * .62), var(--color-page-ground) calc(var(--qlh) * .62) var(--qlh)); }
.skinned .qpb.qtext { color: var(--color-page-ink); }
.skinned .qframe .qhn { background: var(--color-page-ground); box-shadow: 0 0 0 1px var(--color-page-frame); color: var(--color-accent); }
.skinned .qframe::before, .skinned .qframe::after { content: none; }
.skinned .qframe { background: none; box-shadow: none; border: 1.5px solid var(--color-page-frame); border-radius: 3px; }
.skinned .ql .w.here, .skinned .qta.here { background: var(--color-page-sel); }
.skinned .ql .w.pre, .skinned .qta.pre { background: color-mix(in srgb, var(--color-page-sel) 60%, transparent); }
.skinned .qrtzm { color: var(--color-page-run); }
.skinned.praying::after { color: var(--color-page-run); }

/* the reader's panels, the ayah's actions, the search results, the toast: Sabeel's surfaces */
.skinned .qrpanel, .skinned .qract, .skinned .qrsres { background: var(--color-surface); color: var(--color-fg); }
.skinned .qrph, .skinned .qrsrow, .skinned .qrbig b, .skinned .qrbtn { color: var(--color-accent); }
.skinned .qrrow { color: var(--color-fg); border-bottom-color: var(--color-line); }
.skinned .qrrow.here, .skinned .qrrow.qlogmv { background: var(--color-raise); }
.skinned .qrrx, .skinned .qrsrow .qrsx, .skinned .qrsnote, .skinned .qrdl, .skinned .qrtm { color: var(--color-muted); }
.skinned .qrdn { color: var(--color-gold-ink); }
.skinned .qact { background: var(--color-raise); border-color: var(--color-line); color: var(--color-accent); }
.skinned .qrseg { background: var(--color-raise); }
.skinned .qrseg button { color: var(--color-muted); }
.skinned .qrseg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-accent); }
.skinned .qrbarline { background: var(--color-raise); }
.skinned .qrbarline i, .skinned .qrday i { background: var(--color-gold); }
.skinned .qrsinp { background: var(--color-raise); border-color: var(--color-line); color: var(--color-fg); }
.skinned .qrsinp:focus { background: var(--color-surface); border-color: var(--color-accent); }
.skinned .qrsrow:hover, .skinned .qrsrow:focus-visible { background: var(--color-raise); }
.skinned .qrplay, .skinned .qrtoast, .skinned .qrbackpill { background: var(--color-accent); color: var(--color-on-accent); }
.skinned .qrplay .qrbtn, .skinned .qrpi { color: var(--color-on-accent); }
.skinned.loadingq .qrtrack::after { border-color: var(--color-line); border-top-color: var(--color-accent); }

/* a computer keeps the rail beside the page (studio screen 2): the reader starts where the rail ends */
@media (min-width: 1024px) { .qreader.skinned { inset-inline-start: var(--size-rail); } }

/* the studio's index sheet (.sheet, .scrim in mushaf.css) is not used here (the reader has its own index panel), but
   its rules are global and load after app.css: Sabeel's own sheets and scrim are stated again here, at every width,
   until the studio scopes them (studio inbox #20). Keep in step with app.css. */
html .scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-fg) 35%, transparent); z-index: 30; }
html .sheet { position: fixed; inset-inline: 0; top: auto; bottom: 0; width: auto; z-index: 31; display: grid; grid-template-rows: none; gap: var(--space-3); max-height: 86vh; overflow: auto; background: var(--color-surface); color: var(--color-fg); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; box-shadow: var(--elevation-dock); }