/* Shared styles for the detailed course pages (course-*.html). */

.course-page { max-width: 780px; margin: 0 auto; padding: 40px 6% 60px; }
.course-page h1 { font-size: 1.7rem; margin-bottom: 8px; }
.course-page .lede { color: var(--text2); font-size: .92rem; margin-bottom: 28px; }
.back-link { display: inline-block; margin-bottom: 26px; font-size: .85rem; }

.toc {
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 34px; font-size: .86rem;
}
.toc strong { color: var(--gold-mid); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.toc ol { margin: 10px 0 0 20px; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 5px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.lesson {
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 14px;
  padding: 24px 28px; margin-bottom: 20px; animation: fadeUp .45s ease both;
  scroll-margin-top: 20px;
}
.lesson h2 { font-size: 1.05rem; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.lesson .lnum {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--gold-dim);
  border: 1px solid rgba(200,168,75,.4); color: var(--gold-brt); font-size: .85rem;
}
.lesson p, .lesson li { font-size: .88rem; color: var(--text2); }
.lesson p { margin-bottom: 12px; }
.lesson ul, .lesson ol { margin: 0 0 12px 20px; }
.lesson li { margin-bottom: 6px; }
.lesson strong { color: var(--text); }
.lesson em { color: var(--text); font-style: italic; }
.lesson code {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; font-size: .82em;
}
.lesson pre {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; font-size: .8rem; line-height: 1.5; color: var(--text2);
  overflow-x: auto; margin-bottom: 12px;
}
.lesson .how { border-top: 1px dashed var(--border2); padding-top: 10px; }

.diagram {
  background: radial-gradient(ellipse at 50% 35%, #14110b 0%, #0b0a07 70%);
  border: 1px solid var(--border2); border-radius: 12px;
  padding: 18px 10px; margin-bottom: 14px;
}
.diagram svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

.ex { border-radius: 8px; padding: 10px 14px; font-size: .84rem; margin-bottom: 10px; color: var(--text2); }
.ex .tag { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-right: 8px; }
.ex.bad  { background: var(--red-dim); border: 1px solid rgba(212,53,28,.3); }
.ex.bad .tag { color: #e05545; }
.ex.good { background: rgba(0,112,60,.08); border: 1px solid rgba(0,112,60,.3); }
.ex.good .tag { color: var(--green-mid); }

.key {
  background: var(--gold-dim); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: .85rem;
  color: var(--text); margin-top: 4px;
}

.watch {
  border-top: 1px dashed var(--border2); padding-top: 12px; margin-top: 4px;
}
.watch .wt { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.watch ul { margin: 0 0 0 20px; }
.watch li { font-size: .84rem; margin-bottom: 4px; }

.next-step {
  text-align: center; margin-top: 36px; padding: 28px;
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 14px;
}
.next-step p { color: var(--text2); font-size: .9rem; margin-bottom: 14px; }
.next-step .small { font-size: .78rem; color: var(--muted); margin: 12px 0 0; }
.quiz-cta {
  display: inline-block; padding: 12px 28px; border-radius: 10px;
  background: var(--gold-dim); border: 1px solid rgba(200,168,75,.5);
  color: var(--gold-brt); font-weight: 800; font-size: .95rem;
}
.quiz-cta:hover { background: rgba(200,168,75,.2); text-decoration: none; }