/* ============================================================================
   ODE Vault — Obsidian Publish theme
   Site: https://publish.obsidian.md/odebros
   Ports the local callout color system (.obsidian/snippets/ode-theme.css) to the
   web and adds academic-textbook typography, palette, and layout polish.
   Edit this file, then re-Publish it from the Obsidian Publish dialog.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design tokens — fonts + palette (light default, dark override below)
   --------------------------------------------------------------------------- */
:root {
  --ode-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Cambria, Georgia, serif;
  --ode-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ode-mono: "SFMono-Regular", "JetBrains Mono", "Fira Code", ui-monospace,
              Menlo, Consolas, monospace;

  /* course identity: deep indigo of the phase-portrait logo */
  --ode-accent: #4338ca;
  --ode-accent-soft: #6366f1;

  /* reading measure */
  --file-line-width: 44rem;
  --font-text-size: 18px;
  --line-height-normal: 1.7;
}

/* Light theme -------------------------------------------------------------- */
body.theme-light {
  --background-primary: #fbfaf7;        /* warm paper */
  --background-primary-alt: #f4f2ec;
  --background-secondary: #f2efe8;
  --background-secondary-alt: #eae6dc;
  --background-modifier-border: #e3ddd0;
  --text-normal: #26221c;
  --text-muted: #5f584c;
  --text-faint: #928a7b;
  --text-accent: var(--ode-accent);
  --text-accent-hover: #3730a3;
  --interactive-accent: var(--ode-accent);
  --interactive-accent-hover: #3730a3;
  --text-on-accent: #ffffff;
  --h1-color: #1e1b34;
  --h2-color: #262244;
  --hr-color: #e3ddd0;
  --text-selection: #d9d6f0;
  --code-background: #f0ede4;
}

/* Dark theme --------------------------------------------------------------- */
body.theme-dark {
  --background-primary: #17161c;        /* deep slate-plum */
  --background-primary-alt: #1d1c24;
  --background-secondary: #1b1a21;
  --background-secondary-alt: #232230;
  --background-modifier-border: #2e2c3a;
  --text-normal: #e7e5ee;
  --text-muted: #a9a6b8;
  --text-faint: #726f83;
  --text-accent: #a5b4fc;
  --text-accent-hover: #c7d2fe;
  --interactive-accent: #6366f1;
  --interactive-accent-hover: #818cf8;
  --text-on-accent: #ffffff;
  --h1-color: #eceafd;
  --h2-color: #d7d4f0;
  --hr-color: #2e2c3a;
  --text-selection: #322f52;
  --code-background: #24222e;
}

/* ---------------------------------------------------------------------------
   2. Base typography & reading column
   --------------------------------------------------------------------------- */
.markdown-preview-view,
.markdown-rendered {
  font-family: var(--ode-serif);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  letter-spacing: 0.1px;
  color: var(--text-normal);
}
.markdown-preview-sizer { max-width: var(--file-line-width); }

/* Publish adds a filename H1 above the note's authored H1. Prefer the authored
   heading, but only when one exists so pages without a source H1 keep a title. */
.markdown-preview-sizer:has(.el-h1 > h1.publish-article-heading) h1.page-header {
  display: none;
}

.markdown-rendered p { margin: 0.9em 0; }

/* Headings — clean sans against serif body, with an accent rule under H1/H2 */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-family: var(--ode-sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.markdown-rendered h1 {
  font-size: 2.25em;
  margin: 0.2em 0 0.6em;
  padding-bottom: 0.25em;
  border-bottom: 3px solid var(--ode-accent);
}
.markdown-rendered h2 {
  font-size: 1.6em;
  margin-top: 1.8em;
  padding-bottom: 0.18em;
  border-bottom: 1px solid var(--background-modifier-border);
}
.markdown-rendered h3 { font-size: 1.28em; margin-top: 1.5em; color: var(--text-normal); }
.markdown-rendered h4 { font-size: 1.08em; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); }

.markdown-rendered strong { font-weight: 700; color: var(--text-normal); }
.markdown-rendered hr { border: none; border-top: 1px solid var(--hr-color); margin: 2em 0; }

/* Home: one dominant route plus three compact, learner-oriented tool cards. */
.markdown-preview-view:has(
  .el-h1 > h1[data-heading="ODE-1 · Course and Exam Prep"]
) .el-h2:has(> h2[data-heading="Quick tools"]) + .el-ul > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.markdown-preview-view:has(
  .el-h1 > h1[data-heading="ODE-1 · Course and Exam Prep"]
) .el-h2:has(> h2[data-heading="Quick tools"]) + .el-ul > ul > li {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--background-modifier-border);
  border-top: 3px solid var(--ode-accent-soft);
  border-radius: 10px;
  background: var(--background-primary-alt);
  font-family: var(--ode-sans);
  font-size: 0.92em;
  line-height: 1.5;
}
.markdown-preview-view:has(
  .el-h1 > h1[data-heading="ODE-1 · Course and Exam Prep"]
) .el-h2:has(> h2[data-heading="Quick tools"]) + .el-ul > ul > li > strong:first-child {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--h2-color);
}

/* ---------------------------------------------------------------------------
   3. Links
   --------------------------------------------------------------------------- */
.markdown-rendered a.internal-link,
.markdown-rendered a.external-link {
  color: var(--text-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  text-decoration-color: currentColor;
  border-bottom: 0;
  transition: color 0.12s ease, text-decoration-thickness 0.12s ease;
}
.markdown-rendered a.internal-link:hover,
.markdown-rendered a.external-link:hover {
  color: var(--text-accent-hover);
  text-decoration-thickness: 0.13em;
}
/* unresolved links shouldn't shout */
.markdown-rendered a.internal-link.is-unresolved { color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   4. Callout color system  (ported from ode-theme.css, extended for the web)
   Obsidian tints each callout from --callout-color automatically.
   --------------------------------------------------------------------------- */
.callout {
  --callout-radius: 10px;
  --callout-border-width: 0px;
  --callout-blend-mode: normal;
  border-left: 4px solid rgb(var(--callout-color));
  margin: 1.15em 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.callout-title { font-family: var(--ode-sans); font-size: 0.96em; padding: 2px 0; }
.markdown-rendered .callout-title-inner { color: var(--text-normal); }
.callout-content { font-size: 0.97em; }

.callout[data-callout="definition"] { --callout-color: 59, 130, 246;  --callout-icon: lucide-book-open; }
.callout[data-callout="theorem"]    { --callout-color: 168, 85, 247;  --callout-icon: lucide-sigma; }
.callout[data-callout="method"]     { --callout-color: 20, 184, 166;  --callout-icon: lucide-wrench; }
.callout[data-callout="approach"]   { --callout-color: 20, 184, 166;  --callout-icon: lucide-compass; }
.callout[data-callout="intuition"]  { --callout-color: 234, 179, 8;   --callout-icon: lucide-lightbulb; }
.callout[data-callout="trap"]       { --callout-color: 249, 115, 22;  --callout-icon: lucide-alert-triangle; }
.callout[data-callout="weakness"]   { --callout-color: 239, 68, 68;   --callout-icon: lucide-flame; }
.callout[data-callout="step"]       { --callout-color: 100, 116, 139; --callout-icon: lucide-footprints; }
.callout[data-callout="answer"]     { --callout-color: 34, 197, 94;   --callout-icon: lucide-check-circle; }
.callout[data-callout="checkpoint"] { --callout-color: 6, 182, 212;   --callout-icon: lucide-flag; }
.callout[data-callout="solution"]   { --callout-color: 16, 185, 129;  --callout-icon: lucide-notebook-pen; }
.callout[data-callout="example"]    { --callout-color: 14, 165, 233;   --callout-icon: lucide-flask-conical; }

/* the [!solution] wrapper: prominent container; nested steps get breathing room */
.callout[data-callout="solution"] .callout-title-inner { font-weight: 800; }
.callout[data-callout="solution"] .callout .callout { margin: 0.4em 0; }

/* traps & weakness read as alerts — bolder title, always-open emphasis */
.callout[data-callout="trap"] .callout-title-inner,
.callout[data-callout="weakness"] .callout-title-inner { font-weight: 800; }

/* answer block: gentle highlight so the final result pops */
.callout[data-callout="answer"] { background: rgba(34, 197, 94, 0.07); }

/* ---------------------------------------------------------------------------
   5. Solution steps — collapsed titles should read as a clean strategy outline
   --------------------------------------------------------------------------- */
.callout[data-callout="step"] {
  --callout-radius: 8px;
  box-shadow: none;
  border-left-width: 3px;
  margin: 0.5em 0;
}
.callout[data-callout="step"] .callout-title-inner { font-weight: 650; }
/* tighten consecutive collapsed steps into a list-like stack */
.callout[data-callout="step"].is-collapsed { margin: 0.28em 0; opacity: 0.92; }
.callout[data-callout="step"].is-collapsed:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   5b. Flashcards — collapsible [!flashcard] callouts styled as study cards.
       Click the question to reveal the answer. Works natively on Publish
       (no plugin needed); replaces the old #flashcards / "?" plain text.
   --------------------------------------------------------------------------- */
.callout[data-callout="flashcard"] {
  --callout-color: 139, 92, 246;            /* violet */
  --callout-icon: lucide-graduation-cap;
  --callout-radius: 14px;
  --callout-border-width: 0px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-left: 4px solid rgb(139, 92, 246);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.11), rgba(139, 92, 246, 0.035));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0.9em 0;
  padding: 2px 8px 4px;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.callout[data-callout="flashcard"]:hover {
  box-shadow: 0 7px 20px rgba(139, 92, 246, 0.20);
  transform: translateY(-1px);
}
.callout[data-callout="flashcard"] .callout-title {
  cursor: pointer;
  align-items: flex-start;
  padding: 8px 4px;
  font-family: var(--ode-serif);
  font-size: 1.04em;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-normal);
}
/* "tap to reveal" hint, only while collapsed */
.callout[data-callout="flashcard"].is-collapsed .callout-title::after {
  content: "reveal answer";
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--ode-sans);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(139, 92, 246);
  opacity: 0.8;
  white-space: nowrap;
  align-self: center;
}
/* answer panel */
.callout[data-callout="flashcard"] .callout-content {
  margin: 2px 4px 6px;
  padding: 12px 15px;
  border-top: 1px dashed rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.055);
  border-radius: 0 0 10px 10px;
}
.callout[data-callout="flashcard"] .callout-content > :first-child { margin-top: 0; }
.callout[data-callout="flashcard"] .callout-content::before {
  content: "Answer";
  display: block;
  font-family: var(--ode-sans);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(139, 92, 246);
  margin-bottom: 5px;
}

/* ---------------------------------------------------------------------------
   6. Math (MathJax) — breathing room, horizontal scroll for wide displays
   --------------------------------------------------------------------------- */
mjx-container[display="true"] {
  margin: 1.1em 0 !important;
  padding: 0.2em 0;
  overflow-x: auto;
  overflow-y: hidden;
}
mjx-container { font-size: 1.02em; }

/* ---------------------------------------------------------------------------
   7. Tables, code, blockquotes
   --------------------------------------------------------------------------- */
.markdown-rendered table {
  font-family: var(--ode-sans);
  font-size: 0.9em;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.markdown-rendered th {
  background: var(--background-secondary-alt);
  font-weight: 700;
  text-align: left;
}
.markdown-rendered th, .markdown-rendered td {
  border: 1px solid var(--background-modifier-border);
  padding: 7px 12px;
}
.markdown-rendered tr:nth-child(even) td { background: var(--background-primary-alt); }

.markdown-rendered code {
  font-family: var(--ode-mono);
  font-size: 0.88em;
  background: var(--code-background);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}
.markdown-rendered pre {
  background: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
}
.markdown-rendered blockquote {
  border-left: 3px solid var(--ode-accent-soft);
  color: var(--text-muted);
  font-style: italic;
}

/* inline tags (#flashcards, week/NN, theme/…) as soft pills */
.markdown-rendered a.tag {
  font-family: var(--ode-sans);
  font-size: 0.72em;
  background: var(--background-secondary-alt);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.12em 0.7em;
  text-decoration: none;
  border: none;
}
.markdown-rendered a.tag:hover { background: var(--ode-accent); color: #fff; }

/* ---------------------------------------------------------------------------
   8. Task checkboxes (Study Path / stage progress trackers)
   --------------------------------------------------------------------------- */
.markdown-rendered input[type="checkbox"] {
  width: 1.05em; height: 1.05em;
  accent-color: var(--ode-accent);
  margin-right: 0.5em;
  vertical-align: -2px;
}
.markdown-rendered input.task-list-item-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.markdown-rendered .task-list-item.is-checked {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.ode-web-progress-notice {
  font-family: var(--ode-sans);
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-left: 4px solid var(--ode-accent-soft);
  border-radius: 8px;
  margin: 1em 0;
  padding: 0.75em 0.9em;
}
.ode-web-progress-notice strong { color: var(--text-normal); }
.ode-cold-prompt {
  margin: 1em 0;
  padding: 0.75em 0.9em;
  border: 1px solid var(--background-modifier-border);
  border-left: 4px solid var(--ode-accent-soft);
  border-radius: 8px;
  background: var(--background-secondary);
  color: var(--text-muted);
  font-family: var(--ode-sans);
  font-size: 0.9em;
  line-height: 1.5;
}
.ode-cold-prompt strong { color: var(--text-normal); }
.callout-title[tabindex="-1"]:focus {
  outline: 2px solid var(--ode-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
.markdown-rendered :is(a, button, [role="button"], .callout-title[tabindex]):focus-visible,
#jr-continue:focus-visible,
#ode-steps-toggle:focus-visible,
#ode-sfx-toggle:focus-visible {
  outline: 3px solid var(--ode-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
.callout-title[role="button"]:focus-visible,
.callout-title[data-ode-earned-focus]:focus {
  outline: 3px solid var(--ode-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   9. Navigation sidebar + outline
   --------------------------------------------------------------------------- */
.site-body-left-column,
.site-body-right-column { font-family: var(--ode-sans); font-size: 0.88em; }

.nav-folder-title { font-weight: 700; color: var(--text-muted); letter-spacing: 0.01em; }
.tree-item-self { border-radius: 6px; }
.tree-item-self:hover { background: var(--background-secondary-alt); }
.tree-item-self.is-active,
.nav-file-title.is-active {
  background: var(--background-secondary-alt);
  box-shadow: inset 3px 0 0 var(--ode-accent);
  color: var(--text-accent);
  font-weight: 600;
}

/* site title / header */
.site-body-left-column .site-name,
.publish-site-name {
  font-family: var(--ode-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-normal);
}

/* ---------------------------------------------------------------------------
   10. Mermaid diagrams — center, pad, keep inside the column
   --------------------------------------------------------------------------- */
.markdown-rendered .mermaid {
  display: flex;
  justify-content: flex-start;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 10px;
  padding: 14px;
  margin: 1.4em 0;
  overflow-x: auto;
}
.markdown-rendered .mermaid svg { max-width: 100%; height: auto; }

/* embedded figures (matplotlib SVGs): center, frame, keep inside the column —
   modeled on the Mermaid block so figures read as first-class diagrams */
.markdown-rendered .internal-embed img,
.markdown-rendered .image-embed img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em auto;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 10px;
  padding: 12px;
}

/* ---------------------------------------------------------------------------
   11. Footer nav line (the 🧭 / 📈 lines) — quiet, sans, centered
   --------------------------------------------------------------------------- */
.markdown-rendered hr + p:last-child {
  font-family: var(--ode-sans);
  font-size: 0.86em;
  color: var(--text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   12. "Toggle all steps" button (injected by publish.js on solution pages)
   --------------------------------------------------------------------------- */
#ode-steps-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  font-family: var(--ode-sans);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--ode-accent);
  border: none;
  border-radius: 999px;
  padding: 0.6em 1.1em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.12s ease, transform 0.12s ease;
}
#ode-steps-toggle:hover { background: var(--interactive-accent-hover); transform: translateY(-1px); }
@media (max-width: 800px) {
  #ode-steps-toggle {
    right: calc(60px + env(safe-area-inset-right));
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 44px;
  }
  .markdown-preview-view {
    scroll-padding-bottom: 6rem;
  }
  .site-body-center-column .publish-renderer .markdown-preview-view > .markdown-preview-sizer,
  .publish-renderer .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: 6rem !important;
  }
}
@media (max-width: 360px) {
  #ode-steps-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
  }
  #ode-steps-toggle::after { content: "⤢"; font-size: 16px; }
  #ode-steps-toggle[aria-expanded="true"]::after { content: "⤡"; }
}

/* ---------------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  :root { --font-text-size: 17px; }
  .markdown-rendered h1 { font-size: 1.85em; }
  .markdown-rendered h2 { font-size: 1.4em; }
  .markdown-preview-view:has(
    .el-h1 > h1[data-heading="ODE-1 · Course and Exam Prep"]
  ) .el-h2:has(> h2[data-heading="Quick tools"]) + .el-ul > ul {
    grid-template-columns: 1fr;
  }
  .mcq-option,
  .srt-btn,
  .srt-reason,
  #jr-continue {
    min-height: 44px;
  }
}

/* ── step-MCQ (choices callouts) ─────────────────────────────────────────── */
.callout[data-callout="choices"] { --callout-color: 236, 72, 153; }
.callout[data-callout="choices"] .callout-title-inner {
  font-weight: 700;
  letter-spacing: 0.015em;
}
.callout[data-callout="choices"] .callout-content > ol { list-style: none; padding-left: 0; margin: 0; }
.mcq-option {
  cursor: pointer;
  font-family: var(--ode-sans);
  font-size: 0.95em;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 10px;
  padding: 9px 14px;
  margin: 8px 0;
  background: var(--background-primary-alt);
  transition: background .16s ease, border-color .16s ease,
              transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease;
}
.mcq-option:hover:not(.mcq-done) {
  background: rgba(236, 72, 153, .08);
  border-color: rgba(236, 72, 153, .6);
  transform: translateX(4px);
  box-shadow: -3px 0 0 rgba(236, 72, 153, .45);
}
.mcq-solved .mcq-option:hover:not(.mcq-done) { transform: none; box-shadow: none; }
.mcq-right {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, .13) !important;
  animation: mcq-pop .38s cubic-bezier(.34, 1.56, .64, 1);
}
.mcq-wrong {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, .10) !important;
  cursor: default;
  animation: none;
}
@keyframes mcq-pop   { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes mcq-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.mcq-why {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  font-size: .92em;
  transition: max-height .32s ease, opacity .32s ease, margin .32s ease;
}
.mcq-wrong .mcq-why { max-height: 8em; opacity: .88; margin: 6px 0 0; }
.mcq-solved .mcq-option:not(.mcq-done) { opacity: .68; cursor: default; }
.ode-mcq-status {
  margin: 0.65em 0 0;
  color: var(--text-muted);
  font-family: var(--ode-sans);
  font-size: 0.92em;
  font-weight: 600;
}
.ode-mcq-status:empty { display: none; }
.mcq-option:focus-visible,
#jr-continue:focus-visible,
#ode-steps-toggle:focus-visible {
  outline: 3px solid var(--ode-accent-soft);
  outline-offset: 3px;
}

/* ── mermaid diagrams: scroll sideways instead of clipping ─────────────────── */
/* wide graph LR diagrams (Course Timeline prereq maps) were clipped to the    */
/* container's left edge with no way to pan; let them keep natural width and   */
/* swipe/scroll horizontally (incl. touch devices).                            */
.markdown-preview-view .mermaid,
.markdown-rendered .mermaid {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
.markdown-preview-view .mermaid svg,
.markdown-rendered .mermaid svg {
  max-width: none;
  max-height: min(70vh, 36rem);
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin-inline: auto;
}

/* ── journey mode: staged reveal on solution pages ─────────────────────────── */
/* hidden-but-measurable (not display:none) so MathJax inside upcoming stages   */
/* typesets correctly before they're revealed.                                  */
.jr-hidden {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* stages materialize: fade up + sharpen */
.jr-in { animation: jr-reveal .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes jr-reveal {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: none;             filter: none; }
}

/* the trajectory spine: journey stages sit on an integral curve — each revealed
   stage gets a node dot (tinted by its callout color) and a segment tracing the
   flow down the left gutter. Wide screens only; the reading column needs the
   gutter to exist. */
@media (min-width: 980px) {
  .markdown-rendered .callout[data-jr] { position: relative; }
  .markdown-rendered .callout[data-jr]:not(.jr-hidden)::after {
    content: "";
    position: absolute;
    left: -26px;
    top: 15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--background-primary);
    border: 2px solid rgb(var(--callout-color));
    z-index: 1;
  }
  .markdown-rendered .callout[data-jr]:not(.jr-hidden)::before {
    content: "";
    position: absolute;
    left: -21px;
    top: -1.3em;
    height: calc(1.3em + 15px);
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--ode-accent-soft) 55%);
    opacity: .55;
  }
}

/* the Continue pill: the current point on the trajectory, breathing indigo */
#jr-continue {
  display: block;
  margin: 20px auto;
  padding: 0.7em 1.7em;
  border: none;
  border-radius: 999px;
  font-family: var(--ode-sans);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--ode-accent), var(--ode-accent-soft));
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, .30);
  animation: jr-breathe 2.8s ease-in-out infinite;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1), box-shadow .14s ease;
}
#jr-continue:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, .45); }
#jr-continue:active { transform: scale(.97); }
@keyframes jr-breathe {
  0%, 100% { box-shadow: 0 4px 14px rgba(99, 102, 241, .28); }
  50%      { box-shadow: 0 4px 24px rgba(99, 102, 241, .50); }
}

/* stillness for those who ask for it */
@media (prefers-reduced-motion: reduce) {
  .jr-in, .mcq-right, .mcq-wrong, #jr-continue { animation: none !important; }
  .mcq-option, .mcq-why, #jr-continue, .callout[data-callout="flashcard"] { transition: none !important; }
}

/* ── game juice: confetti + sound toggle ───────────────────────────────────── */
.jr-confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  z-index: 99;
  pointer-events: none;
  animation: jr-confetti-toss 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes jr-confetti-toss {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}
#ode-sfx-toggle {
  position: fixed;
  right: 20px;
  bottom: 64px;
  z-index: 50;
  font-size: 1em;
  background: var(--background-secondary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  width: 2.4em;
  height: 2.4em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  transition: transform .12s ease;
}
#ode-sfx-toggle:hover { transform: translateY(-1px); }
@media (max-width: 800px) {
  #ode-sfx-toggle {
    right: calc(8px + env(safe-area-inset-right));
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}

/* ── example-sorter ([!sorter] callouts) ───────────────────────────────────── */
.callout[data-callout="sorter"] { --callout-color: 132, 204, 22; --callout-icon: lucide-list-checks; }
.callout[data-callout="sorter"] .callout-title-inner { font-weight: 700; letter-spacing: 0.015em; }
.callout[data-callout="sorter"] .callout-content > ol { list-style: none; padding-left: 0; margin: 0; }
.srt-item {
  font-family: var(--ode-sans);
  font-size: 0.95em;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--background-primary-alt);
  transition: border-color .16s ease;
}
.srt-missed { border-left: 3px solid #ef4444; }
.srt-bar { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.srt-btn {
  font-family: var(--ode-sans);
  font-size: 0.88em;
  font-weight: 600;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary-alt);
  color: var(--text-normal);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s cubic-bezier(.22, 1, .36, 1);
}
.srt-btn:hover { transform: translateY(-1px); border-color: rgba(132, 204, 22, .6); }
.srt-done .srt-btn { cursor: default; }
.srt-done .srt-btn:hover { transform: none; }
.srt-right { border-color: #22c55e !important; background: rgba(34, 197, 94, .15) !important;
  animation: mcq-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
.srt-wrong {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, .12) !important;
  animation: none;
}
.srt-truth { border-color: #22c55e !important; box-shadow: 0 0 0 1px rgba(34, 197, 94, .5); }
.callout[data-srt] .srt-reasons:not([data-armed]) { display: none; }
.srt-reasons[data-armed] { list-style: none; padding-left: 0; margin: 8px 0 0; }
.srt-reason {
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 8px;
  padding: 7px 12px;
  margin: 6px 0;
  transition: background .14s ease, border-color .14s ease;
}
.srt-reason:hover:not(.mcq-done) { background: rgba(132, 204, 22, .08); border-color: rgba(132, 204, 22, .6); }
.srt-why-label {
  font-family: var(--ode-sans);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(132, 204, 22);
  margin-top: 8px;
}
.srt-btn:focus-visible, .srt-reason:focus-visible { outline: 3px solid var(--ode-accent-soft); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .srt-right, .srt-wrong { animation: none !important; } }