/* Boerie Boss course: the journey, the lesson, the exercises and the interactive tools.
   Loaded after the base styles in kursus.html (same colour tokens). */

/* ===== the journey ===== */
.path{gap:22px}
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;padding:26px 24px;border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--mustard) 26%,var(--panel)),var(--panel) 70%);border:1px solid var(--line)}
.herotext{display:flex;flex-direction:column;gap:6px;flex:1 1 300px}
.hero h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.meter{height:10px;border-radius:99px;background:color-mix(in srgb,var(--fg) 10%,transparent);overflow:hidden;max-width:420px;margin-top:8px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .8s cubic-bezier(.16,1,.3,1)}
.meter.small{height:7px;max-width:320px;margin:2px 0 4px}
.meterlab{font-size:.9rem;color:var(--muted)}
.nextbtn{flex:0 1 auto;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:14px;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--ember) 70%,transparent);max-width:100%}
.nextbtn small{display:block;font-family:var(--body);font-size:.8rem;opacity:.85}
.ntile{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,#fff 22%,transparent);flex:none}
.leg{display:flex;flex-direction:column;gap:10px}
.stagehead{display:flex;align-items:center;gap:12px}
.stagehead h2{flex:1}
.stage{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fg);color:var(--bg);font-family:var(--display);font-size:1.05rem;flex:none;margin:0}
.stage.s-full{background:var(--green);color:#fff} .stage.s-lock{background:var(--line);color:var(--muted)}
.count{font-family:var(--display);color:var(--muted);font-size:1.05rem}
.trail{list-style:none;margin:0;padding:6px 0 0;position:relative;display:flex;flex-direction:column;gap:8px}
.trail::before{content:"";position:absolute;left:25px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--line)}
.node{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 14px 10px 0;border-radius:14px;transition:background .2s}
.node .dot{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--panel);border:2px solid var(--line);color:var(--muted)}
.node.s-busy .dot,.node.s-done .dot{border-color:var(--mustard);color:var(--fg);background:var(--mustard-soft)}
.node.s-full .dot{background:var(--green);border-color:var(--green);color:#fff}
.node.s-help .dot{border-color:var(--neg);color:var(--neg);background:var(--neg-soft)}
.node.s-none .dot{border-color:var(--fg);color:var(--fg)}
.node.s-lock .dot{border-style:dashed;opacity:.75}
.node.now{background:var(--panel);box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}
.node.now .dot{border-color:var(--ember);color:var(--ember);background:var(--panel);box-shadow:0 0 0 5px color-mix(in srgb,var(--ember) 18%,transparent)}
.nbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.nid{font-family:var(--display);font-size:.9rem;color:var(--muted);letter-spacing:.3px}
.ntitle{font-weight:500;font-size:1.05rem;text-align:left;justify-content:flex-start;padding:0;min-height:0;border:0;background:none;color:var(--fg)}
button.ntitle{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--fg) 25%,transparent);text-underline-offset:4px;text-decoration-thickness:2px}
button.ntitle:hover{text-decoration-color:var(--ember);background:none}
.node.s-lock .ntitle{color:var(--muted)}
.nbody small{color:var(--muted);font-size:.86rem}
.chip.s-lock{color:var(--muted);background:transparent}
@media (max-width:560px){.node{grid-template-columns:52px 1fr}.node .chip{grid-column:2;justify-self:start}}
.gamecard{display:flex;gap:18px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.gamecard > div{display:flex;flex-direction:column;gap:8px}
.gamecard.locked{opacity:.8}
.cart{width:110px;flex:none}
.cart .cb{fill:var(--ember)} .cart .cl{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round} .cart .cw{fill:var(--panel);stroke:var(--fg);stroke-width:3}
.gamecard.locked .cart .cb{fill:var(--line)}
@media (max-width:520px){.gamecard{flex-direction:column;align-items:flex-start}.cart{width:84px}}
.countdown{display:flex;align-items:center;gap:14px}
.cal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:62px;border-radius:12px;background:var(--panel);border:2px solid var(--ember);line-height:1;flex:none}
.cal b{font-family:var(--display);font-size:1.6rem;font-weight:400} .cal small{text-transform:uppercase;font-size:.72rem;color:var(--ember);font-weight:700;margin-top:3px}
.certcard{display:flex;justify-content:center;padding:6px;text-align:center}

/* ===== one lesson ===== */
.lbanner{display:flex;gap:18px;align-items:flex-start;padding:22px 22px 18px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.ltile{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;flex:none;color:var(--ember);background:color-mix(in srgb,var(--ember) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--ember) 25%,var(--line))}
.lbtext{display:flex;flex-direction:column;gap:6px;min-width:0}
.lmeta{color:var(--muted);font-size:.9rem}
@media (max-width:520px){.lbanner{flex-direction:column;gap:12px}.ltile{width:56px;height:56px;border-radius:14px}}
.steps{display:flex;gap:0;position:relative;margin:0}
.steps button{flex:1;flex-direction:column;gap:6px;background:none;border:0;border-radius:12px;padding:8px 4px;font-weight:500;color:var(--muted);position:relative;min-width:0}
.steps button::before{content:"";position:absolute;top:22px;right:50%;width:100%;height:3px;background:var(--line);z-index:0}
.steps button:first-child::before{display:none}
.steps button.done + button::before{background:var(--green)}
.steps button .n{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--panel);font-size:.85rem;color:var(--fg)}
.steps button.done .n{background:var(--green);color:#fff;border-color:var(--green)}
.steps button[aria-current="step"]{color:var(--fg)}
.steps button[aria-current="step"] .n{border-color:var(--ember);background:var(--ember);color:var(--ember-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ember) 18%,transparent)}
.steps button:hover{background:color-mix(in srgb,var(--panel) 60%,transparent)}
.steps .sl{position:relative;z-index:1}
.stepcard{padding:24px;border-radius:20px}
.screen{display:flex;flex-direction:column;gap:16px;min-height:9em}
.prose b{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--mustard) 40%,transparent) 0);padding:0 1px}
.prose h3{margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .from-r{animation:fromR .38s cubic-bezier(.16,1,.3,1)} .from-l{animation:fromL .38s cubic-bezier(.16,1,.3,1)}
  @keyframes fromR{from{opacity:.25;transform:translateX(28px)}to{opacity:1;transform:none}}
  @keyframes fromL{from{opacity:.25;transform:translateX(-28px)}to{opacity:1;transform:none}}
  .node.now .dot{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ember) 35%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
}

/* drag-and-drop sorting */
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:62px;padding:12px;border-radius:14px;border:2px dashed var(--line);background:var(--panel-2)}
.pool.over,.pool.target{border-color:var(--muted)}
.bins2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
.bin{display:flex;flex-direction:column;gap:8px;min-height:130px;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--panel);transition:border-color .15s,background .15s,transform .15s}
.bin h4{margin:0;font-family:var(--display);font-weight:400;font-size:1.05rem}
.bin.target{border-style:dashed;border-color:var(--ember);cursor:pointer}
.bin.over{background:color-mix(in srgb,var(--ember) 8%,var(--panel));border-color:var(--ember);transform:scale(1.015)}
.bincards{display:flex;flex-wrap:wrap;gap:6px}
.dcard{min-height:40px;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 0 var(--line);font-weight:500;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;text-align:left}
.dcard.sel{border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 25%,transparent)}
.dcard.dragging{opacity:.35}
.dcard.ok{background:var(--green-soft);border-color:var(--green);box-shadow:none}
.dcard.bad{background:var(--neg-soft);border-color:var(--neg);box-shadow:none}
.dcard:disabled{opacity:1;cursor:default}
.dcard.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg);box-shadow:0 12px 26px -8px rgba(0,0,0,.4);border-color:var(--ember)}
@media (prefers-reduced-motion:no-preference){.dcard.bad{animation:shake .4s}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}}
.whys{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:.95rem}

/* the test, one question at a time */
.qnav{display:flex;gap:6px;flex-wrap:wrap}
.qnav button{width:40px;height:40px;min-height:0;padding:0;border-radius:50%;font-weight:500}
.qnav button.ans{background:var(--panel-2);border-color:var(--muted)}
.qnav button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.qcard{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.qn{color:var(--muted);font-size:.9rem}
.qq{font-size:clamp(1.25rem,3.2vw,1.55rem);max-width:40ch}
.qopts{display:flex;flex-direction:column;gap:8px}
.qopt{justify-content:flex-start;text-align:left;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel-2)}
.qopt .let{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-family:var(--display);flex:none}
.qopt.on{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 8%,var(--panel))}
.qopt.on .let{background:var(--ember);color:var(--ember-ink);border-color:var(--ember)}
.confetti{position:fixed;inset:0;z-index:60;pointer-events:none;width:100%;height:100%}

/* ===== interactive tools inside the lessons ===== */
.widget{padding:18px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start}
@media (max-width:700px){.wgrid{grid-template-columns:1fr}}
.wcontrols{display:flex;flex-direction:column;gap:14px}
.wcontrols.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wslider{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-weight:500;font-size:.95rem}
.wslider input{grid-column:1/-1;padding:0;border:0;background:none;accent-color:var(--ember);height:28px}
.wslider output{font-family:var(--display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.wtick{flex-direction:row;align-items:center;gap:10px;font-weight:500}
.wtick input{width:20px;height:20px;accent-color:var(--ember)}
.wchart{width:100%;height:auto;display:block;color:var(--fg)}
.wchart .ax{stroke:var(--muted);stroke-width:1.2}
.wchart .l-inc{stroke:var(--green);stroke-width:3;fill:none} .wchart .l-cost{stroke:var(--ember);stroke-width:3;fill:none}
.wchart .zone-ok{fill:color-mix(in srgb,var(--green) 16%,transparent)} .wchart .zone-bad{fill:color-mix(in srgb,var(--neg) 12%,transparent)}
.wchart .beline{stroke:var(--fg);stroke-dasharray:4 4} .wchart .bedot{fill:var(--mustard);stroke:var(--fg);stroke-width:1.5}
.wchart .sline{stroke:var(--fg);stroke-opacity:.35;stroke-width:1.5}
.wchart text{font-family:var(--body);font-size:11px;fill:var(--muted)} .wchart .lab{font-weight:700;font-size:12px} .wchart .lab.inc{fill:var(--green)} .wchart .lab.cost{fill:var(--ember)}
.wchart .b-ok{fill:var(--green)} .wchart .b-bad{fill:var(--neg)}
.wread{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px}
.wread > div{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.wread b{font-family:var(--display);font-size:1.4rem;font-weight:400}
.wread b.pos{color:var(--green)} .wread b.neg{color:var(--neg)}
.wread span{color:var(--muted);font-size:.86rem}
.wread p{grid-column:1/-1}
.wwarn{grid-column:1/-1;color:var(--neg);font-weight:500}
.wbars{display:flex;flex-direction:column;gap:10px}
.wbar{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;font-size:.92rem}
.wbar i{display:block;height:16px;border-radius:6px;min-width:2px;transition:width .3s cubic-bezier(.16,1,.3,1)}
.wbar .b-ok{background:var(--green)} .wbar .b-bad{background:var(--neg)} .wbar .b-warn{background:var(--mustard)}
.wbar b{font-variant-numeric:tabular-nums;text-align:right}
.wstate{border-collapse:collapse;width:100%;background:var(--panel);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
.wstate td,.wstate th{padding:8px 12px;border-bottom:1px solid var(--line)}
.wstate th{font-weight:500;color:var(--muted);text-align:left}
.wstate .r{text-align:right}
.wstate tr.sub td{font-weight:700;border-top:2px solid var(--fg)}
.wstate tr.tot td{font-weight:700;font-size:1.05rem;border-top:2px solid var(--fg);border-bottom:4px double var(--fg)}
.wstate tr.tot.pos td:last-child{color:var(--green)} .wstate tr.tot.neg td:last-child{color:var(--neg)}
.wsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:12px}
.wsplit h4{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:1.05rem}
.wchart.small{max-height:150px}
.tbtns{display:flex;flex-direction:column;gap:6px}
.tbtns button{justify-content:flex-start;text-align:left;background:var(--panel)}
.tbtns button[aria-pressed="true"]{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.wlast{padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.scale{display:flex;flex-direction:column;gap:10px}
.beam{height:8px;border-radius:8px;background:var(--fg);margin:0 8%}
.pans{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.pan{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center}
.pan h4{margin:0;font-size:.9rem;font-weight:500;color:var(--muted)}
.pan > b{font-family:var(--display);font-size:1.4rem;font-weight:400}
.eq{font-family:var(--display);font-size:2rem;padding-bottom:28px}
.stack{display:flex;flex-direction:column-reverse;justify-content:flex-start;min-height:160px;border-bottom:3px solid var(--fg);gap:2px}
.blk{border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:500;color:#fff;overflow:hidden;transition:height .4s cubic-bezier(.16,1,.3,1);min-height:0}
.blk span{padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.c1{background:#0b7a4b} .blk.c2{background:#2f6f8f} .blk.c3{background:#8a6d1d} .blk.c4{background:#c24a17} .blk.c5{background:#7a4a8c}
.tq{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:12px}
.tq b{font-size:1.08rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.tacc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px 10px;cursor:pointer;transition:border-color .15s,transform .15s}
.tacc:hover{border-color:var(--ember);transform:translateY(-1px)}
.tacc h4{margin:0 0 4px;text-align:center;font-size:.92rem;border-bottom:2px solid var(--fg);padding-bottom:4px}
.tcols{display:grid;grid-template-columns:1fr 1fr;min-height:34px}
.tcols > div{display:flex;flex-direction:column;gap:2px;padding:2px 4px;font-size:.84rem;font-variant-numeric:tabular-nums}
.tcols > div:first-child{border-right:2px solid var(--fg)} .tcols > div:last-child{text-align:right}
.tbal{font-size:.78rem;color:var(--muted);text-align:center;margin-top:4px}
.flow{max-width:420px;margin:0 auto}
.flow .fl{fill:none;stroke-width:2.5;opacity:.28;color:var(--muted);stroke:currentColor}
.flow .fl.money{color:var(--green)} .flow .fl.goods{color:var(--ember)}
.flow .fl.on{opacity:1;stroke-width:3.5;stroke-dasharray:8 6}
@media (prefers-reduced-motion:no-preference){.flow .fl.on{animation:dash 1s linear infinite}@keyframes dash{to{stroke-dashoffset:-14}}}
.flow .fnode rect{fill:var(--panel);stroke:var(--fg);stroke-width:2} .flow .fnode text{fill:var(--fg);font-size:12px;font-weight:700}
.flow .gov rect{fill:var(--mustard-soft)} .flow .mk{font-size:11px;fill:var(--muted);font-weight:500}
.sw{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.sw.money{background:var(--green)} .sw.goods{background:var(--ember)}
.wslider output{grid-row:1;grid-column:2}
.wslider span{grid-row:1;grid-column:1}
.wflow{display:flex;flex-direction:column;gap:16px}
.wflow .flow{max-width:560px;width:100%}
.flow .mk-money{fill:var(--green)} .flow .mk-goods{fill:var(--ember)}
.tbtns.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.flow .fnode text{font-size:13px}

/* ===== the app's navigation, the profile, and the lesson pages ===== */
.appnav{display:flex;gap:4px;margin-left:6px;flex-wrap:wrap}
.appnav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--fg);text-decoration:none;font-weight:500}
.appnav a:hover{background:var(--panel)}
.appnav a[aria-current="page"]{background:var(--fg);color:var(--bg)}
@media (max-width:560px){.appnav a{padding:6px 8px;font-size:.92rem}.topbar .brand img{height:36px}}
.phero{align-items:center}
.avatar{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;flex:none;background:var(--ember);color:var(--ember-ink);font-family:var(--display);font-size:2.6rem;box-shadow:0 8px 20px -10px var(--ember)}
.pactions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.btnline{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border-radius:10px;border:1px solid var(--fg);color:var(--fg);text-decoration:none;font-weight:500;background:var(--panel)}
.btnline:hover{background:var(--panel-2)}
.profile .leg h2{margin-bottom:2px}
ol.mini{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
ol.mini li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--line)}
ol.mini li:first-child{border-top:0}
ol.mini a{color:var(--fg);font-weight:500}
ol.mini li.s-lock span:nth-child(2){color:var(--muted)}
@media (max-width:560px){ol.mini li{grid-template-columns:40px 1fr}ol.mini .chip{grid-column:2;justify-self:start}}
ul.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.notes li{padding:12px 14px;border-radius:12px;background:var(--mustard-soft);border:1px solid color-mix(in srgb,var(--mustard) 45%,var(--line))}
ul.notes a{color:var(--fg)}
main.static .screen-static{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
main.static .screen-static h2{font-size:1rem;color:var(--muted)}
main.static{padding-top:10px}

/* course review fixes: compact banner after the first screen, the screen's picture, tap targets, marks that do not rely on colour */
.lbanner.compact{padding-top:8px;padding-bottom:8px}
.lbanner.compact .ltile,.lbanner.compact .goal{display:none}
.lbanner.compact h1{font-size:clamp(1.15rem,4.5vw,1.45rem)}
.screen .pic{font-size:2.6rem;line-height:1;margin:0 0 6px}
.qnav button{width:44px;height:44px}
.dcard{min-height:44px}
.dcard.ok::before{content:"✓ ";font-weight:700}
.dcard.bad::before{content:"✗ ";font-weight:700}
.review li.short{padding-top:6px;padding-bottom:6px}
.review li.short .q{margin:0}
.btn-line{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:500}
@media (max-width:520px){.steps button{padding:4px 6px}.lhead{margin-bottom:4px}}
/* phones: the page links get their own row, so the language choice and "Meld af" keep their full width */
@media (max-width:560px){.topbar{flex-wrap:wrap;row-gap:4px}.appnav{order:3;flex:1 1 100%;margin-left:0;justify-content:space-between}.langpick select{max-width:7.5em}}