/* ============================================================
   Course UI. Loaded after theme.css and overrides it.
   The main site is an editorial content site; this is a place
   people work in. Sans throughout, a real app shell, a sidebar
   you can actually read.
   ============================================================ */

:root{
  /* one family, weight does the work */
  --bs-serif:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --bs-sans:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --ui-shell:#0d1e34;
  --ui-shell-hi:#16304f;
  --ui-shell-text:#c3d2e4;
  --ui-shell-dim:#7f95b0;
  --ui-page:#eef1f6;
  --ui-card:#ffffff;
  --ui-ink:#0f1c2e;
  --ui-ink-2:#3d4c63;
  --ui-muted:#68788f;
  --ui-line:#e2e7ef;
  --ui-brand:#1879c8;
  --ui-brand-dk:#0e5ba0;
  --ui-brand-lt:#e8f2fb;
  --ui-green:#0f9268;
  --ui-green-lt:#e4f4ee;
  --ui-radius:14px;
  --ui-rail:300px;
}

body{background:var(--ui-page);color:var(--ui-ink-2);font-size:17px;line-height:1.68;
  font-family:var(--bs-sans);letter-spacing:-.006em}
h1,h2,h3,h4,h5{font-family:var(--bs-sans);color:var(--ui-ink);letter-spacing:-.021em}
h1{font-weight:800}
h2,h3{font-weight:700}
h4,h5{font-weight:700}
strong{color:var(--ui-ink);font-weight:700}
a{color:var(--ui-brand-dk);font-weight:500}

/* ---- shell ---- */
.bsl-main{padding:0;min-height:0}
.bsl-wrap{max-width:1440px;padding:0}
.bsl-wrap.bsl-has-rail{gap:0}
@media (min-width:960px){
  .bsl-wrap.bsl-has-rail{grid-template-columns:var(--ui-rail) minmax(0,1fr);
    align-items:stretch;gap:0}
}
.bsl-col{padding:34px 34px 90px}
@media (max-width:960px){.bsl-col{padding:22px 18px 80px}}
.bsl-read{max-width:820px;margin:0 auto}

/* the reading surface is a card, not bare page */
.bsl-col > article{background:var(--ui-card);border-radius:var(--ui-radius);
  border:1px solid var(--ui-line);padding:38px 44px 44px;
  box-shadow:0 1px 2px rgba(15,28,46,.04),0 10px 30px -18px rgba(15,28,46,.18)}
@media (max-width:760px){.bsl-col > article{padding:24px 20px 30px;border-radius:10px}}

.bsl-page-head{margin:0 0 6px}
.bsl-page-head h1{font-size:clamp(1.85rem,1.3rem + 1.5vw,2.5rem);line-height:1.12;
  margin:0 0 18px}

/* the site header sits above the shell */
.bsl-header{background:var(--ui-card);border-bottom:1px solid var(--ui-line)}
.bsl-header .bsl-wrap{max-width:1440px;padding:0 26px}
.bsl-footer{background:var(--ui-shell);color:var(--ui-shell-dim);border:0}
.bsl-footer a{color:var(--ui-shell-text)}

/* ============================ the rail ============================ */
@media (min-width:960px){
  .bsl-rail{background:var(--ui-shell);position:static;max-height:none;overflow:visible;
    margin:0;padding:0}
  .bsl-rail-box{position:sticky;top:0;max-height:100vh;overflow-y:auto;
    background:transparent;border:0;padding:26px 0 40px;
    scrollbar-width:thin;scrollbar-color:#2b4466 transparent}
  .bsl-rail-inner{padding:0}
  .bsl-rail-toggle{display:none}
}
.bsl-rail-box::-webkit-scrollbar{width:8px}
.bsl-rail-box::-webkit-scrollbar-thumb{background:#27405f;border-radius:8px}

.bsl-rail-home{font-size:1.12rem;font-weight:800;color:#fff;line-height:1.3;
  padding:0 22px;margin:0 0 16px;letter-spacing:-.02em}
.bsl-rail-home:hover{color:#fff;opacity:.85}
.bsl-rail-meter{height:7px;border-radius:99px;background:#1c3450;margin:0 22px;
  background:#1c3450}
.bsl-rail-meter span{background:var(--ui-green)}
.bsl-rail-pct{margin:9px 22px 22px;font-size:12px;letter-spacing:.09em;
  color:var(--ui-shell-dim);font-weight:700}

.bsl-sec{border:0;margin:0 10px}
.bsl-sec > summary{padding:12px 34px 12px 14px;font-size:14.5px;font-weight:700;
  color:var(--ui-shell-text);line-height:1.35;border-radius:10px;position:relative}
.bsl-sec > summary:hover{background:var(--ui-shell-hi);color:#fff}
.bsl-sec.is-here > summary{color:#fff}
.bsl-sec > summary::after{right:14px;top:19px;width:7px;height:7px;
  border-color:var(--ui-shell-dim)}
.bsl-sec[open] > summary::after{top:22px}

.bsl-les{padding:2px 0 10px}
.bsl-les a{font-size:14.5px;line-height:1.4;color:var(--ui-shell-text);
  padding:9px 14px;border-radius:10px;gap:11px;font-weight:500}
.bsl-les a:hover{background:var(--ui-shell-hi);color:#fff}
.bsl-les > li.is-here > a{background:var(--ui-brand);color:#fff;font-weight:700}
.bsl-les > li.is-here > a:hover{background:var(--ui-brand)}

.bsl-steps{border-left:1px solid #24405f;margin:2px 0 8px 24px;padding:2px 0 2px 8px}
.bsl-steps a{font-size:14px;color:var(--ui-shell-dim);padding:8px 12px;border-radius:9px;
  gap:10px;font-weight:500}
.bsl-steps a:hover{background:var(--ui-shell-hi);color:#fff}
.bsl-steps > li.is-here > a{color:#fff;font-weight:700;background:#1b3554}
.bsl-steps > li.is-here > a{background:#1b3554}

.bsl-tick{width:16px;height:16px;margin-top:2px;border:2px solid #38547a;
  border-color:#38547a}
li.is-done > a .bsl-tick{background:var(--ui-green);border-color:var(--ui-green)}
li.is-done > a .bsl-tick::after{left:4.5px;top:1.5px;width:4px;height:7px;
  border-width:2px}
li.is-here > a .bsl-tick{border-color:#fff}

/* narrow: the rail becomes a proper sheet, not a thin box */
@media (max-width:959px){
  .bsl-rail{margin:0}
  .bsl-rail-box{background:var(--ui-shell);border:0;border-radius:0}
  .bsl-rail-toggle{color:#fff;font-size:15px;padding:15px 20px}
  .bsl-rail-inner{padding:0 0 18px}
  .bsl-rail-home,.bsl-rail-pct{color:#fff}
}

/* ======================== content components ======================== */
.bsl-course h3{font-size:1.32rem;margin:2.4rem 0 .9rem}
.bsl-course h4{font-size:1.08rem;margin:1.9rem 0 .6rem}
.bsl-course h5{font-size:.98rem;margin:1.4rem 0 .5rem}
.bsl-course p{margin:0 0 1.15em}
.bsl-course > *:first-child{margin-top:0}
.bsl-course ul,.bsl-course ol{margin:0 0 1.3em;padding-left:1.35em}
.bsl-course li{margin-bottom:.5em}

.bsl-lead{font-size:1.14rem;color:var(--ui-ink-2);margin-bottom:1.8rem}

/* video + its notes read as one object */
.bsl-course .bsl-vid,.learndash-wrapper .bsl-vid{border-radius:12px 12px 0 0;
  box-shadow:none;margin-bottom:0}
.bsl-video-caption,.bsltips{max-width:606px;margin:0 auto 2.2rem;
  background:#f6f8fb;border:1px solid var(--ui-line);border-top:0;
  border-radius:0 0 12px 12px;padding:1.1rem 1.35rem;font-size:.98rem;color:var(--ui-ink-2)}
.bsl-video-caption h5,.bsltips .bsltips:first-child b{font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ui-muted);font-weight:800;margin:0 0 .55rem}
.bsl-video-caption p{margin:0 0 .5em}
.bsl-video-caption p:last-child{margin:0}

/* callouts */
.course-info-box{background:var(--ui-brand-lt);border:0;border-left:4px solid var(--ui-brand);
  border-radius:0 12px 12px 0;padding:1.3rem 1.5rem;margin:2rem 0}
.course-info-box h4{margin:0 0 .5rem;font-size:1.02rem;color:var(--ui-brand-dk)}
.course-info-box > *:last-child{margin-bottom:0}
.course-key-point{background:var(--ui-green-lt);border:0;border-left:4px solid var(--ui-green);
  border-radius:0 12px 12px 0;padding:1.15rem 1.5rem;margin:2rem 0;color:var(--ui-ink)}
.course-key-point strong:first-child{color:var(--ui-green)}
/* It sits mid-sentence, so it is a number in a sentence - not a pill the
   learner might try to press. */
.signscount{font-weight:800}

.bsl-btn,.learndash-wrapper .ld-button{border-radius:11px;font-weight:700;
  font-family:var(--bs-sans);letter-spacing:-.01em;padding:13px 22px;font-size:.98rem}

/* LearnDash furniture */
.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-lesson-status{background:transparent;border:0;padding:0 0 4px}
.learndash-wrapper .ld-status{border-radius:99px;font-weight:700;font-size:.72rem;
  letter-spacing:.08em}
.learndash-wrapper .ld-item-list-item{border-radius:12px;border-color:var(--ui-line)}
.learndash-wrapper .ld-item-list-item:hover{border-color:var(--ui-brand);
  box-shadow:0 6px 18px -10px rgba(24,121,200,.4)}
.learndash-wrapper .ld-table-list-header,
.learndash-wrapper .ld-item-list .ld-section-heading h2{font-family:var(--bs-sans)}
.learndash-wrapper .ld-progress-bar{height:8px}
.bsl-footer .bsl-wrap{padding:0 26px}

/* --- fixes on first look --- */
/* iframes are inline by default, so margin:auto never centred the video and it
   sat left of its own caption, with a baseline gap between them */
.bsl-course .bsl-vid,.learndash-wrapper .bsl-vid{display:block;margin:0 auto!important}
.bsl-video-caption,.bsltips{margin-top:0}

/* theme.css scopes these under .bsl-course, so match that specificity */
.bsl-course .course-key-point,.learndash-wrapper .course-key-point{
  background:var(--ui-green-lt);border:0;border-left:4px solid var(--ui-green);
  border-radius:0 12px 12px 0;padding:1.15rem 1.5rem;margin:2rem 0;color:var(--ui-ink)}
.bsl-course .course-info-box,.learndash-wrapper .course-info-box{
  background:var(--ui-brand-lt);border:0;border-left:4px solid var(--ui-brand);
  border-radius:0 12px 12px 0;padding:1.3rem 1.5rem;margin:2rem 0}

/* sub-headings were reading as body text */
.bsl-course h4{font-size:1.16rem;font-weight:800;color:var(--ui-ink);margin:2rem 0 .55rem}
.bsl-course h3{font-size:1.42rem;margin:2.6rem 0 .9rem}

/* keep the pinned rail showing its top */
@media (min-width:960px){.bsl-rail-box{top:0;max-height:100vh}}

/* the breadcrumb + progress block read as a foreign grey box inside the card;
   it is metadata, so let it sit quietly under the title */
.learndash-wrapper .ld-lesson-status,
.learndash-wrapper .ld-course-status{background:transparent!important;border:0!important;
  padding:0!important;margin:0 0 30px!important;box-shadow:none!important}
.learndash-wrapper .ld-lesson-status .ld-breadcrumbs{padding:0 0 10px}
.learndash-wrapper .ld-breadcrumbs a{font-weight:600}
.bsl-page-head{border:0}
.bsl-page-head + .bsl-entry hr:first-child{display:none}
.learndash-wrapper .ld-progress{margin:0}

/* ---- in-page signing-hand picker ---- */
.bsl-handpick{border:2px solid var(--ui-line);border-radius:16px;padding:26px 28px;
  margin:2.4rem 0;background:#fbfcfe}
.bsl-handpick-q{font-size:1.2rem;font-weight:800;color:var(--ui-ink);margin:0 0 18px}
.bsl-handpick-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.bsl-handpick-opts{grid-template-columns:1fr}}
.bsl-handpick-btn{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px 16px;border:2px solid var(--ui-line);border-radius:14px;background:#fff;
  text-decoration:none;color:var(--ui-ink);transition:border-color .15s,background .15s;
  min-height:132px;justify-content:center}
.bsl-handpick-btn:hover{border-color:var(--ui-brand);background:var(--ui-brand-lt);
  text-decoration:none;color:var(--ui-ink)}
.bsl-handpick-btn.is-on{border-color:var(--ui-green);background:var(--ui-green-lt)}
.bsl-handpick-icon{width:46px;height:46px;color:var(--ui-brand)}
.bsl-handpick-btn.is-on .bsl-handpick-icon{color:var(--ui-green)}
.bsl-handpick-label{font-size:1.12rem;font-weight:800}
.bsl-handpick-state{font-size:.85rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ui-muted)}
.bsl-handpick-btn.is-on .bsl-handpick-state{color:var(--ui-green)}
.bsl-handpick-note{margin:18px 0 0;font-size:.95rem;color:var(--ui-muted)}

/* Signing-hand picker: same icon as the toolbar at the bottom of the page. */
.bsl-handpick-art{display:block;line-height:0}
.bsl-handpick-icon{width:44px;height:44px;display:block;color:var(--ui-brand);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bsl-handpick-art.is-left .bsl-handpick-icon{transform:scaleX(-1)}

/* ============ v2 spacing pass ============ */
/* LearnDash's infobar packed a breadcrumb, a badge, a label and a bar into one
   grey box with no padding. The rail already says where you are, so replace it. */
.learndash-wrapper .ld-lesson-status,
.learndash-wrapper .ld-course-status,
.learndash-wrapper .ld-breadcrumbs{display:none!important}

.bsl-page-head{margin:0 0 20px;padding:0;border:0}
.bsl-page-head h1{margin:0;line-height:1.12}

.bsl-lessonbar{margin:0 0 34px}
.bsl-lessonbar-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin:0 0 9px}
.bsl-lessonbar-name{font-size:1rem;font-weight:800;color:var(--ui-ink);letter-spacing:-.01em}
.bsl-lessonbar-count{flex:none;font-size:.92rem;font-weight:700;color:var(--ui-muted)}
.bsl-lessonbar-track{height:8px;border-radius:99px;background:#e7ebf1;overflow:hidden}
.bsl-lessonbar-track > span{display:block;height:100%;border-radius:99px;
  background:var(--ui-green);transition:width .3s ease}

/* Signing-hand picker: rebuilt spacing. The old card inherited h3 and p margins
   from the content styles, which is where the dead space came from. */
.bsl-course .bsl-handpick,.learndash-wrapper .bsl-handpick{
  margin:2.6rem 0;padding:24px;border:1px solid var(--ui-line);border-radius:16px;
  background:#fff;box-shadow:0 1px 3px rgba(13,30,52,.07)}
.bsl-course .bsl-handpick-q{font-size:1.2rem;font-weight:800;color:var(--ui-ink);
  margin:0 0 7px;line-height:1.3}
.bsl-course .bsl-handpick-note{margin:0 0 18px;font-size:.97rem;line-height:1.55;
  color:var(--ui-muted)}
.bsl-handpick-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.bsl-handpick-opts{grid-template-columns:1fr}}
.bsl-handpick-btn{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;padding:22px 16px;border:2px solid var(--ui-line);
  border-radius:14px;background:#fff;text-decoration:none;color:var(--ui-ink);
  transition:border-color .15s,background .15s}
.bsl-handpick-btn:hover{border-color:var(--ui-brand);background:var(--ui-brand-lt)}
.bsl-handpick-btn.is-on{border-color:var(--ui-green);background:var(--ui-green-lt)}
.bsl-handpick-icon{width:38px;height:38px}
.bsl-handpick-label{font-size:1.06rem;font-weight:800;line-height:1}
.bsl-handpick-state{font-size:.9rem;font-weight:600;line-height:1;letter-spacing:0;
  text-transform:none;color:var(--ui-muted)}
.bsl-handpick-btn.is-on .bsl-handpick-state{color:var(--ui-green);font-weight:700}

/* my own strip replaces this one; the plugin bar had no padding */
.bsl-entry .ld-progress,.learndash-wrapper .ld-progress{display:none!important}

/* A heading sitting directly above a sign video is a label for that video, not
   a section heading - give it its own quieter, tighter treatment. */
.bsl-course h2:has(+ .bsl-vid),.bsl-course h3:has(+ .bsl-vid),.bsl-course h4:has(+ .bsl-vid),
.learndash-wrapper h3:has(+ .bsl-vid){
  font-size:1.06rem;font-weight:800;letter-spacing:.03em;color:var(--ui-brand);
  margin:2.4rem 0 .7rem;line-height:1.3}
.bsl-course > :first-child:has(+ .bsl-vid){margin-top:0}
.bsl-course hr + h2:has(+ .bsl-vid),.bsl-course hr + h3:has(+ .bsl-vid),
.bsl-course hr + h4:has(+ .bsl-vid){margin-top:1.9rem}
/* wpautop puts the video inside its own <p>, so match that shape too */
.bsl-entry h2:has(+ p > .bsl-vid),.bsl-entry h3:has(+ p > .bsl-vid),
.bsl-entry h4:has(+ p > .bsl-vid),.bsl-entry h2:has(+ .bsl-vid),
.bsl-entry h3:has(+ .bsl-vid),.bsl-entry h4:has(+ .bsl-vid){
  font-size:1.06rem!important;font-weight:800;letter-spacing:.03em;
  color:var(--ui-brand);margin:2.4rem 0 .7rem!important;line-height:1.3}
.bsl-entry > *:first-child:has(+ p > .bsl-vid),
.bsl-entry > *:first-child:has(+ .bsl-vid){margin-top:0!important}
.bsl-entry hr + h2,.bsl-entry hr + h3,.bsl-entry hr + h4{margin-top:1.9rem!important}
.bsl-entry hr{margin:2rem 0;border:0;border-top:1px solid var(--ui-line)}
.bsl-entry p:empty,.bsl-course p:empty{display:none}
.bsl-lessonbar{margin-bottom:30px}
.bsl-entry > h2:first-of-type,.bsl-entry > h3:first-of-type,.bsl-entry > h4:first-of-type,
.bsl-course > h2:first-of-type,.bsl-course > h3:first-of-type,.bsl-course > h4:first-of-type,
.bsl-entry > .bsl-course:first-child > :first-child{margin-top:0!important}

/* The fingerspelled name must always read as one line. --fs-size is worked out
   from the letter count in PHP, so the hands shrink instead of wrapping. */
.bsl-namecard .bsl-namestrip .bsl-fs-w__strip,
.bsl-namecard .bsl-namestrip .bsl-fs-w__group{flex-wrap:nowrap!important}
.bsl-namecard .bsl-namestrip .bsl-fs-w__strip{justify-content:center}
.bsl-namecard .bsl-namestrip .bsl-fs-w__hand{
  width:var(--fs-size, 104px)!important;height:var(--fs-size, 104px)!important}
@media (max-width:640px){
  .bsl-namecard .bsl-namestrip .bsl-fs-w__hand{
    width:var(--fs-size-sm, 64px)!important;height:var(--fs-size-sm, 64px)!important}
}

/* ============ Assessments ============ */
.learndash-wrapper .wpProQuiz_content{font-family:var(--bs-sans)}
.learndash-wrapper .wpProQuiz_question_text{font-size:1.14rem;font-weight:700;
  color:var(--ui-ink);line-height:1.45;margin:0 0 20px}
.learndash-wrapper .wpProQuiz_questionList{margin:0;padding:0;border:0}
.learndash-wrapper .wpProQuiz_questionListItem{list-style:none;margin:0 0 10px;
  padding:0!important;border:0!important;background:none!important}
.learndash-wrapper .wpProQuiz_questionListItem label{display:block;margin:0;
  font-size:1.02rem;line-height:1.5;color:var(--ui-ink)}
/* a choice: the whole row is the target, comfortably big to tap */
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="radio"]),
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="checkbox"]){
  display:flex;align-items:flex-start;gap:13px;padding:15px 17px;
  border:2px solid var(--ui-line);border-radius:12px;background:#fff;
  cursor:pointer;transition:border-color .15s,background .15s}
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="radio"]):hover,
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="checkbox"]):hover{
  border-color:var(--ui-brand);background:var(--ui-brand-lt)}
.learndash-wrapper .wpProQuiz_questionListItem input[type="radio"],
.learndash-wrapper .wpProQuiz_questionListItem input[type="checkbox"]{
  flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ui-brand)}
/* a typed answer - LearnDash boxes the row as well as the field */
.learndash-wrapper input.wpProQuiz_questionInput,
.learndash-wrapper .wpProQuiz_questionListItem input[type="text"]{
  display:block;width:100%;max-width:460px;box-sizing:border-box;margin:0;
  padding:14px 16px;font-family:inherit;font-size:1.05rem;color:var(--ui-ink);
  background:#fff;border:2px solid var(--ui-line);border-radius:12px;
  transition:border-color .15s,box-shadow .15s}
.learndash-wrapper input.wpProQuiz_questionInput:focus,
.learndash-wrapper .wpProQuiz_questionListItem input[type="text"]:focus{
  outline:none;border-color:var(--ui-brand);box-shadow:0 0 0 4px var(--ui-brand-lt)}
/* the quiz DOM is built in JS, so match on shape not class: any wrapper that
   holds a text field loses its own box, and the field itself is the control */
.learndash-wrapper .wpProQuiz_content li:has(input[type="text"]),
.learndash-wrapper .wpProQuiz_content label:has(input[type="text"]),
.learndash-wrapper .wpProQuiz_content div:has(> label > input[type="text"]){
  border:0!important;outline:0!important;background:none!important;
  padding:0!important;margin:0!important;box-shadow:none!important}
.learndash-wrapper .wpProQuiz_content input[type="text"]{
  display:block!important;width:100%!important;max-width:440px!important;
  box-sizing:border-box!important;margin:0!important;padding:13px 16px!important;
  font-family:var(--bs-sans)!important;font-size:1.05rem!important;
  color:var(--ui-ink)!important;background:#fff!important;
  border:2px solid var(--ui-line)!important;border-radius:11px!important;
  box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.learndash-wrapper .wpProQuiz_content input[type="text"]:focus{
  outline:none!important;border-color:var(--ui-brand)!important;
  box-shadow:0 0 0 4px var(--ui-brand-lt)!important}
/* A question is a form. Centring the clip while the question text and the answer
   field sit left gave three different left edges - line them all up instead. */
.learndash-wrapper .wpProQuiz_content .bsl-vid{
  margin:0 0 18px 0!important;max-width:606px;width:100%}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text{max-width:606px}
/* LearnDash puts a <br> between the radio and its text, which breaks the row */
.learndash-wrapper .wpProQuiz_questionListItem label br{display:none}
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="radio"]),
.learndash-wrapper .wpProQuiz_questionListItem label:has(input[type="checkbox"]){
  align-items:center;padding:13px 17px}

/* --- quiz answer options: radio/checkbox beside its text (LearnDash builds
   this DOM in JS: div.wpProQuiz_questionListItem > label > input + bare text
   node + absolutely-positioned .ld-quiz-question-item__status).
   Grid is used rather than flex because the answer text is an unwrapped text
   node: as a flex item it cannot shrink, so long answers drop to their own
   line. In a grid cell the text wraps normally with a hanging indent. --- */
/* Only choice answers get the two-column grid. A free-text answer lives in
   the same label, and without this guard its input was placed in the 19px
   radio column and collapsed to a stub. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem > label:has(input[type="radio"]),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem > label:has(input[type="checkbox"]){
  display:grid!important;grid-template-columns:19px minmax(0,1fr);
  align-items:start;gap:0 12px;width:100%;line-height:1.5;cursor:pointer}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem > label > input[type="radio"],
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem > label > input[type="checkbox"]{
  grid-column:1;grid-row:1;align-self:start!important;
  width:19px!important;height:19px!important;min-width:0!important;
  margin:3px 0 0 0!important;padding:0!important;display:inline-block!important;
  accent-color:var(--ui-brand);cursor:pointer}

/* --- course completion page ([bsl_course_complete]) --- */
.bsl-complete-hero h2{margin:0 0 10px;font-size:1.9rem;line-height:1.2}
.bsl-complete-hero p{margin:0 0 26px;font-size:1.08rem}
.bsl-complete-card{border:1px solid var(--ui-line);border-radius:14px;
  padding:26px 26px 22px;margin:0 0 22px;background:var(--ui-card)}
.bsl-complete-card h3{margin:0 0 10px;font-size:1.25rem}
.bsl-complete-card > p{margin:0 0 18px}
.bsl-note{border-radius:11px;padding:14px 18px;margin:0 0 22px;
  border-left:4px solid var(--ui-green);background:var(--ui-green-lt)}
.bsl-note-warn{border-left-color:#b8860b;background:#fdf6e3}
.bsl-reviewform fieldset{border:0;padding:0;margin:0 0 22px}
.bsl-reviewform legend{padding:0;margin:0 0 10px;font-weight:600}
.bsl-stars-row{display:flex;gap:10px;flex-wrap:wrap}
.bsl-star{position:relative}
.bsl-star input{position:absolute;opacity:0;width:100%;height:100%;
  left:0;top:0;margin:0;cursor:pointer}
.bsl-star span{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:2px solid var(--ui-line);border-radius:11px;
  font-size:1.1rem;font-weight:600;background:#fff;cursor:pointer}
.bsl-star input:checked + span{border-color:var(--ui-brand);
  background:var(--ui-brand-lt);color:var(--ui-brand-dk)}
.bsl-star input:focus-visible + span{outline:3px solid var(--ui-brand);outline-offset:2px}
.bsl-stars-hint{margin:10px 0 0;font-size:.92rem;opacity:.75}
.bsl-field{margin:0 0 20px}
.bsl-field label{display:block;margin:0 0 7px;font-weight:600}
.bsl-field textarea,.bsl-field input[type="text"]{display:block;width:100%;
  border:2px solid var(--ui-line);border-radius:11px;padding:12px 14px;
  font:inherit;background:#fff;box-sizing:border-box}
.bsl-field textarea:focus,.bsl-field input[type="text"]:focus{
  border-color:var(--ui-brand);outline:0}
.bsl-check{margin:0 0 22px}
.bsl-check label{display:grid;grid-template-columns:19px minmax(0,1fr);
  gap:0 12px;align-items:start;cursor:pointer}
.bsl-check input{width:19px;height:19px;margin:3px 0 0;accent-color:var(--ui-brand)}
.bsl-alt{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--ui-line);
  font-size:.95rem}
.bsl-contribute{background:var(--ui-brand-lt);border-color:#cfe2f4}
.bsl-course .bsl-btn,.bsl-complete .bsl-btn{display:inline-block;
  background:var(--ui-brand);color:#fff!important;text-decoration:none;
  border:0;border-radius:99px;padding:13px 26px;font:inherit;font-weight:600;
  cursor:pointer;line-height:1.2}
.bsl-course .bsl-btn:hover,.bsl-complete .bsl-btn:hover{background:var(--ui-brand-dk)}
.bsl-complete .bsl-btn-quiet{background:#fff;color:var(--ui-brand-dk)!important;
  border:2px solid var(--ui-brand);padding:11px 24px}
.bsl-complete .bsl-btn-quiet:hover{background:#fff;border-color:var(--ui-brand-dk)}
@media(max-width:600px){.bsl-complete-card{padding:20px 18px 16px}
  .bsl-star span{width:46px;height:46px}}
.bsl-complete .bsl-btn.bsl-btn-quiet{background:#fff!important;
  color:var(--ui-brand-dk)!important;border:2px solid var(--ui-brand)!important;
  padding:11px 24px}
.bsl-complete .bsl-btn.bsl-btn-quiet:hover{background:#f4f8fd!important;
  border-color:var(--ui-brand-dk)!important}

/* --- course dashboard: progress card + grades dialog --- */
.bsl-dash{display:block;margin:22px 0 4px}
.bsl-dash-card{border:1px solid var(--ui-line);border-radius:16px;
  padding:22px 24px;background:var(--ui-card)}
.bsl-dash-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.bsl-dash-head h2{margin:0;font-size:1.15rem;line-height:1.25}
.bsl-dash-sub{margin:4px 0 0;font-size:.95rem;opacity:.75}
.bsl-dash-pct{margin:0;font-size:.95rem;font-weight:600;color:var(--ui-brand-dk);
  white-space:nowrap}
.bsl-dash-pct span{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}
.bsl-dash-bar{height:9px;border-radius:99px;background:#e9ebf0;
  overflow:hidden;margin:16px 0 0}
.bsl-dash-bar>span{display:block;height:100%;border-radius:99px;
  background:var(--ui-green)}
.bsl-dash-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 0}
.bsl-dash-nextname{font-size:.95rem;opacity:.75;margin-right:auto}
.bsl-dash-count{font-weight:400;opacity:.75;margin-left:6px}
.bsl-modal{border:0;border-radius:16px;padding:0;max-width:620px;width:calc(100% - 32px);
  background:#fff;color:inherit;box-shadow:0 24px 60px rgba(16,24,40,.22)}
.bsl-modal::backdrop{background:rgba(16,24,40,.55)}
.bsl-modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 24px;border-bottom:1px solid var(--ui-line)}
.bsl-modal-head h2{margin:0;font-size:1.15rem}
.bsl-modal-x{border:0;background:none;font-size:1.9rem;line-height:1;
  padding:0 4px;cursor:pointer;color:#5b6172;border-radius:8px}
.bsl-modal-x:hover{color:#111}
.bsl-modal-body{padding:20px 24px;max-height:min(62vh,520px);overflow-y:auto}
.bsl-modal-foot{padding:16px 24px;border-top:1px solid var(--ui-line);text-align:right}
.bsl-grades{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:.97rem}
.bsl-grades th,.bsl-grades td{text-align:left;padding:11px 8px;
  border-bottom:1px solid var(--ui-line);vertical-align:middle}
.bsl-grades thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  opacity:.6;padding-bottom:7px;font-weight:600}
.bsl-grades tbody th{font-weight:600}
.bsl-grades tbody th a{text-decoration:none}
.bsl-grades tbody th a:hover{text-decoration:underline}
.bsl-grades-tries{display:block;font-weight:400;font-size:.85rem;opacity:.6;margin-top:2px}
.bsl-grades-score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;width:1%}
.bsl-grades-res{text-align:right;width:1%;white-space:nowrap}
.bsl-grades tbody tr:last-child th,.bsl-grades tbody tr:last-child td{border-bottom:0}
.bsl-pill{display:inline-block;padding:4px 11px;border-radius:99px;
  font-size:.83rem;font-weight:600;white-space:nowrap}
.bsl-pill.is-pass{background:var(--ui-green-lt);color:#0b7550}
.bsl-pill.is-fail{background:#fdf1e3;color:#8a5210}
.bsl-pill.is-none{background:#f0f1f4;color:#565c6b}
.bsl-dash-need{margin:18px 0 0;padding:14px 16px;border-radius:11px;
  background:var(--ui-brand-lt);border-left:4px solid var(--ui-brand)}
.bsl-dash-need p{margin:0}
@media(max-width:620px){
  .bsl-dash-card{padding:18px}
  .bsl-dash-actions .bsl-btn{width:100%;text-align:center}
  .bsl-dash-nextname{margin:0;width:100%}
  .bsl-grades thead{display:none}
  .bsl-grades tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;
    padding:14px 0;border-bottom:1px solid var(--ui-line)}
  .bsl-grades tbody th,.bsl-grades td{display:block;border-bottom:0;padding:0}
  .bsl-grades-res{grid-column:2;grid-row:1/3;align-self:center}
  .bsl-grades-score::before{content:"Best: ";font-weight:400;opacity:.7}
}
/* quiet button variant, usable anywhere (was scoped to the completion page) */
.bsl-btn.bsl-btn-quiet,.bsl-course .bsl-btn.bsl-btn-quiet,
.bsl-dash .bsl-btn.bsl-btn-quiet{background:#fff!important;
  color:var(--ui-brand-dk)!important;border:2px solid var(--ui-brand)!important;
  padding:11px 22px}
.bsl-btn.bsl-btn-quiet:hover,.bsl-dash .bsl-btn.bsl-btn-quiet:hover{
  background:#f4f8fd!important;border-color:var(--ui-brand-dk)!important}

/* Quiz review grid: LearnDash draws each question's status marker 24px above
   its number box, which collides with the row above and with the results
   buttons. Give the rows room for it. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion ol{padding-top:30px!important}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li{margin-bottom:30px!important}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewDiv{margin-top:32px!important}

/* Previous attempts panel above an assessment. */
.bsl-qh{background:#f6f8fb;border:1px solid var(--ui-line);border-radius:14px;
  padding:20px 22px;margin:0 0 26px}
.bsl-qh-head{margin:0 0 8px;font-size:1.05rem}
.bsl-qh-status{margin:0;font-weight:600}
.bsl-qh-status.is-pass{color:#0b7550}
.bsl-qh-status.is-fail{color:#8a5210}
.bsl-qh .bsl-grades{margin-top:10px}
.bsl-qh .bsl-grades th,.bsl-qh .bsl-grades td{padding:9px 8px}
.bsl-qh-review{margin-left:10px;padding:5px 13px;font-size:.85rem}
.bsl-qh-note{margin:14px 0 0;font-size:.9rem;opacity:.7}
.bsl-qh-modal{max-width:760px}
.bsl-qh-list{margin:0;padding:0 0 0 1.5em}
.bsl-qh-q{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--ui-line)}
.bsl-qh-q:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.bsl-qh-qtext p{margin:0 0 8px}
.bsl-qh-qtext .bsl-vid{border-radius:10px;width:100%!important;max-width:420px!important;min-width:0!important;height:250px!important}
.bsl-qh-ans{margin:8px 0 0}
.bsl-qh-ans .bsl-pill{margin-right:8px}
.bsl-qh-corr{margin:5px 0 0;font-size:.95rem}
.bsl-qh-more{margin:10px 0 0;font-size:.9rem;opacity:.7}