/* «سرد» — story layer for long-form pages (loaded only on pages whose body uses .story-*). No libraries. */
.article-body:has(.story-open){counter-reset:ch;font-size:1.04em}
.article-body:has(.story-open)>h2:not(#faq){counter-increment:ch;position:relative;padding-top:2.2rem;margin-top:2.6rem;scroll-margin-top:5rem;text-wrap:balance}
.article-body:has(.story-open)>h2:not(#faq)::before{content:"الفصل " counter(ch,arabic-indic);position:absolute;top:0;inset-inline-start:0;font:700 .78rem/1 var(--body);letter-spacing:.02em;color:var(--gold);padding:.35rem .8rem .35rem 2.1rem;border-radius:999px;border:1px solid var(--line);background:radial-gradient(circle at 1rem 50%,var(--gold-2) 0 .2rem,transparent .22rem),rgba(232,192,106,.06)}
.article-body:has(.story-open)>h2:not(#faq)::after{content:"";display:block;height:1px;margin-top:.7rem;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--gold-3))}
.article-body:has(.story-open) p,.article-body:has(.story-open) li{text-wrap:pretty}
.article-body:has(.story-open) h3{scroll-margin-top:5rem}

/* Opening */
.story-open{position:relative;display:grid;gap:1.2rem;margin:0 0 2rem;padding:1.4rem;border-radius:22px;border:1px solid var(--line);background:radial-gradient(120% 90% at 100% 0,rgba(155,93,229,.22),transparent 60%),radial-gradient(90% 80% at 0 100%,rgba(232,192,106,.12),transparent 60%),rgba(20,10,51,.55);overflow:hidden;isolation:isolate}
.story-open::before{content:"";position:absolute;inset:-40% -10% auto auto;width:22rem;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(232,192,106,.18);z-index:-1}
@media(max-width:520px){.story-open{padding:1.1rem 1rem}}
@media(min-width:760px){.story-open{grid-template-columns:1.25fr .75fr;align-items:center;padding:1.8rem 2rem}}
.story-open__k{margin:0;font-size:.82rem;font-weight:600;color:var(--gold);letter-spacing:.02em}
.story-open__lede{margin:.3rem 0 0;font-size:clamp(1.12rem,.6vw + 1rem,1.32rem);line-height:1.95;color:var(--ink)!important}
.story-open__lede strong{background:linear-gradient(90deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.story-open figure{margin:0;justify-self:center;max-width:280px;width:100%}
.story-open figure img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(155,93,229,.35))}
.story-open figcaption{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.3rem}
.story-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none}
.story-meta li{font-size:.8rem;padding:.25rem .7rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--glass-b);color:#e6dcf7!important}

/* Map (table of contents) */
.story-toc{margin:0 0 2rem;padding:1.1rem 1.2rem;border-radius:18px;border:1px solid var(--glass-b);background:rgba(255,255,255,.03)}
.story-toc__t{margin:0 0 .6rem;font-weight:700;color:var(--gold-2)}
.story-toc ol{list-style:none;margin:0;padding:0!important;display:grid;gap:.35rem;counter-reset:t}
@media(min-width:700px){.story-toc ol{grid-template-columns:1fr 1fr;column-gap:1rem}}
.story-toc li{counter-increment:t;margin:0!important}
.story-toc a{display:flex;gap:.6rem;align-items:baseline;padding:.4rem .5rem;border-radius:10px;color:#e6dcf7!important;text-decoration:none!important;transition:background-color .25s,color .25s}
.story-toc a::before{content:counter(t,arabic-indic);flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;font-size:.8rem;border:1px solid var(--line);color:var(--gold)}
.story-toc a:hover,.story-toc a[aria-current=true]{background:rgba(232,192,106,.1);color:var(--gold-2)!important}
.story-toc a[aria-current=true]::before{background:var(--gold);color:var(--night)}

/* Floating chapter pill (built by story.js) */
.story-pill{position:fixed;top:calc(5.2rem + env(safe-area-inset-top,0px));inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 2rem);z-index:55;display:flex;gap:.5rem;align-items:center;padding:.4rem .9rem;border-radius:999px;font-size:.8rem;color:var(--ink);text-decoration:none;background:rgba(20,10,51,.82);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -12px rgba(0,0,0,.7);opacity:0;translate:0 -140%;transition:opacity .35s var(--ease),translate .35s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-pill.on{opacity:1;translate:0 0}
@media(min-width:900px){.story-pill{top:3.9rem}}
.story-pill b{color:var(--gold);font-weight:700}

/* Signs */
.story-signs{display:grid;gap:.8rem;margin:1rem 0 1.6rem;padding:0!important;list-style:none}
@media(min-width:640px){.story-signs{grid-template-columns:1fr 1fr}}
.story-signs li{position:relative;margin:0!important;padding:1rem 1.1rem 1rem 1rem;padding-inline-start:3.2rem;border-radius:16px;border:1px solid var(--glass-b);background:linear-gradient(160deg,rgba(91,44,160,.22),rgba(255,255,255,.02));line-height:1.8}
.story-signs li::before{content:"";position:absolute;inset-inline-start:1rem;top:1.15rem;width:1.4rem;height:1.4rem;border-radius:50%;background:radial-gradient(circle,var(--gold-2) 0 .2rem,transparent .24rem),conic-gradient(from 0deg,var(--gold-3),var(--gold-2),var(--gold-3));-webkit-mask:radial-gradient(circle,#000 0 .25rem,transparent .26rem .45rem,#000 .46rem);mask:radial-gradient(circle,#000 0 .25rem,transparent .26rem .45rem,#000 .46rem)}
.story-signs strong{display:block;color:var(--gold-2);margin-bottom:.15rem}

/* Self-check */
.story-check{margin:1.2rem 0 1.8rem;padding:1.2rem;border-radius:18px;border:1px solid var(--line);background:rgba(232,192,106,.05)}
.story-check__t{margin:0 0 .3rem;font-weight:700;color:var(--gold-2)}
.story-check__d{margin:0 0 .8rem;font-size:.9rem;color:var(--muted)!important}
.story-check label{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .6rem;border-radius:12px;cursor:pointer;transition:background-color .2s}
.story-check label:hover{background:rgba(255,255,255,.04)}
.story-check input{appearance:none;flex:none;width:1.25rem;height:1.25rem;margin-top:.35rem;border-radius:6px;border:1.5px solid var(--gold-3);display:grid;place-items:center;cursor:pointer}
.story-check input:checked{background:var(--gold);border-color:var(--gold)}
.story-check input:checked::after{content:"";width:.55rem;height:.3rem;border:2px solid var(--night);border-top:0;border-right:0;rotate:-45deg;translate:0 -1px}
.story-check input:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.story-check output{display:block;margin-top:.8rem;padding:.8rem 1rem;border-radius:12px;background:rgba(20,10,51,.6);border:1px dashed var(--line);font-size:.92rem;line-height:1.85;min-height:2.6rem}

/* Path (steps) */
.story-path{list-style:none;margin:1.2rem 0 1.8rem;padding:0!important;position:relative;counter-reset:s}
.story-path::before{content:"";position:absolute;top:.6rem;bottom:.6rem;inset-inline-start:1.05rem;width:2px;background:linear-gradient(var(--gold),rgba(155,93,229,.5),transparent)}
.story-path li{counter-increment:s;position:relative;margin:0 0 1rem!important;padding-inline-start:3.2rem}
.story-path li::before{content:counter(s,arabic-indic);position:absolute;inset-inline-start:0;top:.1rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--night);background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold) 60%,var(--gold-3));box-shadow:0 0 0 5px rgba(232,192,106,.12),0 0 24px rgba(232,192,106,.35)}
.story-path strong{display:block;color:var(--gold-2)}

/* Verse / quote */
.story-verse{margin:1.6rem 0;padding:1.4rem 1.2rem;text-align:center;border-radius:20px;border:1px solid var(--line);background:radial-gradient(80% 120% at 50% 0,rgba(232,192,106,.12),transparent 70%),rgba(20,10,51,.5)}
.story-verse p{margin:0;font-family:"AmiriD",var(--callig);font-size:clamp(1.2rem,.8vw + 1rem,1.5rem);line-height:2.1;color:var(--gold-2)!important}
.story-verse cite{display:block;margin-top:.4rem;font-style:normal;font-size:.82rem;color:var(--muted)}

/* Notes */
.story-note{margin:1.4rem 0;padding:1rem 1.1rem;padding-inline-start:3.2rem;position:relative;border-radius:16px;border:1px solid rgba(110,200,230,.35);background:rgba(110,200,230,.07);font-size:.95rem}
.story-note::before{content:"";position:absolute;inset-inline-start:1rem;top:1.15rem;width:1.3rem;height:1.3rem;background:conic-gradient(#8fd6ee 0 0) center/.34rem 100% no-repeat,conic-gradient(#8fd6ee 0 0) center/100% .34rem no-repeat;border-radius:3px}
.story-note p{margin:0}
.story-note--warn{border-color:rgba(232,120,106,.4);background:rgba(232,120,106,.07)}
.story-note--warn::before{background:radial-gradient(circle,#f0a596 0 .2rem,transparent .22rem) 50% 78%/100% 100% no-repeat,linear-gradient(#f0a596,#f0a596) 50% 25%/.22rem .6rem no-repeat;border:2px solid #f0a596;border-radius:50%;box-sizing:border-box}

/* Figure inside the text */
.story-fig{margin:1.6rem auto;max-width:520px;text-align:center}
.story-fig img{width:100%;height:auto;border-radius:18px}
.story-fig figcaption{font-size:.82rem;color:var(--muted);margin-top:.4rem}

/* Closing */
.story-end{position:relative;margin:2.2rem 0 1rem;padding:1.6rem 1.4rem;border-radius:22px;text-align:center;overflow:hidden;isolation:isolate;border:1px solid var(--line);background:radial-gradient(90% 100% at 50% 0,rgba(155,93,229,.35),transparent 70%),rgba(20,10,51,.65)}
.story-end::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:-1}
.story-end h2,.story-end__t{margin:0 0 .4rem!important;padding:0!important;font-size:1.3rem;color:var(--gold-2)}
.story-end h2::before,.story-end h2::after{display:none!important}
.story-end p{margin:.3rem auto;max-width:36rem}
.story-end .btn{margin-top:.8rem}
.story-end__num{direction:ltr;unicode-bidi:isolate;font-weight:700;letter-spacing:.04em;color:var(--gold)!important}

/* Reveal: scroll-driven where supported, IntersectionObserver fallback (story.js); never with reduced motion */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .story-signs li,.story-path li,.story-verse,.story-check,.story-end,.story-fig,.article-body:has(.story-open) .compare__col{animation:story-in linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
  }
  .story-js .story-io{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .story-js .story-io.in{opacity:1;transform:none}
  .story-open figure img{animation:story-float 9s ease-in-out infinite alternate}
}
@keyframes story-in{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes story-float{to{transform:translateY(-8px) rotate(1.5deg)}}
@media print{.story-pill{display:none}}