/* ==========================================================================
   site.css — page composition for nuqt.app
   Every token comes from nuqt.css. This file composes pages, not tokens.
   ========================================================================== */

/* --- top bar -------------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--rule);
  transition:background var(--t-standard) var(--ease);
}
.top-in{display:flex;align-items:center;gap:var(--s-4);min-height:56px}
.mark{display:flex;align-items:baseline;gap:var(--s-2);margin-inline-end:auto;
  text-decoration:none;color:inherit}
.mark .ar{font-size:27px;line-height:1}
.mark .en{font:500 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.top-actions{display:flex;align-items:center;gap:var(--s-2)}
.top-btn{
  font:600 13px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  padding:10px 16px;border-radius:var(--r-pill);border:0;background:var(--surface);
  color:var(--ink-soft);cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:var(--s-2);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease);
}
.top-btn:hover{background:var(--surface-2);color:var(--ink)}
.top-btn svg{width:18px;height:18px;flex:none}

/* --- sheets (surahs + settings) ------------------------------------------ */
.sheet-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.4);
  opacity:0;transition:opacity var(--t-standard) var(--ease);
}
.sheet-overlay[hidden]{display:none}
.sheet-overlay.is-open{opacity:1}
.sheet{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(360px,85vw);background:var(--bg);
  border-left:1px solid var(--rule);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--t-expressive) var(--ease),
             background var(--t-standard) var(--ease);
}
.sheet[hidden]{display:block;pointer-events:none;visibility:hidden}
.sheet.is-open{transform:translateX(0);pointer-events:auto;visibility:visible}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4);border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--bg);z-index:1;
}
.sheet-close{
  font:400 28px/1 var(--ui);border:0;background:transparent;
  color:var(--ink-soft);cursor:pointer;width:44px;height:44px;
  display:grid;place-items:center;border-radius:var(--r-sm);
}
.sheet-close:hover{color:var(--ink);background:var(--surface)}
.sheet .list-search{margin:var(--s-3) var(--s-4);width:calc(100% - var(--s-4) * 2)}
.sheet-list{padding:0 var(--s-3) var(--s-4)}

/* --- sidebar surah list (desktop ≥880px) --------------------------------- */
.sidebar-list{
  position:sticky;top:72px;max-height:calc(100dvh - 96px);overflow-y:auto;
  padding-inline-end:var(--s-2);
}
@media (max-width:879px){.sidebar-list{display:none}}
.sidebar-list .list-search{
  width:100%;font:400 14px/1 var(--ui);color:var(--ink);
  background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--rule);
  border-radius:var(--r-pill);padding:12px 16px;min-height:44px;margin-bottom:var(--s-3);
}
.sidebar-list .list-search::placeholder{color:var(--ink-faint)}

/* --- surah list items ---------------------------------------------------- */
.s-item{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:start;
  padding:10px 12px;border:0;background:transparent;border-radius:var(--r-sm);
  cursor:pointer;color:inherit;font:inherit;text-decoration:none;
  transition:background var(--t-quick) var(--ease)}
.s-item:hover{background:var(--surface)}
.s-item[aria-current="true"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.s-num{width:30px;flex:none}
.s-name{min-width:0}
.s-name .tr{font:600 14px/1.3 var(--ui)}
.s-name .en{font:400 12px/1.35 var(--ui);color:var(--ink-soft)}
/* physical margin: the name is dir="rtl", so margin-inline-start would be its RIGHT side */
.s-item .ar{font-size:17px;margin-left:auto;flex:none;color:var(--gold-ui)}

/* --- shell layout -------------------------------------------------------- */
.shell{
  display:grid;grid-template-columns:260px 1fr;gap:var(--s-6);
  align-items:start;padding-block:var(--s-5) var(--s-8);
}
@media (max-width:879px){.shell{grid-template-columns:1fr;gap:0}}

/* --- home ---------------------------------------------------------------- */
.home-main{padding-block:var(--s-7) var(--s-8)}
.home-hero{text-align:center;margin-bottom:var(--s-6)}
.home-mark{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.home-title{font:500 clamp(28px,5vw,42px)/1 var(--display);letter-spacing:.16em;text-transform:uppercase}
.home-tagline{text-align:center;margin:var(--s-3) auto 0}
.home-search{
  display:block;width:100%;max-width:480px;margin:0 auto var(--s-5);
  font:400 15px/1 var(--ui);color:var(--ink);
  background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--rule);
  border-radius:var(--r-pill);padding:14px 20px;min-height:48px;
}
.home-search::placeholder{color:var(--ink-faint)}
.home-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-2);
}

/* --- the unwan (illuminated surah heading) -------------------------------- */
.unwan{position:relative;text-align:center;padding:var(--s-6) var(--s-4) var(--s-5)}
.unwan-plate{display:inline-flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-6);border-radius:var(--r-pill);
  background:rgba(212,165,68,.10);box-shadow:inset 0 0 0 1.4px rgba(212,165,68,.5)}
.unwan-plate .ar{font-size:clamp(26px,4.4vw,38px);line-height:1.5}
.unwan-meta{display:flex;justify-content:center;gap:var(--s-4);margin-top:var(--s-3);flex-wrap:wrap}

/* --- basmala -------------------------------------------------------------- */
.basmala{text-align:center;padding-block:var(--s-5);border-bottom:1px solid var(--rule)}
.basmala .ar{cursor:default}

/* --- ayah rows ----------------------------------------------------------- */
/* the Arabic size lives on the row so the rosette can line up with the first line */
.ayah-row{display:flex;gap:var(--s-4);align-items:flex-start;--ar-size:clamp(28px,4.6vw,40px)}
[data-arsize="1"] .ayah-row{--ar-size:clamp(22px,3.6vw,32px)}
[data-arsize="3"] .ayah-row{--ar-size:clamp(34px,5.6vw,50px)}
[data-arsize="4"] .ayah-row{--ar-size:clamp(40px,6.6vw,60px)}
.ayah-body{flex:1;min-width:0}
.ayah-body > .ar{margin:0}
.rosette{
  flex:none;width:44px;height:44px;position:relative;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;padding:0;
  touch-action:manipulation;
  /* centered on the first Arabic line: its line box is 1.9 x the Arabic size */
  margin-top:max(0px, calc(var(--ar-size) * .95 - 22px));
}
.rosette svg{position:absolute;inset:0;width:100%;height:100%}
.rosette span{position:relative;font:600 12px/1 var(--mono);color:#17130E}

/* --- ayah content -------------------------------------------------------- */
.ayah{
  padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
  content-visibility:auto;contain-intrinsic-size:auto 220px;
  scroll-margin-top:72px; /* a linked ayah lands below the sticky top bar */
}
.ayah:last-child{border-bottom:0}
.ayah .tl-line{margin-top:var(--s-2);color:var(--ink-faint);font:400 13px/1.5 var(--ui)}
.ayah .tr-line{margin-top:var(--s-3);color:var(--ink-soft);font-size:16px;line-height:1.55}

/* hide/show transliteration and translation via class on reader */
#reader:not(.show-tl) .tl-line{display:none}
#reader:not(.show-tr) .tr-line{display:none}

/* --- word spans ---------------------------------------------------------- */
.w{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* the lit word: lapis on Day; on the dark grounds a light lapis, or the word disappears.
   reader.js also sets color:var(--lit-ink) inline so the gold hover rule cannot win. */
:root{--lit-ink:var(--lapis);--lit-bg:rgba(30,58,110,.08)}
:root[data-ground="night"],:root[data-ground="lamp"]{--lit-ink:#A9C1EE;--lit-bg:rgba(169,193,238,.14)}
@media (prefers-color-scheme:dark){
  :root:not([data-ground="day"]):not([data-ground="lamp"]){--lit-ink:#A9C1EE;--lit-bg:rgba(169,193,238,.14)}
}
.is-lit{color:var(--lit-ink);background:var(--lit-bg);border-radius:var(--r-xs)}

/* --- prev/next surah links ----------------------------------------------- */
.surah-nav{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding:var(--s-6) 0;flex-wrap:wrap;
}
.surah-nav a{
  font:600 14px/1 var(--ui);color:var(--gold-ui);text-decoration:none;
  padding:10px 16px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:background var(--t-quick) var(--ease);
}
.surah-nav a:hover{background:var(--surface)}

/* --- settings body ------------------------------------------------------- */
.settings-body{padding:var(--s-4)}
.setting-group{margin-bottom:var(--s-4)}
.setting-group .label{display:block;margin-bottom:var(--s-2)}
.setting-group .seg{flex-wrap:wrap}
/* two long reciter names: one full-width row each instead of a wrapped blob */
.setting-group .seg:has([data-reciter-btn]){display:flex;flex-direction:column;align-items:stretch;border-radius:var(--r-lg)}
.seg [data-reciter-btn]{text-align:start;white-space:normal;line-height:1.3}
/* the sidebar already lists the surahs on wide screens */
@media (min-width:880px){#surahs-btn{display:none}}

/* --- privacy ------------------------------------------------------------- */
.privacy-main{padding-block:var(--s-6) var(--s-8)}
.privacy-main h1{margin-bottom:var(--s-5)}
.privacy-main h2{margin-top:var(--s-5);margin-bottom:var(--s-2)}
.privacy-main p{margin:0 0 var(--s-3)}
.privacy-main ul{margin:0 0 var(--s-3);padding-left:var(--s-5)}
.privacy-main a{color:var(--gold-ui)}

/* --- footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding-block:var(--s-5);margin-top:var(--s-7)}
.footer-inner{display:flex;flex-direction:column;gap:var(--s-2)}
.footer-links{display:flex;gap:var(--s-4);flex-wrap:wrap}
.footer-links a{color:var(--ink-soft);text-decoration:none}
.footer-links a:hover{color:var(--ink)}
footer .caption a{color:var(--ink-soft)}

/* --- word bubble --------------------------------------------------------- */
.nuqt-bubble{
  position:absolute;z-index:50;
  display:flex;flex-direction:column;gap:var(--s-1);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:var(--s-3);box-shadow:var(--sh-3);
  max-width:280px;min-width:120px;
  pointer-events:none;
  animation:bubble-in var(--t-quick) var(--ease) both;
}
.nuqt-bubble.above{transform-origin:bottom center}
.nuqt-bubble.below{transform-origin:top center}
@keyframes bubble-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.nuqt-bubble-ar{font-family:var(--mushaf);font-size:22px;line-height:1.6;direction:rtl;text-align:right}
.nuqt-bubble-tl{font:400 13px/1.4 var(--ui);color:var(--ink-soft)}
.nuqt-bubble-meaning{font:400 14px/1.45 var(--ui);color:var(--gold-ui)}

/* --- toast --------------------------------------------------------------- */
.nuqt-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:200;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);box-shadow:var(--sh-3);
  font:400 14px/1.45 var(--ui);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-standard) var(--ease),transform var(--t-standard) var(--ease);
  max-width:min(400px,90vw);text-align:center;
}
.nuqt-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* --- rosette pulse when playing ------------------------------------------ */
.rosette[aria-pressed="true"] svg{
  animation:rosette-pulse 2s var(--ease) infinite;
}
@keyframes rosette-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.08);opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .rosette[aria-pressed="true"] svg{animation:none}
}