/* SmartCliq
   Layout: one full-screen stage. The Cariboo landscape is drawn on a canvas behind everything;
   a home "trail map" of 10 chapters scrolls over it, and the lesson player shows one big card
   per scene, with a chapter progress strip on top and big round controls along the bottom.
   Light theme = sunny Cariboo day. Dark theme = night over the Fraser. */
:root{
  --sky:#d9f1ff;        /* page ground: clear Cariboo sky */
  --ink:#18224a;        /* main text: deep lake blue */
  --ink-soft:#4b5785;
  --panel:rgba(255,255,255,.9);
  --panel-line:rgba(24,34,74,.14);
  --chip:rgba(255,255,255,.78);
  --gold:#f5b100;       /* Cariboo placer gold */
  --gold-ink:#3d2a00;   /* text on gold */
  --coral:#e8483b;      /* warning / wrong */
  --ok:#14915a;         /* right answer */
  --ok-bg:rgba(20,145,90,.12);
  --coral-bg:rgba(232,72,59,.1);
  --quiz:#6a4cf0;       /* quick-check scenes */
  --quiz-bg:rgba(106,76,240,.12);
  --shadow:0 18px 50px rgba(24,34,74,.18);
  --display:"Baloo 2", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky:#0b1418; --ink:#eef0ea; --ink-soft:#a9bcbd;
    --panel:rgba(11,20,24,.82); --panel-line:rgba(238,240,234,.18); --chip:rgba(11,20,24,.7);
    --gold:#ffc53d; --gold-ink:#241800; --coral:#ff7a5c; --ok:#6fdc9e;
    --ok-bg:rgba(111,220,158,.14); --coral-bg:rgba(255,122,92,.14);
    --quiz:#a593ff; --quiz-bg:rgba(165,147,255,.16); --shadow:0 18px 50px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sky:#0b1418; --ink:#eef0ea; --ink-soft:#a9bcbd;
  --panel:rgba(11,20,24,.82); --panel-line:rgba(238,240,234,.18); --chip:rgba(11,20,24,.7);
  --gold:#ffc53d; --gold-ink:#241800; --coral:#ff7a5c; --ok:#6fdc9e;
  --ok-bg:rgba(111,220,158,.14); --coral-bg:rgba(255,122,92,.14);
  --quiz:#a593ff; --quiz-bg:rgba(165,147,255,.16); --shadow:0 18px 50px rgba(0,0,0,.45);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:16px;overflow:hidden}
button{font:inherit;color:inherit}
.stage{position:relative;height:100%;width:100%;overflow:hidden}
canvas#sky,canvas#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas#fx{pointer-events:none;z-index:6}

/* ---------- shared controls ---------- */
.btn{font:600 16px var(--body);color:var(--ink);background:var(--chip);border:2px solid var(--panel-line);
  border-radius:999px;min-height:52px;min-width:52px;padding:0 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .15s, border-color .15s, background .15s}
.btn:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn.big{min-height:62px;font-size:19px;padding:0 28px}
a.btn{text-decoration:none}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn:focus-visible,.opt:focus-visible,.seg:focus-visible,.chap:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.stars{font:700 16px var(--body);display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:2px solid var(--panel-line);
  border-radius:999px;padding:6px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;white-space:nowrap}
.stars .star{color:var(--gold)}
.star-ico{width:18px;height:18px;fill:var(--gold);flex:none}

/* ---------- home: the trail map ---------- */
.home{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:calc(20px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px))}
.home-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font:800 20px/1 var(--display);display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--gold);display:grid;place-items:center;color:var(--gold-ink)}
.brand-mark svg{width:24px;height:24px;fill:currentColor}
.hero{background:var(--panel);border:2px solid var(--panel-line);border-radius:28px;box-shadow:var(--shadow);
  padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Elect Technologies logo and name, on the hero card and the certificate. The logo sits on a
   white disc like it does on electtech.ca, so it reads on the night theme too. */
.et-by{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font:700 18px/1.1 var(--display);color:var(--ink);text-decoration:none}
.et-by img{width:40px;height:40px;border-radius:50%;background:#fff;flex:none}
.et-by b{color:#f37022;font-weight:800}
.kicker{font:600 14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hero h1{font:800 clamp(40px,7vw,84px)/.95 var(--display);margin:0;text-wrap:balance}
.hero h1 .hl,.line .hl{color:var(--gold);-webkit-text-stroke:0}
.hero p{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--ink-soft);margin:0;max-width:60ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.meter{display:flex;flex-direction:column;gap:8px;max-width:520px}
.meter-bar{height:14px;border-radius:999px;background:var(--panel-line);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:999px;transition:width .6s ease}
.meter-lbl{font:500 15px var(--body);color:var(--ink-soft)}
.sec-h{font:800 clamp(26px,3.2vw,34px)/1.1 var(--display);margin:8px 0 0;text-shadow:0 1px 0 var(--sky)}
.chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.chap{text-align:left;cursor:pointer;background:var(--panel);border:2px solid var(--panel-line);border-radius:22px;padding:18px;
  display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s, border-color .15s;min-width:0}
.chap:hover{transform:translateY(-3px);border-color:var(--gold)}
.chap-n{font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px}
.chap-n .badge{color:var(--ok)}
.chap h3{font:800 25px/1.05 var(--display);margin:0}
.chap h3 .hl{color:var(--gold)}
.chap p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.45}
.chap-stars{display:flex;gap:4px}
.chap-stars svg{width:22px;height:22px;fill:var(--panel-line)}
.chap-stars svg.on{fill:var(--gold)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.info div{background:var(--panel);border:2px solid var(--panel-line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.info span{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.info b{font:600 17px var(--body)}
.foot{font-size:14px;color:var(--ink-soft);text-align:center;text-shadow:0 1px 0 var(--sky)}

/* ---------- player ---------- */
.player{position:absolute;inset:0;z-index:3}
.top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:12px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.chap-lbl{font:700 15px var(--body);background:var(--chip);border:2px solid var(--panel-line);border-radius:999px;padding:8px 14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:34ch}
.segs{display:flex;gap:5px;flex:1;min-width:0}
.seg{flex:1;height:10px;background:var(--chip);border-radius:999px;overflow:hidden;cursor:pointer;border:2px solid var(--panel-line);padding:0;min-width:8px}
.seg i{display:block;height:100%;width:0;background:var(--gold)}
.seg.quiz{border-color:var(--quiz)}
.seg.quiz.right i{background:var(--ok)}
.seg.quiz.wrong i{background:var(--coral)}
.seg.done i{width:100%}

.scene{position:absolute;left:0;right:0;top:calc(78px + env(safe-area-inset-top,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;z-index:2;overflow-y:auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:8px 12px}
.inner{width:100%;max-width:920px;margin:auto clamp(0px,5vw,80px);display:flex;flex-direction:column;gap:18px;
  background:var(--panel);border:2px solid var(--panel-line);border-radius:30px;box-shadow:var(--shadow);
  padding:clamp(22px,3.6vw,40px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes pop{from{transform:translateY(18px) scale(.97);opacity:.4}to{transform:none;opacity:1}}
.eyebrow{font:600 14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow .tag{background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:4px 12px;letter-spacing:.08em}
.eyebrow .tag.q{background:var(--quiz);color:#fff}
.line{font:800 clamp(32px,5.4vw,68px)/1.02 var(--display);text-wrap:balance;margin:0;letter-spacing:-.005em}
.line .w{display:inline-block;opacity:.08;transform:translateY(.3em);transition:opacity .45s ease, transform .6s cubic-bezier(.2,1.2,.3,1)}
.line .w.on{opacity:1;transform:none}
.sub{font-size:clamp(18px,1.9vw,22px);line-height:1.55;color:var(--ink-soft);max-width:60ch;margin:0;opacity:.15;transform:translateY(8px);transition:opacity .7s ease, transform .7s ease}
.sub.on{opacity:1;transform:none}
.rule{font:700 clamp(16px,1.7vw,19px) var(--body);color:var(--gold-ink);background:var(--gold);align-self:flex-start;
  padding:10px 18px;border-radius:999px;display:inline-flex;gap:10px;align-items:center;transform:scale(.6);opacity:.2;transition:opacity .3s, transform .5s cubic-bezier(.2,1.6,.4,1)}
.rule.on{opacity:1;transform:none}
.rule svg{width:20px;height:20px;fill:currentColor}

.opts{display:grid;gap:12px;max-width:720px}
.opt{display:flex;gap:16px;align-items:center;text-align:left;font:500 clamp(17px,1.8vw,20px)/1.35 var(--body);color:var(--ink);
  background:var(--chip);border:3px solid var(--panel-line);padding:14px 18px;border-radius:20px;cursor:pointer;min-height:64px;
  transition:border-color .2s, background .2s, transform .2s;opacity:.2;transform:translateX(-14px)}
.opt.on{opacity:1;transform:none}
.opt:hover:not([disabled]){border-color:var(--gold);transform:translateX(4px)}
.opt kbd{font:800 20px var(--display);color:var(--gold-ink);background:var(--gold);border-radius:12px;width:40px;height:40px;display:grid;place-items:center;flex:none}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right kbd{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--coral);background:var(--coral-bg);animation:shake .45s}
.opt.wrong kbd{background:var(--coral);color:#fff}
.opt[disabled]{cursor:default}
@keyframes shake{0%,100%{translate:0}20%{translate:-8px}40%{translate:8px}60%{translate:-5px}80%{translate:5px}}
.verdict{font-size:clamp(17px,1.8vw,20px);line-height:1.5;max-width:62ch;min-height:1.5em}
.verdict:empty{display:none}
.verdict strong{font:800 26px var(--display);margin-right:10px}
.verdict .y{color:var(--ok)} .verdict .n{color:var(--coral)}

.card{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.card div{background:var(--chip);border:2px solid var(--panel-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.card span{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.card b{font:600 17px var(--body)}
.score{font:700 19px var(--body);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chap-list{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.chap-list li{font:600 15px var(--body);background:var(--chip);border:2px solid var(--panel-line);border-radius:999px;padding:6px 14px}

/* certificate */
.cert{border:3px dashed var(--gold);border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--chip)}
.cert h2{font:800 clamp(24px,3vw,32px)/1.1 var(--display);margin:0}
.cert p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.cert .who{font:800 clamp(28px,4vw,44px)/1 var(--display);color:var(--ink);overflow-wrap:anywhere}
.cert label{font:600 15px var(--body)}
.cert input{font:500 18px var(--body);color:var(--ink);background:var(--panel);border:2px solid var(--panel-line);border-radius:14px;padding:10px 14px;width:100%;max-width:360px}

.bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:10px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-top:14px;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.spacer{flex:1}
.count{font:700 15px var(--body);background:var(--chip);border:2px solid var(--panel-line);border-radius:999px;padding:8px 14px;font-variant-numeric:tabular-nums;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hint{font:500 13px var(--body);color:var(--ink-soft);background:var(--chip);border-radius:999px;padding:6px 12px}

@media (max-width:720px){
  .hint,.chap-lbl{display:none}
  .btn .lbl{display:none}
  .btn{padding:0 14px}
  .inner{margin:auto 0;border-radius:24px}
  .scene{top:calc(70px + env(safe-area-inset-top,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:420px){ .count{display:none} }
@media (prefers-reduced-motion:reduce){
  .inner,.opt.wrong{animation:none}
  .line .w,.sub,.rule,.opt,.btn,.chap{transition:none}
}
@media print{
  body{overflow:visible;background:#fff;color:#000}
  .stage>*:not(.player),.top,.bar,.cert .row,.cert label,.cert input{display:none!important}
  .player,.scene{position:static}
  .inner{box-shadow:none;border:0;animation:none}
}

/* Quick checks: size by screen height so question, answers and verdict fit without scrolling */
.inner.quiz{gap:clamp(10px,2vh,18px);padding:clamp(16px,3vh,36px) clamp(18px,3.6vw,40px)}
.inner.quiz .line{font-size:clamp(26px,min(5vw,7.6vh),64px)}
.inner.quiz .opts{gap:clamp(6px,1.2vh,12px)}
.inner.quiz .opt{min-height:0;padding:clamp(8px,1.4vh,14px) 18px;font-size:clamp(16px,min(1.8vw,2.6vh),20px)}
.inner.quiz .opt kbd{width:clamp(30px,4.4vh,40px);height:clamp(30px,4.4vh,40px);font-size:clamp(16px,2.4vh,20px)}
.inner.quiz .verdict{font-size:clamp(15px,min(1.7vw,2.4vh),19px);line-height:1.4;max-width:68ch}
.inner.quiz .verdict strong{display:block;font-size:clamp(20px,3vh,26px);margin:0 0 2px}