/* ============================================================
   دُعَاء — Duʿā
   Palette : night ink, vellum, illumination gold, lapis lazuli, nacre
   Type    : Amiri (Arabic) · Noto Naskh Arabic (Kurdish) ·
             Italiana (display) · Spectral (body) · Jost (labels)
   Signature: light crossing a khatam screen, as through a mosque window
   ============================================================ */

:root{
  --ink:       #0A1014;
  --ink-2:     #101820;
  --ink-3:     #16202A;
  --vellum:    #F0E8D6;
  --vellum-2:  #F6F0E2;
  --gold:      #C6A356;
  --gold-dim:  rgba(198,163,86,.32);
  --lapis:     #2A4A86;
  --lapis-lit: #7C9BD8;

  --nacre: linear-gradient(118deg,#F6E7D8 0%,#E4D3E0 26%,#CFE0E6 48%,#F1E2CE 72%,#DCC7D4 100%);

  /* contextual, overridden per section */
  --fg:      var(--vellum);
  --fg-soft: rgba(240,232,214,.64);
  --fg-mute: rgba(240,232,214,.52);
  --rule:    rgba(198,163,86,.22);
  --accent:  var(--gold);
  --accent-2: var(--lapis-lit);
  --panel:   var(--ink);

  --wrap: 1180px;
  --pad:  clamp(1.25rem, 5vw, 5rem);
  --sect: clamp(5.5rem, 12vw, 11rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--vellum);
  font-family:"Spectral",Georgia,serif;
  font-weight:300;
  font-size:clamp(1rem,.94rem + .22vw,1.08rem);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dd,ol,ul,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
em{ font-style:italic; }
::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.skip{
  position:fixed; top:0; left:0; z-index:200;
  transform:translateY(-120%);
  background:var(--vellum); color:var(--ink);
  padding:.9rem 1.4rem;
  font-family:"Jost",system-ui,sans-serif; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase;
}
.skip:focus{ transform:translateY(0); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* Arabic and Kurdish both use the Arabic script but need different faces:
   Amiri is a Naskh revival cut for classical Arabic and carries harakāt well;
   Noto Naskh Arabic covers the extra Sorani letters (ڕ ڵ ۆ ێ چ گ پ ژ). */
[lang="ar"]{ font-family:"Amiri",serif; }
[lang="ckb"]{ font-family:"Noto Naskh Arabic","Amiri",serif; }

/* ﷺ is absent from the Latin faces, so give it the Arabic face explicitly
   instead of letting the browser pick an arbitrary fallback. */
.pbuh{ font-family:"Amiri",serif; font-size:1.3em; line-height:0; }

/* ── shared type atoms ─────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.66rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow [lang="ckb"],.eyebrow [lang="ar"]{
  font-size:1.05rem; letter-spacing:0; text-transform:none; line-height:1.4;
}
.tick{ width:34px; height:1px; background:currentColor; opacity:.5; flex:none; }

.title{
  font-family:"Amiri",serif; font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.5;
  color:var(--fg);
  margin-block:1.2rem 0;
}
.title__en{
  font-family:"Italiana",Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:.08em;
  color:var(--accent);
  margin-top:.2rem;
}
.lede{
  max-width:58ch;
  font-size:clamp(1.05rem,.98rem + .45vw,1.32rem);
  font-weight:200; line-height:1.68;
  color:var(--fg-soft);
  margin-top:1.5rem;
}

/* ── progress hairline ─────────────────────────────────── */
.progress{ position:fixed; inset:0 0 auto 0; z-index:120; height:2px; pointer-events:none; }
.progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--lapis),var(--gold)); }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:110;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.4rem var(--pad);
  border-bottom:1px solid transparent;
  transition:padding .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-stuck{
  padding-block:.8rem;
  background:rgba(10,16,20,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(198,163,86,.16);
}
.nav__mark{ display:flex; align-items:baseline; gap:.8rem; }
.nav__mark-ar{ font-size:1.6rem; line-height:1; color:var(--gold); }
.nav__mark-en{
  font-family:"Italiana",serif; font-size:1.1rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--vellum);
}
.nav__links{ display:flex; gap:1.7rem; }
.nav__links a{
  position:relative;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.65rem; font-weight:300;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(240,232,214,.62);
  padding-block:.35rem;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{ color:var(--vellum); }
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:scaleX(1); }

.nav__toggle{
  display:none; align-items:center; gap:.7rem;
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:"Jost",system-ui,sans-serif; font-size:.66rem;
  letter-spacing:.26em; text-transform:uppercase;
}
.nav__toggle-bars{ display:grid; gap:5px; width:24px; }
.nav__toggle-bars i{ display:block; height:1px; background:currentColor; transition:transform .4s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{ transform:translateY(3px) rotate(12deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{ transform:translateY(-3px) rotate(-12deg); }

.menu{
  position:fixed; inset:0; z-index:105;
  background:rgba(10,16,20,.97); backdrop-filter:blur(18px);
  /* 16 groups is taller than a phone: the list has to be able to scroll. */
  display:grid; place-items:center start; justify-content:center;
  overflow-y:auto; overscroll-behavior:contain;
  padding-block:calc(var(--nav-h) + 1rem) 2rem;
}
.menu[hidden]{ display:none; }
.menu__inner{ display:grid; gap:.3rem; text-align:center; }
.menu__inner a{
  display:flex; align-items:baseline; justify-content:center; gap:1rem;
  font-family:"Italiana",serif;
  font-size:clamp(1.4rem,6vw,2.1rem);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem 1rem; color:var(--vellum);
}
.menu__inner em{ font-family:"Noto Naskh Arabic",serif; font-style:normal; font-size:.78em; color:var(--gold); letter-spacing:0; }

/* ── side rail ─────────────────────────────────────────── */
.rail{
  position:fixed; right:calc(var(--pad) * .3); top:50%; z-index:100;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  writing-mode:vertical-rl;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase;
  color:rgba(198,163,86,.5);
  pointer-events:none;
}
.rail__line{ width:1px; height:70px; background:currentColor; opacity:.45; }
.rail__coord{ font-family:"Noto Naskh Arabic",serif; letter-spacing:.1em; }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--pad) 5rem;
  overflow:hidden; isolation:isolate;
}
.hero__sun{
  position:absolute; z-index:-2;
  width:min(120vh,120vw); aspect-ratio:1;
  left:38%; top:46%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,
      rgba(255,238,206,.30) 0%,
      rgba(198,163,86,.22) 22%,
      rgba(42,74,134,.18) 46%,
      rgba(10,16,20,0) 70%);
  animation:sunDrift 36s var(--ease) infinite alternate;
}
@keyframes sunDrift{
  0%   { transform:translate(-56%,-46%) scale(1); }
  100% { transform:translate(-44%,-56%) scale(1.14); }
}
.hero__screen{
  position:absolute; inset:-10%; z-index:-1;
  background:url("../img/khatam-gold.svg") repeat;
  background-size:104px 104px;
  opacity:.18;
  -webkit-mask-image:radial-gradient(ellipse 64% 54% at 46% 44%, #000 4%, transparent 74%);
  mask-image:radial-gradient(ellipse 64% 54% at 46% 44%, #000 4%, transparent 74%);
  transform:translate3d(0,0,0);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38vh; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,16,20,0), var(--ink) 88%);
}
.hero__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; }
.hero__eyebrow{ color:var(--gold); }
.hero__title{
  font-family:"Amiri",serif; font-weight:400;
  font-size:clamp(4.5rem,18vw,14rem);
  line-height:1.32;
  margin:2.6rem 0 0;
  color:var(--vellum);
  position:relative; display:inline-block;
  text-align:left;
}
.hero__title::before{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1;
  color:rgba(232,222,200,.26);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title{
    background-image:
      radial-gradient(ellipse 40% 150% at 50% 50%,
        #FFFAF0 0%, #FFEDC6 18%, #E9C079 38%, #B4884C 56%, #4A5F8E 76%, #22304C 91%, #16202A 100%);
    background-size:200% 100%;
    background-position:18% 50%;
    background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    animation:lightPass 20s var(--ease) infinite alternate;
  }
}
@keyframes lightPass{
  0%   { background-position:14% 50%; }
  100% { background-position:86% 50%; }
}
.hero__rom{
  font-family:"Italiana",serif;
  font-size:clamp(1.1rem,2vw,1.6rem);
  letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); margin-top:.4rem;
}
.hero__lede{
  max-width:48ch; margin-top:2rem;
  font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);
  font-weight:200; line-height:1.9;
  color:rgba(240,232,214,.76);
}
.hero__lede--en{ font-family:"Spectral",Georgia,serif; line-height:1.68; color:rgba(240,232,214,.56); margin-top:1rem; }
.hero__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.85rem;
  margin-top:2.4rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(198,163,86,.82);
}
.hero__meta .tick{ width:26px; }
.hero__scroll{
  position:absolute; left:0; right:0; bottom:2.2rem;
  width:max-content; margin-inline:auto;
  display:grid; justify-items:center; gap:.9rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:1rem; color:rgba(240,232,214,.6);
}
.hero__scroll i{ display:block; width:1px; height:52px; background:linear-gradient(var(--gold),transparent); }
.hero__scroll:hover{ color:var(--vellum); }

/* ═══════════════ SECTION SHELL ═══════════════ */
.section{ position:relative; padding-block:var(--sect); }
.section--ink{ background:var(--ink); --panel:var(--ink); }
.section--ink-2{ background:var(--ink-2); --panel:var(--ink-2); }
.section--vellum{
  background:var(--vellum);
  --fg:#0A1014;
  --fg-soft:rgba(10,16,20,.74);
  --fg-mute:rgba(10,16,20,.54);
  --rule:rgba(10,16,20,.16);
  --accent:var(--lapis);
  --accent-2:var(--lapis);
  --panel:var(--vellum);
  color:#0A1014;
}
.section--vellum::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/khatam-gold.svg") repeat;
  background-size:170px 170px;
  opacity:.20;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 32%);
  mask-image:linear-gradient(to bottom,#000,transparent 32%);
}
.head{ position:relative; }
/* Arabic section titles are short lockups: the script still runs right-to-left,
   but the block itself is anchored to the page's left column like everything else. */
.head .title{ direction:rtl; text-align:left; margin-inline:0; }
.head .title__en,.head .lede,.head .eyebrow{ position:relative; }

/* ═══════════════ THE DUʿĀ CARD ═══════════════ */
.duas{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
}
.dua{
  background:var(--panel);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.25rem,3vw,3rem);
  position:relative;
  transition:background-color .5s var(--ease);
}
.dua::before{
  content:""; position:absolute; inset-inline-start:0; top:0; width:2px; height:100%;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease-out);
}
.dua:hover::before,.dua:focus-within::before{ transform:scaleY(1); }

.dua__head{
  display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.2rem;
  align-items:start;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.dua__no{
  font-family:"Amiri",serif;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;
  color:var(--accent); opacity:.9;
}
.dua__when{
  font-family:"Noto Naskh Arabic",serif;
  font-size:clamp(1rem,1.4vw,1.18rem); line-height:2;
  color:var(--fg);
  text-align:left;
}
.dua__for{
  margin-top:.35rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.63rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent-2);
}
.dua__for em{ text-transform:none; letter-spacing:.06em; font-style:italic; }

.dua__ar{
  font-family:"Amiri",serif; font-weight:400;
  font-size:clamp(1.42rem,1.15rem + 1.15vw,2.15rem);
  line-height:2.15;
  color:var(--fg);
  margin-top:1.6rem;
  /* Physical margins, not logical ones: the element's own direction is RTL, so
     margin-inline-start would anchor the box to the wrong side of the card. */
  max-width:42ch;
  margin-left:auto; margin-right:0;
  text-align:right;
}
.dua--long .dua__ar{ margin-top:1.1rem; }
.dua__ar + .dua__ar{ margin-top:.9rem; }

.dua__en{
  margin-top:1.8rem; max-width:66ch;
  font-size:1rem; line-height:1.8;
  color:var(--fg-soft);
}
.dua__foot{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  margin-top:1.8rem; padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.dua__src{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-inline-end:auto;
}
.dua__rep{
  font-family:"Amiri",serif; font-size:1.1rem; line-height:1;
  padding:.4rem .7rem;
  border:1px solid var(--accent); color:var(--accent);
}
.copy{
  background:none; border:1px solid var(--rule);
  padding:.6rem 1.2rem; cursor:pointer;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-soft);
  transition:border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.copy:hover{ border-color:var(--accent); color:var(--fg); }
.copy.is-done{ background:var(--accent); border-color:var(--accent); color:var(--panel); }

/* ── practice note ─────────────────────────────────────── */
.note-card{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:clamp(1.8rem,3vw,2.6rem);
  border:1px solid var(--rule);
  display:grid; gap:.9rem;
}
.note-card__label{
  font-family:"Noto Naskh Arabic",serif; font-size:1.3rem; line-height:1;
  color:var(--accent); text-align:right;
}
.note-card h3{
  font-family:"Italiana",serif; font-weight:400;
  font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:.04em;
}
.note-card__ckb{ font-family:"Noto Naskh Arabic",serif; line-height:2.1; text-align:right; color:var(--fg); }
.note-card p:last-child{ color:var(--fg-soft); max-width:62ch; }

/* ═══════════════ CLOSE ═══════════════ */
.close{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(7rem,15vw,13rem);
  background:radial-gradient(ellipse 90% 80% at 50% 0%, var(--ink-3), var(--ink) 62%);
}
.close .wrap{ position:relative; z-index:1; display:grid; justify-items:center; }
.shamsa{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(84vw,660px); opacity:.32; pointer-events:none;
}
.shamsa__spin{ transform-origin:200px 200px; animation:shamsaTurn 140s linear infinite; }
@keyframes shamsaTurn{ to{ transform:rotate(360deg); } }
.close__eyebrow{ justify-content:center; color:var(--gold); }
.close__ar{
  font-family:"Amiri",serif;
  font-size:clamp(1.9rem,5.5vw,3.6rem); line-height:2;
  margin-top:1.6rem;
  background:var(--nacre);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.close__title{
  font-family:"Italiana",serif; font-weight:400;
  font-size:clamp(2rem,6vw,4.4rem); line-height:1.08; letter-spacing:.04em;
  margin-top:1rem;
}
.close__body{
  max-width:52ch; margin-top:1.8rem;
  font-size:clamp(1.02rem,.96rem + .4vw,1.2rem); font-weight:200;
  color:rgba(240,232,214,.7);
}
.cta{
  display:inline-flex; align-items:center; gap:1rem;
  margin-top:2.6rem; padding:1rem 2.2rem;
  border:1px solid var(--gold-dim);
  font-family:"Noto Naskh Arabic",serif; font-size:1rem;
  color:var(--vellum);
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
}
.cta i{ width:30px; height:1px; background:currentColor; transition:width .45s var(--ease); }
.cta:hover{ background:var(--lapis); border-color:var(--lapis); }
.cta:hover i{ width:46px; }

/* ═══════════════ FOOT ═══════════════ */
.foot{ position:relative; background:var(--ink); padding-bottom:3.2rem; }
.band{
  height:9px;
  background:
    repeating-linear-gradient(135deg, var(--lapis) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(45deg,  var(--gold)  0 4px, transparent 4px 9px),
    var(--ink-2);
  opacity:.6;
}
.foot__inner{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-top:3.2rem;
}
.foot__mark{
  display:flex; align-items:baseline; gap:.9rem;
  font-family:"Italiana",serif; font-size:1.1rem;
  letter-spacing:.3em; text-transform:uppercase;
}
.foot__mark span{ font-family:"Amiri",serif; font-size:1.5rem; letter-spacing:0; color:var(--gold); }
.foot__note{ color:rgba(240,232,214,.5); font-size:.94rem; max-width:52ch; }
.foot__count{ font-family:"Amiri",serif; font-size:1.1rem; color:rgba(198,163,86,.65); letter-spacing:.2em; }

/* ── copy toast ────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:130;
  transform:translate(-50%,140%);
  background:var(--vellum); color:var(--ink);
  padding:.85rem 1.6rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  opacity:0; visibility:hidden;
  transition:transform .5s var(--ease-out), opacity .35s var(--ease), visibility 0s linear .35s;
  pointer-events:none;
}
.toast.is-up{
  transform:translate(-50%,0);
  opacity:1; visibility:visible;
  transition:transform .5s var(--ease-out), opacity .35s var(--ease), visibility 0s;
}

/* ═══════════════ MOTION ═══════════════ */
/* Hidden-until-revealed states apply only when JS is running; .js is set by
   main.js before first paint, so the page is fully legible without it. */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.js .head{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .head.is-in{ opacity:1; transform:none; }
.js .hero__eyebrow,.js .hero__title,.js .hero__rom,
.js .hero__lede,.js .hero__meta,.js .hero__scroll{
  opacity:0; transform:translateY(20px);
  animation:enter 1.15s var(--ease-out) forwards;
}
.js .hero__eyebrow{ animation-delay:.15s; }
.js .hero__title  { animation-delay:.3s;  }
.js .hero__rom    { animation-delay:.5s;  }
.js .hero__lede   { animation-delay:.64s; }
.js .hero__meta   { animation-delay:.8s;  }
.js .hero__scroll { animation-delay:1s;   }
@keyframes enter{ to{ opacity:1; transform:none; } }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1180px){ .rail{ display:none; } }
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .head .title{ max-width:none; }
}
@media (max-width:680px){
  .dua__head{ grid-template-columns:1fr; gap:.5rem; }
  .dua__ar{ max-width:none; }
  .dua__foot{ gap:.9rem; }
  .dua__src{ margin-inline-end:0; flex-basis:100%; }
  .foot__inner{ display:grid; gap:1.1rem; }
  .hero{ padding-top:7.5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal,.js .head{ opacity:1; transform:none; }
  .js .hero__eyebrow,.js .hero__title,.js .hero__rom,
  .js .hero__lede,.js .hero__meta,.js .hero__scroll{ opacity:1; transform:none; animation:none; }
}

/* ============================================================
   ENHANCEMENTS
   ============================================================ */

/* ── reading preferences, set on <html> by main.js ─────── */
:root{ --ar-scale:1; }
html.size-s{ --ar-scale:.86; }
html.size-l{ --ar-scale:1.2; }
.dua__ar{ font-size:calc(clamp(1.42rem,1.15rem + 1.15vw,2.15rem) * var(--ar-scale)); }
html.no-tr .dua__tr{ display:none; }
html.no-en .dua__en{ display:none; }
html.only-saved .dua:not(.is-marked){ display:none; }
html.only-saved .section.is-empty{ display:none; }

/* ── transliteration ───────────────────────────────────── */
.dua__tr{
  margin-top:1.5rem; max-width:66ch;
  display:grid; gap:.5rem;
  padding-inline-start:1.1rem;
  border-inline-start:1px solid var(--rule);
}
.dua__tr p{
  font-family:"Spectral",Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:.98rem; line-height:1.75;
  color:var(--fg-mute);
}

/* ── numeral medallion ─────────────────────────────────── */
.dua__no{
  display:grid; place-items:center;
  width:3.1rem; height:3.1rem;
  border:1px solid var(--rule); border-radius:50%;
  font-size:1.15rem; line-height:1;
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.dua:hover .dua__no,.dua:focus-within .dua__no{ border-color:var(--accent); }
.dua.is-marked .dua__no{ border-color:var(--accent); color:var(--accent); }
.dua.is-marked::before{ transform:scaleY(1); }
.dua.is-target{ background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }

/* ── per-duʿā tools ────────────────────────────────────── */
.dua__tools{ display:flex; align-items:center; gap:.55rem; }
.tool{
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem;
  background:none; border:1px solid var(--rule); cursor:pointer;
  color:var(--fg-mute);
  transition:border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.tool:hover{ border-color:var(--accent); color:var(--fg); }
.tool svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.mark[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }
.mark[aria-pressed="true"] svg{ fill:currentColor; }
.tas{
  width:auto; min-width:2.5rem; padding-inline:.7rem; gap:.15rem;
  grid-auto-flow:column; align-items:baseline;
  font-family:"Amiri",serif; font-size:1.05rem; line-height:1;
}
.tas__t{ font-size:.8rem; opacity:.6; }
.tas.is-full{ border-color:var(--accent); color:var(--accent); }

/* ── nav index button ──────────────────────────────────── */
.nav__index{
  display:inline-flex; align-items:center; gap:.6rem;
  background:none; border:1px solid var(--gold-dim);
  padding:.5rem 1rem; cursor:pointer;
  color:rgba(240,232,214,.8);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.nav__index [lang="ar"]{ font-family:"Amiri",serif; font-size:1.05rem; line-height:1; color:var(--gold); }
.nav__index span:last-child{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
}
.nav__index:hover{ border-color:var(--gold); color:var(--vellum); }

/* ── duʿā of the day ───────────────────────────────────── */
.daily{
  position:absolute; right:var(--pad); bottom:2.2rem; z-index:2;
  display:grid; gap:.7rem; max-width:min(30rem,42vw);
  padding:1.4rem 1.6rem;
  border:1px solid var(--gold-dim);
  background:rgba(10,16,20,.5);
  backdrop-filter:blur(6px);
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
}
.daily[hidden]{ display:none; }
.daily:hover{ border-color:var(--gold); background:rgba(16,24,32,.62); }
.daily__label{
  display:flex; align-items:center; gap:.7rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.daily__label [lang="ckb"]{ font-family:"Noto Naskh Arabic",serif; font-size:.95rem; letter-spacing:0; text-transform:none; }
.daily__ar{
  font-family:"Amiri",serif; font-size:1.35rem; line-height:1.9;
  color:var(--vellum); text-align:right;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.daily__for{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(240,232,214,.6);
}

/* ── the index panel ───────────────────────────────────── */
.fihrist{
  position:fixed; inset:0; z-index:140;
  background:rgba(6,10,13,.78);
  backdrop-filter:blur(10px);
  display:grid; justify-items:end;
}
.fihrist[hidden]{ display:none; }
.fihrist__panel{
  width:min(46rem,100%); height:100%;
  background:var(--ink-2);
  border-inline-start:1px solid var(--gold-dim);
  display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto;
  animation:panelIn .55s var(--ease-out);
}
@keyframes panelIn{ from{ transform:translateX(3%); opacity:0; } }
.fihrist__top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.6rem clamp(1.25rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule);
}
.fihrist__title{ display:flex; align-items:baseline; gap:.9rem; }
.fihrist__title [lang="ar"]{ font-family:"Amiri",serif; font-size:1.7rem; color:var(--gold); }
.fihrist__title span:last-child{
  font-family:"Italiana",serif; font-size:1.05rem;
  letter-spacing:.3em; text-transform:uppercase;
}
.fihrist__close{
  background:none; border:1px solid var(--rule); cursor:pointer;
  padding:.55rem 1.1rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-soft);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.fihrist__close:hover{ border-color:var(--gold); color:var(--vellum); }

.fihrist__search{
  position:relative;
  padding:1.2rem clamp(1.25rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule);
}
.fihrist__search input{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule);
  padding:.7rem 3.5rem .7rem 0;
  font-family:"Spectral",Georgia,serif; font-size:1.05rem; font-weight:300;
  color:var(--vellum);
}
.fihrist__search input::placeholder{ color:rgba(240,232,214,.34); }
.fihrist__search input:focus{ outline:none; border-bottom-color:var(--gold); }
.fihrist__count{
  position:absolute; right:clamp(1.25rem,3vw,2.4rem); top:50%; transform:translateY(-50%);
  font-family:"Amiri",serif; font-size:1.2rem; color:var(--gold);
}

.prefs{
  padding:1.2rem clamp(1.25rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule);
  display:grid; gap:.85rem;
}
.prefs__row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.prefs__label{
  flex:0 0 6.5rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-mute);
}
.seg{ display:flex; gap:.4rem; flex-wrap:wrap; }
.seg button{
  background:none; border:1px solid var(--rule); cursor:pointer;
  padding:.45rem .9rem;
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute);
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.seg button:hover{ color:var(--vellum); border-color:var(--gold-dim); }
.seg button[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
#segSize button[data-val="s"]{ font-size:.55rem; }
#segSize button[data-val="l"]{ font-size:.78rem; }

.fihrist__list{ overflow-y:auto; padding:.6rem clamp(1.25rem,3vw,2.4rem) 1.5rem; }
.fihrist__group{
  display:flex; align-items:center; gap:.8rem;
  margin-top:1.6rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.fihrist__group:first-child{ margin-top:.4rem; }
.fihrist__item{ display:block; padding:.8rem 0; border-bottom:1px solid var(--rule); }
/* Two fixed reading edges: Kurdish ends at the middle rule, English begins there. */
.fihrist__item a{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr) 15rem; gap:1.4rem; align-items:baseline;
}
.fihrist__item:hover{ background:rgba(198,163,86,.06); }
.fihrist__n{ font-family:"Amiri",serif; font-size:1.05rem; color:var(--gold); }
.fihrist__ckb{ font-family:"Noto Naskh Arabic",serif; font-size:.98rem; line-height:1.9; color:var(--fg); text-align:right; }
.fihrist__en{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute); text-align:left;
}
.fihrist__item.is-marked .fihrist__n{ position:relative; }
.fihrist__item.is-marked .fihrist__n::after{
  content:"●"; position:absolute; inset-inline-start:-.85rem; font-size:.45rem; top:.25rem;
}
.fihrist__empty{ padding:2.5rem 0; color:var(--fg-mute); font-style:italic; }
.fihrist__hint{
  padding:1rem clamp(1.25rem,3vw,2.4rem);
  border-top:1px solid var(--rule);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mute);
}
kbd{
  display:inline-block; padding:.1rem .35rem; margin-inline:.15rem;
  border:1px solid var(--rule); font-family:inherit; font-size:.9em;
}

@media (max-width:640px){
  .daily{ display:none; }
  .nav__index span:last-child{ display:none; }
  .fihrist__item a{ grid-template-columns:2.2rem minmax(0,1fr); }
  .fihrist__en{ grid-column:2; text-align:left; }
}

/* ── print: a plain booklet ────────────────────────────── */
@media print{
  .nav,.rail,.progress,.menu,.fihrist,.toast,.daily,.hero__scroll,
  .hero__sun,.hero__screen,.shamsa,.dua__tools,.band,.skip{ display:none !important; }
  html,body{ background:#fff !important; color:#000 !important; }
  .section,.close,.foot{
    background:#fff !important; color:#000 !important;
    padding-block:0 !important;
  }
  .section--vellum::before{ display:none !important; }
  :root{
    --fg:#000; --fg-soft:#222; --fg-mute:#555; --rule:#bbb; --accent:#000; --accent-2:#333; --panel:#fff;
  }
  .hero{ min-height:0; padding:0 0 1.5cm; page-break-after:always; }
  .hero__title{ color:#000 !important; background:none !important; -webkit-text-fill-color:#000; }
  .hero__title::before{ display:none; }
  .duas{ background:none; border:0; gap:0; }
  .dua{ page-break-inside:avoid; border-bottom:1px solid #bbb; padding-inline:0; }
  .dua::before{ display:none; }
  .head{ page-break-after:avoid; }
  .close__ar{ color:#000 !important; background:none !important; -webkit-text-fill-color:#000; }
  a[href^="#"]::after{ content:""; }
  @page{ margin:1.8cm; }
}

.is-hidden{ display:none !important; }
.section.is-empty{ display:none; }

/* Controls that only do something once main.js has run stay out of the page
   entirely when it hasn't. */
html:not(.js) .nav__index,
html:not(.js) .dua__tools,
html:not(.js) .fihrist,
html:not(.js) .daily{ display:none !important; }

/* ============================================================
   SECOND PASS — nav tools, themes, faces, focus reader
   ============================================================ */

/* ── Arabic face choice ────────────────────────────────── */
html.font-scheherazade .dua__ar,
html.font-scheherazade .reader__ar{ font-family:"Scheherazade New",serif; }
html.font-naskh .dua__ar,
html.font-naskh .reader__ar{ font-family:"Noto Naskh Arabic",serif; }

/* ── nav tools ─────────────────────────────────────────── */
.nav__tools{ display:flex; align-items:center; gap:.6rem; }
.nav__btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--rule);
  padding:.5rem .9rem; cursor:pointer;
  color:rgba(240,232,214,.72);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.nav__btn [lang]{ font-family:"Noto Naskh Arabic",serif; font-size:.95rem; letter-spacing:0; text-transform:none; }
.nav__btn [lang="ar"]{ font-family:"Amiri",serif; font-size:1.05rem; color:var(--gold); }
.nav__btn:hover{ border-color:var(--gold); color:var(--vellum); }
.nav__btn--strong{ border-color:var(--gold-dim); }
.themeBtn__dot{
  width:.7rem; height:.7rem; border-radius:50%;
  border:1px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.nav__toggle{ margin-inline-start:.2rem; }

/* ── the group menu ────────────────────────────────────── */
.menu__inner{ gap:.1rem; width:min(34rem,90vw); }
.menu__inner a{
  display:grid; grid-template-columns:minmax(0,1fr) auto 2.5rem;
  gap:1rem; align-items:baseline; text-align:right;
  padding:.5rem .8rem; border-bottom:1px solid var(--rule);
  font-family:"Noto Naskh Arabic",serif; font-size:1.05rem;
  letter-spacing:0; text-transform:none;
}
.menu__inner a em{ font-style:normal; color:var(--vellum); }
.menu__inner a span{
  font-family:"Jost",system-ui,sans-serif; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); text-align:left;
}
.menu__inner a i{ font-family:"Amiri",serif; font-style:normal; font-size:.95rem; color:var(--fg-mute); text-align:right; }
.menu__inner a:hover{ background:rgba(198,163,86,.07); }

/* ── group count in the section eyebrow ────────────────── */
.head__n{ font-family:"Amiri",serif; font-size:1.05rem; letter-spacing:0; text-transform:none; }

/* ── focus reader ──────────────────────────────────────── */
.reader{
  position:fixed; inset:0; z-index:150;
  background:var(--ink);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
}
.reader[hidden]{ display:none; }
.reader::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/khatam-gold.svg") repeat;
  background-size:150px 150px; opacity:.07;
}
.reader__inner{ display:contents; }
.reader__top,.reader__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem clamp(1.25rem,4vw,3rem);
  position:relative; z-index:1;
}
.reader__foot{ justify-content:center; gap:clamp(1rem,4vw,3rem); }
.reader__pos{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.reader__close{
  background:none; border:1px solid var(--rule); cursor:pointer;
  padding:.55rem 1.1rem; color:var(--fg-soft);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
}
.reader__close:hover{ border-color:var(--gold); color:var(--vellum); }
.reader__body{
  overflow-y:auto; position:relative; z-index:1;
  padding:clamp(1rem,4vw,3rem) clamp(1.25rem,6vw,6rem);
  display:grid; align-content:center; justify-items:center; gap:1.6rem;
  text-align:center;
}
.reader__when{ font-family:"Noto Naskh Arabic",serif; font-size:1.1rem; line-height:2; color:var(--fg); }
.reader__for{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-2);
}
.reader__ar{
  font-family:"Amiri",serif;
  font-size:calc(clamp(1.7rem,1.1rem + 2.2vw,3.1rem) * var(--ar-scale));
  line-height:2.1; color:var(--vellum);
  max-width:22ch; direction:rtl;
}
.reader__tr{ font-style:italic; font-size:1rem; color:var(--fg-mute); max-width:60ch; }
.reader__en{ font-size:1.05rem; color:var(--fg-soft); max-width:56ch; }
.reader__src{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
html.no-tr .reader__tr{ display:none; }
html.no-en .reader__en{ display:none; }
.reader__nav{
  width:3.4rem; height:3.4rem; border-radius:50%;
  background:none; border:1px solid var(--rule); cursor:pointer;
  color:var(--fg-soft); font-size:1.1rem;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.reader__nav:hover{ border-color:var(--gold); color:var(--vellum); }
.reader__tas{ height:3.4rem; min-width:5.4rem; border-radius:1.7rem; font-size:1.4rem; }
.reader__pos{ direction:ltr; }

/* ── vellum theme: the whole page as a manuscript page ─── */
html.theme-vellum body{ background:var(--vellum); color:#0A1014; }
html.theme-vellum .section--ink,
html.theme-vellum .section--ink-2,
html.theme-vellum .close,
html.theme-vellum .foot,
html.theme-vellum .reader{
  background:var(--vellum);
  --fg:#0A1014;
  --fg-soft:rgba(10,16,20,.74);
  --fg-mute:rgba(10,16,20,.54);
  --rule:rgba(10,16,20,.16);
  --accent:var(--lapis);
  --accent-2:var(--lapis);
  --panel:var(--vellum);
  color:#0A1014;
}
html.theme-vellum .section--ink-2,
html.theme-vellum .section--vellum{ background:var(--vellum-2); --panel:var(--vellum-2); }
html.theme-vellum .close{ background:radial-gradient(ellipse 90% 80% at 50% 0%, #FBF6EA, var(--vellum) 62%); }
html.theme-vellum .hero{ background:var(--vellum); }
html.theme-vellum .hero::after{ background:linear-gradient(to bottom, rgba(240,232,214,0), var(--vellum) 88%); }
html.theme-vellum .hero__sun{
  background:radial-gradient(circle, rgba(198,163,86,.34) 0%, rgba(42,74,134,.14) 30%, rgba(240,232,214,0) 68%);
}
html.theme-vellum .hero__screen{ opacity:.30; }
html.theme-vellum .hero__title{ color:#0A1014; }
html.theme-vellum .hero__title::before{ color:rgba(10,16,20,.2); }
html.theme-vellum .hero__lede{ color:rgba(10,16,20,.78); }
html.theme-vellum .hero__lede--en{ color:rgba(10,16,20,.6); }
html.theme-vellum .hero__meta,
html.theme-vellum .hero__scroll{ color:rgba(10,16,20,.6); }
html.theme-vellum .hero__rom{ color:var(--lapis); }
html.theme-vellum .close__ar{
  background:none; color:var(--lapis); -webkit-text-fill-color:var(--lapis);
}
html.theme-vellum .close__body,
html.theme-vellum .foot__note{ color:rgba(10,16,20,.68); }
html.theme-vellum .close__title,
html.theme-vellum .foot__mark{ color:#0A1014; }
html.theme-vellum .nav.is-stuck{ background:rgba(240,232,214,.9); border-bottom-color:rgba(10,16,20,.14); }
html.theme-vellum .nav__btn,
html.theme-vellum .nav__mark-en,
html.theme-vellum .nav__toggle{ color:rgba(10,16,20,.76); }
html.theme-vellum .nav__mark-ar,
html.theme-vellum .nav__btn [lang="ar"]{ color:var(--lapis); }
html.theme-vellum .daily{ background:rgba(255,255,255,.5); border-color:rgba(10,16,20,.18); }
html.theme-vellum .daily__ar{ color:#0A1014; }
html.theme-vellum .daily__label{ color:var(--lapis); }
html.theme-vellum .daily__for{ color:rgba(10,16,20,.6); }
html.theme-vellum .reader::before{ opacity:.12; }
html.theme-vellum .reader__ar{ color:#0A1014; }
html.theme-vellum .shamsa{ opacity:.2; }
html.theme-vellum .toast{ background:var(--ink); color:var(--vellum); }
html.theme-vellum .themeBtn__dot{ background:linear-gradient(90deg, transparent 50%, currentColor 50%); }
html.theme-vellum .fihrist{ background:rgba(240,232,214,.82); }
html.theme-vellum .fihrist__panel{
  background:var(--vellum-2);
  --fg:#0A1014; --fg-soft:rgba(10,16,20,.74); --fg-mute:rgba(10,16,20,.54);
  --rule:rgba(10,16,20,.16); --accent:var(--lapis);
  color:#0A1014;
}
html.theme-vellum .fihrist__search input{ color:#0A1014; }
html.theme-vellum .fihrist__title [lang="ar"],
html.theme-vellum .fihrist__count,
html.theme-vellum .fihrist__group,
html.theme-vellum .fihrist__n{ color:var(--lapis); }
html.theme-vellum .seg button[aria-pressed="true"]{ background:var(--lapis); border-color:var(--lapis); color:var(--vellum); }
html.theme-vellum .menu{ background:rgba(240,232,214,.97); }
html.theme-vellum .menu__inner a em{ color:#0A1014; }
html.theme-vellum .menu__inner a span{ color:var(--lapis); }
html.theme-vellum .band{ opacity:.75; }

@media (max-width:1080px){
  .nav__btn span:last-child{ display:none; }
  .nav__btn{ padding:.5rem .7rem; }
}
@media (max-width:640px){
  #randomBtn,#themeBtn{ display:none; }
}

/* ============================================================
   THIRD PASS — mobile UX, chip strip, thumb dock, gaze panel
   ============================================================ */

:root{
  --nav-h: 4.4rem;
  --chips-h: 3.2rem;
  --dock-h: 4.6rem;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Anchors must not land underneath the sticky nav and chip strip. */
.section,.dua,.close{ scroll-margin-top: calc(var(--nav-h) + var(--chips-h) + .5rem); }

/* ── group chip strip ──────────────────────────────────── */
/* The nav is fixed, so the chip strip parks directly beneath it, not at 0. */
.chips{
  position:sticky; top:var(--nav-h); z-index:108;
  background:rgba(10,16,20,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  opacity:0; pointer-events:none;
  transform:translateY(-100%);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.chips.is-on{ opacity:1; pointer-events:auto; transform:none; }
.chips__track{
  display:flex; gap:.4rem;
  overflow-x:auto; overflow-y:hidden;
  padding:.6rem var(--pad);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.chips__track::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; scroll-snap-align:center;
  display:inline-flex; align-items:baseline; gap:.5rem;
  padding:.45rem .85rem;
  border:1px solid var(--rule);
  white-space:nowrap;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.chip em{ font-family:"Amiri",serif; font-style:normal; font-size:1rem; color:var(--fg); }
.chip span{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.chip i{ font-family:"Amiri",serif; font-style:normal; font-size:.8rem; color:var(--accent); opacity:.75; }
.chip:hover{ border-color:var(--gold-dim); }
.chip.is-current{ background:var(--gold); border-color:var(--gold); }
.chip.is-current em,.chip.is-current span,.chip.is-current i{ color:var(--ink); opacity:1; }
html.theme-vellum .chips{ background:rgba(240,232,214,.92); border-bottom-color:rgba(10,16,20,.14); }
html.theme-vellum .chip em{ color:#0A1014; }
html.theme-vellum .chip.is-current{ background:var(--lapis); border-color:var(--lapis); }
html.theme-vellum .chip.is-current em,
html.theme-vellum .chip.is-current span,
html.theme-vellum .chip.is-current i{ color:var(--vellum); }

/* ── thumb dock ────────────────────────────────────────── */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:118;
  display:none;
  background:rgba(10,16,20,.94);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--rule);
  padding-bottom:var(--safe-b);
}
.dock__btn{
  flex:1 1 0; min-height:var(--dock-h);
  display:grid; justify-items:center; align-content:center; gap:.35rem;
  background:none; border:0; cursor:pointer;
  color:rgba(240,232,214,.62);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.53rem; letter-spacing:.18em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.dock__btn svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.dock__btn:active{ color:var(--vellum); }
.dock__btn--eye[aria-pressed="true"]{ color:var(--gold); }
html.theme-vellum .dock{ background:rgba(240,232,214,.95); border-top-color:rgba(10,16,20,.14); }
html.theme-vellum .dock__btn{ color:rgba(10,16,20,.66); }
html.theme-vellum .dock__btn--eye[aria-pressed="true"]{ color:var(--lapis); }

/* ── back to top (pointer devices) ─────────────────────── */
.totop{
  position:fixed; right:calc(var(--pad) * .5); bottom:2rem; z-index:112;
  width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(22,32,42,.86); backdrop-filter:blur(8px);
  border:1px solid var(--gold-dim); cursor:pointer;
  color:var(--gold);
  transition:border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.totop[hidden]{ display:none; }
.totop svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.totop:hover{ border-color:var(--gold); color:var(--vellum); }
html.theme-vellum .totop{ background:rgba(255,255,255,.7); }

/* ── first-run hint ────────────────────────────────────── */
.hint{
  position:fixed; left:50%; bottom:calc(1.4rem + var(--safe-b)); z-index:119;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.9rem;
  max-width:min(30rem,92vw);
  padding:.75rem .8rem .75rem 1.1rem;
  background:rgba(16,24,32,.94); backdrop-filter:blur(10px);
  border:1px solid var(--gold-dim);
  color:var(--fg-soft); font-size:.85rem;
}
.hint[hidden]{ display:none; }
.hint b{ color:var(--gold); font-weight:400; }
.hint__x{
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  background:none; border:1px solid var(--rule); cursor:pointer; color:inherit; line-height:1;
}
html.theme-vellum .hint{ background:rgba(255,255,255,.95); color:rgba(10,16,20,.78); }
html.theme-vellum .hint b{ color:var(--lapis); }

/* ── gaze panel ────────────────────────────────────────── */
/* the band inside which nothing scrolls, drawn so it can be seen and not guessed */

/* ── mobile layout ─────────────────────────────────────── */
@media (max-width:900px){
  .dock{ display:flex; }
  body{ padding-bottom:calc(var(--dock-h) + var(--safe-b)); }
  .totop{ display:none; }
  .toast{ bottom:calc(var(--dock-h) + var(--safe-b) + 1rem); }
  .hint{ bottom:calc(var(--dock-h) + var(--safe-b) + 1rem); }
  .reader__foot{ padding-bottom:calc(1.4rem + var(--safe-b)); }
  :root{ --nav-h:3.9rem; }
}

/* Touch: every control clears 44 px. */
@media (pointer:coarse){
  .tool{ width:2.9rem; height:2.9rem; }
  .tas{ min-width:2.9rem; }
  .copy{ padding:.8rem 1.3rem; }
  .seg button{ padding:.7rem 1rem; }
  .fihrist__item{ padding-block:1rem; }
  .chip{ padding:.6rem 1rem; }
  .nav__btn{ padding:.7rem .9rem; }
}

@media (max-width:520px){
  .dock__btn span{ font-size:.5rem; letter-spacing:.12em; }
  .reader__body{ align-content:start; padding-top:1rem; }
  .reader__ar{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .chips{ transition:none; }
}

/* ============================================================
   FOURTH PASS — reading progress, resume, interface language
   ============================================================ */

/* ── already read ──────────────────────────────────────── */
.dua__no{ position:relative; }
.dua.is-read .dua__no{ border-color:var(--accent); }
.dua.is-read .dua__no::after{
  content:""; position:absolute; right:-1px; top:-1px;
  width:.62rem; height:.62rem; border-radius:50%;
  background:var(--accent);
}
.fihrist__prog{
  margin-inline-start:auto;
  font-family:"Amiri",serif; font-size:.85rem; letter-spacing:.06em;
  color:var(--fg-mute); text-transform:none;
}
.fihrist__prog.is-done{ color:var(--accent); }

/* ── continue where you stopped ────────────────────────── */
.resume{
  position:fixed; left:var(--pad); bottom:2rem; z-index:117;
  display:flex; align-items:center; gap:.85rem;
  padding:.75rem .8rem .75rem 1.1rem;
  background:rgba(22,32,42,.94); backdrop-filter:blur(10px);
  border:1px solid var(--gold-dim); cursor:pointer;
  color:var(--fg-soft); text-align:left;
}
.resume[hidden]{ display:none; }
.resume__label{ display:grid; gap:.15rem; }
.resume__label [lang]{ font-family:"Noto Naskh Arabic",serif; font-size:.9rem; color:var(--fg); }
.resume__label span:last-child{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-mute);
}
.resume__n{ font-family:"Amiri",serif; font-size:1.4rem; color:var(--gold); }
.resume__x{
  display:grid; place-items:center;
  width:1.7rem; height:1.7rem; border-radius:50%;
  border:1px solid var(--rule); font-size:.9rem; line-height:1;
}
.resume:hover{ border-color:var(--gold); }
html.theme-vellum .resume{ background:rgba(255,255,255,.95); color:rgba(10,16,20,.78); }
html.theme-vellum .resume__n{ color:var(--lapis); }

@media (max-width:900px){
  .resume{ left:50%; transform:translateX(-50%); bottom:calc(var(--dock-h) + var(--safe-b) + 1rem); }
}

/* Kurdish interface: labels get the Naskh face and drop the tracking. */
html.ui-ckb .dock__btn span,
html.ui-ckb .nav__btn span:last-child,
html.ui-ckb .seg button,
html.ui-ckb .prefs__label,
html.ui-ckb .copy,
html.ui-ckb .fihrist__close,
html.ui-ckb .fihrist__title span:last-child,
html.ui-ckb .reader__close,
html.ui-ckb .fihrist__en,
html.ui-ckb .dua__for{
  font-family:"Noto Naskh Arabic",serif;
  letter-spacing:0; text-transform:none;
  font-size:.92rem;
}
html.ui-ckb .dock__btn span{ font-size:.72rem; }
/* the panel is already titled فِهْرِسْت; the Latin gloss is redundant in Kurdish */
html.ui-ckb .fihrist__title span:last-child{ display:none; }
html.ui-ckb .fihrist__group{ font-size:.95rem; }
html.ui-ckb .fihrist__en,
html.ui-ckb .dua__for{ font-size:1rem; line-height:1.8; }

/* ============================================================
   HANDS-FREE — the chooser sheet and the running pill
   ============================================================ */

.hf{
  position:fixed; inset:0; z-index:135;
  background:rgba(6,10,13,.8); backdrop-filter:blur(10px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--pad);
}
.hf[hidden]{ display:none; }
.hf__sheet{
  width:100%; max-width:28rem;
  display:grid; gap:.5rem;
  padding:1.4rem;
  background:var(--ink-2);
  border:1px solid var(--gold-dim);
  margin-bottom:calc(var(--dock-h) + var(--safe-b));
  animation:sheetIn .4s var(--ease-out);
}
@keyframes sheetIn{ from{ transform:translateY(14%); opacity:0; } }
.hf__title{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.5rem; }
.hf__title [lang]{ font-family:"Noto Naskh Arabic",serif; font-size:1.15rem; color:var(--gold); }
.hf__title span:last-child{
  font-family:"Jost",system-ui,sans-serif;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-soft);
}
.hf__mode{
  display:grid; gap:.35rem; text-align:left;
  padding:1rem 1.1rem;
  background:none; border:1px solid var(--rule); cursor:pointer; color:inherit;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.hf__mode b{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:"Italiana",serif; font-weight:400; font-size:1.25rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vellum);
}
.hf__mode b [lang]{ font-family:"Noto Naskh Arabic",serif; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--gold); }
.hf__mode span{ font-size:.9rem; line-height:1.5; color:var(--fg-mute); }
.hf__mode:hover,.hf__mode:focus-visible{ border-color:var(--gold); background:rgba(198,163,86,.07); }
.hf__cancel{
  justify-self:center; margin-top:.4rem;
  background:none; border:0; cursor:pointer;
  padding:.7rem 1.2rem; color:var(--fg-mute);
  font-family:"Jost",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
}
html.theme-vellum .hf{ background:rgba(240,232,214,.86); }
html.theme-vellum .hf__sheet{ background:var(--vellum-2); }
html.theme-vellum .hf__mode b{ color:#0A1014; }
html.theme-vellum .hf__title [lang],
html.theme-vellum .hf__mode b [lang]{ color:var(--lapis); }

/* ── the running pill ──────────────────────────────────── */
.pill{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + var(--safe-b) + .9rem); z-index:126;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.15rem;
  padding:.3rem .35rem;
  background:rgba(16,24,32,.96); backdrop-filter:blur(14px);
  border:1px solid var(--gold-dim); border-radius:2rem;
  box-shadow:0 6px 26px rgba(0,0,0,.4);
}
.pill[hidden]{ display:none; }
.pill__b{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--fg-soft); font-size:.95rem; line-height:1;
}
.pill__b:hover{ color:var(--vellum); }
.pill__x{ color:var(--fg-mute); font-size:1.3rem; }
.pill__mode{ font-size:1.1rem; }
.pill__speed{
  min-width:1.6rem; text-align:center;
  font-family:"Amiri",serif; font-size:1.15rem; color:var(--gold);
}
.pill__dot{
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--fg-mute); margin-inline:.3rem;
  transition:background-color .2s linear, transform .2s var(--ease);
}
.pill__dot.is-live{ background:var(--gold); transform:scale(1.25); }
.pill__dot.is-cal{ background:var(--lapis-lit); animation:calPulse 1s ease-in-out infinite; }
.pill__dot.is-lost{ background:#E28C7A; }
.pill__dot.is-paused{ background:var(--fg-mute); opacity:.4; }
@keyframes calPulse{ 50%{ opacity:.3; } }
.pill__cam{
  width:2.4rem; height:2.4rem; border-radius:50%;
  object-fit:cover; transform:scaleX(-1);
  margin-inline-end:.25rem;
  display:none;
}
.pill.is-cam .pill__cam{ display:block; }
html.theme-vellum .pill{ background:rgba(255,255,255,.97); }

@media (min-width:901px){
  .pill{ bottom:2rem; }
  .hf{ align-items:center; }
  .hf__sheet{ margin-bottom:0; }
}
@media (prefers-reduced-motion:reduce){
  .hf__sheet{ animation:none; }
  .pill__dot.is-cal{ animation:none; }
}