/* ============================================================================ ayah.css — صفحة آية القرءان (موسوعة قولات) نظام «المخطوط الحيّ» --qm-* · يُحمَّل بعد qm-tokens.css + qm-system.css على . الهيدر/الفوتر/طبقة المخطوط تُحقَن عبر qm-smart-header.js (نموذج صفحة الجذر). 🔴 خطّ حفص: الآية + قولات القرآن + الجذور. كل الشرح: Noto Naskh. ============================================================================ */ body.ayah-body { background: var(--qm-page); color: var(--qm-text); } .aya-main { max-width: 768px; margin: 0 auto; padding: 18px 20px 72px; font-family: var(--qm-font-ui); font-size: var(--qm-fs-base); line-height: 1.9; } /* أيّ نصّ قرءانيّ (آية/قَولة/حروف جذر) = خطّ حفص */ .aya-q, .ayah-inline-quran, .quranic-text, .aya-verse, .ayah-sub-qawla, .ayah-word-table .qword, .ayah-sub-chip, .aya-root-ar { font-family: var(--qm-font-quran); font-feature-settings: normal; font-variant-ligatures: normal; letter-spacing: 0; } /* ---- الترويسة: ختم أخضر مُذهَّب + لوحة آية بيضاء ------------------------- */ .aya-head { border-radius: var(--qm-radius-card); overflow: hidden; border: 0.5px solid var(--qm-border); /* حدّ وحده — لا ghost (حدّ+ظلّ) */ margin-top: 14px; background: var(--qm-surface); } /* عنوان قسم دلاليّ داخل

/<.lbl> — يرث الهيئة فلا يتغيّر المظهر */ h2.aya-sh, h2.lbl { font: inherit; color: inherit; margin: 0; } .aya-hero { background: var(--qm-dark-grad); color: var(--qm-on-ink); padding: 22px 26px 20px; text-align: center; } .aya-sig { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--qm-gold); font-size: 13px; margin-bottom: 10px; } .aya-sig .ln { height: 1px; width: 64px; background: linear-gradient(90deg, transparent, var(--qm-gold)); } .aya-sig .ln.r { background: linear-gradient(90deg, var(--qm-gold), transparent); } .aya-h1 { margin: 0; font-weight: 600; line-height: 1.2; } .aya-h1-pre { display: block; font-size: 12px; font-weight: 500; color: var(--qm-on-ink-72); letter-spacing: .3px; margin-bottom: 4px; } .aya-surah { font-size: 30px; color: #fff; font-family: var(--qm-font-quran); } .aya-num { display: inline-flex; align-items: center; margin-inline-start: 10px; } /* رقم الآية = زهرة المصحف الحقيقيّة (glyph ۝ من خطّ حفص) + الرقم العربيّ-الهنديّ مركَّبٌ في وسطها */ .aya-rosette { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 .14em; color: var(--qm-gold); line-height: 1; flex-shrink: 0; } /* الذهب الشعائريّ الموحَّد --qm-gold (يطابق ◈ وعلامات الآيات عبر الموقع) */ .aya-rosette-mark { font-family: var(--qm-font-quran); font-size: 2.2em; line-height: 1; color: inherit; } .aya-rosette-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--qm-font-ui); font-weight: 700; font-size: .66em; line-height: 1; color: inherit; pointer-events: none; white-space: nowrap; } body.dark .aya-rosette { color: var(--qm-gold); } /* زهرة الهيرو على التدرّج الأخضر الداكن → الذهبيّ اللامع (يطابق التوقيع ◈ واسم السورة) */ .aya-num .aya-rosette { font-size: 18px; color: var(--qm-gold); } .aya-verse .aya-rosette { font-size: .72em; } .aya-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 13px; } .aya-chip { font-size: 12px; background: var(--qm-on-ink-12); color: var(--qm-on-ink-92); padding: 4px 11px; border-radius: var(--qm-radius-pill); border: 0.5px solid var(--qm-on-ink-24); } .aya-plate { padding: 26px 26px 18px; } .aya-verse { font-size: 26px; line-height: 2.2; color: var(--qm-ink-strong); text-align: center; font-weight: 400; /* حفص أحاديّ الوزن — لا faux-bold (يكسر الشكل) */ } .aya-end { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin-inline-start: 8px; padding: 0 6px; font-family: var(--qm-font-ui); font-size: 13px; font-weight: 600; color: var(--qm-gold-deep); border: 1.5px solid var(--qm-gold); border-radius: var(--qm-radius-pill); vertical-align: middle; } .aya-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .ayah-btn { font-size: 13px; border: 0.5px solid var(--qm-border); background: var(--qm-surface); color: var(--qm-accent-text); padding: 8px 14px; border-radius: var(--qm-radius-md); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.3; min-height: 44px; box-sizing: border-box; /* مقاس لمس WCAG 2.5.5 (جمهور جوّال) */ transition: border-color var(--qm-dur) var(--qm-ease-out), background var(--qm-dur) var(--qm-ease-out), transform var(--qm-dur-press) var(--qm-ease-out); } .ayah-btn small { color: var(--qm-muted); font-size: 11px; } .ayah-btn:hover { border-color: var(--qm-accent); background: var(--qm-accent-soft); } .ayah-btn:active { transform: scale(.97); } .ayah-btn-primary { background: var(--qm-accent); color: #fff; border-color: var(--qm-accent); } .ayah-btn-primary small { color: var(--qm-on-ink-72); } .ayah-btn-primary:hover { background: var(--qm-ink-lift); border-color: var(--qm-ink-lift); } /* ---- عناوين الأقسام ------------------------------------------------------ */ .aya-sec { margin-top: 26px; } .aya-accordion { margin-top: 18px; } .aya-h { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--qm-ink); margin: 0 0 13px; } .aya-h .dot { color: var(--qm-gold); font-size: 13px; } .aya-h .ct { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--qm-muted); } /* ---- خلاصة المدلول ------------------------------------------------------- */ .aya-core { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-card); padding: 18px 22px; /* حدّ وحده — لا ghost */ } .aya-core .lbl { font-size: 13px; color: var(--qm-gold-deep); font-weight: 600; /* 13px: أرضيّة النصّ + تباين أدنى */ display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .aya-core p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.98; color: var(--qm-ink-strong); } .aya-core p:last-child { margin-bottom: 0; } /* ---- نثر التحليل --------------------------------------------------------- */ .aya-prose p, .ayah-madlul-lead { margin: 0 0 13px; font-size: 16px; line-height: 1.98; color: var(--qm-text); } .ayah-madlul-path { display: flex; flex-direction: column; gap: 12px; } .ayah-madlul-step { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 14px 16px; } .ayah-madlul-step > strong { color: var(--qm-ink); } .ayah-madlul-bullets { margin: 6px 0 0; padding-inline-start: 20px; } .ayah-madlul-bullets li { margin: 4px 0; } .aya-more { font-size: 13.5px; color: var(--qm-accent-text); cursor: pointer; font-weight: 500; background: none; border: 0; padding: 0; font-family: inherit; } .aya-more:hover { text-decoration: underline; } /* ---- شبكة الاستبدال: اختبارات غنيّة + مصفوفة مضغوطة --------------------- */ .aya-subtests { display: flex; flex-direction: column; gap: 10px; } .aya-subtest { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 14px 16px; } .aya-subtest-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .aya-subtest-title { font-size: 14px; font-weight: 600; color: var(--qm-ink); } .aya-rootchip { font-size: 13px; background: var(--qm-accent-soft); color: var(--qm-accent-text); padding: 2px 11px; border-radius: var(--qm-radius-pill); } .aya-subtest-body { font-size: 14px; line-height: 1.88; color: var(--qm-text); margin: 0; } .aya-matrix-rest { margin-top: 12px; } /* المصفوفة المضغوطة: كل قَولة ودورها (سطر واحد) */ .aya-mx { display: flex; flex-direction: column; } .aya-mx-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 2px; border-bottom: 0.5px solid var(--qm-border-soft); } .aya-mx-row:last-child { border-bottom: 0; } .aya-mx-i { font-size: 11px; color: var(--qm-muted); font-weight: 600; min-width: 22px; } /* muted: نصّ يحمل ترتيبًا (تباين AA) */ .aya-mx-row .ayah-sub-qawla { font-size: 19px; min-width: 64px; } .aya-mx-role { font-size: 13px; color: var(--qm-muted); } .aya-mx-cand { font-size: 12px; color: var(--qm-muted); margin-inline-start: auto; } /* muted: يحمل مرشّحات الاستبدال (معلومة) — لا helper (3.2:1) */ .ayah-substitution-matrix { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .ayah-sub-row { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); overflow: hidden; } .ayah-sub-summary { list-style: none; cursor: pointer; padding: 12px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } .ayah-sub-summary::-webkit-details-marker { display: none; } .ayah-sub-index { font-size: 12px; color: var(--qm-muted); font-weight: 600; } .ayah-sub-qawla { font-size: 20px; color: var(--qm-ink-strong); font-weight: 400; } .ayah-sub-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--qm-muted); margin-top: 2px; } .ayah-sub-summary > div:last-child { font-size: 12.5px; color: var(--qm-muted); text-align: end; } .ayah-sub-summary > div:last-child strong { color: var(--qm-text); font-weight: 600; } .ayah-sub-body { padding: 4px 15px 14px; border-top: 0.5px solid var(--qm-border-soft); } .ayah-sub-section { font-size: 13.5px; line-height: 1.85; margin: 8px 0 0; color: var(--qm-text); } .ayah-sub-section strong { color: var(--qm-ink); font-weight: 600; } .ayah-sub-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ayah-sub-chip { font-size: 14px; background: var(--qm-fill); color: var(--qm-ink); border: 0.5px solid var(--qm-border); padding: 3px 10px; border-radius: var(--qm-radius-pill); } /* ---- بطاقات صغيرة: لطائف/ثمرات (ul.ayah-list) -------------------------- */ .ayah-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .ayah-list li { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 13px 16px; font-size: 14px; line-height: 1.82; } .ayah-list li > strong { display: block; color: var(--qm-ink); font-size: 14px; margin-bottom: 3px; } .ayah-list-prose p { margin: 0; color: var(--qm-muted); font-size: 13.5px; line-height: 1.82; } .ayah-tag { display: inline-block; font-size: 13px; color: var(--qm-gold-deep); /* 13px: أرضيّة النصّ */ background: var(--qm-gold-10); padding: 2px 9px; border-radius: var(--qm-radius-pill); margin-bottom: 5px; } .ayah-note { font-size: 13.5px; color: var(--qm-muted); margin: 6px 0; } /* ---- روابط موسوعيّة ----------------------------------------------------- */ .ayah-related-grid { display: flex; flex-direction: column; gap: 8px; } .ayah-related { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 13px 16px; } .ayah-related > strong { color: var(--qm-ink); font-size: 14px; } .ayah-related > span { display: block; font-size: 13.5px; color: var(--qm-muted); line-height: 1.82; margin-top: 3px; } .ayah-related a { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--qm-accent-text); text-decoration: none; font-weight: 500; } .ayah-related a:hover { text-decoration: underline; } /* ---- مطويّات (details) --------------------------------------------------- */ .aya-det { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); margin-top: 10px; overflow: hidden; } .aya-det > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--qm-ink); } .aya-det > summary::-webkit-details-marker { display: none; } .aya-det > summary .dot { color: var(--qm-gold); font-size: 12px; } .aya-det > summary .sub { margin-inline-start: 6px; font-size: 12px; font-weight: 400; color: var(--qm-muted); } .aya-det > summary .ch { margin-inline-start: auto; color: var(--qm-helper); font-size: 18px; transition: transform var(--qm-dur) var(--qm-ease-out); } .aya-det[open] > summary .ch { transform: rotate(180deg); } .aya-det .in { padding: 6px 16px 16px; border-top: 0.5px solid var(--qm-border-soft); } .aya-det .in > *:first-child { margin-top: 4px; } /* ---- إحصاءات ------------------------------------------------------------- */ .ayah-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; } .ayah-stat { background: var(--qm-fill); border-radius: var(--qm-radius-md); padding: 12px 13px; text-align: center; } .ayah-stat strong { display: block; font-size: 23px; font-weight: 600; color: var(--qm-ink); line-height: 1.1; } .ayah-stat span { font-size: 11.5px; color: var(--qm-muted); margin-top: 3px; display: block; } .aya-cross { font-size: 13.5px; color: var(--qm-muted); line-height: 1.9; margin: 12px 0 0; } .aya-cross b { color: var(--qm-gold-deep); font-weight: 600; } .aya-rootpills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .aya-rootpills .pill { font-size: 13px; background: var(--qm-accent-soft); color: var(--qm-accent-text); padding: 3px 11px; border-radius: var(--qm-radius-pill); } .aya-rootpills .pill .aya-root-ar { font-size: 15px; } /* ---- مخططات بسيطة ------------------------------------------------------- */ .ayah-chart { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 14px; } .ayah-bar { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; font-size: 13px; } .ayah-bar > span:first-child { color: var(--qm-text); } .ayah-bar-track { height: 8px; background: var(--qm-fill); border-radius: var(--qm-radius-pill); overflow: hidden; } .ayah-bar-fill { display: block; height: 100%; background: var(--qm-accent); border-radius: var(--qm-radius-pill); } .ayah-bar strong { font-size: 12.5px; color: var(--qm-muted); font-weight: 600; } .aya-det .in h3 { font-size: 13px; font-weight: 600; color: var(--qm-ink); margin: 12px 0 6px; } /* ---- الجذور في الآية ----------------------------------------------------- */ .ayah-root-grid, .ayah-root-map { display: flex; flex-direction: column; gap: 10px; } .ayah-root, .ayah-root-impact { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 13px 16px; } .ayah-root-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ayah-root-head a, .ayah-root-impact summary span { color: var(--qm-ink); font-weight: 600; text-decoration: none; } .ayah-root-head small, .ayah-root > small { font-size: 12px; color: var(--qm-muted); } .ayah-root p, .ayah-root-impact-body p { font-size: 13.5px; line-height: 1.82; color: var(--qm-text); margin: 8px 0 0; } .ayah-root-impact-body p strong { color: var(--qm-ink); } .ayah-root-impact > summary, .ayah-root-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .ayah-root-impact > summary::-webkit-details-marker, .ayah-root-more > summary::-webkit-details-marker { display: none; } .ayah-root-impact > summary small { margin-inline-start: auto; font-size: 12px; color: var(--qm-muted); } .ayah-root-impact-meta { display: flex; gap: 12px; font-size: 12px; color: var(--qm-muted); margin: 6px 0; } .ayah-root-link, .ayah-root-more summary { color: var(--qm-accent-text); font-size: 13px; font-weight: 500; text-decoration: none; } .ayah-root-map-intro, .ayah-root-map-synthesis { font-size: 14px; line-height: 1.9; color: var(--qm-muted); } .ayah-sub-variants .ayah-sub-chip, .aya-sub-chip { font-size: 14px; } .ayah-sub-chip.ayah-sub-chip { } .ayah-sub-variants + .ayah-note { margin-top: 6px; } /* ---- جدول القَولات ------------------------------------------------------- */ .ayah-word-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ayah-word-table th { text-align: start; color: var(--qm-muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 0.5px solid var(--qm-border); } .ayah-word-table td { padding: 7px 8px; border-bottom: 0.5px solid var(--qm-border-soft); color: var(--qm-text); } .ayah-word-table .qword { font-size: 17px; color: var(--qm-ink-strong); } .ayah-word-table a.qaw-q-link { text-decoration: none; cursor: pointer; transition: color var(--qm-dur) var(--qm-ease-out); } .ayah-word-table a.qaw-q-link:hover { color: var(--qm-accent-text); text-decoration: underline; text-decoration-color: var(--qm-accent); text-underline-offset: 4px; } .ayah-word-table a { color: var(--qm-accent-text); text-decoration: none; } /* ---- السياق القريب ------------------------------------------------------- */ .ayah-context { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ayah-context li { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 11px 14px; } .ayah-context li.current { border-color: var(--qm-accent); background: var(--qm-accent-soft); } .ayah-context-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--qm-muted); margin-bottom: 5px; } .ayah-context-meta a { color: var(--qm-accent-text); text-decoration: none; margin-inline-start: auto; } .ayah-context-text { font-family: var(--qm-font-quran); font-size: 17px; line-height: 2.05; color: var(--qm-ink); margin: 0; text-align: center; } /* ---- مهايئات حروف الجذر بخطّ حفص ---------------------------------------- */ .aya-root-ar { font-size: 1.18em; color: inherit; } /* ---- محاور (axes) ------------------------------------------------------- */ .ayah-axis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .ayah-axis { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 13px 15px; } .ayah-axis strong { color: var(--qm-ink); display: block; } .ayah-axis small { color: var(--qm-muted); font-size: 12px; } .ayah-axis p { font-size: 13.5px; line-height: 1.82; margin: 6px 0 0; } /* ---- الوضع الليليّ (معظمه تلقائيّ عبر التوكنز) -------------------------- */ body.theme-modern.dark .aya-surah { color: var(--qm-ink-strong); } body.theme-modern.dark .aya-verse { color: var(--qm-ink-strong); } /* ---- جوّال -------------------------------------------------------------- */ @media (max-width: 600px) { .aya-main { padding: 12px 14px 56px; } .aya-hero { padding: 18px 18px 16px; } .aya-surah { font-size: 23px; } .aya-plate { padding: 20px 18px 16px; } .aya-verse { font-size: 22px; line-height: 2.1; } .ayah-list { grid-template-columns: 1fr; } .ayah-sub-summary { grid-template-columns: auto 1fr; } .ayah-sub-summary > div:last-child { grid-column: 1 / -1; text-align: start; } .ayah-bar { grid-template-columns: 72px 1fr auto; } } /* ---- السياق الأوسع (موضع الآية في حجّة السورة) --------------------------- */ .aya-wide-role { background: var(--qm-surface); border: 0.5px solid var(--qm-border); border-radius: var(--qm-radius-lg); padding: 15px 18px; } .aya-wide-role .lbl, .aya-wide-thread .lbl, .aya-wide-axes .lbl, .aya-wide-move .lbl, .aya-wide-escal .lbl { font-size: 13px; color: var(--qm-gold-deep); font-weight: 600; /* 13px: أرضيّة النصّ */ display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .aya-wide-role p { margin: 0 0 9px; font-size: 16px; line-height: 1.96; color: var(--qm-ink-strong); } .aya-wide-role p:last-child { margin-bottom: 0; } .aya-wide-lataif { margin-top: 12px; } .aya-wide-lataif p { margin: 0 0 9px; font-size: 15.5px; line-height: 1.95; color: var(--qm-text); } .aya-wide-surah { margin-top: 14px; } .aya-wide-surah .aya-wide-thread, .aya-wide-surah .aya-wide-axes, .aya-wide-surah .aya-wide-move, .aya-wide-surah .aya-wide-escal { margin-top: 14px; } .aya-wide-surah .aya-wide-thread:first-child { margin-top: 0; } .aya-wide-thread p, .aya-wide-move p, .aya-wide-escal p { margin: 0 0 9px; font-size: 15.5px; line-height: 1.95; color: var(--qm-text); } .aya-wide-axes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .aya-wide-axes li { background: var(--qm-surface); border: 0.5px solid var(--qm-border-soft); border-radius: var(--qm-radius-md, 12px); padding: 11px 14px; } .aya-wide-axes li > strong { color: var(--qm-ink); font-size: 15px; } .aya-wide-axes .aya-wide-ayat { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 7px; } .aya-wide-axes li > div { margin-top: 5px; font-size: 15px; line-height: 1.9; color: var(--qm-text); } /* مرجع الآية الموحَّد: ﴿مقطع بحفص﴾ + زهرة الرقم + اسم السورة بحفص (لا رقم خام) */ .aya-ref { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .aya-ref-q { font-family: var(--qm-font-quran); font-size: 15px; color: var(--qm-ink-strong); letter-spacing: 0; } .aya-ref .aya-rosette { font-size: 15px; } .aya-ref-surah { font-family: var(--qm-font-quran); font-size: 14px; color: var(--qm-ink); } .aya-wide-escal { border-top: 0.5px solid var(--qm-border-soft); padding-top: 12px; } /* ---- احترام تقليل الحركة ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .ayah-btn, .aya-det > summary .ch { transition: none; } } /* فهرس الآيات: سورة → آياتها (accordion + شِيپ) — أُضيف 2026-06-22 (مهمّة ١) */ .ayah-surah-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .ayah-surah-group { border: 1px solid var(--qm-border, rgba(18,54,43,.14)); border-radius: 14px; background: var(--qm-surface, #fffdf7); overflow: hidden; } .ayah-surah-group > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--qm-ink, #12362b); } .ayah-surah-group > summary::-webkit-details-marker { display: none; } .ayah-surah-group > summary::after { content: "‹"; margin-inline-start: auto; color: var(--qm-muted, #566159); transition: transform .2s ease; font-size: 1.2em; } .ayah-surah-group[open] > summary::after { transform: rotate(-90deg); } .ayah-surah-name { font-size: 1.05rem; } .ayah-surah-count { font-size: .82rem; color: var(--qm-muted, #566159); font-weight: 500; } .ayah-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 18px; } .ayah-chip { min-width: 40px; text-align: center; padding: 7px 12px; border: 1px solid var(--qm-border, rgba(18,54,43,.16)); border-radius: 9px; background: var(--qm-page, #eff2ee); color: var(--qm-ink, #12362b); text-decoration: none; font-variant-numeric: tabular-nums; transition: background .15s ease, border-color .15s ease; } .ayah-chip:hover { background: var(--qm-accent-soft, #e5f0e9); border-color: var(--qm-accent, #2c5b4a); } .ayah-chip:active { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { .ayah-surah-group > summary::after, .ayah-chip { transition: none; } }