/* The printed mushaf leaf. Shared by the Plain Quran reader and by Tarteel, so a
   page looks the same whichever one you are in. Only the leaf lives here; each
   page keeps its own chrome (the pager, the bars) in its own file.
   Sizing is driven by --mu-size so text can scale without the frame moving.
   Author: WAJD AI */
:root { --mu-size: 1.55rem; --mu-frame: 1px; }

.mu-leaf { max-width: 620px; min-height: 100%; margin: 0 auto; background: var(--leaf, #fdfaf1);
  border: 2px solid var(--gold); border-radius: 6px; padding: 5px;
  box-shadow: 0 6px 22px rgba(18,63,44,.10); display: flex; flex-direction: column; }
.mu-leaf-in { flex: 1; border: var(--mu-frame) solid var(--gold); border-radius: 3px; padding: 14px 13px 10px; display: flex; flex-direction: column; }

/* Running head: which surah(s) this page carries, and the juz. */
.mu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 12px; }
.mu-head .sr { font-family: 'Scheherazade New','Amiri',serif; font-size: 1.02rem; color: var(--gold); direction: rtl; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-head .jz { font-family: 'Poppins',sans-serif; font-size: .68rem; font-weight: 800; color: var(--ink-light); letter-spacing: .02em; flex: 0 0 auto; }

/* Verse body. Justified so the block sits square like print. */
.mu-body { flex: 1; }
.mu-text { direction: rtl; text-align: justify; text-align-last: center; font-family: 'Madina','Amiri Quran','Scheherazade New','Amiri',serif;
  font-size: var(--mu-size); line-height: 2.15; color: var(--mu-ink, #1a1a1a); margin: 0 0 4px; overflow-wrap: break-word; word-break: normal; }

/* Surah nameplate printed between surahs, as the mushaf does. */
.mu-plate { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 8px;
  border: 1.5px solid var(--gold); border-radius: 4px; background: var(--plate, rgba(184,146,58,.08)); padding: 7px 12px; }
.mu-plate .nm { font-family: 'Scheherazade New','Amiri',serif; font-size: 1.28rem; font-weight: 700; color: var(--gold); direction: rtl; }
.mu-plate .ct { font-family: 'Poppins',sans-serif; font-size: .64rem; font-weight: 800; color: var(--ink-light); }
.mu-bsm { direction: rtl; text-align: center; font-family: 'Amiri Quran','Scheherazade New','Amiri',serif;
  font-size: calc(var(--mu-size) * .92); line-height: 1.9; color: var(--mu-ink, #1a1a1a); margin: 2px 0 8px; }

/* Ayah marker: a small rosette carrying the Arabic-Indic number. */
.ayn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .12em;
  margin: 0 .18em; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--plate, rgba(184,146,58,.08));
  font-family: 'Amiri','Scheherazade New',serif; font-size: .5em; line-height: 1; color: var(--gold); vertical-align: .35em; font-weight: 700; }

/* Foot of the leaf: the printed page number. */
.mu-foot { text-align: center; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px;
  font-family: 'Scheherazade New','Amiri',serif; font-size: .95rem; color: var(--gold); font-weight: 700; }

/* Individual words, only marked up when a page is asked for with words:true.
   Tarteel walks the highlight along these; the plain reader never sets a class,
   so the page reads exactly as before. */
.mu-w { border-radius: 5px; transition: background .16s, color .16s; }
.mu-w.said { opacity: .42; }
/* The ayah the ear heard, lit on arrival and faded out again by the page. On the
   dark leaf --glow sits almost on top of the paper colour, so the arrival was a
   whisper where it needs to be the one thing you see: dark gets a gold wash, the
   illumination the printed mushaf would use. */
.mu-w.mu-found { background: var(--glow); color: var(--green-ink); box-shadow: 0 0 0 3px var(--glow); }
html.dark .mu-w.mu-found { background: rgba(230,200,120,.22); color: var(--mu-ink, #ecf2ed); box-shadow: 0 0 0 3px rgba(230,200,120,.22); }
.mu-w.here { background: var(--glow); color: var(--green-ink); box-shadow: 0 0 0 3px var(--glow); }

/* Clean theme: the leaf joins the pale green family with the rest of the app,
   not warm parchment. Green and blue keep the parchment leaf. */
html.theme-clean { --leaf: #ffffff; --plate: rgba(184,146,58,.07); }   /* Clean is white: a white leaf, gold plates */

/* Dark: the leaf becomes a dark surface, the ink light. Never a white page. */
html.dark { --leaf: #161c18; --mu-ink: #ecf2ed; --plate: rgba(217,180,92,.12); }

/* On a tablet the leaf is wider, so the script grows with it and the page reads
   like print rather than a narrow column adrift in white space. A size the reader
   picks by hand sets --mu-size inline and wins over these. */
@media (min-width: 720px)  { :root { --mu-size: 1.95rem; } .mu-leaf { max-width: 700px; } .mu-leaf-in { padding: 20px 22px 14px; } }
@media (min-width: 1024px) { :root { --mu-size: 2.15rem; } .mu-leaf { max-width: 780px; } }

/* The printed lines. Each is one line of the mushaf, justified edge to edge as
   in print; the closing line of a passage is centred, as the page does. */
.mu-lines { display: flex; flex-direction: column; }
.mu-line {
  font-family: 'Madina','Amiri Quran','Scheherazade New','Amiri',serif;
  font-size: calc(var(--mu-size) * var(--mu-fit, 1)); line-height: 2.15; color: var(--mu-ink, #1a1a1a);
  text-align: right; text-align-last: right;
  white-space: nowrap; overflow: hidden;
}
.mu-line.end { text-align: center; text-align-last: center; }
.mu-line:empty { min-height: calc(var(--mu-size) * var(--mu-fit, 1) * 2.15); }
.mu-lines.mu-measuring .mu-line { text-align: right; text-align-last: right; }
.mu-ln { display: inline; }
.mu-lines.mu-measuring .mu-ln { display: inline-block; white-space: nowrap; }
/* A line the script very nearly fills is stretched to the edges, as in print.
   One with room to spare keeps its own spacing: opening gaps between words is
   not how Arabic fills a line. */
.mu-line.full { text-align: justify; text-align-last: justify; }

/* A printed line set larger than the page width carries onto a second row
   rather than being cut off; the rows of one printed line stay together. */
.mu-lines.mu-wrap .mu-line, .mu-lines.mu-wrap .mu-line.full {
  white-space: normal; overflow: visible; text-align: justify; text-align-last: right; }
.mu-lines.mu-wrap .mu-line.end { text-align: center; text-align-last: center; }

/* The Go to sheet: the surah list gives up height so the settings under it
   (full screen, text size, ruled lines, page layout) are on screen without
   scrolling. Inside a scrolling sheet a second scrolling list hid them: a thumb
   on the list only ever moves the list. About 440px of the sheet is not list. */
.wq-sheet .mu-list { max-height: min(52vh, max(170px, calc(86vh - 440px))); }

/* Ruled lines, like an exercise book: a faint gold rule under every row of the
   Arabic, in either layout. Drawn as a background repeating at the line height,
   in em of the text itself, so the rules follow the text size and every row of a
   paragraph gets one. --mu-rule-at is where the rule sits within the row: just
   below the letters that reach under the line, so it never cuts through them.
   Only the Plain Quran page sets html.mu-ruled; Tarteel's leaf is untouched. */
:root { --mu-rule: rgba(184,146,58,.42); }
html.dark { --mu-rule: rgba(217,180,92,.28); }
html.theme-blue:not(.dark) { --mu-rule: rgba(58,159,214,.45); }   /* Lapis: light blue rules */
html.mu-ruled .mu-text, html.mu-ruled .mu-line {
  --mu-rule-at: 1.86em;
  background-image: linear-gradient(to bottom, transparent calc(var(--mu-rule-at) - 1px), var(--mu-rule) calc(var(--mu-rule-at) - 1px), var(--mu-rule) var(--mu-rule-at), transparent var(--mu-rule-at));
  background-size: 100% 2.15em; background-repeat: repeat-y; }
/* The bismillah is set in Amiri Quran on its own line height, so its rule had
   its own rhythm: measured, it sat 0.15em under the baseline and ran through
   the letters, where a text row's sits 0.43em under. On a ruled page it takes
   a text row's height and size (the fitted size on the 15-line page) so its
   rule falls in step with the rows, and the rule sits the same distance under
   its letters as theirs. The numbers are the measured metrics of the two
   faces: Amiri's baseline is 1.488em down a 1.9em line, Madina's 1.429em down
   2.15em; 2.337em = one text row at this 0.92 size, 2.175em = baseline + the
   rows' 0.431 text-size clearance. */
html.mu-ruled .mu-bsm {
  --mu-row: calc(var(--mu-size) * var(--mu-fit, 1));
  font-size: calc(var(--mu-row) * .92); line-height: 2.337; margin: 0;
  --mu-rule-at: 2.175em;
  background-image: linear-gradient(to bottom, transparent calc(var(--mu-rule-at) - 1px), var(--mu-rule) calc(var(--mu-rule-at) - 1px), var(--mu-rule) var(--mu-rule-at), transparent var(--mu-rule-at));
  background-size: 100% 2.337em; background-repeat: repeat-y; }

/* The open spread (Pro, landscape): two facing leaves, the right one first. */
.mu-spread { display: flex; gap: 10px; min-height: 100%; direction: ltr; max-width: 1240px; margin: 0 auto; justify-content: center; }
.mu-spread .mu-leaf { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
.mu-spread .mu-blank { visibility: hidden; }

/* Mushaf page in the illuminated style, on every theme in its own colours
   (build 438, light appearance; dark keeps its own look). No frame: the leaf is
   a clean sheet with a soft shadow. The running head carries the surah in a
   dark cartouche and the juz in a small label with its Arabic name; verse
   numbers are roundels in the theme ring; the page number sits in a medallion. */
html:not(.dark) .mu-leaf { border: none; border-radius: 18px; padding: 0; background: var(--leaf, #fffdf8); box-shadow: 0 10px 28px rgba(19,35,79,.10); }
html:not(.dark) .mu-leaf-in { border: none; padding: 14px 16px 12px; }
html:not(.dark) .mu-head { border-bottom: none; padding-bottom: 10px; margin-bottom: 10px; background: linear-gradient(90deg, transparent, var(--ring), transparent) bottom / 100% 1px no-repeat; }
html:not(.dark) .mu-head .sr { padding: 1px 16px; border-radius: 999px; background: var(--green-ink); color: var(--gold2); box-shadow: inset 0 0 0 1.2px var(--gold); font-size: .98rem; line-height: 1.6; }
html:not(.dark) .ayn { background: #ffffff; border: .12em solid var(--ring); box-shadow: inset 0 0 0 .1em #ffffff, inset 0 0 0 .16em var(--ring-in); color: var(--ring-tx); min-width: 1.6em; height: 1.6em; }
html:not(.dark) .mu-plate { border: none; border-radius: 999px; background: var(--green-ink); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 3px var(--sand); }
html:not(.dark) .mu-plate .nm { color: var(--gold2); }
html:not(.dark) .mu-plate .ct { color: rgba(255,255,255,.78); }
html:not(.dark) .mu-foot { border-top: none; margin-top: 8px; padding-top: 4px; }

/* ── The IndoPak page (mushaf-indopak.js) ──
   The script South Asian readers learnt from, set as the fifteen printed lines
   of an IndoPak mushaf. The face is DigitalKhatt IndoPak (SIL OFL); it draws
   the end-of-ayah roundels and the stop marks itself, as print does. Blocked
   rather than swapped while it loads: a fallback face has none of this text's
   marks, and a line measured in it would be fitted to the wrong letters. */
@font-face {
  font-family: 'IndoPak';
  src: url('/assets/fonts/indopak.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
/* The IndoPak page has its own base size and takes nothing from the app's text
   size (--mu-size). That setting is for flowing text; here the page is fitted
   to the screen, and when the base followed the setting, pressing A+ grew the
   letters of a page already fitted and pushed every line off both edges. */
.mu-ip { --ip-size: 24px; }
/* Every row is one printed line and the same height, whatever its own size:
   --mu-fit sizes the page, --ln eases a single line a few per cent so a long
   one fits and a short one reaches the margin, --ip-lh is the row height. */
.mu-ip .mu-line {
  --ip-row: calc(var(--ip-size) * var(--mu-fit, 1) * var(--ip-lh, 2));
  font-family: 'IndoPak','Scheherazade New','Amiri',serif;
  font-size: calc(var(--ip-size) * var(--mu-fit, 1) * var(--ln, 1));
  line-height: var(--ip-row); min-height: var(--ip-row);
  text-align: justify; text-align-last: justify;
  overflow: visible;                 /* tall marks must not be cut by the row */
}
.mu-ip .mu-line.end, .mu-ip .mu-line.ip-bsm { text-align: center; text-align-last: center; }
.mu-ip .mu-lines.mu-measuring .mu-line { text-align: right; text-align-last: right; }
/* A surah header takes one printed row, as it does on the page. */
.mu-ip .mu-line.ip-head { display: flex; align-items: center; justify-content: center; height: var(--ip-row); box-shadow: none; }
/* The plate's height is given in the row's own terms: a percentage would have
   nothing to resolve against, and the plate collapsed to a thin bar. */
.mu-ip .mu-line.ip-head .mu-plate { margin: 0; padding: 0 16px; height: calc(var(--ip-row) * .8); min-width: 64%; box-sizing: border-box; }
.mu-ip .mu-line.ip-head .mu-plate .nm { font-size: calc(var(--ip-size) * var(--mu-fit, 1) * .82); line-height: 1; }
.mu-ip .mu-line.ip-head .mu-plate .ct { font-size: calc(var(--ip-size) * var(--mu-fit, 1) * .36); line-height: 1; white-space: nowrap; }
html.mu-ruled .mu-ip .mu-line.ip-head { box-shadow: none; }
/* Ruled, like the printed page: one rule under each row. The Madinah page
   draws its rules as a background in em of the text, which would move with
   each line's own size here, so the row carries a border instead. */
html.mu-ruled .mu-ip .mu-line { background-image: none; box-shadow: inset 0 -1px 0 var(--mu-rule); }
html.mu-ruled .mu-ip .mu-line:last-child { box-shadow: none; }
/* A printed line is never broken. (The reader's text size once carried each
   line onto a second row here; that size belongs to the flowing Madinah page.) */
.mu-ip .mu-line { white-space: nowrap; }

/* ── A phone on its side (mushaf.js sets html.mu-land) ──
   There is no height to spare for the app bar, the page bar and the tab bar,
   so they are put away and the page has the whole screen. They float back
   over the page for a few seconds when it is tapped (html.mu-peek), without
   moving it. The pane keeps clear of the notch on either side. */
html.mu-land .app-bar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 70;
  transform: translateY(-105%); transition: transform .2s ease; }
html.mu-land .wq-foot { transform: translateY(105%); transition: transform .2s ease; }
html.mu-land.mu-peek .app-bar, html.mu-land.mu-peek .wq-foot { transform: none; }
html.mu-land .mu-pane { padding: 8px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
html.mu-land body { padding-bottom: 0 !important; }
html.mu-land .wq-top { display: none; }
@media (prefers-reduced-motion: reduce) { html.mu-land .app-bar, html.mu-land .wq-foot { transition: none; } }