/*
 * UI Friction Fix Pack v1.2.3 (originated 2026-06-17, extracted from
 * style.css EOF in Phase 1 #3, PR #21).
 * Issues fixed: page-flip discoverability, equation overflow,
 * Quick-Check legibility, completion indicators.
 * Loaded by app/index.html via classic <link>; cascade order matters,
 * keep this <link> AFTER style.css so the overrides remain authoritative.
 */

/* --- Issue 1: Single, discoverable lesson pager --- */
#learnExplainPager {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 6px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.16),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  font-family: 'Quicksand', 'Nunito', sans-serif;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}
#learnExplainPager.hidden { display: none !important; }
#learnExplainPager .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(248, 250, 252, 0.76);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 10px;
  color: #1E293B;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    transform 0.12s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
  letter-spacing: 0px;
  white-space: nowrap;
  font-family: inherit;
}
#learnExplainPager .pager-prev { min-width: 86px; }
#learnExplainPager .pager-next { min-width: 128px; }
#learnExplainPager .pager-btn:hover:not(:disabled) {
  background: rgba(236, 254, 255, 0.88);
  border-color: rgba(8, 145, 178, 0.46);
  color: #0E7490;
  box-shadow:
    0 6px 14px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
#learnExplainPager .pager-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
#learnExplainPager .pager-btn:focus-visible {
  outline: 3px solid rgba(8, 145, 178, 0.42);
  outline-offset: 2px;
}
#learnExplainPager .pager-btn:disabled {
  background: rgba(241, 245, 249, 0.56);
  color: #94A3B8;
  cursor: default;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: none;
  opacity: 0.72;
}
#learnExplainPager .pager-btn.is-next-topic {
  background: rgba(236, 253, 245, 0.86);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.32);
  box-shadow:
    0 4px 12px rgba(5, 150, 105, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
#learnExplainPager .pager-btn.is-next-topic:hover:not(:disabled) {
  background: rgba(209, 250, 229, 0.92);
  border-color: rgba(5, 150, 105, 0.52);
  color: #065F46;
}
#learnExplainPager .pager-position {
  min-width: 54px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  text-align: center;
  letter-spacing: 0px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#learnView .learn-body.chapter-overview-active #learnExplainPager,
#learnView .learn-body.chapter-overview-split-active #learnExplainPager { display: none !important; }

/* Reserve room above the pager so content doesn't slide under it — but only
 * in lesson mode, where the pager actually shows. In chapter-overview modes
 * the pager is hidden and the extra padding would leave dead space. */
#learnView .learn-body:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll {
  padding-bottom: 130px;
}

@media (max-width: 640px) {
  #learnExplainPager {
    bottom: 10px;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 5px;
    border-radius: 14px;
  }

  #learnExplainPager .pager-btn {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 13px;
  }

  #learnExplainPager .pager-prev { min-width: 76px; }
  #learnExplainPager .pager-next { min-width: 112px; }
  #learnExplainPager .pager-position {
    min-width: 48px;
    font-size: 12px;
  }
}

@container lecture-panel (max-width: 279px) {
  #learnExplainPager {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #learnExplainPager,
  #learnExplainPager .pager-btn {
    transition: none;
  }
}

/* --- Issue 6: Make overflowing equations scrollable --- */
#learnView .learn-explain-body mjx-container,
#learnView .learn-explain-body .MathJax,
#learnView .learn-explain-body .math-block,
#kcModal mjx-container,
#kcModal .MathJax,
#kcModal .math-block {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
}
#learnView .learn-explain-body mjx-container[display="true"],
#learnView .learn-explain-body .math-block {
  display: block !important;
  padding-bottom: 4px !important;
}
#learnView .learn-explain-body mjx-container::-webkit-scrollbar,
#kcModal mjx-container::-webkit-scrollbar {
  height: 6px;
}
#learnView .learn-explain-body mjx-container::-webkit-scrollbar-thumb,
#kcModal mjx-container::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
/* Tables and pre-formatted long content too */
#learnView .learn-explain-body table,
#learnView .learn-explain-body pre {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* --- Issue 7: Quick Check legibility ---
 * Use container-level rules so MathJax can scale glyphs from the inherited
 * font-size. The previous `#kcQuestion *` selector at !important stomped
 * every nested span and broke math glyph metrics. */
#kcModal #kcQuestion {
  font-size: 18px;
  line-height: 1.75;
}
#kcModal #kcQuestion mjx-container {
  font-size: 1.15em !important;
}
#kcModal #kcOptions .kc-option-btn {
  font-size: 16px;
  line-height: 1.7;
  padding: 14px 16px;
}
#kcModal #kcOptions .kc-option-btn mjx-container {
  font-size: 1.1em !important;
}
#kcModal #kcAnswer {
  font-size: 16px;
  line-height: 1.75;
}
#kcModal #kcAnswer mjx-container {
  font-size: 1.1em !important;
}
#kcModal #kcHint {
  font-size: 15px;
}
#kcModal #kcAnswerInput,
#kcModal #kcAskInput {
  font-size: 16px;
}

/* --- Issue 8: Quick Check "Next" button states (formerly inline styles) ---
   "finish" reuses the button's inline default (green); only "continue" overrides. */
#kcModal #kcNextBtn[data-kc-end-state="continue"] {
  background: #38BDF8;
  border-color: #0284C7;
  box-shadow: 0 4px 0px #0284C7;
}

/* --- Issue 5: Completion indicators in syllabus --- */
.syllabus-subsection.is-completed::before,
.syllabus-section.is-completed::before,
.syllabus-chapter.is-completed::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: #10B981;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 0 #059669;
  vertical-align: middle;
}
.syllabus-subsection.is-completed,
.syllabus-section.is-completed {
  color: #047857 !important;
}
.syllabus-chapter.is-completed > span:last-child {
  color: #047857;
}
.syllabus-section.is-completed {
  background: linear-gradient(to right, rgba(16,185,129,0.08), transparent 60%);
}
.syllabus-chapter .chapter-progress {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #047857;
  background: #ECFDF5;
  border: 1.5px solid #6EE7B7;
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.syllabus-chapter .chapter-progress.is-done {
  background: #10B981;
  color: #FFFFFF;
  border-color: #059669;
}