/* ==========================================================================
   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}
/* Google's official badge, used as supplied: the PNG carries its own clear space */
.play-badge{display:inline-block;margin-top:var(--s-3);border-radius:var(--r-sm)}
.play-badge img{display:block;height:64px;width:auto}
.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}
}

/* --- browsers from before 2020 ---------------------------------------------
   Old Chromium (Samsung Internet 9 on a 2017 Galaxy Tab S3, seen 2026-09-26) has no
   clamp/min/max, no flex gap, no `inset` and no padding-inline: the page touched the
   screen edges, the Arabic fell back to body size and the header collapsed to the
   left. Fixed values and margins stand in for them. Modern browsers skip this block. */
@supports not (width: clamp(1px, 2px, 3px)) {
  :root{--folio:20px}
  .wrap{padding-left:20px;padding-right:20px}
  .ayah-row{--ar-size:30px}
  [data-arsize="1"] .ayah-row{--ar-size:24px}
  [data-arsize="3"] .ayah-row{--ar-size:38px}
  [data-arsize="4"] .ayah-row{--ar-size:46px}
  .ar-lg{--ar-size:36px}
  .home-mark .ar{--ar-size:56px !important}
  .unwan-plate .ar{font-size:32px}
  .home-title{font:500 34px/1 var(--display)}
  .d-lg{font:400 44px/1.06 var(--display)}
  .d-md{font:400 36px/1.08 var(--display)}
  .d-sm{font:400 30px/1.10 var(--display)}
  .rosette{margin-top:6px}
  .sheet{width:85vw;max-width:360px}
  .sidebar-list{max-height:calc(100vh - 96px);padding-right:var(--s-2)}
  .nuqt-toast{max-width:90vw}
  body::before,.sheet-overlay,.sweepable::before,.rosette svg{top:0;right:0;bottom:0;left:0}
  .card--jadwal::after{top:5px;right:5px;bottom:5px;left:5px}
  /* its night mode darkens the leaf gradient behind gold text to near-invisible red;
     plain gold ink survives it (the gold surah names prove it) */
  .gold-text{background:none;color:var(--gold-ui);-webkit-text-fill-color:var(--gold-ui)}
  /* flex gap */
  .mark{margin-right:auto}
  .mark > * + *,.top-in > * + *,.top-actions > * + *,.top-btn > * + *,.btn > * + *{margin-left:var(--s-2)}
  .s-item > * + *,.row > * + *,.rail > * + *{margin-left:var(--s-3)}
  .unwan-plate > * + *,.unwan-meta > * + *,.ayah-row > * + *,.surah-nav > * + *,.footer-links > * + *{margin-left:var(--s-4)}
  .seg > * + *{margin-left:2px}
  .home-mark > * + *,.footer-inner > * + *{margin-top:var(--s-2)}
  .nuqt-bubble > * + *{margin-top:var(--s-1)}
  .stack-2 > * + *{margin-top:var(--s-2)} .stack-3 > * + *{margin-top:var(--s-3)} .stack-4 > * + *{margin-top:var(--s-4)}
  .stack-5 > * + *{margin-top:var(--s-5)} .stack-6 > * + *{margin-top:var(--s-6)} .stack-7 > * + *{margin-top:var(--s-7)}
}