/* ============================================================
   Slide Solution — tokens lifted from Figma
   file ceSOMUUnvT4WMzid5itkF4 / node 11130-68472
   ============================================================ */

:root {
  /* scale */
  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 10px; --sp-6: 12px;
  --sp-8: 16px; --sp-11: 24px;
  --r-sm: 12px; --r-base: 16px; --r-full: 1000px;

  /* brand — identical in both themes */
  --brand: #0f99fa;              /* Event/mental ability */
  --primary: #0266da;            /* Allen primary / CTA */
  --ok: #00875e;
  --ok-fill: #c3e7dc;
  --warn: #e8900e;
  --warn-fill: #ffe7c5;
}

[data-theme="light"] {
  --bg: #ffffff;                 /* Background/secondary */
  --bg-alt: #f7f9ff;             /* Background/tertiary */
  --surface: #ffffff;            /* Fill/tertiary-subtle */
  --title: #1e1e22;              /* Typography/default-title */
  --body: #1e1e22;
  --muted: #6a6b70;
  --icon: #494a4a;               /* Icons/default-active */
  --border: #c6c8cc;             /* Border/mute-active */
  --border-soft: #e4e5e8;
  --inactive: #dcdcdc;           /* Border/inactive */
  --play-fill: #d5e8ff;          /* Fill/secondary-active */
  --sheer-10: rgba(15, 15, 15, 0.10);
  --sheer-20: rgba(15, 15, 15, 0.20);

  --active-fill: rgba(15, 153, 250, 0.10);
  --active-border: rgba(15, 153, 250, 0.40);
  /* the same tint pre-blended against the page, for surfaces that sit over
     content and must not let it read through */
  --active-fill-solid: #e7f4fe;

  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-shadow: 0 4px 10px rgba(82, 101, 122, 0.15);
  --glass-inner: inset 0 -4px 10px rgba(255, 255, 255, 0.40);
  --pop-shadow: 0 8px 28px rgba(82, 101, 122, 0.22);
  --opt-shadow: 0 2px 5px rgba(82, 101, 122, 0.16);

  --fade-0: rgba(255, 255, 255, 0);
  --fade-60: rgba(255, 255, 255, 0.6);
  --fade-90: rgba(255, 255, 255, 0.9);
  --fade-100: #ffffff;

  --pulse-a: rgba(15, 153, 250, 0.52);
  --pulse-b: rgba(2, 102, 218, 0.38);
  --chat-bubble: #edeff2;
}

[data-theme="dark"] {
  --bg: #171717;                 /* Background/tertiary */
  --bg-alt: #212121;             /* Background/secondary */
  --surface: #212121;            /* Fill/tertiary-subtle */
  --title: #ffffff;
  --body: #e7e8ea;
  --muted: #9a9c9f;
  --icon: #ffffff;
  --border: #424547;             /* Border/mute-active */
  --border-soft: #2c2f31;
  --inactive: #3a3d3f;
  --play-fill: #2e3357;          /* Fill/secondary-active */
  --sheer-10: rgba(237, 242, 250, 0.10);
  --sheer-20: rgba(237, 242, 250, 0.20);

  --active-fill: rgba(15, 153, 250, 0.10);
  --active-border: rgba(15, 153, 250, 0.40);
  --active-fill-solid: #16242e;

  --glass-bg: rgba(33, 38, 44, 0.82);
  --glass-border: rgba(138, 152, 168, 0.55);
  --glass-shadow: 0 4px 10px rgba(0, 0, 0, 0.40);
  --glass-inner: inset 0 -4px 10px rgba(255, 255, 255, 0.08);
  --pop-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --opt-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);

  --fade-0: rgba(23, 23, 23, 0);
  --fade-60: rgba(23, 23, 23, 0.6);
  --fade-90: rgba(23, 23, 23, 0.9);
  --fade-100: #171717;

  --pulse-a: rgba(15, 153, 250, 0.50);
  --pulse-b: rgba(88, 96, 220, 0.44);
  --chat-bubble: #2a2b2d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  /* Plus Jakarta Sans has no Devanagari — Noto covers हिंदी and the
     Devanagari runs inside Hinglish strings */
  font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: #2f3033;
  color: #fff;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------- stage ---------- */
.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 16px 36px;
}

.stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #b9bbbf;
}

.seg {
  display: flex;
  background: #3a3c40;
  border-radius: var(--r-full);
  padding: 3px;
}
.seg button {
  padding: 5px 13px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: #b9bbbf;
  transition: background 160ms ease, color 160ms ease;
}
.seg button[data-on="true"] { background: #fff; color: #1e1e22; }

.ghost-btn {
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: #b9bbbf;
  border: 1px solid #4b4d51;
  transition: border-color 160ms ease, color 160ms ease;
}
.ghost-btn:hover { color: #fff; border-color: #6d7075; }

/* ---------- phone ---------- */
.phone {
  position: relative;
  width: 360px;
  height: 800px;
  border-radius: 38px;
  background: var(--bg);
  color: var(--body);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 9px #101113, 0 0 0 10px #3d4045;
  isolation: isolate;
  font-size: 14px;
  line-height: 22px;
  user-select: none;
}

/* ---------- status bar ---------- */
.statusbar {
  position: relative;
  z-index: 6;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 26px;
  font-size: 14px;
  font-weight: 700;
  color: var(--title);
  letter-spacing: -0.01em;
  flex: none;
}
.statusbar .glyphs { display: flex; align-items: center; gap: 5px; }

/* ---------- home indicator ---------- */
.home-ind {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: var(--title);
  opacity: 0.85;
  z-index: 40;
  pointer-events: none;
}

/* ---------- shared bits ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  height: 32px;
  min-width: 30px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--title);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  color: var(--icon);
}

.divider { height: 1px; background: var(--border); opacity: 0.5; }

/* ---------- step page ---------- */
.page {
  position: absolute;
  inset: 0;
  padding: 0 var(--sp-8) 120px;
  will-change: transform;
}

/* ---------- voice pulse ----------
   Anchored to the BOTTOM of the view, behind the action bar.
   z-index 9 puts it above the bottom fade (8) — below it, the fade's wash to
   the page background would erase it completely. It carries no base gradient
   of its own for the same reason: the fade already does that job here. */
.voicetint {
  position: absolute;
  inset: auto 0 0 0;
  height: 190px;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

/* Blob centres sit just above the bottom edge, not far below it. Pushed
   further out, only the faint outer tail of each gradient is on screen and
   the pulse goes invisible however high the opacity climbs — geometry first,
   amplitude second. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  will-change: transform, opacity;
}
.blob.b1 {
  left: -50px; bottom: -80px;
  width: 260px; height: 200px;          /* centre ≈ 20px up from the bottom */
  background: radial-gradient(ellipse at center, var(--pulse-a) 0%, transparent 68%);
}
.blob.b2 {
  left: 110px; bottom: -95px;
  width: 290px; height: 220px;          /* centre ≈ 15px up */
  background: radial-gradient(ellipse at center, var(--pulse-b) 0%, transparent 68%);
}
.blob.b3 {
  left: 30px; bottom: -30px;
  width: 300px; height: 150px;          /* centre ≈ 45px up */
  background: radial-gradient(ellipse at center, var(--pulse-a) 0%, transparent 70%);
}

.scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- typography ---------- */
.t-lg   { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--title); }
.t-base { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--title); }
.b-base { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--body); }
.b-sm   { font-size: 12px; line-height: 18px; font-weight: 600; }

.rich p { margin: 0; }
.rich ul, .rich ol { margin: 0; padding-left: 20px; }
.rich li { margin: 0; }
.rich > * + * { margin-top: 2px; }

/* ---------- rendered markdown + katex ---------- */
.sec-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--title);
  margin-bottom: 8px;
}

.md { font-size: 14px; line-height: 22px; color: var(--body); }
.md > * + * { margin-top: 8px; }
.md p { margin: 0; }
.md ul, .md ol { margin: 0; padding-left: 20px; }
.md li { margin: 0; }
.md li + li { margin-top: 2px; }
.md strong { font-weight: 700; color: var(--title); }
.md .md-h3 { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--title); }
.md .md-h4 { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--title); }
.md .md-block { margin: 12px 0; overflow-x: auto; overflow-y: hidden; }
.md.tight { font-size: 13px; line-height: 19px; }
.md.tight > * + * { margin-top: 4px; }

/* section break in a long text answer */
.md .md-hr {
  height: 1px;
  border: 0;
  background: var(--border);
  opacity: 0.5;
  margin: 18px 0;
}

/* callout — the final answer in Allie's text response.
   Needs real space above and below: it's a filled surface, so the 8px the
   generic `* + *` rule gives left it butting against the next paragraph. */
.md .md-quote {
  margin: var(--sp-8) 0;
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-alt);
}
.md .md-quote > * + * { margin-top: 6px; }
.md .md-quote .md-block { margin: 0; text-align: left; }
.md .md-quote .katex-display > .katex { text-align: left; }

/* KaTeX inherits our colour and never widens the page */
.katex { color: var(--title); font-size: 1.02em; }
.katex-display { margin: 0; }
.katex-display > .katex { white-space: nowrap; }
.md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.katex .boxed, .katex .fbox { border-color: currentColor; }

/* ---------- boxed-text ----------
   The Figma treats a worked-calculation block as plain centred content
   sitting between the section hairlines — no surface, no border, no card.
   Each boxed-text is its own section, so the divider logic already draws
   those rules. This stays a bare wrapper on purpose. */
.boxed > .md > *:first-child { margin-top: 0; }
.boxed .md-block { margin: 10px 0; }
/* The Figma recap frame shows the final answer in the brand blue, so the
   \boxed{} the content wraps it in takes the accent rather than a hard rule.
   Scoped to the answer line only — the first paragraph — so the working in
   the recap below it stays default body colour. */
.boxed[data-variant="success"] .md > p:first-child .fbox { border-color: var(--primary); }
.boxed[data-variant="success"] .md > p:first-child .katex { color: var(--primary); }

/* ---------- checkpoint options ---------- */
.opt {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1.5px solid transparent;
  box-shadow: var(--opt-shadow);
  font-size: 14px;
  line-height: 20px;
  color: var(--title);
}
.opt[data-state="correct"] { background: var(--ok-fill); border-color: var(--ok); color: #10241d; }
.opt[data-state="wrong"]   { background: var(--warn-fill); border-color: var(--warn); color: #2b1e08; }
.opt[data-state="correct"] .katex,
.opt[data-state="wrong"] .katex { color: inherit; }

.opt-badge {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}

.cta {
  width: 100%;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- mcq card ----------
   One card recipe for both the inline "Solve this to continue" checkpoint
   and the end-of-solution practice question, so they're visually identical.
   Colour is NOT set here — it's driven by the `animate` prop on the Quiz
   component (CARD_OFF/CARD_ON in app.jsx): neutral bg-alt/border-soft at
   rest, the same blue as the section highlight while its owning section is
   the one currently active. This is structure only. */
.mcq-card {
  /* the practice card is a surface of its own — two card edges
     must never touch */
  margin-top: var(--sp-11);
  padding: 24px 16px;
  border-radius: var(--r-base);
  border: 1px solid transparent;
}
.hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--primary);
  flex: none;
}
.hint { margin: 10px 0 14px; padding-left: 12px; border-left: 2px solid var(--primary); }

/* ---------- L0 doubt list ---------- */
.doubt-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-base);
  padding: 16px;
  box-shadow: var(--opt-shadow);
}
.doubt-card + .doubt-card { margin-top: 12px; }

.doubt-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.doubt-chip {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--play-fill);
  color: var(--primary);
}
.doubt-q { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--title); }
.doubt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.doubt-blurb { font-size: 12px; line-height: 18px; color: var(--muted); }
.doubt-go {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  padding-left: 2px;
}

/* ---------- action bar ---------- */
.actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 328px;
  height: 52px;
  padding: 8px;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- popovers / sheet ---------- */
.pop {
  position: absolute;
  z-index: 34;
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
  transform-origin: var(--pop-origin, bottom left);
}
.pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--title);
  text-align: left;
}
.pop-row + .pop-row { border-top: 1px solid var(--border-soft); }

.radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  flex: none;
}
.radio[data-on="true"] { border-color: var(--primary); border-width: 2px; }
.radio[data-on="true"]::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

.scrim { position: absolute; inset: 0; background: rgba(15, 20, 28, 0.42); z-index: 30; }

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 33;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 10px 0 34px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}
.grabber { width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 10px; }

.step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--title);
  border-radius: var(--r-sm);
}
.step-row[data-cur="true"] { background: var(--active-fill); }
.step-row .n { min-width: 16px; }

/* ---------- coachmark ---------- */
.coach {
  position: absolute;
  z-index: 40;
  width: 328px;
  background: #232427;
  color: #fff;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.coach .txt { font-size: 13px; line-height: 19px; }
.coach .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.coach .pos { font-size: 12px; font-weight: 600; color: #b9bbbf; }
.coach .next {
  padding: 7px 18px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.coach .beak {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #232427;
  transform: rotate(45deg);
}

/* ---------- waveform ---------- */
.wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.wave i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: var(--primary);
  animation: bar 900ms ease-in-out infinite;
}
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; height: 9px; }
}

/* fit the 800px device on short screens without breaking hit-testing */
.phone { transform-origin: top center; }
@media (max-height: 940px) { .phone { transform: scale(0.92); margin-bottom: -64px; } }
@media (max-height: 860px) { .phone { transform: scale(0.84); margin-bottom: -128px; } }
@media (max-height: 780px) { .phone { transform: scale(0.76); margin-bottom: -192px; } }
@media (max-height: 700px) { .phone { transform: scale(0.68); margin-bottom: -256px; } }