@font-face{font-family:"Newsreader";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/figtree-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#0e1429; --bg2:#16203b; --card:#1a2340; --line:#2a3556; --ink:#f4f1ea; --muted:#8e9ab8; --soft:#6f7da3;
  --orange:#e8934a; --teal:#6ec7c4; --coral:#e07a6a; --olive:#a3b97f; --gold:#e3b04b; --lav:#a98bc9;
  --ok:#6ec7c4; --bad:#ef7a6c; --c:var(--orange);
  --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.d1,.d2{--c:var(--orange)} .d3{--c:var(--teal)} .d4{--c:var(--coral)} .d5{--c:var(--olive)} .d6{--c:var(--gold)} .d7{--c:var(--lav)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 16px/1.55 var(--sans);
  background:radial-gradient(1200px 600px at 85% -10%,var(--bg2),transparent 60%),var(--bg);background-attachment:fixed}
.shell{padding:28px 18px 56px}
.wrap{max-width:860px;margin:0 auto}
.wrap.wide{max-width:1100px}
.narrowish{max-width:720px}
.narrow{max-width:440px;margin:6vh auto 0}
a{color:var(--teal)}
h1{font:600 clamp(30px,5vw,50px)/1.1 var(--serif);margin:6px 0 22px;letter-spacing:-.01em;text-wrap:balance}
h2{margin:0}
h3{font:600 17px/1.3 var(--serif);margin:0 0 6px}
.lead{color:#c3cbe0;max-width:60ch}
.muted{color:var(--muted)} .small{font-size:14px} .italic{font-style:italic}
.kicker{font:700 14px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:26px 0 0}
.head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.head .kicker{margin-top:6px}
.logo{display:block;width:210px;max-width:42vw;height:auto;border-radius:12px;border:1px solid #0b1020}
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{display:inline-flex;align-items:center;gap:8px;color:#dfe5f5;text-decoration:none;font-weight:600}
.back:hover{color:#fff}
.flash{max-width:860px;margin:0 auto 18px;padding:12px 16px;border:1px solid var(--teal);border-radius:12px;color:var(--teal);background:rgba(110,199,196,.08)}

/* framsteg */
progress{appearance:none;-webkit-appearance:none;border:0;height:10px;border-radius:99px;background:#26314f;overflow:hidden;vertical-align:middle;width:100%}
progress::-webkit-progress-bar{background:#26314f;border-radius:99px}
progress::-webkit-progress-value{background:var(--orange);border-radius:99px}
progress::-moz-progress-bar{background:var(--orange);border-radius:99px}
.overall{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:999px;padding:14px 22px;background:rgba(26,35,64,.6);margin:22px 0 14px}
.overall .lbl{font:700 13px var(--sans);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.overall .num{font-weight:600;white-space:nowrap;color:#cfd7ea}
.overall.bottom{border:0;background:none;padding:0;margin:44px 0 0}
.overall.bottom progress::-webkit-progress-value{background:var(--c)}
.overall.bottom progress::-moz-progress-bar{background:var(--c)}

/* knappar */
.btn{display:inline-block;font:700 16px/1 var(--sans);background:var(--orange);color:#1a0e04;border:0;border-radius:12px;padding:14px 22px;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:8px 12px;font-size:13px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.linkbtn{background:none;border:0;color:var(--teal);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
form.inline{display:inline}

/* delrubriker och kort */
.pill{display:inline-block;margin:30px 0 12px;padding:8px 14px;line-height:1.3;border-radius:16px;font:700 12.5px/1 var(--sans);letter-spacing:.12em;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){.cards{grid-template-columns:minmax(0,1fr)}.overall{padding:12px 16px}.overall .lbl{display:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px}
.chap{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.chap:hover{border-color:#3d4b73}
.chap .ct{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.chap .kap{font:700 12.5px var(--sans);letter-spacing:.1em;color:var(--c)}
.chap .title{font:600 18px/1.25 var(--serif)}
.chap .cnt{font-size:13px;color:var(--muted);white-space:nowrap}
.box{flex:none;width:32px;height:32px;border-radius:9px;border:1.5px solid #3a4668;background:#141c36;color:#0e1429;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.box.on{background:var(--teal);border-color:var(--teal)}
.chap .box{cursor:default}

/* kapitelsida */
.rows{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.srow{display:flex;align-items:stretch;gap:0;padding:0}
.srow .tick{display:flex;align-items:center;padding:0 0 0 20px}
.srow .box{width:40px;height:40px;border-radius:10px}
.slink{flex:1;display:flex;align-items:center;gap:22px;padding:24px 22px;text-decoration:none;color:var(--ink);min-width:0}
.slabel{font:700 15px var(--sans);letter-spacing:.04em;color:var(--orange);white-space:nowrap;min-width:64px}
.stitle{font:600 clamp(19px,2.6vw,26px)/1.2 var(--serif);flex:1}
.min{font-size:13px;color:var(--muted);white-space:nowrap}
.isdone .stitle{text-decoration:line-through;color:var(--soft)}
.srow:hover{border-color:#3d4b73}
@media (max-width:560px){.slink{flex-wrap:wrap;gap:4px 12px;padding:16px}.slabel{width:100%}.srow .tick{padding-left:14px}.min{display:none}}

/* scen */
.player{width:min(100%,420px);aspect-ratio:9/16;margin:6px auto 20px;background:#070b18;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.player iframe{width:100%;height:100%;border:0;display:block}
.player.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.quiz{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:6px 0 20px;padding:18px;border:1px solid var(--orange);border-radius:14px}

/* faq, kort, formulär */
.faqbar{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding:18px 22px;border-radius:14px;background:var(--orange);color:#1a0e04;font:700 17px var(--serif);text-decoration:none}
.mailbar{display:flex;flex-direction:column;margin:18px 0 8px;padding:16px 20px;border-radius:14px;background:var(--orange);color:#1a0e04;text-decoration:none}
.mailbar strong{font:700 19px var(--serif)} .mailbar span{font-size:13px;font-weight:600}
.qa{padding:16px 20px;margin-bottom:10px}
.qa p{margin:0;color:#c3cbe0}
.foot{margin-top:46px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.login{text-align:left}
.login .logo{margin-bottom:26px}
.stack{display:flex;flex-direction:column;gap:12px;margin:18px 0}
label{font-weight:600;font-size:14px;color:#cfd7ea;display:block;margin-bottom:5px}
select{width:100%;font:400 16px var(--sans);color:var(--ink);background:#101730;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
input[type=text],input[type=email],input[type=password],input[type=date],input:not([type]){width:100%;font:400 16px var(--sans);color:var(--ink);background:#101730;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.note{padding:12px 14px;border-radius:12px;border:1px solid var(--line)} .note.ok{border-color:var(--teal);color:var(--teal)} .note.bad{border-color:var(--bad);color:var(--bad)}
ul.checks{list-style:none;padding:0;margin:0 0 14px} ul.checks li{padding:3px 0} ul.checks .ok{color:var(--teal)} ul.checks .bad{color:var(--bad)}

/* admin */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:#cfd7ea;font-weight:600;font-size:14px}
.tabs a[aria-current=page]{background:var(--card);border-color:var(--orange);color:#fff}
.tablewrap{overflow-x:auto;padding:6px 12px}
table{border-collapse:collapse;width:100%;min-width:760px}
th{font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td progress{width:110px}
td input{padding:8px 10px;font-size:14px}
.acts{white-space:nowrap}
.chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:rgba(232,147,74,.18);color:var(--orange)}
.pillst{font-weight:700;font-size:13px} .pillst.ok{color:var(--teal)} .pillst.bad{color:var(--bad)}
.addbox{padding:20px;margin:22px 0}
.addbox h2{font:600 22px var(--serif);margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:end}
.checks{display:flex;flex-direction:column;gap:6px} .chk{font-weight:400;display:flex;gap:8px;align-items:center;margin:0}
.chip.chef{background:rgba(110,199,196,.18);color:var(--teal)}
.notice{margin-top:34px;max-width:70ch}

/* v1.7: på mobilen ska videon börja högt upp på scensidan (spelaren behåller full bredd). */
@media (max-width:640px){
  .scene{padding-top:0}
  .scene .logo{width:128px;max-width:34vw;border-radius:9px}
  .scene .kicker{font-size:11px;letter-spacing:.11em;margin-top:14px}
  .scene h1{font-size:25px;line-height:1.15;margin:4px 0 12px}
  .scene .player{margin-top:0}
}