/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, button, select { font: inherit; }

/* ── Brand tokens ───────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --paper:       #F6F2EA;
  --card:        #FDFAF4;
  --line:        #DDD7C8;

  /* ink */
  --ink:         #2A3D50;
  /* Was #697585, which measured 4.50:1 on --card and only 4.19:1 on
     --paper: a WCAG AA failure wherever muted text sat on the page
     background. #5F6B7A clears both (5.21:1 and 4.86:1). */
  --muted:       #5F6B7A;

  /* brand */
  --night:       #1F3A5F;
  --night-soft:  #E8EEF6;
  --gold:        #B8860B;
  --gold-soft:   #F7EFDC;
  --teal:        #1F7A61;
  --teal-soft:   #E6F4F0;

  /* Visualization accent. A fourth lesson-block treatment alongside teal
     (analogy) and amber (trap). Indigo is chosen because every warm accent is
     already committed and, critically, because it cannot be confused with the
     rationed gold at a glance. It is NOT a fourth gold use. */
  --viz:         #4E5A9B;
  --viz-soft:    #EDEEF8;

  /* Rank medals. A sanctioned FOURTH use of gold, registered in the addendum:
     a gold medal that is not gold reads as a mistake. Confined to leaderboard
     rank indicators; --medal-gold is distinct from the brand gold #B8860B,
     which keeps its own three uses and gains no new placement. */
  --medal-gold:   #D4AF37;
  --medal-silver: #A8A9AD;
  --medal-bronze: #B08D57;

  /* semantic */
  --correct:      #2E7D5B;
  --correct-soft: #E4F2EC;
  --wrong:        #B3453E;
  --wrong-soft:   #F9E9E8;
  --warn-soft:    #FBF3E4;

  /* type */
  --font-urdu: "Noto Nastaliq Urdu", serif;
  --font-ayah: "Noto Naskh Arabic", serif;
  --font-ui:   "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Spacing scale ─────────────────────────────────────────────────────────
     A 4px base. Components use these rather than literals so vertical rhythm
     is a decision made once, not re-guessed per component. */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */

  /* ── Type scale ────────────────────────────────────────────────────────────
     Latin/UI sizes only. Urdu and ayah keep their own sizing because Nastaliq
     needs far more line-height than a Latin face at the same optical size. */
  --t-xs:   0.68rem;
  --t-sm:   0.8rem;
  --t-base: 0.9rem;
  --t-md:   1rem;
  --t-lg:   1.2rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  /* Display sizes, for a landing hero and large numeric callouts. The scale
     stopped at 2rem, which is why every heading read as a label rather than
     a title. */
  --t-3xl:  clamp(2.5rem, 6vw, 5.25rem);   /* 1.5x the previous 3.5rem ceiling */
  --t-4xl:  clamp(2.75rem, 7vw, 4.5rem);

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;
  --r:      var(--r-lg);   /* legacy alias */

  /* ── Elevation ─────────────────────────────────────────────────────────────
     Three levels only. More than that and cards stop reading as a hierarchy. */
  --shadow-sm: 0 1px 2px rgba(28,43,58,.05);
  --shadow:    0 1px 2px rgba(28,43,58,.05), 0 8px 24px -12px rgba(28,43,58,.12);
  --shadow-lg: 0 2px 6px rgba(28,43,58,.07), 0 18px 40px -18px rgba(28,43,58,.22);

  /* ── Motion ────────────────────────────────────────────────────────────────
     Two categories, kept apart on purpose (design-addendum section 8):
       REWARD   celebrates an achievement. Rare, rationed, defined in the fx-*
                rules near the bottom of this file. Budget unchanged.
       FEEDBACK confirms an action. Everywhere, and bounded by these tokens so
                it stays quick enough to feel responsive rather than animated.
     Feedback never celebrates; reward never fires on navigation. */
  --dur-fast: 120ms;   /* hover, focus, press */
  --dur-base: 180ms;   /* colour and border changes */
  --dur-slow: 240ms;   /* size, position, reveal */

  --ease-out:    cubic-bezier(.22, 1, .36, 1);      /* default: settles quickly */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);        /* symmetric moves */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* press release only */

  /* ── Focus ─────────────────────────────────────────────────────────────────
     One ring for the whole product, so keyboard users get a consistent target
     rather than per-component invention. */
  --focus-ring:   0 0 0 3px var(--night-soft);
  --focus-border: var(--night);

  /* legacy aliases kept for --border refs in JS/HTML */
  --white:  #ffffff;
  --border: #E3DDD0;
}

/* ── Focus: visible for keyboards, quiet for pointers ───────────────────────── */
/* :focus-visible appeared once in this stylesheet before Stage 2. Every
   interactive element now gets the same ring, and the pointer-only :focus is
   suppressed so clicking never leaves a stuck outline. */
:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Skip link: first tab stop on every page, visible only when focused. */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  z-index: 900;
  transform: translateY(-200%);
  background: var(--night);
  color: #fff;
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── Interaction feedback ────────────────────────────────────────────────────
   The second motion category. These confirm that a control responded; they
   never celebrate. Kept inside --dur-fast/base so the interface feels
   responsive rather than animated, which is the whole distinction from the
   rationed reward moments.

   Applied by selector rather than per-component so a new control inherits the
   behaviour instead of having to remember it. */

button,
a.btn,
.cat-course,
.outline-item,
.metric-card,
.stat-card,
.ex-opt,
.quiz-opt-btn,
.ref-row,
.sidebar-lesson,
.sidebar-quiz-link,
.continue-hero,
.cert-banner,
.lb-table tbody tr {
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    color            var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out);
}

/* Press: a small, immediate acknowledgement. Never on a disabled control. */
button:not(:disabled):active,
a.btn:active,
.ex-opt:not(:disabled):active,
.quiz-opt-btn:not(:disabled):active {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

/* Cards lift rather than scale: scaling a card full of text softens the type. */
.cat-course:hover,
.continue-hero:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.cat-course:active,
.continue-hero:active { transform: translateY(0); }

/* A control that is working says so, and stops accepting input while it does. */
[aria-busy="true"] { cursor: progress; opacity: .7; pointer-events: none; }

/* Reduced motion: feedback degrades to an instant state change, exactly as the
   reward moments do. Colour still changes, so nothing loses its affordance. */
@media (prefers-reduced-motion: reduce) {
  button, a.btn, .cat-course, .outline-item, .metric-card, .stat-card,
  .ex-opt, .quiz-opt-btn, .ref-row, .sidebar-lesson, .sidebar-quiz-link,
  .continue-hero, .cert-banner, .lb-table tbody tr, .skip-link {
    transition: none;
  }
  button:not(:disabled):active,
  a.btn:active,
  .ex-opt:not(:disabled):active,
  .quiz-opt-btn:not(:disabled):active,
  .cat-course:hover,
  .continue-hero:hover,
  .stat-card:hover { transform: none; }
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  direction: ltr;
  min-height: 100vh;
}

/* ── Urdu lesson text (Nastaliq) ───────────────────────────────────────────── */
.urdu {
  font-family: var(--font-urdu);
  line-height: 2.4;
  direction: rtl;
  text-align: right;
}

/* ── Quranic ayah block ────────────────────────────────────────────────────── */
.ayah {
  font-family: var(--font-ayah);
  font-size: 1.45rem;
  line-height: 2.4;
  direction: rtl;
  text-align: center;
  color: var(--ink);
  background: var(--gold-soft);
  border-right: 2px solid var(--gold);
  padding: 0.8rem 1.2rem;
  margin: 0.9rem 0;
  border-radius: 0 6px 6px 0;
  display: block;
}

/* ── Inline Arabic run (harakated tokens inside Urdu) ──────────────────────── */
.ar {
  font-family: var(--font-ayah);
  font-size: 1.1em;
  direction: rtl;
  display: inline;
  unicode-bidi: embed;
}

/* ── Fatiha schematic: word states ─────────────────────────────────────────── */
.word text {
  fill: var(--muted);
  opacity: 0.55;
  transition: fill 400ms ease, opacity 400ms ease, filter 400ms ease;
}
.word rect  { fill: transparent; }
g.lit text  { fill: var(--gold); opacity: 1; filter: drop-shadow(0 0 5px rgba(184,134,11,.6)); }
g.lit rect  { fill: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
  .word text { transition: none; }
}

/* ── Page shell ────────────────────────────────────────────────────────────── */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  direction: ltr;
}

/* ── App header ─────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--night);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-shrink: 0;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Medallion seal — size is set via width/height attributes on the SVG */
.brand-logo-link svg { display: block; }

/* Login card seal */
.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-5);
}
.login-logo-wrap svg { display: block; }

/* .brand-lockup / .brand-ar / .brand-en retired — medallion SVG used instead */

.app-header .header-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.btn-theme {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-lg);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.btn-theme:hover { background: rgba(255,255,255,.18); color: #fff; }

.app-header .user-email {
  font-size: var(--t-base);
  color: rgba(255,255,255,.6);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Main content wrapper ──────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  padding: var(--s-5);
}

/* ── Loading ────────────────────────────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 1rem;
  color: var(--muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem var(--s-4);
  border: none;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary   { background: var(--night); color: var(--white); }
.btn-primary:hover { background: #162d4a; }

/* Google permits a light and a dark button; the surface follows the theme so
   a white slab does not punch out of a dark card. The mark itself is never
   themed. */
.btn-google {
  width: 100%;
  gap: var(--s-2);
  padding: 0.7rem var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}
.btn-google:hover { background: var(--night-soft); }
.g-glyph { flex-shrink: 0; display: block; }

.btn-signout {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.25);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-base);
}
.btn-signout:hover { background: rgba(255,255,255,.1); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Error / info banners ───────────────────────────────────────────────────── */
.error-banner {
  background: var(--wrong-soft);
  color: var(--wrong);
  border: 1px solid var(--wrong);
  border-radius: var(--r-sm);
  padding: 0.6rem var(--s-3);
  font-size: 0.9rem;
  margin-bottom: var(--s-3);
}

.global-error-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wrong-soft);
  color: var(--wrong);
  border: 1px solid var(--wrong);
  border-radius: var(--r-md);
  padding: 0.65rem var(--s-4);
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  z-index: 1000;
  max-width: 420px;
  text-align: center;
}

/* ── Divider ──────────────────────────────────────────────────────────── */
/* Flex rules rather than two absolutely positioned bars at a guessed 44%,
   which left the gap around "or" uneven at some card widths. */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--muted);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Login page ──────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--night-soft);
  padding: var(--s-5) var(--s-4);
  direction: ltr;
}

/* Was background: var(--white), which is not redefined for dark mode. That
   left a hard white card carrying --ink ayah text and a --card dark input in
   dark theme. Using --card lets every child inherit the right surface. */
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-6);
  max-width: 26rem;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

/* Brand block: medallion and tagline read as one unit, so they share a
   tighter rhythm than the rest of the card. */
.login-heading {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s-1);
  letter-spacing: -0.01em;
}

.login-intro {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--s-4);
}

#email-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: 0;
}

/* Inputs carried placeholders only, so the field lost its name the moment
   the learner typed. Real labels, always visible. */
.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field-label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

#email-form input {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: 100%;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
#email-form input::placeholder { color: var(--muted); }
#email-form input:focus-visible,
#email-form input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

#email-form .btn-primary { width: 100%; margin-top: var(--s-2); padding: 0.7rem var(--s-4); }

/* ── Progress bar ───────────────────────────────────────────────────────────── */
.progress-wrap {
  background: var(--line);
  border-radius: 4px;
  height: 7px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--night);
  transition: width 0.3s ease;
  border-radius: 4px;
}

/* ── Schematic wrapper ──────────────────────────────────────────────────────── */
.schematic-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  text-align: center;
  overflow-x: auto;
}

.schematic-wrap svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}





















/* ── Lesson section blocks (تشبیہ / عام غلطی / قرآن سے مثال) ───────────────── */
.lesson-section {
  border-radius: var(--r-md);
  margin: var(--s-3) 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.section-label {
  font-family: var(--font-urdu);
  font-size: 0.96rem;
  font-weight: 700;
  padding: 0.35rem var(--s-4);
  display: block;
}

.section-body {
  padding: 0.6rem var(--s-4) 0.8rem;
}

/* تشبیہ: teal/green accent bar on RTL-leading (right) side */
.block-analogy { background: var(--teal-soft); border-right: 3px solid var(--teal); }
.block-analogy .section-label { color: var(--teal); }

/* عام غلطی: amber accent bar */
.block-trap { background: var(--warn-soft); border-right: 3px solid #8A6116; }
.block-trap .section-label { color: #8A6116; }

/* قرآن سے مثال: plain hairline, no color accent, centered */
.block-example { background: transparent; text-align: center; }
.block-example .section-label { color: var(--muted); }
.block-example .section-body { padding: var(--s-3) var(--s-5) var(--s-4); }

.lesson-title {
  font-family: var(--font-urdu);
  font-size: 1rem;
  line-height: 2;
  font-weight: 700;
  flex: 1;
}

.lesson-content {
  font-family: var(--font-urdu);
  line-height: 2.4;
  direction: rtl;
  font-size: 1.2rem;
}

.lesson-content > * { margin-bottom: var(--s-2); }
.lesson-content > *:last-child { margin-bottom: 0; }

.lesson-content ul {
  list-style: disc;
  padding-right: var(--s-5);
  padding-left: 0;
}

.ltr-line {
  direction: ltr;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--paper);
  border-left: 3px solid var(--line);
  padding: 0.2rem 0.6rem;
  border-radius: 0 4px 4px 0;
  display: block;
}

.quiz-question {
  margin-bottom: 1.25rem;
}

.question-text {
  font-family: var(--font-urdu);
  line-height: 2.2;
  direction: rtl;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
}

.explanation {
  font-family: var(--font-urdu);
  line-height: 2.2;
  direction: rtl;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border-right: 3px solid var(--night);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  margin-top: var(--s-2);
  border-radius: 0 6px 6px 0;
}



.table-wrap { overflow-x: auto; }

.badge-done {
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: var(--r-md);
  padding: 0.1rem var(--s-2);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

/* ── Responsive (legacy) ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .main-content { padding: var(--s-4); }
  .app-header { padding: var(--s-2) var(--s-4); gap: var(--s-2); }
  .app-header .user-email { display: none; }
  /* Medallion keeps its 40px desktop size so the bar lands on the standard
     56px mobile app-bar height; only the controls beside it step down. */
  .user-avatar { width: 32px; height: 32px; font-size: var(--t-base); }
  .btn-theme   { font-size: var(--t-md);  padding: var(--s-1) var(--s-2); }
  .btn-signout { font-size: var(--t-sm);  padding: var(--s-1) var(--s-3); }
  .login-card { padding: 1.75rem 1.25rem; }
  
}

/* ── User avatar (header right) ──────────────────────────────────────────────── */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: var(--t-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */

/* Allow dashboard to break out of the 880px main-content constraint */
.main-content:has(.dashboard) {
  max-width: none;
  padding: 0;
}

/* The catalog manages its own width and padding too, otherwise the 880px cap
   above squeezes it into a narrow column and leaves the page feeling empty. */
.main-content:has(.cat-view) {
  max-width: none;
  padding: 0;
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-5);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.metric-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem var(--s-4);
  text-align: center;
  box-shadow: var(--shadow);
}

.metric-icon {
  display: flex;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.metric-icon-gold { color: var(--gold); }

.metric-number {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--night);
  line-height: 1;
}
.metric-number-gold { color: var(--gold); }

.metric-label {
  font-size: var(--t-base);
  color: var(--muted);
  margin-top: 0.3rem;
}

.dashboard-schematic-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  text-align: center;
  overflow-x: auto;
}

.dashboard-schematic-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--s-4);
}


/* ── Icons ───────────────────────────────────────────────────────────────────── */
.icon { display: block; flex-shrink: 0; }

/* ── Certificate banner ──────────────────────────────────────────────────────── */
.cert-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  margin-bottom: var(--s-4);
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
}
.cert-banner-icon { color: var(--gold); display: flex; }
.cert-banner-text { flex: 1; font-size: var(--t-md); }
.cert-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--night);
  white-space: nowrap;
}

/* ── Continue hero ───────────────────────────────────────────────────────────── */
/* The single solid night-blue element on the dashboard, per addendum section 4:
   the eye should land here first. */
.continue-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem var(--s-5);
  margin-bottom: var(--s-4);
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--night) 0%, #16304f 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.continue-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(28,43,58,.12), 0 16px 32px -18px rgba(28,43,58,.3);
}

.continue-hero-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.continue-hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,.62);
}
.continue-hero-chapter {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: rgba(255,255,255,.8);
}
.continue-hero-title {
  font-family: var(--font-urdu);
  font-size: 1.55rem;
  line-height: 2;
  text-align: right;
}

.continue-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-size: 0.88rem;
  font-weight: 600;
}
.continue-hero:hover .continue-hero-cta { background: rgba(255,255,255,.22); }

/* ── Stat cards: streak + points ─────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.stat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem 1.25rem;
}

.stat-card-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.stat-icon { display: flex; color: var(--muted); }

/* Streak orange (#DD6B20), deliberately NOT the rationed gold (#B8860B, addendum
   section 7). Chosen well clear of gold in hue so the two never read as the
   same colour: gold stays reserved for lit ayah words, completion and the
   certificate. Unlit until a run is active, so colour itself signals the streak. */
.stat-icon-flame        { color: var(--muted); transition: color 300ms ease; }
.stat-icon-flame.lit    { color: #DD6B20; }
.stat-icon-star         { color: var(--night); }

.stat-card-label {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.stat-card-num {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
}

.stat-card-caption {
  font-size: var(--t-base);
  color: var(--muted);
  margin-top: 0.15rem;
}

.stat-card-foot {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

/* ── Seven-day activity strip ────────────────────────────────────────────────── */
.week-strip {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
  margin-top: var(--s-4);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

.week-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  transition: background 300ms ease, border-color 300ms ease;
}
.week-dot.active { background: #DD6B20; border-color: #DD6B20; }
.week-dot.today  { box-shadow: 0 0 0 3px var(--night-soft); }

.week-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}


/* ── Dashboard two-column layout ─────────────────────────────────────────────── */
/* Outline sits on the right, main content (metrics + schematic) on the left. */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 860px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}

.dashboard-outline {
  order: 2;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  position: sticky;
  top: 1.5rem;
}

.outline-heading {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.65rem var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
}

.outline-item {
  display: block;
  text-decoration: none;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.12s;
}
.outline-item:last-child { border-bottom: none; }
.outline-item:hover { background: var(--night-soft); }
.outline-item.complete { border-left-color: var(--gold); }
.outline-item.current  { border-left-color: var(--night); background: var(--night-soft); }
.outline-item.future   { opacity: 0.45; }

.outline-item-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}

.outline-item-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  flex-shrink: 0;
}

.outline-item-title {
  font-family: var(--font-urdu);
  font-size: 1.0rem;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
  flex: 1;
  display: block;
}

.outline-item-tick {
  color: var(--gold);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.outline-item-progress {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  flex-shrink: 0;
}

.dashboard-main { order: 1; min-width: 0; }



/* ── Three-zone lesson layout ────────────────────────────────────────────────── */

.lesson-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.lesson-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--night);
  color: #fff;
  padding: 0.45rem var(--s-4);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  min-height: 46px;
}

.sidebar-hamburger {
  display: none;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.topbar-back {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 0.94rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar-back:hover { color: #fff; }

.topbar-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.topbar-progress-wrap {
  width: 100px;
  height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.topbar-progress-bar {
  height: 100%;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.topbar-pct {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.topbar-nav-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  border-radius: 4px;
  padding: 0.15rem var(--s-2);
  font-size: 0.90rem;
  cursor: pointer;
  font-family: var(--font-ui);
}
.topbar-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.topbar-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Three columns — each scrolls independently */
/* Schematic rail on the left, sidebar outline on the right. */
.lesson-body {
  display: grid;
  grid-template-columns: 280px 1fr 290px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Right sidebar ───────────────────────────────────────────────────────────── */
.lesson-sidebar {
  order: 3;
  border-left: 1px solid var(--line);
  overflow-y: auto;
  background: var(--paper);
}

.sidebar-module { border-bottom: 1px solid var(--line); }

.sidebar-module-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--ink);
}
.sidebar-module-toggle:hover { background: var(--night-soft); }

.sidebar-mod-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  flex-shrink: 0;
}

.sidebar-mod-title {
  font-family: var(--font-urdu);
  font-size: 0.94rem;
  line-height: 1.7;
  direction: rtl;
  flex: 1;
  text-align: right;
}

.sidebar-mod-tick {
  color: var(--gold);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.sidebar-chevron {
  font-size: 0.66rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sidebar-module.open .sidebar-chevron { transform: rotate(180deg); }

.sidebar-lessons { display: none; }
.sidebar-module.open .sidebar-lessons { display: block; }

.sidebar-lesson {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.65rem 0.3rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
  gap: 0.35rem;
  border-left: 3px solid transparent;
  color: var(--ink);
}
.sidebar-lesson:hover { background: var(--night-soft); }
.sidebar-lesson[aria-current="page"],
.sidebar-lesson.active {
  border-left: 3px solid var(--night);
  background: var(--night-soft);
  border-radius: 0 4px 4px 0;
}

.sidebar-lesson-title {
  font-family: var(--font-urdu);
  font-size: 0.90rem;
  line-height: 1.7;
  direction: rtl;
  flex: 1;
  text-align: right;
}

.sidebar-lesson-tick {
  color: var(--gold);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.sidebar-quiz-link {
  display: block;
  padding: 0.3rem 0.65rem 0.3rem 0.9rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar-quiz-link:hover { background: var(--night-soft); color: var(--night); }
.sidebar-quiz-link.active {
  border-left: 3px solid var(--night);
  background: var(--night-soft);
  color: var(--night);
}

/* ── Reading column ──────────────────────────────────────────────────────────── */
.lesson-reading-wrap {
  order: 2;
  overflow-y: auto;
  background: var(--paper);
}

.lesson-reading-col {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
}

.reading-lesson-title {
  font-family: var(--font-urdu);
  font-size: 1.38rem;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  color: var(--night);
  margin-bottom: var(--s-4);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.lesson-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  gap: var(--s-3);
  direction: ltr;
}

.btn-outline {
  background: transparent;
  color: var(--night);
  border: 1px solid var(--night);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-outline:hover { background: var(--night-soft); }

.mark-read-solid {
  background: var(--night);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 0.4rem var(--s-4);
  font-size: 0.82rem;
  font-family: var(--font-ui);
  cursor: pointer;
}
.mark-read-solid:hover { background: #162d4a; }
.mark-read-solid:disabled { background: var(--muted); cursor: not-allowed; }

.already-read-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-md);
}

/* ── Right schematic rail ────────────────────────────────────────────────────── */
.lesson-rail {
  order: 1;
  border-right: 1px solid var(--line);
  background: var(--paper);
  overflow-y: auto;
  padding: var(--s-4) var(--s-3);
}

.rail-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.65rem;
}

.rail-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rail-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: var(--s-1);
  justify-content: flex-start;
}

.word-pill {
  font-family: var(--font-ayah);
  font-size: 0.9rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color 400ms ease, background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}

.word-pill.lit {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: #5C4400;
  box-shadow: 0 0 7px rgba(184,134,11,.45);
}

@media (prefers-reduced-motion: reduce) {
  .word-pill { transition: none; }
}

.rail-caption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: var(--s-3);
  text-align: center;
}

/* ── Slim schematic strip (mobile, under topbar) ─────────────────────────────── */
.schematic-strip {
  display: none;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 0.3rem var(--s-4);
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
}

.strip-last-word { font-family: var(--font-ayah); font-size: 0.85rem; }

/* ── Sidebar overlay + drawer ────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 300;
}
.sidebar-overlay.open { display: block; }

/* ── Responsive: < 900px ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lesson-body { grid-template-columns: 1fr; }

  .lesson-sidebar {
    display: none;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 305px;
    z-index: 400;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
  }
  .lesson-sidebar.open { display: block; }

  .lesson-rail { display: none; }
  .schematic-strip { display: flex; }
  .sidebar-hamburger { display: inline-flex; }
}

@media (max-width: 600px) {
  .lesson-reading-col { padding: var(--s-4) var(--s-4) var(--s-6); }
  .topbar-progress-wrap { display: none; }
  .topbar-pct { display: none; }
}

/* ── Lesson top bar: points total ────────────────────────────────────────────── */
.topbar-points {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Quiz: points earned ─────────────────────────────────────────────────────── */
.quiz-earned {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--night);
  background: var(--night-soft);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
  margin-right: auto;
}

.quiz-complete-points {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin: var(--s-2) 0 0.9rem;
}

/* ── Accomplishment moments ──────────────────────────────────────────────────── */
/* Rationed on purpose: a small count-up for a lesson, the existing gold
   word-lighting for a module, a quiet badge for a streak milestone, and exactly
   one full-screen moment in the product, reserved for course completion.
   Every animation below degrades to an instant state change under
   prefers-reduced-motion (see the block at the end of this section). */

@keyframes fx-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  55%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.fx-pulse { animation: fx-pulse 700ms cubic-bezier(.34,1.56,.64,1); }

@keyframes fx-point-float {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -4px) scale(1.25); }
  32%  { transform: translate(-50%, -10px) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.fx-point-float {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 210;
  transform: translate(-50%, 0);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: #DD6B20;
  border-radius: var(--r-pill);
  padding: 0.16rem 0.6rem;
  box-shadow: 0 4px 14px -4px rgba(221,107,32,.7);
  pointer-events: none;
  white-space: nowrap;
  animation: fx-point-float 1500ms cubic-bezier(.22,1,.36,1) forwards;
}

/* Expanding ring behind the anchor, so the gain is legible peripherally. */
@keyframes fx-ring {
  0%   { opacity: .55; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.4); }
}
.fx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  min-width: 34px;
  border-radius: 50%;
  border: 2px solid #DD6B20;
  transform: translate(-50%, -50%) scale(.4);
  pointer-events: none;
  animation: fx-ring 800ms ease-out forwards;
}

@keyframes fx-tick {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.fx-tick { display: inline-block; animation: fx-tick 700ms ease; }

/* Streak milestone badge */
.fx-milestone {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 12px);
  z-index: 500;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--night);
  color: #fff;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
}
.fx-milestone.fx-in     { opacity: 1; transform: translate(-50%, 0); }
.fx-milestone.fx-instant { opacity: 1; transform: translate(-50%, 0); transition: none; }
.fx-milestone-num   { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; }
.fx-milestone-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: .85; }

/* Course completion: the single full-screen moment */
.fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(12,22,38,.72);
  opacity: 0;
  transition: opacity 320ms ease;
}
.fx-overlay.fx-in      { opacity: 1; }
.fx-overlay.fx-instant { opacity: 1; transition: none; }

.fx-overlay-card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2.25rem var(--s-6);
  box-shadow: 0 24px 64px -24px rgba(0,0,0,.55);
  transform: translateY(10px);
  transition: transform 320ms ease;
}
.fx-overlay.fx-in .fx-overlay-card      { transform: translateY(0); }
.fx-overlay.fx-instant .fx-overlay-card { transform: none; transition: none; }

.fx-overlay-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.fx-overlay-head {
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.fx-overlay-sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: var(--s-5);
}
.fx-overlay-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.fx-overlay-cta {
  background: var(--night);
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: var(--s-2) 1.2rem;
  font-size: 0.88rem;
}
.fx-overlay-cta:hover { background: #162d4a; }
.fx-overlay-dismiss {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: var(--s-2) 1.2rem;
  font-size: 0.88rem;
}
.fx-overlay-dismiss:hover { background: var(--night-soft); }

@media (prefers-reduced-motion: reduce) {
  .fx-pulse,
  .fx-point-float,
  .fx-ring,
  .fx-tick { animation: none; }
  .fx-point-float,
  .fx-ring { display: none; }
  .fx-milestone,
  .fx-overlay,
  .fx-overlay-card { transition: none; }
  .week-dot, .stat-icon-flame { transition: none; }
}

@media (max-width: 600px) {
  .topbar-points { display: none; }
}

/* ── Lesson visualizations ───────────────────────────────────────────────────── */
/* Structural diagrams parsed from the content files. Own accent (indigo) so a
   diagram reads as reference material, distinct from the teal analogy and amber
   trap teaching blocks. Never gold. */

.viz-block {
  margin: 1.4rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--viz-soft);
  border: 1px solid var(--line);
  border-right: 3px solid var(--viz);
  border-radius: 0 var(--r) var(--r) 0;
  direction: rtl;
}

.viz-title {
  font-family: var(--font-urdu);
  font-size: 1.02rem;
  line-height: 2;
  color: var(--viz);
  text-align: right;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.viz-empty { color: var(--muted); opacity: .5; }

/* ── Tree ────────────────────────────────────────────────────────────────────── */
.viz-tree-root {
  font-family: var(--font-urdu);
  font-size: 1.06rem;
  line-height: 2;
  font-weight: 600;
  color: var(--viz);
  text-align: right;
  margin-bottom: var(--s-2);
}

/* Spine runs down the RIGHT edge: the tree branches right-to-left. */
.viz-tree-branches {
  list-style: none;
  margin: 0 0.55rem 0 0;
  padding: 0 1.1rem 0 0;
  border-right: 2px solid var(--viz);
}

.viz-tree-node {
  position: relative;
  padding: 0.4rem 0.2rem 0.4rem 0;
}

/* Horizontal tick joining each node to the spine. */
.viz-tree-node::before {
  content: "";
  position: absolute;
  right: -1.1rem;
  top: 1.15rem;
  width: 0.85rem;
  height: 2px;
  background: var(--viz);
}

.viz-tree-label {
  font-family: var(--font-urdu);
  font-size: 0.98rem;
  line-height: 1.95;
  color: var(--ink);
}

.viz-tree-eg {
  display: block;
  font-family: var(--font-ayah);
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* ── Tables and the sigha grid ───────────────────────────────────────────────── */
/* A wide grid scrolls inside its own container; the page body never scrolls. */
.viz-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.viz-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 300px;
  direction: rtl;
}

.viz-table th,
.viz-table td {
  border: 1px solid var(--line);
  padding: var(--s-2) 0.7rem;
  text-align: center;
  vertical-align: middle;
}

.viz-table thead th {
  background: var(--card);
  font-family: var(--font-urdu);
  font-size: 0.86rem;
  line-height: 1.8;
  font-weight: 600;
  color: var(--viz);
  white-space: nowrap;
}

.viz-table td {
  font-family: var(--font-ayah);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--card);
}

/* Person bands. Tinted, but the band is also a real header cell, so the
   grouping survives without colour (NFR-03). */
.viz-group-row th {
  background: var(--viz-soft);
  font-family: var(--font-urdu);
  font-size: 0.88rem;
  line-height: 1.9;
  font-weight: 600;
  color: var(--viz);
  text-align: right;
}

.viz-rowlabel {
  background: var(--card);
  font-family: var(--font-urdu);
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--muted);
  white-space: nowrap;
}

.viz-corner { background: var(--card); }

/* ── Ayah note ───────────────────────────────────────────────────────────────── */
/* The verse stays one element: the key sits beneath, never on top of it. */
.viz-ayah {
  display: block;
  font-size: 1.3rem;
  line-height: 2.3;
  text-align: center;
  color: var(--ink);
  padding: var(--s-2) 0 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.85rem;
}

.viz-word-key {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.viz-word-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.viz-word {
  font-size: 1.05rem;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 5.5rem;
}

.viz-role {
  font-family: var(--font-urdu);
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--muted);
}

/* ── Parts of speech map ─────────────────────────────────────────────────────── */
/* English and Arabic always sit in their own elements: the two scripts never
   share a text node, which is what keeps each in its correct font. */
.pos-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.pos-head-ar {
  font-family: var(--font-ayah);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}

.pos-list { display: flex; flex-direction: column; gap: 0.7rem; }

.pos-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}

.pos-en {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--viz);
  text-align: left;
}

.pos-arrow { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }

.pos-ar {
  font-family: var(--font-ayah);
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--ink);
  text-align: right;
}

.pos-note {
  font-family: var(--font-urdu);
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--muted);
  text-align: right;
  margin-top: 0.15rem;
}

/* Anchor: one pair pinned under a lesson title, so the essence lands before
   the prose does. */
.pos-anchor {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  background: var(--viz-soft);
  border: 1px solid var(--line);
  border-right: 3px solid var(--viz);
  border-radius: 0 8px 8px 0;
  padding: var(--s-2) 0.85rem;
  margin: 0 0 1.1rem;
}

.pos-anchor-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  flex-shrink: 0;
}
.pos-anchor .pos-en { font-size: 0.88rem; text-align: left; }
.pos-anchor .pos-ar { font-size: 1.05rem; }

/* ── Inline mapping pairs (upgraded from a plain grey line) ──────────────────── */
.map-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0;
  padding: 0.15rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  direction: ltr;
}

.map-en {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink);
}
.map-arrow { color: var(--muted); font-size: 0.72rem; }
.map-ar {
  font-family: var(--font-ayah);
  font-size: 0.98rem;
  color: var(--viz);
}

@media (max-width: 600px) {
  .pos-line { grid-template-columns: 1fr auto 1fr; gap: 0.4rem; }
  .pos-en   { font-size: 0.82rem; }
  .pos-ar   { font-size: 1.02rem; }
}

/* ── Formula (grammar rules as equations) ────────────────────────────────────── */
.formula-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.formula-row + .formula-row { padding-top: 0.1rem; }

/* dir="rtl" on the container means DOM order renders right-to-left, so the
   result sits on the right and terms read leftward, as Arabic and Urdu do. */
.formula-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.formula-left {
  font-family: var(--font-urdu);
  font-size: 1rem;
  line-height: 1.95;
  font-weight: 600;
  color: var(--viz);
}

.formula-op {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--muted);
  flex-shrink: 0;
}
.formula-eq-sign { color: var(--viz); font-weight: 700; }

.formula-term {
  font-family: var(--font-urdu);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.1rem 0.6rem;
}

.formula-note {
  font-family: var(--font-urdu);
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--muted);
  margin-top: 0.3rem;
  padding-right: 0.3rem;
}

.formula-rule-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-right: 3px solid var(--viz);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem var(--s-3);
}

.formula-rule-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--viz);
  flex-shrink: 0;
}

.formula-rule-text {
  font-family: var(--font-urdu);
  font-size: 0.94rem;
  line-height: 1.9;
  color: var(--ink);
}

@media (max-width: 600px) {
  .formula-left, .formula-term { font-size: 0.9rem; }
}

/* ── Exercise (interactive practice) ─────────────────────────────────────────── */
.viz-exercise { border-right-color: var(--teal); }
.viz-exercise.is-done { opacity: .92; }

.ex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.ex-label {
  font-family: var(--font-urdu);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--teal);
  font-weight: 600;
}

.ex-done {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--correct);
  background: var(--correct-soft);
  padding: 0.15rem var(--s-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.ex-prompt {
  font-family: var(--font-urdu);
  font-size: 0.98rem;
  line-height: 2;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.ex-progress {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.ex-ask {
  font-size: 1.35rem;
  line-height: 2.1;
  text-align: center;
  color: var(--ink);
  padding: 0.6rem 0;
  margin-bottom: 0.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Tap-to-select options. Typing fully-vowelled Arabic is impractical, so the
   learner picks a form instead of reproducing it. */
.ex-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}

.ex-opt {
  font-family: var(--font-ayah);
  font-size: 1.15rem;
  line-height: 1.9;
  padding: 0.45rem 1.1rem;
  min-width: 5.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}
.ex-opt:hover:not(:disabled) {
  border-color: var(--teal);
  background: var(--teal-soft);
}
.ex-opt:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.ex-opt.is-right {
  border-color: var(--correct);
  background: var(--correct-soft);
  color: var(--correct);
}
.ex-opt.is-wrong {
  border-color: var(--wrong);
  background: var(--wrong-soft);
  color: var(--wrong);
  opacity: .7;
}
.ex-opt:disabled { cursor: not-allowed; }
.ex-opt.is-right:disabled, .ex-opt.is-wrong:disabled { opacity: .85; }

.ex-feedback {
  min-height: 1.5rem;
  margin-top: 0.55rem;
  font-family: var(--font-urdu);
  font-size: 0.92rem;
  line-height: 1.9;
  text-align: center;
}
.ex-feedback.is-right { color: var(--correct); }
.ex-feedback.is-wrong { color: var(--wrong); }

/* ── Boot ────────────────────────────────────────────────────────────────────
   The one moment before any view exists. Deliberately plain: a skeleton here
   would guess at a layout the router has not chosen yet. */
.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ── Loading skeletons ───────────────────────────────────────────────────────── */
/* Shaped like the content they stand in for, so nothing jumps when the real
   thing arrives. A spinner in an empty page is not a skeleton. */

.sk-wrap { animation: sk-fade var(--dur-slow) var(--ease-out); }
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }

.sk {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--line) 0%,
    color-mix(in srgb, var(--line) 55%, var(--card)) 50%,
    var(--line) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s var(--ease-in-out) infinite;
  margin-bottom: var(--s-2);
}
@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.sk-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  min-height: 108px;
}
.sk-tall  { min-height: 190px; }
.sk-hero  { height: 108px; border-radius: var(--r-lg); background: var(--line); margin-bottom: var(--s-4);
            animation: sk-shimmer 1.4s var(--ease-in-out) infinite;
            background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 55%, var(--card)) 50%, var(--line) 100%);
            background-size: 200% 100%; }

.sk-row   { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.sk-row-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sk-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.sk-path  { margin-bottom: var(--s-6); }
.sk-dash, .sk-table { max-width: 940px; margin: 0 auto; }
.sk-reading { max-width: 720px; margin: 0 auto; padding: var(--s-5) var(--s-6); }
.sk-line  { margin-bottom: var(--s-3); }
.sk-trow  { display: grid; grid-template-columns: 12% 1fr 16%; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sk-trow .sk { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .sk, .sk-hero { animation: none; background: var(--line); }
  .sk-wrap { animation: none; }
}

/* ── Empty and error states ──────────────────────────────────────────────────── */
.state-block {
  max-width: 460px;
  margin: var(--s-6) auto;
  padding: var(--s-5);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.state-error { border-color: var(--wrong); background: var(--wrong-soft); }

.state-heading {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.state-body { font-size: var(--t-base); color: var(--muted); line-height: 1.6; }
.state-hint { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-3); line-height: 1.6; }
.state-hint code {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  background: var(--night-soft);
  color: var(--night);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
/* Shared action affordance for every non-content state, so the button sits
   the same distance below the message on every screen. */
.state-action { display: inline-flex; margin-top: var(--s-4); }

.boot-error {
  max-width: 32rem;
  margin: var(--s-7) auto;
  padding: var(--s-5);
  text-align: center;
  color: var(--wrong);
  background: var(--wrong-soft);
  border: 1px solid var(--wrong);
  border-radius: var(--r-lg);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
/* Confirms an action. Deliberately not a celebration, so it never borrows from
   the rationed reward moments. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  transform: translate(-50%, 12px);
  z-index: 700;
  max-width: min(90vw, 26rem);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: #fff;
  background: var(--night);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: var(--wrong); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}


/* ── Polish: global guards ───────────────────────────────────────────────────
   Learned from the leaderboard, whose table widened the document instead of
   scrolling itself. This makes that class of bug visible immediately rather
   than only on a narrow device. */
html, body { overflow-x: hidden; }

/* Long unbroken strings (an email, a verification id) must wrap rather than
   stretch their container. */
.admin-email-sub, .cert-verify-id, .lb-td-name { overflow-wrap: anywhere; }

/* Media never exceeds its column. */
img, svg, video { max-width: 100%; }

/* Consistent optical rhythm: the last child of a card never adds trailing
   space the padding already provides. */
.state-block > :last-child,
.cat-course > :last-child,
.stat-card  > :last-child { margin-bottom: 0; }

/* --- Dashboard header --------------------------------------------------------
   The dashboard had no heading at all: it opened directly into cards, which
   left the page without a visual entry point or a document landmark. */

.dash-header {
  padding: var(--s-4) 0 var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.dash-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.dash-title {
  font-size: var(--t-2xl);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-2);
  text-wrap: balance;
}

.dash-sub {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--t-base);
  color: var(--muted);
}
.dash-sub-strong { color: var(--ink); font-weight: 600; }

.dash-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: var(--s-3);
}
.dash-back:hover { color: var(--night); }

/* --- Catalog (learning paths) ------------------------------------------------
   The landing screen. Laid out to fit a normal desktop viewport without
   scrolling: a two-column top band (greeting left, figures right, which is
   what fills the previously empty top-right), then paths side by side rather
   than stacked.

   It does NOT force no-scroll with a fixed height. On a short window the page
   scrolls rather than clipping, because hiding a whole learning path to
   protect a layout rule would be the wrong trade. */

.cat-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-6);
  min-height: calc(100vh - 4.25rem);   /* viewport minus the app header */
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Top band: greeting and figures share one row. */
.cat-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.cat-hero { max-width: 22ch; }

.cat-hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.cat-hero-title {
  font-size: var(--t-3xl);
  line-height: 1.03;
  font-weight: 650;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: var(--s-3);
  text-wrap: balance;
}

.cat-hero-sub {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--muted);
  max-width: 42ch;
}

/* Figures, right-aligned in the top band. */
.cat-callouts {
  display: flex;
  gap: var(--s-6);
  justify-content: flex-end;
  flex-shrink: 0;
}

.cat-callout {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--s-2);
  text-align: left;
}
.cat-callout-icon { grid-row: 1; color: var(--muted); display: flex; }
.cat-callout.is-flame .cat-callout-icon { color: #DD6B20; }
.cat-callout.is-star .cat-callout-icon  { color: var(--night); }

.cat-callout-value {
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.cat-callout-label {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* Paths sit side by side, which is what removes most of the page height. */
.cat-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--s-6);
  align-items: start;
  flex: 1;
}

.cat-path { display: flex; flex-direction: column; gap: var(--s-4); }

.cat-path-head {
  position: relative;
  padding-left: var(--s-4);
}

/* Accent rule: the band that stops each path reading like the last one. */
.cat-path-rule {
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 4px;
  border-radius: var(--r-pill);
}
.cat-accent-teal   { background: var(--teal); }
.cat-accent-indigo { background: var(--viz); }
.cat-accent-night  { background: var(--night); }

.cat-path-titles {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.cat-path-title {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cat-path-title-ur {
  font-family: var(--font-urdu);
  font-size: var(--t-md);
  line-height: 2;
  color: var(--muted);
}

.cat-path-blurb {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--muted);
  margin-top: var(--s-1);
}

/* Urdu voice of the path, moved off the login page when the platform stopped
   being Quranic Arabic alone. Nastaliq needs far more leading than the Latin
   text above it. */
.cat-path-tagline-ur {
  font-family: var(--font-urdu);
  font-size: var(--t-sm);
  line-height: 2.2;
  color: var(--muted);
  margin-top: var(--s-2);
}

.cat-path-count {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.cat-path-empty {
  font-size: var(--t-base);
  color: var(--muted);
  padding: var(--s-5);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* Course cards stack within their path column. */
.cat-course-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cat-course {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.cat-course:hover { border-color: var(--night); box-shadow: var(--shadow-lg); }

/* The band gives each card a colour anchor without tinting the whole surface. */
.cat-course-band {
  display: block;
  height: 4px;
  background: var(--line);
}

.cat-course-body { flex: 1; padding: var(--s-4) var(--s-4) var(--s-3); }

.cat-course-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.cat-course-title {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cat-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.cat-badge-active { color: var(--night); background: var(--night-soft); border-color: var(--night-soft); }
.cat-badge-done   { color: var(--gold);  background: var(--gold-soft);  border-color: var(--gold); }
.cat-badge-soon   { opacity: .8; }

.cat-course-blurb {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.cat-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.cat-meta-item { display: inline-flex; align-items: center; gap: var(--s-1); }
.cat-meta-pct  { color: var(--night); }

.cat-progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.cat-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  background: var(--night);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.cat-progress-pct {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--night);
  min-width: 2.6rem;
  text-align: right;
}

.cat-course-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--night);
}
.cat-course-cta .icon { transition: transform var(--dur-base) var(--ease-out); }
.cat-course:hover .cat-course-cta .icon { transform: translateX(3px); }

/* A course with no content yet: visibly not openable, never a fake card. */
.cat-course-planned {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}
.cat-course-planned:hover { border-color: var(--line); box-shadow: none; }
.cat-course-planned .cat-course-title { color: var(--muted); }
.cat-course-planned .cat-course-band  { background: transparent; }

/* Below this the two-column top band stops helping: the figures wrap under
   the greeting and the page is allowed to scroll normally. */
@media (max-width: 900px) {
  .cat-view      { min-height: 0; padding: var(--s-4) var(--s-4) var(--s-6); }
  .cat-top       { grid-template-columns: 1fr; gap: var(--s-4); }
  .cat-hero      { max-width: 100%; }
  .cat-callouts  { justify-content: flex-start; gap: var(--s-5); flex-wrap: wrap; }
  .cat-paths     { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-bar-fill, .cat-course-cta .icon { transition: none; }
}

/* ── Parts of speech reference ───────────────────────────────────────────────── */
.ref-view { max-width: 720px; margin: 0 auto; padding: var(--s-2) 0 var(--s-6); }

.ref-heading {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.ref-intro {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.ref-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.ref-search {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: var(--s-2) 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
}
.ref-search:focus {
  outline: none;
  border-color: var(--night);
  box-shadow: 0 0 0 3px var(--night-soft);
}

.ref-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

.ref-group { margin-bottom: var(--s-5); }
.ref-group[hidden] { display: none; }

.ref-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.45rem;
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.ref-group-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  flex-shrink: 0;
}

.ref-group-title {
  font-family: var(--font-urdu);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--ink);
}

.ref-rows { display: flex; flex-direction: column; }

/* English left, Arabic right, always in separate elements: the two scripts
   never share a text node. */
.ref-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto minmax(6rem, 1fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 0.6rem;
  padding: var(--s-2) 0.4rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.ref-row:last-child { border-bottom: none; }
.ref-row:hover { background: var(--night-soft); }
.ref-row[hidden] { display: none; }

.ref-en { font-size: 0.9rem; }
.ref-arrow { color: var(--muted); font-size: 0.8rem; }
.ref-ar {
  font-family: var(--font-ayah);
  font-size: 1.02rem;
  text-align: right;
}
.ref-where {
  font-family: var(--font-urdu);
  font-size: 0.76rem;
  line-height: 1.8;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-none, .ref-group-empty {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  padding: var(--s-5) 0;
}

.outline-ref-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem var(--s-4);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--night);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.outline-ref-link:hover { background: var(--night-soft); }

.topbar-ref {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-pill);
  padding: 0.1rem var(--s-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar-ref:hover { color: #fff; background: rgba(255,255,255,.12); }

@media (max-width: 720px) {
  .ref-row { grid-template-columns: 1fr auto 1fr; }
  .ref-where { display: none; }
}
@media (max-width: 600px) {
  .topbar-ref { display: none; }
}

.hdr-admin-link {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: var(--s-1) var(--s-3);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.hdr-admin-link:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ── Leaderboard ─────────────────────────────────────────────────────────────── */

.lb-notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5) var(--s-5) 1.65rem;
  margin-top: var(--s-4);
  text-align: center;
}
.lb-notice.is-error { border-color: var(--wrong); background: var(--wrong-soft); }

.lb-notice-head {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.lb-empty-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: var(--s-3);
  line-height: 1.6;
}
.lb-empty-hint code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--night-soft);
  color: var(--night);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.lb-empty-hint a { color: var(--night); font-weight: 600; }

.lb-view, .lb-empty { max-width: 640px; margin: 0 auto; padding: var(--s-2) 0 var(--s-6); }
.lb-empty { text-align: center; }

.lb-heading {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.lb-stamp, .lb-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.lb-stamp { margin-bottom: 1.1rem; }
.lb-note  { margin-top: 0.9rem; text-align: center; }

.lb-empty-text { color: var(--muted); font-size: 0.92rem; max-width: 420px; margin: 0.75rem auto 0; }

.lb-table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* Scrolls itself rather than pushing the page sideways on a narrow screen.
     `overflow: hidden` alone clipped the rounded corners but let the table
     widen the document. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lb-table { width: 100%; border-collapse: collapse; }

.lb-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.lb-table th:last-child, .lb-td-points { text-align: right; }

.lb-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink);
}
.lb-table tbody tr:last-child td { border-bottom: none; }

.lb-td-rank   { width: 3.5rem; }
.lb-td-points { font-family: var(--font-mono); font-weight: 600; }

.lb-rank { font-family: var(--font-mono); color: var(--muted); font-size: 0.86rem; }

.lb-me td { background: var(--night-soft); }

.lb-you {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--night);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.08rem 0.4rem;
  vertical-align: middle;
}

/* Medals: the fourth sanctioned gold use, confined to these three rules. */
.lb-medal-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #3A2E10;
  border: 2px solid;
}
.lb-medal-gold   .lb-medal-ring { background: var(--medal-gold);   border-color: #B8912B; }
.lb-medal-silver .lb-medal-ring { background: var(--medal-silver); border-color: #8B8C90; }
.lb-medal-bronze .lb-medal-ring { background: var(--medal-bronze); border-color: #8F7145; }

/* ── Admin publish control ───────────────────────────────────────────────────── */
.admin-publish {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.admin-publish-note   { font-size: 0.76rem; color: var(--muted); flex: 1; min-width: 200px; }
.admin-publish-status { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.admin-publish-status.is-ok  { color: var(--correct); }
.admin-publish-status.is-err { color: var(--wrong); }

.stat-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--night);
  text-decoration: none;
}
.stat-card-link:hover { text-decoration: underline; }

/* Inside a lesson section (تشبیہ / عام غلطی / قرآن سے مثال) the section already
   provides the card, so the visualization drops its own frame rather than
   nesting a card inside a card. FR-10. */
.lesson-section .viz-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0.4rem 0 0;
}
.lesson-section .viz-ayah { border-bottom-color: var(--line); }

@media (max-width: 600px) {
  .viz-block { padding: 0.9rem; }
  .viz-ayah  { font-size: 1.15rem; }
  .lesson-section .viz-block { padding: 0; }
}

/* ── Chapter overview screen ──────────────────────────────────────────────────── */
.overview-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.overview-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--night);
  color: #fff;
  padding: 0.45rem var(--s-4);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.overview-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) 1.25rem;
}

.overview-card {
  max-width: 620px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 2.5rem 2.25rem;
  text-align: center;
}

.overview-chapter-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--s-2);
}

.overview-title {
  font-family: var(--font-urdu);
  font-size: 1.5rem;
  line-height: 2.2;
  color: var(--night);
  margin-bottom: var(--s-5);
}

.overview-hook {
  text-align: right;
  margin-bottom: var(--s-5);
}

.overview-credit {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: var(--s-5);
}

.overview-start-btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.6rem 1.75rem;
  font-size: 0.9rem;
}

/* ── Quiz screen ─────────────────────────────────────────────────────────────── */
.quiz-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.quiz-topbar {
  background: var(--night);
  color: #fff;
  padding: 0.45rem var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 46px;
}

.quiz-back {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.quiz-back:hover { color: #fff; }

.quiz-module-name {
  font-family: var(--font-urdu);
  font-size: 0.85rem;
  line-height: 1.6;
  direction: rtl;
  color: rgba(255,255,255,.75);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-dot-tracker {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
}

.quiz-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  transition: background 0.15s, border-color 0.15s;
}
.quiz-dot.answered { background: rgba(255,255,255,.8); border-color: transparent; }
.quiz-dot.current { background: transparent; border: 2px solid #fff; }

.quiz-fraction {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}

.quiz-body-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--s-6) var(--s-4) var(--s-7);
}

.quiz-body {
  width: 100%;
  max-width: 560px;
}

.quiz-ayah-block { margin-bottom: 1.25rem; }

.quiz-question-text {
  font-family: var(--font-urdu);
  font-size: 1.05rem;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  margin-bottom: var(--s-4);
  font-weight: 600;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: var(--s-4);
}

.quiz-opt-btn {
  font-family: var(--font-urdu);
  font-size: 0.95rem;
  line-height: 2;
  direction: rtl;
  text-align: right;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.35rem var(--s-4);
  cursor: pointer;
  width: 100%;
  transition: background 0.1s, border-color 0.1s;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.quiz-opt-btn:hover:not(:disabled) { background: var(--night-soft); border-color: var(--night); }
.quiz-opt-btn.correct { background: var(--correct-soft); border-color: var(--correct); color: #1b5e40; }
.quiz-opt-btn.wrong { background: var(--wrong-soft); border-color: var(--wrong); color: #8c2f28; }
.quiz-opt-btn:disabled { cursor: not-allowed; }

.quiz-opt-icon { font-size: 0.85rem; flex-shrink: 0; }
.quiz-opt-text { flex: 1; }

/* وضاحت panel */
.wazahat-panel {
  display: none;
  border-radius: var(--r-md);
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.wazahat-panel.visible { display: block; }

.wazahat-label {
  font-family: var(--font-urdu);
  font-size: 0.94rem;
  font-weight: 700;
  padding: 0.35rem var(--s-4);
  display: block;
}

.wazahat-body {
  font-family: var(--font-urdu);
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  font-size: 1.08rem;
  padding: var(--s-2) var(--s-4) var(--s-3);
}

.wazahat-panel.outcome-correct { background: var(--correct-soft); border-color: var(--correct); }
.wazahat-panel.outcome-correct .wazahat-label { color: var(--correct); }
.wazahat-panel.outcome-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.wazahat-panel.outcome-wrong .wazahat-label { color: var(--wrong); }

.quiz-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-4);
}

.quiz-next-btn {
  display: none;
  background: var(--night);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: var(--s-2) 1.25rem;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: var(--font-ui);
}
.quiz-next-btn:hover { background: #162d4a; }
.quiz-next-btn.visible { display: inline-flex; }

.quiz-complete-banner {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
}
.quiz-complete-banner a { color: var(--night); font-weight: 600; }

/* ── Certificate ─────────────────────────────────────────────────────────────── */
/*    ALL colours hardcoded — never use CSS variables here.                       */
/*    The certificate must print identically regardless of theme.                 */

/* Screen wrapper only. The printable artifact itself keeps its fixed palette
   so it renders identically everywhere; this backdrop is screen chrome and
   follows the theme, so dark mode does not show a large slab of light grey. */
.cert-wrap {
  background: var(--paper);
  min-height: 100%;
  padding: var(--s-6) var(--s-4) 4rem;
  text-align: center;
}

.cert-actions {
  margin-bottom: 1.25rem;
}

.cert-print-btn {
  background: #1F3A5F;
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: var(--s-2) 1.4rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.cert-print-btn:hover { background: #162d4a; }

/* The certificate sheet */
.cert-page {
  background: #FAF7F0;
  color: #1F3A5F;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 6px 40px rgba(0,0,0,.22);
  text-align: center;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Dual gold border: outer 2px, 12px gap, inner 1px */
.cert-outer-border {
  border: 2px solid #B8860B;
  margin: 20px;
  padding: 0;
}

.cert-inner-border {
  border: 1px solid #B8860B;
  margin: 8px;
  padding: 2.5rem var(--s-7) var(--s-6);
}

/* Brand lockup */
.cert-lockup {
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.cert-brand-ar {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 1.9rem;
  color: #1F3A5F;
  direction: rtl;
  display: block;
  letter-spacing: 0.02em;
}

.cert-brand-en {
  font-family: "Inter", sans-serif;
  font-size: 0.6rem;
  color: #7A8898;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* Dividers */
.cert-rule-gold {
  border: none;
  border-top: 1px solid #B8860B;
  width: 100px;
  margin: 0.9rem auto;
}

.cert-name-rule {
  border: none;
  border-top: 1px solid #B8860B;
  width: 300px;
  margin: 0.3rem auto 1.25rem;
}

/* Header text */
.cert-subtitle {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7A8898;
  margin-bottom: 1.4rem;
}

.cert-intro {
  font-size: 0.85rem;
  color: #1F3A5F;
  font-style: italic;
  margin-bottom: 0.4rem;
}

/* Name — visual centrepiece */
.cert-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #1F3A5F;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

/* Completion text */
.cert-completion {
  font-size: 0.9rem;
  color: #1F3A5F;
  margin-bottom: 0.3rem;
}

.cert-details {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  color: #7A8898;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

/* Urdu tagline */
.cert-tagline {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 0.95rem;
  line-height: 2.2;
  color: #1F3A5F;
  direction: rtl;
  margin-bottom: var(--s-5);
}

/* Footer row */
.cert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #DDD7C8;
  padding-top: var(--s-4);
  gap: var(--s-4);
}

.cert-footer-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  color: #7A8898;
  text-align: left;
  flex: 1;
}

.cert-seal {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-seal svg { display: block; } /* cert-seal-ar retired */

.cert-footer-right {
  flex: 1;
  text-align: right;
}

.cert-verify-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: #7A8898;
  letter-spacing: 0.04em;
}

/* Gate-not-met state */
.cert-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: var(--s-7) var(--s-4);
}

.cert-gate-inner {
  max-width: 400px;
  text-align: center;
}

.cert-gate-icon {
  font-size: 2rem;
  color: var(--line);
  margin-bottom: var(--s-4);
}

.cert-gate-heading {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: var(--s-2);
  font-weight: 600;
}

.cert-gate-text {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.cert-gate-progress {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) 1.25rem;
  text-align: left;
}

.cert-gate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--ink);
  padding: 0.3rem 0;
}
.cert-gate-row + .cert-gate-row { border-top: 1px solid var(--line); }

.cert-gate-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Print stylesheet ─────────────────────────────────────────────────────── */
@media print {
  @page { size: A4 landscape; margin: 0; }

  /* Hide everything except the certificate. The celebration layers are
     appended to document.body and are position:fixed, so without this they
     would print over the certificate if one were still on screen. */
  .app-header,
  .no-print,
  .fx-overlay,
  .fx-milestone,
  .fx-point-float,
  .fx-ring,
  .cert-actions { display: none !important; }

  /* Remove screen backgrounds */
  body { background: #FAF7F0 !important; }
  .main-content { padding: 0 !important; }
  .cert-wrap { background: none !important; padding: 0 !important; min-height: unset !important; }

  /* Force A4 landscape dimensions */
  .cert-page {
    max-width: none !important;
    width: 297mm !important;
    height: 210mm !important;
    box-shadow: none !important;
    margin: 0 !important;
    page-break-inside: avoid;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cert-outer-border {
    margin: 10mm !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .cert-inner-border {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ── Admin report ────────────────────────────────────────────────────────────── */
.admin-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-5);
}

.admin-heading {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--night);
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
  margin-bottom: 1.75rem;
}

.admin-stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem var(--s-4);
  text-align: center;
  box-shadow: var(--shadow);
}

.admin-stat-num {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--night);
  line-height: 1;
}
.admin-stat-gold { color: var(--gold); }
.admin-stat-warn { color: var(--wrong); }

.admin-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.admin-table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.admin-table thead tr {
  border-bottom: 2px solid var(--line);
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.65rem var(--s-4);
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--night-soft); }

.admin-table td {
  padding: var(--s-3) var(--s-4);
  vertical-align: middle;
}

.admin-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.admin-email-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.admin-td-progress {
  min-width: 140px;
}

.admin-progress-wrap {
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--s-1);
}

.admin-progress-bar {
  height: 100%;
  background: var(--night);
  border-radius: 3px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.admin-pct {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.admin-td-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--ink);
}

.admin-td-mod {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.admin-td-ago {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.admin-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem var(--s-2);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.admin-badge-new    { background: var(--line);         color: var(--muted); }
.admin-badge-active { background: var(--night-soft);   color: var(--night); }
.admin-badge-done   { background: var(--gold-soft);    color: #7A5800; }

.admin-empty {
  text-align: center;
  padding: 2.5rem var(--s-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* dark mode admin overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-heading      { color: var(--ink); }
  :root:not([data-theme="light"]) .admin-stat-num     { color: var(--ink); }
  :root:not([data-theme="light"]) .admin-progress-bar { background: #7BAED4; }
  :root:not([data-theme="light"]) .admin-badge-active { background: var(--night-soft); color: #7BAED4; }
  :root:not([data-theme="light"]) .admin-badge-done   { background: var(--gold-soft);  color: #E5C05A; }
}
:root[data-theme="dark"] .admin-heading      { color: var(--ink); }
:root[data-theme="dark"] .admin-stat-num     { color: var(--ink); }
:root[data-theme="dark"] .admin-progress-bar { background: #7BAED4; }
:root[data-theme="dark"] .admin-badge-active { background: var(--night-soft); color: #7BAED4; }
:root[data-theme="dark"] .admin-badge-done   { background: var(--gold-soft);  color: #E5C05A; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   Token overrides + element-level fixes for hardcoded colours.
   data-theme="dark/light" (set by toggle, persisted in localStorage) wins over
   the media query. Both paths set identical values so there is no drift.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #10192A;
    --card:         #172236;
    --line:         #263650;
    --ink:          #D4E2EE;
    --muted:        #7A94AB;
    --night-soft:   #1C3050;
    --gold-soft:    #2E2210;
    --teal-soft:    #0D2820;
    --warn-soft:    #2C2008;
    --correct-soft: #0E2B1C;
    --wrong-soft:   #2D0E0E;
    --teal:         #3DAA87;
    --correct:      #4DBD8A;
    --wrong:        #D46A63;
    --viz:          #9AA6E0;
    --viz-soft:     #1B2036;
    /* --focus-border resolved to --night (#1F3A5F): dark navy on a dark
       surface, so the ring was effectively invisible in dark theme. */
    --focus-border: #7BAED4;
    --focus-ring:   0 0 0 3px rgba(123,174,212,.35);
  }
}

:root[data-theme="dark"] {
  --paper:        #10192A;
  --card:         #172236;
  --line:         #263650;
  --ink:          #D4E2EE;
  --muted:        #7A94AB;
  --night-soft:   #1C3050;
  --gold-soft:    #2E2210;
  --teal-soft:    #0D2820;
  --warn-soft:    #2C2008;
  --correct-soft: #0E2B1C;
  --wrong-soft:   #2D0E0E;
  --teal:         #3DAA87;
  --correct:      #4DBD8A;
  --wrong:        #D46A63;
  --viz:          #9AA6E0;
  --viz-soft:     #1B2036;
  --focus-border: #7BAED4;
  --focus-ring:   0 0 0 3px rgba(123,174,212,.35);
}

/* ── Dark mode element fixes (hardcoded colours & --night-as-text) ─────────── */

/* Shared mixin via custom selector grouping (repeated for @media and [data-theme]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .word-pill.lit           { color: #E5C05A; box-shadow: 0 0 8px rgba(229,192,90,.4); }
  :root:not([data-theme="light"]) .login-page              { background: var(--paper); }
  :root:not([data-theme="light"]) .btn-google              { background: var(--paper); }

  /* Reading column */
  :root:not([data-theme="light"]) .reading-lesson-title    { color: var(--ink); }
  :root:not([data-theme="light"]) .overview-title          { color: var(--ink); }
  /* Streak / points + celebration */
  :root:not([data-theme="light"]) .stat-card-num           { color: var(--ink); }
  :root:not([data-theme="light"]) .stat-icon-star          { color: #7BAED4; }
  :root:not([data-theme="light"]) .stat-icon-flame.lit     { color: #E8A33D; }
  :root:not([data-theme="light"]) .week-dot.active         { background: #E8A33D; border-color: #E8A33D; }
  :root:not([data-theme="light"]) .cert-banner-cta         { color: #7BAED4; }
  :root:not([data-theme="light"]) .metric-number           { color: #7BAED4; }
  :root:not([data-theme="light"]) .quiz-earned             { color: #7BAED4; }
  :root:not([data-theme="light"]) .stat-card-link          { color: #7BAED4; }
  :root:not([data-theme="light"]) .lb-you                  { color: #7BAED4; }
  :root:not([data-theme="light"]) .ex-label                { color: var(--teal); }
  :root:not([data-theme="light"]) .lb-empty-hint code      { color: #7BAED4; }
  :root:not([data-theme="light"]) .lb-empty-hint a         { color: #7BAED4; }
  :root:not([data-theme="light"]) .outline-ref-link        { color: #7BAED4; }
  :root:not([data-theme="light"]) .cat-course-cta          { color: #7BAED4; }
  :root:not([data-theme="light"]) .cat-meta-pct            { color: #7BAED4; }
  :root:not([data-theme="light"]) .cat-bar-fill            { background: #7BAED4; }
  :root:not([data-theme="light"]) .cat-progress-pct        { color: #7BAED4; }
  :root:not([data-theme="light"]) .cat-badge-active        { color: #7BAED4; }
  :root:not([data-theme="light"]) .cat-callout.is-star .cat-callout-icon { color: #7BAED4; }
  :root:not([data-theme="light"]) .sidebar-quiz-link:hover { color: #7BAED4; }
  :root:not([data-theme="light"]) .state-hint code         { color: #7BAED4; }
  :root:not([data-theme="light"]) .dash-back:hover         { color: #7BAED4; }
  :root:not([data-theme="light"]) .pos-en                  { color: #9AA6E0; }
  :root:not([data-theme="light"]) .map-ar                  { color: #9AA6E0; }
  :root:not([data-theme="light"]) .fx-point-float          { color: #7BAED4; }
  :root:not([data-theme="light"]) .fx-milestone            { background: #1C3050; }
  :root:not([data-theme="light"]) .fx-overlay              { background: rgba(4,10,20,.8); }
  :root:not([data-theme="light"]) .fx-overlay-cta          { background: #2B5182; }
  :root:not([data-theme="light"]) .fx-overlay-cta:hover    { background: #35619B; }
  :root:not([data-theme="light"]) .metric-number           { color: var(--ink); }

  /* Section block labels (teal / amber hardcoded) */
  :root:not([data-theme="light"]) .block-analogy .section-label { color: var(--teal); }
  :root:not([data-theme="light"]) .block-trap .section-label    { color: #D4A840; }
  :root:not([data-theme="light"]) .block-trap                   { border-right-color: #A07828; }

  /* Quiz */
  :root:not([data-theme="light"]) .quiz-opt-btn.correct    { color: var(--correct); }
  :root:not([data-theme="light"]) .quiz-opt-btn.wrong      { color: var(--wrong); }
  :root:not([data-theme="light"]) .wazahat-panel.outcome-correct .wazahat-label { color: var(--correct); }
  :root:not([data-theme="light"]) .wazahat-panel.outcome-wrong   .wazahat-label { color: var(--wrong); }
  :root:not([data-theme="light"]) .quiz-complete-banner a  { color: #7BAED4; }

  /* Buttons / outlines */
  :root:not([data-theme="light"]) .btn-outline             { color: var(--ink); border-color: var(--line); }
  :root:not([data-theme="light"]) .btn-outline:hover       { background: var(--night-soft); }

  /* Sidebar active states */
  :root:not([data-theme="light"]) .sidebar-quiz-link.active   { color: var(--ink); }
  :root:not([data-theme="light"]) .sidebar-lesson.active      { border-left-color: #7BAED4; }

  /* Outline panel current state */
  :root:not([data-theme="light"]) .outline-item.current    { border-left-color: #7BAED4; }
}

:root[data-theme="dark"] .word-pill.lit                    { color: #E5C05A; box-shadow: 0 0 8px rgba(229,192,90,.4); }
:root[data-theme="dark"] .login-page                       { background: var(--paper); }
:root[data-theme="dark"] .btn-google                       { background: var(--paper); }
:root[data-theme="dark"] .reading-lesson-title             { color: var(--ink); }
:root[data-theme="dark"] .overview-title                   { color: var(--ink); }
:root[data-theme="dark"] .stat-card-num                    { color: var(--ink); }
:root[data-theme="dark"] .stat-icon-star                   { color: #7BAED4; }
:root[data-theme="dark"] .stat-icon-flame.lit              { color: #E8A33D; }
:root[data-theme="dark"] .week-dot.active                  { background: #E8A33D; border-color: #E8A33D; }
:root[data-theme="dark"] .cert-banner-cta                  { color: #7BAED4; }
:root[data-theme="dark"] .metric-number                    { color: #7BAED4; }
:root[data-theme="dark"] .quiz-earned                      { color: #7BAED4; }
:root[data-theme="dark"] .stat-card-link                   { color: #7BAED4; }
:root[data-theme="dark"] .lb-you                           { color: #7BAED4; }
:root[data-theme="dark"] .ex-label                         { color: var(--teal); }
:root[data-theme="dark"] .lb-empty-hint code               { color: #7BAED4; }
:root[data-theme="dark"] .lb-empty-hint a                  { color: #7BAED4; }
:root[data-theme="dark"] .outline-ref-link                 { color: #7BAED4; }
:root[data-theme="dark"] .cat-course-cta                   { color: #7BAED4; }
:root[data-theme="dark"] .cat-meta-pct                     { color: #7BAED4; }
:root[data-theme="dark"] .cat-bar-fill                     { background: #7BAED4; }
:root[data-theme="dark"] .cat-progress-pct                 { color: #7BAED4; }
:root[data-theme="dark"] .cat-badge-active                 { color: #7BAED4; }
:root[data-theme="dark"] .cat-callout.is-star .cat-callout-icon { color: #7BAED4; }
:root[data-theme="dark"] .sidebar-quiz-link:hover          { color: #7BAED4; }
:root[data-theme="dark"] .state-hint code                  { color: #7BAED4; }
:root[data-theme="dark"] .dash-back:hover                  { color: #7BAED4; }
:root[data-theme="dark"] .pos-en                           { color: #9AA6E0; }
:root[data-theme="dark"] .map-ar                           { color: #9AA6E0; }
:root[data-theme="dark"] .fx-point-float                   { color: #7BAED4; }
:root[data-theme="dark"] .fx-milestone                     { background: #1C3050; }
:root[data-theme="dark"] .fx-overlay                       { background: rgba(4,10,20,.8); }
:root[data-theme="dark"] .fx-overlay-cta                   { background: #2B5182; }
:root[data-theme="dark"] .fx-overlay-cta:hover             { background: #35619B; }
:root[data-theme="dark"] .metric-number                    { color: var(--ink); }
:root[data-theme="dark"] .block-analogy .section-label     { color: var(--teal); }
:root[data-theme="dark"] .block-trap .section-label        { color: #D4A840; }
:root[data-theme="dark"] .block-trap                       { border-right-color: #A07828; }
:root[data-theme="dark"] .quiz-opt-btn.correct             { color: var(--correct); }
:root[data-theme="dark"] .quiz-opt-btn.wrong               { color: var(--wrong); }
:root[data-theme="dark"] .wazahat-panel.outcome-correct .wazahat-label { color: var(--correct); }
:root[data-theme="dark"] .wazahat-panel.outcome-wrong   .wazahat-label { color: var(--wrong); }
:root[data-theme="dark"] .quiz-complete-banner a           { color: #7BAED4; }
:root[data-theme="dark"] .btn-outline                      { color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .btn-outline:hover                { background: var(--night-soft); }
:root[data-theme="dark"] .sidebar-quiz-link.active         { color: var(--ink); }
:root[data-theme="dark"] .sidebar-lesson.active            { border-left-color: #7BAED4; }
:root[data-theme="dark"] .outline-item.current             { border-left-color: #7BAED4; }