/* ===========================================================
   LIFE STREAM 101 — interactive course / workbook
   Loads AFTER site.css. Inherits brand tokens.
   =========================================================== */

/* ---------- course hero ---------- */
.course-hero { position: relative; background: linear-gradient(150deg, var(--dark) 0%, var(--blue-deep) 78%, var(--blue) 130%); color: #fff; overflow: hidden; }
.course-hero::after { content: ""; position: absolute; right: -160px; top: -160px; width: 460px; height: 460px; border-radius: 50%; border: 56px solid rgba(255,255,255,.06); }
.course-hero .inner { position: relative; z-index: 2; padding: 168px 0 70px; }
.course-hero .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #bfe7fb; margin-bottom: 22px; }
.course-hero .kicker .ln { width: 26px; height: 2px; background: #bfe7fb; }
.course-hero h1 { font-size: clamp(46px, 7vw, 94px); font-weight: 800; letter-spacing: -.04em; line-height: .96; color: #fff; }
.course-hero h1 .s { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-bright); font-size: 1.04em; }
.course-hero .sub { font-size: clamp(18px, 1.7vw, 22px); color: rgba(255,255,255,.86); max-width: 620px; margin-top: 22px; line-height: 1.55; }
.course-hero .meta { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.course-hero .meta .m b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.course-hero .meta .m span { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; }

/* overall progress ring in hero */
.course-hero .progwrap { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.ring-prog { width: 66px; height: 66px; flex: none; transform: rotate(-90deg); }
.ring-prog circle { fill: none; stroke-width: 7; }
.ring-prog .bg { stroke: rgba(255,255,255,.18); }
.ring-prog .fg { stroke: var(--blue-bright); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.course-hero .progwrap .lbl b { font-size: 20px; font-weight: 800; }
.course-hero .progwrap .lbl span { display: block; font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; }

/* ---------- episode list (hub) ---------- */
.eps { display: flex; flex-direction: column; gap: 20px; max-width: 920px; margin: 0 auto; }
.ep { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 30px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; position: relative; overflow: hidden; }
.ep:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(33,35,38,.14); border-color: transparent; }
.ep .epno { width: 76px; height: 76px; flex: none; border-radius: 18px; background: var(--mist); display: grid; place-items: center; position: relative; }
.ep .epno b { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--blue); line-height: 1; }
.ep.done .epno { background: var(--blue); }
.ep.done .epno b { color: #fff; }
.ep.done .epno::after { content: ""; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #29c06a; border: 3px solid #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4 4 10-10' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; }
.ep .epbody .tag { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.ep .epbody h3 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--navy); margin: 5px 0 7px; }
.ep .epbody h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue); }
.ep .epbody p { font-size: 15px; color: var(--slate); line-height: 1.55; max-width: 460px; }
.ep .epbody .bar { height: 6px; border-radius: 100px; background: var(--mist-2); margin-top: 14px; max-width: 320px; overflow: hidden; }
.ep .epbody .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); border-radius: 100px; transition: width .8s var(--ease); }
.ep .epcta { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--navy); transition: background .3s, color .3s, transform .3s var(--ease); }
.ep:hover .epcta { background: var(--blue); color: #fff; transform: rotate(-45deg); }
.ep .epcta svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .ep { grid-template-columns: auto 1fr; } .ep .epcta { display: none; } .ep .epbody .bar { max-width: none; } }

/* ---------- episode (lesson) page ---------- */
.lesson-wrap { max-width: 820px; margin: 0 auto; }
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.lesson-top .back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--slate); transition: gap .25s, color .25s; }
.lesson-top .back:hover { gap: 12px; color: var(--blue); }
.lesson-top .back svg { width: 16px; height: 16px; }
.lesson-top .saved { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--teal); letter-spacing: .02em; }
.lesson-top .saved .d { width: 8px; height: 8px; border-radius: 50%; background: #29c06a; }

.lesson-progress { position: sticky; top: 84px; z-index: 40; height: 5px; background: var(--mist-2); border-radius: 100px; overflow: hidden; margin-bottom: 40px; }
.lesson-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); transition: width .4s var(--ease); }

.step { padding: 0 0 56px; position: relative; }
.step + .step { border-top: 1px solid var(--line); padding-top: 52px; }
.step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.step-head .n { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--mist); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--blue); }
.step-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; color: var(--navy); line-height: 1.05; }
.step-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue); }

/* video */
.vid { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; background: #000; box-shadow: 0 20px 46px rgba(33,35,38,.2); margin-bottom: 28px; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; background: linear-gradient(150deg, var(--dark), var(--blue-deep)); color: #fff; transition: opacity .3s; }
.vid .ph .play { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.5); display: grid; place-items: center; backdrop-filter: blur(6px); transition: transform .3s var(--ease), background .3s; }
.vid .ph:hover .play { transform: scale(1.08); background: var(--blue); border-color: var(--blue); }
.vid .ph .play svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.vid .ph small { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* teaching content */
.teach { font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.teach p { margin-top: 16px; }
.teach p:first-child { margin-top: 0; }
.teach h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin-top: 26px; letter-spacing: -.01em; }
.teach h4 { font-size: 16px; font-weight: 800; color: var(--blue); margin-top: 24px; letter-spacing: .01em; }
.teach strong { color: var(--navy); font-weight: 700; }
.teach ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.teach ul li { position: relative; padding-left: 28px; color: var(--slate); }
.teach ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 8px; border-radius: 0 0 10px 10px; background: var(--blue); opacity: .85; }
.teach .ref { border-left: 3px solid var(--blue); background: var(--mist); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 20px 0; font-size: 16px; line-height: 1.6; color: var(--navy); }
.teach .ref b { color: var(--blue); display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.teach .verse-n { color: var(--blue); font-weight: 800; }

/* compare table */
.teach .ctable { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0 6px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); font-size: 15.5px; }
.teach .ctable th { background: var(--blue); color: #fff; text-align: left; padding: 13px 16px; font-weight: 800; font-size: 14px; }
.teach .ctable td { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.teach .ctable tr td:first-child { border-right: 1px solid var(--line); background: #fff; }
.teach .ctable tbody tr:nth-child(even) td { background: var(--mist); }
.teach .ctable tbody tr:nth-child(even) td:first-child { background: var(--mist); }

/* fill-in-the-blank */
.blank { display: inline-block; min-width: 110px; max-width: 240px; border: none; border-bottom: 2px solid var(--blue); background: rgba(0,159,228,.05); border-radius: 5px 5px 0 0; padding: 2px 10px; font: inherit; font-weight: 700; color: var(--blue-deep); text-align: center; transition: background .2s, border-color .2s; vertical-align: baseline; }
.blank::placeholder { color: #9fc3da; font-weight: 600; }
.blank:focus { outline: none; background: rgba(0,159,228,.12); border-color: var(--blue-bright); }
.blank.filled { background: rgba(41,192,106,.08); border-color: #29c06a; color: #15803d; }

/* notes block */
.notes { margin-top: 30px; background: var(--mist); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.notes label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.notes label svg { width: 16px; height: 16px; color: var(--blue); }
.notes textarea { width: 100%; min-height: 110px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.notes textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,159,228,.14); }

/* self-assessment scores */
.assess { margin-top: 22px; }
.assess .q { margin-top: 26px; }
.assess .q:first-child { margin-top: 0; }
.assess .q p { font-size: 16.5px; color: var(--ink); line-height: 1.6; margin-bottom: 6px; }
.assess .q .hint { font-size: 14px; color: var(--slate); margin-bottom: 14px; }
.score { display: flex; flex-wrap: wrap; gap: 7px; }
.score button { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 700; font-size: 15px; color: var(--slate); cursor: pointer; transition: .18s var(--ease); }
.score button:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.score button.sel { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(0,159,228,.32); }
.score .ends { width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: var(--teal); font-weight: 600; margin-top: 8px; }
@media (max-width: 560px){ .score button { width: 38px; height: 38px; font-size: 14px; } }

/* lesson footer nav */
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.lesson-nav a { display: flex; flex-direction: column; gap: 4px; padding: 22px 26px; border-radius: 18px; border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.lesson-nav a:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(33,35,38,.1); }
.lesson-nav a span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.lesson-nav a b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.lesson-nav a.next { text-align: right; }
.lesson-nav a.disabled { opacity: .4; pointer-events: none; }
@media (max-width: 560px){ .lesson-nav { grid-template-columns: 1fr; } }

/* action bar */
.lesson-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 40px 0 10px; padding: 26px; background: var(--mist); border-radius: 20px; align-items: center; }
.lesson-actions .txt { flex: 1; min-width: 200px; }
.lesson-actions .txt b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.lesson-actions .txt span { font-size: 14px; color: var(--slate); }
.btn-mark { background: var(--blue); color: #fff; border: none; }
.btn-mark.on { background: #29c06a; }
.btn-print { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-print:hover { border-color: var(--blue); color: var(--blue); }

/* completion toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 15px 24px; border-radius: 100px; font-size: 15px; font-weight: 700; box-shadow: 0 18px 40px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .4s var(--ease); z-index: 200; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; }

/* ---------- print: clean workbook ---------- */
@media print {
  header.site, footer.site, .overlay, .drawer, .grain, .scrollprog, .cursor-dot, .cursor-ring,
  .lesson-progress, .lesson-nav, .lesson-actions, .lesson-top .back, .vid, .course-hero .progwrap,
  .toast { display: none !important; }
  body { background: #fff; }
  .lesson-wrap { max-width: 100%; }
  .step { padding: 0 0 22px; page-break-inside: avoid; }
  .step + .step { padding-top: 22px; }
  .blank { border-bottom: 1px solid #000; background: none; color: #000; }
  .notes textarea { border: 1px solid #ccc; min-height: 60px; }
  .score button { display: none; } .score button.sel { display: inline-grid; background: #000; color: #fff; }
  .print-head { display: block !important; }
}
.print-head { display: none; }