/* Quran Hifz - "Apna Mushaf": our own rendered 16-line IndoPak page (modules/mushaf.js) */
@font-face {
  font-family: 'QMushafDK';
  src: url('../fonts/DigitalKhattIndoPak.otf') format('opentype');
  font-display: block;
}

.qm-page {
  --qm-paper: #fdf8e9; --qm-paper2: #f3e6c4; --qm-ink: #17150f; --qm-green: #1d5c41; --qm-gold: #b98f2e; --qm-gold2: #e2c46f;
  --qm-band: #f4e7bf; --qm-band-ink: #174d36; --qm-ae: #1b6a46; --qm-waqf: #c3262e; --qm-muted: #6d5a2c; --qm-hl: rgba(255, 196, 0, .38);
  position: relative; box-sizing: border-box; direction: rtl; overflow: hidden; flex: none;
  background: radial-gradient(ellipse at 50% 45%, var(--qm-paper) 55%, var(--qm-paper2) 100%);
  color: var(--qm-ink); border-radius: calc(var(--qm-u) * .6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  font-family: 'QMushafDK', 'Traditional Arabic', serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility;
}
.qm-page *, .qm-page *::before, .qm-page *::after { box-sizing: border-box; }
.qm-page.qm-dark {
  --qm-paper: #12402d; --qm-paper2: #0b2a1d; --qm-ink: #f6eed6; --qm-green: #d9b95e; --qm-gold: #c9a548; --qm-gold2: #8a6d24;
  --qm-band: #0f3626; --qm-band-ink: #f1d98c; --qm-ae: #e8c766; --qm-waqf: #ff8f87; --qm-muted: #d7c48f; --qm-hl: rgba(255, 214, 90, .30);
}

/* outer ornamental frame: green rule + gold double rule */
.qm-frame {
  position: absolute; inset: calc(var(--qm-u) * 2.2);
  border: calc(var(--qm-u) * .55) solid var(--qm-green);
  outline: calc(var(--qm-u) * .22) solid var(--qm-gold); outline-offset: calc(var(--qm-u) * .45);
  border-radius: calc(var(--qm-u) * .5);
}
.qm-frame::before {
  content: ''; position: absolute; inset: calc(var(--qm-u) * .55);
  border: calc(var(--qm-u) * .18) solid var(--qm-gold); border-radius: calc(var(--qm-u) * .3);
}
.qm-corner { position: absolute; width: calc(var(--qm-u) * 5); height: calc(var(--qm-u) * 5); color: var(--qm-gold); pointer-events: none; }
.qm-corner svg { width: 100%; height: 100%; display: block; }
.qm-corner.tl { top: calc(var(--qm-u) * .9); left: calc(var(--qm-u) * .9); }
.qm-corner.tr { top: calc(var(--qm-u) * .9); right: calc(var(--qm-u) * .9); transform: scaleX(-1); }
.qm-corner.bl { bottom: calc(var(--qm-u) * .9); left: calc(var(--qm-u) * .9); transform: scaleY(-1); }
.qm-corner.br { bottom: calc(var(--qm-u) * .9); right: calc(var(--qm-u) * .9); transform: scale(-1, -1); }

/* header: surah name (left) . para (right) */
.qm-head {
  position: absolute; left: var(--qm-bx); right: var(--qm-bx); top: calc(var(--qm-u) * 4.1); height: var(--qm-hh);
  display: flex; align-items: center; justify-content: space-between; direction: rtl;
  font-size: var(--qm-hfs); color: var(--qm-band-ink); line-height: 1; white-space: nowrap;
}
.qm-head > span {
  border: calc(var(--qm-u) * .18) solid var(--qm-gold); background: var(--qm-band);
  border-radius: 999px; padding: 0 calc(var(--qm-u) * 2.2); height: 100%;
  display: inline-flex; align-items: center; gap: .35em;
}
.qm-head .qm-hpara { font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Urdu Typesetting', 'QMushafDK', serif; }
.qm-head .qm-hsurah { font-family: 'QMushafDK', serif; }

/* text block */
.qm-body {
  position: absolute; left: var(--qm-bx); right: var(--qm-bx); top: var(--qm-by); bottom: var(--qm-bb);
  border-top: calc(var(--qm-u) * .18) solid var(--qm-gold); border-bottom: calc(var(--qm-u) * .18) solid var(--qm-gold);
  padding: 0 calc(var(--qm-u) * .8);
  display: flex; flex-direction: column;
}
.qm-line {
  position: relative; height: var(--qm-lh); flex: none;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  white-space: nowrap; font-size: var(--qm-fs); line-height: 1;
}
.qm-line.qm-c, .qm-line.qm-one { justify-content: center; gap: var(--qm-gap); }
.qm-line + .qm-line { border-top: 1px solid transparent; }
.qm-w, .qm-ae { display: inline-block; position: relative; padding: 0 .02em; border-radius: .18em; }
.qm-ae { color: var(--qm-ae); font-size: 1.1em; }
.qm-wq { color: var(--qm-waqf); }
.qm-w.qm-hl, .qm-ae.qm-hl { background: var(--qm-hl); }

/* surah heading band */
.qm-sh {
  height: 88%; width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: calc(var(--qm-u) * .25) double var(--qm-gold); outline: calc(var(--qm-u) * .14) solid var(--qm-green); outline-offset: calc(var(--qm-u) * -.75);
  background: linear-gradient(90deg, var(--qm-band) 0%, var(--qm-paper) 50%, var(--qm-band) 100%);
  border-radius: calc(var(--qm-u) * 1.2); padding: 0 calc(var(--qm-u) * 2.4); color: var(--qm-band-ink);
}
.qm-sh .qm-sname { font-size: 1.02em; color: var(--qm-band-ink); }
.qm-sh .qm-sname.qm-mid { margin: 0 auto; }
.qm-sh .qm-sinfo {
  font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Urdu Typesetting', 'Segoe UI', sans-serif;
  font-size: .5em; color: var(--qm-muted); min-width: 4.5em; text-align: center;
}
.qm-sh { position: relative; }
.qm-sh .qm-sbism { font-size: .95em; color: var(--qm-ink); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.qm-ae.qm-ae-empty { display: none; }
.qm-line.qm-bism { justify-content: center; }
.qm-line.qm-bism .qm-btxt { font-size: 1.04em; }

/* ruku sign in the left margin */
.qm-ruku {
  position: absolute; left: calc(-.95 * var(--qm-rm)); top: 50%; transform: translate(-50%, -50%); padding-bottom: .12em;
  width: calc(var(--qm-rm) * .86); height: calc(var(--qm-rm) * .86); border-radius: 50%;
  border: calc(var(--qm-u) * .16) solid var(--qm-gold); background: var(--qm-band); color: var(--qm-green);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-size: calc(var(--qm-rm) * .5); font-family: 'QMushafDK', serif;
}

/* page number medallion */
.qm-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--qm-u) * 3.2); height: var(--qm-fh); display: flex; justify-content: center; align-items: center; }
.qm-pno {
  min-width: calc(var(--qm-fh) * 1.9); height: 100%; padding: 0 .6em; border-radius: 999px;
  border: calc(var(--qm-u) * .18) solid var(--qm-gold); background: var(--qm-band); color: var(--qm-band-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Segoe UI', 'Noto Naskh Arabic', sans-serif; font-size: calc(var(--qm-fh) * .62); line-height: 1;
}

/* first two pages (Fatiha, start of Baqarah): ornamental opening layout */
.qm-opening .qm-body { border: calc(var(--qm-u) * .3) solid var(--qm-gold); outline: calc(var(--qm-u) * .2) solid var(--qm-green); outline-offset: calc(var(--qm-u) * .6);
  border-radius: 50% 50% calc(var(--qm-u) * 1) calc(var(--qm-u) * 1) / calc(var(--qm-u) * 22) calc(var(--qm-u) * 22) calc(var(--qm-u) * 1) calc(var(--qm-u) * 1);
  justify-content: flex-end; padding-bottom: calc(var(--qm-u) * 4); }

/* dua after the last surah */
.qm-line.qm-dua { color: var(--qm-muted); }
.qm-line.qm-duat { justify-content: center; color: var(--qm-green); }

/* two-page spread */
.qm-spread { display: flex; flex-direction: row; direction: rtl; gap: 0; align-items: center; justify-content: center; }
.qm-spread .qm-page { border-radius: 0; }
.qm-spread .qm-page:first-child { border-radius: 0 calc(var(--qm-u) * .6) calc(var(--qm-u) * .6) 0; box-shadow: inset 12px 0 18px -14px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25); }
.qm-spread .qm-page:last-child { border-radius: calc(var(--qm-u) * .6) 0 0 calc(var(--qm-u) * .6); box-shadow: inset -12px 0 18px -14px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25); }

/* hifz helpers: hide / reveal a whole line or words */
.qm-line.qm-hide > *, .qm-w.qm-hide { visibility: hidden; }
.qm-line.qm-hide::after { content: ''; position: absolute; inset: 14% 0; border-radius: .3em; background: var(--qm-paper2); border: 1px dashed var(--qm-gold); }

@media print { .qm-page { box-shadow: none; } }

/* ===== paper colours (QMushaf opts.theme -> .qm-paper-*) — light = cream (default), dark = deep green ===== */
.qm-page.qm-paper-white { --qm-paper: #ffffff; --qm-paper2: #f4f1ea; --qm-band: #f5efdc; --qm-ink: #121212; }
.qm-page.qm-paper-green { --qm-paper: #f1f8ef; --qm-paper2: #dcebd6; --qm-band: #e3efdc; --qm-ink: #14200f; --qm-band-ink: #1b5a3a; }
.qm-page.qm-paper-sepia { --qm-paper: #f4e7cf; --qm-paper2: #e2cba3; --qm-band: #ead6ae; --qm-ink: #2b1d0e; --qm-green: #5a4220; --qm-band-ink: #4a3215;
  --qm-ae: #7a4f12; --qm-muted: #6e5530; --qm-gold: #a57a2c; }
.qm-page.qm-paper-night { --qm-paper: #1d2023; --qm-paper2: #131517; --qm-ink: #e9e4d6; --qm-green: #8fb9a3; --qm-gold: #a88c4c; --qm-gold2: #6d5b31;
  --qm-band: #262a2e; --qm-band-ink: #e3cf95; --qm-ae: #d8bc6c; --qm-waqf: #ff958c; --qm-muted: #b8ad8f; --qm-hl: rgba(255, 214, 90, .26); }
.qm-page.qm-paper-white, .qm-page.qm-paper-green { background: radial-gradient(ellipse at 50% 45%, var(--qm-paper) 62%, var(--qm-paper2) 100%); }
/* app dark theme: light papers are dimmed a touch so a bright page does not glare in a dark room */
body:not(.light) .qm-page.qm-paper-white { filter: brightness(.94); }

/* ===== page designs (opts.style -> .qm-st-*): decoration only, every line keeps its exact place ===== */
/* سادہ: one thin rule, no ornaments */
.qm-st-plain .qm-frame { border-width: calc(var(--qm-u) * .2); border-color: var(--qm-gold); outline: none; }
.qm-st-plain .qm-frame::before, .qm-st-plain .qm-corner { display: none; }
.qm-st-plain .qm-head > span { background: none; border-color: transparent; }
.qm-st-plain .qm-body { border-top-width: calc(var(--qm-u) * .12); border-bottom-width: calc(var(--qm-u) * .12); }
.qm-st-plain .qm-sh { border: calc(var(--qm-u) * .14) solid var(--qm-gold); outline: none; background: var(--qm-band); }
.qm-st-plain .qm-pno { background: none; border-color: transparent; }
/* سنہری: gold ornamental — wide gold band, gold corners, gilded heading bands */
.qm-st-gold .qm-frame { border: calc(var(--qm-u) * .9) double var(--qm-gold); outline: calc(var(--qm-u) * .3) solid var(--qm-gold2); outline-offset: calc(var(--qm-u) * .35);
  box-shadow: inset 0 0 0 calc(var(--qm-u) * .35) color-mix(in srgb, var(--qm-gold2) 55%, transparent); }
.qm-st-gold .qm-frame::before { border-color: var(--qm-gold2); border-style: dotted; border-width: calc(var(--qm-u) * .3); }
.qm-st-gold .qm-corner { color: var(--qm-gold); width: calc(var(--qm-u) * 7); height: calc(var(--qm-u) * 7); }
.qm-st-gold .qm-head > span, .qm-st-gold .qm-pno { background: linear-gradient(180deg, var(--qm-gold2), var(--qm-band) 60%); border-color: var(--qm-gold); }
.qm-st-gold .qm-sh { border-color: var(--qm-gold); outline-color: var(--qm-gold2); background: linear-gradient(90deg, var(--qm-gold2) 0%, var(--qm-band) 22%, var(--qm-paper) 50%, var(--qm-band) 78%, var(--qm-gold2) 100%); }
.qm-st-gold .qm-body { border-color: var(--qm-gold); }
/* کلاسیکی: dark green frame with a fine gold rule inside */
.qm-st-classic .qm-frame { border: calc(var(--qm-u) * 1.5) solid #1f4d36; outline: calc(var(--qm-u) * .2) solid var(--qm-gold); outline-offset: calc(var(--qm-u) * .3); }
.qm-st-classic .qm-frame::before { inset: calc(var(--qm-u) * .3); border-color: var(--qm-gold); border-width: calc(var(--qm-u) * .14); }
.qm-st-classic .qm-corner { display: none; }
.qm-st-classic .qm-head > span, .qm-st-classic .qm-pno { background: #1f4d36; color: #f3e3b0; border-color: var(--qm-gold); }
.qm-st-classic .qm-sh { background: #1f4d36; color: #f3e3b0; border-color: var(--qm-gold); outline-color: #f3e3b080; }
.qm-st-classic .qm-sh .qm-sname { color: #f6e7b8; } .qm-st-classic .qm-sh .qm-sinfo { color: #d9c690; } .qm-st-classic .qm-sh .qm-sbism { color: #fff6dc; }
.qm-st-classic.qm-dark .qm-frame { border-color: #0a2117; }
/* کم رنگ: minimal for reading — no frame, flat paper, quiet header */
.qm-st-minimal { background: var(--qm-paper); }
.qm-st-minimal .qm-frame, .qm-st-minimal .qm-corner { display: none; }
.qm-st-minimal .qm-head > span { background: none; border-color: transparent; color: var(--qm-muted); }
.qm-st-minimal .qm-body { border-color: transparent; }
.qm-st-minimal .qm-sh { border: none; outline: none; background: none; border-bottom: 1px solid color-mix(in srgb, var(--qm-gold) 60%, transparent); border-radius: 0; }
.qm-st-minimal .qm-pno { background: none; border-color: transparent; color: var(--qm-muted); }
.qm-st-minimal .qm-ruku { background: none; }
.qm-st-minimal.qm-opening .qm-body { outline: none; border-color: color-mix(in srgb, var(--qm-gold) 45%, transparent); }

/* page turn: the new page fades in from the side it comes from (no delay — it is already drawn) */
@keyframes qm-turn-next { from { opacity: .35; transform: translateX(-1.2%); } to { opacity: 1; transform: none; } }
@keyframes qm-turn-prev { from { opacity: .35; transform: translateX(1.2%); } to { opacity: 1; transform: none; } }
.qm-turn-next { animation: qm-turn-next .2s ease-out; }
.qm-turn-prev { animation: qm-turn-prev .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .qm-turn-next, .qm-turn-prev { animation: none; } }

/* ---------- tajweed colours (modules/tajweed.js) — as in the Taj Company 4-colour mushaf: ghunna red, heavy letters green,
   qalqala blue; the 'full' scheme adds madd (orange) and silent letters (grey) */
.qm-page { --tj-g: #d6156b; --tj-h: #12873d; --tj-q: #1658c9; --tj-mw: #c2410c; --tj-mj: #d97706; --tj-s: #a3a3a3; }
.qm-page.qm-dark { --tj-g: #ff7eb6; --tj-h: #7ee29c; --tj-q: #98c4ff; --tj-mw: #ffa36b; --tj-mj: #ffc861; --tj-s: #a3ada5; }
.qm-w .tj { display: inline; }
.tj-g { color: var(--tj-g); } .tj-h { color: var(--tj-h); } .tj-q { color: var(--tj-q); }
.qm-tj-full .tj-mw { color: var(--tj-mw); } .qm-tj-full .tj-mj { color: var(--tj-mj); } .qm-tj-full .tj-s { color: var(--tj-s); }

/* tajweed colour key printed in the bottom margin (inside the gold frame), on both sides of the page number */
.qm-foot.qm-foot-lg { left: var(--qm-bx); right: var(--qm-bx); gap: calc(var(--qm-u) * 1.4); }
.qm-lgg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-evenly; gap: calc(var(--qm-u) * 1.2); overflow: hidden;
  font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Nirmala UI', Tahoma, sans-serif; font-size: calc(var(--qm-fh) * .40); line-height: 1.2; color: var(--qm-muted); white-space: nowrap; }
.qm-lg { display: inline-flex; align-items: center; gap: .4em; flex: none; }
.qm-lgd { width: .78em; height: .78em; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.qm-page .tjk-g { background: var(--tj-g); } .qm-page .tjk-h { background: var(--tj-h); } .qm-page .tjk-q { background: var(--tj-q); }
.qm-page .tjk-mw { background: var(--tj-mw); } .qm-page .tjk-mj { background: var(--tj-mj); } .qm-page .tjk-s { background: var(--tj-s); }
body.hifz .qm-lgg { visibility: visible; }