/* =====================================================================
   QURAN (Nov 6 2026), from the Agents Lens tracker's Quran tab, in the app's look.
   Same rules as css/crm.css (tools/lint-ui.js): classes start pp-, colours only as
   tokens from portal.css's :root, where the Quran's green (--q-*) and the reader's
   three themes (--qr-*) live.
   ===================================================================== */

/* The Arabic font, bundled: Indopak Nastaleeq (the build quran.com uses) with ONE glyph
   changed, the sukun drawn as the hook Shadi's mushaf uses instead of a circle (graft
   done and checked in the tracker, Jul 22). Amiri Quran is the fallback. Never swap
   the font without proving full coverage of the text first. */
@font-face { font-family: 'Indopak Nastaleeq'; font-style: normal; font-weight: 400; font-display: swap; src: url(../lib/fonts/IndopakNastaleeqHook.woff2) format('woff2'); }
@font-face { font-family: 'Amiri Quran'; font-style: normal; font-weight: 400; font-display: swap; src: url(../lib/fonts/AmiriQuran.woff2) format('woff2'); }

/* Arabic typography. Never positive letter-spacing (it breaks the joins), never justify,
   never transform. Nastaleeq stacks tall: under 2.6 the marks above and below get cut. */
.pp-q-ar {
  font-family: 'Indopak Nastaleeq', 'Amiri Quran', serif;
  direction: rtl;
  letter-spacing: 0;
  word-spacing: normal;
  line-height: 2.6;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
}

.pp-q { padding-bottom: 48px; }
.pp-q-loading { padding: 40px 8px; text-align: center; color: var(--text-faint); }
.pp-tkh-stat.is-q b { color: var(--q-hi); }
.pp-q .pp-linkbtn { color: var(--q-hi); }

/* ---- next prayer ---- */
.pp-q-np { margin-top: 12px; }
.pp-q-np-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.pp-q-np-row span { font-size: 13px; font-weight: 650; color: var(--text); }
.pp-q-np-row span small { font-weight: 500; color: var(--text-faint); margin-left: 7px; }
.pp-q-np-row b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--q-hi); }
.pp-q-np-bar { height: 4px; border-radius: 4px; background: var(--w-line); overflow: hidden; }
.pp-q-np-bar i { display: block; height: 100%; border-radius: inherit; background: var(--q); transition: width 1s linear; }
.pp-q-np.is-closing .pp-q-np-row b { color: var(--q-late); }
.pp-q-np.is-closing .pp-q-np-bar i { background: var(--q-late); }
.pp-q-np.is-compact { margin-top: 10px; }

/* ---- progress bar (the surah being worked on) ---- */
.pp-q-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pp-q-progress small { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-q-bar { flex: 1; height: 5px; border-radius: 5px; background: var(--w-line); overflow: hidden; min-width: 40px; }
.pp-q-bar i { display: block; height: 100%; border-radius: inherit; background: var(--q); }

/* ---- arrows ---- */
.pp-qr-arrow {
  width: var(--tap); height: var(--tap); flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--w-line); border-radius: var(--radius-sm); background: var(--w-card); color: var(--text-dim); cursor: pointer;
}
.pp-qr-arrow:disabled { opacity: .35; cursor: default; }

/* ---- surahs ---- */
.pp-q-surahs { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.pp-q-sbar { display: flex; gap: 10px; align-items: center; }
.pp-q-sbar .pp-csearch-wrap { flex: 1; min-width: 0; }
[data-page="quran"] .pp-csearch { flex: 1; padding-left: 38px; background: var(--w-bg); border-color: var(--w-line-2); border-radius: 12px; }
.pp-q-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pp-q-filters::-webkit-scrollbar { display: none; }
.pp-q-slist { display: flex; flex-direction: column; gap: 6px; }
.pp-q-srow { display: flex; align-items: stretch; gap: 8px; border: 1px solid var(--w-line); border-radius: var(--radius-card); background: var(--w-card); padding: 4px 6px 4px 4px; }
.pp-q-srow.is-memorized { border-color: var(--q-line); }
.pp-q-smain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 6px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.pp-q-sno { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface-3); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pp-q-srow.is-memorized .pp-q-sno { background: var(--q-deep); color: var(--text); }
.pp-q-srow.is-working .pp-q-sno { box-shadow: inset 0 0 0 1.5px var(--q); color: var(--q-hi); }
.pp-q-sname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-q-sname b { font-size: 15px; font-weight: 650; }
.pp-q-sname small { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-q-sar { font-size: 22px; line-height: 1.8; color: var(--text-dim); flex: none; }
.pp-q-status {
  flex: none; align-self: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--w-line);
  background: transparent; color: var(--text-faint); font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.pp-q-status.is-working { color: var(--q-hi); border-color: var(--q-line); }
.pp-q-status.is-revising { color: var(--text); border-color: var(--line-2); background: var(--surface-3); }
.pp-q-status.is-memorized { color: var(--q-ink); background: var(--q); border-color: var(--q); }

/* ---- mini player ---- */
.pp-q-player {
  display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 6px; border-radius: 999px;
  background: var(--w-card-hi); border: 1px solid var(--q-line); box-shadow: var(--shadow-card-hi);
}
.pp-q-player-main { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text); padding: 4px 8px 4px 2px; cursor: pointer; text-align: left; min-height: var(--tap); }
.pp-q-player-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--q); color: var(--q-ink); flex: none; }
.pp-q-player.is-paused .pp-q-player-ic { background: var(--surface-3); color: var(--text-dim); }
.pp-q-player-txt { display: flex; flex-direction: column; line-height: 1.25; }
.pp-q-player-txt b { font-size: 13px; }
.pp-q-player-txt small { font-size: 12px; color: var(--text-faint); }

/* ---- Home widget ---- */
.pp-wquran { display: flex; flex-direction: column; height: 100%; }
.pp-wquran-verse { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 4px 0; }
.pp-wquran-verse p { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.45; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.pp-wquran-verse small { font-size: 12px; color: var(--q-hi); }

/* =====================================================================
   READER
   ===================================================================== */
.pp-qr { margin-top: 14px; border-radius: var(--radius); background: var(--qr-bg); color: var(--qr-ink); }
.pp-qr[data-theme="grey"] {
  --qr-bg: var(--qr-grey-bg); --qr-bar: var(--qr-grey-bg); --qr-ink: var(--qr-grey-ink); --qr-dim: var(--qr-grey-dim);
  --qr-line: var(--qr-grey-line); --qr-chip: var(--qr-grey-chip);
  padding: 0 14px 6px;
}
.pp-qr[data-theme="light"] {
  --qr-bg: var(--qr-light-bg); --qr-bar: var(--qr-light-bg); --qr-ink: var(--qr-light-ink); --qr-dim: var(--qr-light-dim);
  --qr-line: var(--qr-light-line); --qr-chip: var(--qr-light-chip); --qr-accent: var(--qr-light-accent);
  --qr-hl: var(--qr-light-hl); --qr-hl-ring: var(--qr-light-ring); --qr-mask: var(--qr-light-mask);
  padding: 0 14px 6px;
}
.pp-qr[data-theme="light"] .pp-q-ar { -webkit-font-smoothing: auto; }

.pp-qr-bar { position: sticky; top: 0; z-index: 5; background: var(--qr-bar); padding: 10px 0; border-bottom: 1px solid var(--qr-line); display: flex; flex-direction: column; gap: 10px; }
.pp-qr-nav { display: flex; align-items: center; gap: 8px; }
/* On a computer the menu button floats in the top left corner once the page scrolls, right
   where this bar sticks: the bar starts clear of it. */
.pp-app.is-wide .pp-qr-bar { padding-left: 58px; }
.pp-qr .pp-qr-arrow { background: var(--qr-chip); border-color: var(--qr-line); color: var(--qr-ink); }
.pp-qr-more.is-on { color: var(--qr-accent); border-color: var(--qr-accent); }
.pp-qr-pick { position: relative; flex: 1; min-width: 0; min-height: var(--tap); display: flex; align-items: center; padding: 4px 34px 4px 12px; border-radius: var(--radius-sm); border: 1px solid var(--qr-line); background: var(--qr-chip); cursor: pointer; }
.pp-qr-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; color-scheme: dark; }
.pp-qr[data-theme="light"] .pp-qr-pick select { color-scheme: light; }
.pp-qr-pick-face { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-qr-pick-face b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-qr-pick-face small { font-size: 12px; color: var(--qr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-qr-pick-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--qr-dim); pointer-events: none; }
.pp-qr-listen {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--q); background: var(--q); color: var(--q-ink); font-weight: 700; cursor: pointer;
}
.pp-qr-listen.is-on { background: transparent; color: var(--qr-accent); }
.pp-qr-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-qr-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--qr-line); background: var(--qr-chip); color: var(--qr-dim); font-size: 13px; font-weight: 650; cursor: pointer;
}
.pp-qr-chip.is-on { color: var(--qr-accent); border-color: var(--qr-accent); }
.pp-qr-chip:disabled { opacity: .4; cursor: default; }
.pp-qr-chip .pp-tkh-ct { margin-left: 2px; }
.pp-qr-seg { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--qr-line); background: var(--qr-chip); }
.pp-qr-seg button { min-height: 32px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--qr-dim); font-size: 13px; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pp-qr-seg button.is-on { background: var(--qr-hl); color: var(--qr-accent); }
.pp-qr-seg button:disabled { opacity: .35; cursor: default; }
.pp-qr-goto { display: inline-flex; align-items: center; gap: 6px; }
.pp-qr-goto .pp-input { width: 110px; min-height: 36px; background: var(--qr-chip); border-color: var(--qr-line); color: var(--qr-ink); }
.pp-qr-goto.is-compact .pp-input { width: 78px; }
.pp-qr-goto .pp-qr-arrow { width: 36px; height: 36px; }

.pp-qr-repeat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--qr-line); }
.pp-qr-repeat .pp-fld { margin: 0; }
.pp-qr-repeat .pp-input, .pp-qr-repeat .pp-select { width: 96px; }
.pp-qr-repeat-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pp-qr-loop { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--qr-hl); color: var(--qr-accent); font-size: 13px; font-weight: 600; }
.pp-qr-loop .pp-linkbtn { margin-left: auto; color: var(--qr-accent); }
.pp-qr-loop.is-error { background: var(--qr-chip); color: var(--qr-dim); }

.pp-qr-ornate { position: relative; margin: 18px 0 8px; padding: 22px 18px 14px; border: 1px solid var(--qr-line); border-radius: var(--radius); text-align: center; color: var(--qr-accent); }
.pp-qr-corner { position: absolute; }
.pp-qr-corner.is-tl { top: 6px; left: 6px; }
.pp-qr-corner.is-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.pp-qr-corner.is-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.pp-qr-corner.is-br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
.pp-qr-title { display: flex; flex-direction: column; align-items: center; }
.pp-qr-title-ar { font-size: calc(34px * var(--qr-scale)); color: var(--qr-accent); line-height: 2; }
.pp-qr-title-en { font-size: 13px; color: var(--qr-dim); }
.pp-qr-basmala { font-size: calc(28px * var(--qr-scale)); color: var(--qr-ink); margin-top: 6px; }

.pp-qr-ayah { padding: 14px 10px 10px; border-bottom: 1px solid var(--qr-line); border-radius: var(--radius-sm); transition: background .2s var(--ease); }
.pp-qr-ayah.is-current { background: var(--qr-hl); box-shadow: inset 0 0 0 1px var(--qr-hl-ring); }
.pp-qr-ayah.is-playing { background: var(--qr-hl); }
.pp-qr-ar { font-size: calc(30px * var(--qr-scale)); color: var(--qr-ink); text-align: right; }
.pp-qr-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; margin: 0 .3em; padding: 0 .2em;
  border-radius: 50%; border: 1px solid var(--qr-accent); color: var(--qr-accent); font-family: var(--font); font-size: .42em; line-height: 1; vertical-align: middle;
}
.pp-qr-en { margin-top: 6px; font-size: calc(15px * var(--qr-scale)); line-height: 1.6; color: var(--qr-dim); }
.pp-qr-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pp-qr-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--qr-line); background: transparent; color: var(--qr-dim); font-size: 12px; font-weight: 650; cursor: pointer;
}
.pp-qr-tool.is-on { color: var(--qr-accent); border-color: var(--qr-accent); }
.pp-qr-play { width: 34px; padding: 0; justify-content: center; }
.pp-qr-mask {
  display: inline; font: inherit; line-height: 1.5; vertical-align: middle; color: transparent; background: var(--qr-mask); border: 0; border-radius: 6px;
  padding: 0 .04em; margin: 0; cursor: pointer; text-shadow: none;
}

.pp-qr-page { font-size: calc(30px * var(--qr-scale)); color: var(--qr-ink); text-align: right; padding: 12px 6px; cursor: pointer; }
.pp-qr-pa { border-radius: 6px; transition: background .2s var(--ease); }
.pp-qr-pa.is-current { background: var(--qr-hl); box-shadow: 0 0 0 1px var(--qr-hl-ring); }
.pp-qr-pa.is-playing { background: var(--qr-hl); }

.pp-qr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px 0 8px; }
.pp-qr-foot .pp-btn { color: var(--qr-ink); border-color: var(--qr-line); background: var(--qr-chip); }
.pp-qr-credit { padding: 6px 0 14px; font-size: 11px; color: var(--qr-dim); text-align: center; }

/* ---- phone ---- */
@media (max-width: 760px) {
  /* The foot of the reader has Previous and Next surah, so the phone's top row gives that
     room to the surah picker: no arrows up here, and Listen is just its icon. */
  .pp-qr-nav > .pp-qr-arrow:not(.pp-qr-more) { display: none; }
  .pp-qr-listen { width: var(--tap); padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .pp-qr-ar, .pp-qr-page { font-size: calc(26px * var(--qr-scale)); }
  .pp-qr-title-ar { font-size: calc(28px * var(--qr-scale)); }
  .pp-q-sar { font-size: 19px; }
  .pp-q-sname small { white-space: normal; }
}