/* ===== مَنار: هوية المصحف — عاجي ورقي، وأخضر المنارة، وذهب الزخرفة ===== */
:root{
  color-scheme:light;
  --bg:#FAF5E9;--surface:#fff;--tile:#F2EADA;--ink:#17281F;--secondary:#5C6A5E;
  --accent:#14563B;--border:#E4DAC5;--button:#14563B;--button-text:#fff;--ring:#14563B;
  --gold:#B98F3F;--gold-text:#8A6620;--gold-soft:#F5E9CE;--sage:#DDE8DC;
  --band:#124A33;--band-text:#EFE7D6;--shadow:rgba(23,40,31,.10);
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0F1E19;--surface:#172B23;--tile:#1C3428;--ink:#EEF4EC;--secondary:#A7BAAC;
  --accent:#8FC2A3;--border:#2C4739;--button:#8FC2A3;--button-text:#0F1E19;--ring:#8FC2A3;
  --gold:#C9A864;--gold-text:#D9BC7E;--gold-soft:rgba(201,168,100,.14);--sage:#20362B;
  --band:#0A1611;--band-text:#CFDDD2;--shadow:rgba(0,0,0,.35);
}

/* خط أميري للنص القرآني المعروض خارج صفحات المصحف (بطاقة آية اليوم).
   برخصة SIL Open Font License 1.1 - نسخة الرخصة في fonts/OFL.txt */
@font-face{
  font-family:'Amiri Quran';
  src:url('fonts/AmiriQuran.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
/* شبكة أمان: مهما حدث تجاوز عرض غير متوقع من عنصر ما، لا يظهر سكرول أفقي يقصّ النص */
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.8 Plex,"Segoe UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Readex,"Segoe UI",Tahoma,Arial,sans-serif;font-weight:600}
h2{font-size:30px;line-height:1.55}
h3{font-size:19px;line-height:1.5}
p{color:var(--secondary)}
.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.icon{width:23px;height:23px;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
.skip{position:fixed;top:-100px;right:10px;background:var(--button);color:var(--button-text);z-index:100;padding:12px}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--ring);outline-offset:4px}
::selection{background:var(--accent);color:var(--bg)}

/* ===== الترويسة ===== */
.header{height:88px;border-bottom:1px solid var(--border);position:relative;z-index:10;background:var(--bg)}
/* الصفحة الرئيسية: الترويسة تجلس على خلفية البطل نفسها بلا خط فاصل */
.home-page .header{border-bottom-color:transparent}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;font:600 23px/1.5 Readex,"Segoe UI",Tahoma,Arial,sans-serif;white-space:nowrap}
.mark{display:block;width:35px;height:44px;color:var(--accent);flex-shrink:0}
.mark svg{width:100%;height:100%;display:block}
nav{display:flex;gap:30px;align-items:center}
nav a{font-size:16px;min-height:44px;display:flex;align-items:center;position:relative}
nav a:hover{color:var(--accent)}
nav a[aria-current=page]{color:var(--accent);font-weight:500}
nav a[aria-current=page]:after{content:'';position:absolute;inset-inline:0;bottom:7px;height:2px;border-radius:2px;background:var(--gold)}
.tools{display:flex;gap:12px;align-items:center}
.icon-button{border:0;background:transparent;border-radius:50%;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.icon-button:hover{background:var(--tile)}
.header-cta{display:inline-flex;align-items:center;gap:9px;background:var(--button);color:var(--button-text);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:500;min-height:44px;white-space:nowrap}
.header-cta:hover{filter:brightness(.93)}
.header-cta .icon{width:18px;height:18px}
.sun{display:none}
[data-theme=dark] .sun{display:block}
[data-theme=dark] .moon{display:none}
#menu-toggle{display:none}

/* ===== البطل: العنوان والبحث وبطاقة آية اليوم ===== */
.hx{position:relative;isolation:isolate;overflow:hidden}
.hx-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.decor-arcs{position:absolute;top:-46px;left:-56px;width:300px;height:300px;color:var(--gold);opacity:.5}
.decor-halo{position:absolute;left:4%;top:10%;width:min(420px,38vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--tile) 0%,transparent 72%)}
.decor-mark{position:absolute;left:1%;bottom:-14px;width:min(215px,15vw);height:auto;color:var(--sage);opacity:.9}
[data-theme=dark] .decor-mark{opacity:.55}

.hx-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:52px 62px;padding-inline-end:clamp(0px,8vw,140px)}
.hx-basmalah{font-family:"Amiri Quran",Amiri,serif;font-size:27px;line-height:2.1;color:var(--gold-text);margin-bottom:18px}
.hx-badge{display:inline-block;background:var(--gold-soft);color:var(--gold-text);border:1px solid var(--border);border-radius:999px;padding:7px 17px;font-size:13px;font-weight:500}
.hx h1{font-size:clamp(33px,3.8vw,53px);line-height:1.5;margin-top:20px;color:var(--ink)}
.hx h1 span{color:var(--accent)}
.hx-lede{font-size:18px;line-height:2;margin-top:18px;max-width:580px}

.search{display:flex;gap:10px;align-items:center;border:1px solid var(--border);background:var(--surface);padding:6px 7px 6px 15px;border-radius:999px;max-width:590px;scroll-margin-top:35px}
.search>.icon{color:var(--secondary);margin-inline-start:12px;width:21px}
.search input{min-width:0;flex:1;border:0;background:transparent;outline:0;color:var(--ink);min-height:46px;font-size:16px}
.search input::placeholder{color:var(--secondary);opacity:1}
.search:focus-within{outline:2px solid var(--ring);outline-offset:2px}
.hx-search{margin-top:28px;max-width:640px;padding:7px 8px 7px 20px;box-shadow:0 14px 34px var(--shadow)}

.primary,.secondary{min-height:52px;padding:12px 26px;border:1px solid transparent;border-radius:999px;font:500 16px/1.5 Plex,"Segoe UI",Tahoma,Arial,sans-serif;display:inline-flex;gap:11px;align-items:center;justify-content:center;white-space:nowrap}
.primary{background:var(--button);color:var(--button-text)}
.primary:hover{filter:brightness(.93)}
.secondary{border-color:var(--border);background:var(--surface);color:var(--ink)}
.secondary:hover{border-color:var(--accent);color:var(--accent)}
.search .primary{min-height:46px;padding-inline:26px}
.hx-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hx-cta .icon{width:19px;height:19px}

.hx-stats{display:flex;flex-wrap:wrap;margin:38px 0 0;padding:0}
.hx-stats>div{padding-inline:30px;text-align:center}
.hx-stats>div:first-child{padding-inline-start:0}
.hx-stats>div+div{border-inline-start:1px solid var(--border)}
.hx-stats dt{font:600 31px/1.25 Readex,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--accent)}
.hx-stats dd{margin:5px 0 0;font-size:13px;color:var(--secondary)}

.ayah-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 30px 24px;box-shadow:0 26px 60px var(--shadow)}
.card-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold-text);font-size:14px;font-weight:500}
.card-eyebrow .rule{position:relative;height:1px;width:62px;background:var(--gold);opacity:.75}
.card-eyebrow .rule:after{content:'';position:absolute;top:-3px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.card-eyebrow .rule:first-of-type:after{inset-inline-start:-4px}
.card-eyebrow .rule:last-of-type:after{inset-inline-end:-4px}
.ayah-text{font-family:"Amiri Quran",Amiri,serif;font-size:clamp(22px,2.1vw,29px);line-height:2.4;color:var(--ink);text-align:center;margin-top:24px}
.ayah-cite{text-align:center;margin-top:18px;font-size:13px;color:var(--secondary)}
.ayah-cite .sep{color:var(--gold);font-size:9px;vertical-align:middle;margin-inline:9px}
.ayah-open{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--sage);border-radius:14px;padding:10px 12px 10px 18px;font-size:14px;color:var(--ink)}
.ayah-open:hover{filter:brightness(.97)}
.ayah-open .go{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--button-text);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ayah-open .icon{width:20px;height:20px}
.ayah-actions{display:flex;gap:12px;margin-top:14px}
.ghost{flex:1;min-height:46px;padding:10px 14px;border:1px solid var(--border);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:transparent;color:var(--ink);border-radius:999px;font-size:14px}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.ghost[data-done]{border-color:var(--accent);color:var(--accent)}

/* ===== استكشف مَنار ===== */
.explore{padding-block:14px 72px}
.explore-title{display:inline-block;font-size:30px;margin-bottom:30px}
.explore-title span{position:relative;color:var(--accent)}
.explore-title span:after{content:'';position:absolute;inset-inline:0;bottom:-9px;height:3px;border-radius:2px;background:var(--gold);opacity:.9}
.explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.explore-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px 24px 28px;display:block;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.explore-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px var(--shadow);border-color:var(--accent)}
.card-icon{width:52px;height:52px;border-radius:15px;background:var(--sage);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.explore-card h3{margin-bottom:10px}
.explore-card p{font-size:15px;line-height:1.85}

/* ===== التذييل ===== */
footer{background:var(--surface);border-top:1px solid var(--border)}
.footer-main{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:35px;padding-block:32px}
.footer-main .brand{font-size:20px}
.footer-main .mark{width:28px;height:36px}
.footer-main p{font-size:13px;margin:8px 41px 0 0}
.footer-links{display:flex;justify-content:center;gap:23px;font-size:14px;flex-wrap:wrap}
.footer-links a:hover{color:var(--accent)}
.footer-band{background:var(--band);color:var(--band-text)}
.footer-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:16px;font-size:13px}
.band-brand{display:flex;align-items:center;gap:12px}
.band-brand .mark{width:19px;height:24px;color:var(--gold)}
.latin{font:10px Arial;letter-spacing:1.6px;direction:ltr;opacity:.8}

/* بطاقة التوثيق: تُستعمل في نتائج البحث وأداة التحقق */
.source-card{margin-top:20px;width:100%;background:var(--surface);border:1px solid var(--border);border-inline-start:3px solid var(--accent);padding:14px 16px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:start}
.source-card>span{display:flex;align-items:center;gap:12px}
.source-card strong{display:block;font-size:14px;font-weight:500}
.source-card .icon{width:20px;color:var(--accent)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:14px;font-weight:500}
.short-rule{width:28px;height:1px;background:currentColor}

/* ===== أداة التحقق ===== */
.verify{padding-block:46px 70px}
.verify-head{max-width:680px}
.verify-head h1{font-family:Readex,Arial,sans-serif;font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.5;margin-top:18px}
.verify-head p{font-size:17px;line-height:1.9;margin-top:14px}
.verify-form{margin-top:28px;max-width:760px}
.verify-form textarea{
  width:100%;border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:6px;padding:16px 18px;font:400 18px/1.95 Plex,Arial,sans-serif;resize:vertical;
}
.verify-form textarea:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.verify-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.verify-hint{font-size:12px;color:var(--secondary)}
.verify-error{color:#b3261e;font-size:14px;margin-top:10px}

.result{margin-top:34px;max-width:860px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:22px 24px}
.result-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:14px}
.result-badge{font-size:15px;font-weight:600}
.result-meta{font-size:13px;color:var(--secondary);font-variant-numeric:tabular-nums}
.result-label{font-size:13px;color:var(--secondary);margin-top:18px}
.result-ayah{font-size:26px;line-height:2.3;color:var(--ink);margin-top:10px}
.result-extra{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.result-note{font-size:16px;line-height:1.95;margin-top:14px;max-width:62ch}
.result-exact{border-inline-start:4px solid #2c7350}
.result-near{border-inline-start:4px solid #8a5a18}
.result-none{border-inline-start:4px solid var(--secondary)}
.w-missing{background:#f6dcd9;color:#7d2b22;border-radius:3px;padding:0 5px;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:6px}
.w-extra{background:#f3e8d3;color:#7a4e12;border-radius:3px;padding:2px 8px;font-size:20px}
[data-theme=dark] .w-missing{background:#4a2420;color:#f0b8b1}
[data-theme=dark] .w-extra{background:#3d3117;color:#e5c489}
.result .source-card{margin-top:22px}

@media(max-width:680px){
  .verify{padding-block:30px 46px}
  .verify-form textarea{font-size:16px;padding:13px 14px}
  .result{padding:18px 16px}
  .result-ayah{font-size:22px;line-height:2.2}
}


/* ===== التجاوب: القالب نفسه للكمبيوتر والجوال ===== */
@media(max-width:1080px){
  .wrap{width:calc(100% - 56px)}
  .hx-grid{grid-template-columns:1fr;gap:38px;padding-block:34px 48px;padding-inline-end:0}
  .hx-lede,.hx-search{max-width:none}
  .ayah-card{max-width:620px}
  .decor-mark{width:130px;opacity:.6}
  .decor-halo{display:none}
  nav{gap:20px}
  nav a{font-size:15px}
  .explore-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:860px){
  .header{height:76px}
  .header-inner{gap:10px}
  #menu-toggle{display:inline-flex}
  nav{display:none;position:absolute;top:75px;right:0;left:0;background:var(--surface);padding:12px 20px;border-bottom:1px solid var(--border);gap:0;z-index:20}
  nav.open{display:flex;flex-direction:column;align-items:stretch}
  nav a{padding:10px 15px;font-size:16px}
  nav a[aria-current=page]:after{inset-inline:15px auto;width:22px;bottom:6px}
}

@media(max-width:680px){
  .wrap{width:calc(100% - 40px)}
  .brand{font-size:19px}
  .mark{width:29px;height:37px}
  .tools{gap:2px}
  /* الترويسة ضيّقة على الجوال: زر "ابدأ القراءة" ينزل إلى البطل ولا يدفع الاسم خارج الشاشة */
  .header-cta{display:none}
  .hx-grid{padding-block:26px 40px;gap:30px}
  .hx-basmalah{font-size:22px;margin-bottom:14px}
  .hx h1{font-size:clamp(28px,7.4vw,40px);line-height:1.6;margin-top:16px}
  .hx-lede{font-size:16px;line-height:1.95;margin-top:14px}
  .hx-search{margin-top:20px;padding:5px 6px 5px 14px;gap:6px}
  .search input{font-size:15px;min-height:44px}
  .search>.icon{margin-inline-start:8px;width:19px}
  .search .primary{min-height:44px;font-size:15px;padding-inline:18px}
  .hx-cta{margin-top:18px;gap:10px}
  .hx-cta .primary,.hx-cta .secondary{flex:1 1 auto;min-height:48px;padding-inline:18px;font-size:15px}
  .hx-stats{margin-top:28px;gap:14px 0}
  .hx-stats>div{padding-inline:18px;flex:1 1 40%}
  .hx-stats>div:first-child{padding-inline-start:18px}
  .hx-stats>div+div{border-inline-start:1px solid var(--border)}
  .hx-stats>div:nth-child(3){border-inline-start:0}
  .hx-stats dt{font-size:26px}
  .decor-arcs{width:200px;height:200px;top:-34px;left:-44px}
  .decor-mark{width:96px;bottom:-12px;left:4%;opacity:.5}
  .ayah-card{padding:22px 18px 20px;border-radius:16px}
  .card-eyebrow .rule{width:40px}
  .ayah-text{font-size:22px;line-height:2.3;margin-top:18px}
  .ayah-open{padding:9px 10px 9px 14px;font-size:13px;border-radius:12px}
  .ayah-open .go{width:36px;height:36px}
  .ayah-actions{gap:9px}
  .ghost{font-size:13px;min-height:44px;padding-inline:10px}
  .explore{padding-block:6px 44px}
  .explore-title{font-size:24px;margin-bottom:24px}
  .explore-grid{grid-template-columns:1fr;gap:14px}
  .explore-card{padding:22px 20px 24px;border-radius:14px}
  .card-icon{width:46px;height:46px;border-radius:13px;margin-bottom:14px}
  .explore-card h3{font-size:17px}
  .explore-card p{font-size:14px}
  .footer-main{padding-block:26px;gap:24px;grid-template-columns:1fr}
  .footer-main p{margin-inline:41px 0}
  .footer-links{justify-content:start;gap:18px;font-size:14px}
  .footer-band-inner{padding-block:14px;font-size:12px}
  .band-brand{align-items:start;line-height:1.7}
  .latin{font-size:9px;letter-spacing:1px}
}

/* حركة أقل: لا رفع للبطاقات ولا تمرير ناعم لمن طلب تقليل الحركة */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .explore-card:hover{transform:none}
}