/* Marcellus and Atkinson Hyperlegible (SIL Open Font License), latin and latin-ext, served from fonts/ so the first paint needs no other site. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/atkinson-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/atkinson-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/atkinson-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/atkinson-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/atkinson-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/atkinson-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marcellus-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marcellus-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rihla design system. One narrow column like a pocket notebook; the lesson is a stepper with a sticky header.
   Tokens first (colour, type, space, motion), light and dark; every text colour meets WCAG AA on its surface. */
:root {
  --bg: #f3f1ea;          /* limestone, a little warm */
  --surface: #fffdf8;
  --surface-2: #f7f4ec;
  --ink: #17231f;
  --muted: #55645d;       /* 5.5:1 on --bg */
  --line: #dcd7c8;
  --accent: #1d6b52;      /* malachite; white on it 6.3:1 */
  --accent-ink: #ffffff;
  --accent-soft: #dcebe3;
  --gold: #a87a1f;        /* lamp light: decoration, rewards, focus */
  --gold-ink: #7f5c10;    /* gold for text, 5.6:1 on --surface */
  --gold-soft: #f4e8cc;
  --good: #1d7a45;
  --bad: #b23b2e;
  --bad-soft: #f6e0dc;
  --night: #12302a;
  --night-ink: #eef3ef;
  --night-muted: #b9cbc3;
  --focus: #b8860b;
  --sh-1: 0 1px 2px rgba(23, 45, 36, .06), 0 6px 20px rgba(23, 45, 36, .06);
  --sh-2: 0 2px 6px rgba(23, 45, 36, .08), 0 16px 40px rgba(23, 45, 36, .14);
  --f-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-ar: "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif;
  --f-quran: "Amiri Quran", "Amiri", "Traditional Arabic", serif;
  --r: 16px;
  --r-s: 10px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 700ms;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e2b350' stroke-width='1' opacity='.16'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1714; --surface: #15221e; --surface-2: #1b2a25; --ink: #e8ece8; --muted: #a3b5ac; --line: #2c3d37;
    --accent: #5cc79c; --accent-ink: #06120d; --accent-soft: #1c3a2f; --gold: #e2b350; --gold-ink: #e9c06a; --gold-soft: #3a2f17;
    --good: #6bd394; --bad: #f08a7c; --bad-soft: #3d201c; --night: #0a1411; --focus: #f0c45e;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1714; --surface: #15221e; --surface-2: #1b2a25; --ink: #e8ece8; --muted: #a3b5ac; --line: #2c3d37;
  --accent: #5cc79c; --accent-ink: #06120d; --accent-soft: #1c3a2f; --gold: #e2b350; --gold-ink: #e9c06a; --gold-soft: #3a2f17;
  --good: #6bd394; --bad: #f08a7c; --bad-soft: #3d201c; --night: #0a1411; --focus: #f0c45e;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink); font: 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#app { max-width: 660px; margin: 0 auto; padding-block: 16px 96px; display: grid; gap: 22px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.6vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.65rem); }
h3 { font-size: 1.18rem; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: var(--gold-soft); color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ar { font-family: var(--f-ar); direction: rtl; font-size: 1.5rem; line-height: 2; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 12px; min-width: 0; box-shadow: var(--sh-1); }
.tabular { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Controls ---------- */
button, .btn {
  font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 10px 18px; cursor: pointer; min-height: 44px; min-width: 44px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
button:active:not(:disabled) { transform: scale(.97); }
button.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent); }
button.primary:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
button.ghost { background: transparent; border-color: transparent; color: var(--accent); padding-inline: 10px; font-weight: 700; }
button.ghost:hover:not(:disabled) { background: var(--accent-soft); border-color: transparent; }
button.big { width: 100%; font-size: 1.05rem; min-height: 54px; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
button:focus-visible, .btn:focus-visible { border-radius: 999px; }
button.rec { border-color: var(--bad); color: var(--bad); }
button.rec.on { background: var(--bad); color: var(--surface); }
input[type=text], input[type=search], textarea, select {
  font: inherit; width: 100%; padding: 12px 14px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); min-height: 44px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
select { width: auto; }
input[type=text]:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height: 130px; resize: vertical; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; font-weight: 700; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "›"; display: inline-block; transition: transform var(--t) var(--ease); font-size: 1.3rem; line-height: 1; color: var(--accent); }
[dir="rtl"] details > summary::before { transform: scaleX(-1); }
details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Motion: every new screen and step rises in softly ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#app > *, #q-stage > *, #stage > *, .rv > * { animation: rise var(--t-slow) var(--ease) both; }
#app > :nth-child(2) { animation-delay: 50ms; }
#app > :nth-child(3) { animation-delay: 100ms; }
#app > :nth-child(4) { animation-delay: 150ms; }
#app > :nth-child(n+5) { animation-delay: 200ms; }
#app > .lesson-head { animation: fade var(--t) ease both; }

/* ---------- Home ---------- */
.hero {
  background: radial-gradient(120% 90% at 100% 110%, rgba(226,179,80,.28), transparent 55%), var(--star), linear-gradient(160deg, #1a4237, var(--night) 70%);
  color: var(--night-ink); border-radius: calc(var(--r) + 4px); padding: 22px; display: grid; gap: 14px; position: relative; overflow: hidden; box-shadow: var(--sh-2);
}
.hero h1 { color: #fff; }
.hero .ar { color: #e9c06a; font-size: 1.3rem; line-height: 1.4; }
.hero .label { color: var(--night-muted); }
.hero p { color: var(--night-ink); }
.hero .seg button { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); min-height: 44px; padding: 6px 12px; font-size: .9rem; }
.hero .seg button.on { background: #e9c06a; color: #1b1405; border-color: #e9c06a; }
.hero :focus-visible { outline-color: #f0c45e; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; }
.stat b { display: block; font-size: 1.4rem; font-family: var(--f-display); color: #fff; }
.stat span { font-size: .74rem; color: var(--night-muted); letter-spacing: .03em; }
.today { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-soft) 45%, var(--surface))); }
.sec-head { display: grid; gap: 4px; }
.meter { height: 10px; background: var(--accent-soft); border-radius: 99px; position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 99px; transition: width 1.2s var(--ease); }
.meter i.after { background: var(--gold); opacity: .55; }
.map svg { width: 100%; height: auto; display: block; }
#map { direction: ltr; height: 340px; border-radius: 12px; border: 1px solid var(--line); z-index: 0; }
.leaflet-tooltip.stop-label { font: 700 .8rem var(--f-body); }
.leaflet-popup-content { font: .9rem/1.4 var(--f-body); }
.leaflet-container a { min-height: 0; }
.map .route { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 2; }
.map .stop { fill: var(--surface); stroke: var(--muted); stroke-width: .8; }
.map .stop.done { fill: var(--gold); stroke: var(--gold); }
.map .stop.next { fill: var(--accent); stroke: var(--accent); }
.map .pulse { fill: none; stroke: var(--accent); stroke-width: .6; animation: pulse 2s infinite; transform-origin: center; transform-box: fill-box; }
.map text { font: 3.4px var(--f-body); fill: var(--muted); }
.map text.on { fill: var(--ink); font-weight: 700; }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.track { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; align-content: start; }
.track .ar { font-size: 1.1rem; line-height: 1.3; color: var(--gold-ink); }
.track.open { border-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--ink); }
.chip.gold { background: var(--gold-soft); }
.chip.warn { background: var(--bad-soft); }
.settings-box { padding: 14px 20px; }
.settings-box[open] { padding-bottom: 20px; }
.settings-box > div { display: grid; gap: 14px; margin-top: 10px; }

/* Lesson rails: lessons scroll sideways, a few visible at once, snapping */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 270px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-inline: -2px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.rail > .card { scroll-snap-align: start; align-content: start; grid-template-rows: auto auto 1fr auto; }
.rail > .card.done { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.rail > .card .ar { font-family: var(--f-quran); }
.done-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #1b1405; font-size: .8rem; font-weight: 700; }

/* ---------- Voyage: the Sira <-> Quran journey ---------- */
.voyage { overflow: hidden; }
.voyage svg { width: 100%; height: auto; display: block; overflow: visible; }
.vy-spine { fill: none; stroke: color-mix(in srgb, var(--muted) 45%, var(--line)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.5 11; }
.vy-trail { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--to, 1); animation: vy-draw .9s var(--ease) both; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes vy-draw { from { stroke-dashoffset: 1; } }
.vy-thread { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 4; fill: none; }
.vy-thread.lit { stroke: var(--gold); stroke-dasharray: none; opacity: .9; }
.vy-n { cursor: pointer; outline: none; }
.vy-n .nd { stroke-width: 3; transition: transform var(--t) var(--ease); transform-box: fill-box; transform-origin: center; }
.vy-st .nd { fill: var(--surface); stroke: var(--accent); }
.vy-st.done .nd { fill: var(--accent); }
.vy-st.later { opacity: .62; }
.vy-q .nd { fill: var(--surface); stroke: var(--gold); }
.vy-q.lit .nd { fill: var(--gold); animation: vy-glow 3.2s ease-in-out infinite; }
@keyframes vy-glow { 50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 80%, transparent)); } }
.vy-n:hover .nd, .vy-n:focus-visible .nd { transform: scale(1.12); }
.vy-n:focus-visible .nd { stroke: var(--focus); stroke-width: 5; }
.vy-deco { pointer-events: none; }
.vy-deco .ic { font: 700 16px var(--f-body); fill: var(--accent-ink); }
.vy-deco .ic.up { fill: var(--accent); }
.vy-deco .ic.q { fill: #1b1405; font-size: 12px; }
.vy-n .lb { font: 600 13px var(--f-body); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.vy-q .lb { font: 12px var(--f-body); fill: var(--muted); }
[lang="ar"] .vy-n .lb { font-family: var(--f-ar); font-size: 15px; }
.vy-ring { fill: none; stroke: var(--accent); stroke-width: 2; animation: ring 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.vy-here { font: 700 10px var(--f-body); fill: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.vy-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); }
.vy-legend i { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px; border: 2px solid var(--accent); border-radius: 50%; }
.vy-legend i.d { background: var(--accent); }
.vy-legend i.q { border-color: var(--gold); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.vy-legend i.ql { border-color: var(--gold); background: var(--gold); border-radius: 2px; transform: rotate(45deg) scale(.85); }

/* ---------- Lesson ---------- */
.lesson-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 8px; display: grid; gap: 8px; margin-inline: -4px; padding-inline: 4px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.steps span { height: 6px; border-radius: 9px; background: var(--line); transition: background-color var(--t-slow) var(--ease); position: relative; overflow: hidden; }
.steps span.done { background: var(--accent); }
.steps span.now { background: var(--gold); }
.player { border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.player.collapsed { height: 0; aspect-ratio: auto; }
.player iframe { width: 100%; height: 100%; display: block; border: 0; }
.transcript { max-height: 46vh; overflow-y: auto; display: grid; gap: 2px; padding-inline-end: 4px; }
.line { padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: background-color var(--t) var(--ease); }
.line.now { background: var(--accent-soft); }
.word { cursor: pointer; border-radius: 4px; }
.word.key { border-bottom: 2px solid var(--gold); font-weight: 700; }
.word.term { border-bottom: 2px dotted var(--accent); }
.word:hover { background: var(--gold-soft); }
.vocab-word { font-family: var(--f-display); font-size: 2rem; }
.example { border-inline-start: 3px solid var(--gold); padding-inline-start: 12px; font-style: italic; }
.blank { display: inline-block; min-width: 5ch; border-bottom: 2px solid var(--ink); }
.choices { display: grid; gap: 8px; }
.choices button { justify-content: flex-start; border-radius: 14px; text-align: start; padding: 12px 16px; min-height: 52px; background: var(--surface-2); position: relative; }
.choices button.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); animation: settle .5s var(--ease); opacity: 1; }
.choices button.right::after { content: "✓"; margin-inline-start: auto; color: var(--good); font-weight: 700; }
.choices button.wrong { border-color: var(--bad); background: var(--bad-soft); animation: nudge .35s ease; opacity: 1; }
.choices button.wrong::after { content: "✕"; margin-inline-start: auto; color: var(--bad); font-weight: 700; }
@keyframes settle { 40% { transform: scale(1.025); } }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.feedback { padding: 12px 14px; border-radius: var(--r-s); background: var(--accent-soft); animation: rise var(--t) var(--ease) both; }
.feedback.no { background: var(--bad-soft); }
#q-fb > *, #fb > * { animation: rise var(--t) var(--ease) both; }
.points { color: var(--gold-ink); font-weight: 700; }
.check-list label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; min-height: 44px; }
.check-list input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin-top: 2px; }
.score { font-family: var(--f-display); font-size: 1.6rem; }

@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet { position: fixed; inset: auto 0 0 0; z-index: 30; max-height: 80vh; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25);
  padding: 22px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation: sheet-up var(--t) var(--ease) both; }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -10px auto 14px; }
.sheet > div { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; }
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } }
.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); background: var(--night); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; box-shadow: var(--sh-2); animation: toast-in var(--t) var(--ease) both; }
.toast .points { color: #e9c06a; }

@media (max-width: 420px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; }
}
.pic { margin: 0; display: grid; gap: 4px; justify-items: start; }
.pic img { max-width: 100%; max-height: 200px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); object-fit: contain; }
.pic figcaption { font-size: .75rem; }

/* Languages: Arabic text gets its own face, a touch larger, and room for the vowel marks. */
[lang="ar"] { font-family: var(--f-ar); line-height: 1.95; }
[lang="ar"] body, body:lang(ar) { font-size: 19px; }
[lang="ar"] .label { letter-spacing: 0; text-transform: none; font-size: .85rem; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { font-family: var(--f-ar); font-weight: 700; line-height: 1.5; }
[lang="ar"] .vocab-word { font-family: var(--f-ar); font-size: 2.2rem; }
[lang="ar"] .example, [dir="rtl"] .example { font-style: normal; }
[lang="ar"] input, [lang="ar"] textarea { font-family: var(--f-ar); font-size: 1.15rem; }
[lang="ar"] .stat b { font-family: var(--f-ar); }
.settings { gap: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border-radius: 99px; padding: 8px 14px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chunk { text-decoration: underline wavy color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.selsave { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-radius: 99px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
[hidden] { display: none !important; }

/* Quran track: the mushaf face for the verses themselves */
.quran-ar { font-family: var(--f-quran); font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); line-height: 2.4; text-align: center; margin: 8px 0; color: var(--ink); word-spacing: .06em; }
.quran-w { font-family: var(--f-quran); font-size: 1.35rem; }
.quran-opt { font-family: var(--f-quran); font-size: 1.4rem; }
.quran-hole { color: var(--gold-ink); }

.link-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.link-row p { margin: 4px 0 0; }
.review-card { border-color: var(--gold); background: linear-gradient(135deg, var(--surface), var(--gold-soft)); }

/* ---------- Read aloud ---------- */
.say-btn { min-height: 40px; padding: 6px 14px; font-size: .9rem; background: var(--surface-2); justify-self: start; }
.say-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.reading { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--gold) 26%, transparent) 60%); border-radius: 4px; transition: background var(--t) var(--ease); }

/* ---------- Companion ---------- */
#cp-fab { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; border: 0; background: linear-gradient(160deg, #1a4237, var(--night)); color: #f0c45e; font-size: 24px; box-shadow: var(--sh-2); cursor: pointer; }
#cp-fab[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
#cp-panel { position: fixed; inset-inline-end: 12px; bottom: 80px; z-index: 50; width: min(400px, calc(100vw - 24px)); height: min(560px, 72vh); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-2); overflow: hidden; animation: sheet-up var(--t) var(--ease) both; }
#cp-panel[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cp-head b { flex: 1; font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; }
.cp-head button { min-width: 44px; padding: 6px 10px; border-color: transparent; background: transparent; font-size: 1.05rem; }
.cp-head button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
#cp-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cp-m { max-width: 88%; padding: 9px 13px; border-radius: 16px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; animation: rise var(--t) var(--ease) both; }
.cp-m.me { align-self: flex-end; background: var(--accent-soft); border-end-end-radius: 6px; }
.cp-m.ai { align-self: flex-start; border: 1px solid var(--line); background: var(--surface); border-end-start-radius: 6px; }
.cp-m .say-btn { margin-top: 6px; min-height: 36px; padding: 4px 12px; font-size: .82rem; }
.cp-src { font-size: .78rem; color: var(--muted); margin-top: 4px; }
#cp-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); align-items: center; }
#cp-form input { flex: 1; min-width: 0; }
#cp-mic { padding: 0; width: 44px; flex: none; font-size: 1.1rem; }
#cp-mic.on, .cp-head button.on { background: var(--bad-soft); border-color: var(--bad); animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 18%, transparent); } }
#cp-ex { padding: 4px 12px; font-size: .85rem; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; cursor: pointer; min-height: 40px; }
#cp-ex input { width: 20px; height: 20px; accent-color: var(--accent); }
.cp-wait { display: inline-flex; gap: 4px; }
.cp-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.cp-wait i:nth-child(2) { animation-delay: .2s; } .cp-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Play: levels, badges, daily challenge, a quiet celebration ---------- */
.play-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.play-b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.play-b:not(.on) .play-bi { opacity: .55; }
.play-b:not(.on) .small { color: var(--muted); }
.play-b.on { opacity: 1; background: var(--gold-soft); border-color: var(--gold); }
.play-bi { font-size: 1.6rem; line-height: 1.2; }
.play-cel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 55%); animation: fade .6s ease both; }
.play-pop { position: relative; background: var(--surface); border: 1px solid var(--gold); border-radius: 22px; padding: 26px 34px; text-align: center; display: grid; gap: 6px; box-shadow: var(--sh-2); animation: play-pop .6s var(--ease) both; }
.play-pop b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; }
.play-ic { font-size: 2.6rem; line-height: 1.1; }
.play-star { position: absolute; inset: 50% auto auto 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; color: var(--gold); opacity: .5; animation: play-star 2.4s var(--ease) both; }
.play-bits { display: none; }
@keyframes play-pop { from { transform: scale(.92) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes play-star { from { transform: rotate(-22.5deg) scale(.6); opacity: 0; } 40% { opacity: .55; } to { transform: rotate(0) scale(1); opacity: 0; } }

/* one-click help inside a lesson */
#cp-help { display: none; position: fixed; inset-inline-end: 80px; bottom: 22px; z-index: 50; padding: 8px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .9rem; box-shadow: var(--sh-1); cursor: pointer; }
#app[data-lesson] ~ #cp-help { display: inline-flex; }

/* fiabilité : pastilles de références vérifiées (relay/refs.js) */
.rf-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rf { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; text-decoration: none; border: 1px solid var(--line); }
.rf-ok { color: var(--good); border-color: var(--good); }
.rf-ok:hover { background: var(--accent-soft, transparent); }
.rf-warn { color: var(--bad); border-color: var(--bad); background: var(--bad-soft, transparent); cursor: help; }
.rf-bad { text-decoration: underline dotted var(--bad); cursor: help; }
.rf-no { text-decoration: line-through var(--bad); }
.rf-verse { margin-top: 8px; padding: 8px 10px; border-inline-start: 3px solid var(--accent); background: var(--bg); border-radius: 8px; }
.rf-ar { font-family: var(--f-quran); font-size: 1.25rem; line-height: 2; text-align: right; }
.rf-ar small { font-size: .75rem; color: var(--muted); }
.rf-tr { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.rf-info { color: var(--ink); background: var(--accent-soft); border-color: transparent; }

/* téléphone : PWA (bandeau, bouton Installer) et corrections 375 px */
.pwa-upd { position: fixed; z-index: 120; top: max(8px, env(safe-area-inset-top)); inset-inline: 12px; margin-inline: auto; max-width: 420px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-size: .92rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; }
.pwa-inst { position: fixed; z-index: 49; inset-inline-start: 12px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; box-shadow: 0 3px 10px rgba(0,0,0,.2); cursor: pointer; }
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  #app { padding-bottom: 112px; }
  button, .btn, .seg button { min-height: 44px; }
  img, svg, video, iframe, textarea, input { max-width: 100%; }
  #cp-fab { inset-block-end: max(16px, env(safe-area-inset-bottom)); }
  #cp-help { inset-inline-end: 80px; bottom: max(22px, env(safe-area-inset-bottom)); }
  #cp-panel { inset-inline: 8px; width: auto; bottom: 84px; height: min(560px, calc(100dvh - 110px)); }
  .pwa-inst { inset-block-end: max(72px, env(safe-area-inset-bottom)); }
}

/* ===== révision (review.js) : séance, barre de notes, prévision de charge, récitation ===== */
.rv .rv-bar button{flex:1;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:2px}
.rv .rv-iv{font-size:.72rem;opacity:.75;font-weight:400}
.rv input[type=text]{width:100%;margin:8px 0}
.rv .rv-line{min-height:2.2em;font-size:1.5rem;line-height:2}
.rv .rv-chips,.rv .choices{display:flex;flex-wrap:wrap;gap:8px}
.rv .rv-chips button{font-size:1.25rem}
.rv .rv-placed{padding-inline-start:1.4rem;margin:8px 0}
.rv button.on{background:var(--bad-soft);border-color:var(--bad);animation:rv-pulse 1.1s infinite}
.rv-ok{color:var(--good);font-weight:600}
.rv-close{color:var(--gold-ink);font-weight:600}
.rv-bad{color:var(--bad);font-weight:600;text-decoration:underline wavy}
.rv-miss{color:var(--muted);text-decoration:line-through}
.rv-words{font-size:1.5rem;line-height:2.2}
.rv-shake{animation:rv-shake .35s}
@keyframes rv-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes rv-pulse{50%{opacity:.6}}
.rv-bars{list-style:none;display:flex;gap:8px;align-items:flex-end;padding:0;margin:8px 0;height:92px}
.rv-bars li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;font-size:.72rem;color:var(--muted)}
.rv-bars i{display:block;width:100%;max-width:34px;background:var(--accent-soft);border-radius:6px 6px 2px 2px;transition:height var(--t-slow) var(--ease)}
.rv-bars i.now{background:var(--accent)}
.rv-bars b{color:var(--ink);font-weight:600}
.rv-home select{margin-inline-start:6px}

/* Reduced motion: nothing moves, nothing pulses; state is still shown by colour and marks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .vy-trail { stroke-dashoffset: var(--to, 1); }
  .play-star { display: none; }
}
@media (forced-colors: active) {
  .vy-n .nd { stroke: CanvasText; } .vy-st.done .nd, .vy-q.lit .nd { fill: Highlight; }
}