/* Layout: one calm stage per screen. The palette follows the time of day:
   morning = first light over water (sea-glass and ink), evening = dusk (indigo and lamp amber). */
:root{
  --bg:#EEF3F1; --surface:#FFFFFF; --ink:#14302C; --muted:#5E7571; --line:#D6E1DE;
  --accent:#1F7A6B; --accent-soft:#D3E9E3; --glow:#F2C46D;
  --f-text:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --f-ui:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --scale:1;
  color-scheme:light;
}
:root{ --card:rgba(255,255,255,.82); --sky-top:#DCEEF8; --sky-bot:#FFFFFF; --sun:#FFD36B; --bird:#3A5560 }
/* Evening is always a night sky, whatever the theme */
:root[data-sky="night"]{
  --bg:#050506; --surface:#121214; --ink:#EDEBE4; --muted:#9A988F; --line:#26262A;
  --accent:#E8DFC0; --accent-soft:#222120; --glow:#F4EBC8;
  --card:rgba(12,12,14,.70); --sky-top:#000000; --sky-bot:#0E0F12; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  /* Morning in dark mode = fajr: deep blue before sunrise, not a white glare */
  :root[data-sky="day"]:not([data-theme="light"]){ --bg:#0E1C26; --surface:#15283A; --ink:#E6F0F3; --muted:#93AAB4; --line:#24394A; --accent:#6CC9B6; --accent-soft:#1C3A40; --glow:#F2C46D; --card:rgba(16,32,46,.74); --sky-top:#0A1622; --sky-bot:#2E4656; --sun:#F6B968; --bird:#9DB4BE; color-scheme:dark }
}
:root[data-theme="dark"][data-sky="day"]{ --bg:#0E1C26; --surface:#15283A; --ink:#E6F0F3; --muted:#93AAB4; --line:#24394A; --accent:#6CC9B6; --accent-soft:#1C3A40; --glow:#F2C46D; --card:rgba(16,32,46,.74); --sky-top:#0A1622; --sky-bot:#2E4656; --sun:#F6B968; --bird:#9DB4BE; color-scheme:dark }

/* Scene layer: fixed behind everything, text always sits on a calm card */
#scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(var(--sky-top),var(--sky-bot) 70%)}
/* live looks only learn their sky from the script: start on a neutral dusk, never on the light default */
:root:not([data-sky]) #scene{background:linear-gradient(#141633,#0C0D18 70%)}
#scene svg{position:absolute;inset:0;width:100%;height:100%}
/* illustrated layers: 2400x1200 canvases scaled to the screen width and sat on the bottom edge, so every layer lines up.
   The elements are drawn small and kept to the outer edges of the canvas, beside the reading card, not behind it. */
#art{position:absolute;inset:0;overflow:hidden}
#art img{position:absolute;left:0;bottom:0;width:100%;height:auto}
@media (max-width:720px){#art img{left:auto;right:0;width:auto;height:46%;max-width:none}}
#art.cover img{inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom}
.sunglow{filter:blur(18px);opacity:.55}
.cloud{fill:var(--cloud,#fff);opacity:.85;animation:drift 160s linear infinite}
.cloud.c2{animation-duration:220s;animation-delay:-90s;opacity:.6}
.cloud.c3{animation-duration:190s;animation-delay:-150s;opacity:.7}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
:root[data-sky="day"]{--cloud:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-sky="day"]:not([data-theme="light"]){--cloud:#2A4253}}
:root[data-theme="dark"][data-sky="day"]{--cloud:#2A4253}
.moonlight{filter:blur(40px)}
#stars{position:absolute;inset:0;width:100%;height:100%}
#scene.still *{animation-play-state:paused!important}

html{background:var(--bg)}
html,body{height:100%}
/* Reading card is always dark, whatever the sky: calm on the eyes at fajr and at noon */
/* Each look tints the card and lights it with its own colour: --look (accent), --look-soft, --card-bg, --card-line */
:root{--look:#7AD6C2;--look-soft:#1D3433;--card-bg:rgba(11,20,22,.88);--card-line:#2C3B3D;--card-ink:#ECEAE2;--card-muted:#A7B3B0}
:root[data-look="morning"]{--look:#F3C77B;--look-soft:#3A2E1A;--card-bg:rgba(26,21,13,.86);--card-line:#3D3426;--card-muted:#B9AF9C}
:root[data-look="evening"]{--look:#F2A477;--look-soft:#3C2224;--card-bg:rgba(25,14,20,.87);--card-line:#3E2A30;--card-muted:#B8A3A6}
:root[data-look="sleep"]{--look:#B9B3F2;--look-soft:#26243F;--card-bg:rgba(9,10,24,.9);--card-line:#2A2A44;--card-ink:#DCD9EE;--card-muted:#9C99B8}
:root[data-look="waking"]{--look:#9ED2F2;--look-soft:#1B2E44;--card-bg:rgba(11,17,31,.88);--card-line:#283A52;--card-muted:#A0B0C2}
:root[data-look="travel"]{--look:#E9B872;--look-soft:#3A2C18;--card-bg:rgba(27,19,11,.86);--card-line:#41331F;--card-muted:#B8AA94}
:root[data-look="home"]{--look:#FFC874;--look-soft:#3D2B14;--card-bg:rgba(24,16,10,.88);--card-line:#3F2F1E;--card-muted:#BBA88F}
:root[data-look="food"]{--look:#D2C27A;--look-soft:#2F3018;--card-bg:rgba(20,20,11,.86);--card-line:#38382A;--card-muted:#B2AE96}
:root[data-look="after-prayer"]{--look:#E8C987;--look-soft:#3A301C}   /* lamp gold of the lit mosque; the card tint follows the live sky (skyCard in app.js) */
.stage,.done-card{--ink:var(--card-ink);--muted:var(--card-muted);--line:var(--card-line);--accent:var(--look);--accent-soft:var(--look-soft);--surface:#0F1A1C;
  background:var(--card-bg)!important;color:var(--ink);transition:background .8s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color-scheme:dark}
.stage .chip.review{color:var(--ink)}
body{background:transparent;color:var(--ink);font-family:var(--f-ui);margin:0;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  transition:background .6s ease;-webkit-tap-highlight-color:transparent}
.wrap{width:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;flex:1;min-height:0}

/* Header: logo on the right; all adhkar, listen and settings on the left with no chrome.
   Second row: wird, view and the progress slider together. */
header{display:flex;flex-direction:column;gap:12px;padding-block:14px 12px}
.topbar{display:flex;align-items:center;gap:4px;min-width:0}
.toolbar{display:flex;align-items:center;gap:10px}
.toolbar .meta{flex:1;min-width:0;padding:0}
/* bare header controls: no fill, ink follows the sky, a soft shadow keeps them legible on any scene */
.topbar .icon-btn,.topbar .menu-btn{background:none!important;border:0!important;box-shadow:none;color:var(--ink);
  filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--bg) 70%,transparent));transition:color .3s ease,opacity .2s}
.topbar .icon-btn:hover,.topbar .menu-btn:hover{opacity:.75}
/* on a dark sky (dusk to after sunrise) the bare controls, logo and progress label turn light */
:root[data-hdr="dark"] .topbar,:root[data-hdr="dark"] .toolbar .meta{--ink:#F3EFE4;--muted:#C8CCD4;--line:#ffffff2e;--bg:#000}
:root[data-hdr="dark"] .brand .logo-dark{display:block}:root[data-hdr="dark"] .brand .logo-light{display:none}
:root[data-hdr="light"] .topbar,:root[data-hdr="light"] .toolbar .meta{--ink:#14302C;--muted:#3F5652;--line:#00000024;--bg:#fff}
:root[data-hdr="light"] .brand .logo-dark{display:none}:root[data-hdr="light"] .brand .logo-light{display:block}
.topbar .menu-btn{padding:0 8px;height:40px}
.topbar .icon-btn{width:46px;height:46px}
#listen-mode{width:46px;padding:0}
#listen-mode svg{width:28px;height:28px}
#open-settings svg{width:27px;height:27px}
#report-btn svg{width:25px;height:25px}
@media (max-width:420px){.topbar .icon-btn,#listen-mode{width:38px;height:40px}.topbar .icon-btn svg{width:23px!important;height:23px!important}}
/* phones: «كل الأذكار» becomes a plain ☰ the same size as the other icons (the label stays for screen readers),
   which leaves the logo room to breathe */
@media (max-width:600px){
  .topbar .menu-btn{width:42px;height:44px;padding:0!important;justify-content:center;gap:0}
  .topbar .menu-btn svg{width:26px;height:26px}
  .topbar .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .topbar .icon-btn,#listen-mode{width:42px;height:44px}
  .topbar{gap:2px}
}
/* listen: plain headphones; pressing fills the ear cups and lights them */
#listen-mode .cup{transition:fill .25s}
#listen-mode[aria-pressed="true"]{color:var(--look)}
#listen-mode[aria-pressed="true"] .cup{fill:currentColor}
.brand{font-family:var(--f-text);font-size:30px;font-weight:700;line-height:1;color:var(--accent);display:flex;align-items:center;gap:8px}
.brand{text-decoration:none}.brand .logo{height:32px;width:auto;flex:none}.logo-dark{display:none}
:root[data-sky="night"] .logo-dark,:root[data-theme="dark"] .logo-dark{display:block}:root[data-sky="night"] .logo-light,:root[data-theme="dark"] .logo-light{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-dark{display:block}:root:not([data-theme="light"]) .logo-light{display:none}}.seo{padding:16px 0;line-height:1.9}.seo h1{font-family:var(--f-text);color:var(--accent)}.seo li{font-family:var(--f-text);font-size:19px;margin-bottom:12px}
.spacer{flex:1}
.seg{display:flex;background:var(--accent-soft);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:500 13px var(--f-ui);padding:7px 12px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0002}
/* الآن, shortly after each prayer: its own pill beside the mode switch; computers only */
.after-prayer{flex:none;padding:6px 14px;border-radius:999px;background:var(--surface);color:var(--ink);font:500 12.5px/1.3 var(--f-ui);text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px #0002}
.after-prayer[hidden],.row[hidden]{display:none}
@media (max-width:760px){.after-prayer{display:none}}
.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:38px;height:38px;border-radius:12px;cursor:pointer;font:500 16px var(--f-ui);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;padding:0}
.icon-btn svg{width:19px;height:19px;flex:none}
.icon-btn.listen{width:auto;padding:0 13px;font-size:13px;white-space:nowrap}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.meta{display:flex;align-items:center;font-size:13px;color:var(--muted);padding-block:0 12px;gap:12px}
.meta #label{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.bar{height:5px;background:var(--line);border-radius:5px;overflow:hidden;flex:1;min-width:40px}
.bar span{display:block;height:100%;background:var(--accent);width:0;transition:width .4s ease;border-radius:inherit}
.meta b{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr}

main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

/* Focus mode */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--surface);border-radius:28px;padding:30px 32px;cursor:pointer;user-select:none;position:relative;overflow:auto}
.stage{justify-content:flex-start;overflow:hidden}
.read{flex:1;min-height:0;width:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding-inline:4px;scrollbar-width:thin}
.counter{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:6px}
.ring.playing::before,.ring.playing::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:halo 1s ease-out infinite;pointer-events:none}
.ring.playing::after{animation-delay:.5s}
@keyframes halo{0%{transform:scale(.86);opacity:.55}100%{transform:scale(1.22);opacity:0}}
#wave{position:fixed;inset-inline:0;bottom:0;width:100%;height:34px;pointer-events:none;z-index:-1;opacity:0;transition:opacity .8s ease}
#wave.on{opacity:.9}
@media (prefers-reduced-motion: reduce){#wave{display:none}}
.text{font-family:var(--f-text);font-size:calc(clamp(24px, .5vw + 20px, 28px) * var(--scale));line-height:2;max-width:46ch;text-wrap:pretty;transition:opacity .25s}
.dname{margin-top:12px;font:600 calc(14px * var(--scale)) var(--f-ui);color:var(--accent)}
.virtue{margin-top:14px;font-size:calc(13px * var(--scale));color:var(--muted);max-width:46ch;line-height:1.7}
.src{margin-top:10px;font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.chip.review{border-color:var(--glow);color:var(--ink)}
.chip.share{font:inherit;background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.chip.share svg{width:13px;height:13px}.chip.share:hover{color:var(--ink);border-color:var(--accent)}
.bead{fill:var(--line);transition:fill .25s ease,transform .25s ease}
.bead.on{fill:var(--accent)}
.ring{margin-top:22px;width:120px;height:120px;position:relative;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}

.ring .track{stroke:var(--line)}
.ring .prog{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .25s ease}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font:600 24px var(--f-ui);font-variant-numeric:tabular-nums}
.ring .num small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.hint{margin-top:12px;font-size:12px;color:var(--muted)}
.pulse{animation:pulse .3s ease}
@keyframes pulse{50%{transform:scale(1.06)}}

.controls{display:flex;gap:10px;justify-content:space-between;padding-block:12px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
/* leave the bottom strip free for the sound wave (#wave is 34px): the card gives up that height */
.controls{padding-bottom:max(44px,calc(env(safe-area-inset-bottom,0px) + 36px))}
.btn{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 14px var(--f-ui);padding:13px;border-radius:14px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}


/* Done + streak */
.done-card{flex:1;background:var(--surface);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:14px}
.done-card h2{font-family:var(--f-text);font-size:34px;margin:0;color:var(--accent);text-wrap:balance}
.done-card p{margin:0;color:var(--muted);line-height:1.7;max-width:36ch}
.days{display:flex;gap:6px;direction:ltr}
.days span{width:22px;height:22px;border-radius:7px;background:var(--line)}
.days span.m{background:var(--accent)}
.days span.h{background:color-mix(in srgb,var(--accent) 45%,var(--line))}

dialog{border:0;border-radius:22px;background:var(--surface);color:var(--ink);padding:20px;width:min(360px,calc(100% - 32px));font-family:var(--f-ui)}
dialog{direction:rtl;text-align:right}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog h3{margin:0 0 14px;font-size:16px}
/* settings: title bar stays pinned while the sheet scrolls, with a small تم at the top right */
#settings{max-height:min(86vh,720px);overflow:auto;padding-top:0}
.dlg-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;margin:0 -20px 4px;padding:14px 20px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.dlg-head h3{margin:0;flex:1}
.dlg-head form{margin:0}
/* adhkar reminders: a gold-edged card with a bell and a real switch, so it stands apart from the plain rows */
.remind{display:flex;align-items:center;gap:12px;margin:12px 0;padding:14px;border-radius:16px;cursor:pointer;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--glow) 22%,var(--surface)),color-mix(in srgb,var(--accent) 16%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--glow) 60%,var(--line));box-shadow:0 6px 20px -10px color-mix(in srgb,var(--glow) 70%,transparent)}
.remind[hidden]{display:none}
.remind span{flex:1;display:flex;flex-direction:column;gap:3px}
.remind b{font:700 15px var(--f-ui)}
.remind small{font-size:12px;color:var(--muted);line-height:1.6}
.remind-bell{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--glow);color:#12302B}
.remind-bell svg{width:22px;height:22px;transform-origin:50% 10%}
.remind:has(.switch:checked) .remind-bell svg{animation:ring 1.2s ease 1}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.switch{appearance:none;flex:none;width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;margin:0}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:right .2s}
.switch:checked{background:var(--accent)}
.switch:checked::after{right:23px}
.switch:disabled{opacity:.6}
.remind:has(.switch:disabled){cursor:default}
.remind:has(.switch:disabled:not(:checked)) small{color:var(--ink)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* on a computer: one slim line, no switch */
.remind.mini{padding:8px 12px;gap:10px;margin:8px 0;box-shadow:none;border-radius:12px}
.remind.mini span{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
.remind.mini b{font-size:13px}
.remind.mini small{color:var(--muted)}
.remind.mini .remind-bell{width:26px;height:26px}
.remind.mini .remind-bell svg{width:15px;height:15px}
.remind.mini .switch{display:none}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;margin:0;padding:0;border:0;background:none;pointer-events:none;overflow:visible}
/* the reset button stands on its own: no divider above or below it */
#settings .row.row-plain,#settings .row:has(+ .row-plain){border-bottom:0}
/* «تم» sits top-left as a wide rectangle, styled like the old bottom button (.btn.primary) */
.dlg-head .dlg-done{flex:none;width:112px;padding:9px 0;border-radius:12px;font-weight:600}
.about-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--ink);background:var(--accent-soft);border:1px solid var(--line)}
.about-row svg{width:22px;height:22px;flex:none;color:var(--accent)}
.about-row span{flex:1;display:flex;flex-direction:column;gap:2px}
.about-row b{font:600 14px var(--f-ui)}
.about-row small{font-size:12px;color:var(--muted)}
.about-row .chev{width:18px;height:18px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center;padding-block:10px;border-bottom:1px solid var(--line);gap:12px;font-size:14px}
.row:last-of-type{border-bottom:0}
.note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:12px}
.flash{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--surface);font:600 15px var(--f-ui);padding:6px 16px;border-radius:999px;pointer-events:none;animation:fl 1.8s ease forwards;font-variant-numeric:tabular-nums}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-6px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%{transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0}}
#deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:720px){.stage,.done-card{max-height:60vh}}
/* tablets: the slider drops under the two switches */
@media (max-width:760px){.toolbar{flex-wrap:wrap}.toolbar .meta{flex:1 1 100%}}
@media (max-width:600px){
  .toolbar{gap:8px}.toolbar .seg{min-width:0}.seg-mode{flex:1}
  .toolbar .seg button{flex:1;padding:5px 4px;white-space:nowrap}
  .stage{padding:24px 16px}
  /* phones: the text gets the room. Smaller counter and buttons, a font sized so آية الكرسي fits without scrolling;
     anyone who wants it bigger raises it from settings (--scale) */
  .stage,.done-card{max-height:none}
  .stage{padding:14px 10px 12px}.read{padding-inline:0}
  .dhead{padding-bottom:6px;margin-bottom:4px}.dhead b{font-size:calc(16px * var(--scale))}
  .text{font-size:calc(19px * var(--scale));line-height:1.85;max-width:none}
  .virtue{margin-top:8px;font-size:calc(12px * var(--scale));line-height:1.6}.src{margin-top:6px}
  /* the counter floats in the card's bottom-left corner (the end of an RTL line), so the text gets the whole card;
     tapping anywhere still counts */
  .counter{position:absolute;left:10px;bottom:10px;padding:0;z-index:2;pointer-events:none}
  .ring{margin:0;width:58px;height:58px;border-radius:50%;background:var(--card-bg);box-shadow:0 2px 10px #0006}
  .ring .num{font-size:15px;line-height:1.1}.ring .num small{font-size:9px}
  .hint{display:none}
  .read{padding-bottom:30px}
  .controls{gap:8px;padding-top:8px}.controls .btn{padding:9px 6px;font-size:13px;border-radius:12px}
}
@media (max-width:600px) and (max-height:740px){.text{font-size:calc(18px * var(--scale));line-height:1.8}}
@media (max-width:400px){.brand .logo{height:28px}.toolbar .seg button{font-size:12px}}
@media (max-width:340px){.toolbar .seg{flex:1 1 100%}}
.report-row{display:flex;justify-content:center;padding-block:6px 10px}
/* report: a solid pill so it stays readable over any scene (sand, sky or night) */
.linkbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px var(--f-ui);cursor:pointer;padding:8px 18px;border-radius:999px;box-shadow:0 1px 3px #0003}
.linkbtn:hover{opacity:.85}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
.fld textarea,.fld input{font:14px var(--f-ui);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;resize:vertical;min-width:0}
.fld textarea:focus-visible,.fld input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.actions{display:flex;gap:10px;margin-top:4px}
.hp{position:absolute;inset:0 auto auto 0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* looks: the first paint is instant; only a switch between looks (الآن/الصباح/المساء) cross-fades */
/* a still scene (reduced motion) pauses all animation, which would freeze the fade at opacity 0: no fade there */
#scene.swap:not(.still) canvas,#scene.swap:not(.still) #deco,#scene.swap:not(.still) #art{animation:scenein .6s ease both}
@keyframes scenein{from{opacity:0}}
:root[data-look="sleep"] #scene{filter:saturate(.9)}
/* card heading: which adhkar this is (set name) and which dhikr (its title), in the look's colour */
.dhead{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:12px;margin-bottom:6px;width:100%;border-bottom:1px solid var(--line)}
.dhead span{font:600 calc(12px * var(--scale)) var(--f-ui);color:var(--accent);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.dhead span::before,.dhead span::after{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.dhead b{font:700 calc(19px * var(--scale)) var(--f-text);color:var(--ink)}
.read{min-height:4.2em}
:root:not([data-look="now"]) .bar span{background:var(--look)}
:root:not([data-look="now"]) .controls .btn.primary{background:var(--look);border-color:var(--look);color:#16120C}
/* الآن / الصباح / المساء: one switch with a thumb that slides right, middle, left. Flat, no shadow, slimmer */
.seg{padding:2px}
.seg button{padding:5px 12px;font-size:12.5px;line-height:1.3}
.seg-mode{display:grid;grid-template-columns:repeat(3,1fr);position:relative;isolation:isolate}
.seg-mode button{position:relative;z-index:1;box-shadow:none!important;transition:color .25s}
.seg-mode::after{content:"";position:absolute;z-index:0;top:2px;bottom:2px;right:2px;width:calc((100% - 4px) / 3);border-radius:999px;
  background:var(--surface);transition:transform .3s cubic-bezier(.3,.9,.3,1),opacity .2s;opacity:0}
@supports selector(:has(a)){
  .seg-mode button[aria-pressed="true"]{background:transparent}
  .seg-mode:has([aria-pressed="true"])::after{opacity:1}
  .seg-mode:has(#p-morning[aria-pressed="true"])::after{transform:translateX(-100%)}
  .seg-mode:has(#p-evening[aria-pressed="true"])::after{transform:translateX(-200%)}
}
/* one "on" look for every active control: dark green with a gold rim and white text, in every theme and scene
   (the chosen الآن/الصباح/المساء segment, مضغوط, the running auto-flip, and the main action under the card) */
:root{--act-bg:#16594E;--act-rim:#F2C46D;--act-ink:#fff}
/* the buttons under the card stay light in every theme (night used to turn them near-black) */
.controls .btn:not(.primary){background:#F7F5EF;border-color:transparent;color:#14302C}
@supports selector(:has(a)){
  .seg-mode::after{background:var(--act-bg);box-shadow:inset 0 0 0 1.5px var(--act-rim)}
  .toolbar .seg-mode button[aria-pressed="true"]{color:var(--act-ink)!important;font-weight:600}
}
.controls .btn.primary,:root:not([data-look="now"]) .controls .btn.primary{background:var(--act-bg);border-color:var(--act-rim);color:var(--act-ink)}
#p-now::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3FD07A;margin-inline-end:6px;vertical-align:middle;box-shadow:0 0 0 3px #3FD07A33}
#p-now[aria-pressed="true"]::before{animation:live 2.4s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 5px #3FD07A11}}
/* softer daylight: the sky stays alive but never glares */
:root[data-sky="day"] #scene{filter:brightness(.82) saturate(.88)}

/* Installed-app opening: continues the Android splash, then fades away on its own (no JS: CSP allows no inline script) */
#boot{display:none}
@media (display-mode: standalone){#boot{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0B1416;pointer-events:none;animation:boot-out .35s ease .9s forwards}}
#boot .dot{transform-box:fill-box;transform-origin:center;animation:boot-dot 1s ease-in-out infinite}
#boot .dot+.dot{animation-delay:.25s}
@keyframes boot-dot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes boot-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){#boot .dot{animation:none}}/* visitors online now: in the top bar on wide screens, between the two switches on phones */
.online{display:none;align-items:center;gap:4px;padding:0 8px;flex:none;color:var(--ink);font:600 14px/1 var(--f-ui);font-variant-numeric:tabular-nums;cursor:default}
.online svg{width:20px;height:20px}
.topbar .online:not([hidden]){display:inline-flex}
@media (max-width:600px){.topbar .online:not([hidden]){display:none}.toolbar .online:not([hidden]){display:inline-flex;padding:0 2px}.toolbar .online svg{width:17px;height:17px}}
/* font size steps in settings: inactive light, chosen one in the shared "on" look */
.steps{display:flex;gap:4px;flex:none}
.steps button{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px var(--f-ui);padding:6px 10px;border-radius:10px;cursor:pointer;box-shadow:none}
/* chosen size: the soft tint of the «عن الموقع» row in light, a quiet grey in dark */
.steps button[aria-pressed="true"]{background:var(--accent-soft);background:light-dark(var(--accent-soft),#33353A);border-color:var(--accent);border-color:light-dark(var(--accent),#55585E);color:var(--accent);color:light-dark(var(--accent),var(--ink));font-weight:600}

/* Side menu (shared by app and content pages). Opens from the right in RTL. */
.menu-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);cursor:pointer;height:38px;padding:0 12px 0 14px;border-radius:999px;flex:none;
  background:var(--accent-soft,#7AD6C21f);color:var(--accent);font:600 14px/1 var(--f-ui);white-space:nowrap}
.menu-btn svg{width:18px;height:18px;flex:none}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
dialog.drawer{position:fixed;top:0;bottom:0;right:0;left:auto;margin:0;width:min(320px,86vw);height:100%;max-height:none;max-width:none;
  padding:0;border:0;overflow:hidden;border-radius:24px 0 0 24px;box-shadow:-12px 0 40px #0004;
  background:var(--surface,var(--card));color:var(--ink);font-family:var(--f-ui)}
dialog.drawer[open]{animation:drawer-in .24s cubic-bezier(.2,.8,.2,1)}
dialog.drawer::backdrop{background:#0008;backdrop-filter:blur(2px)}
@keyframes drawer-in{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){dialog.drawer[open]{animation:none}}
.drawer *{box-sizing:border-box}
.drawer-in{display:flex;flex-direction:column;height:100%;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.drawer-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.drawer-logo{flex:1;display:flex;align-items:center}
.drawer-logo .logo{height:30px;width:auto}
.drawer-close{border:0;background:var(--accent-soft,#7AD6C21f);color:var(--ink);width:36px;height:36px;border-radius:12px;cursor:pointer;display:grid;place-items:center}
.drawer .ico{width:22px;height:22px;display:block}
.drawer nav{display:flex;flex-direction:column;flex:1;min-height:0}
.drawer .drawer-list,.drawer .drawer-foot{display:flex;flex-direction:column;gap:4px}
.drawer nav a{margin:0;text-decoration:none;color:var(--ink)}
.drawer .tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.drawer .tile{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;
  background:var(--accent-soft,#7AD6C21f);border:1px solid transparent}
.drawer .tile .ico{width:20px;height:20px;flex:none;color:var(--gold,var(--glow,#F2C46D))}
.drawer .tile span{font:700 15px/1.3 var(--f-text);color:var(--accent)}
.drawer .tile[aria-current="page"]{border-color:var(--accent)}
.drawer .grp{font-size:12px;letter-spacing:.02em;color:var(--muted) !important;padding:4px 6px 6px}
.drawer .row{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:7px 6px;border-radius:14px;font-size:15px}
.drawer .row span{flex:1;text-align:start}
.drawer .row i{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;background:var(--accent-soft,#7AD6C21f);color:var(--accent)}
.drawer .row:hover,.drawer .row[aria-current="page"]{background:var(--accent-soft,#7AD6C21f)}
.drawer .row[aria-current="page"] i{background:var(--accent);color:var(--surface,var(--bg))}
/* the adhkar list scrolls; the calendar, upcoming products and «عن الموقع» stay pinned at the bottom
   on a slightly different panel (full drawer width, down to the safe-area edge) so rows scrolling behind it stay apart */
.drawer .drawer-list{flex:1;min-height:0;overflow-y:auto;padding-bottom:8px;margin-inline-end:-12px;padding-inline-end:8px}
/* slim rounded scrollbar in the drawer's side gutter, ending above the pinned panel */
.drawer .drawer-list::-webkit-scrollbar{width:4px}
.drawer .drawer-list::-webkit-scrollbar-track{background:transparent;margin:4px 0 14px}
.drawer .drawer-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:4px}
@supports (-moz-appearance:none){.drawer .drawer-list{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent}}
.drawer .drawer-foot{flex:none;margin:0 -16px calc(-16px - env(safe-area-inset-bottom,0px));padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ink) 6%,var(--surface,var(--card)));border-top:1px solid var(--line);box-shadow:0 -10px 18px -14px #0006}
.drawer .about{color:var(--muted);font-size:13px}
.drawer .about i{background:none;color:var(--muted)}
.drawer .credit{margin:4px 0 0;text-align:center;color:var(--muted);font-size:11px}
.drawer .credit a{color:inherit;text-decoration:underline}
@media (max-height:620px){.drawer .row i{width:30px;height:30px}.drawer .row{padding:5px 6px}.drawer .tiles{margin-bottom:8px}}
/* phones: slimmer rows so the whole menu fits without scrolling */
@media (max-width:600px){
  .drawer-in{padding-top:12px}.drawer-head{margin-bottom:10px}
  .drawer .drawer-list,.drawer .drawer-foot{gap:1px}
  .drawer .row{padding:3px 6px;gap:10px;font-size:14px;border-radius:12px}
  .drawer .row i{width:30px;height:30px;border-radius:10px}
  .drawer .row .ico{width:18px;height:18px}
  .drawer .tiles{margin-bottom:6px}.drawer .tile{padding:7px 10px}
}

/* year calendar (cal.js): month name, then 31 day cells; the whole year fits any width without scrolling */
.cal{display:grid;grid-template-columns:auto repeat(31,minmax(0,1fr));gap:2px 1px;width:100%;max-width:560px;align-items:center;direction:rtl;touch-action:none}
.cal b{font:500 10px/1 var(--f-ui);color:var(--muted);padding-inline-end:4px;text-align:start;white-space:nowrap}
.cal i{height:14px;border-radius:2px}
@media (max-width:600px){.card:has(.cal){padding-inline:10px}}
.cal i.d{background:var(--line);cursor:pointer}
.cal i.on{background:var(--accent)}
.cal i.later{opacity:.35}
.cal-i{display:inline-grid;place-items:center;width:20px;height:20px;margin-inline-start:4px;padding:0;border:1px solid var(--muted);border-radius:50%;background:none;color:var(--muted);font:italic 600 12px/1 Georgia,serif;cursor:pointer;vertical-align:middle}
.cal-i[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#0B1416}
.cal-info{font-size:12.5px;line-height:1.8;color:var(--muted);margin:8px 0 0;max-width:44ch;text-align:center}
.cal i.now{box-shadow:0 0 0 1px var(--gold,#F2C46D)}
.cal i.sel{outline:2px solid var(--ink);outline-offset:0}
.cal-say{min-height:1.7em;font-size:13px;color:var(--ink);margin:6px 0 0;text-align:center}
.cal-n{font-size:12px;color:var(--muted);margin:0;text-align:center}
@media (min-width:600px){.cal{gap:3px}.cal b{font-size:12px}.cal i{height:auto;aspect-ratio:1}}
/* /progress/: one tab per wird */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tabs button{display:flex;align-items:center;gap:5px;font:500 13px/1.4 var(--f-ui);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.tabs button .ico{width:15px;height:15px}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#0B1416}
.cal-box{display:flex;flex-direction:column;align-items:center}
.done-card .cal-box{width:100%}
.done-card .cal-link{font-size:13px;color:var(--accent)}