/* Layout: one calm column; the scripture centred, the counter under the thumb. */
/* Colour: warm neutrals (paper, not navy) and ONE accent, chosen by the user from five misbaha materials.
   Each material defines its light and dark accent and the bead colours the strand reads (--bead, --bead-thread, --bead-imam, --bead-marker).
   Completion uses the same accent: a state, not a second hue. */
:root{
  --surface:#f7f5f0; --surface-raised:#ffffff; --surface-sunken:#ece9e2;
  --line:#e3dfd6; --line-strong:#8a847a;
  --ink:#1f1b17; --ink-muted:#625b53; --ink-faint:#948c82;
  --accent:var(--l-accent); --accent-strong:var(--l-strong); --accent-soft:var(--l-soft); --on-accent:#ffffff;
  --bead:var(--l-bead); --bead-thread:var(--l-thread); --bead-imam:var(--bead); --bead-marker:var(--l-marker);
  --shadow-raised:0 1px 2px rgba(31,27,23,.05),0 6px 20px rgba(31,27,23,.06);
  --shadow-float:0 2px 4px rgba(31,27,23,.06),0 16px 48px rgba(31,27,23,.10);
  --scrim:rgba(31,27,23,.32);
  /* depth in light, the way dark gets it from a lit top edge: one light from above, so a pressable thing is white at the top
     easing to warm paper at its foot, a bright line along its top inside, a faint shade along its bottom inside where it
     turns away, then a hairline, a tight contact shadow and a long soft one */
  --chip:#ffffff; --chip-press:#f1eee8; --chip-ink:#1f1b17; --chip-weight:500;
  --chip-fill:linear-gradient(180deg,#ffffff 0%,#fbf9f5 100%);
  --chip-edge:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(31,27,23,.045),0 0 0 .5px rgba(31,27,23,.10),0 1px 1.5px rgba(31,27,23,.07),0 3px 8px -3px rgba(31,27,23,.10); --tag:var(--accent-soft);
  /* home cards and glass: a hairline, a contact shadow and a long soft one under a single light from above */
  --card-edge:inset 0 1px 0 #fff,0 0 0 .5px rgba(31,27,23,.08),0 1px 2px rgba(31,27,23,.05),0 10px 26px -12px rgba(31,27,23,.18);
  --hair:rgba(31,27,23,.065);
  /* the day's four tiles stand a step further off the page than the chips */
  --tile-fill:linear-gradient(180deg,#ffffff 0%,#f9f6f1 100%);
  --tile-edge:inset 0 1px 0 #fff,inset 0 -1.5px 1px -.5px rgba(31,27,23,.06),0 0 0 .5px rgba(31,27,23,.10),0 1px 2px rgba(31,27,23,.07),0 3px 8px -4px rgba(31,27,23,.07),0 10px 22px -12px rgba(31,27,23,.15);
  --glass:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(246,243,238,.90) 100%);
  --glass-edge:inset 0 1px 0 #fff,inset 0 -1.5px 1px -.5px rgba(31,27,23,.07),0 0 0 .5px rgba(31,27,23,.11),0 1px 2px rgba(31,27,23,.09),0 6px 16px -6px rgba(31,27,23,.22);
  --font-quran:"Azkari Brackets","KFGQPC Uthmanic Script HAFS","Scheherazade New",serif;
  --font-sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  --dir:1; --fast:160ms; --base:240ms; --slow:480ms; --screen:340ms; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.64,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#121110; --surface-raised:#1b1917; --surface-sunken:#0b0a09;
  --line:#2a2724; --line-strong:#605a53;
  --ink:#ece7df; --ink-muted:#a9a299; --ink-faint:#6f6960;
  --accent:var(--d-accent); --accent-strong:var(--d-strong); --accent-soft:var(--d-soft); --on-accent:#121110;
  --bead:var(--d-bead); --bead-thread:var(--d-thread); --bead-marker:var(--d-marker);
  --shadow-raised:0 1px 2px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.45);
  --shadow-float:0 2px 4px rgba(0,0,0,.5),0 16px 48px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.55); color-scheme:dark;
  --chip:#1e1c1a; --chip-fill:var(--chip); --tile-fill:var(--chip); --tile-edge:var(--card-edge); --chip-press:#292724; --chip-ink:#d6d0c7; --chip-weight:450; --chip-edge:inset 0 .5px 0 rgba(255,255,255,.07),0 0 0 .5px rgba(255,255,255,.035);
  --card-edge:inset 0 .5px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(255,255,255,.04),0 10px 28px -12px rgba(0,0,0,.7);
  --hair:rgba(255,255,255,.055); --glass:rgba(255,255,255,.07); --glass-edge:inset 0 .5px 0 rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.05),0 6px 16px -6px rgba(0,0,0,.6); --tag:color-mix(in srgb,var(--accent-soft) 88%,var(--accent)) }}
:root[data-theme="dark"]{
  --surface:#121110; --surface-raised:#1b1917; --surface-sunken:#0b0a09;
  --line:#2a2724; --line-strong:#605a53;
  --ink:#ece7df; --ink-muted:#a9a299; --ink-faint:#6f6960;
  --accent:var(--d-accent); --accent-strong:var(--d-strong); --accent-soft:var(--d-soft); --on-accent:#121110;
  --bead:var(--d-bead); --bead-thread:var(--d-thread); --bead-marker:var(--d-marker);
  --shadow-raised:0 1px 2px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.45);
  --shadow-float:0 2px 4px rgba(0,0,0,.5),0 16px 48px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.55); color-scheme:dark;
  --chip:#1e1c1a; --chip-fill:var(--chip); --tile-fill:var(--chip); --tile-edge:var(--card-edge); --chip-press:#292724; --chip-ink:#d6d0c7; --chip-weight:450; --chip-edge:inset 0 .5px 0 rgba(255,255,255,.07),0 0 0 .5px rgba(255,255,255,.035);
  --card-edge:inset 0 .5px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(255,255,255,.04),0 10px 28px -12px rgba(0,0,0,.7);
  --hair:rgba(255,255,255,.055); --glass:rgba(255,255,255,.07); --glass-edge:inset 0 .5px 0 rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.05),0 6px 16px -6px rgba(0,0,0,.6); --tag:color-mix(in srgb,var(--accent-soft) 88%,var(--accent)) }
/* the five materials: sandalwood is the default */
:root,:root[data-accent="sandalwood"]{--l-accent:#7a5230;--l-strong:#5e3d21;--l-soft:#f1e7db;--d-accent:#d8b48e;--d-strong:#e8caa9;--d-soft:#2d2318;--l-bead:#b48350;--l-thread:#6a4526;--d-bead:#bb8a56;--d-thread:#7a5330;--l-marker:#6a4526;--d-marker:#d8b48e}
:root[data-accent="olive"]{--l-accent:#5a6b3a;--l-strong:#46542c;--l-soft:#e9ecdd;--d-accent:#b7c48f;--d-strong:#c9d4a6;--d-soft:#23281a;--l-bead:#83915f;--l-thread:#4f5a34;--d-bead:#8c9a68;--d-thread:#5a663c;--l-marker:#4f5a34;--d-marker:#b7c48f}
:root[data-accent="turquoise"]{--l-accent:#2d7a78;--l-strong:#215f5d;--l-soft:#dcecea;--d-accent:#7fc4c0;--d-strong:#9ed6d2;--d-soft:#15302f;--l-bead:#54a8a2;--l-thread:#2a6d69;--d-bead:#5db0aa;--d-thread:#327c77;--l-marker:#2a6d69;--d-marker:#7fc4c0}
:root[data-accent="rose"]{--l-accent:#a35a6a;--l-strong:#84465a;--l-soft:#f5e4e7;--d-accent:#e2a3b0;--d-strong:#efbcc6;--d-soft:#33202a;--l-bead:#d0979e;--l-thread:#8d5560;--d-bead:#d49ea5;--d-thread:#9a606b;--l-marker:#8d5560;--d-marker:#e2a3b0}
:root[data-accent="onyx"]{--l-accent:#3a3733;--l-strong:#1f1b17;--l-soft:#e8e5e0;--d-accent:#d6d0c8;--d-strong:#ece7df;--d-soft:#2a2724;--l-bead:#3b3835;--l-thread:#262321;--d-bead:#4a4642;--d-thread:#33302c;--l-marker:#262321;--d-marker:#9a948c}
/* the scripture face is a subset cut by tools/fonts/subset.py to the glyphs the texts use */
/* IBM Plex Sans and Plex Sans Arabic (OFL, fonts/OFL-IBM-Plex.txt), served with the app instead of from Google, so the first paint waits on no other server. Plex Sans is one variable file per alphabet (Latin, Latin Extended, Cyrillic); Plex Sans Arabic one file per weight. A page fetches only the alphabets and weights it shows */
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex/plex-sans-latin.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex/plex-sans-latin-ext.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex/plex-sans-cyrillic.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex/plex-sans-cyrillic-ext.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/plex/plex-arabic-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/plex/plex-arabic-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/plex/plex-arabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/plex/plex-arabic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"KFGQPC Uthmanic Script HAFS";src:url("../fonts/hafs.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
/* the mushaf brackets ﴿ ﴾ are not in the HAFS face: without this every phone drew them in its own system font. The two glyphs come from Amiri Quran (OFL, fonts/OFL-Amiri.txt) and this face is consulted for them alone */
@font-face{font-family:"Azkari Brackets";src:url("../fonts/brackets.woff2") format("woff2");unicode-range:U+FD3E-FD3F;font-display:block}

html[dir="rtl"]{--dir:-1}
html,body{height:100%;overflow:hidden}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color var(--slow) var(--ease),color var(--slow) var(--ease),border-color var(--slow) var(--ease),fill var(--slow) var(--ease),stroke var(--slow) var(--ease),box-shadow var(--slow) var(--ease)!important}
html{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}   /* like an app: nothing is selected by a stray finger; a long press on a block copies it (js/app.js) */
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* chapter and group icons: the same stroke grammar, a shade lighter than text */
svg.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--ink-muted)}
html[dir="rtl"] svg.ico.flip{transform:scaleX(-1)}

.app{max-width:480px;margin:0 auto;height:100%;position:relative;display:grid;grid-template:100% / 100%}
@media (min-width:600px){.app{box-shadow:1px 0 0 var(--line),-1px 0 0 var(--line)}}
.screen{display:none;grid-area:1/1;position:relative;isolation:isolate;height:100%;min-height:0;padding-inline:16px;overflow:hidden;background:var(--surface)}   /* isolated: a bar lifted over its own scroll fade stays inside its screen */
.scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.screen.active,.screen.leaving{display:grid}
.screen.leaving{pointer-events:none}
.screen.top{z-index:2}
.screen.in-fwd{animation:in-fwd var(--screen) var(--ease) both}
.screen.out-fwd{animation:out-fwd var(--screen) var(--ease) both}
.screen.in-back{animation:in-back var(--screen) var(--ease) both}
.screen.out-back{animation:out-back var(--screen) var(--ease) both}
.screen.in-up{animation:in-up var(--screen) var(--ease) both}
.screen.out-up{animation:out-up var(--screen) var(--ease) both}
.screen.in-down{animation:in-down var(--screen) var(--ease) both}
.screen.out-down{animation:out-down var(--screen) var(--ease) both}
@keyframes in-fwd{from{opacity:0;transform:translateX(calc(48px * var(--dir)))}}
@keyframes out-fwd{to{opacity:.4;transform:translateX(calc(-28px * var(--dir)))}}
@keyframes in-back{from{opacity:.4;transform:translateX(calc(-28px * var(--dir)))}}
@keyframes out-back{to{opacity:0;transform:translateX(calc(48px * var(--dir)))}}
@keyframes in-up{from{opacity:0;transform:translateY(40px)}}
@keyframes out-up{to{opacity:.4;transform:scale(.97)}}
@keyframes in-down{from{opacity:.4;transform:scale(.97)}}
@keyframes out-down{to{opacity:0;transform:translateY(40px)}}

/* type */
.title{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.01em}
.heading{font-size:18px;line-height:24px;font-weight:500}
.secondary{font-size:14px;line-height:20px;color:var(--ink-muted)}
.label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{height:48px;padding:0 24px;border-radius:999px;font-size:15px;line-height:20px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.ghost{color:var(--ink-muted);padding:0 12px;height:40px}
.btn.ghost:hover{color:var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:var(--ink);transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.icon-btn:active{transform:scale(.9)}
/* the finger's target is 56px though the circle stays 40: a transparent ring around each icon button takes the tap.
   The home bar's two glass buttons split the gap between them (see Home) */
.icon-btn{position:relative}
.icon-btn::after{content:"";position:absolute;inset:-8px;border-radius:999px}
.icon-btn:hover{background:var(--surface-sunken)}
/* the bar's controls take the accent, as a native navigation bar tints its buttons; the title stays in ink */
.bar .icon-btn{color:var(--accent)}
.bar .icon-btn:active{color:var(--accent-strong)}
/* the bar's rings also reach up to the screen's top edge (the screen clips them there): a thumb that overshoots the icon
   still lands on it, and the back button and the gear own their corners */
.bar .icon-btn::after{top:-24px}
/* the same for the smaller controls: each answers to about 48px though it looks no bigger. Where two sit side by side
   the rings split the gap between them, so a touch is never taken from a neighbour */
.btn.listen,.mx,.search .clear,.swatch,#skipBtn{position:relative}
.btn.listen::after,.mx::after{content:"";position:absolute;inset:-4px}   /* 40 → 48 */
.search .clear::after{content:"";position:absolute;inset:-8px}   /* 28 → 44, the pill's full height */
.swatch::after{content:"";position:absolute;inset:-9px -5px}   /* 26 → 36 × 44; the swatches sit 10px apart */
.mini-seg button::after{content:"";position:absolute;inset:-7px 0}   /* 30 → 44 tall; side by side they already touch */
.mini-seg button:first-of-type::after{inset-inline-start:-3px}
.mini-seg button:last-of-type::after{inset-inline-end:-3px}
/* Skip grows sideways and down only: just above it the strand counts, and a count must never become a skip */
#skipBtn::after{content:"";position:absolute;inset:0 -8px -12px}

/* ---------- Home ---------- */
/* the home is the map of the book: the bar stays, the chips scroll under it to the screen's edge. Drawn like a native
   2026 app: a large title, glass buttons, the day's routines as tiles with an activity ring, the rest as capsules */
#home{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);gap:4px;padding-block:20px 0}
.bar.home{margin-inline:0;column-gap:10px;min-height:44px}
.bar.home .title{padding-inline-start:2px;font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.03em}
html[dir="rtl"] .bar.home .title{font-weight:500;font-size:32px}   /* Plex Sans Arabic is served up to 500 */
/* the bar's buttons are glass: a translucent disc with a lit top edge, its icon in the accent */
.bar.home .icon-btn{width:40px;height:40px;background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.bar.home .icon-btn svg{width:21px;height:21px}
.bar.home .icon-btn:hover{background:var(--chip-press)}
.bar.home .icon-btn::after{inset-inline:-5px}
.bar.home .icon-btn:nth-child(2)::after{inset-inline-start:-12px}
.bar.home .icon-btn:last-child::after{inset-inline-end:-16px}
.hgrid{margin-inline:-16px;padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
/* the scroll edge: the map fades out under the bar rather than being cut */
.hgrid::before{content:"";display:block;position:sticky;top:-16px;height:16px;margin:-16px 0 0;background:linear-gradient(var(--surface),transparent);pointer-events:none;z-index:2}   /* at rest it lies over the empty padding */
.hsec+.hsec{padding-top:30px}
/* a section's name is a heading in sentence case; across from the day and the night, today's Hijri date in quiet ink */
.hlab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px 12px}
.hlab .label{flex:none;font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
html[dir="rtl"] .hlab .label{font-size:19px;font-weight:500;letter-spacing:0}
.hdate{min-width:0;font-size:14px;line-height:18px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;column-gap:8px;margin-bottom:-9px}   /* the rows' 9px is each chip's own margin, so a line break adds none */
/* a chip: a capsule lifted off the paper. In light it is white with a hairline and a soft contact shadow; in dark a step
   above the page with a faint lit top edge (a darker chip reads as a hole), its text softened to the light theme's contrast.
   The icons take the accent, as the bar's do. An invisible band takes the tap at 44px, splitting the gaps with its neighbours */
.chip-o{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:100%;height:36px;padding:0 13px 0 10px;border-radius:999px;background:var(--chip-fill);box-shadow:var(--chip-edge);font-size:13.5px;line-height:18px;font-weight:var(--chip-weight);letter-spacing:-.004em;color:var(--chip-ink);white-space:nowrap;margin-bottom:9px;transition:transform var(--base) var(--spring),background var(--fast) var(--ease)}
.chip-o::after{content:"";position:absolute;inset:-4px -4px}
.chip-o:active{transform:scale(.95);background:var(--chip-press);transition-duration:var(--fast)}
@media (hover:hover){.chip-o:hover{background:var(--chip-press)}}
html[dir="rtl"] .chip-o{padding:0 10px 0 13px;font-size:14.5px;letter-spacing:0}
.chip-o svg.ico{width:18px;height:18px;color:var(--accent)}
.chip-o .cn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.chip-o .cp{color:var(--ink-faint);font-weight:400}
/* a routine done today: its name recedes and a small check in the accent closes it */
.chip-o.done{color:var(--ink-muted)}
.chip-o.done svg.ico{color:var(--ink-faint)}
.chip-o .ck{width:14px;height:14px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the wird: the reader's own adhkar as tiles two by two, like widgets, an odd last one standing at half width. The icon sits
   on a disc in the accent tint, the ring at the far corner fills with today's progress and closes on a check, the name
   stands at the foot (a long book title takes a second line). Only the wird has tiles and rings; the map is capsules. */
.chips.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:0}
.chip-o.tile{display:grid;grid-template:"ic st" auto "cn cn" 1fr / auto 1fr;align-items:start;gap:0;height:auto;min-height:96px;margin:0;padding:12px 12px 13px 14px;border-radius:22px;background:var(--tile-fill);box-shadow:var(--tile-edge);white-space:normal;text-align:start}
html[dir="rtl"] .chip-o.tile{padding:12px 14px 13px 12px}
.chip-o.tile::after{inset:-5px}
.chip-o.tile:active{transform:scale(.97);background:var(--chip-press)}
@media (hover:hover){.chip-o.tile:hover{background:var(--chip-press)}}
.tile .tic{grid-area:ic;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--tag)}
.tile .tic svg.ico{width:21px;height:21px}
.tile .tst{grid-area:st;justify-self:end;display:flex;align-items:center;gap:6px;height:24px}
.tile .cn{grid-area:cn;align-self:end;padding-top:12px;font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
html[dir="rtl"] .tile .cn{font-weight:500;font-size:16.5px;letter-spacing:0}
.wempty{margin:0;padding:0 2px;max-width:34ch;font-size:14px;line-height:20px;text-wrap:pretty}
.tile .cp{font-size:13px;line-height:17px;font-weight:500;color:var(--ink-muted)}
.tile.done .cn{color:var(--ink-muted)}
.tile.done .tic{background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* the ring: a track in the accent tint and an arc that fills the way the script reads; full, it is a disc with a check */
.tile .ring{width:24px;height:24px;overflow:visible;transform:rotate(-90deg)}
html[dir="rtl"] .tile .ring{transform:rotate(-90deg) scaleY(-1)}
.ring circle{fill:none;stroke-width:3}
.ring .tr{stroke:color-mix(in srgb,var(--accent) 16%,transparent)}
.ring .ar{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset var(--slow) var(--ease)}
.ring .ar[stroke-dashoffset="56.55"]{stroke:none}   /* nothing yet: the bare track, without the arc's round cap */
.ring .tk{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:rotate(90deg);transform-origin:12px 12px}
.ring.full .tr{fill:var(--accent);stroke:var(--accent)}
.ring.full .tk{opacity:1}
html[dir="rtl"] .ring .tk{transform:rotate(90deg) scaleX(-1)}
/* the whole book, the last thing on the map: a card with its icon on an accent tile, like a row of a native list */
.brow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 14px;margin-top:36px;border-radius:22px;background:var(--chip);box-shadow:var(--card-edge);text-align:start;transition:transform var(--base) var(--spring),background var(--fast) var(--ease)}
.brow:active{transform:scale(.98);background:var(--chip-press);transition-duration:var(--fast)}
@media (hover:hover){.brow:hover{background:var(--chip-press)}}
.brow .bic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 60%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 2px 6px -2px color-mix(in srgb,var(--accent) 60%,transparent)}
.brow .bic svg.ico{width:24px;height:24px;color:var(--on-accent)}
.brow .bn{display:grid;font-size:16px;line-height:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
html[dir="rtl"] .brow .bn{font-weight:500;letter-spacing:0}
.brow .bn .secondary{font-size:13px;line-height:18px;font-weight:400;letter-spacing:0;margin-top:1px}
.brow .chev{width:18px;height:18px;color:var(--ink-faint);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .brow .chev{transform:scaleX(-1)}

/* ---------- An occasion (layer 3) ----------
   One chapter: the beads, its list as one card and Begin pinned at the foot. Several chapters: cards of chapters, nothing at the foot.
   Drawn as a native inset-grouped list: white cards on the paper, rows parted by hairlines set in to the text */
#occ{grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:0;padding-block:20px 24px}
/* the header, as a native large title: the bar holds only its buttons; under it the name, large and at the start like
   the home's title, and under the name the beads with the count at their end, so they read as this routine's progress */
.ohero{display:grid;gap:12px;padding:12px 2px 2px}
.otitle{margin:0;font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
html[dir="rtl"] .otitle{font-weight:500;font-size:30px;letter-spacing:0}
/* the bar's buttons are glass, as on home: back alone at the start, the misbaha and the gear together at the end */
.bar.occ{margin-inline:0;grid-template-columns:40px minmax(0,1fr) 50px 40px;min-height:44px}
.bar.occ .icon-btn{background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.bar.occ .icon-btn svg{width:21px;height:21px}
.bar.occ .icon-btn:hover{background:var(--chip-press)}
.bar.occ .back-btn::after{inset-inline-start:-16px}
.bar.occ .fav-btn{justify-self:start}
.bar.occ .fav-btn::after{inset-inline-end:-5px}
.bar.occ .settings-btn::after{inset-inline:-5px -16px}
.fav-btn svg{transition:fill var(--base) var(--ease)}
.fav-btn[aria-pressed="true"] svg{fill:currentColor}
#occ.multi{grid-template-rows:auto auto 1fr;padding-bottom:0}
#occ.multi .summary,#occ.multi .home-foot{display:none}
#occ.multi .list{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
/* a card of rows; --in is where its hairlines start, the column the names stand in */
.ocard{--in:50px;position:relative;overflow:hidden;background:var(--chip);border-radius:22px;box-shadow:var(--card-edge)}
.ogroup{--in:58px}
.ogroup+.ogroup{margin-top:20px}
.ocard>*{position:relative}
/* a hairline, as on a native list: a translucent grey half a pixel thick (a device pixel on a phone), from the names' column to the card's edge */
.ocard>*+*::before{content:"";position:absolute;top:0;inset-inline:var(--in) 0;border-top:.5px solid var(--hair);pointer-events:none}
/* a chapter, as a heading or as a row of one dhikr, is the same: its icon on a disc in the accent tint, its name a step heavier */
.ocard .tic{flex:none;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--tag)}
.ocard .tic svg.ico{width:19px;height:19px;color:var(--accent)}
.ohead{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px}
.ohead .name{flex:1;min-width:0}
/* a chapter's misbaha keeps it in the wird: at the end of its heading, or beside a chapter of one dhikr */
.ohead .pin-btn{height:44px;margin-block:-6px;margin-inline-end:-10px}
.row-item.plain.lone{grid-template-columns:minmax(0,1fr) 44px}
.row-item.lone .pin-btn{height:56px;margin-inline:-4px 4px}
.ohead .name,.row-item.lone .name{font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
html[dir="rtl"] .ohead .name,html[dir="rtl"] .row-item.lone .name{letter-spacing:0}
.row-item.plain{grid-template-columns:minmax(0,1fr);margin-inline-start:0}
.row-item.plain .open-btn{display:flex;gap:12px;min-height:56px;padding:12px 14px}
.row-item.plain .name{flex:1;min-width:0}
.row-item.sub .open-btn{padding-inline-start:var(--in)}   /* a chapter's adhkar stand in under its name */
.row-item .chev{flex:none;width:16px;height:16px;margin-inline-end:-2px;color:var(--ink-faint);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .row-item .chev{transform:scaleX(-1)}
.bar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:40px;margin-inline:-8px;position:relative;z-index:4}   /* over the scroll fade below it, so the glass buttons' shadows fall whole */
.bar .title{grid-column:1/3;padding-inline-start:8px}
html[dir="rtl"] .back-btn svg{transform:scaleX(-1)}
.bar.home{grid-template-columns:1fr 40px 40px}
.bar.home .title{grid-column:auto}
html[dir="rtl"] .label{letter-spacing:0;font-size:13px}
html[dir="rtl"] .title{letter-spacing:0}
.bar .center{text-align:center;display:grid;line-height:1;min-width:0}
.bar .center .heading{line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .center .secondary{line-height:18px}
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-sunken);border-radius:999px;padding:4px}
.seg .thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px)/var(--n,4));background:var(--surface-raised);border-radius:999px;box-shadow:var(--shadow-raised);transition:transform var(--base) var(--ease),width var(--base) var(--ease)}
.seg .opt{position:relative;z-index:1;height:40px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--fast) var(--ease);padding:0 6px}
/* a tab answers to the pill's full height: it reaches over the 4px rim while the thumb stays where it is, so nothing looks taller */
.seg:not(.many) .opt{height:48px;margin-block:-4px}
/* more than four pinned chapters: the same pill scrolls sideways and the thumb takes the width of the chosen option */
.seg.many{display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.seg.many::-webkit-scrollbar{display:none}
.seg.many .opt{flex:none;padding:0 16px}
.seg.many .thumb{inset-inline-start:auto;left:0;top:0;bottom:0}
/* a scrolling pill keeps the same 4px rim around the options as the fixed one: the scroller is the inner track (no padding, rounded, clipping)
   and the rim is drawn around it with a spread shadow in the pill's own colour, so a tab leaving at the end is clipped by the inner rounded edge, never by the rim */
.seg.many{padding:0;margin:4px;box-shadow:0 0 0 4px var(--surface-sunken)}
html[lang="de"] .seg.many .opt,html[lang="fr"] .seg.many .opt,html[lang="tr"] .seg.many .opt{padding:0 16px}
html[lang="de"] .seg .opt,html[lang="fr"] .seg .opt,html[lang="tr"] .seg .opt{font-size:12.5px;letter-spacing:-.01em;padding:0 3px}
.seg .opt[aria-selected="true"]{color:var(--ink)}
/* a Fortress group with nothing for the search stays in the pill, dimmed */
.seg .opt.none{opacity:.35;cursor:default}
.summary{display:flex;align-items:center;gap:12px;min-height:20px}
.summary .beads{flex:1;min-width:0;justify-content:flex-start}
.sumn{flex:none;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-muted)}
/* the home beads scrub like the ones above a dhikr: no pill and no bubble, the current bead grows under the finger and
   its row in the list says which dhikr it is; ::before is an invisible band that widens the touch */
#sumBeads{touch-action:none}
#sumBeads::before{content:"";position:absolute;inset:-14px}
/* the bubble above the bead under the finger on home: its place and opening words, since the home screen does not show the dhikr itself */
.stip{text-align:center}
.stip .pl{display:block;font-size:12px;line-height:16px;opacity:.72;font-variant-numeric:tabular-nums}
.stip .ar{display:block;font-family:var(--font-quran);font-size:17px;line-height:26px;margin-top:2px;word-spacing:-.1em}
#sumBeads.on .b.now{transform:scale(1.7)}
html[dir="rtl"] #sumBeads.on .b.now{transform:scale(-1.7,1.7)}
/* a single dhikr: no beads, the list follows the name */
#occ.solo .summary{display:none}
.beads{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:8px;position:relative;z-index:2}   /* above the reading area's top fade: the ring is a touch taller than its row */
.b{width:8px;height:8px;border-radius:999px;background:var(--line);flex:none;transition:background var(--base) var(--ease)}
.b.done,.b.end{background:var(--accent)}
/* the beads are a navigator: a tap goes to that dhikr; the hit area is taller than the dot itself */
.b{position:relative;cursor:pointer}
.b::after{content:"";position:absolute;inset:-10px -2px}
/* the current bead is a ring in the accent, a touch larger, that fills like a pie with the count and becomes a done bead on completion */
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
.b.now{background:conic-gradient(var(--accent) var(--p,0%),transparent 0);box-shadow:inset 0 0 0 1.5px var(--accent);transform:translate(var(--dx,0px),var(--dy,0px)) scale(1.3);transition:--p var(--base) var(--ease),transform var(--base) var(--ease)}   /* --dx/--dy: where it glides in from */
html[dir="rtl"] .b.now{transform:translate(var(--dx,0px),var(--dy,0px)) scale(-1.3,1.3)}   /* the pie fills the way the script reads */
.b.part{background:conic-gradient(var(--accent) var(--p,0%),var(--line) 0);transition:--p var(--base) var(--ease)}   /* a started dhikr keeps its wedge */
html[dir="rtl"] .b.part{transform:scaleX(-1)}
.b.pop{animation:bead-pop 480ms var(--spring)}
@keyframes bead-pop{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}
.list{display:block;margin-inline:-16px;padding:14px 16px}   /* block, not grid: a grid track would squeeze the card (it clips its corners) down to the frame and nothing would be left to scroll */
/* the scroll edges: rows fade out under the beads and over the foot rather than being cut; at rest each lies over the empty padding */
.list::before,.list::after{content:"";display:block;position:sticky;height:14px;pointer-events:none;z-index:3}
.list::before{top:-14px;margin-top:-14px;background:linear-gradient(var(--surface),transparent)}
.list::after{bottom:-14px;margin-bottom:-14px;background:linear-gradient(transparent,var(--surface))}
.list.fresh .row-item{animation:row-in 300ms var(--ease) both;animation-delay:calc(var(--k) * 16ms)}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}}
.row-item{display:grid;grid-template-columns:50px 1fr;align-items:center;transition:background var(--fast) var(--ease)}
.row-item:has(.open-btn:active){background:var(--chip-press)}
@media (hover:hover){.row-item:has(.open-btn:hover){background:var(--chip-press)}}
.row-item .mark-btn{width:50px;height:54px;display:grid;place-items:center;padding-inline-start:6px}
.row-item .mark{width:22px;height:22px;display:block;transition:transform var(--fast) var(--ease)}
.row-item .mark-btn:active .mark{transform:scale(.88)}
.row-item .mark .ring{fill:none;stroke:var(--line-strong);stroke-width:1.5;opacity:.45;transition:stroke var(--fast) var(--ease),fill var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.row-item .mark .tick{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transform-origin:center;transition:opacity var(--fast) var(--ease),transform var(--base) var(--spring)}
/* the dhikr where one stands is ringed in the accent; a done one is a filled disc with its check, as the rings on home */
.row-item.now .mark .ring{stroke:var(--accent);stroke-width:2;opacity:1;fill:var(--tag)}
.row-item.done .mark .ring{stroke:var(--accent);opacity:1;fill:var(--accent)}
.row-item.done .mark .tick{opacity:1;transform:none}
.row-item .open-btn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;text-align:start;padding-block:15px;padding-inline:2px 16px;min-height:54px}
.row-item .name{font-size:16px;line-height:22px;color:var(--ink);transition:color var(--fast) var(--ease)}
.row-item.now .name{font-weight:500}
.row-item.done .name{color:var(--ink-muted)}
.row-item .n{flex:none;padding:1px 8px;border-radius:999px;background:var(--tag);color:var(--accent);font-size:12px;line-height:18px;font-weight:500;white-space:nowrap}
.row-item.done .n{opacity:.6}
.home-foot{display:grid;justify-items:stretch;padding-top:10px}
.home-foot .btn{width:100%;height:54px;font-size:17px;font-weight:600;letter-spacing:-.01em}
html[dir="rtl"] .home-foot .btn{font-weight:500;letter-spacing:0}

/* ---------- Fortress (the whole of Hisn al-Muslim) ----------
   A fixed frame like every screen: the bar and the search field stay, the grouped list scrolls under them.
   Rows share the anatomy of the Today rows: the name opens, the control at the end pins to Today. */
#fortress{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);   /* a scrolling pill must not widen the screen */padding-block:12px 0}
.search{display:grid;grid-template-columns:20px 1fr 28px;align-items:center;gap:8px;height:44px;margin-top:12px;padding:0 10px 0 12px;border-radius:999px;background:var(--surface-sunken);cursor:text;transition:box-shadow var(--fast) var(--ease)}
.search:focus-within{box-shadow:0 0 0 2px var(--accent-soft)}
.search svg{width:20px;height:20px;color:var(--ink-muted)}
.search input{min-width:0;height:100%;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none;padding:0}
.search input::placeholder{color:var(--ink-faint)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.search .clear{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--ink-muted);transition:background var(--fast) var(--ease)}
.search .clear svg{width:16px;height:16px;color:inherit}
.search .clear:hover{background:var(--surface-raised)}
#fortress .seg{margin-top:12px}
.flist{margin-inline:-16px;padding:0 16px 24px}
.flist::before{content:"";display:block;position:sticky;top:0;height:24px;margin-bottom:-24px;background:linear-gradient(var(--surface),transparent);pointer-events:none;z-index:1}
/* each group is its own block: a clear heading with air above it, then the rows bounded by their lines */
.fgroup{padding-top:20px}
.fgroup+.fgroup{padding-top:44px}
.fgroup .ghead{display:flex;justify-content:space-between;align-items:baseline;padding:0 3px 10px}
.fgroup .ghead .label{font-size:13px;line-height:18px;color:var(--ink);display:flex;align-items:center;gap:8px}
.fgroup .ghead svg.ico{width:20px;height:20px;color:var(--ink-muted)}
html[dir="rtl"] .fgroup .ghead .label{font-size:15px}
.fgroup .ghead .secondary{color:var(--ink-faint)}
.frow{display:grid;grid-template-columns:1fr 44px;align-items:center;border-top:1px solid var(--line);margin-inline-end:-11px}
.fgroup .frow:last-child{border-bottom:1px solid var(--line)}
.frow .open-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;text-align:start;min-height:52px;padding:14px 0;padding-inline-start:3px}
.frow .name{font-size:16px;line-height:22px;color:var(--ink)}
.pin-btn{width:44px;height:52px;display:grid;place-items:center;border-radius:999px;color:var(--ink-faint);transition:color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.pin-btn:active{transform:scale(.9)}
.pin-btn svg{width:22px;height:22px;fill:none;transition:fill var(--base) var(--ease),color var(--fast) var(--ease)}
.pin-btn[aria-pressed="true"]{color:var(--accent)}
.pin-btn[aria-pressed="true"] svg{fill:var(--accent)}
.flist.fresh .frow{animation:row-in 300ms var(--ease) both;animation-delay:calc(var(--k) * 16ms)}
.fempty{padding:48px 0;text-align:center}
.fattr{padding:32px 3px 8px;text-align:center;font-size:13px;line-height:20px;color:var(--ink-faint)}

/* ---------- Dhikr ---------- */
#dhikr{grid-template-rows:auto 1fr auto;padding-block:20px 24px}
#dhikr .bar{margin-inline:0;min-height:44px}
#dhikr .bar .icon-btn{background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
#dhikr .bar .icon-btn svg{width:21px;height:21px}
@media (hover:hover){#dhikr .bar .icon-btn:hover{background:var(--chip-press)}}
#dhikr .bar .back-btn::after{inset-inline-start:-16px}
#dhikr .bar .settings-btn::after{inset-inline-end:-16px}
#dhikr .bar .heading{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.015em}
html[dir="rtl"] #dhikr .bar .heading{font-weight:500;letter-spacing:0}
#dhikr .bar .secondary{font-size:13px;line-height:17px}
#dhikr header,#dhikr .pager,#dhikr .main{touch-action:pan-y}   /* the browser keeps the vertical scroll; a sideways pull reaches the pager */
/* the pager: a track three screens wide, the live main between a ghost pane on either side (js/app.js, "The pager");
   it spans the frame's side padding so a page slides in from the very edge */
.pager{min-height:0;position:relative;overflow:hidden;margin-inline:-16px}
.pages{height:100%;position:relative;padding-inline:16px;will-change:transform}
.pages .main{height:100%}
.main.ghost{position:absolute;top:0;bottom:0;left:16px;right:16px;pointer-events:none;transition:none}
.pager.moving .main{pointer-events:none}   /* nothing on a moving page answers a touch */
.beads.top{margin-top:12px;justify-content:center}
/* the bead scrubber (js/app.js, "The bead scrubber"): the row is a band 36px tall; while a finger holds it the only
   sign is the current bead grown under the finger, since the whole screen already shows where it is */
#dBeads{touch-action:none}
.beads.top::before{content:"";position:absolute;inset:-14px}
.beads.top.on .b.now{transform:scale(1.7)}
html[dir="rtl"] .beads.top.on .b.now{transform:scale(-1.7,1.7)}
.beads.scrub .b,.beads.scrub .b.now{transition:none}
.main{display:block;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
#dhikr.wait-face .main{opacity:0;transition:none}   /* the mushaf face not yet ready (openDhikr): the page waits unseen, then fades in */
.main-in{min-height:100%;display:grid;align-content:center;gap:20px;padding-block:16px;padding-inline:3px}
/* edge fades, shown only while there is more to scroll */
.main::before,.main::after{content:"";display:block;position:sticky;height:36px;pointer-events:none;opacity:0;transition:opacity var(--fast) var(--ease);z-index:1}
.main::before{top:0;margin-bottom:-36px;background:linear-gradient(var(--surface),transparent)}
.main::after{bottom:0;margin-top:-36px;background:linear-gradient(transparent,var(--surface))}
.main.more-above::before,.main.more-below::after{opacity:1}
.foot{display:grid;justify-items:center;gap:8px;padding-top:12px;transition:opacity var(--base) var(--ease)}
.main.out{opacity:0;transform:translateX(calc(-24px * var(--dir) * var(--step,1)))}
.main.in{transition:none;opacity:0;transform:translateX(calc(24px * var(--dir) * var(--step,1)))}
.foot.out{opacity:0}
/* one scale shared with the misbaha concept: hero up to 5 words, reading up to 24, compact above.
   Centred (and balanced) through reading; only compact is start-aligned, like a mushaf block. */
/* all scripture in the mushaf face; Quran is bracketed ﴿ ﴾ as in the book */
.ayah{margin:0;isolation:isolate;font-family:var(--font-quran);text-align:center;color:var(--ink);font-size:34px;line-height:64px;word-spacing:-.1em;text-wrap:balance}
.ayah .qb{color:var(--ink-muted)}   /* the brackets in the shade of the waqf signs and ayah numbers, at the size of the text */
.ayah.hero{font-size:46px;line-height:86px}
.ayah.ease{transition:font-size var(--base) var(--ease),line-height var(--base) var(--ease)}   /* the text giving way to, or taking back from, the translation panel (fitAyahIn) */
.ayah.compact{font-size:30px;line-height:54px;text-align:start;text-wrap:initial}
.ayah.dense{font-size:30px;line-height:52px;text-align:start;text-wrap:initial}   /* the long ones: Ayat al-Kursi, the sayyid al-istighfar family; eased down from here until they fit (fitAyah) */
.nb{white-space:nowrap}
.ae{display:inline-block;color:var(--ink-muted);margin-inline-start:.08em}
.wq{color:var(--ink-muted);margin-inline-start:.1em}   /* a waqf sign of the mushaf, close to its word */
.pz{font-family:var(--font-sans);font-size:.7em;color:var(--ink-muted);margin-inline-start:.04em}   /* on the baseline, a shade lighter than the words */   /* the book's comma, in the interface face */
.w{display:inline-block;padding:0 3px;margin:0 -3px;border-radius:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:color var(--fast) var(--ease),background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.w:active{transform:scale(.96)}
@media (hover:hover){.w:not(.on):not(.g):hover::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--surface-sunken)}}   /* behind the letters like the lit tint, so it never covers a neighbour; a lit word keeps its own tint under the cursor */
.w.hold{color:var(--accent)}   /* the press charging: the underline fills, then the voice starts here */
.w.hold::after{content:"";position:absolute;left:3px;right:3px;bottom:9px;height:2px;border-radius:2px;background:var(--accent);transform-origin:right center;animation:sweep var(--dur,400ms) linear forwards}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* recorded audio: a play/stop pill under the text (only when the dhikr has a recording); the spoken word takes the accent */
.listen-row{display:flex;justify-content:center;margin-top:-8px}
.listen{height:40px;padding:0 18px 0 14px;gap:6px;color:var(--ink);background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);font-size:14px}
@media (hover:hover){.listen:hover{background:var(--chip-press)}}
.listen svg{width:20px;height:20px}
.listen .stop,.listen.on .play{display:none}
.listen.on .stop{display:block}
.listen.on{background:var(--tag);color:var(--accent)}
.listen.loading{opacity:.6}
.copying,.copying .w,.copying .ae,.copying .qb,.copying .wq,.copying .pz{color:var(--accent);transition:color var(--fast) var(--ease)}   /* a held block, about to be copied */
.w.on{color:var(--accent)}
.w.at{color:var(--accent)}   /* paused here: Continue starts from this word */
.w.on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--accent-soft)}   /* the tint sits behind every word, never over a neighbour's letters */
.wtip{position:fixed;z-index:30;transform:translateY(-100%) scale(.94);opacity:0;background:var(--ink);color:var(--surface);font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:500;padding:6px 10px;border-radius:9px;white-space:nowrap;pointer-events:none;transition:opacity var(--fast) var(--ease),transform var(--base) var(--spring)}   /* "hold to hear from here", above the tapped word */
.wtip.on{opacity:1;transform:translateY(-100%)}
.wtip::after{content:"";position:absolute;top:100%;left:var(--ax,50%);margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink);border-bottom:0}
/* meaning: a tap on a word lights it and the words of the translation that carry it, both ways (js/align, tools/hisn/lang/align) */
.w.g{color:var(--accent)}
.w.g::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background:var(--accent-soft)}
.tw{cursor:pointer;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:color var(--fast) var(--ease),background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.tw.g{color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
/* the meaning card is the word's bubble with the words that carry it: as wide as its text, never wider than the frame */
.wtip.card{white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;font-size:14px;line-height:20px;font-weight:400;padding:7px 12px;border-radius:10px}
.wtip.below{transform:scale(.94)}
.wtip.below.on{transform:none}
.wtip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom:5px solid var(--ink);border-top:0}
/* beside the Listen pill, the way into the Meaning view: always in sight under the text, like the pill */
.listen-row{gap:8px}
.mx{width:40px;height:40px;padding:0;color:var(--ink);background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.mx svg{width:20px;height:20px}
@media (hover:hover){.mx:hover{background:var(--chip-press)}}
.mx.nudge{animation:nudge 900ms var(--ease) 2}
@keyframes nudge{50%{color:var(--accent);background:var(--accent-soft)}}
/* the Meaning view: the counter steps away and the reading takes the frame, each Arabic phrase over its own translation */
.mview,.mbar{display:none}
#dhikr.meaning .foot,#dhikr.meaning .main-in>.ayah,#dhikr.meaning .listen-row,#dhikr.meaning .discs{display:none}
#dhikr.meaning .mview{display:block}
#dhikr.meaning .main-in{align-content:start}
#dhikr.meaning .mbar{display:flex;justify-content:center;padding-top:12px;transition:opacity var(--base) var(--ease)}
.mbar.out{opacity:0}
.ph{padding:20px 0;border-top:.5px solid var(--hair)}
.ph:first-child{border-top:0;padding-top:4px}
.ph .ayah{font-size:30px;line-height:54px;text-align:start;text-wrap:initial}
.ph .t{margin:-4px 0 0;font-size:16px;line-height:26px;color:var(--ink)}
/* a tip: one at a time, in one place above the counter, teaching the next step; it never covers the word you touched */
.htip{position:fixed;z-index:25;left:50%;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:999px;background:color-mix(in srgb,var(--chip) 82%,transparent);box-shadow:var(--glass-edge),0 10px 30px -10px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);color:var(--ink);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity 450ms ease,transform 0s linear 450ms}
.htip.on{opacity:1;transform:translate(-50%,0);transition:opacity 320ms ease-out,transform 360ms var(--ease)}   /* in: a soft rise; out: a slow fade in place, then it settles back unseen */
.htip svg{width:18px;height:18px;color:var(--accent)}
/* the translation and the source: one card under the text, as a native inset list; each row opens in place */
.discs{display:grid;overflow:hidden;background:var(--chip);border-radius:20px;box-shadow:var(--card-edge)}
.disc{position:relative}
.disc+.disc::before{content:"";position:absolute;top:0;inset-inline:16px 0;border-top:.5px solid var(--hair);pointer-events:none}
.disc .head{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}   /* no press tint: the chevron turning and the row opening are the answer to the tap */
.disc .head .label{font-size:15px;line-height:20px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
html[dir="rtl"] .disc .head .label{font-size:15px;letter-spacing:0}
.disc .head svg{width:18px;height:18px;color:var(--ink-faint);stroke-width:2;transition:transform var(--base) var(--ease)}
.disc.open .head svg{transform:rotate(180deg)}
.disc .body{overflow:hidden;height:0;transition:height var(--base) var(--ease)}
.disc .in{padding:0 16px 18px;opacity:0;transition:opacity var(--base) var(--ease)}
.disc.open .in{opacity:1}
.disc .t{margin:0;font-size:16px;line-height:26px;color:var(--ink)}
.disc .s{margin:0;font-size:14px;line-height:21px;color:var(--ink-muted)}
.disc .s .ajr{font-weight:500;color:var(--accent)}   /* the reward the note promises */
.chip{display:inline-block;margin-top:12px;padding:2px 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.02em}
.counter{position:relative;width:160px;height:160px;display:grid;place-items:center;border-radius:999px;background:var(--surface-raised);box-shadow:var(--shadow-raised);cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform var(--fast) var(--ease),background var(--slow) var(--ease),box-shadow var(--fast) var(--ease);touch-action:manipulation}
.counter.pressed{transform:scale(.96);box-shadow:var(--shadow-float)}
.counter .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.counter .track{fill:none;stroke:var(--surface-sunken);stroke-width:6}
.counter .arc{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset var(--slow) var(--ease),stroke var(--slow) var(--ease)}
.counter .inner{display:grid;justify-items:center;font-variant-numeric:tabular-nums}
.counter .num{font-size:72px;line-height:72px;font-weight:200;letter-spacing:-.03em;color:var(--ink);transition:color var(--slow) var(--ease)}
.counter .num.bump{animation:bump 240ms var(--ease)}
@keyframes bump{35%{transform:scale(1.07)}}
.counter::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--accent);opacity:0;pointer-events:none}
.counter.done::after{animation:halo 700ms ease-out}
.counter.kept::after{animation:none}   /* a dhikr finished earlier shows its check without the halo again */
@keyframes halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
.counter .of{font-size:14px;line-height:20px;color:var(--ink-muted)}
.counter .check{position:absolute;width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.8);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.counter.done{background:var(--accent-soft)}
.counter.done .inner{opacity:0;transition:opacity var(--fast) var(--ease)}
.counter.done .check{opacity:1;transform:none}

@media (max-height:720px){
  .counter{width:128px;height:128px}
  .counter .num{font-size:56px;line-height:56px}
  .counter .of{font-size:12px;line-height:16px}
  .counter .track,.counter .arc{stroke-width:5}
  .main-in{gap:20px;padding-block:16px}
}

/* ---------- Done ---------- */
#done{grid-template-rows:auto 1fr auto;padding-block:12px 24px}
.done-main{display:grid;align-content:center;justify-items:center;gap:24px;text-align:center;min-height:0;overflow-y:auto}
.done-ring{width:112px;height:112px;border-radius:999px;background:var(--accent-soft);display:grid;place-items:center}
.done-ring svg{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#done.active .done-ring{animation:ring-in 520ms var(--spring) both;animation-delay:120ms}
#done.active .done-ring path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw 360ms var(--ease) 360ms forwards}
#done.active .done-text{animation:rise 420ms var(--ease) both;animation-delay:300ms}
#done.active .done-main .ayah{animation:rise 420ms var(--ease) both;animation-delay:420ms}
#done.active .done-foot{animation:rise 420ms var(--ease) both;animation-delay:520ms}
@keyframes ring-in{from{opacity:0;transform:scale(.6)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.done-main .ayah{font-size:30px;line-height:60px}
.done-foot{display:grid;gap:12px;justify-items:center}
/* one line for a run of days; it opens the journal */
.done-run{margin-top:-12px;padding:6px 12px;border-radius:999px;color:var(--accent);font-weight:500}
#done.active .done-run{animation:rise 420ms var(--ease) both;animation-delay:380ms}
.b.none{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.b.today{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent)}
.b.today.part{background:conic-gradient(var(--accent) var(--p,0%),var(--surface) 0)}
.b.off{visibility:hidden}

/* ---------- Journal ---------- */
#journal{grid-template-rows:auto 1fr;padding-block:12px 0}
.jbody{margin-inline:-16px;padding:0 16px 32px}
.hadith{text-align:center;padding:20px 8px 28px;display:grid;gap:4px}
.hadith .said{margin:0;font-size:14px;line-height:20px;color:var(--ink-muted)}
.saw{font-family:system-ui,-apple-system,"Noto Naskh Arabic","Geeza Pro",serif;font-size:1.35em;line-height:1;vertical-align:-.08em;color:var(--accent)}   /* the ligature comes from the device's Arabic font: HAFS does not carry it */
.hadith .ayah{font-size:26px;line-height:48px}
.hadith .secondary{font-size:14px;line-height:20px;text-wrap:balance}
.hadith .src{margin:0;font-size:12px;line-height:16px;color:var(--ink-faint)}
.jgrid{display:grid;grid-template-columns:minmax(72px,auto) repeat(var(--n,4),minmax(0,1fr));align-items:stretch;column-gap:4px}
.jgrid>div{display:contents}
.jlabel{font-size:14px;line-height:20px;color:var(--ink-muted);display:flex;align-items:center;min-height:36px;padding-inline-end:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrow.now .jlabel{color:var(--ink);font-weight:500}
.jrow.month .jlabel{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);min-height:32px;padding-top:8px}
.jrow.away .jlabel{color:var(--ink-faint);font-size:13px;min-height:40px}
.jcell{position:relative;display:grid;place-items:center;min-height:36px}
.jcell .thread{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--line)}
.jcell .b{position:relative;z-index:1;width:12px;height:12px;cursor:default;transition:none}
.jcell .b::after{content:none}
.jcell .x{position:absolute;z-index:1;top:4px;inset-inline-start:calc(50% + 8px);font-style:normal;font-size:10px;line-height:12px;color:var(--ink-faint)}
/* the grid rows are display:contents, so the header's cells stick on their own */
.jhead .jlabel,.jhead .jcol{position:sticky;top:0;z-index:2;background:var(--surface);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.jcol{display:grid;justify-items:center;align-content:end;gap:3px;min-width:0;padding-inline:1px}
/* a routine name may take two short lines, so After prayer and Before sleep read whole */
.jcol .jname{font-size:11px;line-height:13px;color:var(--ink);text-align:center;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance;overflow-wrap:anywhere}


/* ---------- Settings sheet ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease);z-index:10}
.scrim.on{opacity:1;pointer-events:auto}
/* over the Settings sheet while a sub-sheet is open: a tap there closes the sub-sheet and reaches nothing behind it */
.scrim.sub{z-index:12}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:480px;max-height:calc(100% - 88px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:var(--surface-raised);border-radius:24px 24px 0 0;box-shadow:var(--shadow-float);padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform var(--base) var(--ease);z-index:11;display:grid;gap:8px}
.sheet.on{transform:none}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 8px}
/* while a finger carries the sheet it moves with it, without easing */
.sheet.drag{transition:none}
.scrim.drag{transition:none}
.sheet .heading{padding:8px 0 4px}
.toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);text-align:start}
.toggle .tl{display:grid;gap:2px}
.toggle .tl .secondary{font-size:13px}
.sw{width:44px;height:26px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background var(--fast) var(--ease)}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:999px;background:var(--surface-raised);transition:transform var(--base) var(--ease)}
.toggle[aria-checked="true"] .sw{background:var(--accent)}
.toggle[aria-checked="true"] .sw::after{transform:translateX(calc(18px * var(--dir)))}
.toggle.static{cursor:default}
.mini-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:40px;background:var(--surface-sunken);border-radius:999px;padding:3px;flex:none}
.mini-seg .mthumb{position:absolute;top:3px;bottom:3px;inset-inline-start:3px;width:40px;border-radius:999px;background:var(--surface-raised);box-shadow:var(--shadow-raised);transition:transform var(--base) var(--ease)}
.mini-seg button{position:relative;z-index:1;height:30px;display:grid;place-items:center;border-radius:999px;color:var(--ink-muted);transition:color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.mini-seg button:active{transform:scale(.92)}
.mini-seg button[aria-checked="true"]{color:var(--ink)}
.mini-seg svg{width:18px;height:18px}
/* colour: five material swatches; the chosen one wears a ring in the accent */
.swatches{display:flex;gap:10px;flex:none}
.swatch{width:26px;height:26px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(31,27,23,.1);transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
.swatch:active{transform:scale(.9)}
.swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface-raised),0 0 0 4px var(--accent)}
.swatch[data-accent="sandalwood"]{background:#c0905f}
.swatch[data-accent="olive"]{background:#8e9c6a}
.swatch[data-accent="turquoise"]{background:#5fb3ad}
.swatch[data-accent="rose"]{background:#d8a3a9}
.swatch[data-accent="onyx"]{background:#3b3835}
/* language: a row in Settings that opens its own panel with the list, each language in its own script with a small round flag */
.lang-cur{display:flex;align-items:center;gap:8px;flex:none}
.lang-cur .chev{width:20px;height:20px;color:var(--ink-muted)}
html[dir="rtl"] .lang-cur .chev,html[dir="rtl"] #langBack svg,html[dir="rtl"] #voiceBack svg{transform:scaleX(-1)}
.flag{width:24px;height:24px;border-radius:999px;display:block;flex:none;box-shadow:inset 0 0 0 1px rgba(31,27,23,.08)}
.flag svg{width:100%;height:100%;display:block}
.flag text{font-family:var(--font-sans);font-weight:500}   /* Arabic is the whole of its nations, not one flag: a round mark with its letter */
.sheet.sub{z-index:13;gap:0}
.sub-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-inline:-8px;padding:4px 0 8px}
.sub-head .heading{text-align:center}
.lang-list{display:grid;padding-bottom:8px}
.lang-row{display:grid;grid-template-columns:24px 1fr 20px;align-items:center;gap:14px;height:52px;padding:0 8px;border-radius:12px;text-align:start;font-size:16px;color:var(--ink);transition:background var(--fast) var(--ease)}
.lang-row:hover,.lang-row:active{background:var(--surface-sunken)}
.lang-row .tick{width:20px;height:20px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity var(--fast) var(--ease),transform var(--base) var(--spring)}
.lang-row.plain{grid-template-columns:1fr 20px}
.lang-row[aria-checked="true"]{font-weight:500}
.lang-row[aria-checked="true"] .tick{opacity:1;transform:none}
html[dir="rtl"] #srcBack svg{transform:scaleX(-1)}
.lang-sec{padding:16px 8px 6px;font-size:13px;line-height:18px}   /* "Not yet reviewed" over the editions still waiting for their native reader */
.disc .head .lbl{display:flex;align-items:baseline;gap:8px;min-width:0}
.tr-tag{font-size:12px;line-height:16px;color:var(--ink-muted);font-weight:400;letter-spacing:0;text-transform:none}
.tr-fail{margin:0;padding:0 8px 8px;text-wrap:pretty}
.src-list{display:grid;gap:18px;padding:4px 8px 20px}
.src-row>.secondary{font-size:13px;line-height:18px}
.src-body{margin-top:2px;font-size:15px;line-height:22px;color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}
.src-body a{color:var(--accent);text-decoration:none;font-weight:500}
.sheet .danger{border-top:1px solid var(--line);padding:14px 0 0;display:flex;justify-content:space-between;align-items:center}
.sheet .danger .btn{height:40px;padding:0 16px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.erase-note{padding:4px 0 12px;text-wrap:pretty}
.erase-field{display:grid;gap:8px;padding-bottom:16px}
.erase-field input{height:44px;border:0;border-radius:12px;padding:0 14px;background:var(--surface-sunken);font:inherit;font-size:16px;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none}
.erase-field input:focus{box-shadow:0 0 0 2px var(--accent-soft)}
.erase-go{width:100%;color:#b4453a;box-shadow:inset 0 0 0 1px currentColor;transition:opacity var(--fast) var(--ease)}
.erase-go:disabled{opacity:.35;cursor:default}
.erase-go:disabled:active{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
  .w.hold::after{transform:none}
  .htip,.htip.on{transform:translate(-50%,0)!important;transition:opacity 300ms ease!important}   /* tips still fade, without moving */
}

/* ---------- Strand (the misbaha counter) ----------
   In beads mode the footer reserves the strand's height from the first render; the ring sits centred inside the
   zone until the module is ready, then fades out as the strand fades in. In ring mode none of this applies. */
:root{--strand-h:226px}
/* shorter phones give the reading area back a line or two of the dense long-text size (48px each); the loop scales to the zone */
@media (max-height:820px){:root{--strand-h:202px}}
@media (max-height:800px){:root{--strand-h:178px}}
@media (max-height:700px){:root{--strand-h:154px}}   /* the shortest phones: with the small type this keeps the pill whole on the longest texts */
.foot{position:relative}
.strand{display:none;position:relative;width:calc(100% + 32px);margin-inline:-16px;height:var(--strand-h);opacity:0;transition:opacity var(--slow) var(--ease)}
.foot.beads .strand{display:block}
.foot.beads.ready .strand{opacity:1}
.strand .wrap{position:absolute;inset:0 0 -36px;z-index:1}   /* the canvas runs 36px below the zone, behind Skip: the room the hanging imam needs mid-lap sits there, not as a gap above Skip */
.foot.beads #skipBtn{position:relative;z-index:3}
.foot.beads #resetBtn{z-index:3}
/* in Skip's place on a finished dhikr: the same quiet button with the counter-clockwise arrow, answering to as much room as
   Skip does, sideways and down only */
#resetBtn{position:relative;gap:6px}
#resetBtn svg.i{width:18px;height:18px}
#resetBtn::after{content:"";position:absolute;inset:0 -8px -12px}
.strand canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;   /* every finger gesture reaches the strand: a pan would otherwise cancel the swipe */cursor:pointer;outline:none}
.strand canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 4px var(--accent)}
.foot.beads .counter{position:absolute;left:50%;top:calc(12px + var(--strand-h)/2);transform:translate(-50%,-50%);z-index:2;transition:opacity var(--slow) var(--ease),transform var(--fast) var(--ease),background var(--slow) var(--ease),box-shadow var(--fast) var(--ease)}
.foot.beads .counter.pressed{transform:translate(-50%,-50%) scale(.96)}
.foot.beads.ready .counter{opacity:0;pointer-events:none}
.hollow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;pointer-events:none;z-index:0;text-align:center;font-variant-numeric:tabular-nums}
.hollow .num{font-size:48px;line-height:50px;font-weight:200;letter-spacing:-.03em;color:var(--ink);transition:color var(--slow) var(--ease),opacity var(--base) var(--ease)}
.hollow .num.bump{animation:bump 240ms var(--ease)}
.hollow .of{font-size:13px;line-height:18px;color:var(--ink-muted);transition:opacity var(--base) var(--ease)}
.hollow .laps{display:flex;gap:5px;margin-top:6px;min-height:6px;transition:opacity var(--base) var(--ease)}   /* one dot per lap of 33 on the 100 azkar */
.hollow .laps i{width:6px;height:6px;border-radius:999px;background:var(--line);transition:background var(--slow) var(--ease)}
.hollow .laps i.on{background:var(--accent)}
.hollow .check{position:absolute;top:5px;width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.8);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.hollow.done .num{color:var(--accent)}
.hollow.checked .num,.hollow.checked .of,.hollow.checked .laps{opacity:0}
.hollow.checked .check{opacity:1;transform:none}
/* a dhikr finished earlier keeps its count in the accent, "3 of 3", with a small check where the lap dots sit */
.hollow .kept-mark{position:absolute;top:72px;width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--base) var(--ease)}
.hollow.kept .kept-mark{opacity:1}
.hollow.kept .laps{opacity:0}

/* ---------- Translation scripts ----------
   The translation and its notes carry the edition's lang and dir (setTr in js/app.js). Persian is drawn by IBM Plex
   Sans Arabic, Latin and Cyrillic by IBM Plex Sans; Urdu, Bengali and Hindi get faces fetched only when chosen
   (fonts/noto, fontFor); Chinese uses the device's own face. Longer scripts take more leading. */
[lang="ur"],.wtip[lang="ur"]{font-family:"Noto Nastaliq Urdu","IBM Plex Sans Arabic",serif}
[lang="bn"],.wtip[lang="bn"]{font-family:"IBM Plex Sans","Noto Sans Bengali",system-ui,sans-serif}
[lang="hi"],.wtip[lang="hi"]{font-family:"IBM Plex Sans","Noto Sans Devanagari",system-ui,sans-serif}
[lang="zh-Hans"],.wtip[lang="zh-Hans"]{font-family:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif}
.disc .t[lang="ur"],.ph .t[lang="ur"]{line-height:36px}
.disc .s[lang="ur"]{line-height:32px}
.chip[lang="ur"]{line-height:28px}
.src-body [lang="ur"]{line-height:34px}
.wtip.card[lang="ur"]{line-height:30px;padding-block:4px 8px}
.disc .t:is([lang="bn"],[lang="hi"]),.ph .t:is([lang="bn"],[lang="hi"]){line-height:28px}

/* the offer to install (js/install.js): a banner that drops in over the top of the home screen, edge to edge, and the guide for Safari */
.install-bar{position:fixed;z-index:9;top:0;left:0;right:0;margin:0 auto;max-width:480px;display:flex;align-items:center;gap:12px;padding-block:calc(16px + env(safe-area-inset-top,0px)) 16px;padding-inline:16px 8px;background:var(--surface-raised);border-radius:0 0 24px 24px;box-shadow:var(--shadow-float);opacity:0;transform:translateY(-100%);transition:transform var(--base) var(--ease),opacity var(--base) var(--ease)}
.install-bar.on{opacity:1;transform:none}
.install-bar img{width:60px;height:60px;border-radius:14px;flex:none}
.ins-tl{display:grid;flex:1;min-width:0}
.ins-name{font-size:15px;line-height:20px;font-weight:500}
.ins-tl .secondary{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-tl .ins-free{color:var(--accent)}
.install-bar .btn,.ins-row .btn{height:36px;padding:0 16px;font-size:14px;flex:none}
.install-bar .icon-btn{width:36px;height:36px;color:var(--ink-muted);flex:none}
.install-bar .icon-btn svg{width:20px;height:20px}
.ins-steps{list-style:none;margin:0;padding:0 0 4px;display:grid}
.ins-steps li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ins-n{width:28px;height:28px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:14px;font-weight:500;flex:none}
.ins-t{font-size:15px;line-height:24px}
.ins-ic{display:inline-grid;vertical-align:-6px;color:var(--accent);margin-inline:2px}
.ins-ic svg.i{width:22px;height:22px}
.ins-after{padding:8px 0 0;text-wrap:pretty}
.ins-row{justify-content:flex-start;gap:12px;cursor:pointer}
.ins-row img{width:56px;height:56px;border-radius:13px;flex:none}
.install-sheet .ins-back,.install-sheet.from-settings .ins-x{display:none}
.install-sheet.from-settings .ins-back{display:block}
/* the Offline row (js/offline.js): a ring that fills as the app is saved on the device, then a check */
#tOffline .off-ic{color:var(--accent);transition:color var(--base) var(--ease)}
#tOffline .off-trk{opacity:.22}
#tOffline .off-arc{stroke-dasharray:var(--off-p,0) 100;transform:rotate(-90deg);transform-origin:center;transition:stroke-dasharray var(--slow) var(--ease)}
#tOffline:not(.ready) .off-ok{display:none}
#tOffline.waiting .off-ic{color:var(--ink-faint)}

/* ---------- Clicker (the tally counter) ----------
   A finger tally counter in the strand's zone (js/tally.js), drawn as a product is photographed under one light from
   the upper left: a matte body with a rim of light along its top edge, a short contact shadow and a long soft one, a
   face let into the body, a screen under glass with one reflection, the big domed key in the chosen misbaha material
   standing in a chamfered socket, and the small key beside it. On the screen the count rolls, each place a drum that
   glides to its digit on one transition and settles (a tap mid-roll only re-aims it); under it a bar of progress and
   "of n". A tap sinks the key, sends one ring out across the socket and lifts the backlight for a moment. It is DOM
   and CSS alone; nothing runs between taps, and what moves is transform and opacity. Two finishes through one set of
   tokens: ivory on the paper of the light theme, graphite on the dark one. */
:root{   /* the ivory finish */
  --tb-body:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),linear-gradient(155deg,#fbfaf7 0%,#f1eee8 48%,#e2ded5 100%);
  --tb-rim:inset 0 1.5px 0 #fff,inset 0 -2px 0 rgba(31,27,23,.11),inset 1px 0 0 rgba(255,255,255,.7),inset -1px 0 0 rgba(31,27,23,.05),0 0 0 1px rgba(31,27,23,.085);
  --tb-shadow:0 2px 3px rgba(31,27,23,.12),0 12px 22px -8px rgba(31,27,23,.22),0 38px 56px -22px rgba(31,27,23,.42);
  --tb-panel:linear-gradient(#dcd8d0,#e9e5de); --tb-panel-shadow:inset 0 2px 5px rgba(31,27,23,.18),inset 0 0 0 1px rgba(31,27,23,.06),inset 0 -1px 0 rgba(255,255,255,.75),0 1px 0 rgba(255,255,255,.9);
  --tb-glass:radial-gradient(110% 85% at 50% 38%,#f3f0ea 0%,#e4e0d8 60%,#d0cbc1 100%);
  --tb-glass-shadow:inset 0 0 0 1px rgba(31,27,23,.14),inset 0 3px 7px rgba(31,27,23,.2),inset 0 -1px 0 rgba(255,255,255,.65),0 1px 0 rgba(255,255,255,.5);
  --tb-shine:linear-gradient(112deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.28) 26%,rgba(255,255,255,.04) 44%,rgba(255,255,255,0) 52%);
  --tb-blink:rgba(255,255,255,.3);
  --tb-digit:#231f1a; --tb-weight:380; --tb-glow:none; --tb-cap:var(--ink-muted);
  --tb-track:rgba(31,27,23,.12); --tb-track-shadow:inset 0 1px 1px rgba(31,27,23,.14); --tb-live:var(--l-accent); --tb-live-glow:none;
  --tb-socket:radial-gradient(circle at 50% 42%,#cfcac1,#dcd7cf 70%,#e6e2db 100%);
  --tb-socket-shadow:inset 0 3px 6px rgba(31,27,23,.3),inset 0 0 0 1px rgba(31,27,23,.1),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 #fff;
  --tb-key-rim:rgba(0,0,0,.22); --tb-key-spec:rgba(255,255,255,.42); --tb-key-end:104%;
  --tb-key-shadow:0 1px 1px rgba(31,27,23,.3),0 8px 14px -2px rgba(31,27,23,.42);
  --tb-key-shadow-down:0 1px 1px rgba(31,27,23,.3),0 2px 4px -1px rgba(31,27,23,.35);
  --tb-sub:linear-gradient(#fff,#dbd6ce); --tb-sub-ink:#5c554d; --tb-sub-shadow:0 1px 2px rgba(31,27,23,.28),0 0 0 2px rgba(31,27,23,.08),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(31,27,23,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tb-body:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%),linear-gradient(155deg,#443e38 0%,#2a2622 48%,#1b1816 100%);
  --tb-rim:inset 0 1.5px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.7),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.5);
  --tb-shadow:0 2px 3px rgba(0,0,0,.5),0 12px 22px -8px rgba(0,0,0,.6),0 38px 56px -22px rgba(0,0,0,.95);
  --tb-panel:linear-gradient(#141210,#1f1c19); --tb-panel-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.08);
  --tb-glass:radial-gradient(110% 85% at 50% 38%,#1c1a17 0%,#121010 58%,#0a0909 100%);
  --tb-glass-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 3px 9px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.05);
  --tb-shine:linear-gradient(112deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,.01) 44%,rgba(255,255,255,0) 52%);
  --tb-blink:rgba(255,255,255,.055);
  --tb-digit:var(--d-strong); --tb-weight:320; --tb-cap:rgba(255,255,255,.6);
  --tb-track:rgba(255,255,255,.1); --tb-track-shadow:inset 0 1px 1px rgba(0,0,0,.5); --tb-live:var(--d-accent); --tb-live-glow:0 0 6px rgba(255,255,255,.2);
  --tb-socket:radial-gradient(circle at 50% 42%,#070606,#121110 70%,#1c1917 100%);
  --tb-socket-shadow:inset 0 3px 6px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.08);
  --tb-key-rim:rgba(0,0,0,.4); --tb-key-spec:rgba(255,255,255,.34); --tb-key-end:100%;
  --tb-key-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.6),0 8px 14px -2px rgba(0,0,0,.7);
  --tb-key-shadow-down:0 0 0 1px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.6);
  --tb-sub:linear-gradient(#6d665e,#37332f); --tb-sub-ink:rgba(255,255,255,.8); --tb-sub-shadow:0 1px 2px rgba(0,0,0,.7),0 0 0 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5)}}
:root[data-theme="dark"]{   /* the graphite finish */
  --tb-body:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%),linear-gradient(155deg,#443e38 0%,#2a2622 48%,#1b1816 100%);
  --tb-rim:inset 0 1.5px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.7),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.5);
  --tb-shadow:0 2px 3px rgba(0,0,0,.5),0 12px 22px -8px rgba(0,0,0,.6),0 38px 56px -22px rgba(0,0,0,.95);
  --tb-panel:linear-gradient(#141210,#1f1c19); --tb-panel-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.08);
  --tb-glass:radial-gradient(110% 85% at 50% 38%,#1c1a17 0%,#121010 58%,#0a0909 100%);
  --tb-glass-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 3px 9px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.05);
  --tb-shine:linear-gradient(112deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,.01) 44%,rgba(255,255,255,0) 52%);
  --tb-blink:rgba(255,255,255,.055);
  --tb-digit:var(--d-strong); --tb-weight:320; --tb-cap:rgba(255,255,255,.6);
  --tb-track:rgba(255,255,255,.1); --tb-track-shadow:inset 0 1px 1px rgba(0,0,0,.5); --tb-live:var(--d-accent); --tb-live-glow:0 0 6px rgba(255,255,255,.2);
  --tb-socket:radial-gradient(circle at 50% 42%,#070606,#121110 70%,#1c1917 100%);
  --tb-socket-shadow:inset 0 3px 6px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.08);
  --tb-key-rim:rgba(0,0,0,.4); --tb-key-spec:rgba(255,255,255,.34); --tb-key-end:100%;
  --tb-key-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.6),0 8px 14px -2px rgba(0,0,0,.7);
  --tb-key-shadow-down:0 0 0 1px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.6);
  --tb-sub:linear-gradient(#6d665e,#37332f); --tb-sub-ink:rgba(255,255,255,.8); --tb-sub-shadow:0 1px 2px rgba(0,0,0,.7),0 0 0 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5)}
/* in the dark the digits and the bar give off the accent; the glow needs color-mix, else a white one stands in */
@supports (color:color-mix(in srgb,red,blue)){:root{--tb-glow-on:0 0 10px color-mix(in srgb,var(--d-accent) 26%,transparent);--tb-live-glow-on:0 0 5px color-mix(in srgb,var(--d-accent) 35%,transparent)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tb-glow:var(--tb-glow-on,0 0 10px rgba(255,255,255,.1));--tb-live-glow:var(--tb-live-glow-on,0 0 5px rgba(255,255,255,.14))}}
:root[data-theme="dark"]{--tb-glow:var(--tb-glow-on,0 0 10px rgba(255,255,255,.1));--tb-live-glow:var(--tb-live-glow-on,0 0 5px rgba(255,255,255,.14))}

.tdev{--ts:1;display:none;position:relative;width:100%;height:var(--strand-h);place-items:center}
@media (max-height:820px){.tdev{--ts:.94}}
@media (max-height:800px){.tdev{--ts:.84}}
@media (max-height:700px){.tdev{--ts:.73}}   /* the device keeps its proportions and comes down with the zone */
.foot.tally .tdev{display:grid}
.foot.tally .counter,.foot.tally .strand{display:none}
/* the body: 174 × 208 with a 50 radius; the face sits 14 in at 36, the glass 10 further in at 26, so the corners are concentric */
.tdev .shell{position:relative;width:174px;height:208px;border-radius:50px;background:var(--tb-body);box-shadow:var(--tb-rim),var(--tb-shadow);transform:scale(var(--ts))}
.tdev .face{position:absolute;top:14px;left:14px;right:14px;height:98px;border-radius:36px;background:var(--tb-panel);box-shadow:var(--tb-panel-shadow)}
.tdev .lcd{position:absolute;inset:10px;border-radius:26px;background:var(--tb-glass);box-shadow:var(--tb-glass-shadow);overflow:hidden}
.tdev .lcd::before{content:"";position:absolute;inset:0;background:var(--tb-shine);pointer-events:none;z-index:2}   /* one reflection across the glass, above what it shows */
.tdev .lcd::after{content:"";position:absolute;inset:0;background:var(--tb-blink);opacity:0;pointer-events:none;z-index:1}   /* the backlight, lifted for a moment by a tap */
.tdev.echo .lcd::after{animation:tb-blink 260ms var(--ease)}
@keyframes tb-blink{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
/* the count: each place a drum of 0–9 that rolls to its digit and settles; the neighbours show only as they pass */
.tdev .win{position:absolute;top:3px;left:0;right:0;display:flex;justify-content:center;direction:ltr;font-size:42px;line-height:44px;font-weight:var(--tb-weight);letter-spacing:.005em;font-variant-numeric:tabular-nums;color:var(--tb-digit);text-shadow:var(--tb-glow);transition:color var(--slow) var(--ease)}
.tdev .col{position:relative;width:26px;height:52px;overflow:hidden;transition:width 300ms var(--ease),opacity 240ms var(--ease);-webkit-mask-image:linear-gradient(transparent 5%,#000 22%,#000 78%,transparent 95%);mask-image:linear-gradient(transparent 5%,#000 22%,#000 78%,transparent 95%)}
.tdev .col.lead{width:0;opacity:0}
.tdev .strip{position:absolute;left:0;right:0;top:4px;transform:translateY(calc(var(--i,0) * -44px));transition:transform 480ms cubic-bezier(.22,1.18,.36,1);will-change:transform}
.tdev .strip.still{transition:none}
.tdev .strip span{display:block;height:44px;text-align:center}
.tdev .prog{position:absolute;left:16px;right:16px;bottom:20px;height:3px;border-radius:2px;background:var(--tb-track);box-shadow:var(--tb-track-shadow)}
.tdev .prog i{display:block;height:100%;border-radius:2px;background:var(--tb-live);box-shadow:var(--tb-live-glow);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--slow) var(--ease)}
html[dir="rtl"] .tdev .prog i{transform-origin:100% 50%}
.tdev .prog i.still{transition:none}
.tdev .cap{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;align-items:center;gap:4px;font-size:11px;line-height:13px;letter-spacing:.03em;color:var(--tb-cap);font-variant-numeric:tabular-nums;transition:color var(--base) var(--ease)}
.tdev .mark{width:10px;height:10px;stroke:var(--tb-live);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity var(--base) var(--ease),transform var(--base) var(--spring);margin-inline-end:-14px}
.tdev.done .win,.tdev.done .cap{color:var(--tb-live)}
.tdev.done .mark{opacity:1;transform:none}
/* the socket: a chamfered well the key stands in; it does not move, but a tap sends one ring out across it */
.tdev .socket{position:absolute;left:50%;bottom:10px;width:78px;height:78px;margin-left:-39px;border-radius:999px;background:var(--tb-socket);box-shadow:var(--tb-socket-shadow)}
.tdev .socket::after{content:"";position:absolute;inset:3px;border-radius:999px;box-shadow:0 0 0 2px var(--tb-live);opacity:0;transform:scale(.92);pointer-events:none}
.tdev.echo .socket::after{animation:tb-ring 520ms var(--ease)}
@keyframes tb-ring{0%{opacity:0;transform:scale(.92)}14%{opacity:.6}100%{opacity:0;transform:scale(1.14)}}
/* the big key: a dome of the misbaha material, lit from the upper left, with a darker chamfer at its edge; it sinks under the thumb */
.tdev .key{position:absolute;left:50%;bottom:17px;width:64px;height:64px;margin-left:-32px;border-radius:999px;cursor:pointer;touch-action:none;
  background:radial-gradient(circle at 42% 34%,var(--bead) 0%,var(--bead) 34%,var(--bead-thread) var(--tb-key-end));
  box-shadow:var(--tb-key-shadow),inset 0 0 0 1px var(--tb-key-rim),inset 0 2px 2px rgba(255,255,255,.26),inset 0 -5px 9px rgba(0,0,0,.32);
  transition:transform 240ms var(--spring),box-shadow 240ms var(--ease),background var(--slow) var(--ease)}
.tdev .key::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:radial-gradient(42% 30% at 38% 22%,var(--tb-key-spec),rgba(255,255,255,0) 100%),radial-gradient(60% 24% at 50% 100%,rgba(255,255,255,.1),rgba(255,255,255,0) 100%);   /* the specular, and a little light caught back off the socket's floor */
  transition:opacity 120ms var(--ease)}
.tdev .key.down{transform:translateY(3px) scale(.975);transition:transform 70ms ease-out,box-shadow 70ms ease-out;box-shadow:var(--tb-key-shadow-down),inset 0 0 0 1px var(--tb-key-rim),inset 0 2px 2px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.34)}
.tdev .key.down::after{opacity:.75}
.tdev .key:focus-visible{outline-offset:9px}
/* the small key: completes the dhikr; on a finished one, opens it to count again */
.tdev .sub{position:absolute;bottom:38px;inset-inline-end:20px;width:23px;height:23px;border-radius:999px;background:var(--tb-sub);color:var(--tb-sub-ink);display:grid;place-items:center;box-shadow:var(--tb-sub-shadow);transition:transform 70ms var(--ease),filter 70ms var(--ease)}
.tdev .sub::after{content:"";position:absolute;inset:-13px;border-radius:999px}   /* 23 → 49 for the thumb */
.tdev .sub:active{transform:translateY(1px);filter:brightness(.93)}
.tdev .sub svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tdev .sub .again{display:none}
.tdev.kept .sub .chk{display:none}
.tdev.kept .sub .again{display:block}
@media (prefers-reduced-motion:reduce){.tdev .strip,.tdev .col,.tdev .prog i{transition:none}.tdev.echo .socket::after,.tdev.echo .lcd::after{animation:none}}