/* WERD — dark, Arabic-first. Palette taken from the Madinah Mushaf: night-green cover, gold illumination, parchment page. */
@font-face { font-family: 'KFGQPC Hafs'; src: url('./fonts/kfgqpc_hafs_v30.ttf') format('truetype'); font-display: swap; }

:root {
  --bg: #122428;          /* night petrol */
  --bg-2: #0E1D20;        /* deeper well for the bars */
  --raise: #1A3136;       /* raised surfaces */
  --raise-2: #213C42;
  --line: #2E4C52;
  --text: #EFE7D4;        /* parchment */
  --muted: #93ABA6;       /* sage */
  --gold: #C8A45A;        /* gold leaf */
  --gold-soft: #8E7744;
  --easy: #86BF9B; --okay: #D9B96A; --hard: #DE8A7F;
  --consol: #B9C7C0; --prev: #6FA9B4;
  --radius-l: 22px; --radius-m: 14px; --radius-s: 9px;
  --ui: 'Readex Pro', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'SF Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --quran: 'KFGQPC Hafs', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --step--1: .84rem; --step-0: 1rem; --step-1: 1.2rem; --step-2: 1.5rem; --step-3: 2.1rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 var(--step-0)/1.6 var(--ui); letter-spacing: 0;
  background-image: radial-gradient(1200px 520px at 50% -180px, #1B3A3F 0%, transparent 70%);
  background-attachment: fixed;
}
[lang='en'] body, html[lang='en'] body { line-height: 1.55; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.25; }
h1 { font-size: var(--step-2); }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }
p { margin: 0; }
small, .small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.center { min-height: 50vh; display: grid; place-items: center; gap: 1rem; text-align: center; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Quran references: official KFGQPC Hafs face for Arabic Surah names */
.q { font-family: var(--quran); font-size: 1.22em; line-height: 1.5; word-spacing: .06em; }
.q-en { font-weight: 500; }

/* ---------- shell */
.app { max-width: 760px; margin: 0 auto; padding: 0 16px calc(120px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 10px; }
.brand { display: flex; align-items: center; gap: .55rem; }
.brand .mark { font-family: var(--quran); font-size: 1.6rem; color: var(--gold); line-height: 1; inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 50%; padding-block-start: .25rem; }
.brand .word { font-weight: 500; letter-spacing: .02em; }
.top-actions { display: flex; gap: .25rem; }
.link { background: none; border: 0; color: var(--muted); padding: .4rem .6rem; border-radius: 8px; cursor: pointer; }
.link:hover { color: var(--text); background: var(--raise); }
main { outline: none; }
nav.bottom {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
  display: flex; justify-content: center; gap: .25rem;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg-2) 70%, transparent);
}
nav.bottom button { background: none; border: 0; color: var(--muted); padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; }
nav.bottom button[aria-current='page'] { background: var(--raise-2); color: var(--text); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-block-size: 44px; padding: .55rem 1.15rem; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; font-weight: 500; transition: background .15s, transform .08s; }
.btn:hover:not(:disabled) { background: var(--raise-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #1B1608; }
.btn.primary:hover:not(:disabled) { background: #D6B46B; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--hard); color: var(--hard); }
.btn.big { min-block-size: 52px; font-size: var(--step-1); inline-size: 100%; }
.btn.small { min-block-size: 34px; padding: .25rem .8rem; font-size: var(--step--1); }

/* ---------- login */
.login { display: grid; justify-items: center; gap: 1.2rem; padding-block: 6vh 2rem; }
.login-mark { font-family: var(--quran); font-size: 4.6rem; line-height: 1.2; color: var(--gold); }
.tagline { color: var(--muted); margin-block-start: -.6rem; }
.card-form { inline-size: min(420px, 100%); display: grid; gap: 1rem; padding: 1.5rem; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-l); }
.field { display: grid; gap: .35rem; }
.field span { color: var(--muted); font-size: var(--step--1); }
.field input, .field select { min-block-size: 46px; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; }
.field small { color: var(--muted); }
.form-error { color: var(--hard); }

/* ---------- banners & toast */
.banner { display: grid; gap: .2rem; padding: .8rem 1rem; border-radius: var(--radius-m); background: var(--raise); border: 1px solid var(--line); margin-block: .75rem; }
.banner.warn { border-color: var(--okay); color: var(--okay); }
.banner.calm { border-color: var(--prev); }
.toast { position: fixed; inset-inline: 16px; inset-block-end: calc(84px + env(safe-area-inset-bottom)); margin-inline: auto; max-inline-size: 520px; padding: .8rem 1rem; border-radius: 12px; background: var(--text); color: var(--bg); text-align: center; transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: none; }
.toast[data-kind='warn'] { background: var(--okay); color: #231a05; }

/* ---------- the hero: rosette + session label */
.hero { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: 1.25rem; margin-block: .5rem 1.25rem; border-radius: var(--radius-l); background: linear-gradient(160deg, var(--raise) 0%, var(--bg-2) 100%); border: 1px solid var(--line); }
.hero-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; min-inline-size: 0; overflow-wrap: anywhere; }
.hero-text h1 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); font-weight: 400; }
.kicker { color: var(--gold); font-size: var(--step--1); }
.hero.done .hero-text .btn { justify-self: start; margin-block-start: .4rem; }
.streak-line { display: flex; align-items: center; gap: .4rem; color: var(--gold); }
.flame { inline-size: .6rem; block-size: .9rem; border-radius: 50% 50% 45% 45%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.meter { block-size: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.meter span { display: block; block-size: 100%; background: var(--gold); border-radius: inherit; transition: inline-size .4s ease; }

.rosette { inline-size: 100%; block-size: auto; overflow: visible; }
.rosette .arc { fill: none; stroke-width: 13; stroke-linecap: round; stroke: var(--line); transition: stroke .3s; }
.rosette .arc.past { stroke: var(--gold-soft); }
.rosette .arc.now { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(200, 164, 90, .55)); }
.rosette .arc.next.consol { stroke: #3A5753; }
.rosette .arc.next.prev { stroke: #2D5560; }
.rosette .arc.now.consol { stroke: var(--consol); filter: drop-shadow(0 0 6px rgba(185, 199, 192, .5)); }
.rosette .arc.now.prev { stroke: var(--prev); filter: drop-shadow(0 0 6px rgba(111, 169, 180, .55)); }
.rosette .arc-n { fill: var(--muted); font: 500 12px var(--ui); text-anchor: middle; dominant-baseline: central; }
.rosette .arc-n.now { fill: var(--text); }
.rosette .ro-num { fill: var(--text); font: 300 52px var(--ui); text-anchor: middle; dominant-baseline: central; }
.rosette .ro-cap { fill: var(--muted); font: 400 13px var(--ui); text-anchor: middle; }
.hero.lit .rosette .arc.now { animation: glow 1.4s ease-out 1; }
@keyframes glow { 0% { stroke-width: 13; } 40% { stroke-width: 19; } 100% { stroke-width: 13; } }

/* ---------- tasks: each card shaped to its job */
.tasks { display: grid; gap: 1rem; }
.task { position: relative; display: grid; gap: .65rem; padding: 1.15rem 1.2rem; border-radius: var(--radius-m); background: var(--raise); border: 1px solid var(--line); }
.task::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; inline-size: 3px; border-radius: 3px; background: var(--line); }
.task header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.task header h2 { font-size: var(--step-0); color: var(--muted); font-weight: 500; }
.task.hifdh::before { background: var(--gold); }
.task.recent::before { background: var(--okay); }
.task.overall::before { background: var(--prev); }
.task.consol::before { background: var(--consol); }
.task.preview::before { background: var(--prev); }
.task.hifdh { padding-block: 1.4rem; background: linear-gradient(170deg, var(--raise-2), var(--raise) 60%); }
.passage { font-size: var(--step-3); line-height: 1.35; color: var(--text); }
.passage .q { font-size: 1.15em; }
.passage.small { font-size: var(--step-2); }
.parts { margin: 0; padding-inline-start: 1.1rem; color: var(--muted); }
.meta { color: var(--muted); font-size: var(--step--1); }
.help { color: var(--muted); font-size: var(--step--1); max-inline-size: 60ch; }
.note { color: var(--prev); font-size: var(--step--1); }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.actions .btn.primary { flex: 1 1 auto; }
.task.is-done { background: transparent; }
.task.is-done .passage { color: var(--muted); }
.state { margin-inline-start: auto; font-size: var(--step--1); padding: .1rem .6rem; border-radius: 99px; border: 1px solid var(--line); }
.state.ok { color: var(--easy); border-color: var(--easy); }
.state.later { color: var(--okay); border-color: var(--okay); }
.tag { font-size: var(--step--1); padding: .05rem .55rem; border-radius: 99px; background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.tag.late { color: var(--hard); border-color: rgba(222, 138, 127, .5); }
.tag.practice { color: var(--okay); border-color: rgba(217, 185, 106, .5); }
.tag.ok { color: var(--easy); border-color: rgba(134, 191, 155, .5); }

.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.reviews li { display: grid; gap: .55rem; padding: .8rem; border-radius: var(--radius-s); background: var(--bg-2); }
.reviews li.rated { grid-template-columns: 1fr auto; align-items: center; background: transparent; border: 1px dashed var(--line); }
.rv-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--step-1); }
.rate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.rate button { min-block-size: 46px; border-radius: 10px; border: 1px solid; background: transparent; cursor: pointer; font-weight: 500; }
.rate .r-easy { color: var(--easy); border-color: rgba(134, 191, 155, .55); }
.rate .r-okay { color: var(--okay); border-color: rgba(217, 185, 106, .55); }
.rate .r-hard { color: var(--hard); border-color: rgba(222, 138, 127, .55); }
.rate .r-easy:hover { background: rgba(134, 191, 155, .12); } .rate .r-okay:hover { background: rgba(217, 185, 106, .12); } .rate .r-hard:hover { background: rgba(222, 138, 127, .12); }
.chip { display: inline-flex; align-items: center; padding: .1rem .65rem; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); font-size: var(--step--1); }
.chip.r-easy { color: var(--easy); } .chip.r-okay { color: var(--okay); } .chip.r-hard { color: var(--hard); }
.passages { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .3rem; font-size: var(--step-1); }
.passages li::marker { color: var(--muted); font-size: var(--step--1); }

.finish-bar { display: grid; gap: .35rem; justify-items: center; padding-block: 1.25rem .5rem; }
.finish-bar small { color: var(--muted); }
.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-m); }

/* ---------- progress */
.page-title { font-size: var(--step-2); margin-block: .75rem 1rem; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block: .5rem; }
.panel { display: grid; gap: .55rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-m); background: var(--raise); border: 1px solid var(--line); margin-block-end: 1rem; }
.panel h2 { font-size: var(--step-0); color: var(--muted); font-weight: 500; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .8rem; }
.panel.stack { gap: .7rem; }
.panel.stack .btn { justify-content: flex-start; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .35rem; border-block-end: 1px solid rgba(46, 76, 82, .55); }
.kv:last-child { border-block-end: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 500; text-align: end; }
.settings .kv b { flex: 1; }
.grid2 { display: grid; gap: 0 1.5rem; }
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.history { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.history li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.history small { color: var(--muted); white-space: nowrap; }
.stats { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.stat { display: grid; gap: .1rem; padding: .9rem; border-radius: var(--radius-m); background: var(--raise); border: 1px solid var(--line); }
.stat .big { font-size: var(--step-2); font-weight: 400; color: var(--text); }
.stat span:last-child { color: var(--muted); font-size: var(--step--1); }
.stat.main .big { color: var(--gold); }

.strip { margin: 0 0 .4rem; display: grid; gap: .45rem; }
.strip-bar { position: relative; block-size: 14px; border-radius: 99px; background: repeating-linear-gradient(to left, var(--bg-2) 0 6px, #102226 6px 7px); overflow: hidden; border: 1px solid var(--line); }
.strip-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(to left, var(--gold), var(--gold-soft)); border-radius: inherit; }
[dir='ltr'] .strip-fill { background: linear-gradient(to right, var(--gold), var(--gold-soft)); }
.strip-cursor { position: absolute; inset-block: -2px; inline-size: 3px; background: var(--prev); border-radius: 2px; box-shadow: 0 0 6px var(--prev); }
.strip figcaption { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: var(--step--1); }
.strip figcaption b { color: var(--text); font-weight: 500; text-align: center; }

/* ---------- supervisor */
.students { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.student-open { inline-size: 100%; text-align: start; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-m); background: var(--raise); border: 1px solid var(--line); cursor: pointer; color: var(--text); }
.student-open:hover { border-color: var(--gold-soft); }
.student.archived .student-open { opacity: .6; }
.student-open .who { display: grid; } .student-open .who small { color: var(--muted); }
.student-open .pct { display: grid; justify-items: end; } .student-open .pct b { font-size: var(--step-2); font-weight: 400; color: var(--gold); line-height: 1.1; } .student-open .pct small { color: var(--muted); }
.student-open .facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--muted); font-size: var(--step--1); }
.student-open .flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.2rem; }
.detail-head { margin-block: .5rem 1rem; }
.detail-head h1 { font-size: var(--step-3); font-weight: 400; }
.tabs { display: flex; gap: .3rem; overflow-x: auto; padding-block-end: .4rem; margin-block-end: .8rem; scrollbar-width: none; }
.tabs button { flex: none; background: none; border: 1px solid transparent; color: var(--muted); padding: .45rem .9rem; border-radius: 99px; cursor: pointer; }
.tabs button[aria-selected='true'] { color: var(--text); border-color: var(--line); background: var(--raise); }
.mini { display: grid; gap: .3rem; padding: .7rem 0; border-block-end: 1px solid var(--line); }
.mini:last-child { border: 0; }
.mini ul, .mini ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .25rem; }
.alerts { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .4rem; }
.alerts small { color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log li { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem .8rem; padding-block: .5rem; border-block-end: 1px solid rgba(46, 76, 82, .55); font-size: var(--step--1); }
.log time { color: var(--muted); white-space: nowrap; }
.danger-zone { border-color: rgba(222, 138, 127, .35); }

/* ---------- dialog sheet */
dialog.sheet { inline-size: min(480px, calc(100% - 24px)); max-block-size: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--raise); color: var(--text); }
dialog.sheet.wide { inline-size: min(620px, calc(100% - 24px)); }
dialog.sheet::backdrop { background: rgba(5, 12, 13, .72); backdrop-filter: blur(2px); }
.sheet-form { display: grid; gap: .9rem; padding: 1.3rem; }
.sheet-body { color: var(--muted); display: grid; gap: .4rem; }
.sheet-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-start: .3rem; }
.sheet-actions .btn { flex: 1 1 auto; }

/* ================================================================ 2.2 */
/* ---------- supervisor's message: a handwritten-feeling note, gold rule on the reading side */
.message { position: relative; display: grid; gap: .5rem; justify-items: start; padding: 1.1rem 1.2rem 1.1rem; margin-block: .5rem 1rem; border-radius: var(--radius-m);
  background: linear-gradient(170deg, rgba(200, 164, 90, .14), rgba(200, 164, 90, .04)); border: 1px solid rgba(200, 164, 90, .45); animation: rise .5s ease-out both; }
.msg-from { color: var(--gold); font-size: var(--step--1); }
.msg-text { font-size: var(--step-1); line-height: 1.7; white-space: pre-line; }
.msg-panel .seen { color: var(--easy); }
.msg-quiet p { white-space: pre-line; }
.field textarea { min-block-size: 110px; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); resize: vertical; font: inherit; }
.field textarea:focus { border-color: var(--gold); outline: none; }

/* ---------- small tools on task cards */
.tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip-btn, .pagelink { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 34px; padding: .2rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: var(--step--1); text-decoration: none; cursor: pointer; }
.chip-btn:hover, .pagelink:hover { color: var(--text); border-color: var(--gold-soft); }
.passages .pagelink { min-block-size: 26px; padding: 0 .6rem; margin-inline-start: .4rem; }

/* ---------- done feedback */
.state .tick { inline-size: 14px; block-size: 14px; margin-inline-end: .25rem; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw .45s .05s ease-out forwards; }
.task { transition: background .3s, border-color .3s; }
.task.is-done { border-color: rgba(46, 76, 82, .6); }
.chip.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.rate button:active { transform: scale(.96); }
.undo-link { color: var(--muted); font-size: var(--step--1); }

/* ---------- undo bar */
.undo-bar { position: fixed; inset-inline: 16px; inset-block-end: calc(84px + env(safe-area-inset-bottom)); margin-inline: auto; max-inline-size: 420px; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .6rem .55rem 1rem; border-radius: 14px;
  background: var(--raise-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.undo-bar.show { opacity: 1; transform: none; pointer-events: auto; }
body:has(.cel) .undo-bar { opacity: 0; }
.undo-bar .link { color: var(--gold); font-weight: 500; }

/* ---------- celebration: the one orchestrated moment */
.cel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(7, 15, 17, .78); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.cel.on { opacity: 1; }
.cel-card { display: grid; justify-items: center; gap: .8rem; text-align: center; max-inline-size: 420px; transform: translateY(10px) scale(.98); transition: transform .35s ease-out; }
.cel.on .cel-card { transform: none; }
.cel-art { position: relative; inline-size: 168px; block-size: 168px; }
.cel-juz .cel-art { inline-size: 220px; block-size: 220px; }
.cel-star { inline-size: 100%; block-size: 100%; overflow: visible; }
.cel-star rect { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-dasharray: 300; stroke-dashoffset: 300; }
.cel.on .cel-star .sq1 { animation: draw 0.9s .1s ease-out forwards, glowfill .8s 1s ease-out forwards; }
.cel.on .cel-star .sq2 { animation: draw 0.9s .35s ease-out forwards, glowfill .8s 1.1s ease-out forwards; }
.cel-star .core { fill: var(--gold); transform: scale(0); transform-origin: center; }
.cel.on .cel-star .core { animation: bloom .6s 1.05s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.cel-juz .cel-star rect { stroke-width: 3; }
.sparks { position: absolute; inset: 50% auto auto 50%; }
.sparks i { position: absolute; inline-size: 6px; block-size: 6px; margin: -3px; border-radius: 50%; background: var(--gold); opacity: 0; box-shadow: 0 0 8px var(--gold); }
.cel.on .sparks i { animation: spark var(--t, 1s) 1.05s ease-out forwards; }
.cel-title { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 400; line-height: 1.5; opacity: 0; text-wrap: balance; }
.cel-title .q, .cel-title .q-en { white-space: nowrap; }
.cel-title .q { font-size: 1.25em; color: var(--gold); }
.cel-sub { color: var(--muted); opacity: 0; }
.cel.on .cel-title { animation: rise .5s 1.15s ease-out forwards; }
.cel.on .cel-sub, .cel.on .cel-card .btn { animation: rise .5s 1.35s ease-out both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glowfill { to { fill: rgba(200, 164, 90, .13); filter: drop-shadow(0 0 10px rgba(200, 164, 90, .5)); } }
@keyframes bloom { to { transform: scale(1); } }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- repetition counter */
.counter-sheet .sheet-form { justify-items: center; text-align: center; }
.tap { position: relative; inline-size: min(240px, 70vw); aspect-ratio: 1; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 40%, var(--raise-2), var(--bg-2)); cursor: pointer; color: var(--text); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tap svg { position: absolute; inset: 0; transform: rotate(-90deg); }
[dir='rtl'] .tap svg { transform: rotate(-90deg) scaleY(-1); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .3s ease-out; }
.tap .count { position: relative; font: 300 4.2rem/1 var(--ui); }
.tap.pulse { animation: tap .25s ease-out; }
.tap.reached .ring-fg { stroke: var(--easy); }
.reached-msg { color: var(--easy); }
.counter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.counter-row b { min-inline-size: 2.2rem; font-size: var(--step-1); }
@keyframes tap { 50% { transform: scale(.96); } }

/* ---------- strength map: the Mushaf as 604 tiles */
.smap { display: grid; grid-template-columns: repeat(28, 1fr); gap: 2px; cursor: pointer; }
.sq { display: block; aspect-ratio: 1; border-radius: 2px; background: #1a2c30; }
.legend .sq { inline-size: 11px; block-size: 11px; display: inline-block; margin-inline-end: .35rem; vertical-align: -1px; }
.sq.l1 { background: var(--hard); } .sq.l2 { background: var(--okay); } .sq.l3 { background: var(--prev); } .sq.l4 { background: var(--easy); } .sq.l5 { background: var(--gold-soft); }
.sq.pick { outline: 2px solid var(--text); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--step--1); color: var(--muted); }
.legend b { color: var(--text); font-weight: 500; }
@media (min-width: 760px) { .smap { grid-template-columns: repeat(38, 1fr); gap: 3px; } }

/* ---------- study calendar */
.cal { display: grid; gap: .6rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-nav { font-size: 1.4rem; line-height: 1; padding: .2rem .7rem; }
.cal-nav:disabled { opacity: .3; cursor: default; }
[dir='rtl'] .cal-nav { transform: scaleX(-1); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }   /* minmax(0,…): a cell's text can never widen its column */
.cw { color: var(--muted); font-size: var(--step--1); padding-block: .2rem; }
.cd { display: grid; place-content: center; justify-items: center; aspect-ratio: 1; min-inline-size: 0; overflow: hidden; border-radius: 9px; font-size: var(--step--1); line-height: 1.15; color: var(--muted); background: var(--bg-2); }
.cd.pad { background: transparent; }
.cd.future { opacity: .35; }
.cd.lit { background: var(--gold); color: #1B1608; font-weight: 500; box-shadow: 0 0 10px rgba(200, 164, 90, .25); }
.cd.today { outline: 2px solid var(--text); outline-offset: -2px; }
.cd.m1 { color: var(--text); }
.cd.m1 small { display: block; max-inline-size: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: .56rem; line-height: 1.05; color: inherit; opacity: .85; }
.cd.lit.m1 { color: #1B1608; }
.cal-head b { font-weight: 500; font-size: var(--step--1); text-align: center; }

/* ---------- weekly harvest */
.week-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; text-align: center; }
.week-nums div { display: grid; padding: .6rem .2rem; border-radius: var(--radius-s); background: var(--bg-2); }
.week-nums b { font-size: var(--step-2); font-weight: 400; color: var(--gold); }
.week-nums span { font-size: var(--step--1); color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.rbar { display: flex; block-size: 8px; border-radius: 99px; overflow: hidden; gap: 2px; }
.rbar .r-easy { background: var(--easy); } .rbar .r-okay { background: var(--okay); } .rbar .r-hard { background: var(--hard); }
.rlegend { display: flex; gap: 1rem; } .rlegend .r-easy { color: var(--easy); } .rlegend .r-okay { color: var(--okay); } .rlegend .r-hard { color: var(--hard); }
.week-list { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .2rem; }
.week-list.weak li::marker { color: var(--hard); }
.week.compact { margin-block: 0 1rem; }

/* ---------- milestones */
.ms-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ms-totals div { display: grid; padding: .7rem; border-radius: var(--radius-s); background: var(--bg-2); }
.ms-totals b { font-size: var(--step-2); font-weight: 400; color: var(--gold); }
.ms-totals span { color: var(--muted); font-size: var(--step--1); }
.ms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ms { display: flex; align-items: center; gap: .6rem; }
.ms small { margin-inline-start: auto; color: var(--muted); }
.ms-star { inline-size: 14px; block-size: 14px; background: var(--gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); flex: none; }
.ms-juz .ms-star { inline-size: 18px; block-size: 18px; box-shadow: 0 0 8px var(--gold); }

/* ---------- gentle entrance for the hero only (one moment, not everywhere) */
.hero .rosette .arc { animation: arcin .7s ease-out both; }
.hero .rosette .arc.past, .hero .rosette .arc.now { stroke-dasharray: 120; stroke-dashoffset: 120; animation: arcdraw .8s .1s ease-out forwards; }
@keyframes arcdraw { to { stroke-dashoffset: 0; } }
@keyframes arcin { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================ 2.3: intention, reminders, closing du'a */
.rem { margin: 0; display: grid; gap: .35rem; }
.rem blockquote { margin: 0; }
.rem-label { color: var(--gold); font-size: var(--step--1); }
.rem-ayah { font-family: var(--quran); font-size: 1.45rem; line-height: 2; color: var(--text); text-align: center; text-wrap: balance; }
.rem-ayah .orn { font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif; color: var(--gold); padding-inline: .2em; font-size: .95em; }
.rem-hadith { font-size: var(--step-1); line-height: 1.9; text-align: center; text-wrap: balance; }
.rem-hadith .said { color: var(--muted); font-size: var(--step--1); display: block; }
.rem-cite { color: var(--muted); font-size: var(--step--1); text-align: center; }
.rem-mean { color: var(--muted); font-size: var(--step--1); text-align: center; font-style: italic; max-inline-size: 52ch; justify-self: center; }
.rem-mean span { font-style: normal; color: var(--gold-soft); }
.rem-small { padding: .7rem .8rem; border-radius: var(--radius-s); background: var(--bg-2); border-inline-start: 2px solid var(--gold-soft); }
.rem-small .rem-ayah { font-size: 1.2rem; line-height: 1.9; }
.rem-small .rem-hadith { font-size: var(--step-0); line-height: 1.8; }
.banner .rem-small { margin-block-start: .4rem; }
.rem-card { animation: rise .5s ease-out both; }
.rem-card.own { border-color: rgba(200, 164, 90, .45); }
.rem-own { font-size: var(--step-1); line-height: 1.7; white-space: pre-line; }
.own-rem { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; }

/* the intention card: one calm screen before the tasks */
.niyyah { position: relative; display: grid; gap: .9rem; justify-items: center; text-align: center; padding: 1.6rem 1.3rem 1.4rem; margin-block: .25rem 1rem; border-radius: var(--radius-l);
  background: radial-gradient(420px 220px at 50% 0, rgba(200, 164, 90, .16), transparent 70%), linear-gradient(170deg, var(--raise-2), var(--bg-2)); border: 1px solid rgba(200, 164, 90, .4); animation: rise .5s ease-out both; }
.niyyah h2 { font-size: var(--step-2); font-weight: 400; }
.niyyah .rem { inline-size: 100%; }
.niyyah-line { color: var(--muted); max-inline-size: 40ch; }
.niyyah .btn.big { max-inline-size: 360px; margin-block-start: .3rem; }
.niyyah-art { inline-size: 64px; block-size: 64px; }
.niyyah-art svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.niyyah-art rect { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 1.1s .15s ease-out forwards; }
.niyyah-art rect + rect { animation-delay: .4s; }
.niyyah-art circle { fill: var(--gold); transform: scale(0); transform-origin: center; animation: bloom .6s 1.1s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.welcome-back { inline-size: 100%; display: grid; gap: .4rem; padding: .9rem; border-radius: var(--radius-m); border: 1px dashed var(--line); }
.wb-title { color: var(--easy); font-weight: 500; }
.closing { border-color: rgba(200, 164, 90, .35); background: linear-gradient(170deg, rgba(200, 164, 90, .08), var(--raise) 70%); }
.closing .rem-label { text-align: center; }
.cel-extra { max-inline-size: 380px; opacity: 0; }
.cel.on .cel-extra { animation: rise .5s 1.5s ease-out both; }
.parts small { color: var(--muted); }

/* ---------- larger screens */
@media (min-width: 760px) {
  .app { padding-inline: 24px; }
  .hero { grid-template-columns: 190px minmax(0, 1fr); padding: 1.6rem 1.8rem; gap: 2rem; }
  .grid2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) { .app:has(main.supervisor) { max-width: 980px; } }
/* Small phones or large text: the week's four numbers go two by two instead of squeezing */
@media (max-width: 420px) { .week-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat, .panel, .task, .kv b { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .hero { grid-template-columns: 112px minmax(0, 1fr); padding: 1rem; gap: .8rem; }
  .hero-text h1 { font-size: var(--step-2); }
  .stats { grid-template-columns: 1fr 1fr; } .stat.main { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }