/* tracks.css — learner tracks, lessons, ledgers (Empowered brand) */

/* lesson list on a track page */
.lesson-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-8) 0; }
.lesson-row { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--text-strong); transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.lesson-row:hover { border-color: var(--brand-teal); box-shadow: var(--shadow-sm); transform: translateX(2px); color: var(--text-strong); }
.lr-num { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-xl); color: var(--brand-teal); }
.lr-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-base); }
.lr-meta { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) { .lesson-row { grid-template-columns: 36px 1fr; } .lr-meta { grid-column: 2; justify-content: flex-start; } }

/* rendered lesson / ledger body */
.lesson-body { max-width: 46rem; }
.lesson-body h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.lesson-body h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); color: var(--text-strong); }
.lesson-body p { line-height: var(--leading-relaxed); color: var(--text-body); }
.lesson-body ul, .lesson-body ol { line-height: var(--leading-relaxed); color: var(--text-body); padding-left: 1.3em; }
.lesson-body li { margin-bottom: var(--space-2); }
.lesson-body li > strong:first-child { color: var(--brand-teal-700); }
.lesson-body strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.lesson-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--brand-teal-700); }
.lesson-body pre { background: var(--brand-navy); color: #d6e2ea; border-radius: var(--radius-md); padding: var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; border: 1px solid var(--neutral-800); }
.lesson-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.lesson-body blockquote { border-left: 3px solid var(--brand-gold); background: color-mix(in oklch, var(--brand-gold) 8%, var(--brand-white)); margin: var(--space-5) 0; padding: var(--space-3) var(--space-5); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-body); }
.lesson-body blockquote p { margin: 0; }
.lesson-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-5) 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.lesson-body th { text-align: left; background: var(--surface-sunken); font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: var(--space-2) var(--space-3); }
.lesson-body td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); vertical-align: top; color: var(--text-body); }
.lesson-body hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.lesson-body em { color: var(--text-body); }

/* prev / next */
.lesson-nav { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); flex-wrap: wrap; }
.lesson-nav .pn { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--brand-teal-700); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.lesson-nav .pn:hover { border-color: var(--brand-teal); }
.lesson-nav .next { margin-left: auto; }