/* ============================================================================
   LearnQuiz styles — shared by formula detail ("Learn") pages.
   ============================================================================ */
.lq-bank {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.1rem 1.2rem; margin: 1.2rem 0;
}
.lq-bank h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.lq-blurb { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.8rem; }
.lq-progress { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.4rem; }
.lq-q { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.8rem; }
.lq-opts { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; }
.lq-opt {
  text-align: left; font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--parchment);
  color: var(--ink); cursor: pointer; min-height: 48px;
}
.lq-opt:hover:not(:disabled) { border-color: var(--gold); }
.lq-opt:disabled { cursor: default; opacity: 0.95; }
.lq-opt.lq-right { border-color: #4a7c59; background: #e9f2ea; color: #234d2e; font-weight: 600; }
.lq-opt.lq-wrong { border-color: #b0563f; background: #f7e9e4; color: #7a3222; }
.lq-feedback {
  border-left: 4px solid var(--violet); background: var(--gold-soft);
  border-radius: 0 10px 10px 0; padding: 0.8rem 1rem; margin-top: 0.4rem;
}
.lq-feedback p { margin: 0 0 0.5rem; }
.lq-score { font-size: 1.25rem; }
.lq-done .btn { margin-top: 0.4rem; }

/* Detail-page lesson styles */
.learn-hero {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.4rem 1.3rem; margin: 1rem 0 1.4rem; text-align: center;
}
.learn-hero .learn-crumb { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.learn-hero .learn-crumb a { color: var(--violet); }
.learn-formula {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3rem); margin: 0.4rem 0; color: var(--ink);
}
.learn-tagline { font-size: 1.05rem; color: var(--ink-soft); margin: 0.3rem 0 0; font-style: italic; }
.learn-steps { counter-reset: step; list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.7rem; }
.learn-steps li {
  counter-increment: step; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.75rem 0.9rem 0.75rem 3rem; position: relative;
}
.learn-steps li::before {
  content: counter(step); position: absolute; left: 0.9rem; top: 0.75rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--violet);
  color: #fff; font-size: 0.85rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center;
}
.learn-example {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.9rem 1rem; margin: 0.8rem 0;
}
.learn-example h4 { margin: 0 0 0.4rem; font-size: 1.02rem; color: var(--violet); }
.learn-example p { margin: 0.35rem 0; }
.learn-answer { font-weight: 700; }
.learn-tips { margin: 0.6rem 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }

/* ---- Math display styles (v2 template): centered display equations, ----
   aligned derivation steps, mistake callouts. Shared by Learn pages. */
.math-block {
  text-align: center; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem; font-weight: 700; color: var(--ink);
  margin: 1rem 0; padding: 0.7rem 0.5rem; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.math-block .math-sub { display: block; font-size: 0.95rem; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-top: 0.3rem; font-family: inherit; }
/* Say-it verbalizations also appear under .learn-formula heroes — same treatment. */
.learn-formula .math-sub { display: block; font-size: 1rem; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-top: 0.35rem; font-family: inherit; }
.math-deriv { display: grid; gap: 0.15rem; margin: 1rem 0; overflow-x: auto; padding: 0.2rem; }
.md-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 0.7rem; align-items: baseline; min-width: 34rem; }
.md-lhs {
  text-align: right; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.md-eq { text-align: center; color: var(--ink-soft); font-size: 1.1rem; }
.md-rhs {
  text-align: left; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.md-note {
  grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-soft);
  border-left: 3px solid var(--gold); padding: 0.15rem 0 0.15rem 0.7rem; margin: 0.15rem 0 0.6rem;
}
.md-note strong { color: var(--ink); }
.learn-mistake {
  border-left: 4px solid #b0563f; background: #f7e9e4; color: #6e2c1d;
  border-radius: 0 10px 10px 0; padding: 0.7rem 1rem; margin: 0.7rem 0; font-size: 0.95rem;
}
.learn-mistake strong { color: #7a3222; }
.learn-quiz-mount { margin-top: 1rem; }
.learn-quiz-mount:empty { display: none; }

/* ---- mobile: never let math slide under the frame ----
   The derivation grid's desktop min-width + nowrap forces horizontal
   overflow on phones, where it disappears under the frame art (z-index 5)
   with no scroll affordance. On small screens the grid wraps instead. */
@media (max-width: 700px) {
  .math-deriv { overflow-x: visible; }
  .md-row { min-width: 0; grid-template-columns: auto auto 1fr; gap: 0 0.4rem; }
  .md-lhs, .md-rhs { white-space: normal; overflow-wrap: anywhere; font-size: 1.02rem; }
  .md-eq { font-size: 1rem; }
  .math-block { font-size: 1.12rem; overflow-x: visible; }
}

/* ---- W5: Calc I teaching-upgrade styles (prediction callouts, notation
   boxes, your-turn checks, learned toggle, prerequisites). Appended only —
   existing rules above are untouched. ---- */
.learn-predict {
  border-left: 4px solid var(--violet); background: var(--surface);
  border-radius: 0 10px 10px 0; padding: 0.7rem 1rem; margin: 0.7rem 0; font-size: 0.95rem;
}
.learn-predict strong { color: var(--ink); }
.learn-notation {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.9rem 1rem; margin: 0.8rem 0;
}
.learn-notation h4 { margin: 0 0 0.4rem; font-size: 1.02rem; color: var(--violet); }
.learn-notation dl { margin: 0; }
.learn-notation dl > div { display: flex; gap: 0.6rem; padding: 0.35rem 0; border-top: 1px dashed var(--border); }
.learn-notation dl > div:first-child { border-top: 0; padding-top: 0; }
.learn-notation dt { font-weight: 700; min-width: 6.5rem; flex: 0 0 auto; }
.learn-notation dd { margin: 0; min-width: 0; }
details.learn-yourturn, .learn-yourturn details {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem 1rem; margin: 0.8rem 0;
}
.learn-yourturn summary { font-weight: 700; cursor: pointer; color: var(--ink); }
.learn-yourturn summary:hover { color: var(--violet); }
.learn-done-btn {
  font: inherit; font-weight: 700; min-height: 44px; width: 100%; max-width: 22rem;
  padding: 0.7rem 1.3rem; border: 1px solid var(--gold); border-radius: 10px;
  background: var(--gold-soft); color: var(--ink); cursor: pointer;
}
.learn-done-btn:hover { border-color: var(--violet); }
.learn-done-btn[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.learn-prereq { font-size: 0.88rem; color: var(--ink-soft); margin: 0.4rem 0; }
.learn-prereq a { color: var(--violet); }
@media (max-width: 700px) {
  .learn-notation dl > div { gap: 0.4rem; }
  .learn-notation dt { min-width: 5rem; }
  .learn-done-btn { max-width: none; }
}