/* styles/mode-win.css — THE MODE WINDOW (v1368, Liquid Glass): one window for every Menu mode.
   v1365 drew it in the Mutashābihāt window's parts; the owner then asked for it "Apple-esque, Liquid Glass-esque"
   (2026-09-27). So: a see-through glass sheet with a specular top edge and concentric corners, round glass buttons
   floating in its corners, a large title, a capsule segmented control with a sliding glass thumb, iOS inset grouped
   lists (a small caption above each group, inset hairlines, checkmarks), capsule chips, and one floating capsule
   button. Colour = the Menu area's (Memorize green, Learn blue, Worship rose, Listen gold), used as the tint: the
   title glyph, the selected thumb's icon, checkmarks, chosen chips and the button — nothing else.
   Phone: rises from the bottom with a grabber. From 744px: a centred glass window. Knobs (--k-*) still apply.
   BUILT BY: modules/tools/mode-win.js (Mithlayn.win.open). Palette: --mk-* (styles/al.css gives .mw the hold windows').
   SAFE TO DELETE: only after no mode opens a .mw. */

.mw-scrim { position:fixed; inset:0; z-index:62; display:none; align-items:flex-end; justify-content:center;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, #1b1812 14%, transparent); }
body.theme-dark .mw-scrim { background:rgba(0,0,0,.42); }
.mw-scrim.show { display:flex; }

/* the tint: the area's colour */
.mw, :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { --mw-on:var(--mk-ink); --mw-on-ink:#fff; --mw-soft:var(--mk-fill); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { --mw-on:var(--mk-st); --mw-soft:var(--mk-st-soft); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim) .dk-win { --mw-on:var(--mk-dr); --mw-soft:var(--mk-dr-soft); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { --mw-on:#8fb0e6; --mw-on-ink:#0f1522; }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim) .dk-win { --mw-on:#7fb592; --mw-on-ink:#10160f; }
.mw[data-area="mem"] { --mw-on:var(--mk-dr); --mw-soft:var(--mk-dr-soft); }
.mw[data-area="learn"] { --mw-on:var(--mk-st); --mw-soft:var(--mk-st-soft); }
.mw[data-area="wor"] { --mw-on:var(--mk-qr); --mw-soft:var(--mk-qr-soft); }
.mw[data-area="lis"] { --mw-on:var(--mk-gold); --mw-soft:var(--mk-gold-soft); }
body.theme-dark .mw[data-area="mem"] { --mw-on:#7fb592; --mw-on-ink:#10160f; }
body.theme-dark .mw[data-area="learn"] { --mw-on:#8fb0e6; --mw-on-ink:#0f1522; }
body.theme-dark .mw[data-area="wor"] { --mw-on:#e38aa0; --mw-on-ink:#22101a; }
body.theme-dark .mw[data-area="lis"] { --mw-on:#d9b56c; --mw-on-ink:#221a08; }

/* the glass: light passes through; a specular edge along the top; one soft shadow */
/* iOS 26: the sheet is frosted and mostly opaque (it must read with or without blur); clear glass is kept for what
   floats on it — the round buttons, the segment track, the main button */
.mw, .mtp, :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { --mw-glass:linear-gradient(160deg, rgba(252,251,247,.88), rgba(244,242,236,.82)); --mw-footbg:rgba(246,244,238,.9);
  --mw-spec:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.18);
  --mw-group:rgba(255,255,255,.94); --mw-fill:rgba(118,118,128,.12); --mw-fill2:rgba(118,118,128,.2); --mw-sep:rgba(60,60,67,.18);
  --mw-ink:var(--mk-ink); --mw-mut:rgba(60,60,67,.62); --mw-btn:rgba(255,255,255,.55); }
body.theme-dark .mw, body.theme-dark .mtp, body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { --mw-glass:linear-gradient(160deg, rgba(44,43,40,.9), rgba(28,27,25,.86)); --mw-footbg:rgba(30,29,27,.92);
  --mw-spec:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.1);
  --mw-group:rgba(66,64,60,.72); --mw-fill:rgba(120,120,128,.24); --mw-fill2:rgba(120,120,128,.34); --mw-sep:rgba(84,84,88,.6);
  --mw-ink:#ece7dc; --mw-mut:rgba(235,235,245,.6); --mw-btn:rgba(120,120,128,.3); }

.mw { position:relative; display:flex; flex-direction:column; width:100%; max-width:560px; max-height:calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
  border-radius:calc(34px * var(--k-radius) / 1.1429); padding:0; overflow:hidden; isolation:isolate;
  background:var(--mw-glass); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:var(--mw-spec), 0 30px 70px -24px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.08);
  color:var(--mw-ink); font:calc(16px * var(--k-type))/1.45 var(--mk-ui); -webkit-font-smoothing:antialiased; outline:none;
  animation:mw-rise .42s cubic-bezier(.2,1,.3,1); }
/* the sheen: a light that lies across the top of the glass */
.mw::before { content:''; position:absolute; inset:0 0 auto 0; height:140px; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.55), transparent 60%); }
body.theme-dark .mw::before { background:radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.07), transparent 60%); }
@keyframes mw-rise { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
@media (min-width:744px) {
  .mw-scrim { align-items:center; padding:24px; }
  .mw { width:min(92vw, 640px); max-width:none; max-height:calc(100dvh - 48px); border-radius:calc(38px * var(--k-radius) / 1.1429); animation-name:mw-pop; }
  @keyframes mw-pop { from { transform:scale(.94); opacity:0; } to { transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce) { .mw { animation:none; } }
@media (prefers-reduced-transparency:reduce) { .mw { background:var(--mk-page); -webkit-backdrop-filter:none; backdrop-filter:none; } .mw::before { display:none; } }
.mw :where(button) { font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mw :where(button, input, select, [tabindex]):focus-visible { outline:2px solid var(--mw-on); outline-offset:2px; }
.mw .ic { width:22px; height:22px; flex:none; }
.mw .ar { font-family:var(--mk-q); direction:rtl; }

/* the head: grabber (phone), floating glass buttons, a large title */
.mw-head { position:relative; flex:none; padding:calc(8px * var(--k-density)) calc(16px * var(--k-density)) calc(6px * var(--k-density)); }
.mw-grab { display:block; width:36px; height:5px; border-radius:3px; margin:0 auto calc(4px * var(--k-density)); background:var(--mw-fill2); }
@media (min-width:744px) { .mw-grab { display:none; } .mw-head { padding-top:calc(14px * var(--k-density)); } }
.mw-bar { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.mw-bar .mw-back, .mw-bar .mw-x { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--mw-ink);
  background:var(--mw-btn); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); box-shadow:var(--mw-spec), 0 4px 12px -6px rgba(0,0,0,.25); }
.mw-bar .mw-back .ic, .mw-bar .mw-x .ic { width:18px; height:18px; stroke-width:2.2; }
.mw-bar .mw-back:active, .mw-bar .mw-x:active { transform:scale(.94); }
.mw-bar .mw-sp { width:44px; }
.mw-tt { display:grid; gap:2px; margin-top:calc(6px * var(--k-density)); }
.mw-title { display:flex; align-items:center; gap:10px; font:800 calc(30px * var(--k-type))/1.12 var(--mk-ui); letter-spacing:-.02em; color:var(--mw-ink); }
.mw-title .ic { width:26px; height:26px; color:var(--mw-on); stroke-width:2; }
.mw-sub { font:500 calc(15px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); }

/* the body scrolls under the floating foot */
.mw-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:calc(8px * var(--k-density)) calc(16px * var(--k-density)) calc(100px * var(--k-density)); }
.mw:not(.has-foot) .mw-body { padding-bottom:calc(20px * var(--k-density)); }

/* the segmented control: a capsule track, a sliding glass thumb */
.mw-tabs { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:3px; margin-bottom:calc(16px * var(--k-density));
  border-radius:999px; background:var(--mw-fill); }
.mw-tabs .mw-thumb { position:absolute; z-index:0; top:3px; bottom:3px; left:3px; border-radius:999px; background:rgba(255,255,255,.92);
  box-shadow:0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04), inset 0 1px 0 #fff; transition:transform .38s cubic-bezier(.3,1.3,.5,1), width .38s; }
body.theme-dark .mw-tabs .mw-thumb { background:rgba(99,99,102,.7); box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.mw-tabs button { position:relative; z-index:1; min-height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 8px;
  font:600 calc(14.5px * var(--k-type))/1.1 var(--mk-ui); color:var(--mw-ink); transition:color .2s; white-space:nowrap; }
.mw-tabs button .ic { width:17px; height:17px; stroke-width:2; }
.mw-tabs button.on .ic { color:var(--mw-on); }
@media (max-width:400px) { .mw-tabs button { font-size:calc(13.5px * var(--k-type)); gap:5px; } .mw-tabs button .ic { width:16px; height:16px; } }

/* inset grouped list: a caption above, the group, a footnote below */
.mw-sec { margin-bottom:calc(20px * var(--k-density)); }
.mw-cap { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 calc(16px * var(--k-density)) calc(7px * var(--k-density));
  font:600 calc(13px * var(--k-type))/1.2 var(--mk-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--mw-mut); }
.mw-cap span { text-transform:none; letter-spacing:0; font-weight:500; }
.mw-group { border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); overflow:hidden; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5); }
body.theme-dark .mw-group { box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06); }
.mw-group.pad { padding:calc(12px * var(--k-density)); }
.mw-foot-note, .mw-hint { margin:calc(7px * var(--k-density)) calc(16px * var(--k-density)) 0; font:500 calc(13px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); }

/* rows: icon · words · value · chevron or check; hairlines inset past the icon */
.mw-row { position:relative; display:flex; align-items:center; gap:calc(12px * var(--k-density)); width:100%; min-height:52px; padding:calc(8px * var(--k-density)) calc(16px * var(--k-density)); text-align:left; }
.mw-row + .mw-row::before { content:''; position:absolute; top:0; right:0; left:calc(60px * var(--k-density)); height:.5px; background:var(--mw-sep); }
.mw-row.noicon + .mw-row.noicon::before, .mw-rows.noicon .mw-row + .mw-row::before { left:calc(16px * var(--k-density)); }
.mw-row:where(button):active { background:var(--mw-fill); }
.mw-ri { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--mw-on); color:#fff; }
body.theme-dark .mw-ri { color:var(--mw-on-ink); }
.mw-ri .ic { width:17px; height:17px; stroke-width:2; }
.mw-ri.soft { background:var(--mw-fill); color:var(--mw-ink); }
.mw-rt { flex:1; min-width:0; display:grid; gap:1px; }
.mw-rt b { font:500 calc(16.5px * var(--k-type))/1.25 var(--mk-ui); }
.mw-rt small { font:400 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); }
.mw-rv { font:400 calc(16px * var(--k-type))/1.2 var(--mk-ui); color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.mw-rv.ar { font:calc(22px * var(--k-type))/1.3 var(--mk-q); color:var(--mw-ink); }
.mw-row .chev { width:15px; height:15px; color:rgba(60,60,67,.3); stroke-width:2.4; }
body.theme-dark .mw-row .chev { color:rgba(235,235,245,.3); }
.mw-row .chk { width:20px; height:20px; color:var(--mw-on); stroke-width:2.6; visibility:hidden; }
.mw-row.on .chk { visibility:visible; }
.mw-row.on .mw-rv:not(.ar) { color:var(--mw-on); font-weight:600; }

/* capsule chips */
.mw-chips { display:flex; flex-wrap:wrap; gap:8px; }
.mw-chips.grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.mw-chips.two { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.mw-chips.four { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.mw-chips button { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--mw-fill); font:600 calc(15px * var(--k-type))/1.15 var(--mk-ui); color:var(--mw-ink); transition:background .2s, color .2s, transform .15s; }
.mw-chips button:active { transform:scale(.96); }
.mw-chips button.on { background:var(--mw-on); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -6px var(--mw-on); }
body.theme-dark .mw-chips button.on { color:var(--mw-on-ink); }
.mw-chips button .ar { font-size:calc(22px * var(--k-type)); line-height:1; }
.mw-chips button .chk { width:15px; height:15px; stroke-width:2.8; display:none; }
.mw-chips.multi button.on .chk { display:block; }
.mw-dot { width:10px; height:10px; border-radius:50%; flex:none; }

/* a stepper (iOS: − | + in one capsule) */
.mw-step { display:inline-flex; align-items:center; border-radius:999px; background:var(--mw-fill); }
.mw-step button { width:46px; height:44px; font:500 calc(22px * var(--k-type))/1 var(--mk-ui); color:var(--mw-ink); }
.mw-step button + output + button { box-shadow:inset .5px 0 0 var(--mw-sep); }
.mw-step output { min-width:52px; text-align:center; font:600 calc(17px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; box-shadow:inset .5px 0 0 var(--mw-sep); }

/* the foot floats: one capsule button on the glass */
.mw-foot { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; gap:var(--q-sp, 12px); align-items:center;   /* audit D2-25: two capsules 12 apart (Search's Open p.42 · Drill) */
  padding:calc(12px * var(--k-density)) calc(16px * var(--k-density)) calc(14px * var(--k-density));
  background:linear-gradient(to top, var(--mw-footbg) 55%, transparent); }
.mw-foot[hidden] { display:none; }
.mw-go { flex:1; min-height:54px; border-radius:999px; background:var(--mw-on); color:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
  font:700 calc(17px * var(--k-type))/1 var(--mk-ui); letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 24px -10px var(--mw-on); transition:transform .15s; }
body.theme-dark .mw-go { color:var(--mw-on-ink); }
.mw-go:active { transform:scale(.97); }
.mw-go .ic { width:19px; height:19px; stroke-width:2.2; }
.mw-alt { min-height:54px; padding:0 22px; border-radius:999px; background:var(--mw-btn); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--mw-spec);
  font:600 calc(16px * var(--k-type))/1 var(--mk-ui); color:var(--mw-ink); }
.mw-note { position:absolute; left:0; right:0; bottom:calc(76px * var(--k-density)); z-index:2; margin:0; padding:0 24px; font:500 calc(12px * var(--k-type))/1.35 var(--mk-ui); color:var(--mw-mut); text-align:center; pointer-events:none; }
.mw.has-note .mw-body { padding-bottom:calc(130px * var(--k-density)); }

/* ══ WAVE 1 (v1369) — the six legacy .dk-win windows, drawn as the mode window ══════════════════════════════
   Planner, Page Context, Quiz, Makharij & Sifat, Tajwid Rules and PDFs each build their own .dk-win; converting their
   shared shell and parts centrally (not module by module) moves all six at once and leaves their logic untouched.
   Scoped by the six windows' own ids, doubled, so it outranks each module's injected <style> without !important.
   The other .dk-win users (Hifz, Time split, Dunya, Speech, …) keep the old shell until their wave.
   v1492 audit #48: Study (#study-scrim, v1473 — the same course window as Makhārij) joins every list in this file; it
   had been left on the old bordered shell (square ‹ Learn, narrower card, dock over its corner). */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) { background:color-mix(in srgb, #1b1812 14%, transparent); -webkit-backdrop-filter:none; backdrop-filter:none; }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) { background:rgba(0,0,0,.42); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim).show { display:flex; align-items:flex-end; justify-content:center; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:744px) { :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim).show { align-items:center; padding:24px; } }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { position:relative; display:flex; flex-direction:column; width:100%; max-width:560px; height:auto; max-height:calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
  margin:0; border:0; padding:0; overflow:hidden; isolation:isolate; border-radius:calc(34px * var(--k-radius) / 1.1429);
  background:var(--mw-glass); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:var(--mw-spec), 0 30px 70px -24px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.08);
  color:var(--mw-ink); font:calc(16px * var(--k-type))/1.45 var(--f-ui); -webkit-font-smoothing:antialiased; animation:mw-rise .42s cubic-bezier(.2,1,.3,1); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win::before { content:''; position:absolute; inset:0 0 auto 0; height:140px; z-index:-1; pointer-events:none; background:radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.55), transparent 60%); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win::before { background:radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.07), transparent 60%); }
@media (min-width:744px) { :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { width:min(92vw, 640px); max-width:none; max-height:calc(100dvh - 48px); border-radius:calc(38px * var(--k-radius) / 1.1429); animation-name:mw-pop; } }
/* v1492 audit #37 #38 #39: Quiz, Tajwīd Rules, PDFs and Study swap their whole body (Read ↔ Drill, Read ↔ Recent, a
   question ↔ its answer, drill card ↔ revealed card); a content-sized sheet then shrank/grew and re-anchored, so the
   header and buttons jumped up to ~500px and the next tap landed on the scrim and closed the window. They keep one
   height (the modules' own min(93vh, …) intent): the body scrolls inside it instead. */
:is(#qz-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#qz-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { height:calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)); }
@media (min-width:744px) { :is(#qz-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#qz-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { height:min(calc(100dvh - 48px), 1040px); } }
@media (prefers-reduced-motion:reduce) { :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { animation:none; } }
@media (prefers-reduced-transparency:reduce) { :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win { background:var(--mk-page); -webkit-backdrop-filter:none; backdrop-filter:none; } }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-win :where(button, input, select):focus-visible { outline:2px solid var(--mw-on); outline-offset:2px; }

/* the head: a grabber on the phone, round glass buttons, the large title with its one-line sub */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-head { position:relative; flex:none; display:block; min-height:0; margin:0; border:0; background:none; padding:calc(58px * var(--k-density)) calc(16px * var(--k-density)) calc(8px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-head.study-hd { padding-top:calc(10px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-head::before { content:''; position:absolute; left:50%; top:8px; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:var(--mw-fill2); }
@media (min-width:744px) { :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-head::before { display:none; } }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-x, :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .study-back { display:grid; place-items:center; min-width:44px; height:44px; padding:0; border:0; border-radius:999px; color:var(--mw-ink);
  background:var(--mw-btn); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); box-shadow:var(--mw-spec), 0 4px 12px -6px rgba(0,0,0,.25);
  font:600 calc(17px * var(--k-type))/1 var(--f-ui); cursor:pointer; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-head:not(.study-hd) > .dk-x { position:absolute; top:calc(14px * var(--k-density)); right:calc(14px * var(--k-density)); width:44px; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-x { width:44px; font-size:0; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-x::before { content:''; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .study-back { padding:0 14px 0 10px; font-size:calc(15.5px * var(--k-type)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .study-top { display:flex; align-items:center; gap:10px; margin:0 0 calc(10px * var(--k-density)); padding:0; border:0; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .study-top .dk-x { margin-inline-start:auto; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-ttl { display:block; margin:0; padding:0; font:800 calc(30px * var(--k-type))/1.12 var(--f-ui); letter-spacing:-.02em; color:var(--mw-ink); text-transform:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .study-fact { display:block; margin-top:2px; font:500 calc(15px * var(--k-type))/1.3 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--mw-mut); }

/* segmented controls (Read · Drill, To review · Mark, Sūrah · Juzʾ · Custom): a capsule track, a glass thumb */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.study-seg, .p2-tabs, .pc-seg) { display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:3px; margin:0; border:0; border-radius:999px; background:var(--mw-fill); box-shadow:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.p2-tabs, .pc-seg) { display:grid; width:100%; margin-bottom:calc(14px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.study-seg, .p2-tabs, .pc-seg) > button { min-height:44px; padding:0 16px; border:0; border-radius:999px; background:none; box-shadow:none; color:var(--mw-ink); font:600 calc(14.5px * var(--k-type))/1 var(--f-ui); text-transform:none; letter-spacing:0; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.p2-tabs, .pc-seg) > button { min-height:44px; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.study-seg, .p2-tabs, .pc-seg) > button.on { background:rgba(255,255,255,.95); color:var(--mw-ink); box-shadow:0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.study-seg, .p2-tabs, .pc-seg) > button.on { background:rgba(99,99,102,.7); }

/* the body */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .dk-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; margin:0; border:0; background:none; padding:calc(6px * var(--k-density)) calc(16px * var(--k-density)) calc(24px * var(--k-density)); }

/* captions above groups; footnotes */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.qz-label, .stw-lbl, .pdfx-g, .pc-setup-h, .sp-cap) { display:block; margin:calc(18px * var(--k-density)) calc(16px * var(--k-density)) calc(7px * var(--k-density)); padding:0; border:0; background:none;
  font:600 calc(13px * var(--k-type))/1.25 var(--f-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--mw-mut); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.tjr-intro, .pdfx-intro, .qz-help, .pc-goal, .p2-empty) { margin:calc(4px * var(--k-density)) calc(16px * var(--k-density)) calc(10px * var(--k-density)); padding:0; border:0; background:none; font:500 calc(14px * var(--k-type))/1.45 var(--f-ui); color:var(--mw-mut); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .p2-empty { text-align:center; padding:calc(24px * var(--k-density)) 0; }

/* inset grouped lists: consecutive rows join into one white group, hairlines inset */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-card, .pdfx-card) { display:block; width:100%; margin:0; border:0; border-radius:0; background:var(--mw-group); box-shadow:none; text-align:left; position:relative; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-card, .pdfx-card):not(:is(.stw-card, .pdfx-card) + *) { border-top-left-radius:calc(22px * var(--k-radius) / 1.1429); border-top-right-radius:calc(22px * var(--k-radius) / 1.1429); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-card, .pdfx-card):is(:last-child, :has(+ :not(.stw-card, .pdfx-card))) { border-bottom-left-radius:calc(22px * var(--k-radius) / 1.1429); border-bottom-right-radius:calc(22px * var(--k-radius) / 1.1429); margin-bottom:calc(6px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-card, .pdfx-card) + :is(.stw-card, .pdfx-card)::before { content:''; position:absolute; top:0; right:0; left:calc(16px * var(--k-density)); height:.5px; background:var(--mw-sep); z-index:1; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-card + .pdfx-card::before { left:calc(58px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-ch, :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-card { display:flex; align-items:center; gap:calc(12px * var(--k-density)); min-height:56px; padding:calc(9px * var(--k-density)) calc(16px * var(--k-density)); background:none; border:0; cursor:pointer; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-ch > div:first-child, :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-m { flex:1; min-width:0; display:grid; gap:1px; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-en, .pdfx-m b) { margin:0; font:500 calc(16.5px * var(--k-type))/1.25 var(--f-ui); color:var(--mw-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-meta, .pdfx-m small) { margin:0; font:400 calc(13.5px * var(--k-type))/1.3 var(--f-ui); color:var(--mw-mut); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-grp { display:flex; align-items:center; gap:10px; flex:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-ar { font:calc(22px * var(--k-type))/1.4 var(--f-quran); color:var(--mw-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-chev, .pdfx-go) { color:rgba(60,60,67,.3); font:600 22px/1 var(--f-ui); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-chev, .pdfx-go) { color:rgba(235,235,245,.3); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--mw-on); color:#fff; }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-ic { color:var(--mw-on-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-ic svg { width:17px; height:17px; }
/* an opened Makharij region: its points as rows, its letters as capsules */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-pts { display:grid; gap:0; padding:0 calc(16px * var(--k-density)) calc(10px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-pt { display:flex; align-items:center; gap:10px; min-height:48px; border-top:.5px solid var(--mw-sep); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-dot { width:10px; height:10px; border-radius:50%; background:var(--mw-on); flex:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-pn { flex:1; margin:0; font:500 calc(15px * var(--k-type))/1.3 var(--f-ui); color:var(--mw-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-lt { min-width:44px; height:44px; border:0; border-radius:999px; background:var(--mw-fill); color:var(--mw-ink); font:calc(22px * var(--k-type))/1 var(--f-quran); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .stw-lt:is(.on, [aria-pressed="true"]) { background:var(--mw-on); color:#fff; }

/* choices as capsules (Quiz's options) */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-row { margin:0; padding:0; border:0; background:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-opts { display:flex; flex-wrap:wrap; gap:8px; padding:calc(12px * var(--k-density)); border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-opt { flex:1 1 auto; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--mw-fill); box-shadow:none; color:var(--mw-ink); font:600 calc(15px * var(--k-type))/1.15 var(--f-ui); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-opt.on { background:var(--mw-on); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -6px var(--mw-on); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-opt.on { color:var(--mw-on-ink); }
/* a range: rows with a trailing picker */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.qz-rng, .pc-setup-card, .hub-spine) { margin:0 0 calc(6px * var(--k-density)); padding:calc(4px * var(--k-density)) 0; border:0; border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); box-shadow:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-setup-card { padding:calc(12px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-setup-card .pc-setup-h { margin:calc(2px * var(--k-density)) calc(4px * var(--k-density)) calc(10px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-rngrow { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 calc(16px * var(--k-density)); position:relative; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-rngrow + .qz-rngrow::before { content:''; position:absolute; top:0; left:calc(16px * var(--k-density)); right:0; height:.5px; background:var(--mw-sep); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-rngrow label { flex:1; font:500 calc(16.5px * var(--k-type))/1.2 var(--f-ui); color:var(--mw-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.qz-sel, .pc-sel, .qz-num) { min-height:44px; /* v1492 audit #57: 44, the tap floor (was 40) */ max-width:62%; padding:0 14px; border:0; border-radius:999px; background:var(--mw-fill); color:var(--mw-ink); font:500 calc(15.5px * var(--k-type))/1 var(--f-ui); -webkit-appearance:none; appearance:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-sel { width:100%; max-width:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .qz-num { width:72px; text-align:center; font-variant-numeric:tabular-nums; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-add { display:grid; gap:8px; padding:calc(12px * var(--k-density)); margin-top:calc(10px * var(--k-density)); border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-in { min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--mw-fill); color:var(--mw-ink); font:500 calc(15.5px * var(--k-type))/1 var(--f-ui); }
/* the week (Planner) */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .hub-spine .sp-wk { display:flex; justify-content:space-between; align-items:baseline; padding:calc(8px * var(--k-density)) calc(16px * var(--k-density)) 0; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .hub-spine .sp-cap { margin:0; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .sp-range { font:500 calc(13.5px * var(--k-type))/1.2 var(--f-ui); color:var(--mw-mut); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .sp-sum { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:0 calc(16px * var(--k-density)); border:0; background:none; text-align:left; font:500 calc(15.5px * var(--k-type))/1.3 var(--f-ui); color:var(--mw-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .sp-go { color:var(--mw-on); font-weight:600; white-space:nowrap; }
/* Page Context's welcome */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-hero { display:grid; justify-items:center; gap:4px; padding:calc(8px * var(--k-density)) 0 calc(14px * var(--k-density)); text-align:center; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-hero svg { color:var(--mw-on); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-hero-sub { font:500 calc(15px * var(--k-type))/1.4 var(--f-ui); color:var(--mw-mut); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 0 calc(12px * var(--k-density)); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-step { display:grid; justify-items:center; gap:6px; padding:calc(12px * var(--k-density)) 6px; border-radius:calc(18px * var(--k-radius) / 1.1429); background:var(--mw-group); text-align:center; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-step-n { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--mw-on); color:#fff; font:700 calc(14px * var(--k-type))/1 var(--f-ui); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-step-n { color:var(--mw-on-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pc-step-t { font:600 calc(13.5px * var(--k-type))/1.25 var(--f-ui); color:var(--mw-ink); }

/* the main action: a capsule in the tint */
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.qz-start, .pdfx-addb, .pc-begin, .pc-go) { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; margin-top:calc(16px * var(--k-density)); padding:0 22px; border:0; border-radius:999px;
  background:var(--mw-on); color:#fff; font:700 calc(17px * var(--k-type))/1 var(--f-ui); letter-spacing:-.01em; text-transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 24px -10px var(--mw-on); }
body.theme-dark :is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.qz-start, .pdfx-addb, .pc-begin, .pc-go) { color:var(--mw-on-ink); }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) .pdfx-addb { min-height:48px; margin-top:0; }

/* while a mode window is open, the page's own floating buttons (Menu, search, the page pill) step away: they sat
   above the window and covered its close button */
body:has(:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim).show, .mw-scrim.show) :is(.al-dock, .al-dock-search, #pill) { display:none; }
:is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim):is(#progress-scrim,#pc-scrim,#qz-scrim,#mkh-scrim,#tjr-scrim,#pdfs-scrim,#study-scrim) :is(.stw-pd, .stw-desc, .stw-body > p) { margin:0; padding:calc(2px * var(--k-density)) calc(16px * var(--k-density)) calc(8px * var(--k-density)); font:500 calc(14px * var(--k-type))/1.45 var(--f-ui); color:var(--mw-mut); }