/* styles/plan-week.css — the Planner's Week tab (modules/tools/plan-week.js). Design language: tokens only (styles/ds.css,
   styles/ql/tokens.css); text floor 16; corners 14 control · 26 group; 12 between controls; taps 44; one accent (a picked shift
   wears it: the soft fill and the 2px ring; Free is the ring broken into dashes; done is the accent itself); heads are plain,
   never uppercase. Scoped as `#ayah-pop .al-list.hw .pwk.pw` to outweigh the hold window's own centring, block <b> and cleared
   button fills (one id, four classes). `.pwk` is the Week's own box (hold-plan.js; mount() adds .pw). Never `.pw.pw`: the Play
   window's word tiles are `<span class="pw">` too (hold-play.js), and that made every word a full-width row (v1640).
   v1617: the calm grid redesign (tiles, the range, the grid with its column names, a shift opening under its day, the ⋯ menu,
   Where this pace takes you). */
#ayah-pop .hw .hubnav.pw-nav { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#ayah-pop .al-list.hw .pwk.pw { display:grid; gap:var(--q-sp); padding-bottom:var(--q-sp); text-align:left; font:400 var(--fs-body)/1.35 var(--ds-font); color:var(--q-ink); }
#ayah-pop .al-list.hw .pwk.pw b { display:inline; font-weight:600; }
#ayah-pop .al-list.hw .pwk.pw .pw-card { display:grid; gap:var(--q-sp); padding:16px; border-radius:var(--r-grp); background:var(--q-group); text-align:left; }
#ayah-pop .al-list.hw .pwk.pw .pw-head { font:500 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-note { display:block; font:400 var(--fs-call)/1.4 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-hd { display:flex; align-items:center; justify-content:space-between; gap:var(--q-sp); min-height:44px; }
#ayah-pop .al-list.hw .pwk.pw .pw-hd b { font:600 var(--fs-head)/1.2 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-lnk { min-width:44px; min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--q-acc); font:600 var(--fs-body)/1 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw :is(button, select, input):focus-visible { outline:2px solid var(--q-acc); outline-offset:2px; }
/* the week bar: ‹ · name and dates · › ⋯ */
#ayah-pop .al-list.hw .pwk.pw .pw-wk { display:grid; grid-template-columns:44px 44px minmax(0, 1fr) 44px 44px; gap:6px; align-items:center; min-height:48px; text-align:center; }
#ayah-pop .al-list.hw .pwk.pw .pw-wk > div { display:grid; }
#ayah-pop .al-list.hw .pwk.pw .pw-wk b { display:block; font:600 var(--fs-head)/1.2 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-wk span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-wk button { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:var(--r-cap); background:var(--q-fill); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-wk button[aria-expanded="true"] { background:var(--q-acc-soft); color:var(--q-acc); }
#ayah-pop .al-list.hw .pwk.pw .pw-menu { display:grid; padding:0 16px; border-radius:var(--r-grp); background:var(--q-group); overflow:hidden; }
#ayah-pop .al-list.hw .pwk.pw .pw-menu button { min-height:52px; padding:0; border:0; border-top:1px solid var(--q-hair); border-radius:0; background:transparent; color:var(--q-ink); text-align:left; font:400 var(--fs-body)/1.2 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-menu button:first-child { border-top:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-menu button:disabled { color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-menu .pw-note { padding:14px 0; }
#ayah-pop .al-list.hw .pwk.pw .pw-now, #ayah-pop .al-list.hw .pwk.pw .pw-usual { justify-self:center; min-height:44px; padding:0 16px; border:0; background:transparent; color:var(--q-acc); font:600 var(--fs-call)/1 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-starts { display:grid; gap:var(--q-sp); }
#ayah-pop .al-list.hw .pwk.pw .pw-starts button { min-height:48px; border:0; border-radius:var(--r-ctl); background:var(--q-fill); color:var(--q-ink); font:600 var(--fs-body)/1.2 var(--ds-font); }
/* v1619: the week at a glance, flat — what is done, its bar, the pages a week with − + */
#ayah-pop .al-list.hw .pwk.pw .pw-sum { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
#ayah-pop .al-list.hw .pwk.pw .pw-sum b { font:700 var(--fs-t1)/1 var(--ds-font); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-sum span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-pgl { display:grid; gap:2px; min-width:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-pgl b { display:block; }
#ayah-pop .al-list.hw .pwk.pw .pw-pgl span { font:400 var(--fs-call)/1.2 var(--ds-font); color:var(--q-ink2); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-step { display:flex; align-items:center; }
#ayah-pop .al-list.hw .pwk.pw .pw-step button { width:44px; height:44px; border:0; border-radius:var(--r-ctl); background:var(--q-fill); color:var(--q-ink); font:600 var(--fs-t3)/1 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-step .pw-pg { display:block; min-width:56px; text-align:center; font:700 var(--fs-t3)/1 var(--ds-font); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-bar { height:6px; border-radius:var(--r-cap); background:var(--q-fill); overflow:hidden; }
#ayah-pop .al-list.hw .pwk.pw .pw-bar > span { display:block; position:static; height:100%; border-radius:var(--r-cap); background:var(--q-acc); }
/* the range: From · ✦ N āyāt between · Stop at, the words on one line each */
#ayah-pop .al-list.hw .pwk.pw .pw-rng { display:grid; gap:4px; }
#ayah-pop .al-list.hw .pwk.pw .pw-rr { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--q-sp); align-items:center; width:100%; min-height:48px; padding:0; border:0; background:transparent; color:var(--q-ink); text-align:left; font:inherit; }
#ayah-pop .al-list.hw .pwk.pw .pw-rk { font:600 var(--fs-body)/1.2 var(--ds-font); white-space:nowrap; font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw button.pw-rr .pw-rk { color:var(--q-acc); }
#ayah-pop .al-list.hw .pwk.pw .pw-ar { display:block; min-width:0; font-family:var(--ds-font-quran); font-size:var(--q-ar-22); line-height:2.1; text-align:right; direction:rtl; unicode-bidi:isolate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--q-ink); }
#ayah-pop .al-list.hw .pwk.pw .pw-ar.end { direction:ltr; }
#ayah-pop .al-list.hw .pwk.pw .pw-ar.end bdi { direction:rtl; unicode-bidi:isolate; }
#ayah-pop .al-list.hw .pwk.pw .pw-orn { display:flex; align-items:center; gap:10px; color:var(--q-ink3); font:400 var(--fs-call)/1.2 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-orn::before, #ayah-pop .al-list.hw .pwk.pw .pw-orn::after { content:""; flex:1; height:1px; background:var(--q-hair); }
#ayah-pop .al-list.hw .pwk.pw .pw-orn b { color:var(--q-acc); font-weight:400; }
/* the shifts: A.M. · P.M. · Night named once; a square shows its lines */
#ayah-pop .al-list.hw .pwk.pw :is(.pw-cols, .pw-day) { display:grid; grid-template-columns:52px repeat(3, minmax(0, 1fr)); column-gap:var(--q-sp); }
#ayah-pop .al-list.hw .pwk.pw .pw-cols { color:var(--q-ink2); font:500 var(--fs-call)/1.2 var(--ds-font); text-align:center; }
#ayah-pop .al-list.hw .pwk.pw .pw-day { row-gap:8px; align-items:center; padding-top:var(--q-sp); border-top:1px solid var(--q-hair); }
#ayah-pop .al-list.hw .pwk.pw .pw-cols + .pw-day { padding-top:0; border-top:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-dl { display:grid; }
#ayah-pop .al-list.hw .pwk.pw .pw-dl b { display:block; line-height:1.2; }
#ayah-pop .al-list.hw .pwk.pw .pw-dl span { font:400 var(--fs-call)/1.2 var(--ds-font); color:var(--q-ink2); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-sq { display:flex; align-items:center; justify-content:center; gap:2px; height:48px; min-width:0; padding:0 4px; border:0; border-radius:var(--r-ctl); background:transparent; box-shadow:inset 0 0 0 1px var(--q-hair); color:var(--q-ink); font:600 var(--fs-body)/1 var(--ds-font); font-variant-numeric:tabular-nums; -webkit-user-select:none; user-select:none; }
#ayah-pop .al-list.hw .pwk.pw .pw-sq svg { width:18px; height:18px; flex:none; }
#ayah-pop .al-list.hw .pwk.pw .pw-sq:disabled { opacity:1; }
#ayah-pop .al-list.hw .pwk.pw .pw-sq.on { background:var(--q-acc-soft); box-shadow:inset 0 0 0 2px var(--q-acc); }
#ayah-pop .al-list.hw .pwk.pw .pw-sq.skip { background:transparent; box-shadow:inset 0 0 0 1px var(--q-hair); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-sq.done { background:var(--q-acc); color:var(--q-acc-ink); box-shadow:none; outline:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-sq.open { box-shadow:inset 0 0 0 2px var(--q-acc), 0 0 0 4px var(--q-acc-soft); }
#ayah-pop .al-list.hw .pwk.pw .pw-sq.done.open { box-shadow:0 0 0 4px var(--q-acc-soft); }
#ayah-pop .al-list.hw .pwk.pw .ed .pw-sq:not(.on) { box-shadow:inset 0 0 0 1px var(--q-ink3); }
#ayah-pop .al-list.hw .pwk.pw .ed .pw-sq { touch-action:none; }   /* v1641: Plan paints with a drag; the squares do not scroll the window */
#ayah-pop .al-list.hw .pwk.pw .pw-ds { grid-column:2 / -1; font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); font-variant-numeric:tabular-nums; }
/* a shift, open under its day */
#ayah-pop .al-list.hw .pwk.pw .pw-det { grid-column:1 / -1; display:grid; gap:var(--q-sp); padding:14px; border-radius:var(--r-ctl); background:var(--q-fill); }
#ayah-pop .al-list.hw .pwk.pw .pw-dt { display:grid; gap:2px; }
#ayah-pop .al-list.hw .pwk.pw .pw-dt b { display:block; font:600 var(--fs-body)/1.25 var(--ds-font); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-dt span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-ar2 { display:block; font-family:var(--ds-font-quran); font-size:var(--q-ar-22); line-height:2.1; text-align:right; direction:rtl; unicode-bidi:isolate; color:var(--q-ink); }
#ayah-pop .al-list.hw .pwk.pw .pw-dth { display:grid; grid-template-columns:minmax(0, 1fr) 44px; gap:var(--q-sp); align-items:start; }
#ayah-pop .al-list.hw .pwk.pw .pw-more { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:var(--r-cap); background:var(--q-group); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-acts { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--q-sp); }
#ayah-pop .al-list.hw .pwk.pw .pw-go { flex:1 1 140px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 16px; border:0; border-radius:var(--r-ctl); background:var(--q-acc); color:var(--q-acc-ink); font:600 var(--fs-body)/1 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-go.on { background:var(--q-group); color:var(--q-ink); }
/* v1619: the first question (Your day) and the page picker (what you memorized, word by word) */
#ayah-pop .al-list.hw .pwk.pw .pw-ask button { display:grid; gap:2px; justify-items:start; padding:12px 16px; text-align:left; }
#ayah-pop .al-list.hw .pwk.pw .pw-ask button span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-msel { display:grid; gap:2px; padding:12px 14px; border-radius:var(--r-ctl); background:var(--q-acc-soft); }
#ayah-pop .al-list.hw .pwk.pw .pw-msel b { display:block; font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-msel span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-pgw { display:grid; gap:6px; }
#ayah-pop .al-list.hw .pwk.pw .pw-pgn { font:400 var(--fs-call)/1.2 var(--ds-font); color:var(--q-ink2); text-align:center; font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-mp { position:relative; container-type:size; width:100%; aspect-ratio:600 / 917; display:grid; place-items:center; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#ayah-pop .al-list.hw .pwk.pw .pw-mp .text-layer .word.pw-w { background:color-mix(in srgb, var(--q-acc) 22%, transparent); }
#ayah-pop .al-list.hw .pwk.pw .pw-mp .text-layer .word.pw-we { background:color-mix(in srgb, var(--q-acc) 42%, transparent); }
#ayah-pop .al-list.hw .pwk.pw .pw-mnone { padding:16px; text-align:center; }
#ayah-pop .al-list.hw .pwk.pw .pw-mem .pw-usual { justify-self:center; }
/* the Agenda (Settings › Planner › Week layout): a shift a row, a tick when done */
#ayah-pop .al-list.hw .pwk.pw .pw-pk { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px var(--q-sp); align-items:center; width:100%; min-height:56px; padding:12px; border:0; border-radius:var(--r-ctl); background:var(--q-fill); color:var(--q-ink); text-align:left; font:inherit; }
#ayah-pop .al-list.hw .pwk.pw .pw-pkr { display:grid; gap:2px; min-width:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-pkr b { display:block; font:600 var(--fs-body)/1.25 var(--ds-font); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-pkr span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-pk .ari { grid-column:1 / -1; display:block; font-family:var(--ds-font-quran); font-size:var(--q-ar-22); line-height:2.1; padding-bottom:2px; text-align:right; direction:rtl; unicode-bidi:isolate; color:var(--q-ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* the āyah picker (From) */
#ayah-pop .al-list.hw .pwk.pw .pw-goal { display:flex; align-items:center; justify-content:space-between; gap:var(--q-sp); min-height:48px; }
#ayah-pop .al-list.hw .pwk.pw .pw-pk.on { background:var(--q-acc-soft); box-shadow:inset 0 0 0 2px var(--q-acc); }
#ayah-pop .al-list.hw .pwk.pw .pw-pks { display:grid; gap:var(--q-sp); }
#ayah-pop .al-list.hw .pwk.pw .pw-srch { display:grid; gap:6px; }
#ayah-pop .al-list.hw .pwk.pw .pw-q { width:100%; min-height:44px; padding:0 14px; border:0; border-radius:var(--r-ctl); background:var(--q-fill); color:var(--q-ink); font:400 var(--fs-body)/1 var(--ds-font); }
/* where this pace takes you */
#ayah-pop .al-list.hw .pwk.pw .pw-seg { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:var(--r-ctl); background:var(--q-fill); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:var(--q-r-in); background:var(--q-group); box-shadow:var(--q-sh-thumb); transition:transform var(--dur-3) var(--ease-thumb); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg[data-on="act"]::before { transform:translateX(100%); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg button { min-height:40px; border:0; border-radius:var(--q-r-in); background:transparent; box-shadow:none; color:var(--q-ink2); font:600 var(--fs-call)/1 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg button[aria-pressed="true"] { color:var(--q-ink); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg button:disabled { opacity:.45; }
#ayah-pop .al-list.hw .pwk.pw .pw-ms { display:grid; }
#ayah-pop .al-list.hw .pwk.pw .pw-mr { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px var(--q-sp); align-items:center; min-height:60px; padding:8px 0; border-top:1px solid var(--q-hair); }
#ayah-pop .al-list.hw .pwk.pw .pw-mr:first-child { border-top:0; }
#ayah-pop .al-list.hw .pwk.pw :is(.pw-mt, .pw-mv) { display:grid; gap:2px; min-width:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-mt b { display:block; }
#ayah-pop .al-list.hw .pwk.pw :is(.pw-mt, .pw-mv) > span { font:400 var(--fs-call)/1.3 var(--ds-font); color:var(--q-ink2); }
#ayah-pop .al-list.hw .pwk.pw .pw-mv { text-align:right; }
#ayah-pop .al-list.hw .pwk.pw .pw-mv b { display:block; font:600 var(--fs-head)/1.2 var(--ds-font); font-variant-numeric:tabular-nums; }
#ayah-pop .al-list.hw .pwk.pw .pw-mr.fin .pw-mv b { color:var(--q-acc); }
#ayah-pop .al-list.hw .pwk.pw .pw-date { justify-self:start; min-height:44px; padding:0 12px; border:0; border-radius:var(--r-ctl); background:var(--q-fill); color:var(--q-ink); font:400 var(--fs-body)/1 var(--ds-font); }
/* v1615: Apple smoothness (AL.9) — the live element moves: colours glide (never while the press layer owns the box), the segment's
   thumb slides on the thumb curve, the bar follows it; a shift and the menu grow open on the spring and the pages number rolls
   (plan-week.js) */
#ayah-pop .al-list.hw .pwk.pw :is(.pw-sq, .pw-go, .pw-wk button, .pw-step button):not(.is-press):not(.press-out) { transition:background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
#ayah-pop .al-list.hw .pwk.pw .pw-seg button:not(.is-press):not(.press-out) { transition:color var(--dur-2); }
#ayah-pop .al-list.hw .pwk.pw .pw-bar > span { transition:width var(--dur-3) var(--ease-thumb); }
/* v1641 — #ayah-pop .al-list.hw .pwk.pw lan the week · Track it: the switch, a shift's three answers, #ayah-pop .al-list.hw .pwk.pw art of it's stops, the āyah numbers */
#ayah-pop .al-list.hw .pwk.pw .pw-mode { margin:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-acts.pw-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
#ayah-pop .al-list.hw .pwk.pw .pw-acts.pw-3 .pw-go { flex:none; min-width:0; padding:0 8px; }
#ayah-pop .al-list.hw .pwk.pw .pw-go.pw-alt { background:var(--q-group); color:var(--q-ink); }
#ayah-pop .al-list.hw .pwk.pw .pw-go:disabled { opacity:.45; }
#ayah-pop .al-list.hw .pwk.pw .pw-det .pw-lnk { justify-self:start; padding:0; }
#ayah-pop .al-list.hw .pwk.pw .pw-ph { display:block; font:600 var(--fs-body)/1.25 var(--ds-font); }
#ayah-pop .al-list.hw .pwk.pw .pw-stops { display:grid; gap:8px; }
#ayah-pop .al-list.hw .pwk.pw .pw-stop { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--q-sp); align-items:center; min-height:52px; padding:6px 12px; border:0; border-radius:var(--r-ctl); background:var(--q-group); color:var(--q-ink); text-align:left; }
#ayah-pop .al-list.hw .pwk.pw .pw-sk { font:500 var(--fs-call)/1.2 var(--ds-font); color:var(--q-ink2); white-space:nowrap; }
#ayah-pop .al-list.hw .pwk.pw .pw-ar3 { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:var(--ds-font-quran); font-size:var(--q-ar-22); line-height:1.9; text-align:right; direction:rtl; unicode-bidi:isolate; }
#ayah-pop .al-list.hw .pwk.pw .pw-an { display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; margin:0 .15em; border:1px solid var(--q-ink2); border-radius:var(--r-cap); font:500 var(--fs-cap)/1 var(--ds-font); color:var(--q-ink2); vertical-align:.2em; }
@media (prefers-reduced-motion:reduce) { #ayah-pop .al-list.hw .pwk.pw :is(.pw-seg::before, .pw-bar > span, .pw-sq, .pw-go, .pw-wk button) { transition:none; } }
@media (min-width:700px) { #ayah-pop .al-list.hw .pwk.pw :is(.pw-cols, .pw-day) { grid-template-columns:72px repeat(3, minmax(0, 1fr)); } }