/* ════════════════════════════════════════════════════════════
   ValueForge VE Academy — SaaS training experience
   ════════════════════════════════════════════════════════════ */

.tr-body{background:var(--bg)}
.tr-body::before{display:none} /* no grain on reading surfaces */

/* ── Top nav ── */
.tr-nav{position:sticky;top:0;z-index:900;background:rgba(5,7,15,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.tr-nav-inner{max-width:1280px;margin-inline:auto;padding:.85rem 4vw;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tr-nav-right{display:flex;align-items:center;gap:1.2rem}
.tr-progress-pill{position:relative;width:190px;height:30px;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--card)}
.tr-progress-pill i{position:absolute;inset:0;width:0;background:rgba(46,111,232,.35);transition:width .5s var(--ease-out)}
.tr-progress-pill span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-m);font-size:.68rem;letter-spacing:.08em;color:var(--txt)}
.tr-back{font-size:.84rem;color:var(--muted);white-space:nowrap}
.tr-back:hover{color:var(--txt)}
@media (max-width:640px){.tr-progress-pill{width:120px}}

/* ── Hero ── */
.tr-hero{border-bottom:1px solid var(--line);background:radial-gradient(90% 130% at 50% -20%,rgba(46,111,232,.18),transparent 60%),var(--bg2)}
.tr-hero-inner{max-width:840px;margin-inline:auto;padding:4.5rem 4vw 3.5rem;text-align:center}
.tr-kicker{font-family:var(--font-m);font-size:.7rem;letter-spacing:.26em;color:var(--acc1);margin-bottom:1.2rem}
.tr-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;margin-bottom:1.1rem}
.tr-hero p{color:var(--muted);max-width:640px;margin:0 auto 2rem;font-size:1.02rem}
.tr-hero p strong{color:var(--txt)}
.tr-hero-stats{display:flex;justify-content:center;gap:2.4rem;flex-wrap:wrap;margin-bottom:2.2rem}
.tr-hero-stats div{text-align:center}
.tr-hero-stats b{display:block;font-family:var(--font-d);font-size:1.7rem;font-weight:700;color:var(--acc1)}
.tr-hero-stats span{font-size:.74rem;color:var(--muted)}

/* ── Layout ── */
.tr-layout{max-width:1280px;margin-inline:auto;padding:2.5rem 4vw 5rem;display:grid;grid-template-columns:290px 1fr;gap:2.4rem;align-items:start}
@media (max-width:960px){.tr-layout{grid-template-columns:1fr}}

/* ── Sidebar ── */
.tr-sidebar{position:sticky;top:76px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.tr-side-head{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc1);padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
#modNav{max-height:56vh;overflow-y:auto}
.mod-link{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:.8rem 1.1rem;cursor:pointer;color:var(--muted);font-family:var(--font-b);transition:background .25s,color .25s}
.mod-link:hover{background:var(--card-hi);color:var(--txt)}
.mod-link.is-active{background:rgba(46,111,232,.14);color:var(--txt);box-shadow:inset 3px 0 0 var(--acc2)}
.mod-link .mchk{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.65rem;color:transparent;transition:all .3s}
.mod-link.is-done .mchk{background:#1c7f4b;border-color:#1c7f4b;color:#fff}
.mod-link .mtxt b{display:block;font-size:.8rem;font-weight:600;line-height:1.3}
.mod-link .mtxt span{font-size:.66rem;color:var(--muted);font-family:var(--font-m)}
.mod-link.mod-exam{border-top:1px solid var(--line)}
.mod-link.mod-exam .mchk{border-radius:7px}
.tr-side-foot{padding:1rem 1.2rem;border-top:1px solid var(--line)}
.tr-side-bar{height:6px;border-radius:6px;background:var(--track);overflow:hidden;margin-bottom:.5rem}
.tr-side-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:6px;transition:width .5s var(--ease-out)}
.tr-side-prog span{font-size:.7rem;color:var(--muted);font-family:var(--font-m)}
@media (max-width:960px){.tr-sidebar{position:static}#modNav{max-height:38vh}}

/* ── Module content ── */
.tr-main{min-width:0}
.tmod{display:none;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--card);padding:2.4rem 2.6rem}
.tmod.is-visible{display:block;animation:panel-in .5s var(--ease-spring)}
.tmod-tag{font-family:var(--font-m);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc3)}
.tmod-head h2{font-size:1.7rem;margin:.5rem 0 1.4rem}
.tmod-obj{border:1px solid rgba(46,111,232,.35);border-radius:14px;background:rgba(46,111,232,.07);padding:1.1rem 1.3rem;margin-bottom:1.8rem}
.tmod-obj h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc1);margin-bottom:.5rem}
.tmod-obj ul{list-style:none;display:grid;gap:.3rem}
.tmod-obj li{font-size:.86rem;color:var(--txt);padding-left:1.2rem;position:relative}
.tmod-obj li::before{content:"→";position:absolute;left:0;color:var(--acc1)}
.tmod h3{font-size:1.12rem;margin:1.8rem 0 .7rem;color:var(--txt)}
.tmod p{color:var(--muted);font-size:.93rem;line-height:1.75;margin-bottom:.9rem}
.tmod p strong,.tmod p em,.tmod li b{color:var(--txt)}
.tlist{list-style:none;display:grid;gap:.55rem;margin:.4rem 0 1rem}
.tlist li{font-size:.88rem;color:var(--muted);line-height:1.65;padding-left:1.3rem;position:relative}
.tlist li::before{content:"▪";position:absolute;left:.2rem;color:var(--acc2)}
.tkey{border-left:3px solid var(--acc2);background:var(--bg2);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin:1.8rem 0}
.tkey h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc3);margin-bottom:.55rem}
.tkey ul{list-style:none;display:grid;gap:.35rem}
.tkey li{font-size:.86rem;color:var(--txt);padding-left:1.2rem;position:relative}
.tkey li::before{content:"✓";position:absolute;left:0;color:#34d399}
.tmod-done{margin-top:.6rem}
@media (max-width:640px){.tmod{padding:1.6rem 1.3rem}}

/* ── Exam ── */
.ex-gate{text-align:center;padding:1.5rem 0}
.ex-gate p{max-width:560px;margin:0 auto 1.4rem}
.ex-gate .ex-warn{color:var(--acc3);font-size:.84rem}
.ex-q-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}
.ex-q-head span{font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc1)}
.ex-bar{flex:1;height:5px;border-radius:5px;background:var(--track);overflow:hidden}
.ex-bar i{display:block;height:100%;background:var(--grad);transition:width .4s var(--ease-out)}
.ex-q{font-family:var(--font-d);font-size:1.15rem;font-weight:600;margin-bottom:1.2rem;line-height:1.5}
.ex-opts{display:grid;gap:.6rem;margin-bottom:1.4rem}
.ex-opt{display:flex;align-items:center;gap:.9rem;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:.9rem 1.1rem;cursor:pointer;color:var(--txt);font-family:var(--font-b);font-size:.9rem;transition:border-color .25s,background .25s}
.ex-opt:hover{border-color:var(--acc1)}
.ex-opt.is-picked{border-color:var(--acc2);background:rgba(46,111,232,.13)}
.ex-opt .eo-key{flex:0 0 26px;height:26px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-m);font-size:.72rem;color:var(--muted)}
.ex-opt.is-picked .eo-key{background:var(--acc2);border-color:var(--acc2);color:#fff}
.ex-nav{display:flex;justify-content:space-between;gap:1rem}
.ex-nav .btn{padding:.65rem 1.4rem;font-size:.85rem}
/* result */
.ex-result{text-align:center;padding:1rem 0}
.ex-ring{position:relative;width:170px;height:170px;margin:0 auto 1.2rem}
.ex-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ex-ring .rbg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:10}
.ex-ring .rfg{fill:none;stroke-width:10;stroke-linecap:round;stroke-dasharray:452;stroke-dashoffset:452;transition:stroke-dashoffset 1.2s var(--ease-out)}
.ex-ring .rnum{position:absolute;inset:0;display:grid;place-content:center}
.ex-ring .rnum b{font-family:var(--font-d);font-size:2.1rem;font-weight:700}
.ex-ring .rnum span{font-size:.66rem;color:var(--muted);font-family:var(--font-m);letter-spacing:.15em}
.ex-verdict{font-family:var(--font-d);font-size:1.4rem;font-weight:700;margin-bottom:.5rem}
.ex-verdict.pass{color:#34d399}.ex-verdict.fail{color:#f87171}
.ex-note{color:var(--muted);font-size:.9rem;max-width:520px;margin:0 auto 1.6rem}
.ex-review{text-align:left;max-width:680px;margin:0 auto 1.6rem;border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:1.2rem 1.4rem}
.ex-review h4{font-family:var(--font-m);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc3);margin-bottom:.8rem}
.ex-review-item{border-bottom:1px solid var(--line-soft);padding:.7rem 0;font-size:.84rem}
.ex-review-item b{display:block;color:var(--txt);margin-bottom:.25rem}
.ex-review-item .wrong{color:#f87171}
.ex-review-item .right{color:#34d399}
.ex-name{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem}
.ex-name input{padding:.85rem 1.2rem;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font-family:var(--font-b);font-size:.95rem;min-width:280px;outline:none}
.ex-name input:focus{border-color:var(--acc2)}
.ex-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ── Certificate ── */
#certWrap{margin-top:2rem}
.cert{background:#f8fafc;color:#101828;border-radius:12px;padding:14px;max-width:880px;margin:0 auto}
.cert-border{border:3px double #1d4ed8;border-radius:8px;padding:3rem 3.4rem;text-align:center;position:relative;background:
  radial-gradient(120% 100% at 50% 0%,rgba(29,78,216,.06),transparent 60%),#fff}
.cert-brand{font-family:var(--font-d);font-weight:700;letter-spacing:.2em;font-size:.85rem;color:#334155;text-transform:uppercase}
.cert-brand span{color:#1d4ed8}
.cert-title{font-family:var(--font-d);font-size:2.3rem;font-weight:700;color:#0f172a;margin:1.2rem 0 .4rem}
.cert-sub{font-size:.85rem;color:#64748b;letter-spacing:.12em;text-transform:uppercase}
.cert-name{font-family:var(--font-d);font-size:2rem;font-weight:700;color:#1d4ed8;margin:.8rem 0;border-bottom:1.5px solid #cbd5e1;display:inline-block;padding:0 2.5rem .4rem}
.cert-body{max-width:620px;margin:0 auto;font-size:.9rem;color:#334155;line-height:1.7}
.cert-body b{color:#0f172a}
.cert-meta{display:flex;justify-content:space-between;align-items:center;max-width:620px;margin:2.2rem auto 1.4rem}
.cert-meta>div{text-align:center}
.cert-meta b{display:block;font-family:var(--font-m);font-size:.9rem;color:#0f172a}
.cert-meta span{font-size:.68rem;color:#64748b;letter-spacing:.1em;text-transform:uppercase}
.cert-seal{width:74px;height:74px;border-radius:50%;border:3px solid #1d4ed8;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:1.5rem;color:#1d4ed8;background:rgba(29,78,216,.06)}
.cert-sign{margin-top:.6rem}
.cert-sign b{display:block;font-family:'Segoe Script','Brush Script MT',cursive;font-size:1.4rem;color:#0f172a}
.cert-sign span{font-size:.7rem;color:#64748b}
.cert-actions{display:flex;gap:.8rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}
@media (max-width:640px){.cert-border{padding:2rem 1.2rem}.cert-title{font-size:1.6rem}.cert-name{font-size:1.4rem}}

/* ── Footer ── */
.tr-footer{border-top:1px solid var(--line);padding:2rem 4vw;text-align:center;background:var(--bg2)}
.tr-footer p{font-size:.78rem;color:var(--muted);margin:.2rem 0}
.tr-footer a b{color:var(--acc1)}

/* ── Print: certificate only ── */
@media print{
  body.tr-body *{visibility:hidden}
  #certWrap,#certWrap .cert,#certWrap .cert *{visibility:visible}
  #certWrap{position:absolute;inset:0;margin:0}
  .cert{box-shadow:none;border-radius:0;max-width:none}
  .cert-actions{display:none}
  @page{size:landscape;margin:10mm}
}

/* ── Worked example box ── */
.tex{border-left:3px solid var(--acc3);background:rgba(217,164,74,.06);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin:1.8rem 0}
.tex h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc3);margin-bottom:.55rem}
.tex p{font-size:.88rem;color:var(--muted);margin:0}
.tex p strong,.tex p em{color:var(--txt)}

/* ── Quick check ── */
.qcheck{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:1.3rem 1.4rem;margin:1.8rem 0 1.2rem}
.qcheck-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.qcheck-head h4{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc1);margin:0}
.qcheck-head span{font-size:.72rem;color:var(--muted)}
.qc-item{margin-bottom:1.1rem}
.qc-item:last-child{margin-bottom:0}
.qc-q{font-size:.92rem;font-weight:600;color:var(--txt);margin-bottom:.6rem}
.qc-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.qc-opt{border:1px solid var(--line);border-radius:100px;background:var(--card);color:var(--muted);padding:.45rem 1rem;font-size:.8rem;font-family:var(--font-b);cursor:pointer;transition:all .25s}
.qc-opt:hover{border-color:var(--acc1);color:var(--txt)}
.qc-opt.is-right{background:rgba(28,127,75,.25);border-color:#2ea36b;color:#7ce3ad;pointer-events:none}
.qc-opt.is-wrong{background:rgba(190,50,50,.15);border-color:#c0504f;color:#f3a1a0;animation:qc-shake .3s}
.qc-item.is-locked .qc-opt:not(.is-right){opacity:.45;pointer-events:none}
@keyframes qc-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.qc-expl{font-size:.78rem;margin-top:.5rem;display:none}
.qc-expl.show-wrong{display:block;color:#f3a1a0}
.qc-expl.show-right{display:block;color:#7ce3ad}
.tmod-done:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ── Certificate share page ── */
.cert-page{max-width:1000px;margin-inline:auto;padding:3rem 4vw 4rem}
.cert-verify-note{max-width:680px;margin:1.4rem auto 0;text-align:center;font-size:.78rem;color:var(--muted)}
.cert-verify-note a{color:var(--acc1)}
.cert-invalid{text-align:center;padding:5rem 1rem}
.cert-invalid h2{font-size:1.6rem;margin-bottom:.8rem}
.cert-invalid p{color:var(--muted);max-width:460px;margin:0 auto 1.6rem}

/* ── Gamification: points, rank, badges ── */
.tr-rank{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:var(--acc3);white-space:nowrap}
.tr-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.tr-badge{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:100px;padding:.3rem .7rem;font-size:.64rem;color:var(--muted);opacity:.45;transition:all .3s}
.tr-badge.is-earned{opacity:1;border-color:rgba(217,164,74,.55);color:var(--acc3);background:rgba(217,164,74,.07)}
.tr-points{font-family:var(--font-m);font-size:.7rem;color:var(--acc1);margin-top:.4rem;display:block}

/* ── Role paths ── */
.tr-roles{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.tr-roles span{font-size:.72rem;color:var(--muted);align-self:center;margin-right:.3rem}
.role-chip{border:1px solid var(--line);border-radius:100px;background:var(--card);color:var(--muted);padding:.45rem 1.05rem;font-size:.8rem;font-family:var(--font-b);cursor:pointer;transition:all .25s}
.role-chip:hover{color:var(--txt);border-color:var(--acc1)}
.role-chip.is-on{background:var(--grad);border-color:transparent;color:#fff}
.mod-link .mrec{margin-left:auto;font-size:.72rem;color:var(--acc3);display:none}
.mod-link.is-rec .mrec{display:inline}

/* ── Assignment box ── */
.tdo{border-left:3px solid #2ea36b;background:rgba(28,127,75,.07);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin:1.4rem 0}
.tdo h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#4ade80;margin-bottom:.5rem}
.tdo p{font-size:.86rem;color:var(--muted);margin:0}
.tdo a{color:#4ade80;border-bottom:1px dashed rgba(74,222,128,.5)}

/* ── Certificate disclaimer ── */
.cert-disclaimer{margin-top:1.1rem;font-size:.6rem;color:#94a3b8;letter-spacing:.04em}

/* ── Light theme (Academy) ── */
html[data-theme="light"] .tr-nav{background:rgba(255,255,255,.85)}
html[data-theme="light"] .tr-hero{background:radial-gradient(90% 130% at 50% -20%,rgba(46,111,232,.1),transparent 60%),#fff}
html[data-theme="light"] .ex-ring .rbg{stroke:rgba(15,23,42,.09)}
html[data-theme="light"] .qc-opt.is-right{background:rgba(15,131,61,.12);border-color:#15803d;color:#116233}
html[data-theme="light"] .qc-expl.show-right{color:#116233}
html[data-theme="light"] .qc-opt.is-wrong{background:rgba(190,50,50,.1);color:#b91c1c}
html[data-theme="light"] .qc-expl.show-wrong{color:#b91c1c}
html[data-theme="light"] .tr-badge.is-earned{color:#966312}
html[data-theme="light"] .tmod,html[data-theme="light"] .tr-sidebar{box-shadow:0 2px 14px rgba(20,30,60,.05)}

/* ── Case study & pitfalls boxes ── */
.tcase{border:1px solid rgba(46,111,232,.4);border-radius:14px;background:rgba(46,111,232,.06);padding:1.2rem 1.4rem;margin:1.6rem 0}
.tcase h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc1);margin-bottom:.6rem}
.tcase h4::before{content:"📚 "}
.tcase p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.7}
.tcase p b{color:var(--txt)}
.tcase p i{font-size:.76rem;color:var(--acc1);font-style:normal;display:block;margin-top:.55rem}
.tpit{border-left:3px solid #c0504f;background:rgba(190,80,79,.06);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin:1.4rem 0}
.tpit h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#e58b8a;margin-bottom:.55rem}
.tpit ul{list-style:none;display:grid;gap:.35rem}
.tpit li{font-size:.84rem;color:var(--muted);padding-left:1.2rem;position:relative}
.tpit li::before{content:"⚠";position:absolute;left:0;color:#e58b8a;font-size:.75rem}
html[data-theme="light"] .tpit h4,html[data-theme="light"] .tpit li::before{color:#b3403f}

/* ── My Learning banner (signed-in hero state) ── */
.my-learn{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:1.4rem auto 0;max-width:760px;padding:.95rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:var(--card);text-align:left;animation:mlIn .5s ease both}
@keyframes mlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ml-ring{position:relative;width:60px;height:60px;flex:none}
.ml-ring svg{width:60px;height:60px;transform:rotate(-90deg)}
.ml-ring .mlr-bg{fill:none;stroke:var(--track);stroke-width:6}
.ml-ring .mlr-fg{fill:none;stroke:var(--acc1);stroke-width:6;stroke-linecap:round;stroke-dasharray:163.4;transition:stroke-dashoffset .8s ease}
.ml-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 .78rem var(--font-d);color:var(--txt)}
.ml-txt{flex:1;min-width:180px}
.ml-txt b{display:block;font-family:var(--font-d);font-size:1.02rem;color:var(--txt);margin-bottom:.2rem}
.ml-txt span{font-size:.8rem;color:var(--muted)}
.ml-btn{flex:none;font-size:.82rem;padding:.6rem 1rem}
.side-sync{margin:.7rem 0 0;font-size:.72rem;color:var(--muted);line-height:1.5}
.side-sync a{color:var(--acc1);font-weight:600}

/* ── toast (cloud sync notice etc.) ── */
#vhToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--bg2);border:1px solid var(--acc1);color:var(--txt);font:600 .84rem var(--font-b);padding:.65rem 1.2rem;border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:400}
#vhToast.show{opacity:1;transform:translate(-50%,0)}

/* ── module summary print button ── */
.tmod-head{position:relative}
.tmod-print{position:absolute;right:0;top:0;border:1px solid var(--line);background:none;color:var(--muted);font:600 .72rem var(--font-b);padding:.38rem .7rem;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.tmod-print:hover{color:var(--acc1);border-color:var(--acc1)}
@media (max-width:640px){.tmod-print{position:static;margin-top:.5rem}}

/* ── glossary tooltips in lessons ── */
.gloss{border-bottom:1px dotted var(--acc1);cursor:help;position:relative}
.gloss::after{content:attr(data-def);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);width:min(300px,72vw);background:var(--bg2);border:1px solid var(--acc1);border-radius:10px;padding:.6rem .75rem;font:400 .76rem/1.5 var(--font-b);color:var(--txt);box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:120;pointer-events:none;text-align:left}
.gloss::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--acc1);opacity:0;visibility:hidden;transition:opacity .18s;z-index:121}
.gloss:hover::after,.gloss:focus-visible::after,.gloss:hover::before,.gloss:focus-visible::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gloss:focus-visible{outline:none;border-bottom-style:solid}

/* ── Academy access gate (Modules 2–13 + exam require an account) ── */
.auth-gate{display:none}
.auth-gate.is-visible{display:block;animation:mlIn .45s ease both}
.gate-card{max-width:560px;margin:1.5rem auto;padding:2.4rem 2rem;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.gate-lock{width:64px;height:64px;margin:0 auto 1.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--acc1);background:color-mix(in srgb,var(--acc1) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc1) 35%,transparent)}
.gate-lock svg{width:30px;height:30px}
.gate-card h2{font-family:var(--font-d);font-size:1.5rem;line-height:1.2;margin-bottom:.7rem;color:var(--txt)}
.gate-card>p{color:var(--muted);font-size:.94rem;line-height:1.6;max-width:460px;margin:0 auto 1.2rem}
.gate-list{list-style:none;text-align:left;max-width:400px;margin:0 auto 1.5rem;display:grid;gap:.55rem}
.gate-list li{position:relative;padding-left:1.7rem;font-size:.88rem;color:var(--txt)}
.gate-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--acc1);font-weight:800}
.gate-actions{display:flex;flex-direction:column;gap:.7rem;align-items:center}
.gate-actions .btn{width:100%;max-width:340px}
.gate-foot{margin-top:1.3rem;font-size:.78rem;color:var(--muted)}
.gate-foot a{color:var(--acc1);font-weight:600}

/* locked modules in the sidebar */
.mod-link{position:relative}
.mod-link.is-locked .mtxt b{opacity:.72}
.mod-link.is-locked::after{content:"🔒";position:absolute;right:.7rem;top:50%;transform:translateY(-50%);font-size:.72rem;opacity:.65}
.mod-link.is-locked.is-active::after{opacity:.9}

/* ── lesson voiceover player ── */
.vo-bar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1.4rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:.8rem}
.vo-bar button{border:1px solid var(--line);background:none;color:var(--txt);font:600 .78rem var(--font-b);padding:.42rem .8rem;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.vo-bar button:hover{border-color:var(--acc1);color:var(--acc1)}
.vo-play.is-playing{border-color:var(--acc1);color:var(--acc1);background:color-mix(in srgb,var(--acc1) 10%,transparent)}
.vo-stop{padding:.42rem .6rem}
.vo-bar select{border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:500 .74rem var(--font-b);padding:.35rem .45rem;border-radius:8px}
.vo-seek{flex:1;min-width:120px;accent-color:var(--acc1);height:4px;cursor:pointer}
.vo-time{font-family:var(--font-m);font-size:.72rem;color:var(--muted);white-space:nowrap}
body.vo-off .vo-bar{display:none!important}

/* paragraph being read */
.is-reading{background:color-mix(in srgb,var(--acc1) 13%,transparent);border-radius:6px;box-shadow:0 0 0 5px color-mix(in srgb,var(--acc1) 13%,transparent);transition:background .3s,box-shadow .3s}

/* master switch in the sidebar */
.vo-master{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;font-size:.78rem;color:var(--muted);cursor:pointer;user-select:none}
.vo-master span{flex:1}
.vo-master input{position:absolute;opacity:0;pointer-events:none}
.vo-sw{width:34px;height:19px;border-radius:999px;background:var(--track);border:1px solid var(--line);position:relative;transition:background .25s;flex:none}
.vo-sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:transform .25s,background .25s}
.vo-master input:checked + .vo-sw{background:var(--acc2);border-color:var(--acc2)}
.vo-master input:checked + .vo-sw::after{transform:translateX(15px);background:#fff}
.vo-master input:focus-visible + .vo-sw{outline:2px solid var(--acc1);outline-offset:2px}

/* ── Module 4: animated FAST builder ── */
.fast-builder{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1.2rem;margin:1.2rem 0 1.6rem}
.fb-stage{position:relative;height:330px;border:1px dashed var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
.fb-stage [data-fstep]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s var(--ease-spring);pointer-events:none}
.fb-stage .fb-in{opacity:1;transform:none}
.fb-scope{position:absolute;top:8%;bottom:8%;width:0;border-left:2px dashed var(--acc3)}
.fb-scope span{position:absolute;top:-2px;left:6px;font:600 .6rem var(--font-m);color:var(--acc3);letter-spacing:.08em;white-space:nowrap}
.fb-scope-l{left:22%}.fb-scope-r{right:20%}
.fb-axis{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;padding:0 1rem;font:700 .72rem var(--font-m);color:var(--acc1)}
.fb-axis .fb-how{margin-left:auto}
.fb-axis .fb-why{order:-1}
.fb-card{position:absolute;padding:.55rem .7rem;border-radius:10px;border:1.5px solid var(--acc1);background:var(--card);font:700 .72rem var(--font-d);color:var(--txt);letter-spacing:.04em;box-shadow:0 8px 22px rgba(0,0,0,.25);max-width:150px;text-align:center}
.fb-card i{display:block;font:500 .58rem var(--font-m);color:var(--muted);letter-spacing:.06em;font-style:normal;margin-bottom:.2rem}
.fb-basic{left:25%;top:45%;border-color:var(--acc1);background:color-mix(in srgb,var(--acc1) 14%,var(--card))}
.fb-f2{left:44%;top:45%}
.fb-f3{left:60%;top:45%}
.fb-assumed{right:1%;top:45%;max-width:96px;border-style:dashed;border-color:var(--muted);opacity:.95}
.fb-ho{left:2%;top:45%;border-style:dashed;border-color:var(--acc3)}
.fb-at1{left:34%;top:12%;border-color:var(--acc3)}
.fb-at2{left:56%;top:12%;border-color:var(--acc3)}
.fb-arrow{position:absolute;top:calc(45% + 26px);height:2px;background:linear-gradient(90deg,var(--acc1),var(--acc2))}
.fb-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--acc2)}
.fb-a1{left:calc(25% + 118px);width:calc(19% - 118px + 34px)}
.fb-a2{left:calc(44% + 122px);width:calc(16% - 122px + 38px)}
.fb-validating .fb-card{animation:fb-pulse 1.6s ease-in-out infinite alternate}
@keyframes fb-pulse{from{box-shadow:0 8px 22px rgba(0,0,0,.25)}to{box-shadow:0 0 18px color-mix(in srgb,var(--acc1) 55%,transparent)}}
.fb-caption{margin:1rem 0 .8rem;font-size:.88rem;color:var(--muted);line-height:1.6;min-height:3.4em}
.fb-caption b,.fb-caption i{color:var(--txt)}
.fb-controls{display:flex;align-items:center;gap:1rem}
.fb-controls .btn{font-size:.8rem;padding:.5rem 1rem}
.fb-dots{display:flex;gap:.35rem;margin:0 auto}
.fb-dot{width:8px;height:8px;border-radius:50%;background:var(--track);transition:background .3s}
.fb-dot.on{background:var(--acc1)}
@media (max-width:700px){.fb-stage{height:400px}.fb-card{max-width:110px;font-size:.62rem}}

/* ── Module 4: function library ── */
.fn-lib{margin:1.1rem 0 1.6rem}
.fn-lib-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.fn-chip{border:1px solid var(--line);background:none;color:var(--muted);font:600 .74rem var(--font-b);padding:.4rem .8rem;border-radius:999px;cursor:pointer;transition:all .2s}
.fn-chip:hover{border-color:var(--acc1);color:var(--acc1)}
.fn-chip.is-on{border-color:var(--acc1);color:var(--acc1);background:color-mix(in srgb,var(--acc1) 10%,transparent)}
.fn-cat h5{font:700 .8rem var(--font-d);color:var(--acc3);letter-spacing:.06em;text-transform:uppercase;margin:1rem 0 .5rem}
.fn-cat{margin-bottom:.4rem}
.fn-lib-grid .fn-cat > .fn-item{display:grid;grid-template-columns:150px 1fr 1fr;gap:.7rem;align-items:baseline;padding:.45rem .6rem;border-bottom:1px solid var(--line-soft,var(--line))}
.fn-item b{font-family:var(--font-m);font-size:.8rem;color:var(--acc1)}
.fn-item span{font-size:.8rem;color:var(--txt)}
.fn-item em{font-size:.74rem;color:var(--muted);font-style:normal}
@media (max-width:640px){.fn-lib-grid .fn-cat > .fn-item{grid-template-columns:1fr;gap:.15rem}}

/* ── Module 4: function identification challenge ── */
.fn-challenge{border:1px solid color-mix(in srgb,var(--acc1) 40%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--acc1) 5%,var(--card));padding:1.4rem;margin:1.6rem 0}
.fnc-head h4{font:700 1.05rem var(--font-d);margin-bottom:.4rem}
.fnc-head p{font-size:.84rem;color:var(--muted);margin-bottom:1.1rem}
.fnc-item{margin-bottom:1.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.fnc-q{font-size:.92rem;font-weight:600;margin-bottom:.6rem;display:flex;gap:.6rem;align-items:baseline}
.fnc-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc2);color:#fff;font:700 .72rem var(--font-d);display:inline-flex;align-items:center;justify-content:center}
.fnc-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem}
.fnc-opt{border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:500 .82rem var(--font-b);padding:.55rem .7rem;border-radius:10px;cursor:pointer;text-align:left;transition:all .2s}
.fnc-opt:hover:not(:disabled){border-color:var(--acc1)}
.fnc-opt:disabled{cursor:default;opacity:.75}
.fnc-opt.is-right{border-color:#34d399;background:rgba(52,211,153,.12);color:var(--txt);opacity:1;font-weight:700}
.fnc-opt.is-wrong{border-color:#f87171;background:rgba(248,113,113,.1)}
.fnc-expl{display:none;margin-top:.6rem;font-size:.8rem;line-height:1.55;padding:.6rem .8rem;border-radius:10px}
.fnc-expl.show{display:block}
.fnc-expl.ok{background:rgba(52,211,153,.08);color:var(--txt);border:1px solid rgba(52,211,153,.35)}
.fnc-expl.no{background:rgba(248,113,113,.07);color:var(--txt);border:1px solid rgba(248,113,113,.3)}
.fnc-score{display:none;font:700 1rem var(--font-d);margin:1rem 0 .6rem}
.fnc-score.show{display:block}
.fnc-score b{color:var(--acc1)}

/* ── training hero: two-column grid with innovation viz ── */
@media (min-width:1140px){
  .tr-hero-grid{display:grid;grid-template-columns:1fr 360px;gap:3rem;align-items:center;text-align:left;max-width:1200px}
  .tr-hero-grid .tr-hero-stats,.tr-hero-grid .tr-roles{justify-content:flex-start}
  .tr-hero-grid .tr-quotes{margin-left:0}
}
@media (max-width:1139px){.tr-hero-viz{display:none}}

/* rotating VE quotes */
.tr-quotes{position:relative;max-width:640px;margin:1.6rem auto 0;padding:1rem 1.2rem 1rem 2.6rem;border:1px solid var(--line);border-left:3px solid var(--acc3);border-radius:12px;background:var(--card);text-align:left}
.tq-mark{position:absolute;left:.8rem;top:.35rem;font-family:var(--font-d);font-size:2rem;color:var(--acc3);line-height:1}
.tq-slide{margin:0;transition:opacity .45s ease,transform .45s ease}
.tq-slide.tq-out{opacity:0;transform:translateY(6px)}
.tq-slide p{font-family:var(--font-d);font-size:.98rem;font-style:italic;color:var(--txt);margin:0 0 .3rem;line-height:1.5}
.tq-slide cite{font-style:normal;font-size:.75rem;color:var(--muted);font-family:var(--font-m)}

/* product-innovation animation */
.iv-scene{position:relative;width:340px;height:340px;margin:0 auto;color:var(--acc1)}
.iv-gear{position:absolute;opacity:.9}
.iv-gear-big{width:170px;height:170px;left:60px;top:120px;animation:iv-spin 26s linear infinite}
.iv-gear-small{width:96px;height:96px;left:212px;top:170px;color:var(--acc3);animation:iv-spin-r 15s linear infinite}
@keyframes iv-spin{to{transform:rotate(360deg)}}
@keyframes iv-spin-r{to{transform:rotate(-360deg)}}
.iv-bulb{position:absolute;width:92px;height:92px;left:120px;top:18px;color:var(--acc1);animation:iv-bulb-glow 3.2s ease-in-out infinite alternate}
.iv-bulb .ivb-rays line{stroke:var(--acc3);stroke-width:2.4;stroke-linecap:round;animation:iv-rays 3.2s ease-in-out infinite alternate}
@keyframes iv-bulb-glow{from{filter:drop-shadow(0 0 4px rgba(90,162,255,.25))}to{filter:drop-shadow(0 0 18px rgba(90,162,255,.75))}}
@keyframes iv-rays{from{opacity:.25}to{opacity:1}}
.iv-orbit{position:absolute;inset:6px;border:1px dashed color-mix(in srgb,var(--acc1) 30%,transparent);border-radius:50%;animation:iv-spin 40s linear infinite}
.iv-chip{position:absolute;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--acc1);display:flex;align-items:center;justify-content:center;font:700 .8rem var(--font-m);color:var(--acc1);font-style:normal;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:iv-spin-r 40s linear infinite}
.iv-chip.c1{top:-22px;left:calc(50% - 22px)}
.iv-chip.c2{bottom:12%;left:-14px;color:var(--acc3);border-color:var(--acc3)}
.iv-chip.c3{bottom:12%;right:-14px}
.iv-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--acc3);opacity:0;animation:iv-rise 4.4s ease-in infinite}
.iv-spark.s1{left:36%;bottom:20%}
.iv-spark.s2{left:58%;bottom:16%;animation-delay:1.2s}
.iv-spark.s3{left:47%;bottom:26%;animation-delay:2.3s}
.iv-spark.s4{left:66%;bottom:30%;animation-delay:3.1s;background:var(--acc1)}
@keyframes iv-rise{0%{opacity:0;transform:translateY(0) scale(1)}12%{opacity:.9}100%{opacity:0;transform:translateY(-190px) scale(.4)}}
@media (prefers-reduced-motion:reduce){.iv-scene *{animation:none!important}.tq-slide{transition:none}}