/* Design-tokens. Eneste sted --ink/--muted/--paper/--line/--blue/--teal/--tint/--radius-* defineres. */
:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  --ink:#172d40;
  --muted:#55697a;
  --paper:#f6f8fa;
  --line:#dde5ec;
  --blue:#1d5fd1;
  --teal:#0f7a8c;
  --tint:#dfeaf6;
  --success:#388153; --success-bg:#e7f5ec;
  --error:#bc4d43; --error-bg:#fff0ef;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
button,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
a,button,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
button,select{min-height:46px}
.skip-link{position:absolute;top:-80px;left:20px;z-index:10;background:white;padding:12px}
.skip-link:focus{top:12px}

/* Header, navigasjon, footer */
.site-header{background:#fff;color:var(--ink);border-top:3px solid var(--blue);border-bottom:1px solid var(--line)}
.masthead{max-width:1280px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px max(4vw,20px) 17px}
.site-brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:24px;font-weight:750;letter-spacing:-.7px}
.monogram{background:var(--ink);color:#fff;font-size:16px;letter-spacing:-.5px;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm)}
.byline{display:block;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:2px}
.header-note{font-size:12px;font-weight:650;letter-spacing:1.7px;color:var(--muted);display:flex;gap:10px;align-items:center}
.header-note svg{color:var(--blue);width:30px;height:22px}
.site-nav{max-width:1280px;margin:auto;display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid #eaf0f5;padding:0 max(4vw,20px)}
.site-nav a{color:var(--muted);background:transparent;padding:15px 1px 13px;border-bottom:2px solid transparent;font-size:14px;font-weight:600;text-decoration:none}
.site-nav a:hover{color:var(--blue);border-bottom-color:#b8d0f5}
.site-nav a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
.site-main{max-width:1280px;padding:40px max(4vw,20px) 60px;margin:auto;min-height:65vh}
.site-footer{max-width:1280px;margin:0 auto;padding:24px max(4vw,20px) 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:14px}
.site-footer a{font-weight:650;text-decoration:none}

/* Typografi */
.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:750;color:var(--teal);margin:0 0 15px}
h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-1.6px;line-height:1.15;font-weight:700;margin:0 0 16px}
h2{font-size:26px;letter-spacing:-.6px;line-height:1.25;font-weight:650;margin:0 0 12px}
h3{font-weight:650}
p{line-height:1.6}
h1 span{color:var(--muted)}
.intro-copy{font-size:17px;color:var(--muted);margin:0 0 28px;max-width:700px;line-height:1.7}

/* Piller, statusmerker, kortlenker (delt av flere sider) */
.pill{display:inline-block;font-size:12px;letter-spacing:.4px;font-weight:700;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--teal)}
.status-tag{display:inline-block;font-size:13px;line-height:1.5;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px 9px}
.card-link{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:750;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--blue)}
.card-link>span{font-size:22px}

/* Studiekort (begrepslæring-hub) */
.study-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.study-card{display:flex;flex-direction:column;text-decoration:none;background:white;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s}
.study-card:hover{border-color:#9db8cc}
.study-card-body{padding:26px;display:flex;flex-direction:column;flex:1}
.study-card h2{font-size:30px;margin:17px 0 8px}
.study-card p{font-size:16px;color:var(--muted);margin:0 0 22px}
.anatomy-teaser{height:210px;background:white;overflow:hidden;display:flex;justify-content:center;border-bottom:1px solid var(--line)}
.anatomy-teaser img{height:390px;width:345px;object-fit:contain;object-position:top}
.concept-preview{height:210px;background:var(--paper);padding:26px;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:start}
.concept-preview span{background:white;border:1px solid var(--line);color:var(--ink);font-size:18px;font-weight:650;letter-spacing:-.3px;padding:9px 18px;border-radius:var(--radius-sm)}
.concept-preview span:nth-child(2){margin-left:16%;background:var(--teal);color:#fff;border-color:var(--teal)}
.concept-preview span:nth-child(3){margin-left:34%;background:var(--blue);color:#fff;border-color:var(--blue)}

/* Tom-tilstand (podkaster/eksamensforberedelser) */
.empty-state{margin-top:32px;background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:44px;display:flex;gap:36px;align-items:center;min-height:250px}
.empty-number{font-size:70px;color:#b8cad6;font-weight:800;letter-spacing:-4px;line-height:1;font-variant-numeric:tabular-nums}
.empty-state h2{margin-top:16px;max-width:650px}
.empty-state p{color:var(--muted)}
.inline-link{display:inline-block;margin-top:12px;color:var(--blue);text-underline-offset:5px;line-height:1.5}
.back-link{display:inline-block;font-size:14px;color:var(--blue);text-decoration:none;margin-bottom:26px}

/* Sidetittel + forsøksteller */
.page-title{display:flex;align-items:center;justify-content:space-between;gap:24px}
.attempt-display{display:flex;flex-direction:column;text-align:right;gap:2px;min-width:150px}
.attempt-display strong{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;color:var(--blue)}
.attempt-display span{font-size:14px;color:var(--muted)}

/* Øvingskontroller (tema/modus) */
.exercise-controls{background:white;border:1px solid var(--line);border-top:2px solid var(--teal);padding:18px 20px;border-radius:var(--radius-md);display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.topic-select{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:650;min-width:260px;max-width:100%}
select{background:white;color:var(--ink);border:1px solid #b9c9d5;border-radius:var(--radius-sm);padding:10px 34px 10px 12px;width:100%;font-size:16px}
.mode-buttons{display:flex;gap:5px;flex-wrap:wrap}
.mode-buttons button{padding:11px 14px;background:var(--paper);border:1px solid transparent;border-radius:var(--radius-sm);color:var(--ink);font-size:14px;font-weight:650}
.mode-buttons button[aria-pressed=true]{background:var(--blue);color:#fff}
.terminology-note{font-size:14px;color:var(--muted);line-height:1.7;max-width:950px;margin:18px 0 24px}

/* Oppgavekort (begrepstrening) */
.question-card{background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;display:grid;grid-template-columns:32px minmax(0,1fr) minmax(240px,.8fr);gap:16px;align-items:center}
.question-no{color:var(--muted);font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.question-card label{font-size:16px;line-height:1.55}
.question-card.correct{background:var(--success-bg);border-color:var(--success)}
.question-card.incorrect{background:var(--error-bg);border-color:var(--error)}
.answer-status{font-size:14px;font-weight:650;margin:7px 0 0}
.answer-status:empty{display:none}
.correct .answer-status{color:#165732}
.incorrect .answer-status{color:#98372e}

/* Innsending */
.submission{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:22px;padding:24px;background:var(--tint);border-radius:var(--radius-md)}
.completion{font-size:17px;font-weight:750;margin:0 0 6px}
.submission #result{font-size:14px;color:var(--muted);max-width:640px;margin:0}
.submit-buttons{display:flex;gap:10px;flex-shrink:0}
.primary-button,.secondary-button,.text-button{border-radius:var(--radius-sm);padding:12px 18px;font-size:16px;font-weight:650}
.primary-button{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.primary-button:disabled{background:#c6d5df;color:#5c7183;border-color:#c6d5df}
.secondary-button{background:transparent;border:1px solid #9fb4c1;color:var(--ink)}
.text-button{background:transparent;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px 0}

/* Kildenotater / begrepskort (rendres delvis av concepts.js) */
.source-notes{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;font-size:14px;line-height:1.7;color:var(--muted)}
summary{cursor:pointer;font-weight:650}
.source-notes p{max-width:1050px}
.source-notes li{margin:6px 0}
.read-intro{color:var(--muted);font-size:16px}
.term-library{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.definition-card{background:white;border:1px solid var(--line);border-top:2px solid var(--teal);border-radius:var(--radius-sm);padding:22px}
.definition-card h2{font-size:21px}
.definition-card p{font-size:16px;line-height:1.6;margin:0}
.example{margin-top:16px!important;padding:14px;background:var(--tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:2px solid var(--teal);color:#3a5568}
.example strong{display:block;font-size:13px;letter-spacing:.6px;margin-bottom:4px;color:var(--teal)}
.notice{background:#fff1d7;padding:15px;border-radius:var(--radius-sm)}
[hidden]{display:none!important}

/* Digital forelesning */
.video-topic{margin-top:36px;max-width:1000px}
.video-topic-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.video-topic-heading h2{margin:0}
.lecture-video{display:grid;grid-template-columns:145px 1fr;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:white}
.lecture-label{background:var(--tint);color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;font-size:13px;letter-spacing:1.1px;font-weight:750}
.lecture-label>span:first-child{background:white;border:1px solid #c3d7e6;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;font-size:21px;padding-left:2px}
.lecture-content{padding:28px}
.lecture-content h3{font-size:24px;line-height:1.3;letter-spacing:-.5px;margin:0 0 10px}
.lecture-content p{margin:0 0 18px;color:var(--muted);font-size:16px}
.video-link{display:inline-block;color:var(--blue);font-size:16px;font-weight:700;text-underline-offset:4px;line-height:1.6}
.video-new-tab{display:block;color:var(--muted);font-size:13px;font-weight:400}

@media(max-width:950px){
  .site-main{padding:32px 24px 48px}
  .site-footer{margin:0 24px}
  .study-card-body{padding:23px}
  .question-card{grid-template-columns:28px 1fr}
  .answer-wrap{grid-column:2}
  .submission{align-items:start;flex-direction:column}
  .site-nav{gap:14px}
}
@media(max-width:680px){
  .masthead{padding:16px max(4vw,16px)}
  .header-note{display:none}
  .site-brand{font-size:22px}
  .site-nav{gap:0 16px;padding:4px max(4vw,16px)}
  .site-nav a{padding:10px 0 8px;font-size:14px}
  .site-main{padding:28px 16px 40px}
  .study-grid,.term-library{grid-template-columns:1fr}
  h1{font-size:36px}
  .intro-copy{font-size:16px}
  .site-footer{margin:0 16px;flex-wrap:wrap}
  .empty-state{padding:26px;gap:20px;flex-direction:column}
  .empty-number{font-size:44px;letter-spacing:-2px}
  .empty-state h2{font-size:23px}
  .page-title{align-items:start;gap:12px}
  .page-title h1{font-size:32px}
  .attempt-display{min-width:80px;max-width:95px}
  .attempt-display strong{font-size:30px}
  .attempt-display span{font-size:13px}
  .exercise-controls{padding:15px;gap:16px}
  .topic-select{width:100%;min-width:0}
  .mode-buttons{width:100%}
  .mode-buttons button{flex:1;padding:10px;font-size:14px}
  .question-card{padding:16px;gap:10px}
  .submission{padding:20px}
  .submit-buttons{width:100%;flex-wrap:wrap}
  .submit-buttons button{flex:1}
  .concept-preview{height:200px}
  .anatomy-teaser{height:200px}
  .lecture-video{grid-template-columns:1fr}
  .lecture-label{flex-direction:row;justify-content:start;padding:16px 22px}
  .lecture-label>span:first-child{width:44px;height:44px;font-size:19px}
  .lecture-content{padding:24px}
  .lecture-content h3{font-size:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}