/* Motivasjonslaget: løypestolpen (B5), handlingslinja i leksjonen (A3),
   Siffers boble (B6) og feiringen (B4). Lå tidligere inline i app.html og
   injisert fra JS, som gjorde at rollevisning.html – som laster app.js, men
   ikke app.html sin <style> – viste løypestolpen som en tom nummerert liste.
   Alt som er felles for app.html, rollevisning.html og pilot/laeringsrom.html
   hører hjemme her. Flate farger, ingen glød og ingen gradient (hard-regel 3). */

/* B5 (12.09): løypestolpe «Du er her». Flate felt, ingen glød. */
.loypestolpe{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m,16px);
             padding:18px 20px; margin:0 0 22px;}
.ls-topp{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; justify-content:space-between;}
.loypestolpe h2{font-size:1.15rem; margin:4px 0 2px;}
.ls-tall{margin:0; font-size:.84rem; color:var(--muted);}
.ls-velg{font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ls-velg select{font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--line2);
                background:var(--surface); color:var(--ink);}
.ls-spor{display:flex; gap:5px; list-style:none; padding:0; margin:14px 0 12px;}
.ls-seg{flex:1 1 0; min-width:6px; height:10px; border-radius:999px; background:var(--line2);}
.ls-seg.igang{background:var(--amber);}
.ls-seg.ferdig{background:var(--green);}
.ls-seg.ls-naa{outline:2px solid var(--orange-deep,#C86A12); outline-offset:2px;}
.ls-her{margin:0; font-size:.95rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ls-kommentar{margin:8px 0 0; font-size:.86rem; color:var(--muted);}
@media(max-width:520px){.ls-spor{gap:4px} .ls-seg{height:12px}}
/* A3 (12.09): handlingslinja lå i flyten og flyttet seg med innholdet, så
   eleven måtte lete etter Neste for hvert steg. Nå står den fast nederst i
   skjermen – i tommelsonen på mobil – mens steget ruller under. */
.stepbar{position:fixed; left:50%; transform:translateX(-50%); z-index:40;
         bottom:calc(14px + env(safe-area-inset-bottom));
         width:min(720px, calc(100% - 44px));
         display:flex; align-items:center; gap:12px;
         background:color-mix(in srgb, var(--surface) 88%, transparent);
         -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
         border:1px solid var(--line2); border-radius:999px; padding:10px 12px;
         box-shadow:var(--shadow-m);}
/* plass under innholdet, så siste avsnitt ikke blir liggende bak linja */
#v-lesson .player-col{padding-bottom:26px;}
/* Siffer-knappen flytter seg opp så lenge handlingslinja står der */
body:has(#v-lesson.on .stepbar) #siffer-feedback-launch{
  bottom:calc(84px + env(safe-area-inset-bottom));}

/* Siffers boble (flyttet ut av siffer-utsagn.js) */
.siffer-boble{position:fixed; z-index:89; right:12px;
              bottom:calc(74px + env(safe-area-inset-bottom));
              max-width:min(300px, calc(100% - 24px));
              display:flex; align-items:flex-start; gap:8px; padding:11px 13px;
              background:var(--surface,#fff); color:var(--ink,#1b2a24);
              border:1px solid var(--line2,#cdd9cc); border-radius:14px;
              box-shadow:0 4px 20px #234c4024; font-size:.88rem; line-height:1.45;
              cursor:pointer; text-align:left;}
body:has(#v-lesson.on .stepbar) .siffer-boble{bottom:calc(146px + env(safe-area-inset-bottom));}
.siffer-boble span{flex:1;}
.siffer-boble b{flex:0 0 auto; font-weight:700; color:var(--muted,#5c6d61); font-size:1rem; line-height:1;}

/* Feiring (flyttet ut av feiring.js) */
.bm-feiring{position:fixed; inset:0; z-index:95; pointer-events:none;}
.bm-hake{position:fixed; z-index:94; pointer-events:none; display:grid; place-items:center;
         width:34px; height:34px; border-radius:50%; background:var(--green,#8DBE30);
         color:#fff; font-size:18px; font-weight:700; line-height:1;}

@media(prefers-reduced-motion:no-preference){
  .siffer-boble{animation:siffer-boble-inn .25s ease-out;}
  .bm-hake{animation:bm-hake-pop .42s cubic-bezier(.2,1.6,.4,1);}
  .bm-hake.bm-hake-stor{animation-duration:.56s;}
  #siffer-feedback-launch.bm-nikk{animation:bm-nikk .5s ease-in-out;}
}
@keyframes siffer-boble-inn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes bm-hake-pop{0%{transform:scale(.2); opacity:0} 55%{transform:scale(1.18); opacity:1} 100%{transform:scale(1); opacity:0}}
@keyframes bm-nikk{0%,100%{transform:translateY(0)} 35%{transform:translateY(4px)} 70%{transform:translateY(-2px)}}

/* B8 trinn 1: kapittellisten under stolpen. Tyngden flytter seg fra «gjort»
   til «igjen» når eleven passerer halvveis. */
.ls-sum{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
        margin:2px 0 0; font-size:.86rem; color:var(--muted);}
.ls-sum span{white-space:nowrap;}
.ls-sum .ls-prosent:before{content:'· ';}
.ls-sum .ls-rest:before{content:'· ';}
.ls-sum-gjort .ls-gjort,
.ls-sum-igjen .ls-rest{font-weight:700; font-size:.98rem; color:var(--ink);}
.ls-kapitler{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:2px;}
.ls-kapitler li{display:flex; align-items:baseline; gap:10px; justify-content:space-between;
                padding:7px 0; border-top:1px solid var(--line); font-size:.9rem;}
.ls-kap-navn{min-width:0;}
.ls-kap-status{flex:0 0 auto; font-size:.78rem; color:var(--muted);}
.ls-kap-naa .ls-kap-navn{font-weight:700;}
.ls-kap-naa .ls-kap-status{color:var(--orange-deep,#C86A12); font-weight:700;}

/* Dagens spill (B7) har egen fil: css/dagens-spill.css, felles med forsiden. */

/* Verktøykassa. Speiler Siffer-knappen: samme form, motsatt hjørne. */
#verktoykasse-knapp{position:fixed; z-index:88; left:12px;
                    bottom:max(12px, env(safe-area-inset-bottom));
                    display:flex; align-items:center; gap:8px; min-height:48px; padding:3px 15px;
                    background:var(--surface); color:var(--ink);
                    border:1px solid var(--line2); border-radius:30px;
                    box-shadow:0 4px 20px #234c4024; cursor:pointer; font-weight:700; font-size:13px;}
#verktoykasse-knapp span[aria-hidden]{font-size:17px; line-height:1;}
body:has(#v-lesson.on .stepbar) #verktoykasse-knapp{bottom:calc(84px + env(safe-area-inset-bottom));}
#verktoykasse{border:1px solid var(--line2); border-radius:18px; padding:0;
              max-width:min(420px, calc(100% - 24px)); background:var(--surface); color:var(--ink);}
#verktoykasse::backdrop{background:#142b2566;}
.vk-topp{display:flex; align-items:center; justify-content:space-between; gap:12px;
         padding:16px 18px 6px;}
.vk-topp h2{margin:0; font-size:1.1rem;}
.vk-topp button{background:none; border:0; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--muted);}
.vk-ingress{margin:0; padding:0 18px 10px; font-size:.86rem; color:var(--muted);}
.vk-liste{display:grid; gap:6px; padding:0 14px 16px;}
.vk-verktoy{display:grid; gap:2px; text-align:left; width:100%; padding:11px 13px;
            background:var(--surface2, var(--bg2)); border:1px solid var(--line);
            border-radius:12px; cursor:pointer; font:inherit; color:var(--ink);}
.vk-verktoy:hover{border-color:var(--line2);}
.vk-verktoy small{color:var(--muted); font-size:.82rem;}
.vk-status{font-size:.76rem; font-weight:700; color:var(--orange-deep,#C86A12);}
.vk-tom{margin:0; padding:0 4px 8px; color:var(--muted); font-size:.88rem;}

/* Lesevennlig (VK4). Luft og kortere linjer har forskningsstøtte; en egen
   dysleksifont har det ikke, så den er bevisst utelatt. */
body.lesevennlig{line-height:1.7; letter-spacing:.02em;}
body.lesevennlig p,
body.lesevennlig li,
body.lesevennlig .slide h3,
body.lesevennlig .qtext{max-width:60ch;}
body.lesevennlig em,
body.lesevennlig i{font-style:normal; font-weight:700;}
body.lesevennlig .slide p,
body.lesevennlig .qbox p{margin-bottom:1em;}
/* setningen som leses høyt */
.leses-na{box-shadow:inset 0 0 0 2px var(--amber);}
@media(prefers-reduced-motion:no-preference){.leses-na{transition:box-shadow .2s}}