/* =====================================================================
   Jyotish Shastra — course shell styles
   Inherits FOW dark theme variables from ../../learn/style.css
   ===================================================================== */

/* ── layout ── */
.course-shell {
  display: flex;
  min-height: calc(100vh - 46px);
}

/* ── sidebar ── */
.course-sidebar {
  width: 280px;
  min-width: 220px;
  max-width: 320px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 46px;
  height: calc(100vh - 46px);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.course-sidebar::-webkit-scrollbar { width: 4px; }
.course-sidebar::-webkit-scrollbar-track { background: transparent; }
.course-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── phase tabs ── */
.phase-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.phase-tab {
  flex: 1; padding: 9px 3px; font-size: 10px; font-weight: 700;
  text-align: center; cursor: pointer; border: none; background: none;
  color: var(--muted); font-family: inherit; letter-spacing: .02em;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  appearance: none; -webkit-appearance: none;
}
.phase-tab:hover { color: var(--text); }
.phase-tab.active { color: var(--phase-col); border-bottom-color: var(--phase-col); }

/* ── sidebar: modules ── */
.course-module {
  border-bottom: 1px solid var(--border);
}
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.module-header:hover { background: var(--panel2); }
.mod-count { font-size: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.mod-caret { display: inline-block; transition: transform .2s; }
.course-module.collapsed .mod-caret { transform: rotate(-90deg); }
.course-module.collapsed .module-lessons { display: none; }

/* ── lesson items ── */
.lesson-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 24px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background .1s, color .1s;
  border-left: 3px solid transparent;
}
.lesson-item:hover { background: var(--panel2); color: var(--text); }
.lesson-item.active {
  background: rgba(232,137,12,.08);
  color: #E8890C;
  border-left-color: #E8890C;
  font-weight: 600;
}
.lesson-item.done { color: var(--text); }
.done-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.lesson-item.done .done-dot { background: var(--green); border-color: var(--green); }
.lesson-item.active .done-dot { border-color: #E8890C; }
.lesson-item.done.active .done-dot { background: var(--green); }
.lesson-title { flex: 1; line-height: 1.4; }
.lesson-mins { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ── main content ── */
.course-main {
  flex: 1;
  /* min-width:0 overrides the flex item default of min-width:auto, which
     refuses to shrink a flex item below its content's intrinsic width. Lesson
     visuals are hand-authored fixed-width layouts (2-column grids up to
     720px, chart diagrams with fixed px sizing) — without this, course-main
     grew to fit them and pushed the WHOLE PAGE into horizontal scroll on
     narrow phones. .lesson-visual already clips its own preview with
     overflow:hidden, so this doesn't change what's visible — it stops the
     overflow from escaping past that box in the first place.
     Confirmed live at 375px: page scrollWidth 420 -> 375 with this rule. */
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background: var(--bg);
}

/* ── lesson sections ── */
.lesson-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  line-height: 1.7;
  color: var(--text);
  font-size: 15px;
}
.lesson-visual {
  padding: 0;
  overflow: hidden;
}
.gotcha-box {
  border-color: var(--orange);
  background: rgba(242,169,59,.05);
}

/* ── Sanskrit/Devanagari text ── */
.sa-text {
  font-family: "Noto Sans Devanagari", "Mangal", "Kokila", system-ui, sans-serif;
  line-height: 1.9;
}
.sloka-block {
  font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
  font-size: 1.05em;
  line-height: 2;
  color: #E8890C;
  padding: 16px 20px;
  border-left: 3px solid #E8890C;
  background: rgba(232,137,12,.06);
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}

/* ── attribution footer ── */
.lesson-attribution {
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.lesson-attribution a { color: var(--muted); text-decoration: underline; }

/* ── quiz ── */
.quiz-wrapper { margin: 0; }
.quiz-block { padding: 0; }
.quiz-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.5;
}
.quiz-options { display: grid; gap: 8px; margin-bottom: 12px; }
.quiz-opt {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .15s, background .15s;
}
.quiz-opt:hover:not(:disabled) { border-color: #E8890C; background: var(--panel); }
.quiz-opt.correct { border-color: var(--green) !important; background: #0d2a18 !important; color: var(--green) !important; }
.quiz-opt.wrong   { border-color: var(--red)   !important; background: #2a0d0d !important; color: var(--red)   !important; }
.quiz-explain {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.quiz-explain.show { display: block; }
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.quiz-progress { font-size: 12px; }
.btn-quiz {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.btn-quiz:hover { border-color: #E8890C; color: #E8890C; }

/* ── landing mode ── */
.course-shell.landing-mode .course-sidebar { display: none; }
.course-shell.landing-mode .course-main { overflow-y: auto; }

/* ── responsive ── */
@media (max-width: 820px) {
  .course-shell { flex-direction: column; }
  .course-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .course-main { overflow-y: visible; }
}

/* ── light theme overrides ── */
:root[data-theme="light"] .course-sidebar { background: #fff; }
:root[data-theme="light"] .lesson-item.active { background: rgba(232,137,12,.1); }
:root[data-theme="light"] .gotcha-box { background: rgba(242,169,59,.07); }
:root[data-theme="light"] .quiz-opt.correct { background: #e6f9ef !important; }
:root[data-theme="light"] .quiz-opt.wrong   { background: #fde8e8 !important; }

/* ── font size variants ── */
[data-jyotish-fs="larger"]  .lesson-section  { font-size: 17px; }
[data-jyotish-fs="larger"]  .quiz-q          { font-size: 17px; }
[data-jyotish-fs="larger"]  .quiz-opt        { font-size: 15px; }
[data-jyotish-fs="larger"]  .quiz-explain    { font-size: 14px; }

[data-jyotish-fs="largest"] .lesson-section  { font-size: 20px; }
[data-jyotish-fs="largest"] .quiz-q          { font-size: 20px; }
[data-jyotish-fs="largest"] .quiz-opt        { font-size: 17px; }
[data-jyotish-fs="largest"] .quiz-explain    { font-size: 16px; }