/* ============================================================
   مكتبة الأذكار الموثّقة — الإصدار الثاني — الطبقة البصرية
   ADHKAR-T006-R2-DESIGN-CONFORM: مطابقة حرفية لمرجع «السَّكينة v3»
   (01_Governance/sakinah-v3.html). رموز التصميم في assets/tokens.css.
   القواعد أدناه منقولة من المرجع بقيمها كما هي؛ ما ليس له نظير في
   المرجع (صفحة الباب، المسبحة، المفضلة، البحث، الشارة) مركّب من
   مفردات المرجع نفسها فقط — التفصيل في DESIGN_TOKENS.md.
   الأصول المحفوظة من الإصدار الأول: الخطوط الثلاثة ورخصها، حارس خط
   المصحف (ENHANCEMENTS-1 بند ٨)، إخفاء علامة البسملة (T003-R3).
   HTML/CSS/JS خام، خطوط self-hosted، صفر طلبات خارجية، RTL كامل،
   كل الأرقام إنجليزية.
   ============================================================ */

/* ---------- الخطوط (داخل المستودع — الرخص بجانبها — ممنوع subsetting) ---------- */
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri/Amiri-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri/Amiri-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* T003-R2: خط المجمع للنص القرآني حصرًا — TTF كما هو بلا أي تحويل (DECISION_KFGQPC_FONT_2026-08-10).
   font-display: block عمدًا: لا يُعرض القرآن بخط بديل ولو لحظة. */
@font-face {
  font-family: 'KFGQPC Uthmanic';
  src: url('../fonts/kfgqpc/uthmanic_hafs_v20.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   الأساس — المرجع الأسطر 26–57
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { direction: rtl; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--stone);
  color: var(--ink);
  min-height: 100dvh;
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  transition: background var(--dur), color var(--dur);
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; font-size: inherit; }
[hidden] { display: none !important; }
svg { stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 10px; }
.press { transition: transform .16s var(--ease-press), opacity .16s; }
.press:active { transform: scale(.975); opacity: .9; }

/* الإطار — المرجع الأسطر 29–41 */
.frame { max-width: var(--frame-w); margin: 0 auto; min-height: 100dvh; position: relative; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
.view { animation: fadeup .5s var(--ease-out); }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* الظهور عند التمرير — المرجع الأسطر 51–52 */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

@media (min-width: 560px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, rgba(46,90,76,.06), transparent 60%), var(--stone); }
  .frame { box-shadow: 0 0 0 1px var(--line), 0 40px 90px -50px rgba(35,32,26,.35); }
}
@media (min-width: 820px) {
  .frame { max-width: var(--frame-w-wide); }
  .lib { grid-template-columns: repeat(3, 1fr) !important; }
  .doors { grid-template-columns: repeat(3, 1fr) !important; }
  .tab-bar { width: var(--nav-w-wide) !important; }
}

/* إتاحة: رابط التخطي والنص المخفي بصريًا (وظيفيان — بلا مظهر خاص بهما في المرجع) */
.skip-link {
  position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100;
  background: var(--bay); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; font-size: 13px;
}
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, [dir='ltr'] { direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   الترويسة — المرجع الأسطر 59–66
   ============================================================ */
header.app-header { padding: 22px 22px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.wordmark { font-family: var(--font-kufi); font-weight: 600; font-size: 19px; line-height: 1.55; display: block; }
.wordmark small { display: block; font-family: var(--font-ui); font-weight: 300; font-size: 11px; color: var(--ink-2); letter-spacing: 1.5px; margin-top: 2px; }
.tbtn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--bay); display: grid; place-items: center; transition: all .3s; color: inherit; flex: 0 0 auto; }
.tbtn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sun-i { display: none; } .moon-i { display: block; }
:root[data-theme='masaa'] .sun-i { display: block; } :root[data-theme='masaa'] .moon-i { display: none; }
/* أزرار الأيقونات داخل البطاقات — نفس مفردات .tbtn (44px، قوس 14، حد line، أرضية bay) */
.icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--bay); display: grid; place-items: center; color: var(--ink-2); transition: all .3s; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.icon-btn[aria-pressed='true'] { color: var(--bronze); border-color: var(--bronze); }
.icon-btn[aria-pressed='true'] svg path { fill: currentColor; }

/* ============================================================
   الرئيسية: البطل (التحية والعدّادان) — المرجع الأسطر 68–92
   ============================================================ */
.hero { padding: 22px 22px 0; }
.greet { display: flex; align-items: baseline; justify-content: space-between; }
.greet h1 { font-weight: 500; font-size: 23px; }
.greet .clock { font-weight: 300; font-size: 15px; color: var(--ink-2); font-feature-settings: "tnum"; }
.hijri { font-size: 13px; color: var(--ink-2); font-weight: 300; margin-top: 2px; min-height: 1.7em; }
.hero-counters { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; gap: 12px; }
.hc { text-align: center; min-width: 128px; }
.hc .lbl { font-size: 13px; color: var(--ink-2); font-weight: 300; }
.hc .lbl b { color: var(--ink); font-weight: 500; }
.hc-time { font-size: 34px; font-weight: 600; font-feature-settings: "tnum"; line-height: 1.25; margin-top: 3px; letter-spacing: .5px; }
.hc.next .hc-time { color: var(--bronze); }
.hc .sub { font-size: 10.5px; color: var(--ink-2); font-weight: 300; letter-spacing: 1px; }
.archwrap { position: relative; margin-top: -14px; height: 74px; pointer-events: none; }
.archwrap svg { width: 100%; height: 100%; overflow: visible; }
.arch-path { fill: none; stroke: var(--line); stroke-width: 1.25; }
.arch-lit { fill: none; stroke: var(--bronze); stroke-width: 1.5; transition: stroke-dashoffset 1.4s var(--ease-arch) .2s; }
.p-mark { fill: var(--stone); stroke: var(--bronze); stroke-width: 1.1; transition: fill .4s; }
.p-mark.past { fill: var(--bronze); }
.orb { fill: var(--bronze); transition: all .5s; }
.orb-halo { fill: var(--bronze); opacity: .16; }
.archwrap svg.is-night .arch-lit { opacity: .3; }
.archwrap svg.is-night .orb { fill: var(--stone); stroke: var(--bronze); stroke-width: 1.4; }
.archwrap svg.is-night .orb-halo { opacity: .08; }

/* صف المواقيت — المرجع الأسطر 93–109 */
.times { margin: 6px 16px 0; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); display: flex; padding: 12px 6px 10px; transition: background var(--dur), border-color var(--dur); min-height: 92px; }
.tcol { flex: 1; text-align: center; position: relative; padding: 5px 0 3px; border-radius: 12px; }
.tcol + .tcol::before { content: ""; position: absolute; right: 0; top: 16%; height: 68%; width: 1px; background: var(--line-soft); }
.tcol .pi { height: 16px; display: grid; place-items: center; color: var(--ink-2); }
.tcol .pi svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tcol b { display: block; font-weight: 400; font-size: 11.5px; margin-top: 3px; }
.tcol span { display: block; font-weight: 300; font-size: 11.5px; color: var(--ink-2); font-feature-settings: "tnum"; }
.tcol em { display: none; font-style: normal; font-size: 9px; color: var(--cypress); font-weight: 500; letter-spacing: 1px; }
.tcol.now { background: var(--cypress-soft); }
.tcol.now .pi, .tcol.now b { color: var(--cypress); font-weight: 500; }
.tcol.now em { display: block; }
.tcol.now::after { content: ""; position: absolute; top: -4px; right: calc(50% - 3px); width: 6px; height: 6px; transform: rotate(45deg); background: var(--bronze); }
.tcol.next span { color: var(--bronze); font-weight: 500; }
.midnight { display: flex; justify-content: center; gap: 18px; margin-top: 9px; font-size: 11px; font-weight: 300; color: var(--ink-2); min-height: 1.7em; }
.midnight i { font-style: normal; font-feature-settings: "tnum"; }

/* ============================================================
   نحو الأقسام — المرجع الأسطر 111–117
   ============================================================ */
.eyebrow { font-family: var(--font-kufi); font-weight: 500; font-size: 12.5px; letter-spacing: 2.5px; color: var(--cypress); display: flex; align-items: center; gap: 10px; padding: 0 22px; margin: 32px 0 12px; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bay-c { margin: 0 16px; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; position: relative; transition: background var(--dur), border-color var(--dur); }
.bay-c::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 3px; background: linear-gradient(180deg, var(--cypress), var(--bronze)); opacity: .85; }
@keyframes glowpulse { 0% { box-shadow: var(--shadow); } 45% { box-shadow: 0 0 0 3px var(--bronze), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.celebrate { animation: glowpulse .9s ease; }

/* الوِرد — المرجع الأسطر 119–129 */
.ward { display: block; padding: 20px 24px 20px 22px; background: none; border: none; width: 100%; text-align: right; color: inherit; }
.ward-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ward-kicker { font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; }
.ward-count { font-size: 12px; color: var(--ink-2); font-weight: 300; }
.ward h2 { font-weight: 600; font-size: 25px; line-height: 1.3; }
.ward-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.progress { flex: 1; height: 3px; background: var(--line-soft); border-radius: 99px; overflow: hidden; margin-inline-end: 16px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cypress), var(--bronze)); border-radius: 99px; transition: width 150ms ease; }
.go { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--cypress); white-space: nowrap; }
.go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; transform: scaleX(-1); }

/* بلاطات المكتبة — المرجع الأسطر 131–145 */
.lib { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.tile { background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-md); padding: 17px 15px 15px; position: relative; text-align: right; transition: background var(--dur), border-color var(--dur); display: block; color: inherit; }
.tile.wide { grid-column: 1 / -1; padding: 19px; }
.tile h3 { font-size: 16px; font-weight: 600; margin-top: 11px; }
.tile p { font-size: 12px; color: var(--ink-2); font-weight: 300; line-height: 1.6; margin-top: 2px; }
.tile .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--cypress-soft); display: grid; place-items: center; color: var(--cypress); }
.tile .ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.chip { font-size: 12px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line); background: none; display: inline-flex; align-items: center; gap: 6px; color: inherit; line-height: 1.5; }
.chip.on { background: var(--cypress); border-color: var(--cypress); color: var(--on-tint); }
.chip.dim { color: var(--ink-2); border-style: dashed; }
.tile .golite { margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--cypress); display: flex; align-items: center; gap: 6px; }
.tile .golite svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; transform: scaleX(-1); }

/* الشارة الخفيفة — المرجع السطر 139 (.soon): 10px، برونزي، حد 1px بلون النص، قوس 99، شفافية .85.
   في التطبيق: شارة «قيد المراجعة النهائية» على غير المعتمد نهائيًا (status-pill) بنفس اللغة. */
.status-pill { display: inline-block; font-size: 10px; font-weight: 500; color: var(--bronze); border: 1px solid currentColor; border-radius: 99px; padding: 2.5px 9px; opacity: .85; white-space: nowrap; line-height: 1.6; }
.status-pill.review { color: var(--ink-2); }

/* الميثاق والحاشية — المرجع الأسطر 159–165 */
.covenant { margin: 36px 22px 8px; text-align: center; }
.covenant .seal { width: 34px; height: 1px; background: var(--bronze); margin: 0 auto 16px; position: relative; }
.covenant .seal::after { content: ""; position: absolute; top: -3.5px; right: calc(50% - 3.5px); width: 7px; height: 7px; background: var(--bay); border: 1px solid var(--bronze); transform: rotate(45deg); }
.covenant p { font-family: var(--font-read); font-size: 16.5px; line-height: 1.9; }
.covenant small { display: block; margin-top: 10px; font-size: 10.5px; color: var(--ink-2); font-weight: 300; }
.foot-note { margin: 24px 22px 0; text-align: center; font-size: 10.5px; color: var(--ink-2); font-weight: 300; opacity: .8; line-height: 1.8; }
.foot-note .content-version { font-feature-settings: "tnum"; }

/* ============================================================
   شريط التبويب السفلي — المرجع الأسطر 167–171
   ============================================================ */
.tab-bar { position: fixed; bottom: calc(var(--nav-bottom) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: var(--nav-w); background: var(--bay); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); display: flex; padding: 7px; z-index: 50; transition: background var(--dur), border-color var(--dur); }
.tab-bar a { flex: 1; background: none; border: none; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 6px; border-radius: 17px; font-size: 10.5px; font-weight: 400; transition: all .3s; min-height: 50px; }
.tab-bar a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tab-bar a[aria-current='page'] { color: var(--cypress); background: var(--cypress-soft); }

/* ============================================================
   هيكل الصفحات الفرعية — المرجع الأسطر 173–180
   ============================================================ */
.page-head { padding: 24px 22px 0; text-align: center; }
.page-head .eyeb { font-family: var(--font-kufi); font-size: 12px; letter-spacing: 3px; color: var(--cypress); font-weight: 500; }
.page-head h1, .page-head h2 { font-weight: 600; font-size: 24px; margin-top: 5px; }
.page-arch { width: 130px; height: 28px; margin: 12px auto 0; display: block; }
.page-arch path { fill: none; stroke: var(--line); stroke-width: 1.2; }
.page-arch circle { fill: var(--bronze); }
.subline { text-align: center; font-size: 12.5px; color: var(--ink-2); font-weight: 300; margin-top: 4px; padding: 0 30px; }
.subline .status-pill { margin-inline-start: 8px; vertical-align: 1px; }

/* ============================================================
   أبواب الأذكار — المرجع الأسطر 182–198
   ============================================================ */
.resume { margin: 20px 16px 0; background: var(--cypress); color: var(--on-tint); border: none; border-radius: 18px; width: calc(100% - 32px); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); }
.resume b { font-weight: 500; font-size: 14.5px; }
.resume span { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 6px; font-feature-settings: "tnum"; }
.resume svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; transform: scaleX(-1); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 18px 16px 0; }
.door { background: var(--bay); border: 1px solid var(--line); border-radius: 120px 120px 18px 18px; padding: 26px 14px 16px; text-align: center; position: relative; transition: background var(--dur), border-color var(--dur); display: block; color: inherit; }
.door .d-ic { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--cypress-soft); display: grid; place-items: center; color: var(--cypress); }
.door .d-ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.door h3 { font-weight: 600; font-size: 15.5px; margin-top: 11px; }
.door p { font-size: 11px; color: var(--ink-2); font-weight: 300; margin-top: 1px; font-feature-settings: "tnum"; }
.door .d-prg { height: 2.5px; background: var(--line-soft); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.door .d-prg i { display: block; height: 100%; background: var(--bronze); border-radius: 99px; }
/* الشارة على الباب — المرجع السطر 197 (.lk): 9.5px برونزي أعلى الباب */
.door .lk { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--bronze); letter-spacing: .5px; white-space: nowrap; }
.door .lk.review { color: var(--ink-2); }
.doors-cap { text-align: center; font-size: 11.5px; color: var(--ink-2); font-weight: 300; margin-top: 16px; padding: 0 30px; }

/* ============================================================
   القبلة — المرجع الأسطر 200–220
   ============================================================ */
.compass-wrap { margin: 22px auto 0; width: 272px; position: relative; }
.compass-wrap svg { width: 100%; height: auto; display: block; }
.compass .rose { transform-origin: 136px 136px; transition: transform 120ms linear; }
.tick { stroke: var(--line); stroke-width: 1; }
.tick.major { stroke: var(--ink-2); stroke-width: 1.2; }
.card-l { font-family: var(--font-kufi); font-size: 13px; fill: var(--ink-2); }
.card-l.n { fill: var(--cypress); font-weight: 600; }
.needle-g { transition: transform 1.6s var(--ease-needle); }
.needle { stroke: var(--bronze); stroke-width: 1.6; }
.needle-tip { fill: var(--bronze); }
.kaaba-mark rect { fill: var(--ink); }
.kaaba-mark line { stroke: var(--bronze); stroke-width: 2.2; }
.bear-ring { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.center-dot { fill: var(--bronze); }
.bearing-under { text-align: center; margin-top: 14px; }
.bearing-under b { font-family: var(--font-kufi); font-weight: 600; font-size: 38px; display: block; line-height: 1.2; font-feature-settings: "tnum"; }
.bearing-under span { font-size: 11.5px; color: var(--ink-2); font-weight: 300; }
.bearing-under .aligned { display: block; font-size: 11.5px; color: var(--cypress); font-weight: 500; min-height: 1.7em; margin-top: 2px; }
.q-rows { margin: 24px 16px 0; }
.q-row { background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; transition: background var(--dur), border-color var(--dur); gap: 12px; color: inherit; }
.q-row b { font-weight: 500; font-size: 14px; }
.q-row span { font-size: 13px; color: var(--ink-2); font-weight: 300; text-align: left; }
.q-row .chev { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; transform: scaleX(-1); flex: 0 0 auto; }
.q-note { margin: 14px 30px 0; text-align: center; font-size: 11.5px; color: var(--ink-2); font-weight: 300; line-height: 1.9; }

/* ============================================================
   الإعدادات — المرجع الأسطر 222–241
   ============================================================ */
.set-group { margin: 18px 16px 0; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; transition: background var(--dur), border-color var(--dur); }
.set-cap { font-family: var(--font-kufi); font-size: 11.5px; letter-spacing: 2px; color: var(--cypress); padding: 16px 22px 0; }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line-soft); gap: 12px; }
.set-row:last-child { border-bottom: none; }
.set-row .sl { font-size: 14.5px; font-weight: 400; }
.set-row .sl small { display: block; font-size: 11px; color: var(--ink-2); font-weight: 300; margin-top: 1px; }
.seg { display: flex; background: var(--stone); border: 1px solid var(--line); border-radius: 12px; padding: 3px; flex: 0 0 auto; }
.seg button { border: none; background: none; font-size: 12px; padding: 7px 13px; border-radius: 9px; color: var(--ink-2); transition: all .25s; min-height: 34px; font-feature-settings: "tnum"; }
.seg button.on, .seg button[aria-pressed='true'] { background: var(--bay); color: var(--cypress); font-weight: 500; box-shadow: 0 2px 8px rgba(35,32,26,.12); }
.step { display: flex; align-items: center; gap: 12px; }
.step button { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--stone); font-size: 16px; font-weight: 500; display: grid; place-items: center; }
.step span { min-width: 34px; text-align: center; font-feature-settings: "tnum"; font-size: 14px; }
.preview { padding: 0 22px 18px; }
.preview p { font-family: var(--font-read); font-size: calc(var(--read-size) * .8); line-height: 2; text-align: center; border: 1px dashed var(--line); border-radius: 14px; padding: 12px; transition: font-size .25s; }
.set-link { width: 100%; background: none; border: none; text-align: right; display: flex; justify-content: space-between; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: inherit; gap: 12px; }
.set-link:last-child { border-bottom: none; }
.set-link svg { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; transform: scaleX(-1); flex: 0 0 auto; }
.set-link .sl { font-size: 14.5px; font-weight: 400; }
.set-link .sl small { display: block; font-size: 11px; color: var(--ink-2); font-weight: 300; margin-top: 1px; }
.set-static { padding: 15px 22px; font-size: 12.5px; color: var(--ink-2); font-weight: 300; line-height: 1.8; }
.set-static b { color: var(--cypress); font-weight: 500; }
.set-static .content-version { font-feature-settings: "tnum"; }
/* قائمة المدن (لا نظير لها في المرجع): بمفردات .seg — أرضية stone، حد line، قوس 12 */
.set-select { font: inherit; font-size: 12px; color: var(--ink); background: var(--stone); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 40px; max-width: 55%; }

/* ============================================================
   الفوائد والبطاقات النصية — بمفردات صفحة الفتاوى في المرجع (الأسطر 243–259)
   ============================================================ */
.f-tabs { display: flex; gap: 8px; margin: 20px 16px 0; }
.f-tab { flex: 1; background: var(--bay); border: 1px solid var(--line); border-radius: 14px; padding: 12px; font-size: 13.5px; color: var(--ink-2); transition: all .3s; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.f-tab.on { background: var(--cypress); border-color: var(--cypress); color: var(--on-tint); font-weight: 500; }
.f-tab[aria-disabled='true'] { opacity: .55; pointer-events: none; }
.f-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.f-topics { display: flex; gap: 7px; overflow-x: auto; padding: 14px 16px 4px; scrollbar-width: none; }
.f-topics::-webkit-scrollbar { display: none; }
.f-topic { flex: none; font-size: 12px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--bay); color: var(--ink-2); transition: all .25s; }
.f-topic.on { background: var(--cypress-soft); border-color: var(--cypress); color: var(--cypress); font-weight: 500; }
.f-list { margin: 10px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.f-card { background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; transition: background var(--dur), border-color var(--dur); display: block; color: inherit; }
.f-kicker { font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-kicker span { font-size: 11.5px; color: var(--ink-2); font-weight: 300; letter-spacing: 0; }
.f-q { font-family: var(--font-read); font-size: 17.5px; line-height: 1.9; }
.f-q.question::before { content: "س"; font-family: var(--font-kufi); font-size: 12px; color: var(--on-tint); background: var(--bronze); border-radius: 8px; padding: 2px 8px; margin-left: 10px; vertical-align: 3px; }
.f-a { margin-top: 12px; font-family: var(--font-read); font-size: 17.5px; line-height: 1.9; white-space: pre-line; }
.f-a::before { content: "ج"; font-family: var(--font-kufi); font-size: 12px; color: var(--on-tint); background: var(--cypress); border-radius: 8px; padding: 2px 8px; margin-left: 10px; vertical-align: 3px; }
.f-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-2); gap: 10px; flex-wrap: wrap; }
.f-foot b { color: var(--cypress); font-weight: 500; font-size: 12px; }
.f-foot span { display: flex; align-items: center; gap: 5px; }
.f-foot svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.f-foot .link-line { font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; }
/* اقتطاع بصري بلا إدراج أي محرف (لا علامة حذف داخل نص ديني): ارتفاع أقصى مع تلاشٍ */
.f-card .r-text { max-height: 5.7em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }

/* ============================================================
   القراءة: بطاقة الذكر والعدّاد — المرجع الأسطر 261–279
   ============================================================ */
.read-head { padding: 22px 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.read-head .side { display: flex; align-items: center; gap: 8px; }
.back { display: flex; align-items: center; gap: 8px; background: none; border: none; font-size: 14px; color: var(--ink-2); }
.back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.read-meta { font-size: 12px; color: var(--ink-2); font-weight: 300; font-feature-settings: "tnum"; }
.dhikr-bay { margin: 20px 16px 0; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 32px 26px 26px; transition: background var(--dur), border-color var(--dur); position: relative; }
.dhikr-text { font-family: var(--font-read); font-size: var(--read-size); line-height: 2.15; text-align: center; transition: font-size .25s; overflow-wrap: break-word; }
.dhikr-src { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dhikr-src span { font-size: 12.5px; color: var(--ink-2); font-weight: 300; }
.dhikr-src b { font-size: 12.5px; color: var(--cypress); font-weight: 500; white-space: nowrap; }
.counter { margin: 20px 16px 0; }
.beads { display: flex; justify-content: center; gap: 14px; margin-bottom: 16px; }
.bead { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--bronze); transition: background .35s; }
.bead.full { background: var(--bronze); }
.count-btn { width: 100%; background: var(--cypress); color: var(--on-tint); border: none; border-radius: 20px; padding: 18px; font-size: 17px; font-weight: 500; position: relative; overflow: hidden; min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.count-btn .fill { position: absolute; inset: 0; background: rgba(255,255,255,.14); transform-origin: right; transform: scaleX(0); transition: transform .4s var(--ease-needle); }
.count-btn span { position: relative; }
.count-btn[disabled] { cursor: default; }
.count-done, .count-btn.is-done { background: var(--bronze); color: var(--on-tint-done); }
.count-val { font-feature-settings: "tnum"; white-space: nowrap; }
.count-val .count-sep { padding: 0 2px; opacity: .8; }
.count-val .count-tot { opacity: .8; }
.count-note { text-align: center; font-size: 11.5px; color: var(--ink-2); font-weight: 300; margin-top: 11px; }
.count-note i { font-style: normal; font-feature-settings: "tnum"; }
/* التصفير (زر مستقل — قرار ENHANCEMENTS-1 بند ٢) بمفردات .step button: 36px، قوس 11، حد line، أرضية stone */
.count-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 11px; }
.count-foot .count-note { margin-top: 0; }
.count-reset { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--stone); font-size: 16px; font-weight: 500; display: grid; place-items: center; color: var(--ink-2); transition: opacity .25s; }
.count-reset[disabled] { opacity: .35; cursor: default; }

/* ============================================================
   صفحة الباب (لا نظير مباشرًا في المرجع) — مركّبة من بطاقة القراءة + العدّاد + نحو الأقسام
   ============================================================ */
.progress-track { position: sticky; top: 0; z-index: 21; height: 3px; background: var(--line-soft); }
.progress-track .progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cypress), var(--bronze)); border-radius: 99px; transition: width 150ms ease; }
.card { margin-top: 20px; }
.card .dhikr-bay { margin-top: 0; }
.card .counter { margin-top: 14px; }
.card.tapped .dhikr-bay { transform: scale(.995); }
.card.just-completed .dhikr-bay { animation: glowpulse .9s ease; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.card-top .spacer { flex: 1; }
.card-actions { display: flex; gap: 6px; }
.card-kicker { font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; }
.narrator { font-size: 12px; color: var(--ink-2); font-weight: 300; text-align: center; margin-bottom: 8px; }
.guidance { font-family: var(--font-read); font-size: calc(var(--read-size) * .8); line-height: 2; text-align: center; color: var(--ink-2); margin-bottom: 8px; transition: font-size .25s; }
.guidance.after { margin-top: 10px; margin-bottom: 0; }
.segment + .segment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.seg-label { display: block; font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; text-align: center; margin-bottom: 4px; }
.seg-note { font-family: var(--font-read); font-size: calc(var(--read-size) * .8); line-height: 2; color: var(--ink-2); text-align: center; margin-top: 4px; }
.segment .counter { margin: 14px 0 0; }
/* الزيادة (ق11) بتمييز بصري وسطر مصدر مستقل — بمفردات .preview p (إطار متقطع، قوس 14) */
.addition { margin-top: 14px; border: 1px dashed var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.addition .add-label { display: block; font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; margin-bottom: 4px; }
.addition .dhikr-text { font-size: calc(var(--read-size) * .8); }
.addition .source-line { margin-top: 6px; }
.dhikr-note { font-family: var(--font-read); font-size: calc(var(--read-size) * .8); line-height: 2; color: var(--ink-2); text-align: center; margin-top: 10px; }
.virtue { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: var(--font-read); font-size: calc(var(--read-size) * .8); line-height: 2; color: var(--ink-2); text-align: center; overflow-wrap: break-word; }
.virtue .virtue-label { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; margin-bottom: 4px; }
.source-line { font-size: 12.5px; color: var(--ink-2); font-weight: 300; text-align: center; }
.completion-panel { display: none; margin: 36px 22px 8px; text-align: center; }
.completion-panel.show { display: block; }
.completion-panel .seal { width: 34px; height: 1px; background: var(--bronze); margin: 0 auto 16px; position: relative; }
.completion-panel .seal::after { content: ""; position: absolute; top: -3.5px; right: calc(50% - 3.5px); width: 7px; height: 7px; background: var(--bay); border: 1px solid var(--bronze); transform: rotate(45deg); }
.completion-panel .completion-title { font-family: var(--font-read); font-size: 16.5px; line-height: 1.9; }
.completion-panel .chip { margin-top: 12px; }
.empty-state { text-align: center; padding: 30px 30px 8px; }
.empty-state p { font-size: 12.5px; color: var(--ink-2); font-weight: 300; line-height: 1.9; }
.empty-state .chip, .empty-state .resume { margin-top: 14px; }
.error-box { margin: 20px 16px 0; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 20px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }

/* ---------- النص القرآني — خط المجمع حصرًا + حارس الخط (بند ٨) ---------- */
.quran-block { margin-top: 14px; }
.quran-block + .quran-block { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.quran-block:first-child { margin-top: 0; }
.quran-title { font-size: 12px; font-weight: 500; color: var(--bronze); letter-spacing: 1px; text-align: center; margin-bottom: 4px; }
.quran-text { font-family: 'KFGQPC Uthmanic'; font-size: var(--read-size); line-height: 2.5; text-align: center; }
.quran-sura + .quran-sura { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.quran-basmala { font-size: .92em; margin: 0 0 6px; line-height: 2.2; }
/* T003-R3 — قرار المالك DECISIONS_2026-08-11: البسملة قبل السور (عدا الفاتحة) بلا علامة رقم آية — إخفاء بصري في طبقة العرض فقط */
.basmala-aya-mark { display: none; }
.quran-flow { margin: 0; }
.quran-font-error {
  display: none; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.9; color: var(--ink-2); font-weight: 300;
  border: 1px dashed var(--line); border-radius: 14px; padding: 12px; margin: 0; text-align: center;
}
:root[data-quran-font='failed'] .quran-sura { display: none; }
:root[data-quran-font='failed'] .quran-font-error { display: block; }
/* آية معلّقة التوثيق — تُعرض بعنوانها وسطرها (علم pendingQuran؛ تُسقط في PRODUCTION) */
.quran-pending { font-size: 12.5px; color: var(--ink-2); font-weight: 300; border: 1px dashed var(--line); border-radius: 14px; padding: 12px; text-align: center; line-height: 1.9; }

/* ============================================================
   المسبحة (لا نظير في المرجع) — أرقام كبيرة بمفردات .bearing-under، زر العدّ .count-btn، الأهداف .seg، الصفوف .q-row
   ============================================================ */
.tasbih-bay { margin: 20px 16px 0; background: var(--bay); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 32px 26px 26px; text-align: center; transition: background var(--dur), border-color var(--dur); }
.tasbih-count { font-family: var(--font-kufi); font-weight: 600; font-size: 38px; display: block; line-height: 1.2; font-feature-settings: "tnum"; }
.tasbih-target { display: inline-block; font-size: 11.5px; color: var(--ink-2); font-weight: 300; font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; }
.tasbih-bay .count-btn { margin-top: 18px; }
.tasbih-bay .count-note { margin-top: 11px; }
.tasbih-targets { display: flex; justify-content: center; margin: 20px 16px 0; }
.tasbih-targets .seg { margin: 0 auto; }
.tasbih-tools { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 14px 16px 0; flex-wrap: wrap; }
.tasbih-tools label { font-size: 12.5px; color: var(--ink-2); font-weight: 300; }
.tasbih-tools input[type='number'] { width: 84px; min-height: 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--stone); color: var(--ink); font: inherit; font-size: 14px; padding: 4px 10px; text-align: center; font-feature-settings: "tnum"; }

/* ============================================================
   البحث (لا نظير في المرجع) — حقل بمفردات .f-tab (bay، حد line، قوس 14)
   ============================================================ */
.search-box { position: relative; margin: 20px 16px 0; }
.search-box input { width: 100%; min-height: 48px; background: var(--bay); border: 1px solid var(--line); border-radius: 14px; padding: 12px 44px 12px 16px; font: inherit; font-size: 14.5px; color: var(--ink); transition: border-color .3s; }
.search-box input::placeholder { color: var(--ink-2); font-weight: 300; }
.search-box input:focus { border-color: var(--cypress); outline: none; }
.search-box svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; pointer-events: none; }
.result-count { text-align: center; font-size: 12.5px; color: var(--ink-2); font-weight: 300; margin-top: 10px; padding: 0 30px; min-height: 1.7em; }

/* ---------- تنبيه عائم (toast) — بمفردات .resume (cypress، قوس 18، ظل) ---------- */
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(8px); bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100% - 32px); background: var(--cypress); color: var(--on-tint); padding: 12px 20px; border-radius: 18px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); z-index: 60; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- الموقع: مطالبة أولى (مركّبة من .q-note + .resume + .chip) ---------- */
.location-prompt { margin: 14px 16px 0; text-align: center; }
.location-prompt .q-note { margin: 0 14px 12px; }
.location-prompt .resume { margin: 0; width: 100%; justify-content: center; gap: 10px; }
.location-prompt .resume svg { transform: none; }
.location-prompt .chip { margin-top: 10px; }
:root[data-loc='set'] .location-prompt { display: none; }
.location-line { margin: 10px 16px 0; }
.location-line .q-row { margin-bottom: 0; }

/* ---------- الحركة المخفّضة — المرجع الأسطر 53–57 ---------- */
@media (prefers-reduced-motion: reduce) {
  .arch-lit { transition: none; } .needle-g { transition: none; }
  .rv { opacity: 1; transform: none; transition: none; } .press { transition: none; }
  .view { animation: none; } .celebrate, .card.just-completed .dhikr-bay { animation: none; }
  html { scroll-behavior: auto; }
}