@font-face{font-family:"Noto Sans Arabic";src:url("/fonts/NotoSansArabicRegular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Noto Sans Arabic";src:url("/fonts/NotoSansArabicBold.ttf") format("truetype");font-weight:700;font-display:block}

:root{
  --night:#14213d;
  --night-2:#1d2d52;
  --day:#eef4f7;
  --day-ink:#16324a;
  --gold:#e0b45a;
  --sun:#f2c14e;
  --bg:var(--night);--ink:#f2efe6;--card:#1d2d52;--line:rgba(255,255,255,.12);--accent:var(--gold);--muted:rgba(242,239,230,.65);
}
body[data-theme="morning"]{--bg:var(--day);--ink:var(--day-ink);--card:#fff;--line:rgba(22,50,74,.14);--accent:#c98a14;--muted:rgba(22,50,74,.65)}
body[data-theme="evening"]{--bg:var(--night);--ink:#f2efe6;--card:var(--night-2);--line:rgba(255,255,255,.12);--accent:var(--gold)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Noto Sans Arabic",sans-serif;transition:background .3s,color .3s}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* home */
.home{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr 1fr;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.choice{border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;font-size:2.2rem;font-weight:700;width:100%}
.choice svg{width:72px;height:72px}
.choice.m{background:var(--day);color:var(--day-ink)}
.choice.e{background:var(--night);color:#f2efe6}
.choice small{font-size:1rem;font-weight:400;opacity:.7}

/* reader */
.bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(.8rem + env(safe-area-inset-top)) 1.1rem .8rem;background:var(--bg);border-bottom:1px solid var(--line)}
.bar h1{margin:0;font-size:1.3rem}
.bar button{background:none;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.95rem}
.bar span{font-size:1rem;color:var(--muted)}
.single{max-width:640px;margin:0 auto;padding:1rem;height:calc(100dvh - 4.6rem - env(safe-area-inset-top));display:flex}
.card{flex:1;display:flex;flex-direction:column;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.2rem 1.1rem;min-height:0;margin-bottom:env(safe-area-inset-bottom)}
.txt{flex:1;overflow-y:auto;display:flex;min-height:0}
.txt p{margin:auto 0;font-size:1.6rem;line-height:2.4;text-align:right;width:100%}
.txt.end p{text-align:center}
.counter{display:flex;align-items:center;gap:.7rem}
.tap{flex:1;min-height:72px;border:0;border-radius:14px;background:var(--accent);color:#14213d;font-size:1.7rem;font-weight:700;touch-action:manipulation;user-select:none}
.tap:active{transform:scale(.98)}
.next{background:none;border:1px solid var(--line);border-radius:14px;min-height:72px;padding:0 1.4rem;font-size:1.1rem}
.next[hidden]{display:none}

.card{transition:opacity .28s ease,transform .28s ease}
.card.leaving{opacity:0;transform:translateX(28px)}
.card.entering{animation:enter .3s ease}
@keyframes enter{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.tap{transition:background-color .25s ease,color .25s ease,transform .1s}
.tap.ok{background:#3f9d6b;color:#fff;display:flex;align-items:center;justify-content:center}
.check{width:40px;height:40px;stroke-dasharray:24;animation:draw .45s ease-out both}
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.tap:disabled{opacity:.55;cursor:default}

/* lock the page, only long text scrolls inside its own box */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%}
.home{height:100%;min-height:0}
.txt{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* fix: give the app a real height so the menu halves fill the screen */
#app{display:block;height:100%}
.home{padding:0}
.choice.m{padding-top:env(safe-area-inset-top)}
.choice.e{padding-bottom:env(safe-area-inset-bottom)}

/* scroll affordance */
.card{position:relative}
.wrap{position:relative;flex:1;min-height:0;display:flex}
.txt{--t:#000;--b:#000;-webkit-mask-image:linear-gradient(to bottom,var(--t) 0,#000 48px,#000 calc(100% - 48px),var(--b) 100%);mask-image:linear-gradient(to bottom,var(--t) 0,#000 48px,#000 calc(100% - 48px),var(--b) 100%)}
.card.more-up .txt{--t:transparent}
.card.more-down .txt{--b:transparent}
.txt p{padding:0 .4rem}
.hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--accent);display:none;align-items:center;justify-content:center;padding:0;animation:bob 1.6s ease-in-out infinite}
.hint svg{width:24px;height:24px}
.card.more-down .hint{display:flex}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

html,body{touch-action:manipulation}
.txt{touch-action:pan-y}

/* custom scrollbar */
body[data-theme="morning"]{--track:rgba(22,50,74,.12)}
body[data-theme="evening"]{--track:rgba(255,255,255,.16)}
.txt{scrollbar-width:none;padding-left:20px}
.txt::-webkit-scrollbar{display:none}
.txt.end{padding-left:0}
.sb{position:absolute;left:0;top:6px;bottom:6px;width:20px;display:none}
.sb::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:6px;border-radius:3px;background:var(--track)}
.card.scrollable .sb{display:block}
.thumb{position:absolute;left:0;top:0;width:20px;min-height:40px;touch-action:none}
.thumb::after{content:"";position:absolute;left:7px;top:0;bottom:0;width:6px;border-radius:3px;background:var(--accent);transition:width .15s,left .15s}
.thumb.drag::after{left:5px;width:10px}

/* fix: keep the track laid out so it can be measured, only hide it visually */
.sb{display:block;visibility:hidden}
.card.scrollable .sb{visibility:visible}

.txt{overscroll-behavior:none}

/* nav buttons */
.nav{display:flex;gap:.7rem}
.navbtn{flex:1;min-height:48px;background:none;border:1px solid var(--line);border-radius:12px;font-size:1.05rem;touch-action:manipulation}
.navbtn:disabled{opacity:.35}
.card.leaving.back{transform:translateX(-28px)}
.card.entering.back{animation:enterback .3s ease}
@keyframes enterback{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

.rst{background:none;border:1px solid var(--line);border-radius:14px;min-height:72px;padding:0 1.3rem;font-size:1.1rem;touch-action:manipulation}
.rst[hidden]{display:none}