/* assets/learn.css
   The learner side of courses: the "My learning" dashboard (ld-*), the
   course player's additions (cp-*: overview, tools, files, questions,
   navigation, low-data mode, text size, printable notes), lesson content
   (.pl-lesson) and branching scenarios (sp-*). Colours come from the site
   tokens in site.css; #84B172 is the ParaLearn sage used for accents. */

:root{--sage:#84B172}

/* ─── Dashboard ─── */
.ld-h{font-size:18px;font-weight:800;margin:28px 0 12px}
.ld-h3{font-size:15px;font-weight:800;margin:0 0 10px}
.ld-muted{color:var(--tm)}
.ld-small{font-size:12.5px;line-height:1.5;display:block}
.ld-good{color:var(--gd);font-weight:700;font-size:12.5px}
.ld-warn{color:#8a4b00}
.ld-pass{color:var(--gd);font-weight:800}
.ld-fail{color:#8a1c12;font-weight:800}
.ld-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ld-row-start{justify-content:flex-start}
.ld-link{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--g);text-decoration:underline;cursor:pointer;font-weight:700}
.ld-link:focus-visible,.ld-item:focus-visible,.ld-rec:focus-visible,.ld-chip:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.ld-badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--gl);color:var(--gd);white-space:nowrap}
.ld-badge-off{background:#f1efe9;color:var(--tm)}
.ld-badge-done{background:var(--g);color:#fff}
.ld-bar{display:block;height:8px;border-radius:6px;background:var(--gb);overflow:hidden;margin:6px 0}
.ld-bar span{display:block;height:100%;background:var(--sage);border-radius:6px}
.ld-cover{width:100%;height:100%;object-fit:contain;background:var(--gl);display:block}
.ld-cover-blank{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--g),var(--gd));color:rgba(255,255,255,.6);min-height:110px}

.ld-continue{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;align-items:center;background:var(--gl);border:1.5px solid var(--gm);border-radius:16px;padding:16px;margin-bottom:18px}
.ld-continue-img{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#fff}
.ld-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gd)}
.ld-continue-title{font-size:21px;font-weight:800;line-height:1.25;margin:4px 0}
.ld-continue .btn{margin-top:10px}

.ld-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ld-stat{background:#fff;border:1.5px solid var(--gb);border-radius:14px;padding:14px}
.ld-stat-n{font-size:26px;font-weight:800;line-height:1.1}
.ld-stat-n small{font-size:14px;color:var(--tm);font-weight:700}
.ld-stat-l{font-size:13px;color:var(--tm);margin-bottom:4px}

.ld-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ld-course{background:#fff;border:1.5px solid var(--gb);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ld-course-img{aspect-ratio:16/9;background:var(--gl)}
.ld-course-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ld-course-title{font-size:16px;font-weight:800;line-height:1.3;margin:2px 0}
.ld-course .ld-row:last-child{margin-top:auto;padding-top:6px}

.ld-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:18px}
.ld-panel{background:#fff;border:1.5px solid var(--gb);border-radius:14px;padding:16px;min-width:0}
.ld-list{list-style:none;margin:0;padding:0}
.ld-list li{border-bottom:1px solid var(--gb)}
.ld-list li:last-child{border-bottom:none}
.ld-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;font:inherit;color:var(--t);padding:9px 4px;cursor:pointer;border-radius:8px}
.ld-item:hover{background:var(--gl)}
.ld-item > span:last-child{display:flex;flex-direction:column;min-width:0}
.ld-tick{color:var(--gd);font-weight:800}
.ld-dot{width:9px;height:9px;border-radius:50%;background:#c77700;margin-top:6px;flex:0 0 9px}
.ld-result{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 4px}
.ld-result > span:first-child{display:flex;flex-direction:column;min-width:0}
.ld-q{padding:10px 4px}
.ld-q-text{white-space:pre-wrap;margin:4px 0}
.ld-reply{background:var(--gl);border-radius:10px;padding:8px 10px;font-size:14px;white-space:pre-wrap}

.ld-recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ld-rec{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--gb);border-radius:14px;overflow:hidden;color:var(--t);text-decoration:none}
.ld-rec .ld-cover{aspect-ratio:16/9;height:auto}
.ld-rec-body{display:flex;flex-direction:column;gap:5px;padding:12px}
.ld-rec:hover{border-color:var(--g)}

.ld-empty{text-align:center;padding:36px 20px;background:var(--gl);border:1.5px solid var(--gm);border-radius:16px}
.ld-empty-ic{color:var(--g);margin-bottom:8px}
.ld-loading{display:grid;gap:12px}
.ld-sk{height:90px;border-radius:14px;background:linear-gradient(90deg,#efede6,#f7f5f0,#efede6);background-size:200% 100%;animation:ldsk 1.2s infinite}
.ld-sk-s{height:40px;width:60%}
@keyframes ldsk{to{background-position:-200% 0}}

.ld-modal{position:fixed;inset:0;background:rgba(15,25,18,.55);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}
.ld-modal-in{background:#fff;border-radius:16px;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ld-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--gb);position:sticky;top:0;background:#fff}
.ld-modal-head h3{font-size:17px;font-weight:800;margin:0}
.ld-x{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--tm);width:44px;height:44px;border-radius:10px}
.ld-x:focus-visible{outline:3px solid var(--g)}
.ld-modal-body{padding:18px}
.ld-goal-opts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ld-chip{border:1.5px solid var(--gb);background:#fff;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.ld-chip.is-on{background:var(--g);border-color:var(--g);color:#fff}
.ld-fc{border:1.5px solid var(--gm);border-radius:14px;padding:22px;margin:12px 0;background:var(--gl);min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.ld-fc-front{font-size:19px;font-weight:800;white-space:pre-wrap}
.ld-fc-back{font-size:16px;white-space:pre-wrap;border-top:1px dashed var(--gm);padding-top:14px}
.ld-fc-actions,.ld-fc-grade{text-align:center}
.ld-fc-grade .ld-row{justify-content:center}
.ld-fc-done{text-align:center}
.ld-pr-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ld-pr-filters .pi{flex:1 1 180px;margin:0}
.ld-pr-q{border:none;padding:0;margin:10px 0}
.ld-pr-q legend{font-weight:800;font-size:16px;margin-bottom:8px;line-height:1.4}
.ld-opt{display:flex;gap:12px;align-items:center;padding:10px 8px;border-radius:8px;cursor:pointer;min-height:44px;border:1.5px solid transparent}
.ld-opt input{width:20px;height:20px;flex:0 0 20px;margin:0}
.ld-opt.is-right,.cp-opt.is-right{border:1.5px solid var(--g);background:#eef6ea}
.ld-opt.is-wrong{border:1.5px solid #d9a19b;background:#fbeceb}

@media(max-width:760px){
  .ld-continue{grid-template-columns:minmax(0,1fr);padding:12px}
  .ld-continue-img{aspect-ratio:16/9}
  .ld-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-continue .btn{width:100%}
}

/* ─── Player additions ─── */
.cp-skip{position:absolute;left:-9999px}
.cp-skip:focus{position:static;display:inline-block;margin-bottom:8px;font-weight:700;color:var(--g)}
.cp-mod-t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cp-mod-n{font-size:11px;font-weight:800;color:var(--tl);text-transform:none;letter-spacing:0;white-space:nowrap}
.cp-mod-done{color:var(--gd)}
.cp-l-overview{margin-bottom:10px}
.cp-kicker{font-size:12px;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
#cp-lesson-h:focus{outline:none}
#cp-lesson-h:focus-visible{outline:3px solid var(--g);outline-offset:4px;border-radius:4px}
.cp-h3{font-size:16px;font-weight:800;margin:22px 0 8px}
.cp-lead{font-size:1.06em;color:var(--tm);margin:6px 0 10px}
.cp-list{margin:0 0 6px 20px;line-height:1.7}
.cp-ov-cover{width:100%;max-height:340px;object-fit:contain;background:var(--gl);border-radius:12px;margin-bottom:16px;display:block}
.cp-ov-actions{margin:16px 0}
.cp-ov-mods{margin:0 0 10px 20px;line-height:1.8}
.cp-done-box{background:var(--gl);border:1.5px solid var(--gm);border-radius:14px;padding:22px;text-align:center;margin:12px 0}
.cp-done-box .btn{margin-top:8px}
.cp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}

.cp-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--gb)}
.cp-tool{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--gb);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--t);cursor:pointer}
.cp-tool:hover{border-color:var(--g)}
.cp-tool:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.cp-tool[aria-pressed="true"]{background:var(--gl);border-color:var(--g);color:var(--gd)}
.cp-tool-group{display:inline-flex;align-items:center;gap:6px}
.cp-tool-group .cp-small{min-width:54px;text-align:center}

.cp-video{position:relative;padding-bottom:56.25%;height:0;margin-bottom:12px;border-radius:10px;overflow:hidden;background:#111}
.cp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cp-video-lite{padding:0;height:auto;background:var(--gl);border:1.5px dashed var(--gm);display:flex;justify-content:center;align-items:center;min-height:120px}
.cp-img-lite{display:block;width:100%;text-align:left;padding:14px;margin:10px 0;border:1.5px dashed var(--gm);border-radius:10px;background:var(--gl);font:inherit;font-size:14px;cursor:pointer;color:var(--gd);font-weight:700}

.cp-transcript{margin:14px 0;border:1.5px solid var(--gb);border-radius:12px;background:#fff}
.cp-transcript summary{cursor:pointer;font-weight:800;padding:12px 14px;min-height:44px}
.cp-transcript-body{padding:0 14px 12px;max-height:420px;overflow:auto}

.cp-files,.cp-ask{margin-top:22px;padding-top:4px;border-top:1px solid var(--gb)}
.cp-files ul{list-style:none;margin:0;padding:0}
.cp-files li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--gb)}
.cp-ask textarea{min-height:80px;width:100%}
.cp-qa{border:1.5px solid var(--gb);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff}
.cp-qa-q{white-space:pre-wrap;margin:4px 0}
.cp-qa-a{background:var(--gl);border-radius:8px;padding:8px 10px;white-space:pre-wrap;font-size:.95em}

.cp-nav{display:flex;justify-content:space-between;align-items:stretch;gap:12px;flex-wrap:wrap;margin-top:6px}
.cp-nav .btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:48%;text-align:left}
.cp-nav .btn.bg2{margin-left:auto;align-items:flex-end;text-align:right}
.cp-nav-t{font-size:12px;font-weight:500;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-nav-note{margin:auto 0 auto auto;max-width:48%;text-align:right}
.cp-quiz-head{margin-bottom:12px}
.cp-final{background:#fff7e6;border:1.5px solid #f0d49b;border-radius:10px;padding:10px 12px;font-size:14px}
.cp-attempts{margin-top:4px}

/* Text size (A- / A+), remembered on this device. */
#page-course-player[data-text="s"] #cp-lesson-content{font-size:14.5px}
#page-course-player[data-text="l"] #cp-lesson-content{font-size:18.5px}
#page-course-player[data-text="xl"] #cp-lesson-content{font-size:21px}
#page-course-player[data-text="l"] .cp-opt,#page-course-player[data-text="xl"] .cp-opt{font-size:1em}

@media(max-width:640px){
  .cp-nav .btn,.cp-nav-note{max-width:100%;width:100%}
  .cp-nav .btn.bg2{order:-1}
  .cp-files li{flex-wrap:wrap}
}

/* Lesson content: comfortable reading width and spacing, whatever the
   editor produced. Styles an admin writes inside a lesson are scoped to
   .pl-lesson by the admin sanitiser, so they cannot restyle the page. */
.pl-lesson{max-width:80ch;line-height:1.7}
.pl-lesson h1,.pl-lesson h2,.pl-lesson h3,.pl-lesson h4{line-height:1.3;margin:1.2em 0 .5em;font-weight:800}
.pl-lesson p,.pl-lesson ul,.pl-lesson ol,.pl-lesson table,.pl-lesson blockquote,.pl-lesson figure{margin:0 0 1em}
.pl-lesson ul,.pl-lesson ol{padding-left:1.4em}
.pl-lesson img{max-width:100%;height:auto;border-radius:8px}
.pl-lesson figure figcaption{font-size:.88em;color:var(--tm);margin-top:4px}
.pl-lesson table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto}
.pl-lesson th,.pl-lesson td{border:1px solid var(--gb);padding:6px 10px;text-align:left;vertical-align:top}
.pl-lesson blockquote{border-left:4px solid var(--sage);padding:4px 0 4px 14px;color:var(--tm)}
.pl-lesson a{color:var(--g);text-decoration:underline}

/* ─── Branching scenarios ─── */
.sp{margin-top:6px}
.sp-step{background:#fff;border:1.5px solid var(--gb);border-radius:14px;padding:18px}
.sp-step:focus{outline:none}
.sp-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gd);margin-bottom:8px}
.sp-text{margin-bottom:12px}
.sp-obs{background:var(--gl);border-radius:10px;padding:10px 14px;margin:10px 0}
.sp-obs-h{font-weight:800;font-size:13px;margin-bottom:4px}
.sp-obs ul{margin:0 0 0 18px}
.sp-refs ul{margin:0 0 0 18px}
.sp-refs{margin:10px 0}
.sp-q{font-weight:800;margin:14px 0 10px}
.sp-opts{display:grid;gap:8px}
.sp-opt{text-align:left;font:inherit;background:#fff;border:1.5px solid var(--gb);border-radius:10px;padding:12px 14px;cursor:pointer;min-height:48px;color:var(--t)}
.sp-opt:hover:not(:disabled){border-color:var(--g);background:var(--gl)}
.sp-opt:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.sp-opt:disabled{cursor:default;opacity:.75}
.sp-opt.is-ok{border-color:var(--g);background:#eef6ea;opacity:1}
.sp-opt.is-bad{border-color:#d9a19b;background:#fbeceb;opacity:1}
.sp-fb{margin-top:12px}
.sp-feedback{border-radius:10px;padding:12px 14px;margin-bottom:10px}
.sp-feedback-ok{background:#eef6ea;color:#1f4a2e}
.sp-feedback-bad{background:#fbeceb;color:#6d1a12}
.sp-ok{color:var(--gd);font-weight:800;font-size:12px}
.sp-bad{color:#8a1c12;font-weight:800;font-size:12px}
.sp-history{margin-bottom:12px;font-size:13.5px}
.sp-history summary{cursor:pointer;font-weight:700}
.sp-score{font-weight:800;font-size:16px}
.sp-note{font-size:12px;color:var(--tm);margin-top:12px;font-style:italic}

/* ─── Download notes: print only the lesson ─── */
@media print{
  body.cp-print *{visibility:hidden}
  body.cp-print #cp-lesson-content,body.cp-print #cp-lesson-content *{visibility:visible}
  body.cp-print #cp-lesson-content{position:absolute;left:0;top:0;width:100%;border:none !important;background:#fff !important;padding:0 !important}
  body.cp-print .cp-noprint,body.cp-print .cp-video{display:none !important}
  body.cp-print .cp-transcript-body{max-height:none;overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  .ld-sk{animation:none}
}