/* ============================================================
   Manzar — Qur'an Presentation / slide treatment system
   The DARK projection world. ONE 16:9 slide, full-screen, no chrome.

   HIERARCHY (the English translation leads):
     1. English translation — the focus: largest, brightest serif.
     2. Arabic source — a smaller, dignified line above it, with the
        ayah medallion at its end. Always present, never cramped.
     3. Transliteration — optional, quietest, italic Latin.
   Everything is sized to fit a single slide elegantly.

   COMPOSITION BUDGET (strict):
     One slide carries AT MOST ~2 lines of Arabic, with room below for
     the English of exactly that much. A line may break ONLY at a
     legitimate Qur'anic stopping point (waqf: ۘ ۚ ۖ ۗ ۙ ۛ …), never
     mid-phrase. Longer passages are SEGMENTED at those marks across
     consecutive slides (continuation parts omit the medallion; the
     last part carries it). The auto-fit below is a safety net, not a
     licence to overfill — author to the budget. See the Composition
     section of index.html and window.ManzarQuran.{arabicLines,
     withinBudget, splitAtWaqf} for the production helpers.

   COLOUR is a PALETTE LAYER. A slide reads four custom properties:
     --q-base   canvas colour
     --q-ink    focus text (English)            (+ --q-ink-rgb triplet)
     --q-accent medallion / rule                (+ --q-accent-rgb triplet)
   A palette class (.pal-*) overrides those. To add a palette, copy one
   block and change the values — nothing else in the system needs to know.

   MARKUP CONTRACT (one slide):
     <div class="q-slide pal-noir bg-black qf-amiri framed">
       <div class="q-bg"></div>
       <div class="q-slug">Al-Fātiḥah · 1:2</div>
       <div class="q-textwrap"><div class="q-text has-tr">
         <div class="q-ar">…arabic… <span class="q-ayah">٢</span></div>
         <div class="q-tr-line">…english…</div>
         <div class="q-lit-line">…transliteration…</div>  (optional)
       </div></div>
     </div>
   ============================================================ */

/* Optional photographic backdrop. Override --q-img on .qdeck. */
.qdeck { --q-img: url("assets/sample-shrine.png"); }

/* --- The slide canvas + DEFAULT palette (noir) --- */
.q-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;       /* type scales to slide width */
  isolation: isolate;
  background: var(--q-base, #000);

  /* ---- default palette: noir (maximum contrast) ---- */
  --q-base: #000;
  --q-ink: #FCFBF8;        --q-ink-rgb: 247,245,239;
  --q-accent: #C9A86A;     --q-accent-rgb: 201,168,106;
  --q-fade-top: #15171D;   /* upper tone of the palette-driven Fade ground */

  /* derived roles (don't override these directly — set the four above) */
  --q-source: rgba(var(--q-ink-rgb), 0.82);   /* Arabic line   */
  --q-faint:  rgba(var(--q-ink-rgb), 0.42);   /* translit      */
  --q-meta:   rgba(var(--q-ink-rgb), 0.32);   /* slug          */
}
.q-slide.framed { box-shadow: 0 0 0 1px rgba(255,255,255,0.07); }

/* ============================================================
   PALETTES — coordinated colour sets. Apply on .q-slide (or any
   ancestor, e.g. .qdeck / a cross-fade frame — the vars inherit).
   ============================================================ */
.pal-noir    { --q-base:#000;     --q-ink:#FCFBF8; --q-ink-rgb:247,245,239; --q-accent:#C9A86A; --q-accent-rgb:201,168,106; --q-fade-top:#15171D; }
.pal-indigo  { --q-base:#0A0E1B;  --q-ink:#F1F3FA; --q-ink-rgb:241,243,250; --q-accent:#9AA6C8; --q-accent-rgb:154,166,200; --q-fade-top:#1B2440; }
.pal-night   { --q-base:#060A14;  --q-ink:#EEF1F8; --q-ink-rgb:238,241,248; --q-accent:#8FA6CE; --q-accent-rgb:143,166,206; --q-fade-top:#22345C; }
.pal-sepia   { --q-base:#16110A;  --q-ink:#F7EFDE; --q-ink-rgb:247,239,222; --q-accent:#D8B57A; --q-accent-rgb:216,181,122; --q-fade-top:#2A2014; }
.pal-emerald { --q-base:#06120D;  --q-ink:#E9F4EC; --q-ink-rgb:233,244,236; --q-accent:#84C29A; --q-accent-rgb:132,194,154; --q-fade-top:#0B2419; }
.pal-plum    { --q-base:#150A11;  --q-ink:#F6E9EF; --q-ink-rgb:246,233,239; --q-accent:#CB93AE; --q-accent-rgb:203,147,174; --q-fade-top:#261426; }
.pal-karbala { --q-base:#150407;  --q-ink:#F6E7E4; --q-ink-rgb:246,231,228; --q-accent:#BC5E5A; --q-accent-rgb:188,94,90;  --q-fade-top:#46101A; }
.pal-slate   { --q-base:#0A0C10;  --q-ink:#EFF1F5; --q-ink-rgb:239,241,245; --q-accent:#AEB6C2; --q-accent-rgb:174,182,194; --q-fade-top:#1A2029; }

/* ============================================================
   BACKGROUND LAYER
   All grounds resolve their darkest area to var(--q-base) so a
   palette recolours the whole canvas; warm light overlays remain.
   ============================================================ */
.q-bg { position: absolute; inset: 0; z-index: 0; background: var(--q-base, #000); }

/* GROUNDS ---------------------------------------------------- */

/* Pure base. Maximum contrast. The default, and the most reverent. */
.bg-black .q-bg { background: var(--q-base, #000); }

/* Fade — the standard gradient ground. A soft tone (--q-fade-top, set by
   the palette) descends into the base, with a faint star field. Pick the
   Night palette for the classic blue-to-black; every palette has its own. */
.bg-fade .q-bg {
  background:
    radial-gradient(125% 85% at 50% 2%, var(--q-fade-top, #15171D) 0%, transparent 60%),
    linear-gradient(180deg, var(--q-fade-top, #15171D) 0%, var(--q-base, #000) 58%, var(--q-base, #000) 100%);
}
.bg-fade .q-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.38;
  background-image:
    radial-gradient(1.1px 1.1px at 18% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 67% 13%, rgba(255,255,255,0.36), transparent),
    radial-gradient(1.2px 1.2px at 82% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 38% 9%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1px 1px at 50% 26%, rgba(255,255,255,0.2), transparent);
}

/* Nūr — soft light descending from above, as through a dome oculus. */
.bg-nur .q-bg {
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(255,244,222,0.13) 0%, rgba(255,244,222,0.04) 34%, transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(120,98,60,0.10) 0%, transparent 60%),
    var(--q-base, #000);
}

/* Layl — night. A deep indigo sky settling to the base; faint stars. */
.bg-layl .q-bg {
  background:
    radial-gradient(130% 90% at 50% 8%, rgba(58,66,96,0.40) 0%, rgba(28,32,50,0.30) 34%, transparent 64%),
    linear-gradient(180deg, #0C0F1A 0%, #070910 56%, var(--q-base, #000) 100%);
}
.bg-layl .q-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(1.1px 1.1px at 18% 22%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 67% 14%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1.2px 1.2px at 82% 33%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 38% 9%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 50% 28%, rgba(255,255,255,0.22), transparent);
}

/* Khaṭṭ — a faint rosette lattice (overlapping circles), vignetted away. */
.bg-khatt .q-bg {
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 26%, rgba(0,0,0,0.72) 72%),
    var(--khatt-pattern),
    var(--q-base, #000);
  background-size: auto, 132px 132px, auto;
  background-position: center;
}

/* Photograph — the presenter's own image, protected by the text scrim. */
.bg-photo .q-bg {
  background-image: var(--q-img);
  background-size: cover;
  background-position: center;
  filter: brightness(0.5) contrast(1.02) saturate(0.94);
}

.qdeck, .q-stage, .q-lab {
  --khatt-pattern:
    radial-gradient(circle at 0 0,      transparent 31px, rgba(201,168,106,0.16) 31px, rgba(201,168,106,0.16) 32px, transparent 33px),
    radial-gradient(circle at 66px 0,   transparent 31px, rgba(201,168,106,0.16) 31px, rgba(201,168,106,0.16) 32px, transparent 33px),
    radial-gradient(circle at 0 66px,   transparent 31px, rgba(201,168,106,0.16) 31px, rgba(201,168,106,0.16) 32px, transparent 33px),
    radial-gradient(circle at 66px 66px,transparent 31px, rgba(201,168,106,0.16) 31px, rgba(201,168,106,0.16) 32px, transparent 33px),
    radial-gradient(circle at 33px 33px,transparent 31px, rgba(201,168,106,0.16) 31px, rgba(201,168,106,0.16) 32px, transparent 33px);
}

/* SCENES — atmospheric grounds built purely from LIGHT and SILHOUETTE.
   No photography, no illustration, no image files. ------------------ */

/* Rehal — the Qur'an stand. Crossed-wood silhouette, light from the cradle. */
.bg-rehal .q-bg {
  background:
    radial-gradient(54% 40% at 50% 72%, rgba(255,234,196,0.13) 0%, rgba(198,150,92,0.06) 38%, transparent 66%),
    var(--q-base, #000);
}
.bg-rehal .q-bg::before {            /* the crossed legs (two bars = an X) */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 50%; height: 32%;
  background:
    linear-gradient(58deg,  transparent 45%, #0d0a06 46%, #1a1209 50%, #0d0a06 54%, transparent 55%),
    linear-gradient(-58deg, transparent 45%, #0d0a06 46%, #1a1209 50%, #0d0a06 54%, transparent 55%);
}
.bg-rehal .q-bg::after {             /* light blooming from the cradle */
  content: ""; position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%);
  width: 38%; height: 26%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255,242,214,0.16), transparent 72%);
  filter: blur(6px);
}

/* Maṣḥaf — the open Qur'an. Pages splay from a glowing gutter at the base. */
.bg-mushaf .q-bg {
  background:
    radial-gradient(40% 72% at 50% 100%, rgba(255,240,210,0.16) 0%, rgba(214,166,108,0.06) 36%, transparent 64%),
    var(--q-base, #000);
}
.bg-mushaf .q-bg::before {           /* the open pages — a shallow valley */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64%; height: 30%;
  clip-path: polygon(0% 26%, 50% 72%, 100% 26%, 100% 100%, 0% 100%);
  background: radial-gradient(64% 130% at 50% 0%, rgba(246,234,208,0.55) 0%, rgba(150,118,78,0.22) 44%, rgba(18,14,9,0.96) 78%);
}
.bg-mushaf .q-bg::after {            /* the beam rising from the gutter */
  content: ""; position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  width: 30%; height: 82%;
  background: radial-gradient(46% 58% at 50% 100%, rgba(255,245,222,0.14), transparent 72%);
  filter: blur(9px);
}

/* Miḥrāb — the niche. A horseshoe arch of warm light, a lamp within. */
.bg-niche .q-bg { background: var(--q-base, #000); }
.bg-niche .q-bg::before {            /* the niche outline + interior glow */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 52%; height: 84%;
  border: 1px solid rgba(var(--q-accent-rgb), 0.26);
  border-bottom: none;
  border-radius: 46% 46% 0 0 / 60% 60% 0 0;
  background: linear-gradient(0deg, rgba(255,236,200,0.10) 0%, rgba(255,236,200,0.025) 56%, transparent 80%);
}
.bg-niche .q-bg::after {             /* the lamp within the niche */
  content: ""; position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  width: 30%; height: 42%;
  background: radial-gradient(circle at 50% 42%, rgba(255,240,212,0.16) 0%, transparent 66%);
  filter: blur(7px);
}

/* Rays — soft beams fan down from a source above; the verse hangs in light. */
.bg-rays .q-bg {
  background:
    radial-gradient(46% 34% at 50% 2%, rgba(255,243,216,0.20) 0%, transparent 58%),
    conic-gradient(from 152deg at 50% 3%,
      transparent 0deg,
      rgba(255,241,212,0.075) 6deg,  transparent 12deg,
      rgba(255,241,212,0.055) 20deg, transparent 26deg,
      rgba(255,241,212,0.075) 34deg, transparent 40deg,
      rgba(255,241,212,0.055) 48deg, transparent 54deg,
      rgba(255,241,212,0.075) 62deg, transparent 68deg,
      transparent 360deg),
    var(--q-base, #000);
}
.bg-rays .q-bg::after {              /* dim the beams toward the floor */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 64%, var(--q-base,#000) 100%);
}

/* Qandīl — a hanging lamp glowing from above, light pooling down. */
.bg-qandil .q-bg {
  background:
    radial-gradient(34% 30% at 50% 30%, rgba(255,236,196,0.17) 0%, rgba(212,158,92,0.06) 40%, transparent 66%),
    var(--q-base, #000);
}
.bg-qandil .q-bg::before {           /* the lamp body + chain */
  content: ""; position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
  width: 3.4%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,228,180,0.6), rgba(180,120,60,0.22) 60%, transparent 76%);
  box-shadow: 0 -3.6vw 0 -0.7vw rgba(var(--q-accent-rgb), 0.16);
}
.bg-qandil .q-bg::after {            /* the downward glow pool */
  content: ""; position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  width: 50%; height: 74%;
  background: radial-gradient(50% 58% at 50% 0%, rgba(255,238,200,0.10), transparent 70%);
  filter: blur(8px);
}

/* Ufuq — a dawn horizon, warm light low on the canvas after the night vigil. */
.bg-ufuq .q-bg {
  background:
    radial-gradient(62% 30% at 50% 100%, rgba(255,214,150,0.20) 0%, transparent 70%),
    linear-gradient(180deg, var(--q-base,#000) 0%, var(--q-base,#000) 50%, rgba(46,34,22,0.55) 72%, rgba(132,92,54,0.30) 88%, rgba(196,154,98,0.16) 100%);
}

/* ============================================================
   TEXT
   ============================================================ */
.q-textwrap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 7.5% 7%;
  text-align: center;
}
.q-text { position: relative; max-width: 100%; }

/* --- Arabic source — secondary: a smaller, dignified line, RTL. ---
   Font sizes carry a --q-fit multiplier (default 1). The auto-fit script
   lowers --q-fit on a per-slide basis so even the longest āyah composes
   onto one slide without overflow. */
.q-ar {
  font-family: var(--qfont, 'Amiri Quran'), 'Scheherazade New', serif;
  direction: rtl;
  color: var(--q-source);
  font-size: calc(clamp(28px, 7cqw, 84px) * var(--q-fit, 1));
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 1px 18px rgba(0,0,0,0.5);
  text-wrap: balance;
}
/* hair rule under the Arabic, separating source from the focus translation */
.q-text.has-tr .q-ar::after {
  content: "";
  display: block;
  width: 58px; height: 1px;
  margin: 0.62em auto 0.08em;
  background: linear-gradient(90deg, transparent, var(--q-accent), transparent);
  opacity: 0.55;
}

/* --- English translation — THE FOCUS: largest, brightest serif. --- */
.q-tr-line {
  font-family: var(--font-serif);
  color: var(--q-ink);
  font-size: calc(clamp(32px, 9cqw, 104px) * var(--q-fit, 1));
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: 0.002em;
  margin: 0.58em auto 0;
  max-width: 100%;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}
/* The translation spans the full text area (edge padding comes from the
   slide's safe margins on .q-textwrap). At projection scale the large type
   keeps the line length readable even at full width. Longer verses only
   tighten line-height a touch. */
.q-text.long  .q-tr-line { line-height: 1.3; }
.q-text.xlong .q-tr-line { line-height: 1.28; }
.q-text.xlong .q-lit-line { margin-top: 0.6em; }

/* --- Transliteration — quietest, italic Latin. --- */
.q-lit-line {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--q-faint);
  font-size: clamp(9px, 1.7cqw, 20px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0.85em 0 0;
  text-wrap: balance;
}

/* When the translation is hidden, the Arabic steps up to fill the slide. */
.q-text.ar-solo .q-ar { font-size: calc(clamp(20px, 6.2cqw, 80px) * var(--q-fit, 1)); line-height: 1.78; color: var(--q-ink); }

/* ============================================================
   THE AYAH MEDALLION — verse-end ornament (uses --q-accent)
   ============================================================ */
.q-ayah {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; margin: 0 0.34em; vertical-align: -0.2em;
  border-radius: 50%;
  font-family: 'Amiri Quran', serif; font-size: 0.5em; line-height: 1;
  color: var(--q-accent);
  background: radial-gradient(circle, rgba(var(--q-accent-rgb),0.16) 0%, transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--q-accent-rgb),0.55),
    inset 0 0 0 3.5px rgba(var(--q-accent-rgb),0.14);
  position: relative;
}
.q-ayah::before {                    /* eight faint points → a rosette */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(var(--q-accent-rgb),0.30) 0deg 6deg, transparent 6deg 45deg,
      rgba(var(--q-accent-rgb),0.30) 45deg 51deg, transparent 51deg 90deg,
      rgba(var(--q-accent-rgb),0.30) 90deg 96deg, transparent 96deg 135deg,
      rgba(var(--q-accent-rgb),0.30) 135deg 141deg, transparent 141deg 180deg,
      rgba(var(--q-accent-rgb),0.30) 180deg 186deg, transparent 186deg 225deg,
      rgba(var(--q-accent-rgb),0.30) 225deg 231deg, transparent 231deg 270deg,
      rgba(var(--q-accent-rgb),0.30) 270deg 276deg, transparent 276deg 315deg,
      rgba(var(--q-accent-rgb),0.30) 315deg 321deg, transparent 321deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 74%, transparent 75%);
  mask: radial-gradient(circle, transparent 60%, #000 61%, #000 74%, transparent 75%);
}

/* ============================================================
   CONTEXT SLUG — surah · ayah, quiet, top of slide
   ============================================================ */
.q-slug {
  position: absolute; z-index: 2; left: 0; right: 0; top: 6.4%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(7px, 1.15cqw, 13px);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--q-meta);
}

/* ============================================================
   TEXT-PROTECTING SCRIM — on lit grounds, a soft dark cloud shaped
   to the text block keeps the words readable while the ground keeps
   its atmosphere. Plain grounds need none.
   ============================================================ */
.bg-photo  .q-text::before,
.bg-khatt  .q-text::before,
.bg-rehal  .q-text::before,
.bg-mushaf .q-text::before,
.bg-niche  .q-text::before,
.bg-rays   .q-text::before,
.bg-qandil .q-text::before,
.bg-ufuq   .q-text::before {
  content: "";
  position: absolute;
  inset: -24% -16%;
  z-index: -1;
  background: radial-gradient(62% 62% at 50% 50%,
              rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.52) 42%, rgba(0,0,0,0.18) 66%, rgba(0,0,0,0) 80%);
  filter: blur(30px);
}

/* ============================================================
   TYPE FACES — swappable Arabic scripts (the --qfont variable)
   ============================================================ */
.qf-amiri        { --qfont: 'Amiri Quran'; }
.qf-scheherazade { --qfont: 'Scheherazade New'; }
.qf-noto         { --qfont: 'Noto Naskh Arabic'; }

.qf-scheherazade .q-ar { font-size: calc(clamp(28px, 6.8cqw, 82px) * var(--q-fit, 1)); line-height: 1.8; }
.qf-noto .q-ar         { font-size: calc(clamp(26px, 6.2cqw, 76px) * var(--q-fit, 1)); line-height: 1.85; }

/* ============================================================
   INTRO / TITLE SLIDE — the opening card of a surah presentation.
   Inherits the slide's palette (--q-ink / --q-accent / --q-source) and
   Arabic face (--qfont); sized in cqw so it scales with the slide.
   ============================================================ */
.q-intro {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 8cqw;
}
.q-intro__num {
  font-family: var(--font-ui);
  font-size: clamp(9px, 1.5cqw, 18px);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--q-accent);
  margin-bottom: 1.1em;
}
.q-intro__ar {
  font-family: var(--qfont, 'Amiri Quran'), 'Scheherazade New', serif;
  direction: rtl;
  color: var(--q-ink);
  font-size: clamp(34px, 12cqw, 150px);
  line-height: 1.35;
}
.q-intro__rule {
  width: clamp(40px, 14cqw, 200px); height: 1px;
  background: var(--q-accent); opacity: 0.55;
  margin: 0.75em 0 0.65em;
}
.q-intro__en {
  font-family: var(--font-serif);
  color: var(--q-ink);
  font-size: clamp(18px, 4.6cqw, 56px);
  line-height: 1.18;
}
.q-intro__meaning {
  font-family: var(--font-serif); font-style: italic;
  color: var(--q-faint);
  font-size: clamp(12px, 2.3cqw, 27px);
  margin-top: 0.5em;
}