/* ============================================================
   Skillport – lugnt och fokuserat
   ------------------------------------------------------------
   Varm off-white, dämpad grön accent, hårfina linjer och luft.
   Typografin gör jobbet; färgen används bara där den betyder
   något. Tänkt för någon som redan är nervös och inte behöver
   fler intryck.
   ============================================================ */

:root{
  --bg:#FAF9F6;
  --card:#FFFFFF;
  --ink:#1A1A18;
  --ink-2:#4A4A45;
  --muted:#5F5D56;
  --line:#E6E3DB;
  --line-2:#F0EEE8;

  --accent:#2F6B4F;
  --accent-2:#245740;
  --accent-soft:#EAF1EC;

  --ok:#2F6B4F;      --ok-soft:#EAF1EC;
  --warn:#8A6220;    --warn-soft:#F7F0E2;
  --bad:#9B3A32;     --bad-soft:#F7EAE8;

  --r:12px;
  --r-lg:16px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:100%;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:80px;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0 0 .45em}
h1{font-size:1.7rem}
h2{font-size:1.22rem}
h3{font-size:1.02rem}
h4{font-size:.95rem}
p{margin:0 0 .8em}
a{color:var(--accent)}
b,strong{font-weight:650}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.tiny{font-size:.78rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.hidden{display:none!important}

/* ---------- topp ---------- */
header.top{background:var(--bg);padding:26px 0 6px}
header.top .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-height:34px}
header.top .sub{color:var(--ink-2);font-size:.95rem;margin:0;font-family:var(--serif)}
.countdown{text-align:right;cursor:pointer}
.countdown b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--accent)}
.countdown span{font-size:.78rem;letter-spacing:.01em;color:var(--muted)}

/* ---------- navigation ---------- */
nav.tabs{
  position:sticky;top:0;z-index:20;background:rgba(250,249,246,.94);
  backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);margin-bottom:22px;
}
nav.tabs .inner{display:flex;gap:22px;max-width:760px;margin:0 auto;padding:0 20px;overflow-x:auto;scrollbar-width:none}
nav.tabs .inner::-webkit-scrollbar{display:none}
nav.tabs button{
  flex:0 0 auto;border:0;background:none;color:var(--muted);
  padding:14px 4px 12px;min-height:46px;min-width:44px;font-size:.92rem;font-weight:500;cursor:pointer;font-family:inherit;
  border-bottom:2px solid transparent;letter-spacing:.005em;
}
nav.tabs button:hover{color:var(--ink-2)}
nav.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

nav.under{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 20px}
nav.under button{
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  min-height:44px;min-width:44px;padding:10px 16px;border-radius:999px;font-size:.83rem;font-weight:500;cursor:pointer;font-family:inherit;
}
nav.under button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- kort ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:0 0 14px}
.card.tight{padding:15px 18px}
.card.bar{border-left:3px solid var(--accent)}

/* ---------- knappar ---------- */
.btn{
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:9px;
  /* Fyra kontroller är <label class="btn"> runt en dold filväljare. De ska se
     ut och kännas som knappar, inte som brödtext. */
  text-decoration:none;
  padding:11px 20px;font-size:.94rem;font-weight:550;cursor:pointer;font-family:inherit;
  transition:background .12s ease;
  /* Tummen är inte en muspekare. 44px är minsta träffyta på mobil. */
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn:active{transform:translateY(.5px)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--line-2);border-color:var(--muted)}
.btn.sub{background:transparent;color:var(--muted);border-color:transparent;padding:8px 10px;min-height:44px}
.btn.sub:hover{color:var(--ink);background:var(--line-2)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn:disabled{opacity:.4;cursor:default}
.btn.wide{width:100%}

/* ---------- startsidan ---------- */
.hero{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 24px 26px;margin-bottom:14px;text-align:center;
}
.hero .dagar{font-family:var(--serif);font-size:4rem;line-height:.95;color:var(--accent);letter-spacing:-.03em}
.hero .etikett{font-size:.86rem;letter-spacing:.01em;color:var(--ink-2);margin-top:6px}
.hero .datum{color:var(--ink-2);font-size:.94rem;margin-top:12px}
.hero .streck{height:1px;background:var(--line);margin:20px 0 16px}
.hero .rad{display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.hero .rad div{text-align:center}
.hero .rad b{display:block;font-family:var(--serif);font-size:1.42rem;line-height:1.1}
.hero .rad span{font-size:.8rem;letter-spacing:.01em;color:var(--muted)}

.namn-etikett{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--ink-2);margin:0 0 14px}

/* beredskapsstaplar */
.bered{margin-top:4px}
.bered .grupp{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--ink-2);margin:18px 0 10px}
.bered .grupp:first-child{margin-top:0}
.bered .rad{padding:11px 0;border-bottom:1px solid var(--line-2)}
.bered .rad:last-child{border-bottom:0}
.bered .topp{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:8px}
.bered .namn{font-size:.92rem}
.bered .namn i{font-style:normal;color:var(--muted);font-size:.8rem;margin-left:7px}
.bered .varde{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--ink-2);white-space:nowrap}
.bered .varde.tunt{color:var(--muted);font-size:.8rem}
.bered .spar{display:block;height:5px;padding:0;border:0;background:var(--line-2);border-radius:99px;overflow:hidden}
.bered .spar i{display:block;height:5px;border-radius:99px;transition:width .4s ease}
.bered .stod{display:block;height:2px;padding:0;border:0;background:var(--line-2);border-radius:99px;overflow:hidden;margin-top:3px}
.bered .stod i{display:block;height:2px;background:var(--muted);opacity:.45}

/* ---------- statistikrader ---------- */
.statrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.statrow:last-child{border-bottom:0}
.statrow .nm{flex:0 0 108px;font-weight:550;font-size:.9rem}
.statrow .bar{flex:1;height:5px;background:var(--line-2);border-radius:99px;overflow:hidden}
.statrow .bar i{display:block;height:100%;border-radius:99px}
.statrow .vl{flex:0 0 78px;text-align:right;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center}
.kpi b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.2}
.kpi span{font-size:.8rem;color:var(--muted);letter-spacing:.01em}

/* ---------- moduler ---------- */
.modcard{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .12s ease;
}
.modcard:hover{border-color:var(--accent)}
.modcard b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600}
.modcard .d{color:var(--muted);font-size:.81rem;margin-top:3px;line-height:1.5}
.modcard .bar{height:4px;border-radius:99px;background:var(--line-2);margin-top:11px;overflow:hidden}
.modcard .bar i{display:block;height:100%;background:var(--accent)}

/* ---------- formulär ---------- */
label.fl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:0 0 5px;letter-spacing:.02em}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;min-height:44px;padding:12px 13px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:1rem;background:var(--card);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
textarea{min-height:92px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);outline-offset:1px;border-color:var(--accent)}

/* ---------- frågevy ---------- */
.qmeta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:14px}
.pill{display:inline-block;background:var(--line-2);color:var(--ink-2);border-radius:5px;padding:2px 8px;font-size:.72rem;font-weight:650;letter-spacing:.04em}
.pill.g{background:var(--ok-soft);color:var(--ok)}
.pill.r{background:var(--bad-soft);color:var(--bad)}
.pill.y{background:var(--warn-soft);color:var(--warn)}
.progline{height:2px;background:var(--line-2);margin-bottom:20px;overflow:hidden}
.progline i{display:block;height:100%;background:var(--accent);transition:width .3s ease}

.qtext{font-size:1.1rem;line-height:1.6;margin:0 0 18px;white-space:pre-wrap}
.alts{display:grid;gap:9px}
.alt{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--card);border-radius:10px;padding:13px 16px;
  cursor:pointer;font-family:inherit;font-size:.97rem;color:var(--ink);line-height:1.5;
  transition:border-color .1s ease,background .1s ease;
}
.alt:hover{border-color:var(--muted)}
.alt .k{font-weight:650;color:var(--muted);flex:0 0 auto;min-width:1.1em}
.alt.sel{border-color:var(--accent);background:var(--accent-soft)}
.alt.sel .k{color:var(--accent)}
.alt.right{border-color:var(--ok);background:var(--ok-soft)}
.alt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.alt[disabled]{cursor:default}

.expl{background:var(--line-2);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:.91rem;line-height:1.6}
.underlag{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;font-size:.92rem}
.underlag h4{margin:0 0 10px;font-size:.9rem;color:var(--ink-2)}
table{width:100%;border-collapse:collapse;font-size:.87rem;font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:right}
th:first-child,td:first-child{text-align:left}
th{font-weight:650;color:var(--ink-2);border-bottom-color:var(--ink-2)}
.readtext{font-size:1.06rem;line-height:1.75}
.readtext p{margin-bottom:1em}

.timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
.timer.low{color:var(--bad)}

.note{background:var(--warn-soft);border-radius:10px;padding:12px 15px;font-size:.87rem;color:#6B4C16;line-height:1.6}
.ok-note{background:var(--ok-soft);border-radius:10px;padding:12px 15px;font-size:.87rem;color:#1F4A37;line-height:1.6}

.week{border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin-bottom:10px;background:var(--card)}
.week.now{border-color:var(--accent);background:var(--accent-soft)}
.week h4{margin:0 0 7px;font-size:.92rem}
.week ul{margin:0;padding-left:18px;font-size:.87rem;color:var(--ink-2)}
.week li{margin-bottom:3px}

/* ---------- ordträning ---------- */
.flash{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 22px;
  text-align:center;min-height:190px;display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.flash .w{font-family:var(--serif);font-size:2.1rem;font-weight:600;letter-spacing:-.02em}
.flash .m{font-size:1.05rem;color:var(--accent);font-weight:550}

/* ---------- AI-panel ---------- */
.overlay{position:fixed;inset:0;background:rgba(26,26,24,.4);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.panel{background:var(--card);width:100%;max-width:760px;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;flex-direction:column;box-shadow:0 -6px 40px rgba(26,26,24,.14)}
@media(min-width:700px){.overlay{align-items:center}.panel{border-radius:var(--r-lg);max-height:82vh}}
.panelhead{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.panelhead b{font-family:var(--serif);font-size:1.05rem;font-weight:600}
.panelbody{padding:18px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.panelfot{display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--line);align-items:flex-end}
.panelfot textarea{min-height:44px;max-height:140px;font-family:var(--sans);font-size:16px}
.bubbla{padding:12px 16px;border-radius:12px;margin-bottom:11px;font-size:.94rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.bubbla.jag{background:var(--accent);color:#fff;margin-left:auto;max-width:85%;border-bottom-right-radius:3px}
.bubbla.ai{background:var(--line-2);max-width:95%;border-bottom-left-radius:3px}
.bubbla.sys{background:var(--warn-soft);color:#6B4C16;font-size:.85rem}
.bubbla code{background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px;font-size:.9em}
.skriver{display:inline-flex;gap:5px;align-items:center}
.skriver i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:pop 1.1s infinite}
.skriver i:nth-child(2){animation-delay:.16s}.skriver i:nth-child(3){animation-delay:.32s}
@keyframes pop{0%,60%,100%{opacity:.2}30%{opacity:.9}}

/* ---------- inläsning av prov ---------- */
.dropzon{border:1px dashed var(--line);border-radius:var(--r);padding:30px 18px;text-align:center;background:var(--bg);cursor:pointer;transition:border-color .12s}
.dropzon:hover{border-color:var(--accent)}
.dropzon.over{border-color:var(--accent);background:var(--accent-soft)}
.dropzon b{font-family:var(--serif);font-size:1.02rem}
.sidlista{display:flex;gap:9px;overflow-x:auto;padding:4px 0 12px}
.sidlista img{height:112px;border:1px solid var(--line);border-radius:6px;flex:0 0 auto}
.qbild{width:100%;border:1px solid var(--line);border-radius:10px;margin-bottom:14px;background:#fff}
.provrad{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.provrad:last-child{border-bottom:0}
.provrad .i{flex:1;min-width:0}
.provrad .i b{display:block;font-size:.93rem;font-weight:600}
.granska{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:9px;background:var(--card)}
.granska .rad{display:flex;gap:9px;align-items:center;margin-top:8px;flex-wrap:wrap}
.granska select{width:auto;min-width:190px;padding:7px 11px;font-size:.87rem}
.steg{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap}
.steg .s{flex:1;min-width:88px;text-align:center;font-size:.74rem;padding:8px 6px;border-radius:7px;background:var(--line-2);color:var(--muted);font-weight:600}
.steg .s.on{background:var(--accent);color:#fff}
.steg .s.klar{background:var(--ok-soft);color:var(--ok)}

/* ---------- strategiexperiment ---------- */
.expbanner{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:13px 16px;margin-bottom:16px;color:#1F4A37}
.expbanner .tiny{font-weight:700;letter-spacing:.01em;font-size:.8rem;opacity:.85}

footer{text-align:center;color:var(--muted);font-size:.74rem;padding:26px 20px 10px}

@media(max-width:520px){
  .wrap{padding:0 16px}
  nav.tabs .inner{padding:0 16px;gap:20px}
  .card{padding:18px}
  .hero{padding:26px 18px 22px}
  .hero .dagar{font-size:3.3rem}
  h1{font-size:1.45rem}
}

/* ---------- snabbkort ---------- */
.kortmeta{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;color:var(--muted);margin-bottom:12px}
.indexkort{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 24px;min-height:270px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:16px;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  transition:transform .18s ease,border-color .18s ease;
  box-shadow:0 1px 2px rgba(26,26,24,.04);
}
.indexkort .etik{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-size:.8rem;letter-spacing:.01em;color:var(--muted);
}
.indexkort{position:relative}
.indexkort .fram{font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.indexkort.vand .fram{font-size:1.15rem;color:var(--muted);font-weight:500}
.indexkort .bak{
  font-size:1.06rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;
  border-top:1px solid var(--line);padding-top:16px;width:100%;
}
.indexkort .bak .ex{margin-top:10px;font-size:.87rem;color:var(--muted)}
.indexkort .vandtips{font-size:.82rem;letter-spacing:.01em;color:var(--muted)}
.kortknappar{display:flex;gap:10px;margin-top:16px}
.kortknappar .btn{flex:1}
.btn.stor{padding:16px 20px;font-size:1rem;border-radius:11px}

@media(max-width:520px){
  .indexkort{min-height:300px;padding:38px 20px}
  .indexkort .fram{font-size:1.85rem}
  .tangenttips{display:none}
  .kortknappar{position:sticky;bottom:14px}
}

/* ---------- introduktion ---------- */
button.valj{
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  padding:10px 15px;border-radius:999px;font-size:.86rem;font-weight:500;
  cursor:pointer;font-family:inherit;min-height:44px;transition:all .12s ease;
}
button.valj:hover{border-color:var(--muted)}
button.valj.pa{background:var(--accent);border-color:var(--accent);color:#fff}

/* hopfällbar sektion */
button.hopfall{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;min-height:44px;
}
button.hopfall .pil{font-size:.84rem;color:var(--accent);font-weight:550}

/* Växeln mellan underlag och fråga under ett pass. */
.vaxla{gap:6px}
.vaxla .btn.sub{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.85rem}
.vaxla .btn.sub.pa{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Ångra-raden ska synas utan att skrika. */
.row.angra{margin-top:12px}
.row.angra .btn.sub{color:var(--accent);font-size:.86rem}
/* Riktningen bredvid delprovsnamnet. Dämpad – en nedgång ska inte skrika. */
.bered .rikt{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.01em;
  padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.bered .rikt.upp{background:var(--ok-soft);color:var(--ok)}
.bered .rikt.ner{background:var(--warn-soft);color:var(--warn)}
.bered .rikt.lika{background:var(--line-2);color:var(--muted);font-weight:500}
/* Bandet när nätet är borta. Informerar, oroar inte. */
.natband{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:var(--bg);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  font-size:.84rem;line-height:1.5;text-align:center;
}
/* Uppgifter ur riktiga provhäften ligger som bild. De ska gå att zooma. */
a.zoom{display:block;text-decoration:none}
img.qbild{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px}
/* Uppgifter där alternativen står i bilden: bara bokstaven i knappen. */
.alt.bara-bokstav{justify-content:flex-start}
/* Står alternativen i bilden behövs bara bokstäverna – då får de ligga
   på en rad i stället för att äta en halv skärm var. */
.alts.korta{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:9px}
.alts.korta .alt{justify-content:center;padding:14px 8px;min-height:56px}
.alts.korta .alt .k{margin:0;font-size:1.05rem}
.natband.varning{background:var(--bad)}

/* ============================================================
   Mörkt läge
   ------------------------------------------------------------
   Hon pluggar sent. Ett lysande vitt ark klockan elva på kvällen
   är inte snällt. Färgerna följer systemets inställning, så hon
   behöver inte leta efter någon knapp. Samma dämpade gröna accent,
   bara flyttad uppåt i ljushet så att den håller kontrasten mot
   en mörk bakgrund.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15151A;
    --card:#1E1E24;
    --ink:#EDEBE6;
    --ink-2:#C3C0B8;
    --muted:#9C988E;
    --line:#33333C;
    --line-2:#26262E;

    --accent:#7FBF9B;
    --accent-2:#98D0B0;
    --accent-soft:#1E2E26;

    --ok:#7FBF9B;      --ok-soft:#1E2E26;
    --warn:#D9AE6A;    --warn-soft:#2E2717;
    --bad:#E08C82;     --bad-soft:#2E1D1B;
  }
  nav.tabs{background:rgba(21,21,26,.94)}
  /* Knappar med accentfärg får mörk text – ljusgrönt mot vitt är oläsligt. */
  .btn{color:#12211A}
  .btn:hover{color:#12211A}
  nav.under button.on{background:var(--ink);color:var(--bg)}
  .vaxla .btn.sub.pa{background:var(--ink);color:var(--bg)}
  .natband{background:#000;color:var(--ink)}
  .natband.varning{background:var(--bad);color:#1B0F0E}
  .note{color:#E7D3A8}
  .ok-note{color:#BEE3CE}
  /* Provuppgifterna är svart tryck på vitt papper. De ska inte inverteras,
     men de får tonas ned någon aning så att de inte bländar. */
  img.qbild,.qbild{background:#fff;filter:brightness(.92)}
  input,select,textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
}

/* ============================================================
   Lugnare rörelser
   ------------------------------------------------------------
   Den som bett systemet dämpa rörelser ska inte mötas av
   snurrande kort och krypande staplar.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* Läsläget: texten i en egen ruta med fråga och alternativ under, så att
   båda syns samtidigt. Höjden är satt i viewport-höjd, inte i pixlar, så
   att den funkar lika bra på en liten telefon som på en stor skärm. */
.underlag.delad,.bildruta.delad{
  max-height:42vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px;
  background:var(--card);
  /* liten skugga i kanten som visar att det finns mer att scrolla */
  box-shadow:inset 0 -14px 12px -14px rgba(0,0,0,.16);
}
.bildruta.delad{padding:10px}
.bildruta.delad .qbild{margin-bottom:0}
.underlag.delad:focus-visible{outline:3px auto var(--accent)}
.vaxla{gap:6px;flex-wrap:wrap}

/* Veckans mål. En bock ska kännas som en bock, inte som ett formulär. */
.veckomal{display:flex;flex-direction:column;gap:8px}
button.mal{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;min-height:52px;cursor:pointer;font-family:inherit;
  font-size:.93rem;color:var(--ink);line-height:1.45;
}
button.mal .bock{
  flex:0 0 24px;height:24px;border:1.5px solid var(--line);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;color:#fff;background:transparent;
}
button.mal.klar{background:var(--ok-soft);border-color:var(--ok)}
button.mal.klar .bock{background:var(--ok);border-color:var(--ok)}
button.mal.klar .maltext{color:var(--ink-2)}

/* Anmälan har en deadline och ingen efteranmälan. Den enda platsen i appen
   där det är rätt att höja rösten en aning. */
.card.brådska{border-left:3px solid var(--warn);background:var(--warn-soft)}
.card.brådska .namn-etikett{color:var(--warn)}
a.btn{text-decoration:none}
/* Rubriker får fokus programmatiskt så att uppläsning hittar rätt efter en
   omritning. De går inte att tabba till, så ringen fyller ingen funktion där
   – men den ska förstås finnas kvar på allt man faktiskt kan tabba till. */
[tabindex="-1"]:focus{outline:none}

/* När en uppgiftsbild inte gick att hämta. Ska förklara, inte skylla. */
.bildfel{
  border:1px dashed var(--line);border-radius:10px;padding:16px;margin-bottom:14px;
  background:var(--line-2);font-size:.88rem;line-height:1.55;color:var(--ink-2);
}

/* Bildvisaren: uppgiften i helskärm, pannbar och zoombar, utan att lämna appen. */
button.zoom{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;text-align:left;
}
.bildvisare{
  position:fixed;inset:0;z-index:80;background:rgba(20,20,18,.94);
  display:flex;flex-direction:column;
}
.bildvisarhuvud{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;color:#EDEBE6;flex:0 0 auto;
}
.bildvisarhuvud .btn.sub{color:#EDEBE6}
.bildvisarhuvud .btn.sub:hover{background:rgba(255,255,255,.12);color:#fff}
.bildvisaryta{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 calc(12px + env(safe-area-inset-bottom));
}
.bildvisaryta img{
  display:block;min-width:100%;width:auto;max-width:none;height:auto;background:#fff;
}