@charset "UTF-8";
/* Tokens: paper / green / rust, Georgia headings, no external resources. */
:root{
  color-scheme:light dark;
  --paper:#faf6ed;--surface:#fffdf8;--ink:#242d28;--muted:#4c5c51;--green:#244d3b;--line:#b9b9a8;--wash:#e9eddf;--accent:#843f27;
  --btn-bg:#244d3b;--btn-ink:#ffffff;--ok:#1d5a35;--ok-bg:#e1efe3;--bad:#8a2a1c;--bad-bg:#f6e2dc;--focus:#843f27;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--radius:.7rem;--gutter:1rem;
  --serif:Georgia,"Times New Roman",serif;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--paper);font-size:17px;line-height:1.65;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#121813;--surface:#1a221c;--ink:#ebe8dc;--muted:#b4bfb4;--green:#93cba9;--line:#3d4a41;--wash:#212c24;--accent:#e8a183;
  --btn-bg:#93cba9;--btn-ink:#0f1f16;--ok:#9fdcb1;--ok-bg:#1d3a27;--bad:#f2a898;--bad-bg:#43211b;--focus:#e8a183;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);overflow-wrap:break-word}
html.modal-open,html.modal-open body{overflow:hidden}
a{color:var(--green);text-underline-offset:.22em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
img,video,audio,iframe{max-width:100%}
video{display:block;width:100%;height:auto;border-radius:var(--radius)}
audio{width:100%;min-height:44px}
button,select{font:inherit}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em}
h1,h2{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(2.2rem,1.2rem + 4.5vw,4rem);margin:.5rem 0 var(--s3)}
h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2rem);margin:0 0 var(--s2)}
h3{font-size:1.2rem}
.small{font-size:.9rem}

.skip{position:absolute;top:-8rem;left:1rem;padding:1rem;background:var(--surface);color:var(--ink);z-index:100}
.skip:focus{top:1rem}
.wrap{width:min(1120px,100% - 2 * var(--gutter));margin:auto}
header{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);padding:var(--s2) 0;flex-wrap:wrap}
.brand{font-weight:850;text-decoration:none;font-size:1.2rem;letter-spacing:.08em;display:inline-flex;align-items:center;min-height:44px;flex-wrap:wrap;gap:0 .65rem}
.brand span{font-weight:400;font-size:.8rem;letter-spacing:0}
nav{display:flex;gap:var(--s1) var(--s2);flex-wrap:wrap}
nav a{font-size:.95rem;display:inline-flex;align-items:center;min-height:44px}
main{padding-bottom:var(--s5)}
.hero{padding:var(--s4) 0 var(--s3);max-width:850px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:750;font-size:.75rem;color:var(--accent);margin:0}
.lead{font-size:1.15rem;color:var(--muted);max-width:680px}
.meta{font-size:.9rem;color:var(--muted);margin:var(--s1) 0}
.note{border-left:3px solid var(--green);padding:.7rem 1rem;background:var(--wash);max-width:760px;margin:var(--s2) 0 0;border-radius:0 var(--radius) var(--radius) 0}

.catalog-head{display:flex;gap:var(--s2);justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:var(--s2) 0}
.sort{display:flex;gap:var(--s1);flex-wrap:wrap}
.sort a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:2rem;font-size:.9rem;text-decoration:none}
.sort a[aria-current]{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.episodes{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.episode{position:relative;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.episode:hover{border-color:var(--green)}
.episode .number{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.episode h3{font-family:var(--serif);font-size:clamp(1.4rem,1rem + 1.8vw,1.9rem);font-weight:400;margin:.3rem 0 var(--s1)}
.episode h3 a{text-decoration:none}
.episode h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.episode h3 a:focus-visible{outline:none}
.episode:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.episode p{max-width:680px;margin:.3rem 0}
.materials{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:var(--s2) 0 0;font-size:.85rem;color:var(--muted)}
.materials li:not(:last-child)::after{content:"·";margin-left:1rem}
p.materials{display:block}

/* Section page */
.chips{flex-wrap:nowrap;position:sticky;top:0;z-index:20;display:flex;gap:var(--s1);overflow-x:auto;padding:var(--s1) var(--gutter);margin:0 calc(-1 * var(--gutter)) var(--s2);background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chips a{flex:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:2rem;text-decoration:none;font-size:.95rem;background:var(--surface)}
.block{margin:var(--s3) 0;padding:var(--s3) var(--gutter);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);scroll-margin-top:4.5rem}
.block>h2{margin-top:0}
.block p{margin:var(--s1) 0 var(--s2)}
.source ul{padding-left:1.2rem}
.source li{margin:.4rem 0}
.backup{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;margin-top:var(--s1)}
.downloads{display:flex;flex-wrap:wrap;gap:0 var(--s2)}
.downloads a{display:inline-flex;align-items:center;min-height:44px}
.chip{display:inline-block;margin:0;padding:.3rem .9rem;border:1px solid var(--line);border-radius:2rem;background:var(--wash);font-size:.95rem}
.sec-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin-bottom:var(--s2)}
.sec-tools .chip{margin:0}
.btn,button{background:var(--btn-bg);color:var(--btn-ink);border:2px solid var(--btn-bg);min-height:44px;padding:.55rem 1.1rem;border-radius:.6rem;cursor:pointer;font-weight:600}
.btn:disabled{opacity:.45;cursor:default}
.btn:not(.primary){background:transparent;color:var(--green)}
.btn:not(.primary):disabled{color:var(--muted)}
summary{cursor:pointer;min-height:44px;display:list-item;padding:.6rem 0;font-weight:600;color:var(--green)}
details{margin:var(--s1) 0}
details>p,.intro-body{margin-top:0}

/* Samtal: large, readable on a phone */
#samtal{font-size:1.3rem;line-height:1.6}
#samtal .chip,#samtal .btn,#samtal summary,#samtal .backup,#samtal .note-small{font-size:1rem}
.group-title{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:var(--s3) 0 var(--s1)}
.qlist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.qcard{position:relative;padding:var(--s2) var(--s2) var(--s2) 3.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.qcard::before{content:attr(data-n);position:absolute;left:var(--s2);top:var(--s2);width:2rem;height:2rem;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);display:grid;place-items:center;font-size:1rem;font-weight:700}
.qcard h4{margin:0 0 .3rem;font-size:1.3rem}
.qcard p{margin:0}
.qcard .ref{font-size:.95rem;color:var(--muted);margin-top:.4rem}
.note-small{color:var(--muted);font-style:italic}
.intro{border:1px solid var(--line);border-radius:var(--radius);padding:0 var(--s2);background:var(--wash)}
.intro-body{padding-bottom:var(--s1)}

/* Samtalsläge overlay */
.mode{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
.mode-top{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--gutter);border-bottom:1px solid var(--line)}
.mode-top p{margin:0}
.mode-progress{font-weight:700;font-size:1.3rem}
.mode-reading{flex:1;text-align:center;font-size:.9rem;color:var(--muted)}
.mode-body{flex:1;overflow-y:auto;padding:var(--s3) var(--gutter);width:min(46rem,100%);margin:auto}
.mode-group{margin:0;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--accent);font-weight:750}
.mode-title{font-size:clamp(1.8rem,6vw,2.6rem);margin:.4rem 0 var(--s2)}
.mode-text{font-size:clamp(1.5rem,5.2vw,2.3rem);line-height:1.45;margin:0}
.mode-ref{margin-top:var(--s2);color:var(--muted);font-size:1.1rem}
.mode-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom))}
.mode-nav .btn{min-height:64px;font-size:1.3rem}

/* Studiekort */
.card-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.fallback-card{padding:var(--s2);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.fallback-card .front{font-weight:600;margin:0}
.deck{display:grid;gap:var(--s2);justify-items:center;perspective:1000px}
.flashcard{display:grid;width:100%;min-height:15rem;padding:0;border:2px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--ink);font-weight:400;text-align:left;transform-style:preserve-3d;transition:transform .5s}
.flashcard.flipped{transform:rotateY(180deg)}
.face{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:var(--s1);padding:var(--s3) var(--s2);border-radius:calc(var(--radius) - 2px);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper)}
.face-back{transform:rotateY(180deg);background:var(--wash)}
.face-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:750}
.face-text{font-size:1.25rem;line-height:1.5}
.deck-count{margin:0;font-weight:700}
.deck-row{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:center}
.deck-done{margin:0;font-weight:600;color:var(--ok);min-height:1.5em}

/* Quiz */
.quiz-list{padding-left:1.4rem}
.quiz-q{margin:var(--s3) 0}
.qtext{font-weight:600;font-size:1.1rem}
.opts,.expls{padding-left:1.2rem}
.opts{list-style:upper-alpha}
.expls{list-style:none;padding:0}
.expls li{margin:.4rem 0}
.quiz-stage .qtext{font-size:1.2rem;margin-top:0}
.quiz-progress{margin:0;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.quiz-opts{display:grid;gap:var(--s1)}
.opt{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:var(--s1);width:100%;text-align:left;background:var(--paper);color:var(--ink);border:2px solid var(--line);font-weight:400;padding:.7rem var(--s2);min-height:56px}
.opt-letter{font-weight:700;color:var(--accent)}
.opt-mark{font-weight:700;font-size:.9rem;white-space:nowrap}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);color:var(--ink)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--ink)}
.opt.correct .opt-mark{color:var(--ok)}
.opt.wrong .opt-mark{color:var(--bad)}
.hint-text{padding:.6rem var(--s2);border-left:3px solid var(--accent);background:var(--wash)}
.feedback{margin:var(--s2) 0}
.fb-title{font-weight:700}
.quiz-actions{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.quiz-score{font-family:var(--serif);font-size:2rem;margin:0 0 var(--s1)}

/* Infografik */
.infographic{display:block;width:min(100%,34rem);margin:0 auto var(--s2)}
.infographic img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}

.prose{max-width:740px}
.prose h2{margin-top:var(--s4)}
.video-slot iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius)}
footer{border-top:1px solid var(--line);padding:var(--s3) 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
footer a{display:inline-flex;align-items:center;min-height:44px}

@media(min-width:700px){
  :root{--gutter:1.5rem}
  .hero{padding-top:var(--s5)}
  .block{padding:var(--s3)}
  .chips{position:static;border:0;margin:0 0 var(--s2);padding:0;flex-wrap:wrap;overflow:visible}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .flashcard{transition:none;transform:none!important}
  .face{transition:opacity .2s}
  .face,.face-back{transform:none}
  .flashcard .face-back{opacity:0}
  .flashcard.flipped .face-back{opacity:1}
  .flashcard.flipped .face-front{opacity:0}
}
main>.note{margin-bottom:var(--s3)}