/*!
 * Albourse — lesson kit (strategies/*.html)
 * Shared by every strategy lesson; link it after style.css and payoff.css:
 *   <link rel="stylesheet" href="../assets/css/pages/lesson.css">
 * Docs: docs/STRATEGY_TEMPLATE.md §3 (what each rule is for). Page-specific CSS does not belong here.
 * Global fixes live in style.css (checklist/summary/formula-label layout, prose list resets, .figure--narrow, .math).
 */
.lesson-en { display: block; margin-top: 6px; font-family: var(--font-body); font-size: clamp(16px, .5vw + 13px, 20px); font-weight: 600; line-height: 1.5; color: var(--text-3); }
.lesson-thumb { height: 200px; }
.lesson-facts__cap { margin: var(--sp-8) 0 10px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; color: var(--text-3); }
.lesson-facts .stat { background: var(--surface); }
.lesson-facts .stat__value { font-size: 20px; }
.lesson-facts .stat__value.stat__value--text { font-size: 16px; }
.lesson-body { padding-top: var(--sp-10); }
/* text keeps the 68ch measure; the payoff tool and related cards (direct children of the article) break out to the full main column */
.lesson-body .article-layout__main { container-type: inline-size; }
.prose > [data-payoff], .prose > .related { width: 100cqw; max-width: none; }
.prose [lang="en"] { white-space: nowrap; }
.prose .callout ul > li::marker { color: var(--c); }
.fit-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fit-cols__col { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.prose .fit-cols__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.fit-cols__col--yes .fit-cols__title .icon { color: var(--pos); }
.fit-cols__col--no .fit-cols__title .icon { color: var(--neg); }
.prose .table-note { margin-top: .7em; font-size: var(--fs-sm); line-height: 1.75; color: var(--text-3); }
.prose .num, .table .num { white-space: nowrap; }
.table--fit thead th { white-space: normal; }
.table tr.is-current > * { background: var(--academy-soft); }
.lesson-body .toc-mobile { margin-bottom: var(--sp-6); }
.prose .glossary dd b { color: var(--text); }
.lesson-disclaimer { margin-top: var(--sp-12) !important; }

/* previous / next lesson — after .related, just before the disclaimer.
   Order: options-basics → 1 covered-call … 13 protective-put → the academy (strategies.html#all). In RTL the previous
   lesson sits on the right (arrow pointing back →), the next one on the left with a soft accent wash toward its arrow ←. */
.lesson-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--sp-12); }
.lesson-nav__link {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 108px; padding: 16px 20px 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.lesson-nav__link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, var(--academy)) 45%, var(--border)); box-shadow: var(--shadow); }
.lesson-nav__link--next {
  grid-column: 2; align-items: flex-end; text-align: end;
  background: linear-gradient(to left, var(--surface) 35%, color-mix(in srgb, var(--accent, var(--academy)) 11%, var(--surface)));
}
.lesson-nav__dir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; color: var(--accent-ink, var(--academy-ink)); }
.lesson-nav__dir .icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
.lesson-nav__link--prev .lesson-nav__dir .icon { transform: scaleX(-1); }
.lesson-nav__link--next:hover .lesson-nav__dir .icon { transform: translateX(-4px); }
.lesson-nav__link--prev:hover .lesson-nav__dir .icon { transform: scaleX(-1) translateX(-4px); }
.lesson-nav__title { font-family: var(--font-serif); font-size: 21px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.lesson-nav__en { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text-3); }
.lesson-nav + .lesson-disclaimer { margin-top: var(--sp-6) !important; }

/* SVG illustration helpers (extend the .ill-* set in style.css) */
.ill-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.ill-box-pos { fill: var(--pos-soft); stroke: var(--pos); stroke-opacity: .45; stroke-width: 1.5; }
.ill-box-neg { fill: var(--neg-soft); stroke: var(--neg); stroke-opacity: .45; stroke-width: 1.5; }
.ill-box-academy { fill: var(--academy-soft); stroke: var(--academy); stroke-opacity: .55; stroke-width: 1.5; }
.ill-fill-academy { fill: var(--academy-soft); }
.ill-text--academy { fill: var(--academy-ink); font-weight: 700; }
.ill-text--big { font-size: 20px; font-weight: 700; }
.ill-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 699px) {
  .fit-cols { grid-template-columns: minmax(0, 1fr); }
  .lesson-thumb { height: 170px; }
  .lesson-facts .stat__value { font-size: 17px; }
  .lesson-facts .stat__value.stat__value--text { font-size: 15px; }
  .lesson-facts .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lesson-nav { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: var(--sp-10); }
  .lesson-nav__link { min-height: 0; padding: 14px 16px 16px; }
  .lesson-nav__link--next { grid-column: auto; align-items: flex-start; text-align: start; }
  .lesson-nav__title { font-size: 19px; }
}
@media print { .lesson-nav { display: none; } }