/* Foundwell light base for course pages. Load order: style.css, acct.css, /fw-base.css, fw-light.css, theme.css.
   Everything here is built from the shared tokens; the course's own look comes ONLY from theme.css
   (--accent, --accent-strong, --accent-soft, --heading-font). Same structure for every course. */
:root{/* map the course's original (dark) variable names onto the shared light base */
--card:var(--surface);--card2:var(--surface2);--side:var(--surface);--teal:var(--accent);--teal2:var(--accent);--onteal:#fff;
--serif:var(--heading-font);--sans:var(--body-font);--nav-h:72px}
body{background:var(--bg);color:var(--text);font-size:16px;overflow-x:hidden}
a{color:var(--accent)}
h1,h2,h3,h4,.qt,.score{color:var(--ink)}
h1,h2,h3,h4,.qt,.score,.ring b,.stat .rows b,.pg a,.pg .x,.ue-next b{font-family:var(--heading-font)}
/* header: light bar, navy Foundwell logo, course name in the course accent */
.top{background:rgba(255,255,255,.7);border-bottom:1px solid var(--line);color:var(--ink)}
.top .in{min-height:72px;padding-top:10px;padding-bottom:10px}
.brand,.brand a{color:var(--fw-navy)}
.fa-crest path[stroke="#f4f1ea"]{stroke:var(--fw-navy)}.fa-crest text{fill:var(--fw-navy)}
.fa-crest path[stroke="#79bfbb"]{stroke:#3f9894}.fa-crest path[fill="#79bfbb"]{fill:#3f9894}
.brand .fa-bt b{font-family:var(--brand-font);font-weight:400;font-size:18px;letter-spacing:.1em;text-transform:uppercase}
.brand .fa-bt small{color:var(--accent);font-weight:600;font-size:10.5px;letter-spacing:.2em;margin-top:5px}
.top nav{color:var(--mute);font-size:14.5px}
.top nav a,.top nav a.fa-all{color:var(--ink);font-weight:500}.top nav a:hover{color:var(--accent)}
.si.si-btn{background:var(--accent-strong);color:#fff;padding:9px 16px;white-space:nowrap}.si.si-btn .lk,.si.si-btn .long{color:#fff!important}.si.si-btn:hover{filter:brightness(1.12)}
.si .lk{color:var(--accent)}
.chip{background:transparent;border:0;padding:0;color:var(--ink)}
.chip .em{display:none!important}
.av{width:38px;height:38px;background:var(--fw-navy);color:#fff;font-size:13px}
.chip:hover .av,.chip[aria-expanded=true] .av{box-shadow:0 0 0 3px rgba(14,29,44,.15)}
.top nav .acct .so{display:none}
.amenu{background:#fff;border-color:var(--line);box-shadow:0 18px 44px -12px rgba(8,18,28,.28)}
.amenu .amy:hover{border-color:var(--accent);color:var(--accent)}
svg[stroke="#79bfbb"]{stroke:var(--accent)}
/* buttons: the course accent */
.btn{background:var(--accent-strong);color:#fff;border-radius:10px;padding:15px 26px;font-size:15.5px;transition:.2s}
.btn:hover{background:var(--accent-strong);filter:brightness(1.12)}
.btn.alt{background:#fff;color:var(--ink);border:1px solid var(--line2)}.btn.alt:hover{border-color:var(--accent);background:#fff;filter:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}
/* course landing hero: a soft panel in the course's own tint (same layout for every course) */
.hero{position:relative;margin-top:28px;padding:64px 56px;border-radius:24px;background:linear-gradient(135deg,var(--accent-soft) 0%,color-mix(in srgb,var(--accent-soft) 55%,var(--bg)) 100%);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));overflow:hidden}
.hero::after{content:"";position:absolute;right:-160px;top:-170px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 64%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.over{color:var(--accent)}
.hero .intro{color:var(--text)}
.intro{color:var(--text)}
.uef li{color:var(--text);border-color:color-mix(in srgb,var(--accent) 18%,var(--line));background:rgba(255,255,255,.6)}
.wb{color:var(--ink)}.wb span{color:var(--mute)}
.stat{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.ring{background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface2) 0)}
.ring::before{background:#fff}
.stat .rows div{background:var(--surface2)}
.cc{border-top:0;padding:72px 0 64px}
h2{font-size:36px}
.shead span{color:var(--mute)}
/* chapter cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
a.card{transition:box-shadow .2s,border-color .2s}a.card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:var(--shadow)}
.card.prog{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:linear-gradient(180deg,var(--accent-soft),#fff 70%)}
.card .n{color:var(--accent)}
.badge.done{background:var(--accent-soft);color:var(--accent)}
.badge.prog{background:var(--accent);color:#fff}
.badge.new,.badge.soon{background:var(--surface2);color:var(--mute)}
.track{background:var(--surface2)}.track i{background:var(--accent)}
.qz{color:var(--accent)}
.big{color:color-mix(in srgb,var(--accent) 6%,transparent)}
.note{color:var(--mute)}
/* completed / certificate box */
.certbox{background:#fff;border-color:var(--line);border-radius:var(--radius)}
.certbox.open{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:linear-gradient(180deg,var(--accent-soft),#fff 80%)}
.certbox .sl{background:var(--accent);color:#fff}
.certbox.locked .sl{background:var(--surface2);color:var(--mute)}
/* chapter page */
.crumbs{padding-top:26px}
.fa-nav .fa-back,.fa-nav .fa-chs a{background:#fff;border-color:var(--line)}
.fa-nav .fa-chs a.cur{background:var(--accent);border-color:var(--accent);color:#fff!important}
.fa-nav .fa-chs i{border-color:var(--line2);color:var(--mute)}
.wbar{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}.wbar a{color:var(--accent)}
.chh h1{color:var(--ink)}
video{background:#0e1d2c;border:0;box-shadow:0 18px 40px -24px rgba(14,29,44,.45)}
.sbox{background:#fff;border-color:var(--line);border-radius:var(--radius)}
.sbox .h{border-bottom-color:var(--line)}
.sec{color:var(--text)}.sec:hover{background:var(--surface2)}
.sec.on{background:var(--accent-soft);border-left-color:var(--accent);color:var(--ink)}
.sec.on .tm,.sec.on small{color:var(--accent)}
.ccbtn{background:#fff;border-color:var(--line);color:var(--ink)}.ccbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.ccbtn[aria-pressed="true"] .cci{background:var(--accent);border-color:var(--accent);color:#fff}
details.chs,.quiz,.form,.save,.fa-sg,.mat{background:#fff;border-color:var(--line);border-radius:var(--radius)}
.mat{color:var(--ink)}.mat:hover{border-color:var(--accent)}
.mat .ic{border-color:var(--accent);color:var(--accent)}
details.chs .tg,.quiz .best,.topic{color:var(--accent)}
.qbar{background:var(--surface2)}.qbar i{background:var(--accent)}
.opt{background:var(--surface2);border-color:var(--surface2);color:var(--ink)}.opt .l{background:#fff}.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.right .l{color:#fff}
.msg{color:var(--mute)}
.rw li{background:var(--surface2)}
.ref a{color:var(--accent)}
.pg{border-top-color:var(--line)}.pg a{color:var(--ink)}
.keepc{border-color:color-mix(in srgb,var(--accent) 28%,transparent);border-left-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),#fff)}
.keepc .kc-h{color:var(--ink)}
.keepc .kc-p{color:var(--mute)}
.keepc .kc-go{background:var(--accent-strong);color:#fff}.keepc .kc-go:hover,.keepc .kc-go:focus-visible{filter:brightness(1.12)}
.keepc .kc-si{color:var(--accent)}
.acct-push{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(135deg,var(--accent-soft),#fff)}
.acct-push p{color:var(--text)}.acct-push .ap-si b{color:var(--accent)}
.acct-ban{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft)}
.sv-si b{color:var(--accent)}
.ue-next{color:#f6f4ee}.ue-next .un-k{color:#9fc5ff}.ue-next .un-c{color:#c4ced5}.ue-next .un-c i{color:#fff}.ue-next b{color:#fff}
.ue-next .btn.alt{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
/* forms, sheet, messages on light */
.inp{background:#fff;border-color:var(--line2);color:var(--ink)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.inp[readonly]{background:var(--surface2);color:var(--mute)}
.sh-bg{background:rgba(8,18,28,.5)}
.sheet{background:#fff;border-color:var(--line);box-shadow:0 20px 60px rgba(8,18,28,.3)}
.sheet .alt,.eye,.acpage .back a,.acpage .lnk{color:var(--accent)}
.err{color:#b0413e}
.saved{background:var(--accent-soft);color:var(--accent)}
.okmsg{color:#1f7a4d}
.sentln{color:#1f5f3f}.sentln b{color:#123d28}
.acpage .note{color:#a33a33}
.thumb{border-color:var(--line)}
.fa-suggest a,.fa-sg .btn{color:inherit}.fa-suggest a{color:var(--accent)}
.fa-sg .btn{color:#fff}
/* footer: soft tint, same as the home page */
footer{background:var(--tint);border-image:conic-gradient(var(--tint) 0 0) fill 0//0 100vmax;border-top:0;color:var(--text);margin-top:56px;padding:36px 0 40px;font-size:14px}
footer a,footer .fa-contact a,footer .fa-legal a,footer .fa-so{color:var(--fw-navy);text-decoration:none;font-weight:500}
footer .fa-contact a:hover,footer .fa-legal a:hover{color:var(--accent)}
footer .fa-copy{color:var(--mute);margin-top:10px}
footer .fa-me{color:var(--mute)}
@media(max-width:600px){
 .top .in{min-height:62px;padding:8px 18px}
 .brand .fa-bt b{font-size:13.5px;letter-spacing:.07em;white-space:nowrap}.brand .fa-bt small{font-size:8.5px;letter-spacing:.14em;white-space:nowrap}
 .si.si-btn{padding:8px 13px;white-space:nowrap}.top nav{gap:12px}.top nav>a.fa-all{font-size:13px}
 .av{width:34px;height:34px;font-size:12px}
 /* phone: only the title block sits on the tinted panel; the account/progress cards follow on the page */
 .hero{margin:14px 0 0;padding:0;border:0;border-radius:0;background:none;overflow:visible;gap:16px}
 .hero::after{display:none}
 .hero>div:first-child{position:relative;overflow:hidden;margin:0 -4px;padding:34px 22px 28px;border-radius:20px;background:linear-gradient(135deg,var(--accent-soft) 0%,color-mix(in srgb,var(--accent-soft) 55%,var(--bg)) 100%);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))}
 .hero>div:first-child::after{content:"";position:absolute;right:-150px;top:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 64%);pointer-events:none}
 .hero>div:first-child>*{position:relative;z-index:1}
 .cc{padding:52px 0 48px}h2{font-size:29px}
 .btn{padding:14px 22px}
 footer{padding:30px 0 34px;margin-top:44px}
 .hero .stat .btn small{display:none}
}

/* What you'll learn: one collapsible row (Rico 6:50 AM Nov 8) */
.wyl{margin:28px 0 8px}
.wyl details{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wyl summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-family:var(--heading-font);font-size:20px;color:var(--ink)}
.wyl summary::-webkit-details-marker{display:none}
.wyl summary i{width:28px;height:28px;flex:none;border-radius:50%;background:var(--accent-soft);position:relative}
.wyl summary i::before,.wyl summary i::after{content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;border-radius:2px;background:var(--accent);transition:transform .2s}
.wyl summary i::after{transform:rotate(90deg)}
.wyl details[open] summary i::after{transform:rotate(0)}
.wyl ul{list-style:none;margin:0;padding:0 22px 16px}
.wyl li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--line);color:var(--text);font-size:15.5px;line-height:1.5}
.wyl li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--accent-soft);box-shadow:inset 0 0 0 4px var(--accent-soft),inset 0 0 0 7px var(--accent)}
@media (max-width:600px){.wyl summary{padding:16px 18px;font-size:18px}.wyl ul{padding:0 18px 12px}.wyl li{font-size:15px}}

.wyl.inhero{margin:22px 0 4px;max-width:640px}
.wyl.inhero details{background:rgba(255,255,255,.75)}

/* ---- Folding rows (Rico 6:57–6:59 AM Nov 8): calm rows, small chevron, quiet hint ---- */
.chev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);position:relative;transition:transform .22s ease}
.chev::before{content:"";position:absolute;left:9px;top:7px;width:6px;height:6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
details[open]>summary .chev{transform:rotate(180deg)}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;-webkit-tap-highlight-color:transparent}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.fold>summary h2,.fold>summary h3{margin:0;flex:1;min-width:0}
.fx{margin-left:auto;font-size:13px;color:var(--mute);white-space:nowrap;font-family:inherit;font-weight:500}
.fold[open]>summary .fx-c,.fold:not([open])>summary .fx-o{display:none}
@keyframes fwFold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fold[open]>summary~*{animation:fwFold .22s ease}
/* card rows on the chapter page */
details.fold.chs,section.dl>.fold,section.quiz>.fold{margin:0}
details.chs.fold{margin-top:18px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:14px}
details.chs.fold>summary{padding:16px 20px}
details.chs.fold img.cs{margin:0 20px 18px;width:calc(100% - 40px)}
.dl{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.dl>.fold>summary{padding:16px 20px}
.dl .mats{margin:0;padding:0 20px 20px}
.dl>.note{margin:0;padding:0 20px 16px;font-size:12.5px}
.dl>.fold[open]~.note{padding-top:0}
.quiz{margin-top:14px;padding:0;border-radius:14px}
.quiz>.fold>summary{padding:16px 20px}
.quiz>.fold>summary .best{font-size:13px;white-space:nowrap}
.quiz>.fold>summary .best:empty{display:none}
.quiz .fb-in{padding:0 20px 20px}
.quiz .fb-in .sub{margin-top:0}
.chs h3,.quiz h3.t,.dl h3,.sbox .h h3{font-size:19px}
/* sections box: its header is the fold row */
.sbox>.fold>summary.h{padding:16px 20px;border-bottom:1px solid transparent}
.sbox>.fold[open]>summary.h{border-bottom-color:var(--line)}
.sbox .h span.fx{font-size:13px}
/* course page: Course content header folds, still reads as a section heading */
.cc>.fold>summary.shead{margin-bottom:0;align-items:center}
.cc>.fold[open]>summary.shead{margin-bottom:22px}
.cc>.fold>summary.shead span{font-size:14px}
/* What you'll learn: same chevron as every other row */
.wyl summary i.chev{width:26px;height:26px;background:var(--accent-soft)}
.wyl summary i.chev::after{display:none}
.wyl summary i.chev::before{left:9px;top:7px;width:6px;height:6px;height:6px;border-radius:0;background:none;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:none}
.wyl details[open] summary i.chev{transform:rotate(180deg)}
.wyl details[open] summary i.chev::after{transform:none}
/* Your progress: the compact top always shows; tap anywhere on the card for the breakdown */
.stat.pfold{cursor:pointer;-webkit-tap-highlight-color:transparent}
.stat.pfold .tp{outline:none}
.stat.pfold .tp:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.stat.pfold .rows{display:grid;overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height .25s ease,opacity .2s ease,margin-top .25s ease}
.stat.pfold.open .rows{max-height:140px;opacity:1;margin-top:22px}
@media(max-width:600px){
 details.chs.fold>summary,.dl>.fold>summary,.quiz>.fold>summary,.sbox>.fold>summary.h{padding:15px 16px}
 details.chs.fold img.cs{margin:0 16px 16px;width:calc(100% - 32px)}
 .dl .mats{padding:0 16px 16px}.dl>.note{padding:0 16px 14px}.quiz .fb-in{padding:0 16px 16px}
 .stat.pfold.open .rows{margin-top:18px}
}

/* every fold row: whole title row is the tap target, with a press/hover cue (Rico 7:04) */
.fold>summary,.wyl summary{transition:background-color .15s ease}
@media(hover:hover){details.chs.fold>summary:hover,.dl>.fold>summary:hover,.quiz>.fold>summary:hover,.sbox>.fold>summary.h:hover,.wyl summary:hover{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
 .cc>.fold>summary.shead:hover .chev,.fold>summary:hover .chev,.wyl summary:hover .chev{background:color-mix(in srgb,var(--accent) 18%,var(--accent-soft))}}
details.chs.fold>summary:active,.dl>.fold>summary:active,.quiz>.fold>summary:active,.sbox>.fold>summary.h:active,.wyl summary:active{background:var(--accent-soft)}
.cc>.fold>summary.shead:active .chev{background:color-mix(in srgb,var(--accent) 22%,var(--accent-soft))}
details.chs.fold>summary,.dl>.fold>summary,.quiz>.fold>summary,.sbox>.fold>summary.h{border-radius:14px}
details[open].chs.fold>summary,.dl>.fold[open]>summary,.quiz>.fold[open]>summary,.sbox>.fold[open]>summary.h{border-radius:14px 14px 0 0}
.stat.pfold:active{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),var(--shadow)}
/* What you'll learn matches the intro text width (Rico 7:02) */
.wyl.inhero{max-width:none}
.wyl.inhero{max-width:600px}
.quiz>.fold>summary .best:not(:empty)~.fx{display:none}
.quiz>.fold>summary.qh{align-items:center;flex-wrap:nowrap;justify-content:flex-start}
.quiz>.fold>summary.qh h3{line-height:1.25}
@media(max-width:600px){.chs h3,.quiz h3.t,.dl h3,.sbox .h h3{font-size:18px}.fx{font-size:12.5px}.fold>summary{gap:10px}}

/* bold fold titles (Rico 7:06) */
.wyl summary,.wyl summary span,details.fold>summary,details.fold>summary h2,details.fold>summary h3,details.fold>summary b{font-weight:700!important}

/* What you'll learn, option C (Rico Nov 8 3:52) */
.wylc{margin:22px 0 22px;max-width:600px}
.wylc h2{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:700;color:#0e1d2c;margin:0 0 4px}
.wylc ul{list-style:none;margin:0;padding:0}
.wylc li{position:relative;padding:7px 0 7px 26px;font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.45;color:#22324a}
.wylc li::before{content:'';position:absolute;left:4px;top:10px;width:5px;height:10px;border-right:2px solid #2456a6;border-bottom:2px solid #2456a6;transform:rotate(45deg);background:none;border-radius:0;box-shadow:none}
.wylc:not(.open) li:nth-child(n+4){display:none}
.wylc .more{appearance:none;background:none;border:0;padding:6px 0 0 26px;font:600 14.5px Inter,system-ui,sans-serif;color:#2456a6;cursor:pointer}
.wylc .more:hover{text-decoration:underline}
/* Progress card tap hint, option B (Rico Nov 8 5:27) */
.stat.pfold .ph-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line,#e3e8ec);font:600 14px Inter,system-ui,sans-serif;color:#0e1d2c}
.stat.pfold .ph-h,.stat.pfold.open .ph-s{display:none}.stat.pfold.open .ph-h{display:inline}
.stat.pfold.open .ph-row .chev{transform:rotate(180deg)}
.stat:not(.pfold) .ph-row{display:none}

/* Progress breakdown, option B (Rico Nov 8 6:04) */
.stat.pfold .rows.v2{display:block}
.stat.pfold.open .rows.v2{margin-top:10px}
.rows.v2 .sum1{margin:0;font:500 14px/1.3 Inter,system-ui,sans-serif;color:#0e1d2c}
.rows.v2 .sum1 b{color:var(--accent,#2456a6);font-weight:700}
.rows.v2 .bar6{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:9px 0 8px}
.rows.v2 .bar6 i{height:7px;border-radius:4px;background:#dfe7f2;overflow:hidden;display:block}
.rows.v2 .bar6 i b{display:block;height:100%;width:0;background:var(--accent,#2456a6);border-radius:4px}
.rows.v2 .sum2{margin:0;font:400 13px/1.3 Inter,system-ui,sans-serif;color:var(--mute,#5b6b7d)}
.rows.v2 .sum1 b{display:inline;font:700 14px/1.3 Inter,system-ui,sans-serif;margin:0;padding:0}
.rows.v2 .bar6{background:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0}
.rows.v2 .bar6 i b{font-size:0;margin:0;padding:0}

/* chevron aligned with title on every fold row (Sections summary was baseline-aligned) */
details.fold>summary,#secs>summary,#secs>summary.h{align-items:center!important}

/* pass-the-quiz (7/10), Rico Nov 8: quiz result line and the progress card's quiz hint */
.qst{margin:6px 0 2px;font:600 15px/1.35 Inter,system-ui,sans-serif}
.qst.ok{color:var(--accent,#2456a6)}
.qst.no{color:#b45309}
.rows.v2 .sum3{margin:6px 0 0;font:400 12.5px/1.35 Inter,system-ui,sans-serif;color:var(--mute,#5b6b7d)}