/* Courses: the catalogue (/courses/), course pages (/courses/<slug>/), the lesson player
   (/members/courses/<slug>/) and My courses. Void Deck Playground tokens only (assets/tokens.css), so light
   and dark themes follow the site. Every text sits on a solid fill: cards, tiles or the concrete ground. */

/* Long words wrap rather than spill at 200% text on a phone. */
.course-page main h1,.course-page main h2,.course-page main h3,.course-outline-body,.course-checkout,.course-card,.bundle-card,.thanks-item,.cb,.lesson-goal,.player-lesson-title{overflow-wrap:anywhere}
.course-page main p,.course-page main li{max-width:60ch}

/* Catalogue */
.course-intro h1{max-width:20ch}
.course-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.course-filter-btn{min-height:44px;padding:8px 16px;border:3px solid var(--outline);border-radius:var(--radius-btn);background:var(--card);color:var(--ink);font:800 .9375rem/1.2 var(--font-body)}
.course-filter-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.course-filter-btn[aria-pressed=true]::before{content:"✓ ";}
.course-filter-status{min-height:1.6em;margin:0 0 14px;color:var(--muted);font-size:.875rem}
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.course-card>article{display:flex;flex-direction:column;height:100%;padding:var(--space-card,20px);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.course-card h2{font-size:1.375rem;margin:10px 0 8px;letter-spacing:-.02em}
.course-card h2 a{text-decoration:none}
.course-card h2 a:hover{text-decoration:underline}
.course-card-outcome{margin:0 0 12px;color:var(--ink)}
.course-card-meta{margin:auto 0 8px;color:var(--muted);font-size:.875rem}
.course-card-price{font-weight:800;color:var(--ink)}
.course-card-free{margin:0}
.course-card-free a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.course-stages{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.course-stage{padding:2px 10px;border-radius:var(--radius-btn);font:800 .75rem/1.6 var(--font-body)}
.course-stage-expecting{background:var(--stage-expecting);color:var(--stage-expecting-on)}
.course-stage-baby{background:var(--stage-baby);color:var(--stage-baby-on)}
.course-stage-toddler{background:var(--stage-toddler);color:var(--stage-toddler-on)}
.course-stage-preschool{background:var(--stage-preschool);color:var(--stage-preschool-on)}
.course-stage-primary{background:var(--stage-primary);color:var(--stage-primary-on)}
.course-stage-family{background:var(--stage-family);color:var(--stage-family-on)}

/* Course page */
.course-hero h1{max-width:22ch}
.course-hero .course-lead{font-size:1.125rem;color:var(--ink);max-width:40rem}
.course-hero .course-facts{font-weight:800;color:var(--ink)}
.course-hero .action-row,.course-locked .action-row{display:flex;flex-wrap:wrap;gap:10px}
.course-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 var(--space-section,40px)}
.course-panel,.course-buy,.course-lessons,.player-locked,.player-certificate{padding:var(--space-card,20px);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.course-panel h2,.course-lessons h2,.course-buy h2{font-size:1.375rem}
.course-panel h3{font-size:1.0625rem;margin-top:16px}
.course-list{margin:0 0 12px;padding-left:1.2em}
.course-list li{margin:0 0 6px}
.course-lessons{margin:0 0 var(--space-section,40px)}
.course-outline{margin:0;padding:0;list-style:none;counter-reset:none}
.course-outline li{display:flex;gap:14px;padding:14px 0;border-top:2px dashed var(--hair)}
.course-outline li:first-child{border-top:0}
.course-outline-no{flex:0 0 auto;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-btn);background:var(--ink);color:var(--paper);font:900 1rem/1 var(--font-head)}
.course-outline .is-free .course-outline-no{background:var(--green);color:var(--on-green)}
.course-outline-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.course-outline-goal{color:var(--ink)}
.course-outline-meta{color:var(--muted);font-size:.875rem}
.course-preview{margin:0 0 var(--space-section,40px)}
.course-free-badge{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:var(--radius-btn);background:var(--green);color:var(--on-green);font-weight:800;font-size:.8125rem}
.course-preview-note{margin-top:16px;color:var(--muted)}
.course-buy{max-width:40rem;margin:0 0 var(--space-section,40px);scroll-margin-top:110px}
.course-price{font-size:1.5rem;margin:0 0 8px}
.course-price strong{font-family:var(--font-head);font-weight:900}
.course-price-note{font-size:1rem;color:var(--muted)}
.course-checkout .course-buy-btn[disabled]{opacity:1;cursor:not-allowed;background:var(--soft);border-color:var(--outline);color:var(--ink)}
.course-checkout .small{margin-top:10px}
.course-checkout{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.course-checkout .small{margin:0}
.course-checkout .course-buy-btn{min-height:48px}
.checkout-addon{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 14px;border:3px dashed var(--outline);border-radius:var(--radius-field);background:var(--tile-butter);color:var(--ink);font-weight:800;cursor:pointer}
.checkout-addon[hidden]{display:none}
.checkout-addon input{flex:0 0 auto;width:24px;height:24px;margin:0;accent-color:var(--ink)}
/* What the parent pays, with the add-on when ticked (course-checkout.js redraws it on every tick). */
.checkout-total{margin:0;color:var(--ink);font-size:1.125rem;font-weight:700;overflow-wrap:anywhere}.checkout-total[hidden]{display:none}.checkout-total strong{font-family:var(--font-head);font-weight:900}
/* Label and total wrap as one line of text inside the button, never splitting the amount. */
.checkout-btn-label{display:inline;min-width:0;overflow-wrap:normal}.checkout-btn-total{white-space:normal}
.checkout-guarantee{margin:-4px 0 0;color:var(--ink);font-size:.875rem;font-weight:700}
.checkout-guarantee::before{content:"✓ ";}
.thanks-guarantee{max-width:40rem;margin:0 0 16px;color:var(--ink)}
.checkout-status{margin:0;min-height:1.4em;color:var(--ink);font-weight:800}
.checkout-status:empty{min-height:0}
.price-was{color:var(--muted);font-weight:700;text-decoration-thickness:2px}
.price-now{color:var(--ink)}
.course-price .price-was{font-size:1.125rem}
.course-companion-alone{margin-top:20px;padding-top:16px;border-top:2px dashed var(--hair)}
.course-companion-alone h3{font-size:1.0625rem;margin:0 0 4px}
.course-companion-alone p{margin:0 0 10px}
/* Bundles: one card each, "Get 4, pay for 3" first with the crossed-out total beside the price. */
.course-bundles{margin:0 0 var(--space-section,40px);scroll-margin-top:110px}
.course-bundles h2{font-size:1.375rem}
.bundle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:16px}
.bundle-card{display:flex;flex-direction:column;gap:8px;padding:var(--space-card,20px);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.bundle-name{margin:0;color:var(--muted);font-weight:800;font-size:.875rem}
.bundle-headline{margin:0;font-size:1.5rem;letter-spacing:-.02em}
.bundle-price{margin:0;font-size:1.375rem}
.bundle-price .price-now{font-family:var(--font-head);font-weight:900}
.bundle-price .price-was{font-size:1.0625rem}
.bundle-courses{margin:0;padding-left:1.2em}
.bundle-courses li{margin:0 0 4px}
.bundle-list summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.bundle-card .course-checkout{margin-top:auto;padding-top:6px}
/* "You're in" */
.thanks-list{display:grid;gap:16px;margin:0 0 16px;padding:0;list-style:none}
.thanks-item{max-width:40rem;padding:var(--space-card,20px);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.thanks-item h2{font-size:1.25rem;margin:0 0 10px}
.thanks-item .action-row,.course-thanks-items .action-row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.thanks-status{min-height:1.4em;font-weight:800}

/* A lesson (course page and player) */
.lesson{max-width:40rem;padding:var(--space-card,20px);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.lesson-head h2{font-size:1.75rem;margin:4px 0 10px}
.lesson-kicker{margin:0;color:var(--muted);font-weight:800;font-size:.875rem}
.lesson-goal{padding:10px 14px;border-radius:var(--radius-field);background:var(--tile-butter);color:var(--ink)}
.lesson h3{font-size:1.25rem;letter-spacing:-.02em}
.cb{margin:0 0 22px}
.cb p:last-child{margin-bottom:0}
.lesson .cb-kicker{margin:0 0 4px;color:var(--muted);font-weight:800;font-size:.8125rem}
.cb-text ul,.cb-text ol,.cb-callout ul{padding-left:1.2em}
.cb-callout{padding:14px 16px;border-radius:var(--radius-field);border-left:6px solid var(--outline);background:var(--soft);color:var(--ink)}
.cb-callout-tip{background:var(--tile-mint);border-left-color:var(--green-ink)}
.cb-callout-note{background:var(--tile-sky);border-left-color:var(--blue-ink)}
.cb-callout-safety{background:var(--tile-rose);border-left-color:var(--red-ink)}
.cb-callout-label{margin:0 0 6px;font-weight:900;font-family:var(--font-head);letter-spacing:-.01em}
.cb-callout-safety .cb-callout-label::before{content:"! ";}
.cb-script{padding:16px;border:3px solid var(--outline);border-radius:var(--radius-field);background:var(--paper);color:var(--ink)}
.lesson .cb-label{margin:12px 0 4px;font-weight:900}
.cb-say,.cb-avoid{margin:0;padding:0;list-style:none}
.cb-say li,.cb-avoid li{position:relative;margin:0 0 8px;padding:10px 12px 10px 38px;border-radius:var(--radius-field);background:var(--card);color:var(--ink)}
.cb-say li::before,.cb-avoid li::before{position:absolute;left:12px;top:10px;font-weight:900}
.cb-say li::before{content:"✓";color:var(--green-ink)}
.cb-avoid li::before{content:"✗";color:var(--red-ink)}
.cb-avoid li{text-decoration:none}
.cb-steplist{margin:0;padding-left:1.4em}
.cb-steplist li{margin:0 0 8px;padding-left:4px}
.cb-checklist{padding:14px 16px;border:3px solid var(--outline);border-radius:var(--radius-field);background:var(--card)}
.cb-checklist legend{padding:0 6px;font:900 1.125rem/1.3 var(--font-head)}
.cb-checklist ul{margin:0;padding:0;list-style:none}
.cb-checklist label{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
.cb-checklist input{flex:0 0 auto;width:24px;height:24px;margin:2px 0 0;accent-color:var(--green)}
.cb-device{color:var(--muted);font-size:.875rem;margin:8px 0 0}
.cb-quiz,.cb-scenario,.cb-reflect,.cb-worksheet,.cb-video{padding:16px;border-radius:var(--radius-field);background:var(--tile-lilac);color:var(--ink)}
.cb-scenario{background:var(--tile-aqua)}
.cb-reflect{background:var(--tile-butter)}
.cb-worksheet,.cb-video{background:var(--soft)}
.cb-question{font-weight:800;margin:0 0 10px}
.cb-options{display:flex;flex-direction:column;gap:8px}
.cb-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-width:0;min-height:48px;padding:10px 14px;border:3px solid var(--outline);border-radius:var(--radius-field);background:var(--card);color:var(--ink);font:600 1rem/1.4 var(--font-body);text-align:left}
.cb-option:hover{border-color:var(--ink)}
.cb-quiz:not(.is-live) .cb-options{display:none}
.cb-option.is-chosen{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.cb-option.is-right{border-color:var(--green-ink)}
.cb-option-text{max-width:100%;overflow-wrap:anywhere}
.cb-mark{font-weight:900;font-size:.875rem}
.cb-mark:empty{display:none}
.cb-option.is-right .cb-mark{color:var(--green-ink)}
.lesson .cb-feedback{margin:10px 0 0;padding:0;color:var(--ink)}
.cb-feedback:not(:empty){padding:10px 12px;border-radius:var(--radius-field);background:var(--card)}
.cb-reveal summary,.cb-choice summary,.cb-transcript summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.cb-choices{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cb-choice{border:3px solid var(--outline);border-radius:var(--radius-field);background:var(--card);color:var(--ink)}
.cb-choice summary{display:block;position:relative;padding:10px 14px 10px 48px;list-style:none}
.cb-choice summary::-webkit-details-marker{display:none}
.cb-choice summary::marker{content:""}
.cb-choice summary::before{content:"+";position:absolute;left:12px;top:10px;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-btn);background:var(--ink);color:var(--paper);font-weight:900}
.cb-choice[open] summary::before{content:"–"}
.cb-choice p{margin:0;padding:0 14px 12px 48px}
.cb-reflect label{display:block;font-weight:800;margin:0 0 8px}
.cb-reflect textarea{display:block;width:100%;min-height:7rem;padding:12px;border:3px solid var(--field-border);border-radius:var(--radius-field);background:var(--card);color:var(--ink);font:1rem/1.5 var(--font-body);resize:vertical}
.cb-image img{display:block;max-width:100%;height:auto;border-radius:var(--radius-field)}
.cb-image figcaption{margin-top:6px;color:var(--muted);font-size:.875rem}
.cb-image.is-missing{display:none}
.lesson-wrap{margin:26px 0 0;padding:16px;border-radius:var(--radius-field);background:var(--ink);color:var(--paper)}
.lesson-wrap h3{color:var(--paper);font-size:1.0625rem;margin:0 0 4px}
.lesson-wrap p{color:var(--paper)}
.lesson-sources{margin-top:22px;font-size:.875rem}
.lesson-sources h3{font-size:1rem}
.lesson-sources ul{padding-left:1.2em;margin:0}
.lesson-sources li{margin:0 0 6px;overflow-wrap:anywhere}

/* Lesson player */
.player-jump{display:none;margin:0 0 12px}
.player-jump a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.player-intro .player-access{color:var(--ink);font-weight:700}
.player-layout{display:grid;grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);grid-template-areas:"nav main";gap:24px;align-items:start}
.player-main{grid-area:main;min-width:0}
.player-nav{grid-area:nav;position:sticky;top:16px;padding:16px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.player-nav h2{font-size:1.25rem;margin:0 0 8px}
.player-lessons{margin:0;padding:0;list-style:none}
.player-lessons a{display:grid;grid-template-columns:2rem minmax(0,1fr);grid-template-areas:"no title" "no state";column-gap:10px;align-items:center;min-height:48px;padding:8px;border-radius:var(--radius-field);color:var(--ink);text-decoration:none}
.player-lessons a:hover{background:var(--soft)}
.player-lessons a[aria-current]{background:var(--ink);color:var(--paper)}
.player-lesson-no{grid-area:no;display:grid;place-items:center;width:2rem;height:2rem;border:2px solid currentColor;border-radius:var(--radius-btn);font-weight:900}
.player-lesson-title{grid-area:title;font-weight:700;line-height:1.3}
.player-lesson-state{grid-area:state;font-size:.8125rem;font-weight:800}
.player-lesson-state:empty{display:none}
.is-done .player-lesson-no{background:var(--green);border-color:var(--green);color:var(--on-green)}
.player-progress{margin:8px 0 0;color:var(--muted);font-size:.875rem}
.player-progress:empty{display:none}
.player-controls{max-width:44rem;margin:16px 0 0}
.player-complete[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--on-green)}
.player-complete-status{min-height:1.6em;margin:8px 0;color:var(--ink)}
.player-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.player-locked,.player-certificate{max-width:44rem}
.player-sandbox{margin-top:18px;padding-top:14px;border-top:2px dashed var(--hair)}
.player-sandbox button{margin:0 8px 8px 0}
.player-loading,.player-error{max-width:44rem;padding:16px;border-radius:var(--radius-field);background:var(--card);color:var(--ink);border:3px solid var(--outline)}
.player-certificate label{display:block;font-weight:800;margin:12px 0 6px}
.player-certificate input{max-width:24rem}
.certificate-sheet{margin:18px 0;padding:28px 20px;border:6px double var(--outline);border-radius:var(--radius-field);background:var(--card);color:var(--ink);text-align:center}
.course-page .certificate-sheet p{margin:0 auto 8px;max-width:none}
.certificate-brand{font:900 1.125rem/1.2 var(--font-head)}
.certificate-kicker{color:var(--muted);font-weight:800}
.certificate-name{font:900 2rem/1.15 var(--font-head);overflow-wrap:anywhere}
.certificate-course{font:900 1.375rem/1.2 var(--font-head)}
.certificate-fine{color:var(--muted);font-size:.8125rem}

/* My courses (/members/#member-courses) */
.member-courses-list{display:grid;gap:12px;margin:0 0 16px;padding:0;list-style:none}
.member-course-row{padding:16px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.member-course-link{display:flex;flex-direction:column;gap:4px;min-height:44px;text-decoration:none;color:var(--ink)}
.member-course-link strong{font:800 1.25rem/1.2 var(--font-head)}
.member-course-row progress{width:100%;height:12px;margin-top:10px;accent-color:var(--green)}

@media(max-width:900px){
 .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .course-summary{grid-template-columns:minmax(0,1fr)}
 .player-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "nav"}
 .player-nav{position:static}
 .player-jump{display:block}
}
@media(max-width:560px){
 .course-grid,.course-summary{grid-template-columns:minmax(0,1fr)}
 .lesson{padding:16px 14px}
 .lesson-head h2{font-size:1.5rem}
 .cb-quiz,.cb-scenario,.cb-reflect,.cb-worksheet,.cb-video,.cb-script,.cb-checklist{padding:12px}
 .cb-choice p{padding-left:14px}
 .player-pager>a{flex:1 1 auto}
}
@media print{
 body.course-page .site-header,body.course-page .footer,body.course-page .tab-bar,body.course-page .breadcrumb,body.course-page .player-nav,body.course-page .player-jump,body.course-page .player-controls,body.course-page .player-intro,body.course-page .join-bar{display:none}
 body.is-printing-certificate main>*:not(.player-layout),body.is-printing-certificate .player-main>*:not(#certificate),body.is-printing-certificate #certificate>*:not(#certificate-sheet){display:none}
 body.is-printing-certificate #certificate{border:0;padding:0}
 .certificate-sheet{margin:0;padding:64px 32px;border-color:black;color:black;background:white}
 .certificate-sheet p{color:black}
 .certificate-name{font-size:3rem}
 .certificate-course{font-size:2rem}
}
.course-hero .course-stages{margin:0 0 14px}
.course-hero-price{white-space:nowrap}
.course-outline-body p{margin:0}
.course-outline-title a{display:inline-flex;align-items:center;min-height:44px}