/* Baik · Tasbih page (dark, quiet, one bright number) */
body.tbpage{margin:0;background:#0E1513;color:#EDEFEA;font-family:'Saira',sans-serif;min-height:100svh;overflow:hidden;-webkit-tap-highlight-color:transparent;}
.tb-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;}
.tb-top a,.tb-top button{width:44px;height:44px;border-radius:12px;border:0;background:none;color:#EDEFEA;display:grid;place-items:center;cursor:pointer;}
.tb-top a:hover,.tb-top button:hover{background:rgba(255,255,255,.07);}
.tb-top h1{font:700 19px 'Space Grotesk',sans-serif;margin:0 auto 0 6px;letter-spacing:-.01em;}
.tb-top svg{width:22px;height:22px;}
#tbSound.off .wv{display:none;} #tbSound:not(.off) .mute{display:none;}

/* the screen reads top to bottom (count, beads, words) in the space above the closed panel;
   --tbp is the panel's height, measured in tasbih.js, so the words can never sit behind it */
.tb-area{position:fixed;left:0;right:0;top:0;bottom:var(--tbp,230px);display:flex;flex-direction:column;
 padding-top:calc(clamp(56px,9vh,76px) + env(safe-area-inset-top));touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer;}
.tb-head{position:relative;flex:none;text-align:center;pointer-events:none;}
.tb-n{font:700 clamp(54px,min(22vw,12vh),120px)/1 'Space Grotesk',sans-serif;color:#34D399;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.tb-goal{font:500 15px 'JetBrains Mono',monospace;color:rgba(237,239,234,.45);margin-top:4px;min-height:20px;}
.tb-bar{width:min(220px,50vw);height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin:12px auto 0;overflow:hidden;}
.tb-bar i{display:block;height:100%;width:0;background:#34D399;transition:width .25s ease;}
.tb-steps{display:flex;gap:6px;justify-content:center;margin-top:12px;min-height:8px;}
.tb-steps i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.35);}
.tb-steps i.now{border-color:#34D399;} .tb-steps i.done{background:#34D399;border-color:#34D399;}
.tb-stage{position:relative;flex:1 1 auto;min-height:110px;}
#tbCv{position:absolute;left:0;right:0;top:12%;height:76%;width:100%;}
/* the 3D string: a taller band, faded at every edge so the table has no border */
#tbGl{position:absolute;left:0;right:0;top:-10%;height:120%;width:100%;opacity:0;transition:opacity 1s ease;pointer-events:none;
 -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 81%,rgba(0,0,0,.88) 85%,rgba(0,0,0,.62) 89%,rgba(0,0,0,.3) 93%,rgba(0,0,0,.08) 97%,transparent),linear-gradient(transparent,rgba(0,0,0,.3) 7%,rgba(0,0,0,.75) 14%,#000 21%,#000 79%,rgba(0,0,0,.75) 86%,rgba(0,0,0,.3) 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 81%,rgba(0,0,0,.88) 85%,rgba(0,0,0,.62) 89%,rgba(0,0,0,.3) 93%,rgba(0,0,0,.08) 97%,transparent),linear-gradient(transparent,rgba(0,0,0,.3) 7%,rgba(0,0,0,.75) 14%,#000 21%,#000 79%,rgba(0,0,0,.75) 86%,rgba(0,0,0,.3) 93%,transparent);mask-composite:intersect;}
body.tb-gl #tbGl{opacity:1;} body.tb-gl #tbCv{display:none;}
.tb-words{position:relative;flex:none;padding:0 16px clamp(10px,2.4vh,26px);text-align:center;pointer-events:none;}
.tb-ar{font-family:'Scheherazade New',serif;font-size:clamp(26px,min(8vw,5vh),42px);line-height:1.45;direction:rtl;color:#fff;}
.tb-tr{font-size:14.5px;color:rgba(237,239,234,.7);margin-top:4px;}
.tb-hint{font-size:13px;line-height:1.5;color:rgba(237,239,234,.55);margin-top:clamp(6px,1.6vh,18px);transition:opacity .5s;}
.tb-hint.gone{display:none;}
.tb-hint.gone{opacity:0;}
.tb-today{display:none;position:absolute;left:0;right:0;bottom:calc(132px + env(safe-area-inset-bottom));text-align:center;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,239,234,.35);pointer-events:none;}

/* the panel: closed it shows the current dhikr and the beads; open it lists every dhikr */
.tb-panel{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#1A201E;border-radius:22px 22px 0 0;padding:6px 18px calc(16px + env(safe-area-inset-bottom));
 box-shadow:0 -12px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;
 /* a sheet: tasbih.js sets its height and slides it by --ty; dragging turns the transition off */
 transform:translate3d(var(--tx,0),var(--ty,100%),0);transition:transform .5s cubic-bezier(.32,.72,0,1);will-change:transform;touch-action:none;}
.tb-panel.drag{transition:none;}
.tb-scrim{position:fixed;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.32,.72,0,1);}
.tb-scrim.on{pointer-events:auto;} .tb-scrim.drag{transition:none;}
.tb-handle{display:block;margin:0 auto 6px;width:56px;height:22px;border:0;background:none;cursor:pointer;position:relative;}
.tb-handle::before,.tb-handle::after{content:'';position:absolute;left:14px;right:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.55);}
.tb-handle::before{top:7px;} .tb-handle::after{top:13px;}
.tb-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.tb-row b{font:700 17px 'Space Grotesk',sans-serif;} .tb-row b small{display:block;font:400 12.5px 'Saira',sans-serif;color:rgba(237,239,234,.55);margin-top:2px;}
.tb-row button{border:0;background:none;color:#34D399;font:600 14px 'Saira',sans-serif;cursor:pointer;padding:4px 0;}
.tb-beads{touch-action:pan-x;display:flex;gap:18px;overflow-x:auto;padding:9px 9px 8px;scrollbar-width:none;}
.tb-beads::-webkit-scrollbar{display:none;}
.tb-bd{flex:none;border:0;background:none;color:rgba(237,239,234,.65);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:500 11px 'Saira',sans-serif;padding:0;}
.tb-bd i{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--b0),var(--b1) 78%);box-shadow:inset -4px -6px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.4);outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .2s;}
.tb-bd.on i{outline-color:#34D399;} .tb-bd.on{color:#fff;}
.tb-panel>*{flex:none;}
.tb-list{display:flex;touch-action:pan-y;flex:1 1 auto;min-height:0;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;margin-top:14px;padding-bottom:4px;}
.tb-dz{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#EDEFEA;border-radius:14px;padding:12px 14px;cursor:pointer;}
.tb-dz.on{border-color:#34D399;background:rgba(52,211,153,.08);}
.tb-dz b{font:600 15px 'Space Grotesk',sans-serif;} .tb-dz span{grid-column:1;font-size:12.5px;color:rgba(237,239,234,.55);}
.tb-dz span.ar{font-family:'Scheherazade New',serif;font-size:20px;color:rgba(237,239,234,.85);direction:rtl;text-align:left;}
.tb-dz em{grid-column:2;grid-row:1 / span 2;font:500 12px 'JetBrains Mono',monospace;font-style:normal;color:#34D399;}
body.tbpage .toast{bottom:calc(150px + env(safe-area-inset-bottom));}
@media(min-width:760px){.tb-panel{left:50%;right:auto;width:520px;--tx:-50%;}}

.tb-sounds{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.tb-sd{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(237,239,234,.75);border-radius:999px;padding:7px 14px;font:600 13px 'Saira',sans-serif;cursor:pointer;}
.tb-sd.on{border-color:#34D399;color:#fff;background:rgba(52,211,153,.12);}

/* reset dialog: our own card instead of the browser's confirm box */
.tb-ask{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100svh - 48px);border:0;padding:24px 22px 18px;width:min(340px,calc(100vw - 48px));border-radius:22px;background:#1A201E;color:#EDEFEA;text-align:center;
 box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);font-family:'Saira',sans-serif;}
.tb-ask[open]{animation:tbAskIn .26s cubic-bezier(.16,1,.3,1);}
.tb-ask.out{animation:tbAskOut .16s ease forwards;}
.tb-ask::backdrop{background:rgba(5,9,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.tb-ask[open]::backdrop{animation:tbFade .26s ease;} .tb-ask.out::backdrop{animation:tbFade .16s ease reverse forwards;}
.tb-ask-ic{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.12);color:#34D399;}
.tb-ask-ic svg{width:22px;height:22px;}
.tb-ask h2{margin:0;font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.01em;}
.tb-ask p{margin:6px 0 20px;font-size:14px;line-height:1.5;color:rgba(237,239,234,.6);}
.tb-ask-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tb-ask-b button{height:46px;border-radius:14px;font:600 15px 'Saira',sans-serif;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#EDEFEA;}
.tb-ask-b button:hover{background:rgba(255,255,255,.08);}
#tbAskYes{border-color:#34D399;background:#34D399;color:#06231A;} #tbAskYes:hover{background:#5EE3B2;}
.tb-ask-b button:focus-visible{outline:2px solid #34D399;outline-offset:2px;}
@keyframes tbAskIn{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes tbAskOut{to{opacity:0;transform:translateY(6px) scale(.97);}}
@keyframes tbFade{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.tb-ask[open],.tb-ask.out,.tb-ask::backdrop{animation:none!important;}}

/* short phone screens (browser bars take a lot): a tighter panel */
@media(max-height:720px){
 .tb-bd i{width:44px;height:44px;} .tb-beads{gap:15px;}
 .tb-row{margin-bottom:8px;} .tb-sounds{margin-top:8px;} .tb-sd{padding:6px 13px;}
}
/* too short to keep the hint under the words: it shows once as a toast instead (tasbih.js) */
@media(max-height:680px){.tb-hint{display:none;}}
@media(prefers-reduced-motion:reduce){.tb-panel,.tb-scrim{transition:none;}}