/* styles/hold-win.css — the Hold menu's windows (v1322), ported 1:1 from the owner's mock
   (Hold Menu, Squares v22) onto the kit's tokens.
   CALLED BY: zero.html (<link>), for the markup modules/tools/hold-*.js write into
   #ayah-pop's window panes. A window replaces the menu in the same sheet (#ayah-pop[data-win])
   and the sheet takes its group's tone: Study blue, Drill green, Understand red.
   Mapping from the mock: --card → --al-card · --fill → --al-card2 · --ink/--mut → --al-ink/--al-mut ·
   --gold → --al-acc-txt / --al-acc-soft · --st/--dr/--qr → --hm-st/--hm-dr/--hm-qr · mark colours → --trap-*.
   The mock's 13–15px captions sit at the kit's 16px floor (--al-floor). */

/* ── the sheet as a window ─────────────────────────────────────────────── */
#ayah-pop .hm-page.hm-st { --hw-g:var(--hm-st); --hw-gs:var(--hm-st-soft); }
#ayah-pop .hm-page.hm-dr { --hw-g:var(--hm-dr); --hw-gs:var(--hm-dr-soft); }
#ayah-pop .hm-page.hm-qr { --hw-g:var(--hm-qr); --hw-gs:var(--hm-qr-soft); }
#ayah-pop .hm-page.hm-ls { --hw-g:var(--al-acc); --hw-gs:var(--al-acc-ink); }
#ayah-pop[data-win="mark"] { background:color-mix(in srgb, var(--hm-st-soft) 72%, var(--al-surf)); }
#ayah-pop[data-win="words"], #ayah-pop[data-win="pairs"], #ayah-pop[data-win="plan"] { background:color-mix(in srgb, var(--hm-st-soft) 72%, var(--al-surf)); }
#ayah-pop[data-win="tr"], #ayah-pop[data-win="tf"], #ayah-pop[data-win="wbw"] { background:color-mix(in srgb, var(--hm-qr-soft) 70%, var(--al-surf)); }
#ayah-pop[data-win="drill"], #ayah-pop[data-win="write"] { background:color-mix(in srgb, var(--hm-dr-soft) 72%, var(--al-surf)); }
@media (min-width:744px) {
  #ayah-pop[data-win]:not([data-win=""]) { width:min(92vw, 720px); }
  #ayah-pop[data-win]:not([data-win=""]) .al-panes { grid-template-columns:minmax(0, 1fr); }
  #ayah-pop[data-win]:not([data-win=""]) .al-pane.al-stage { display:none; }   /* al.css keeps the stage beside a page from 744; a window replaces it */
  #ayah-pop[data-win]:not([data-win=""]) .hw-ph .al-back { display:grid; }
}
:is(#ayah-pop, .mz-und-host) .hw-ph { display:flex; align-items:center; gap:calc(var(--al-u) * 2); padding:var(--al-u) var(--al-gut) calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw-ph .al-back { flex:none; width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; background:var(--al-card2); color:var(--al-ink); border:0; }
:is(#ayah-pop, .mz-und-host) .hw-ph .wic { flex:none; width:40px; height:40px; border-radius:var(--al-rctl); display:grid; place-items:center; background:var(--hw-g, var(--al-card2)); color:var(--hw-gs, var(--al-ink2)); }
:is(#ayah-pop, .mz-und-host) .hw-ph .wic svg.ic { width:20px; height:20px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw-tt { display:flex; flex-direction:column; min-width:0; }
:is(#ayah-pop, .mz-und-host) .hw-ph .al-title { margin:0; padding:0; font:700 var(--al-act)/1.2 var(--f-ui); color:var(--hw-g, var(--al-ink)); }
:is(#ayah-pop, .mz-und-host) .hw-sub { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw-toast { position:absolute; left:50%; bottom:calc(var(--al-u) * 4 + env(safe-area-inset-bottom, 0px)); z-index:5; transform:translate(-50%, 12px); max-width:calc(100% - var(--al-gut) * 2);
  padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 4); border-radius:var(--al-rpill); background:var(--al-ink); color:var(--al-surf); font:600 var(--al-floor)/1.2 var(--f-ui);
  opacity:0; pointer-events:none; transition:opacity var(--al-d1) var(--al-eo), transform var(--al-d2) var(--al-eo); }
:is(#ayah-pop, .mz-und-host) .hw-toast.on { opacity:1; transform:translate(-50%, 0); }

/* ── the window body ───────────────────────────────────────────────────── */
:is(#ayah-pop, .mz-und-host) .hw { gap:0; }
:is(#ayah-pop, .mz-und-host) .hw > * { flex:none; }   /* the list is a flex column: a section must never shrink under its content */
:is(#ayah-pop, .mz-und-host) .hw button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
:is(#ayah-pop, .mz-und-host) .hw button:focus-visible { outline:2px solid var(--al-focus); outline-offset:2px; }
:is(#ayah-pop, .mz-und-host) .hw [lang="ar"] { font-family:var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .hubnav { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .hubnav button { min-height:52px; border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); padding:0 calc(var(--al-u) * 1.5); font:600 var(--al-floor)/1.1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .hubnav button.on { background:var(--hw-g); color:var(--hw-gs); box-shadow:none; }
:is(#ayah-pop, .mz-und-host) .hw .hubnav svg.ic { width:19px; height:19px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .sec { display:grid; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .sec::after { content:none; }   /* al.css draws a Head's trailing rule on .sec; a window section is a card, not a Head */
:is(#ayah-pop, .mz-und-host) .hw .sec.fu { box-shadow:0 0 0 1.5px color-mix(in srgb, var(--hw-g) 30%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .hd { display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .hd b { font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .hd span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .hd.sm span { font-weight:600; }
:is(#ayah-pop, .mz-und-host) .hw .hint { font:500 var(--al-floor)/1.4 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .src { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
/* the āyah as words: a lit word is the trap */
:is(#ayah-pop, .mz-und-host) .hw .ink { display:flex; flex-wrap:wrap; direction:rtl; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .ink button { font:var(--al-ar2)/1.75 var(--f-quran); padding:0 calc(var(--al-u) * 1.75); min-height:var(--al-tap); border-radius:var(--al-rctl); }
:is(#ayah-pop, .mz-und-host) .hw .ink button.on { background:var(--al-acc-soft); box-shadow:inset 0 -3px 0 var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .ink.gaps { align-items:center; gap:0; row-gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .ink .gw { font:var(--al-ar2)/1.75 var(--f-quran); padding:0 2px; }
:is(#ayah-pop, .mz-und-host) .hw .gap { width:22px; min-height:var(--al-tap); display:grid; place-items:center; border-radius:var(--al-rctl); }
:is(#ayah-pop, .mz-und-host) .hw .gap i { width:2px; height:26px; border-radius:2px; background:color-mix(in srgb, var(--al-ink) 18%, transparent); transition:all .15s; }
:is(#ayah-pop, .mz-und-host) .hw .gap.on i { width:6px; background:var(--trap-hesit); }
/* what happened */
:is(#ayah-pop, .mz-und-host) .hw .marks { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .marks button { display:flex; align-items:center; gap:calc(var(--al-u) * 2); min-height:46px; padding:0 calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1.1 var(--f-ui); text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .marks button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .dot { width:14px; height:14px; border-radius:50%; flex:none; background:var(--trp-c); }
:is(#ayah-pop, .mz-und-host) .hw .colors { display:grid; grid-template-columns:repeat(7, var(--al-tap)); justify-content:space-between; gap:calc(var(--al-u) * 1.5); }
@media (min-width:600px) { :is(#ayah-pop, .mz-und-host) .hw .colors { justify-content:start; gap:calc(var(--al-u) * 2.5); } }
:is(#ayah-pop, .mz-und-host) .hw .colors button { width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; background:var(--trp-c); box-shadow:inset 0 0 0 .5px var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .colors button.on { box-shadow:0 0 0 3px var(--al-card), 0 0 0 5px var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .colors .none { background:var(--al-card2); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .colors .none svg.ic { width:18px; height:18px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .tin { min-height:46px; width:100%; border:0; border-radius:var(--al-rctl); background:var(--al-card2); padding:0 calc(var(--al-u) * 3); font:500 var(--al-floor)/1 var(--f-ui); color:var(--al-ink); box-sizing:border-box; }
:is(#ayah-pop, .mz-und-host) .hw .tin.ar { font:var(--al-ar2)/1 var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .tin:focus { outline:2px solid var(--hw-g); outline-offset:0; }
/* the follow-ups */
:is(#ayah-pop, .mz-und-host) .hw .qrow { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .ql { font:600 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .opts { display:flex; flex-wrap:wrap; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .opts button { min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3.5); border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1.15 var(--f-ui); text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .opts button.on { background:var(--hw-g); color:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .opts.in { padding:2px 0 var(--al-u) 32px; }
:is(#ayah-pop, .mz-und-host) .hw .lnk { font:600 var(--al-floor)/1 var(--f-ui); color:var(--hm-dr); }
:is(#ayah-pop, .mz-und-host) .hw .lnk.in { display:inline; min-height:0; padding:0; text-decoration:underline; }
:is(#ayah-pop, .mz-und-host) .hw .cands { display:grid; gap:calc(var(--al-u) * 1.5); max-height:380px; overflow:auto; }
:is(#ayah-pop, .mz-und-host) .hw .cand { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); align-items:start; text-align:left; padding:calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); width:100%; }
:is(#ayah-pop, .mz-und-host) .hw .rad { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--al-ink) 22%, transparent); margin-top:2px; }
:is(#ayah-pop, .mz-und-host) .hw .cand.on { background:color-mix(in srgb, var(--trap-ayah) 12%, var(--al-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--trap-ayah) 40%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .cand.on .rad { box-shadow:inset 0 0 0 7px var(--trap-ayah); }
:is(#ayah-pop, .mz-und-host) .hw .cm { display:grid; gap:2px; min-width:0; }
:is(#ayah-pop, .mz-und-host) .hw .cm b { font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .cm i { font:500 var(--al-floor)/1.2 var(--f-ui); font-style:normal; color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .ar1 { font:var(--al-ar3)/1.8 var(--f-quran); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .partner { display:grid; gap:var(--al-u); padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:color-mix(in srgb, var(--trap-ayah) 10%, var(--al-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--trap-ayah) 35%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .phd { display:flex; align-items:center; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .phd b { font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .phd span { font:500 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .px { width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .px svg.ic { width:17px; height:17px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .ar2 { font:var(--al-ar2)/1.9 var(--f-quran); direction:rtl; text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .df { color:var(--hm-qr); }
:is(#ayah-pop, .mz-und-host) .hw .forw { display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--al-u) * 1.5); direction:rtl; }
:is(#ayah-pop, .mz-und-host) .hw .forw span { font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); direction:ltr; }
:is(#ayah-pop, .mz-und-host) .hw .forw button { font:var(--al-ar2)/1.7 var(--f-quran); padding:0 calc(var(--al-u) * 2.5); min-height:var(--al-tap); border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .forw button.on { background:var(--al-acc-soft); box-shadow:inset 0 -3px 0 var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .forms { display:flex; flex-wrap:wrap; direction:rtl; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .forms button { display:grid; justify-items:center; gap:0; padding:var(--al-u) calc(var(--al-u) * 3) calc(var(--al-u) * 2); min-height:56px; border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .forms .w { font:var(--al-ar2)/2 var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .forms .s { font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); direction:ltr; margin-top:2px; }
:is(#ayah-pop, .mz-und-host) .hw .forms button.on { background:var(--hw-g); color:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .forms button.on .s { color:inherit; opacity:.8; }
:is(#ayah-pop, .mz-und-host) .hw .arw { font:var(--al-ar3)/1.5 var(--f-quran); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .pbtn { justify-self:start; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3.5); border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .pbtn.on { background:var(--al-acc); color:var(--al-acc-ink); }
:is(#ayah-pop, .mz-und-host) .hw .pbtn.ask { display:inline-flex; align-items:center; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .pbtn.ask svg.ic { width:17px; height:17px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .ai:empty { display:none; }
:is(#ayah-pop, .mz-und-host) .hw .ai { display:grid; gap:calc(var(--al-u) * 2); }
/* tajwīd rules */
:is(#ayah-pop, .mz-und-host) .hw .rules { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .rule { border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .rule.on { background:color-mix(in srgb, var(--trap-tajwid) 12%, var(--al-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--trap-tajwid) 40%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .rhead { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); align-items:center; padding:calc(var(--al-u) * 2.5); width:100%; text-align:left; min-height:var(--al-tap); }
:is(#ayah-pop, .mz-und-host) .hw .rule.on .rad { box-shadow:inset 0 0 0 7px var(--trap-tajwid); }
:is(#ayah-pop, .mz-und-host) .hw .rt b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .rt span { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
/* work on it · status · remove */
:is(#ayah-pop, .mz-und-host) .hw .sp2 { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .spb { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); align-items:center; padding:calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--hw-gs); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hw-g) 26%, transparent); text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .ri { width:40px; height:40px; border-radius:var(--al-rctl); display:grid; place-items:center; background:var(--hw-g); color:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .ri svg.ic { width:20px; height:20px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .spb b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .spb span span { display:block; margin-top:2px; font:500 var(--al-floor)/1.25 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .stat { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); align-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .stat .ri { background:var(--al-card2); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .stat b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .stat span:not(.ri) { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .rm { display:inline-flex; align-items:center; gap:calc(var(--al-u) * 2); justify-self:start; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rctl); font:600 var(--al-floor)/1 var(--f-ui); color:var(--trap-ayah); }
:is(#ayah-pop, .mz-und-host) .hw .rm svg.ic { width:17px; height:17px; margin:0; }
/* scholars */
:is(#ayah-pop, .mz-und-host) .hw .pair { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .ln { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:calc(var(--al-u) * 2.5); align-items:center; padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .ln.me { background:var(--al-acc-soft); }
:is(#ayah-pop, .mz-und-host) .hw .ln .rf { font:700 var(--al-floor)/1 var(--f-ui); white-space:nowrap; }
:is(#ayah-pop, .mz-und-host) .hw .ln .tx { font:var(--al-ar2)/1.9 var(--f-quran); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#ayah-pop, .mz-und-host) .hw .sh { color:var(--al-acc-txt); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
:is(#ayah-pop, .mz-und-host) .hw .dabit { font:500 var(--al-floor)/1.5 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .dabit-ar { font:var(--al-ar2)/1.9 var(--f-quran); direction:rtl; text-align:right; color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .sugg { display:grid; gap:calc(var(--al-u) * 1.5); }
/* my list, by sūrah */
:is(#ayah-pop, .mz-und-host) .hw .mine { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .mine .row { display:grid; grid-template-columns:14px minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); text-align:left; width:100%; min-height:var(--al-tap); }
:is(#ayah-pop, .mz-und-host) .hw .mine .refs { font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .mine .k { font:500 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); white-space:nowrap; }
:is(#ayah-pop, .mz-und-host) .hw .mine .tx { grid-column:2 / 4; font:var(--al-ar3)/1.8 var(--f-quran); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .mine .sgrp { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); padding:calc(var(--al-u) * 2.5) 2px 2px; }
:is(#ayah-pop, .mz-und-host) .hw .mine .snum { min-width:30px; height:30px; border-radius:var(--al-rctl); background:var(--al-ink); color:var(--al-surf); display:grid; place-items:center; font:700 var(--al-floor)/1 var(--f-ui); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .mine .sgrp b { font:700 var(--al-floor)/1.2 var(--f-ui); flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .mine .sgrp > span:last-child { font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .mine .row.new { box-shadow:inset 0 0 0 1.5px var(--hw-g); }
body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .marks button.on { background:color-mix(in srgb, var(--al-ink) 22%, var(--al-card)); color:var(--al-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 34%, transparent); }
body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .mine .snum { background:color-mix(in srgb, var(--al-ink) 22%, var(--al-card)); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .tin.ar::placeholder { font:500 var(--al-floor)/1 var(--f-ui); }

/* ── Memorize (v1323): the Counter wizard, Backward, Forward ──────────────── */
:is(#ayah-pop, .mz-und-host) .hw .modes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .modes button { min-height:78px; border-radius:var(--al-rctl); background:var(--al-card2); display:grid; justify-items:center; align-content:center; gap:calc(var(--al-u) * 1.5); font:600 var(--al-floor)/1.1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .modes button svg.ic { width:22px; height:22px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .modes button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .mdesc { font:500 var(--al-floor)/1.45 var(--f-ui); color:var(--al-ink2); min-height:var(--al-tap); }
:is(#ayah-pop, .mz-und-host) .hw .far { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .far.f3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
:is(#ayah-pop, .mz-und-host) .hw .far.fx { grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
:is(#ayah-pop, .mz-und-host) .hw .far button { min-height:48px; border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1.15 var(--f-ui); display:grid; align-content:center; justify-items:center; gap:2px; padding:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .far button small { font:500 var(--al-floor)/1 var(--f-ui); opacity:.75; font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .far button.on { background:var(--hw-g); color:var(--hw-gs); }
@media (max-width:420px) { :is(#ayah-pop, .mz-und-host) .hw .far:not(.f3):not(.fx) { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
:is(#ayah-pop, .mz-und-host) .hw .pick { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .prow { display:grid; grid-template-columns:76px minmax(0, 1fr) 76px; gap:calc(var(--al-u) * 1.5); align-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .prow .pl { display:flex; align-items:center; gap:calc(var(--al-u) * 1.5); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .prow .pl svg.ic { width:18px; height:18px; margin:0; color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .msel { min-height:var(--al-tap); width:100%; min-width:0; padding:0 calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); border:0; background:var(--al-card2); color:var(--al-ink); font:600 var(--al-floor)/1 var(--f-ui); -webkit-appearance:none; appearance:none; }
:is(#ayah-pop, .mz-und-host) .hw .msel.ay { text-align:center; font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .dmref { font:600 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); text-align:center; margin-top:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .dmv { padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3.5) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hw-g) 26%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .dm-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .dm-a { font:var(--al-ar2)/2 var(--f-quran); direction:rtl; text-align:right; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
:is(#ayah-pop, .mz-und-host) .hw .dm-k { order:2; font:700 var(--al-floor)/1 var(--f-ui); color:var(--al-acc-txt); padding:calc(var(--al-u) * 1.25) calc(var(--al-u) * 1.75); border-radius:var(--al-rctl); background:var(--al-acc-soft); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .dm-orn { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2.5); margin:var(--al-u) 0 2px; }
:is(#ayah-pop, .mz-und-host) .hw .dm-orn i { flex:1; max-width:110px; height:1px; background:color-mix(in srgb, var(--al-acc-txt) 40%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .dm-orn b { color:var(--al-acc-txt); font:600 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .dm-meta { text-align:center; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); margin-bottom:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .dm-meta b { color:var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .times { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 4.5); padding:calc(var(--al-u) * 1.5) 0; }
:is(#ayah-pop, .mz-und-host) .hw .times .step { width:52px; height:52px; border-radius:50%; background:var(--al-card2); font:500 28px/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .times .tn { min-width:110px; text-align:center; font:700 44px/1 var(--f-ui); font-variant-numeric:tabular-nums; display:grid; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .times .tn small { font:500 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .quick { display:flex; gap:calc(var(--al-u) * 1.5); justify-content:center; flex-wrap:wrap; }
:is(#ayah-pop, .mz-und-host) .hw .quick button { min-height:var(--al-tap); min-width:54px; padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rpill); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .quick button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .bigin { display:grid; justify-items:center; gap:2px; padding:calc(var(--al-u) * 1.5) 0 2px; cursor:text; }
:is(#ayah-pop, .mz-und-host) .hw .bigin input { width:5.2ch; border:0; background:transparent; text-align:center; font:700 56px/1.05 var(--f-ui); color:var(--al-ink); font-variant-numeric:tabular-nums; border-bottom:2px dashed color-mix(in srgb, var(--al-ink) 22%, transparent); border-radius:0; padding:0; caret-color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .bigin input:focus { outline:none; border-bottom-color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .bigin span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .presets { display:flex; justify-content:center; gap:calc(var(--al-u) * 1.5); flex-wrap:wrap; }
:is(#ayah-pop, .mz-und-host) .hw .presets button { min-height:var(--al-tap); min-width:60px; padding:0 calc(var(--al-u) * 2.5); border-radius:var(--al-rpill); background:transparent; box-shadow:inset 0 0 0 1px var(--al-line); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .presets button.on { background:var(--hw-gs); color:var(--hw-g); box-shadow:inset 0 0 0 1.5px var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .tread { display:grid; justify-items:center; gap:2px; padding:calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--hw-gs); margin-top:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .tread b { font:700 var(--al-act)/1.2 var(--f-ui); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .tread span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .tread.pop { animation:hwtpop .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes hwtpop { 0% { transform:scale(.96); opacity:.4; } 100% { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { :is(#ayah-pop, .mz-und-host) .hw .tread.pop { animation:none; } }
:is(#ayah-pop, .mz-und-host) .hw .lnk { justify-self:center; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 2); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .pedit { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .pedit input { min-height:var(--al-tap); min-width:0; border:0; border-radius:var(--al-rctl); background:var(--al-card2); text-align:center; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .own { display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--al-u) * 2) calc(var(--al-u) * 2.5); font:500 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .stp { display:inline-flex; align-items:center; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .stp button { width:var(--al-tap); height:var(--al-tap); border-radius:var(--al-rctl); background:var(--al-card2); font:500 22px/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .stp b { min-width:var(--al-tap); text-align:center; font:700 var(--al-act)/1 var(--f-ui); color:var(--al-ink); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .stp i { font-style:normal; font-size:var(--al-floor); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .rl { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .rl.cfg { margin-top:var(--al-u); padding-top:calc(var(--al-u) * 2); border-top:1px solid var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .rrow { display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; min-height:56px; padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); text-align:left; width:100%; }
:is(#ayah-pop, .mz-und-host) .hw .rrow.st { background:transparent; padding:2px 0; }
:is(#ayah-pop, .mz-und-host) .hw .rrow .ri { background:var(--al-card); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .rrow.st .ri { background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .rrow .rt b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .rrow .rt span { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .rrow.on { background:var(--hw-gs); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hw-g) 26%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .rrow.on .ri { color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .rrow.on .rad { box-shadow:inset 0 0 0 7px var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wiz { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(var(--al-u) * 1.5); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .wiz button { display:flex; align-items:center; gap:calc(var(--al-u) * 1.5); min-height:var(--al-tap); padding:0 calc(var(--al-u) * 2); border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); font:600 var(--al-floor)/1.1 var(--f-ui); color:var(--al-mut); text-align:left; min-width:0; }
:is(#ayah-pop, .mz-und-host) .hw .wiz button i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 var(--al-floor)/1 var(--f-ui); font-style:normal; background:var(--al-card2); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .wiz button.cur { color:var(--al-ink); box-shadow:0 0 0 1.5px var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wiz button.cur i { background:var(--hw-g); color:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .wiz button.done { color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .wiz button.done i { background:var(--hw-gs); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wiz button:disabled { opacity:.6; cursor:default; }
:is(#ayah-pop, .mz-und-host) .hw .wnav { display:flex; gap:calc(var(--al-u) * 2); padding-bottom:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .wnav .pbtn { min-height:52px; padding:0 calc(var(--al-u) * 4.5); }
:is(#ayah-pop, .mz-und-host) .hw .go-big { flex:1; min-height:52px; border-radius:var(--al-rctl); background:var(--hw-g); color:var(--hw-gs); font:700 var(--al-floor)/1 var(--f-ui); width:100%; }
:is(#ayah-pop, .mz-und-host) .hw .go-big:disabled { opacity:.4; }
:is(#ayah-pop, .mz-und-host) .hw .startrow { display:grid; gap:calc(var(--al-u) * 2); padding-bottom:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .startrow > span { text-align:center; font:600 var(--al-floor)/1.3 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .pvs { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .pstep { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:calc(var(--al-u) * 2.5); padding:var(--al-u) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .pstep .pn { font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); white-space:nowrap; }
:is(#ayah-pop, .mz-und-host) .hw .pstep .pws { font:var(--al-ar2)/1.9 var(--f-quran); direction:rtl; text-align:right; color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .cont { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 2.5) calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px color-mix(in srgb, var(--hw-g) 26%, transparent); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .cont .cgo { flex:1; min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--al-u) calc(var(--al-u) * 2.5); align-items:center; text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .cont .cic { grid-row:1 / 3; width:40px; height:40px; border-radius:var(--al-rctl); display:grid; place-items:center; background:var(--hw-gs); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .cont .cic svg.ic { width:20px; height:20px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .cont .ctx b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .cont .ctx span { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .cont .cbar { grid-column:2; height:5px; border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 12%, transparent); overflow:hidden; }
:is(#ayah-pop, .mz-und-host) .hw .cont .cbar i { display:block; height:100%; background:var(--hw-g); border-radius:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .cont .cx { width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; color:var(--al-mut); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .cont .cx svg.ic { width:18px; height:18px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .plan { display:grid; gap:1px; border-radius:calc(var(--al-rctl) * 1.25); overflow:hidden; background:var(--al-line); box-shadow:0 0 0 .5px var(--al-line); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .plan > div { background:var(--al-card); }
:is(#ayah-pop, .mz-und-host) .hw .plan > .ptop { display:grid; gap:var(--al-u); padding:calc(var(--al-u) * 4); text-align:center; background:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .ptop span { font:600 var(--al-floor)/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .ptop b { font:700 30px/1.1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .ptop small { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .prow2 { display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); }
:is(#ayah-pop, .mz-und-host) .hw .prow2 .ri { background:var(--al-card2); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .prow2 b { display:block; font:700 var(--al-floor)/1.25 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .prow2 span:not(.ri) { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .pdia { padding:calc(var(--al-u) * 2); }
body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .modes button.on, body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .quick button.on { background:color-mix(in srgb, var(--al-ink) 22%, var(--al-card)); color:var(--al-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 34%, transparent); }

/* ── Word search (v1324): tap a word, every place in the Quran ─────────── */
:is(#ayah-pop, .mz-und-host) .hw .wstrip { display:flex; flex-wrap:wrap; direction:rtl; gap:calc(var(--al-u) * 1.5); padding:calc(var(--al-u) * 2.5); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .wstrip button { font:var(--al-ar2)/1.7 var(--f-quran); padding:2px calc(var(--al-u) * 2.5); min-height:var(--al-tap); border-radius:var(--al-rctl); background:var(--al-card2); transition:background .15s, color .15s; }
:is(#ayah-pop, .mz-und-host) .hw .wstrip button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .wstrip button.same { box-shadow:inset 0 -3px 0 var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .whd { display:grid; gap:calc(var(--al-u) * 2.5); margin:calc(var(--al-u) * 3) 0 calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .whd .big { display:flex; align-items:baseline; gap:calc(var(--al-u) * 3); flex-wrap:wrap; }
:is(#ayah-pop, .mz-und-host) .hw .whd .big .w { font:34px/1.5 var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .whd .big .n { font:600 var(--al-floor)/1.3 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .fchips { display:flex; flex-wrap:wrap; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .fchips button { min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rpill); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); display:inline-flex; align-items:center; gap:calc(var(--al-u) * 1.5); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .fchips button i { font-style:normal; font-variant-numeric:tabular-nums; opacity:.7; }
:is(#ayah-pop, .mz-und-host) .hw .fchips button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .legend { font:500 var(--al-floor)/1.45 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .legend .df { font-weight:700; }
:is(#ayah-pop, .mz-und-host) .hw .hits { display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .hit { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--al-u) calc(var(--al-u) * 2.5); padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); text-align:left; width:100%; }
:is(#ayah-pop, .mz-und-host) .hw .hit .meta { display:flex; align-items:center; gap:calc(var(--al-u) * 2); grid-column:1 / 3; flex-wrap:wrap; }
:is(#ayah-pop, .mz-und-host) .hw .hit .rf { font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .hit .pg { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .hit .kind { font:600 var(--al-floor)/1 var(--f-ui); padding:var(--al-u) calc(var(--al-u) * 2); border-radius:var(--al-rpill); background:var(--al-card2); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .hit .kind.pro { background:var(--hm-qr-soft); color:var(--hm-qr); }
:is(#ayah-pop, .mz-und-host) .hw .hit .close { margin-left:auto; display:inline-flex; gap:3px; align-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .hit .close i { width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--al-ink) 16%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .hit .close i.on { background:var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .hit .sn { grid-column:1 / 3; font:var(--al-ar2)/2 var(--f-quran); direction:rtl; text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .sn .d { color:var(--al-mut); opacity:.75; }
:is(#ayah-pop, .mz-und-host) .hw .sn .c { color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .sn .h { color:var(--al-ink); background:var(--al-acc-soft); border-radius:var(--al-rctl); padding:0 3px; }
:is(#ayah-pop, .mz-und-host) .hw .hgo { grid-column:1 / 3; justify-self:start; display:inline-flex; align-items:center; gap:calc(var(--al-u) * 2); min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--hw-gs); color:var(--hw-g); font:600 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .hgo svg.ic { width:17px; height:17px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .more { min-height:46px; border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); width:100%; margin-top:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .empty { padding:calc(var(--al-u) * 4); text-align:center; color:var(--al-mut); font:500 var(--al-floor)/1.4 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .qsgo { display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; width:100%; min-height:var(--al-row); margin:calc(var(--al-u) * 3) 0 calc(var(--al-u) * 2); padding:calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--hw-gs); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hw-g) 26%, transparent); text-align:left; color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .qsgo > svg.ic:first-child { width:40px; height:40px; padding:10px; box-sizing:border-box; border-radius:var(--al-rctl); background:var(--hw-g); color:var(--hw-gs); margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .qsgo b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .qsgo span span { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .wstrip button.on, body.theme-dark :is(#ayah-pop, .mz-und-host) .hw .fchips button.on { background:color-mix(in srgb, var(--al-ink) 22%, var(--al-card)); color:var(--al-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 34%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw-sub:empty { display:none; }

/* ── Write it out (v1325): N fresh blanks ─────────────────────────────── */
:is(#ayah-pop, .mz-und-host) .hw .wseg { display:flex; gap:2px; padding:3px; border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .wseg button { flex:1; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) - 3px); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .wseg button.on { background:var(--hw-g); color:var(--hw-gs); }
:is(#ayah-pop, .mz-und-host) .hw .wboard { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); margin:calc(var(--al-u) * 2) auto; }
:is(#ayah-pop, .mz-und-host) .hw .wboard svg.ic { width:17px; height:17px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .wprog { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--al-u) * 3); margin-bottom:calc(var(--al-u) * 2); flex-wrap:wrap; }
:is(#ayah-pop, .mz-und-host) .hw .wprog b { font:700 var(--al-act)/1 var(--f-ui); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .wdots { display:flex; gap:5px; flex-wrap:wrap; max-width:60%; justify-content:flex-end; }
:is(#ayah-pop, .mz-und-host) .hw .wdots i { width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--al-ink) 16%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .wdots i.d { background:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wdots i.c { background:transparent; box-shadow:inset 0 0 0 2px var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wref { font:var(--al-ar2)/2 var(--f-quran); direction:rtl; text-align:right; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); margin-bottom:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .pad-wrap { border-radius:calc(var(--al-rctl) * 1.25); overflow:hidden; box-shadow:0 0 0 .5px var(--al-line), var(--al-sh-1); margin-bottom:calc(var(--al-u) * 2.5); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .pad { position:relative; height:300px; color:var(--al-ink); background-color:var(--al-card); background-image:repeating-linear-gradient(to bottom, transparent 0 59px, var(--al-line) 59px 60px); touch-action:none; }
:is(#ayah-pop, .mz-und-host) .hw .pad canvas { position:absolute; inset:0; width:100%; height:100%; }
:is(#ayah-pop, .mz-und-host) .hw .pad .ghost { position:absolute; inset:0; padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 4); font:30px/60px var(--f-quran); direction:rtl; text-align:right; color:var(--al-ink); opacity:0; transition:opacity .15s; pointer-events:none; overflow:hidden; }
:is(#ayah-pop, .mz-und-host) .hw .pad.tr .ghost { opacity:.16; }
:is(#ayah-pop, .mz-und-host) .hw .pad.peek .ghost { opacity:.55; }
:is(#ayah-pop, .mz-und-host) .hw .pad .hint { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); pointer-events:none; transition:opacity .2s; }
:is(#ayah-pop, .mz-und-host) .hw .pad.tr .hint, :is(#ayah-pop, .mz-und-host) .hw .pad.inked .hint { opacity:0; }
@media (max-width:480px) { :is(#ayah-pop, .mz-und-host) .hw .pad { height:240px; } }
:is(#ayah-pop, .mz-und-host) .hw .wbtns { display:flex; gap:calc(var(--al-u) * 2); align-items:stretch; padding-bottom:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .wbtns .pbtn { min-height:52px; padding:0 calc(var(--al-u) * 4); }
:is(#ayah-pop, .mz-und-host) .hw .wbtns .go-big { flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .wdone { display:grid; gap:calc(var(--al-u) * 3); }
:is(#ayah-pop, .mz-und-host) .hw .wdone .big { display:flex; align-items:center; gap:calc(var(--al-u) * 3); padding:calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--hw-gs); color:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .wdone .big svg.ic { width:22px; height:22px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .wdone .big b { display:block; font:700 var(--al-act)/1.2 var(--f-ui); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .wdone .big span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .thumbs figure { margin:0; position:relative; border-radius:var(--al-rctl); overflow:hidden; box-shadow:0 0 0 .5px var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .thumbs img { display:block; width:100%; aspect-ratio:2.2; object-fit:cover; }
:is(#ayah-pop, .mz-und-host) .hw .thumbs figcaption { position:absolute; left:6px; top:6px; min-width:24px; height:24px; border-radius:var(--al-rpill); background:var(--al-ink); color:var(--al-surf); font:700 var(--al-floor)/24px var(--f-ui); text-align:center; padding:0 6px; }

/* ── Planner (v1326): ayat with their reps, pairs ─────────────────────── */
:is(#ayah-pop, .mz-und-host) .hw .spb.wide { grid-column:1 / -1; }
:is(#ayah-pop, .mz-und-host) .hw .plist { display:grid; gap:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .pit { display:grid; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .pit.focus { box-shadow:0 0 0 2px var(--hw-g); animation:hwfocus 1.2s ease; }
@keyframes hwfocus { 0% { box-shadow:0 0 0 6px color-mix(in srgb, var(--hw-g) 30%, transparent); } 100% { box-shadow:0 0 0 2px var(--hw-g); } }
@media (prefers-reduced-motion:reduce) { :is(#ayah-pop, .mz-und-host) .hw .pit.focus { animation:none; } }
:is(#ayah-pop, .mz-und-host) .hw .pit.fin { opacity:.72; }
:is(#ayah-pop, .mz-und-host) .hw .pit.pick { box-shadow:0 0 0 2px var(--hw-g); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .phead { display:flex; align-items:center; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .phead b { font:700 var(--al-floor)/1.2 var(--f-ui); flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .phead .pn { font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .p1 { font:var(--al-ar2)/1.95 var(--f-quran); direction:rtl; text-align:right; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
:is(#ayah-pop, .mz-und-host) .hw .pit .dmv { box-shadow:none; background:var(--al-card2); padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 3) calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .pit .dm-a { -webkit-line-clamp:1; }
:is(#ayah-pop, .mz-und-host) .hw .pfoot { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .preps { flex:1; display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); text-align:left; min-height:48px; border-radius:var(--al-rctl); padding:2px calc(var(--al-u) * 1.5) 2px 0; }
:is(#ayah-pop, .mz-und-host) .hw .pring { width:40px; height:40px; transform:rotate(-90deg); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .pring circle { fill:none; stroke:color-mix(in srgb, var(--al-ink) 14%, transparent); stroke-width:4.5; }
:is(#ayah-pop, .mz-und-host) .hw .pring .pv { stroke:var(--hw-g); stroke-linecap:round; }
:is(#ayah-pop, .mz-und-host) .hw .pit.fin .pring .pv { stroke:var(--trap-tajwid); }
:is(#ayah-pop, .mz-und-host) .hw .preps b { display:block; font:700 var(--al-title)/1.1 var(--f-ui); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .preps b i { font-style:normal; color:var(--al-mut); font-weight:500; }
:is(#ayah-pop, .mz-und-host) .hw .preps small { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .go-sm { display:inline-flex; align-items:center; gap:calc(var(--al-u) * 1.75); min-height:var(--al-tap); padding:0 calc(var(--al-u) * 4); border-radius:var(--al-rctl); background:var(--hw-g); color:var(--hw-gs); font:700 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .go-sm svg.ic { width:18px; height:18px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .pnote { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); margin-top:-2px; }
:is(#ayah-pop, .mz-und-host) .hw .pedit2 { display:grid; gap:calc(var(--al-u) * 2); padding-top:calc(var(--al-u) * 2); border-top:1px solid var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .pedit2 .presets { justify-content:flex-start; }
:is(#ayah-pop, .mz-und-host) .hw .pedrow { display:flex; justify-content:space-between; align-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .bigin.sm { justify-items:start; }
:is(#ayah-pop, .mz-und-host) .hw .bigin.sm input { font-size:40px; text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .padds { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--al-u) * 2); margin:calc(var(--al-u) * 2.5) 0 calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .padd { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); width:100%; min-height:50px; border-radius:var(--al-rctl); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--hw-g) 30%, transparent); color:var(--hw-g); font:700 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .padd svg.ic { width:18px; height:18px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .twin2 { display:grid; gap:calc(var(--al-u) * 1.5); }
@media (min-width:600px) { :is(#ayah-pop, .mz-und-host) .hw .twin2 { grid-template-columns:1fr 1fr; } }
:is(#ayah-pop, .mz-und-host) .hw .tw { display:grid; gap:2px; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card2); }
:is(#ayah-pop, .mz-und-host) .hw .tl { font:700 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .ar3 { font:var(--al-ar3)/1.9 var(--f-quran); direction:rtl; text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .ar3 .ctx { color:var(--al-mut); opacity:.7; }
:is(#ayah-pop, .mz-und-host) .hw .fromp { display:flex; align-items:center; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--hm-st-soft); color:var(--hm-st); font:600 var(--al-floor)/1.3 var(--f-ui); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .fromp span { flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .fromp svg.ic { width:18px; height:18px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .fromp .lnk { color:var(--hm-st); }
/* the pair runner */
:is(#ayah-pop, .mz-und-host) .hw .pround { display:flex; align-items:baseline; gap:calc(var(--al-u) * 1.5); justify-content:center; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); margin:2px 0 calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .pround b { font:700 var(--al-title)/1 var(--f-ui); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .pround span { margin-left:calc(var(--al-u) * 2.5); color:var(--al-mut); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .pcard { display:grid; gap:var(--al-u); width:100%; text-align:left; padding:calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card2); margin-bottom:calc(var(--al-u) * 2); opacity:.55; transition:opacity .2s, box-shadow .2s, transform .2s; }
:is(#ayah-pop, .mz-und-host) .hw .pcard.now { opacity:1; background:var(--al-card); box-shadow:0 0 0 2px var(--hm-dr), var(--al-sh-1); }
:is(#ayah-pop, .mz-und-host) .hw .pcard.now:active { transform:scale(.99); }
:is(#ayah-pop, .mz-und-host) .hw .pcard .ar3 { font-size:var(--al-ar2); }
:is(#ayah-pop, .mz-und-host) .hw .pcnt { justify-self:end; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .pcnt b { font:700 34px/1 var(--f-ui); color:var(--hm-dr); }
:is(#ayah-pop, .mz-und-host) .hw .rhint { text-align:center; font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); margin:calc(var(--al-u) * 1.5) 0 calc(var(--al-u) * 2.5); }

/* ── Understand (v1327): Translation, Tafsir, Word by word ─────────────── */
:is(#ayah-pop, .mz-und-host) .hw-und { --ufs:1; }
:is(#ayah-pop, .mz-und-host) .hw-ph .aa { margin-left:auto; display:flex; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw-ph .aa button { width:var(--al-tap); height:var(--al-tap); border-radius:var(--al-rctl); background:var(--al-card2); font:700 var(--al-floor)/1 var(--f-ui); color:var(--al-ink); border:0; }
:is(#ayah-pop, .mz-und-host) .hw-ph .aa button + button { font-size:calc(var(--al-floor) * 1.3); }
:is(#ayah-pop, .mz-und-host) .hw .uayah { padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3) calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .unav { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--al-u) * 2); margin-bottom:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .unav.solo { margin:0 0 calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .unav b { font:700 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); text-align:center; }
:is(#ayah-pop, .mz-und-host) .hw .unav b i { font-style:normal; font-weight:500; }
:is(#ayah-pop, .mz-und-host) .hw .unav .nb { display:inline-flex; align-items:center; gap:var(--al-u); min-height:var(--al-tap); min-width:var(--al-tap); padding:0 calc(var(--al-u) * 2); border-radius:var(--al-rctl); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .unav .nb:disabled { opacity:.3; }
:is(#ayah-pop, .mz-und-host) .hw .unav .nb svg.ic { width:16px; height:16px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .uar { font:calc(var(--al-ar2) * var(--ufs)) / 2 var(--f-quran); direction:rtl; text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .uar mark { background:var(--al-acc-soft); color:inherit; border-radius:var(--al-rctl); padding:0 2px; box-shadow:inset 0 -2px 0 var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .aen { color:var(--al-acc-txt); font-size:.85em; }
:is(#ayah-pop, .mz-und-host) .hw .trs { display:grid; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .trb { padding:calc(var(--al-u) * 3) calc(var(--al-u) * 3.5); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); display:grid; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .trt { font:calc(var(--al-floor) * 1.0625 * var(--ufs)) / 1.6 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .trt.rtl { direction:rtl; text-align:right; font-family:var(--f-ar, var(--f-quran)); font-size:calc(var(--al-ar3) * 1.0556 * var(--ufs)); line-height:2; }
:is(#ayah-pop, .mz-und-host) .hw .trn { font:600 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .muted { color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .fnb { display:inline-grid; place-items:center; min-width:22px; height:22px; margin:0 2px; padding:0 5px; border-radius:var(--al-rpill); background:var(--hm-qr-soft); color:var(--hm-qr); font:700 var(--al-floor)/1 var(--f-ui); vertical-align:super; font-size:.7em; }
:is(#ayah-pop, .mz-und-host) .hw .fnbox { position:relative; padding:calc(var(--al-u) * 2.5) 44px calc(var(--al-u) * 2.5) calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card2); font:var(--al-floor)/1.5 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .fnbox b { color:var(--hm-qr); }
:is(#ayah-pop, .mz-und-host) .hw .fnbox .fx { position:absolute; top:0; right:0; width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; }
:is(#ayah-pop, .mz-und-host) .hw .fnbox .fx svg.ic { width:15px; height:15px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .choose { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); width:100%; min-height:50px; margin-top:calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--hm-qr) 28%, transparent); color:var(--hm-qr); font:700 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .choose svg.ic { width:18px; height:18px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .tpick { display:grid; gap:calc(var(--al-u) * 2.5); margin-top:calc(var(--al-u) * 2.5); padding:2px; }
:is(#ayah-pop, .mz-und-host) .hw [data-tlist] { display:grid; gap:calc(var(--al-u) * 2.5); max-height:420px; overflow:auto; overscroll-behavior:contain; }
:is(#ayah-pop, .mz-und-host) .hw .lgrp { display:grid; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .lh { position:sticky; top:0; background:var(--al-surf); padding:calc(var(--al-u) * 1.5) var(--al-u); font:700 var(--al-floor)/1 var(--f-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--al-mut); z-index:1; }
:is(#ayah-pop, .mz-und-host) .hw .lh i { font-style:normal; opacity:.7; }
:is(#ayah-pop, .mz-und-host) .hw .tck { display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2.5); align-items:center; min-height:48px; padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card); text-align:left; width:100%; }
:is(#ayah-pop, .mz-und-host) .hw .tck .cb { width:22px; height:22px; border-radius:7px; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--al-ink) 22%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .tck.on .cb { background:var(--hm-qr); box-shadow:none; position:relative; }
:is(#ayah-pop, .mz-und-host) .hw .tck.on .cb::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:var(--hm-qr-soft); font:700 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .tck b { display:block; font:600 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .tck i { font:500 var(--al-floor)/1.2 var(--f-ui); font-style:normal; color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .credit { margin:calc(var(--al-u) * 2.5) 0; font:500 var(--al-floor)/1.4 var(--f-ui); color:var(--al-mut); text-align:center; }
:is(#ayah-pop, .mz-und-host) .hw .wbctl { display:flex; flex-wrap:wrap; gap:calc(var(--al-u) * 2); align-items:center; justify-content:space-between; margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .wbctl .wseg { flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .tg { display:flex; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .tg button { min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rpill); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .tg button.on { background:var(--hm-qr-soft); color:var(--hm-qr); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hm-qr) 28%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .wbw.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .wbw.inline { display:flex; flex-wrap:wrap; gap:2px var(--al-u); padding:calc(var(--al-u) * 2.5); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); }
:is(#ayah-pop, .mz-und-host) .hw .wbc { display:grid; justify-items:center; align-content:start; gap:2px; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 1.5) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); text-align:center; }
:is(#ayah-pop, .mz-und-host) .hw .wbw.inline .wbc { background:none; box-shadow:none; padding:var(--al-u) var(--al-u) calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .wbc .wa { font:calc(var(--al-ar2) * 1.0909 * var(--ufs)) / 1.7 var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .wbc .wt { font:italic 500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); direction:ltr; }
:is(#ayah-pop, .mz-und-host) .hw .wbc .wm { font:600 var(--al-floor)/1.25 var(--f-ui); color:var(--al-ink2); direction:ltr; }
:is(#ayah-pop, .mz-und-host) .hw .wbc.on { box-shadow:0 0 0 2px var(--hm-qr); background:var(--hm-qr-soft); }
:is(#ayah-pop, .mz-und-host) .hw .wsel { margin-top:calc(var(--al-u) * 2.5); padding:calc(var(--al-u) * 3); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hm-qr) 28%, transparent); display:grid; gap:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .wsh { display:flex; align-items:center; gap:calc(var(--al-u) * 3.5); }
:is(#ayah-pop, .mz-und-host) .hw .wsh .wa { font:34px/1.5 var(--f-quran); }
:is(#ayah-pop, .mz-und-host) .hw .wsh b { display:block; font:700 var(--al-act)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .wsh span { font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .wacts { display:flex; flex-wrap:wrap; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .wacts .pbtn { display:inline-flex; align-items:center; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .wacts svg.ic { width:16px; height:16px; margin:0; }
:is(#ayah-pop, .mz-und-host) .hw .tfsel { display:grid; gap:calc(var(--al-u) * 2); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .lsel { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .lsel select { flex:1; min-height:var(--al-tap); border:0; border-radius:var(--al-rctl); background:var(--al-card2); padding:0 calc(var(--al-u) * 3); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .tpills { display:flex; gap:calc(var(--al-u) * 1.5); overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
:is(#ayah-pop, .mz-und-host) .hw .tpills::-webkit-scrollbar { display:none; }
:is(#ayah-pop, .mz-und-host) .hw .tpills button { flex:none; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3.5); border-radius:var(--al-rpill); background:var(--al-card); box-shadow:inset 0 0 0 1px var(--al-line); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); white-space:nowrap; }
:is(#ayah-pop, .mz-und-host) .hw .tpills button.on { background:var(--hm-qr); color:var(--hm-qr-soft); box-shadow:none; }
:is(#ayah-pop, .mz-und-host) .hw .tpills em { font:600 var(--al-floor)/1 var(--f-ui); font-style:normal; opacity:.8; }
:is(#ayah-pop, .mz-und-host) .hw .grp { margin-bottom:calc(var(--al-u) * 2.5); border-radius:calc(var(--al-rctl) * 1.25); background:var(--hm-qr-soft); overflow:hidden; }
:is(#ayah-pop, .mz-und-host) .hw .gb { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); width:100%; min-height:48px; padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3); text-align:left; color:var(--hm-qr); font:500 var(--al-floor)/1.3 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .gb svg.ic { width:18px; height:18px; margin:0; flex:none; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .gb span { flex:1; }
:is(#ayah-pop, .mz-und-host) .hw .gb i { font-style:normal; font-weight:700; }
:is(#ayah-pop, .mz-und-host) .hw .gv { display:grid; gap:calc(var(--al-u) * 1.5); padding:0 calc(var(--al-u) * 2.5) calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .gl { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:calc(var(--al-u) * 2); align-items:center; padding:calc(var(--al-u) * 1.5) calc(var(--al-u) * 2.5); border-radius:var(--al-rctl); background:var(--al-card); }
:is(#ayah-pop, .mz-und-host) .hw .gl .dm-k { order:2; }
:is(#ayah-pop, .mz-und-host) .hw .tfb { padding:calc(var(--al-u) * 3.5) calc(var(--al-u) * 4); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); font:calc(var(--al-floor) * 1.03 * var(--ufs)) / 1.7 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .tfb h2, :is(#ayah-pop, .mz-und-host) .hw .tfb h3 { font:700 var(--al-act)/1.3 var(--f-ui); margin:var(--al-u) 0 calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .tfb p { margin:0 0 calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .tfb.rtl { direction:rtl; text-align:right; font-family:var(--f-ar, var(--f-quran)); font-size:calc(var(--al-ar3) * 1.0556 * var(--ufs)); line-height:2.05; }
:is(#ayah-pop, .mz-und-host) .hw .tfb .arq { font-family:var(--f-quran); font-size:1.12em; }
:is(#ayah-pop, .mz-und-host) .hw .tfft { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); padding:calc(var(--al-u) * 2.5) var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .tfft b { display:block; font:700 var(--al-floor)/1.2 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .tfft span { font:500 var(--al-floor)/1.3 var(--f-ui); color:var(--al-mut); }
#ayah-pop .hm-page.hm-qr .wseg button.on { background:var(--hm-qr); color:var(--hm-qr-soft); }
:is(#ayah-pop, .mz-und-host) .hw .wbctl .wseg button { white-space:nowrap; }

/* ── Audio test (v1328): the setup, then the recite popup over the blurred page ── */
:is(#ayah-pop, .mz-und-host) .hw .vox { display:flex; flex-wrap:wrap; gap:calc(var(--al-u) * 1.5); }
:is(#ayah-pop, .mz-und-host) .hw .vox button { min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3.5); border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .vox button.on { background:var(--al-ink); color:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .more2 { border-top:1px solid var(--al-line); padding-top:calc(var(--al-u) * 1.5); display:grid; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .msum { display:flex; align-items:center; gap:calc(var(--al-u) * 2); min-height:var(--al-tap); font:600 var(--al-floor)/1.2 var(--f-ui); color:var(--al-ink2); text-align:left; }
:is(#ayah-pop, .mz-und-host) .hw .msum svg.ic { width:16px; height:16px; margin:0; transition:transform .2s; }
:is(#ayah-pop, .mz-und-host) .hw .more2.open .msum svg.ic { transform:rotate(90deg); }
:is(#ayah-pop, .mz-und-host) .hw .rrow.st2 { grid-template-columns:minmax(0, 1fr) auto; background:transparent; padding:calc(var(--al-u) * 1.5) 0; }
:is(#ayah-pop, .mz-und-host) .hw .sw { width:52px; height:32px; border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 18%, transparent); position:relative; transition:background .2s; }
:is(#ayah-pop, .mz-und-host) .hw .sw i { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--al-card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
:is(#ayah-pop, .mz-und-host) .hw .sw.on { background:var(--hw-g); }
:is(#ayah-pop, .mz-und-host) .hw .sw.on i { transform:translateX(20px); }
:is(#ayah-pop, .mz-und-host) .hw .atsum { text-align:center; font:600 var(--al-floor)/1.35 var(--f-ui); color:var(--al-ink2); margin:calc(var(--al-u) * 2) 0; }
:is(#ayah-pop, .mz-und-host) .hw .tbar { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .tbar b { font:700 var(--al-floor)/1 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .tbar span { flex:1; font:500 var(--al-floor)/1.2 var(--f-ui); color:var(--al-mut); }
:is(#ayah-pop, .mz-und-host) .hw .pbtn.sm { min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); }
:is(#ayah-pop, .mz-und-host) .hw .cue { font:30px/1.8 var(--f-quran); direction:rtl; text-align:center; }
:is(#ayah-pop, .mz-und-host) .hw .ar3.big { font-size:24px; }
:is(#ayah-pop, .mz-und-host) .hw .playq { display:flex; align-items:center; gap:calc(var(--al-u) * 3); width:100%; min-height:72px; padding:0 calc(var(--al-u) * 4); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-acc); color:var(--al-acc-ink); }
:is(#ayah-pop, .mz-und-host) .hw .playq svg.ic { width:26px; height:26px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .playq .wave { flex:1; display:flex; align-items:center; gap:3px; height:40px; }
:is(#ayah-pop, .mz-und-host) .hw .playq .wave i { flex:1; border-radius:3px; background:currentColor; opacity:.55; }
:is(#ayah-pop, .mz-und-host) .hw .playq em { font:600 var(--al-floor)/1 var(--f-ui); font-style:normal; }
:is(#ayah-pop, .mz-und-host) .hw .playq.done { background:var(--al-card2); color:var(--al-ink2); }
:is(#ayah-pop, .mz-und-host) .hw .atnow { display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 3); margin:calc(var(--al-u) * 3.5) 0 calc(var(--al-u) * 2.5); font:var(--al-act)/1.3 var(--f-ui); }
:is(#ayah-pop, .mz-und-host) .hw .cd { width:var(--al-tap); height:var(--al-tap); border-radius:50%; display:grid; place-items:center; font:700 var(--al-floor)/1 var(--f-ui); box-shadow:inset 0 0 0 3px var(--al-acc); color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .atk2 { font:600 var(--al-floor)/1.5 var(--f-ui); color:var(--al-ink2); text-align:center; margin:var(--al-u) 0 calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .atk2 .kq { background:var(--al-acc-soft); border-radius:var(--al-rctl); padding:1px 6px; }
:is(#ayah-pop, .mz-und-host) .hw .atk2 .kn { background:color-mix(in srgb, var(--hm-st) 18%, transparent); border-radius:var(--al-rctl); padding:1px 6px; }
:is(#ayah-pop, .mz-und-host) .hw .grade { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--al-u) * 2); padding-bottom:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .grade button { min-height:56px; border-radius:calc(var(--al-rctl) * 1.25); font:700 var(--al-floor)/1 var(--f-ui); display:flex; align-items:center; justify-content:center; gap:calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .grade svg.ic { width:18px; height:18px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .gbad { background:var(--hm-qr-soft); color:var(--hm-qr); }
:is(#ayah-pop, .mz-und-host) .hw .ggood { background:var(--al-acc); color:var(--al-acc-ink); }
/* the test: the menu is a small popup at the foot; the page above it stays in view (no dim) */
#ayah-pop.show.at-testing { max-height:min(52dvh, 440px); box-shadow:0 -12px 32px -18px color-mix(in srgb, var(--al-ink) 45%, transparent); }
@media (min-width:744px) { #ayah-pop.show.at-testing { width:min(92vw, 520px); max-height:min(46dvh, 440px); box-shadow:var(--al-sh-modal); } }
body.theme-dark #ayah-pop.show.at-testing { box-shadow:0 -12px 32px -18px rgba(0,0,0,.8); }
.al-lit[data-lit="atq"] { background:var(--al-acc-soft); box-shadow:inset 0 -2px 0 var(--al-acc-txt); }
.al-lit[data-lit="atn"] { background:color-mix(in srgb, var(--hm-st) 18%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .dm-orn b.dots { letter-spacing:.1em; }
:is(#ayah-pop, .mz-und-host) .hw .wiz.w4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }

/* ── Play (v1329): the recitation lit word by word ─────────────────────── */
#ayah-pop[data-win="play"], #ayah-pop[data-win="at"] { background:var(--al-surf); }
:is(#ayah-pop, .mz-und-host) .hw .pctl { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); margin-bottom:calc(var(--al-u) * 2.5); }
:is(#ayah-pop, .mz-und-host) .hw .pbig { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--al-acc); color:var(--al-acc-ink); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .pbig svg.ic { width:26px; height:26px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .pmid { flex:1; min-width:0; display:grid; gap:var(--al-u); }
:is(#ayah-pop, .mz-und-host) .hw .pbar { height:8px; border-radius:var(--al-rpill); background:color-mix(in srgb, var(--al-ink) 14%, transparent); overflow:hidden; cursor:pointer; }
:is(#ayah-pop, .mz-und-host) .hw .pbar i { display:block; height:100%; width:0; background:var(--al-acc); }
:is(#ayah-pop, .mz-und-host) .hw .ptime { display:flex; justify-content:space-between; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); font-variant-numeric:tabular-nums; }
:is(#ayah-pop, .mz-und-host) .hw .tgw { display:inline-flex; align-items:center; gap:calc(var(--al-u) * 1.5); min-height:var(--al-tap); padding:0 calc(var(--al-u) * 3); border-radius:var(--al-rctl); background:var(--al-card2); font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-ink2); flex:none; }
:is(#ayah-pop, .mz-und-host) .hw .tgw svg.ic { width:17px; height:17px; margin:0; color:inherit; }
:is(#ayah-pop, .mz-und-host) .hw .tgw.on { background:var(--al-acc-soft); color:var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .mpage { max-height:min(560px, 58dvh); overflow:auto; overscroll-behavior:contain; padding:calc(var(--al-u) * 2.5) calc(var(--al-u) * 3.5) calc(var(--al-u) * 4); border-radius:calc(var(--al-rctl) * 1.25); background:var(--al-card); box-shadow:0 0 0 1px var(--al-line), inset 0 0 0 5px color-mix(in srgb, var(--al-acc-txt) 12%, transparent); direction:rtl; text-align:justify; font:var(--al-ar2)/2.1 var(--f-quran); scroll-behavior:smooth; }
:is(#ayah-pop, .mz-und-host) .hw .mhead { display:flex; justify-content:space-between; font:600 var(--al-floor)/1 var(--f-ui); color:var(--al-mut); direction:ltr; padding:var(--al-u) 2px calc(var(--al-u) * 2); }
:is(#ayah-pop, .mz-und-host) .hw .pw { display:inline-block; text-align:center; cursor:pointer; border-radius:var(--al-rctl); padding:0 2px; transition:background .12s, color .12s; }
:is(#ayah-pop, .mz-und-host) .hw .pw b { font-weight:400; display:block; }
:is(#ayah-pop, .mz-und-host) .hw .pw i { display:none; font:500 var(--al-floor)/1.2 var(--f-ui); font-style:normal; color:var(--al-mut); direction:ltr; max-width:120px; margin:-6px auto 6px; white-space:normal; }
:is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw i { display:block; margin:var(--al-u) auto 0; }
:is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon { line-height:1.6; text-align:right; }
:is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw { vertical-align:top; margin:0 2px calc(var(--al-u) * 3); }
:is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw b { line-height:1.75; }
:is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .amk2 { vertical-align:top; line-height:1.75; }
:is(#ayah-pop, .mz-und-host) .hw .pw.now { background:var(--al-acc-soft); box-shadow:inset 0 -3px 0 var(--al-acc-txt); }
:is(#ayah-pop, .mz-und-host) .hw .pw.now i { color:var(--al-ink); }
:is(#ayah-pop, .mz-und-host) .hw .pw.ay { background:color-mix(in srgb, var(--al-acc-soft) 60%, transparent); }
:is(#ayah-pop, .mz-und-host) .hw .amk2 { color:var(--al-acc-txt); }