/* Layout: one centred column. Big verse card in the middle, dot map above, two giant buttons below. Flat saturated colour, thick ink borders, square corners. */
:root{
  --bg:#E9E8E4;      /* neutral; each text brings its own */
  --card:#FAFAF8;
  --ink:#16141F;
  --soft:#6B6377;
  --blue:#3D5AFE;    /* primary action */
  --ok:#14A44D;      /* got it */
  --miss:#E5383B;    /* again (bulbul red vent) */
  --hint:#E6E3DA;
  --onbg:#16141F;    /* text sitting directly on the page colour */
  --onsoft:#6B6874;
  --accent:#3D5AFE;  /* primary buttons, current box */
  --goink:#FFFFFF;   /* text on --accent */
  --num:#3D5AFE;     /* verse number inside the card */
  --display:"Lalezar","Rubik",sans-serif;
  --verse:"Amiri","Traditional Arabic","Geeza Pro",serif;
  --ui:"Lalezar","Rubik","Helvetica Neue",Arial,sans-serif;
}
/* Always the yellow palette (P1), whatever the device's light/dark setting. */
*{box-sizing:border-box}
body{background:var(--bg);color:var(--onbg);font-family:var(--ui);font-size:16px;font-synthesis:none;letter-spacing:.01em;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 40px}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button{font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;border-radius:0}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2rem,8vw,2.8rem);line-height:1;margin:0;direction:rtl}
.tash{border:3px solid var(--ink);padding:4px 10px;font-family:var(--ui);font-size:1.1rem;background:var(--card)}
.tash.on{background:var(--ink);color:var(--bg)}

.tabs{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink)}
.tabs button{padding:12px;font-weight:800;font-size:1.1rem;background:var(--card)}
.tabs button + button{border-inline-start:3px solid var(--ink)}
[dir=rtl] .ask,[dir=rtl] .blank,[dir=rtl] .done{direction:rtl}
.tabs button.on{background:var(--ink);color:var(--bg)}
.tabs small{display:block;font-weight:500;font-size:.75rem;opacity:.75}

.prog{display:flex;flex-direction:column;gap:8px}
.progtxt{font-weight:700;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dots button{width:22px;height:22px;border:2px solid var(--ink);background:var(--card);font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums;padding:0}
.dots button.k{background:var(--ok);border-color:var(--ok);color:var(--card)}
.dots button.m{background:var(--miss);border-color:var(--miss);color:var(--card)}
.dots button.cur{outline:3px solid var(--accent);outline-offset:1px}

.card{background:var(--card);border:3px solid var(--ink);padding:22px 20px 26px;display:flex;flex-direction:column;gap:14px;direction:rtl;min-height:280px}
.num{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--num);direction:ltr;text-align:right}
.half{font-family:var(--verse);font-weight:700;font-size:clamp(1.7rem,6.5vw,2.3rem);line-height:1.8;text-align:center;text-wrap:balance}
.sep{height:3px;background:var(--ink);width:40%;align-self:center;opacity:.15}
.w{display:inline-block;padding:0 2px;margin:0 1px}
.w.hid{background:var(--hint);color:transparent;cursor:pointer;min-width:2.2em;user-select:none}
.w.hint{background:var(--hint);cursor:pointer}
.w.hint .rest{color:transparent}
.ask{color:var(--soft);font-family:var(--ui);font-weight:700;font-size:1rem;text-align:center;direction:ltr}
.blank{border:3px dashed var(--soft);min-height:3.6em;display:flex;align-items:center;justify-content:center;font-family:var(--ui);color:var(--soft);font-weight:700;cursor:pointer;direction:ltr}
.answer{color:var(--num)}

.hidebar{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--ink)}
.hidebar button{padding:10px 4px;font-weight:700;background:var(--card)}
.hidebar button + button{border-inline-start:3px solid var(--ink)}
.hidebar button.on{background:var(--accent);color:var(--goink)}

.big{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.big button{padding:18px 10px;font-weight:800;font-size:1.25rem;border:3px solid var(--ink);background:var(--card)}
.big .go{background:var(--accent);color:var(--goink);border-color:var(--ink);grid-column:1/-1}
.big .ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.big .miss{background:var(--miss);color:#fff;border-color:var(--miss)}
.chead{display:flex;justify-content:space-between;align-items:center}
.spk{width:44px;height:44px;border:3px solid var(--ink);display:grid;place-items:center;background:var(--card);color:var(--ink)}
.spk svg{width:24px;height:24px}
.spk.on{background:var(--accent);border-color:var(--ink);color:var(--goink)}
.spk:disabled{opacity:.3;cursor:not-allowed}

.big button:active{transform:translateY(2px)}
.hint-txt{font-size:.85rem;color:var(--onsoft);text-align:center;margin:0}

.done{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex:1;direction:ltr}
.done b{font-family:var(--display);font-weight:400;font-size:2.4rem}

footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;font-size:.9rem}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (max-width:520px){
  body{padding-block:12px 28px}
  .wrap{gap:14px}
  .tabs button{padding:10px 6px;font-size:1.05rem}
  .card{padding:14px 12px 18px;min-height:230px;gap:10px}
  .half{font-size:clamp(1.55rem,7.4vw,2rem);line-height:1.75}
  .num{font-size:1.9rem}
  .hidebar button{padding:12px 2px;font-size:.95rem}
  .big button{padding:16px 8px;font-size:1.15rem}
  .progtxt{font-size:.9rem}
  .dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr))}
  .dots button{width:auto;height:30px;font-size:.85rem}
}
footer button{text-decoration:underline;color:var(--onsoft)}
dialog{border:3px solid var(--ink);background:var(--card);color:var(--ink);padding:18px;width:min(640px,calc(100vw - 32px));border-radius:0}
dialog::backdrop{background:rgba(22,20,31,.6)}
textarea{width:100%;min-height:50vh;font-family:var(--verse);font-size:1.15rem;line-height:1.8;direction:rtl;background:var(--bg);color:var(--ink);border:2px solid var(--ink);padding:10px;border-radius:0}
.drow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.drow button{border:3px solid var(--ink);padding:8px 14px;font-weight:700}
.drow .go{background:var(--accent);color:var(--goink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.big button:active{transform:none}}

/* Library */
.brand{display:flex;align-items:baseline;gap:10px}
.brand small{font-size:1rem;color:var(--onsoft)}
.home{background:none;border:0;padding:0;font:inherit;color:var(--onbg);cursor:pointer;text-align:start}
.shelf{display:grid;gap:12px}
.book{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--card);border:3px solid var(--ink);padding:14px 16px;text-align:start;width:100%}
.book .bt{font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1.3;direction:rtl;text-align:start;grid-column:1}
.book .bs{color:var(--soft);font-size:.95rem;grid-column:1}
.book .bp{grid-column:2;grid-row:1/3;font-family:var(--display);font-size:1.3rem;color:var(--accent);font-variant-numeric:tabular-nums}
.book .bp.full{color:var(--ok)}
.addbook{border:3px dashed var(--ink);padding:14px;font-size:1.1rem;background:transparent;width:100%}
.lead{margin:0;color:var(--onsoft);line-height:1.5}
input.title{width:100%;font-family:var(--verse);font-size:1.2rem;direction:rtl;background:var(--bg);color:var(--ink);border:2px solid var(--ink);padding:8px 10px;border-radius:0;margin-bottom:10px}
.kindrow{display:flex;gap:8px;margin-bottom:10px}
.kindrow button{border:3px solid var(--ink);padding:6px 12px}
.kindrow button.on{background:var(--ink);color:var(--bg)}
.drow .danger{border-color:var(--miss);color:var(--miss)}
.half.solo{font-size:clamp(1.45rem,5.6vw,2rem)}

[hidden]{display:none!important}
#v-lib,#v-text{width:100%;margin:0}
.back{border:3px solid var(--ink);padding:4px 12px;font-size:1.1rem;background:var(--card)}

.card{color:var(--ink)}
.tash.on,.tabs button.on,.kindrow button.on{color:var(--card)}
/* progress boxes sit on a card-coloured strip so green/red read on every page colour;
   known = filled green, missed = thick red frame */
.dots{background:var(--card);border:3px solid var(--ink);padding:6px}
.dots button.m{background:transparent;border:3px solid var(--miss);color:var(--ink)}
/* library */
.shelfhead{font-size:.8rem;letter-spacing:.08em;color:var(--onsoft);margin:6px 0 -4px}
.book{grid-template-columns:auto 1fr auto}
.book .tag{grid-column:1;grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;border:3px solid var(--ink)}
.book .bt,.book .bs{grid-column:2}
.book .bp{grid-column:3}