/* Yadayeh — identity from the illuminated Persian mushaf (tazhib):
   ivory leaf, lapis lazuli, shell gold, ink. Ornament is drawn, never stock gradients. */
:root{
  --bg:#f4eddc;--leaf:#fbf7ec;--leaf2:#f1e8d2;--line:#dccfae;--ink:#1f1a12;--mute:#6f6450;
  --lapis:#1f3f7a;--lapis2:#2f5aa3;--gold:#b0822a;--gold2:#d9b25c;--rose:#b4493a;--mint:#3c7d5b;--amber:#c98a1c;
  --onlapis:#f6efd9;--shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px -10px rgba(70,50,10,.35);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23b0822a' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M36 6l9 21 21 9-21 9-9 21-9-21-21-9 21-9z'/%3E%3Cpath d='M36 16l14 6 6 14-6 14-14 6-14-6-6-14 6-14z'/%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='72' cy='0' r='10'/%3E%3Ccircle cx='0' cy='72' r='10'/%3E%3Ccircle cx='72' cy='72' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --saffron:var(--gold);--card:var(--leaf);--card2:var(--leaf2);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#15110b;--leaf:#1e1910;--leaf2:#271f14;--line:#3b3020;--ink:#efe6d0;--mute:#a8987a;
  --lapis:#5d86d6;--lapis2:#7ea0e4;--gold:#d6ab55;--gold2:#e8c77f;--rose:#e07a68;--mint:#76c39a;--amber:#e3a83f;
  --onlapis:#10131c;--shadow:0 10px 24px -14px rgba(0,0,0,.8);
}}
*{box-sizing:border-box}
html{background:var(--bg) var(--pattern);background-attachment:fixed}
body{margin:0;color:var(--ink);font:16px/1.85 Vazirmatn,Tahoma,sans-serif;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--gold2);color:#1f1a12}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px;max-width:780px;margin:auto}
.brand{display:flex;gap:10px;align-items:center;background:none;border:0;padding:0}
.brand img{filter:drop-shadow(0 2px 3px rgba(90,60,10,.25))}
.brand span{font-family:'Noto Nastaliq Urdu',Vazirmatn,serif;font-size:24px;line-height:1.4;color:var(--lapis);padding-top:4px}
.streak{color:var(--gold);font-weight:700;font-size:14px;background:var(--leaf);border:1px solid var(--line);border-radius:999px;padding:2px 12px}
.streak:empty{display:none}
main{max-width:780px;margin:0 auto;padding:0 16px 120px;outline:none;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* bottom tabs */
.tabs{position:fixed;bottom:12px;inset-inline:12px;max-width:460px;margin:auto;display:flex;gap:4px;background:color-mix(in srgb,var(--leaf) 92%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 12px 30px -14px rgba(60,40,10,.45);z-index:5;margin-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;color:var(--mute);padding:6px 4px;border-radius:13px;font-size:13px;transition:background .2s,color .2s}
.tabs svg{width:22px;height:22px}
.tabs button.on{color:var(--onlapis);background:var(--lapis)}

/* type */
h1{font-size:28px;margin:10px 0 0;font-weight:800;letter-spacing:-.3px}
h2{font-size:17px;margin:0;font-weight:700}
.mute{color:var(--mute)}
.small{font-size:13px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:13px;font-weight:600;margin-top:4px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold2))}

/* leaf cards: a thin double rule like a manuscript's jadval */
.card{position:relative;background:var(--leaf);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);border-radius:12px;pointer-events:none}
.layer{display:flex;gap:14px;align-items:flex-start}
.layer .dot{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;margin-top:2px;box-shadow:0 0 0 3px var(--leaf),0 0 0 4px var(--line)}
.layer .body{flex:1;min-width:0}

/* hero: progress shamseh */
.hero{display:flex;gap:18px;align-items:center;margin:8px 0 4px}
.ring{flex:none;width:112px;height:112px;position:relative}
.ring svg{width:100%;height:100%}
.ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:24px;font-weight:800;color:var(--lapis);line-height:1.1}
.ring b small{display:block;font-size:11px;color:var(--mute);font-weight:500}
.hero .meta{flex:1;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips span{background:var(--leaf);border:1px solid var(--line);border-radius:999px;padding:1px 10px;font-size:12.5px;color:var(--mute)}

.btn{background:var(--lapis);color:var(--onlapis);border:0;border-radius:12px;padding:10px 18px;font-weight:700;box-shadow:0 6px 14px -8px var(--lapis);transition:transform .12s,filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--leaf);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.list button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:var(--leaf2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-top:8px;text-align:right;transition:border-color .2s}
.list button:hover{border-color:var(--gold)}
label{display:block;margin:14px 0;color:var(--mute);font-size:14px}
input,select{width:100%;margin-top:6px;background:var(--leaf);border:1px solid var(--line);color:var(--ink);padding:11px 12px;border-radius:12px;font:inherit}
optgroup{font-weight:700;color:var(--gold)}
option{color:var(--ink);font-weight:400}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.choice{display:grid;gap:8px}
.choice button{background:var(--leaf);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:right;transition:border-color .2s,box-shadow .2s}
.choice button[aria-pressed=true]{border-color:var(--lapis);box-shadow:0 0 0 1px var(--lapis) inset;background:color-mix(in srgb,var(--lapis) 7%,var(--leaf))}
@media(min-width:620px){.choice{grid-template-columns:1fr 1fr}}

/* mushaf leaf: double gold rule, lapis band, gold corner medallions */
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);padding:8px 0;z-index:2}
.pagehead strong{font-size:15px}
.mushaf{position:relative;background:#fbf6e7;color:#1d1a12;border-radius:6px;padding:30px 24px;font-family:'Amiri Quran','Amiri',serif;font-size:clamp(22px,5.4vw,30px);line-height:2.35;text-align:justify;
  border:3px double #b0822a;box-shadow:0 0 0 5px #fbf6e7,0 0 0 8px #1f3f7a,0 0 0 10px #d9b25c,0 18px 40px -18px rgba(40,25,5,.6);margin:22px 10px}
.mushaf::before,.mushaf::after{content:"";position:absolute;width:24px;height:24px;background:radial-gradient(circle,#fbf6e7 0 3px,transparent 4px),conic-gradient(from 22.5deg,#1f3f7a 0 12.5%,#d9b25c 0 25%,#1f3f7a 0 37.5%,#d9b25c 0 50%,#1f3f7a 0 62.5%,#d9b25c 0 75%,#1f3f7a 0 87.5%,#d9b25c 0);border-radius:50%;box-shadow:0 0 0 2px #fbf6e7}
.mushaf::before{top:-22px;inset-inline-start:-22px}
.mushaf::after{bottom:-22px;inset-inline-end:-22px}
.surahname{display:block;text-align:center;font-size:.78em;margin:12px 0;padding:4px 0;color:#f7ecc8;background:linear-gradient(90deg,transparent,#1f3f7a 16%,#1f3f7a 84%,transparent);border-block:2px solid #d9b25c}
.surahname.basmala{background:none;border:0;color:#1d1a12;font-size:.85em}
.ayah{border-radius:6px;padding:0 2px;cursor:pointer;transition:background .2s}
.ayah:hover{background:rgba(176,130,42,.1)}
.ayah.lesson{background:rgba(217,178,92,.26)}
.ayah.playing{background:rgba(47,90,163,.2);box-shadow:0 0 0 1px rgba(47,90,163,.35)}
.num{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;font-family:Vazirmatn;font-size:.46em;font-weight:700;color:#6a4d12;margin:0 4px;vertical-align:middle;
  background:radial-gradient(circle,#fbf6e7 56%,transparent 57%),conic-gradient(#d9b25c 0 12.5%,#b0822a 0 25%,#d9b25c 0 37.5%,#b0822a 0 50%,#d9b25c 0 62.5%,#b0822a 0 75%,#d9b25c 0 87.5%,#b0822a 0);border-radius:50%}
.w.hide{color:transparent;background:#ece1c2;border-radius:4px}
.w.first{color:transparent;position:relative}
.w.first::before{content:attr(data-f);position:absolute;inset-inline-start:0;color:#1d1a12}
.controls{position:sticky;bottom:86px;background:color-mix(in srgb,var(--leaf) 94%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:12px;margin-top:14px;box-shadow:0 14px 30px -18px rgba(60,40,10,.55)}
.seg{display:flex;background:var(--leaf2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;background:none;border:0;padding:6px 8px;color:var(--mute);font-size:14px;border-radius:9px}
.seg button[aria-pressed=true]{background:var(--leaf);color:var(--lapis);font-weight:700;box-shadow:0 1px 4px rgba(60,40,10,.18)}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.grade button{background:var(--leaf2);border:1px solid var(--line);border-radius:12px;padding:9px 4px;font-size:14px}
.grade button.suggest{border-color:var(--mint);color:var(--mint);font-weight:700}
.w.ok{color:#1f6a45}
.w.miss{background:rgba(180,73,58,.32);border-radius:4px}
.w.wrong{background:rgba(201,138,28,.38);border-radius:4px}
#mic[aria-pressed=true]{border-color:var(--rose);color:var(--rose);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--rose) 18%,transparent)}}

/* map */
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:3px;background:var(--leaf);border:1px solid var(--line);border-radius:16px;padding:12px}
.heat button{aspect-ratio:1;border:0;border-radius:4px;padding:0;background:var(--leaf2);font-size:0;transition:transform .12s}
.heat button:hover{transform:scale(1.35);position:relative;z-index:1}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin:12px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:4px;vertical-align:middle}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stats div{background:var(--leaf);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.stats b{display:block;font-size:26px;color:var(--lapis)}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--lapis);color:var(--onlapis);padding:9px 18px;border-radius:999px;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);z-index:9;animation:rise .25s ease both}
hr{border:0;height:1px;background:var(--line)}
/* shelf of 30 volumes */
.shelf{display:grid;grid-template-columns:repeat(10,1fr);gap:6px 5px;padding:14px 12px 0;background:var(--leaf);border:1px solid var(--line);border-radius:16px;margin-top:12px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rowh,118px) - 10px),color-mix(in srgb,var(--gold) 55%,var(--line)) calc(var(--rowh,118px) - 10px) calc(var(--rowh,118px) - 4px),transparent calc(var(--rowh,118px) - 4px) calc(var(--rowh,118px) + 6px))}
.vol{position:relative;height:108px;margin-bottom:10px;border:0;border-radius:4px 4px 2px 2px;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden;
  background:linear-gradient(to top,var(--gold2) 0 calc(var(--fill)*100%),transparent 0),linear-gradient(90deg,rgba(0,0,0,.18),transparent 22%,transparent 78%,rgba(0,0,0,.18)),var(--lapis);
  color:var(--onlapis);box-shadow:inset 0 0 0 1px rgba(217,178,92,.5);transition:transform .2s}
.vol:not(.inpath){filter:saturate(.55) brightness(.93)}
.vol::after{content:"";position:absolute;inset:auto 0 0 0;height:calc(var(--firm)*100%);background:linear-gradient(to top,#b0822a,#e8c77f);opacity:.9}
.vol:hover{transform:translateY(-3px)} .vol.open{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--gold2),0 8px 16px -8px rgba(0,0,0,.5)}
.vol .jn{position:relative;z-index:1;font-weight:800;font-size:14px}
.vol .jname{position:relative;z-index:1;writing-mode:vertical-rl;font-family:'Amiri Quran',serif;font-size:13px;line-height:1;opacity:.9;max-height:70px;overflow:hidden}
.ribbon{position:absolute;z-index:2;top:0;inset-inline-start:3px;background:var(--rose);color:#fff;font:700 10px Vazirmatn;font-style:normal;padding:3px 3px 6px;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.arabic{font-family:'Amiri Quran',serif;font-weight:400}
.pages{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:10px}
.pg{aspect-ratio:3/4;border:1px solid var(--line);border-radius:4px;background:var(--leaf2);font-size:11px;color:var(--mute);padding:0}
.pg.path{background:color-mix(in srgb,var(--lapis) 10%,var(--leaf2))} .pg.new{background:var(--gold2);color:#2a1d05;border-color:var(--gold)}
.pg.set{background:var(--lapis2);color:#fff} .pg.firm{background:linear-gradient(135deg,#e8c77f,#b0822a);color:#2a1d05;box-shadow:0 0 0 1px #1f3f7a inset}
.pg.due{background:var(--rose);color:#fff}
.legend i.pg{width:14px;height:14px;aspect-ratio:auto;display:inline-block;vertical-align:middle}
@media(max-width:520px){.shelf{gap:6px 3px;padding:12px 8px 0}.vol{height:96px}.vol .jname{font-size:11px;max-height:58px}.shelf{--rowh:106px}.pages{grid-template-columns:repeat(5,1fr)}}
/* linking drill */
.mushaf.seam{margin:10px 6px;padding:18px 16px;font-size:clamp(20px,5vw,28px);line-height:2.1;text-align:center}
.mushaf.seam.next{box-shadow:0 0 0 4px #fbf6e7,0 0 0 6px #1f3f7a,0 0 0 8px #d9b25c}
.mushaf.seam::before,.mushaf.seam::after{display:none}
.progressbar{height:6px;border-radius:9px;background:var(--leaf2);overflow:hidden} .progressbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .4s}
.done{text-align:center;padding-top:30px}.done .ring{margin:0 auto 12px;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--gold2),var(--gold),var(--gold2));padding:8px}
.done .ring b{position:static;width:100%;height:100%;border-radius:50%;background:var(--leaf)}
/* mutashabihat */
.blank{display:inline-block;min-width:3em;border-bottom:2px dashed #b0822a;color:#b0822a}
.arabicchoice{font-family:'Amiri Quran',serif;font-size:21px;line-height:1.9;text-align:center!important}
.arabicchoice.right{border-color:var(--mint)!important;background:color-mix(in srgb,var(--mint) 14%,var(--leaf))!important}
.arabicchoice.wrong{border-color:var(--rose)!important;background:color-mix(in srgb,var(--rose) 14%,var(--leaf))!important}
.simlist div{padding:8px 10px;border-radius:10px;margin-top:6px;background:var(--leaf2)} .simlist div.me{box-shadow:0 0 0 2px var(--gold2) inset}
.simlist p{margin:0;font-family:'Amiri Quran',serif;font-size:19px;line-height:1.9} .simlist mark{background:color-mix(in srgb,var(--gold2) 45%,transparent);color:inherit;border-radius:4px;padding:0 3px}
/* account */
.acct{position:relative;width:40px;height:40px;border-radius:50%;background:var(--leaf);border:1px solid var(--line);color:var(--lapis);display:grid;place-items:center}
.acct svg{width:22px;height:22px}
#syncdot{position:absolute;top:1px;inset-inline-end:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--leaf)}
#syncdot.off{background:var(--line)} #syncdot.on{background:var(--mint)} #syncdot.busy{background:var(--gold);animation:pulse 1s infinite}
.profile{display:flex;gap:16px;align-items:center;margin:12px 0}
.avatar{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--onlapis);
  background:radial-gradient(circle,var(--lapis) 58%,transparent 60%),conic-gradient(var(--gold2) 0 12.5%,var(--gold) 0 25%,var(--gold2) 0 37.5%,var(--gold) 0 50%,var(--gold2) 0 62.5%,var(--gold) 0 75%,var(--gold2) 0 87.5%,var(--gold) 0)}
.linkbtn{background:none;border:0;padding:0;color:var(--lapis);text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){.controls{position:static}.mushaf{padding:24px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- the lined page: 15 justified lines, exactly as the Madinah mushaf sets them ---- */
.leafwrap{perspective:1600px}
.mushaf.lined{container-type:inline-size;padding:26px 18px 34px;text-align:center}
.mushaf .line{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;font-size:clamp(13px,5.05cqi,30px);line-height:2.2}
.mushaf .line.short{justify-content:center;gap:.35em}
.mushaf .flow{text-align:justify}
.mushaf .w{border-radius:5px;padding:0 1px;cursor:pointer;transition:background .2s,color .3s}
.mushaf .w.hov,.mushaf .num.hov{background:rgba(176,130,42,.12)}
.mushaf .w.lesson{background:rgba(217,178,92,.24)}
.mushaf .w.playing{background:rgba(47,90,163,.2);color:#16346b}
.mushaf .w.now{background:#1f3f7a;color:#fbf6e7;box-shadow:0 0 0 2px #d9b25c;transition:background .08s}
.mushaf .num.playing{filter:hue-rotate(190deg) saturate(1.4)}
.sura-band{position:relative;margin:4px 0;height:2.1em;display:grid;place-items:center;font-size:clamp(13px,4.4cqi,26px);
  background:linear-gradient(#d9b25c,#d9b25c) top/100% 2px no-repeat,linear-gradient(#d9b25c,#d9b25c) bottom/100% 2px no-repeat,
  radial-gradient(ellipse at center,#2f5aa3,#1f3f7a 70%);border-radius:3px}
.sura-band span{color:#f7ecc8;padding:0 1.4em;background:radial-gradient(ellipse,#1f3f7a 60%,transparent 72%);border-radius:50%}
.sura-band::before,.sura-band::after{content:"";position:absolute;top:50%;width:1.3em;height:1.3em;translate:0 -50%;border-radius:50%;
  background:radial-gradient(circle,#fbf6e7 0 22%,transparent 24%),conic-gradient(#d9b25c 0 12.5%,#b0822a 0 25%,#d9b25c 0 37.5%,#b0822a 0 50%,#d9b25c 0 62.5%,#b0822a 0 75%,#d9b25c 0 87.5%,#b0822a 0)}
.sura-band::before{inset-inline-start:.5em}.sura-band::after{inset-inline-end:.5em}
.basmala{font-size:clamp(13px,4.8cqi,28px);line-height:2.1;color:#1d1a12}
.folio{position:absolute;bottom:4px;left:50%;translate:-50% 0;font:600 12px Vazirmatn;color:#8a6d2a;background:#fbf6e7;padding:0 10px;border-radius:999px;border:1px solid #d9b25c}
/* illumination grows with what you hold: memorized pages earn their gold */
.mushaf.illum{box-shadow:0 0 0 5px #fbf6e7,0 0 0 8px #1f3f7a,0 0 0 11px #d9b25c,0 0 26px 6px rgba(217,178,92,.35),0 18px 40px -18px rgba(40,25,5,.6)}
.mushaf.illum-full{box-shadow:0 0 0 5px #fbf6e7,0 0 0 8px #1f3f7a,0 0 0 13px #d9b25c,0 0 0 15px #1f3f7a,0 0 40px 10px rgba(217,178,92,.5),0 18px 40px -18px rgba(40,25,5,.6)}
.mushaf.illum-full::before,.mushaf.illum-full::after{animation:glint 4s ease-in-out infinite}
@keyframes glint{50%{filter:brightness(1.35) drop-shadow(0 0 6px #e8c77f)}}
.mushaf.turn-l{animation:turnL .26s ease-in forwards;transform-origin:left center}
.mushaf.turn-r{animation:turnR .26s ease-in forwards;transform-origin:right center}
@keyframes turnL{to{transform:rotateY(-70deg);opacity:0}}
@keyframes turnR{to{transform:rotateY(70deg);opacity:0}}
.mushaf{animation:open .35s ease-out both}
@keyframes open{from{opacity:0;transform:scale(.985)}}

/* ---- audit additions ---- */
.sajda{font-family:'Amiri Quran',serif;color:#2f6b4f;font-size:.8em;margin-inline:2px}
.sajda.wajib{color:#a3352b}
.steps{margin:4px 0 10px;padding-inline-start:20px;color:var(--mute);line-height:1.9}
.mushaf.lined.big{text-align:justify}
.mushaf.lined.big .line{display:inline;white-space:normal;font-size:clamp(22px,6.2vw,30px);line-height:2.3}
.mushaf.lined.big .line>*{margin-inline:.12em}
.mushaf.lined.big .sura-band,.mushaf.lined.big .basmala{font-size:clamp(20px,5.6vw,28px)}
@media(max-width:520px){.grade{grid-template-columns:repeat(2,1fr)}}