/* وَأَنْصِتُوا — لوح الصفحات الداخلية.
 *
 * موضعٌ واحد للهوية بدل نسخةٍ في كل صفحة: نسخةٌ ثانية كانت ستفترق عن
 * الأولى عند أوّل تعديل — وهو نفس سبب توحيد التوكنات في worker/testers.js.
 * الصفحة الرئيسية تُبقي لوحها مضمّناً عمداً: هي أوّل ما يُفتح، وطلبٌ
 * إضافي هناك يؤخّر أوّل رسم.
 *
 * خامة وألوان «حَجَر ونور» مطابقة لتوكنات التطبيق؛ لا تدرّج ولا ظلّ في
 * الوضع الداكن، والذهب للنصّ المقدّس فقط. */

:root{
  --bg:#0D100D;
  --glass:#181B17;
  --glass-soft:#121411;
  --edge:rgba(255,255,255,.071);
  --edge-top:rgba(255,255,255,.071);
  --edge-hair:rgba(255,255,255,.071);
  --act:#17C08A;
  --act-press:#12A176;
  --on-act:#06140F;
  --link:#3FD9A6;
  --gold:#EDB143;
  --ink:#F3F3EF;
  --ink-soft:#AAA9A0;
  --muted:#9C9E95;
  --panel:#181B17;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Tajawal','IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  font-weight:500; line-height:1.9; font-size:16.5px;
  min-height:100%;
}

.wrap{max-width:640px; margin:0 auto; padding:26px 16px 40px}
.ui{font-family:'IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,Arial,sans-serif}

/* سطحان مسطّحان من خامة التطبيق؛ الفاصل الشعري بديل الظل في الداكن. */
.glass, .plate{
  background:var(--glass);
  border:1px solid var(--edge-hair);
  border-radius:22px;
  box-shadow:none;
}
.glass, .plate{backdrop-filter:none; -webkit-backdrop-filter:none}
.panel{background:var(--glass-soft); border:1px solid var(--edge-hair); border-radius:16px}

section{margin-top:14px; padding:26px 20px}

/* ── الترويسة ─────────────────────────────────────────────────── */
header{text-align:center; padding:30px 20px 26px}
.kufi{font-family:'Reem Kufi','Tajawal',Tahoma,Arial,sans-serif;
      font-size:30px; font-weight:700; letter-spacing:.5px; line-height:1.6}
.crumb{display:inline-block; margin-top:10px; padding:5px 14px; border-radius:100px;
       border:1px solid var(--edge-hair); color:var(--gold); font-size:11px;
       letter-spacing:2px; font-weight:600}
.crumb.act{color:var(--act)}

h1{font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif;
   font-size:25px; line-height:1.6; font-weight:600; margin-top:16px; text-wrap:balance}
h2{font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif;
   font-size:20px; line-height:1.6; font-weight:600; margin-bottom:12px; text-wrap:balance}
h3{font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif;
   font-size:15.5px; font-weight:600; color:var(--act); margin-bottom:4px}

p{color:var(--ink-soft); margin-top:12px}
p:first-of-type{margin-top:0}
p strong{color:var(--ink); font-weight:700}
.lead{font-size:17px}
.quiet{font-size:14px; color:var(--muted); line-height:1.85}

/* ── قوائم السرد ──────────────────────────────────────────────── */
.rows{margin-top:16px}
.row{padding:13px 2px; border-top:1px solid var(--edge-hair)}
.row:first-child{border-top:0}
.row b{display:block; font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif;
       font-size:15.5px; font-weight:600; color:var(--act); margin-bottom:2px}
.row span{font-size:14.5px; color:var(--ink-soft)}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tag-pill{padding:7px 13px; border-radius:100px; background:var(--glass-soft);
          border:1px solid var(--edge-hair); font-size:12.5px; color:var(--ink-soft);
          font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif; font-weight:500}

/* ── الأفعال ──────────────────────────────────────────────────── */
.cta{display:block; text-align:center; text-decoration:none; border-radius:16px;
     padding:16px 24px; font-size:17px; font-weight:700; margin-top:18px;
     font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif;
     transition:transform .12s, background-color .12s}
.cta:active{transform:translateY(2px)}
.primary{background:var(--act);
         color:var(--on-act)}
.primary:active{background:var(--act-press)}
.ghost{background:transparent; color:var(--link); border:1px solid rgba(63,217,166,.42);
       font-weight:600; font-size:15.5px; padding:13px 22px}
.ghost:active{background:rgba(23,192,138,.12)}
.under{display:block; text-align:center; color:var(--muted); font-size:12.5px; margin-top:10px}

a.inline{color:var(--link); text-decoration:none; border-bottom:1px solid var(--edge-hair)}
a.inline:hover{border-bottom-color:var(--link)}
a:focus-visible, .cta:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--link); outline-offset:3px; border-radius:8px
}

/* ── الطيّات ──────────────────────────────────────────────────── */
details{margin-top:10px; background:var(--glass-soft);
        border:1px solid var(--edge-hair); border-radius:16px}
summary{padding:15px 16px; cursor:pointer; font-weight:600; font-size:14.5px;
        color:var(--ink); list-style:none;
        font-family:'IBM Plex Sans Arabic','Tajawal',Tahoma,Arial,sans-serif}
summary::-webkit-details-marker{display:none}
summary::after{content:'⌄'; float:left; color:var(--muted); font-size:16px; line-height:1}
details[open] summary::after{content:'⌃'}
.guide{padding:0 16px 16px; font-size:14px; line-height:1.95; color:var(--ink-soft)}
.guide ol, .guide ul{margin:0; padding-inline-start:19px}
.guide li{margin-bottom:9px}
.guide b{color:var(--ink)}
.guide p{margin-top:10px}
.guide .q{color:var(--act); font-weight:600}

/* ── الآية ────────────────────────────────────────────────────── */
@font-face{
  font-family:"AmiriQuran"; src:url("/aya.woff2") format("woff2");
  font-display:swap; font-weight:400; font-style:normal;
}
.aya{font-family:"AmiriQuran","Amiri","Traditional Arabic",Georgia,serif;
     color:var(--gold); font-size:19px; line-height:2.3; text-align:center}
.aya .src{display:block; color:var(--muted); font-size:12.5px; margin-top:8px}

/* ── الذيل ────────────────────────────────────────────────────── */
footer{text-align:center; padding:28px 20px 24px; margin-top:14px}
footer .kufi{font-size:22px}
footer .motto{color:var(--gold); font-family:"AmiriQuran","Amiri",Georgia,serif;
              font-size:15px; margin-top:6px}
.links{display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center;
       margin-top:18px; font-size:14px}
.links a{color:var(--link); text-decoration:none}
.colophon{color:var(--muted); font-size:12px; margin-top:16px; line-height:1.9}

@media (min-width:680px){
  body{font-size:17px}
  .wrap{padding:34px 20px 56px}
  section{padding:32px 30px}
  header{padding:38px 30px 32px}
  h1{font-size:30px}
  h2{font-size:22px}
  .kufi{font-size:36px}
}