/* Øving til båtførerprøven.
   Bygger på Sodefjed-appens designsystem, men er en egen, offentlig side utenfor
   SPA-en og utenfor RLS-porten. Bredere kolonne enn appen, fordi lovsitater og
   lærebokstoff trenger mer plass enn en hyttekalender. */

:root {
  --white-0:#fff; --shell-50:#fbf7ef; --shell-100:#f4ede0; --sand-200:#e9dcc6;
  --sand-300:#d8c4a3; --driftwood-400:#b7a488; --driftwood-500:#8c7a63;
  --stone-600:#5e5445; --ink-800:#2c2a24; --ink-900:#1b1a15;

  --sea-50:#eaf3f7; --sea-100:#cfe4ee; --sea-200:#a6cedf; --sea-300:#6fa9c6;
  --sea-400:#3e82a8; --sea-500:#21688f; --sea-600:#175472; --sea-700:#103f57; --sea-800:#0b2e40;
  --sky-200:#bfe0ea; --sky-300:#93cbd8;

  --meadow-200:#cdd9b0; --meadow-300:#a9c48a; --meadow-400:#86a860; --meadow-500:#64863f;
  --sun-200:#fbe9b2; --sun-300:#f7d46b; --sun-400:#f2c14e; --sun-500:#e0a82e;
  --coral-400:#d76551; --coral-500:#c64a38; --coral-600:#a93b2b;

  --page:var(--shell-50); --card:var(--white-0); --sunk:var(--shell-100);
  --heading:var(--ink-900); --body:var(--ink-800); --muted:var(--stone-600); --soft:var(--driftwood-500);
  --primary:var(--sea-500); --border:var(--sand-200); --border-strong:var(--sand-300);

  --font-display:'Newsreader',Georgia,serif;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(16,63,87,.08),0 1px 2px rgba(16,63,87,.06);
  --sh-md:0 4px 16px -4px rgba(16,63,87,.14),0 2px 6px -2px rgba(16,63,87,.08);
  --sh-lg:0 12px 32px -8px rgba(16,63,87,.18),0 4px 12px -6px rgba(16,63,87,.10);

  --bredde:720px;

  /* Emnefarger. Emne 4 får korall fordi det er emnet med egen strykegrense. */
  --emne-1:var(--meadow-500);
  --emne-2:var(--sea-500);
  --emne-3:var(--sun-500);
  --emne-4:var(--coral-500);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Både toppen og handlingsraden er limt fast og ligger oppå innholdet. Når
   nettleseren ruller et element inn i bildet, for eksempel ved tabulatorfokus
   eller ved klikk på en ankerlenke, skal den holde seg klar av begge. */
html{
  scroll-padding-top:6.5rem;
  scroll-padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px));
}
body{
  /* 1rem, ikke 16px: en absolutt verdi her overstyrer skriftstørrelsen brukeren
     har valgt i nettleseren, og da skalerer bare de reglene som bruker rem.
     Resultatet var at fotnoten i kildeboksen ble større enn selve forklaringen. */
  font-family:var(--font-sans); font-size:1rem; line-height:1.55; color:var(--body);
  background:var(--page); min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display); color:var(--heading); font-weight:500; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance;
}
h1{font-size:1.9rem;} h2{font-size:1.35rem;} h3{font-size:1.1rem;}
p{margin:0 0 .9em;}
a{color:var(--sea-600);} a:hover{color:var(--sea-800);}
[hidden]{display:none !important;}
::selection{background:var(--sun-200); color:var(--ink-900);}
:focus-visible{outline:3px solid var(--sea-300); outline-offset:2px; border-radius:var(--r-sm);}

.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); margin:0 0 .6em;
}

/* ---------------------------------------------------------------- topp */
.topp{
  position:sticky; top:0; z-index:30; background:rgba(251,247,239,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.topp-inn{max-width:var(--bredde); margin:0 auto; padding:.7rem 1rem .4rem;}
.merke{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none;}
.merke-ikon{
  font-size:1.3rem; width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--sea-700); color:var(--sun-300); border-radius:var(--r-md);
}
.merke strong{display:block; font-family:var(--font-display); font-size:1.02rem; color:var(--heading); font-weight:500;}
.merke em{display:block; font-style:normal; font-size:.76rem; color:var(--muted);}

.fane-rad{display:flex; gap:.2rem; margin-top:.6rem; overflow-x:auto; scrollbar-width:none;}
.fane-rad::-webkit-scrollbar{display:none;}
.fane{
  flex:none; appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:.92rem; font-weight:600; color:var(--muted);
  padding:.5rem .8rem; border-radius:var(--r-sm) var(--r-sm) 0 0;
  border-bottom:2.5px solid transparent;
}
.fane:hover{color:var(--sea-600);}
.fane[aria-current="page"]{color:var(--sea-700); border-bottom-color:var(--sea-500);}

/* ---------------------------------------------------------------- flater */
#hoved{max-width:var(--bredde); margin:0 auto; padding:1.4rem 1rem 3rem;}
.flate{animation:inn .22s ease;}
@keyframes inn{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}

.helt{padding:.4rem 0 1.4rem;}
.helt h1{font-size:2.1rem;}
.ingress{font-size:1.05rem; color:var(--muted); max-width:56ch;}

.knapperad{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem;}

.kort{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.1rem 1.15rem; margin-bottom:1rem; box-shadow:var(--sh-sm);
}
.kort h2{margin-top:0;}
.kort-merk{background:var(--sunk); border-color:var(--border-strong);}
.kort-rad{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1rem;}
.tall-kort{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  padding:.85rem .9rem; text-align:left;
}
.tall-kort b{display:block; font-family:var(--font-mono); font-size:1.6rem; color:var(--sea-700); line-height:1.1;}
.tall-kort span{font-size:.8rem; color:var(--muted);}

.fotnote{font-size:.82rem; color:var(--soft); margin-bottom:0;}

/* ---------------------------------------------------------------- knapper */
.knapp{
  appearance:none; cursor:pointer; font-family:var(--font-sans); font-weight:600;
  font-size:.95rem; padding:.66rem 1.1rem; border-radius:var(--r-pill);
  border:1.5px solid transparent; transition:transform .08s ease, background .15s ease;
}
.knapp:active{transform:translateY(1px);}
.knapp:disabled{opacity:.45; cursor:not-allowed;}
.knapp-primar{background:var(--sea-600); color:#fff;}
.knapp-primar:hover:not(:disabled){background:var(--sea-700);}
.knapp-myk{background:var(--sea-50); color:var(--sea-700); border-color:var(--sea-100);}
.knapp-myk:hover:not(:disabled){background:var(--sea-100);}
.knapp-tom{background:none; color:var(--muted); border-color:var(--border-strong);}
.knapp-tom:hover:not(:disabled){color:var(--sea-700); border-color:var(--sea-300);}
.knapp-liten{font-size:.82rem; padding:.34rem .8rem;}
.knapp-stor{font-size:1.03rem; padding:.85rem 1.5rem; width:100%; margin-top:.4rem;}

/* ---------------------------------------------------------------- valg */
.valg-rutenett{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; margin:1rem 0;}
.emne-knapp{
  text-align:left; background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--sea-400); border-radius:var(--r-md); padding:.85rem .95rem;
  cursor:pointer; font-family:inherit; font-size:.95rem; color:var(--body);
  box-shadow:var(--sh-sm);
}
.emne-knapp:hover{border-color:var(--sea-300); box-shadow:var(--sh-md);}
.emne-knapp b{display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--heading); margin-bottom:.15rem;}
.emne-knapp span{font-size:.82rem; color:var(--muted);}
.emne-knapp[data-emne="1.1"]{border-left-color:var(--emne-1);}
.emne-knapp[data-emne="1.2"]{border-left-color:var(--emne-2);}
.emne-knapp[data-emne="1.3"]{border-left-color:var(--emne-3);}
.emne-knapp[data-emne="1.4"]{border-left-color:var(--emne-4);}
.emne-knapp:disabled{opacity:.5; cursor:not-allowed;}

.emne-liste{display:flex; flex-direction:column; gap:.45rem; margin:.9rem 0;}
.emne-rad{display:flex; align-items:baseline; gap:.6rem; font-size:.93rem;}
.emne-prikk{width:10px; height:10px; border-radius:50%; flex:none; transform:translateY(1px);}
.emne-rad b{font-weight:600; color:var(--heading);}
.emne-rad span{color:var(--muted); margin-left:auto; font-family:var(--font-mono); font-size:.82rem;}

.bryter{display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--muted); cursor:pointer;}
.bryter input{margin-top:.25rem; accent-color:var(--sea-500);}

/* ---------------------------------------------------------------- fremdrift */
.fremdrift, .eksamen-topp{margin-bottom:1rem;}
.fremdrift-tekst{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  font-family:var(--font-mono); font-size:.82rem; color:var(--muted); margin-bottom:.45rem;
}
.fremdrift-spor{height:6px; background:var(--sunk); border-radius:var(--r-pill); overflow:hidden;}
.fremdrift-fyll{height:100%; width:0; background:var(--sea-400); border-radius:var(--r-pill); transition:width .25s ease;}
.klokke{font-weight:600; color:var(--sea-700);}
.klokke.haster{color:var(--coral-600);}

/* ---------------------------------------------------------------- spørsmål */
.sporsmal-kort{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.15rem 1.15rem 1rem; box-shadow:var(--sh-sm);
}
.sporsmal-merke{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.7rem;
}
.merkelapp{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:var(--r-pill); background:var(--sunk); color:var(--muted);
}
.merkelapp-emne{background:var(--sea-50); color:var(--sea-700);}
.merkelapp-emne4{background:#fbe9e5; color:var(--coral-600);}
.merkelapp-varsel{background:var(--sun-200); color:#7a5b12;}

.sporsmal-tekst{font-family:var(--font-display); font-size:1.22rem; line-height:1.35; color:var(--heading); margin:0 0 1rem;}
.sporsmal-bilde{
  display:block; margin:0 auto 1rem; max-width:min(100%,260px); max-height:250px;
  background:var(--sunk); border-radius:var(--r-md); padding:.6rem;
}

.alt-liste{display:flex; flex-direction:column; gap:.5rem; margin:0 0 .3rem; padding:0; list-style:none;}
.alt{
  display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left;
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:.72rem .85rem; cursor:pointer; font-family:inherit; font-size:.97rem; color:var(--body);
  transition:border-color .12s ease, background .12s ease;
}
.alt:hover:not(:disabled){border-color:var(--sea-300); background:var(--sea-50);}
.alt:disabled{cursor:default;}
.alt-bokstav{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--sunk); color:var(--muted); font-family:var(--font-mono);
  font-size:.76rem; font-weight:600;
}
.alt.valgt{border-color:var(--sea-400); background:var(--sea-50);}
.alt.valgt .alt-bokstav{background:var(--sea-500); color:#fff;}
.alt.riktig{border-color:var(--meadow-400); background:#f2f7ea;}
.alt.riktig .alt-bokstav{background:var(--meadow-500); color:#fff;}
.alt.feil{border-color:var(--coral-400); background:#fdf1ee;}
.alt.feil .alt-bokstav{background:var(--coral-500); color:#fff;}

/* ---------------------------------------------------------------- fasit */
.fasit{margin-top:1rem; border-top:1px solid var(--border); padding-top:.95rem;}
.fasit-dom{font-weight:600; margin-bottom:.5rem;}
.fasit-dom.rett{color:var(--meadow-500);}
.fasit-dom.galt{color:var(--coral-600);}
.forklaring{margin-bottom:.85rem;}

.kilde{
  background:var(--sunk); border-left:3px solid var(--sea-300); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:.75rem .9rem; font-size:.9rem;
}
.kilde-hode{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--soft); margin-bottom:.4rem; display:flex; flex-wrap:wrap; gap:.5rem;
}
.kilde blockquote{
  margin:0 0 .45rem; font-family:var(--font-display); font-size:1rem; line-height:1.45;
  color:var(--ink-900);
}
.kilde-fot{font-size:.76rem; color:var(--soft);}
.kilde-fot code{font-family:var(--font-mono); font-size:.92em;}

/* Handlingsraden limes til bunnen av skjermen. I øvingen vokser kortet med
   forklaring og et helt sitatfelt straks svaret er vist, og «Neste» havnet da
   langt under skjermkanten. Det er den handlingen man gjør flest ganger i en
   økt, så den skal alltid være innen rekkevidde for tommelen.

   Sticky, ikke fixed: er innholdet kortere enn skjermen, blir raden stående der
   den hører hjemme i stedet for å sveve over tomrom. De negative sidemargene
   opphever sidepaddingen i #hoved, slik at raden går helt ut til kolonnekanten.
   Bunnpaddingen tar høyde for hjemindikatoren på iPhone, som er grunnen til at
   siden har viewport-fit=cover. */
.handlingsrad{
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:1rem -1rem 0;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(251,247,239,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 18px rgba(16,63,87,.12);
}
.handlingsrad .knapp{min-height:48px;}

/* Øvingsraden har bare én knapp. Den står til høyre på bred skjerm, som en
   vanlig bunnrad i et kort, og tar hele bredden på smal skjerm, der størst
   mulig trykkflate for tommelen er viktigere enn symmetri. Telleren gjentas
   ikke her: den står allerede i fremdriftsraden over kortet. */
.neste-rad{justify-content:flex-end;}
@media (max-width:480px){
  .neste-rad .knapp{flex:1 1 100%;}
}

/* ---------------------------------------------------------------- resultat */
.resultat-topp{text-align:center; padding:1.6rem 1rem; border-radius:var(--r-xl); margin-bottom:1.2rem;}
.resultat-topp.bestatt{background:#f2f7ea; border:1px solid var(--meadow-300);}
.resultat-topp.ikke{background:#fdf1ee; border:1px solid var(--coral-400);}
.resultat-dom{font-family:var(--font-display); font-size:2rem; margin:0 0 .2em;}
.resultat-topp.bestatt .resultat-dom{color:var(--meadow-500);}
.resultat-topp.ikke .resultat-dom{color:var(--coral-600);}
.resultat-tall{font-family:var(--font-mono); font-size:1.05rem; color:var(--muted);}

.terskel-rad{display:flex; flex-direction:column; gap:.7rem; margin:1rem 0;}
.terskel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:.8rem .9rem;
}
.terskel-hode{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem;}
.terskel-hode b{font-size:.95rem;}
.terskel-hode span{font-family:var(--font-mono); font-size:.88rem;}
.terskel-spor{height:8px; background:var(--sunk); border-radius:var(--r-pill); position:relative; overflow:hidden;}
.terskel-fyll{height:100%; border-radius:var(--r-pill);}
.terskel-fyll.ja{background:var(--meadow-400);}
.terskel-fyll.nei{background:var(--coral-400);}
.terskel-strek{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-900); opacity:.55;}

.oversikt{display:flex; flex-wrap:wrap; gap:.32rem; margin-top:1.1rem; padding-bottom:.4rem;}
.rute{
  width:30px; height:30px; border-radius:var(--r-sm); border:1.5px solid var(--border);
  background:var(--card); font-family:var(--font-mono); font-size:.74rem; cursor:pointer;
  color:var(--muted);
}
.rute.svart{background:var(--sea-100); border-color:var(--sea-300); color:var(--sea-700);}
.rute.na{outline:2.5px solid var(--sea-500); outline-offset:1px;}

/* Eksamensraden er alltid limt fast, ikke bare etter et svar. Man navigerer
   fram og tilbake hele prøven igjennom, og oppgaveoversikten ligger under. */
.eksamen-bunn{gap:.55rem;}
.eksamen-bunn .knapp{flex:1 1 0; min-width:0;}

/* ---------------------------------------------------------------- lærebok */
.sok-rad{margin:1rem 0 1.3rem;}
.sok-rad input{
  width:100%; font-family:inherit; font-size:1rem; padding:.7rem .95rem;
  border:1.5px solid var(--border-strong); border-radius:var(--r-pill); background:var(--card);
  color:var(--body);
}
.sok-rad input:focus{border-color:var(--sea-400); outline:none;}

.bok-emne{margin-bottom:1.6rem;}
.bok-emne > h2{
  display:flex; align-items:center; gap:.6rem; padding-bottom:.4rem;
  border-bottom:2px solid var(--border);
}
.bok-emne > h2 .emne-prikk{width:12px; height:12px;}

.bok-punkt{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:.6rem; overflow:hidden;
}
.bok-punkt > summary{
  cursor:pointer; padding:.8rem .95rem; font-weight:600; list-style:none;
  display:flex; gap:.7rem; align-items:baseline;
}
.bok-punkt > summary::-webkit-details-marker{display:none;}
.bok-punkt > summary::after{content:"+"; margin-left:auto; color:var(--soft); font-family:var(--font-mono);}
.bok-punkt[open] > summary::after{content:"–";}
.bok-punkt > summary:hover{background:var(--sea-50);}
.bok-id{font-family:var(--font-mono); font-size:.78rem; color:var(--sea-600); flex:none;}
.bok-kropp{padding:0 .95rem 1rem; border-top:1px solid var(--border);}
.bok-kropp > p:first-child{margin-top:.9rem;}

.bok-figurer{display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0;}
.figur{
  /* margin:0 er nødvendig: <figure> har 40px sidemarg som standard i nettleseren,
     og uten den flyter ikke figurene ved siden av hverandre. */
  margin:0; background:var(--sunk); border:1px solid var(--border); border-radius:var(--r-md);
  padding:.6rem; text-align:center; width:132px;
}
.figur img{display:block; width:100%; height:118px; object-fit:contain;}
.figur figcaption{font-size:.72rem; color:var(--muted); margin-top:.4rem; line-height:1.3;}

/* Kartutsnitt er rasterbilder med finstilt detalj, og tåler ikke 132 px.
   De får hele kolonnebredden og kan trykkes på for å åpnes i full størrelse. */
.figur-kart{width:100%;}
.figur-kart img{height:auto; max-height:420px;}
.figur-kreditt{color:var(--soft); white-space:nowrap;}
.figur-kreditt a{color:var(--soft);}
.fasit-bildetekst{font-size:.84rem; color:var(--muted); margin:0 0 .85rem;}
.sporsmal-figur{margin:0 0 1rem;}
/* Kartutsnitt er rasterbilder med fin detalj og tåler ikke 260 piksler. De får
   hele kortbredden, og knappen under åpner dem i full størrelse. */
.sporsmal-figur-kart .sporsmal-bilde{
  max-width:100%; max-height:none; width:100%; padding:.35rem; cursor:zoom-in;
}
.forstorr-knapp{
  display:block; margin:.15rem auto .1rem; appearance:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.74rem; color:var(--sea-700);
  background:var(--sea-50); border:1px solid var(--sea-100);
  border-radius:var(--r-pill); padding:.34rem .8rem;
}
.forstorr-knapp:hover{background:var(--sea-100);}

/* Lupa. Fast posisjon over alt, med bildet i sin egen piksel og rulling i begge
   retninger. touch-action pan lar fingeren dra kartet på telefon. */
body.lupe-apen{overflow:hidden;}
.lupe{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  background:rgba(27,26,21,.94);
}
.lupe-topp{
  display:flex; gap:.8rem; align-items:center; justify-content:space-between;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-top, 0px)); flex:none;
}
.lupe-tekst{color:var(--shell-100); font-size:.82rem; line-height:1.3;}
.lupe-lukk{color:var(--shell-100); border-color:var(--driftwood-400); flex:none;}
.lupe-lukk:hover:not(:disabled){color:#fff; border-color:var(--sand-200);}
.lupe-flate{flex:1; overflow:auto; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch;}
.lupe-flate img{display:block; max-width:none;}
.lupe-fot{
  flex:none; margin:0; padding:.5rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  color:var(--driftwood-400); font-size:.72rem;
}
.lupe-fot a{color:var(--sand-200);}

.sporsmal-figur .sporsmal-bilde{margin-bottom:.35rem;}
.figur-kreditt-rad{font-size:.7rem; text-align:center; color:var(--soft);}

.forbehold summary{cursor:pointer; list-style:none;}
.forbehold summary::-webkit-details-marker{display:none;}
.forbehold p{margin:.6rem 0 0;}
.forbehold-mer{
  display:inline-block; margin-left:.3rem; font-family:var(--font-mono);
  font-size:.72rem; text-decoration:underline; text-underline-offset:2px;
}
.forbehold[open] .forbehold-mer{display:none;}
.forbehold summary:focus-visible{outline:3px solid var(--sea-500); outline-offset:2px;}

/* Kildelista under et kapittel. Lukket som standard, fordi prosaen skal leses
   først og kildene er der for å kunne slås opp. */
.kildeliste{margin:1rem 0 .2rem;}
.kildeliste > summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-family:var(--font-mono); font-size:.76rem; color:var(--sea-700);
  background:var(--sea-50); border:1px solid var(--sea-100);
  border-radius:var(--r-pill); padding:.34rem .8rem;
}
.kildeliste > summary::-webkit-details-marker{display:none;}
.kildeliste > summary::before{content:'▸ ';}
.kildeliste[open] > summary::before{content:'▾ ';}
.kildeliste > summary:hover{background:var(--sea-100);}
.kildeliste > summary:focus-visible{outline:3px solid var(--sea-500); outline-offset:2px;}
.kildeliste .kilde:first-of-type{margin-top:.7rem;}

/* Langt sitat: begynnelsen vises, resten ligger bak en utvidelse. Markøren fra
   <details> skjules, fordi lenketeksten under sitatet gjør samme jobb tydeligere. */
.sitat-lang summary{list-style:none; cursor:pointer;}
.sitat-lang summary::-webkit-details-marker{display:none;}
.sitat-lang summary blockquote{margin-bottom:.3rem;}
.sitat-mer{color:var(--soft);}
.sitat-knapp{
  font-family:var(--font-mono); font-size:.74rem; color:var(--sea-600);
  text-decoration:underline; text-underline-offset:2px;
}
.sitat-lang[open] summary{display:none;}
.sitat-lang summary:focus-visible{outline:3px solid var(--sea-500); outline-offset:2px;}

.merknad{
  background:var(--sun-200); border-radius:var(--r-md); padding:.7rem .85rem;
  font-size:.88rem; color:#6b4f10; margin:.9rem 0;
}
.merknad b{color:#573f08;}

.tom{color:var(--muted); font-style:italic; padding:1.4rem 0;}

/* ---------------------------------------------------------------- bunn */
.bunn{
  border-top:1px solid var(--border); background:var(--sunk); margin-top:2rem;
  padding:1.3rem 1rem 2rem;
}
.bunn p{max-width:var(--bredde); margin:0 auto .5rem;}
.ansvar{font-size:.88rem; color:var(--muted);}
.ansvar strong{color:var(--ink-800);}
.ansvar-liten{font-size:.78rem; color:var(--soft);}

@media (min-width:640px){
  .topp-inn{display:flex; align-items:center; justify-content:space-between; padding-bottom:0;}
  .fane-rad{margin-top:0;}
  h1{font-size:2.1rem;}
  .helt h1{font-size:2.5rem;}
  .terskel-rad{flex-direction:row;}
  .terskel{flex:1;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}