/* ==========================================================================
   LME Barnebok
   --------------------------------------------------------------------------
   Utseendet er LMEs eget, og fontene og fargene er låst (se CLAUDE.md):
   overskrifter i Playpen Sans, all annen tekst i Sasson Montessori, og
   cerise, lime, sol, sky og krem som de står.

   INGEN OVERGANG BLANDER ROSA OG GULT. En overgang fra en rosa til sol går
   gjennom oransje på veien, og oransje er ikke en LME-farge. Hver overgang
   her holder seg derfor i én familie.
   ========================================================================== */

@font-face {
  font-family: 'Playpen Sans';
  src: url('/fonts/PlaypenSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playpen Sans';
  src: url('/fonts/PlaypenSans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playpen Sans';
  src: url('/fonts/PlaypenSans-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sasson Montessori';
  src: url('/fonts/SassoonMontessori.woff2') format('woff2'),
       url('/fonts/SassoonMontessori.ttf') format('truetype');
  font-display: swap;
}

:root {
  --cerise: #E91E89;
  --pink-soft: #F8D7DA;
  --pink-mid: #F5A8B8;
  --sun: #F7C72E;
  --sun-soft: #FCEFBE;
  --sky: #3FA9F5;
  --sky-soft: #D9ECFB;
  --lime: #A4D233;
  --lime-soft: #EAF6D6;
  --cream: #FBF6F0;
  --cream-deep: #F4E9DD;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-muted: #8A8A8A;
  --line: #F0DCDE;
  --font-head: 'Playpen Sans', system-ui, sans-serif;
  --font-body: 'Sasson Montessori', 'Playpen Sans', system-ui, sans-serif;
  --r: 18px;
  --r-lg: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; }

.bb-wrap { max-width: 900px; margin: 0 auto; padding: 22px 18px 90px; }

/* ---------------------------------------------------------------- topp --- */
.bb-topp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bb-topp img { height: 40px; width: auto; }
.bb-topp .bb-navn { font-family: var(--font-head); font-weight: 800; font-size: 19px; }
.bb-sprak {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-family: var(--font-body); font-size: 14px; cursor: pointer;
  color: var(--cerise);
}
.bb-tilbake {
  margin-left: auto; text-decoration: none; color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font-size: 13.5px; font-weight: 700;
}

/* --------------------------------------------------------------- merke --- */
/* Den runde etiketten over overskriften: den sier hvor du er, i ett blikk.

   INGEN STIPLET KANT. Renate 20. september 2026: "Hvorfor har du laget slike
   stiplete linjer rundt overskriftene plutselig? Ikke fint." Den var min
   paafunn, og fantes ikke ellers paa plattformen. Fargen staar, streken er
   borte. Legg den aldri inn igjen. */
.bb-merke {
  display: inline-block; background: var(--sun-soft);
  border-radius: 999px; padding: 8px 18px; font-family: var(--font-head);
  font-weight: 800; font-size: 13.5px; letter-spacing: .02em; margin-bottom: 12px;
}
.bb-merke.sky { background: var(--sky-soft); }
.bb-merke.lime { background: var(--lime-soft); }
.bb-merke.rosa { background: var(--pink-soft); }

h1.bb-h1 { font-size: 30px; margin-bottom: 10px; }
.bb-ing { font-size: 17px; color: var(--ink-soft); margin-bottom: 22px; }

/* --------------------------------------------------------------- faner --- */
.bb-faner { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.bb-fane {
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 10px 17px; cursor: pointer;
}
.bb-fane[aria-selected="true"] { background: var(--cerise); border-color: var(--cerise); color: #fff; }
.bb-panel[hidden] { display: none; }

/* ----------------------------------------------------------------- kort --- */
.bb-kort {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; margin-bottom: 18px;
}
.bb-kort h2 { font-size: 20px; margin-bottom: 8px; }
.bb-kort h3 { font-size: 17px; margin-bottom: 6px; }
.bb-kort > p { color: var(--ink-soft); margin-bottom: 12px; }

label.bb-l { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
input.bb-f, select.bb-f, textarea.bb-f {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px;
}
textarea.bb-f { min-height: 110px; resize: vertical; }
input.bb-f:focus, select.bb-f:focus, textarea.bb-f:focus { outline: 2px solid var(--pink-mid); outline-offset: 1px; }
.bb-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Den lille forklaringen under sidetallet. Ikke saa liten at hun ikke ser
   den: hun leser paa mobil, og 15 piksler er nedre grense her. */
.bb-hint { font-size: 15px; color: var(--ink-soft); margin: -2px 0 14px; line-height: 1.5; }

/* Avkryssingen over bildeknappen. Stor nok til aa treffes med en tommel. */
.bb-avkryss { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15.5px; }
.bb-avkryss input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cerise); }

/* --------------------------------------------------------------- knapp --- */
.bb-knapp {
  font-family: var(--font-body); font-weight: 800; font-size: 16px;
  background: var(--cerise); color: #fff; border: none; border-radius: 999px;
  padding: 14px 26px; cursor: pointer; margin-top: 18px;
}
.bb-knapp:disabled { opacity: .55; cursor: default; }
.bb-knapp.bb-liten { font-size: 14px; padding: 9px 17px; margin-top: 0; }
.bb-knapp.bb-hvit { background: #fff; color: var(--cerise); border: 1px solid var(--line); }

/* -------------------------------------------------------------- beskjed --- */
.bb-beskjed { border-radius: 16px; padding: 14px 16px; margin-top: 16px; font-size: 15px; }
.bb-beskjed.feil { background: #FDEAF2; border: 1px solid var(--pink-mid); }
.bb-beskjed.ok { background: var(--lime-soft); border: 1px solid var(--lime); }
.bb-beskjed.info { background: var(--sky-soft); border: 1px solid var(--sky); }
.bb-beskjed[hidden] { display: none; }

/* ------------------------------------------------------------- boksider --- */
/* Hver side tegnes som en ekte bokside: bildet oeverst, teksten under.
   Formatet er kvadratisk, som en vanlig bildebok, og det samme forholdet
   holdes baade paa skjermen og i PDF-en. */
.bb-bokside {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-bottom: 16px; position: relative;
}
.bb-bokside.omslag { border-color: var(--pink-mid); border-width: 2px; }
.bb-bokside.bakside { background: var(--cream-deep); }

.bb-bildeplass {
  aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  /* Tynn, hel strek. Den stiplete er ute, se .bb-merke over. */
  background: var(--cream); border: 1px solid var(--line);
  display: grid; place-items: center; margin-bottom: 14px;
}
.bb-bildeplass img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fra 12 aar og opp har ikke hver side et bilde, og en side uten bilde skal
   ikke ha en tom rute over teksten. Da ville en kapittelbok sett ut som en
   bildebok der halvparten av bildene manglet. */
.bb-bildeplass.tom { display: none; }
.bb-mangler {
  font-size: 13px; color: var(--ink-muted); padding: 16px; text-align: center;
  line-height: 1.5; word-break: break-word;
}
.bb-mangler b { color: var(--cerise); }

.bb-boktekst { font-size: 17px; line-height: 1.55; }
.bb-boktekst p { margin-bottom: 8px; }
.bb-boktekst p.andre { color: var(--ink-soft); font-style: italic; font-size: 15.5px; }

/* --------------------------------------------------- teksten kan rettes --- */
/* Et felt som kan rettes skal SE ut som boken, ikke som et skjema, men det
   må likevel si fra at det går an å trykke på det. Derfor ingenting i hvile,
   en svak flate når hun holder over, og en tydelig ramme mens hun skriver.

   Renate 22. september 2026: "Man må kunne redigere teksten." */
.bb-rett {
  border-radius: 8px;
  padding: 2px 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background .15s ease, box-shadow .15s ease;
  /* Et langt oppdiktet ord skal brytes, ikke skyve siden ut i bredden. */
  overflow-wrap: break-word;
}
.bb-rett:hover { background: rgba(0, 0, 0, .035); }
.bb-rett:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px var(--cerise);
}
/* Bildebeskrivelsen står inne i en dempet linje. Feltet skal likevel se ut
   som noe man kan trykke på, derfor egen visning. */
.bb-promptfelt { display: inline-block; min-width: 40px; }
/* Figurlinjen på baksiden: navn og beskrivelse er to felt, med et komma
   mellom som IKKE er et felt. */
.bb-figurlinje { margin-bottom: 4px; }

/* Fingeren skal treffe. På mobil er en linje tekst et lite mål. */
@media (max-width: 640px) {
  .bb-rett { padding: 6px; }
}

/* --------------------------------------------------------- utgavelinjen --- */
/* Gjør en gammel fane synlig. Se tegnUtgave() i barnebok.js. */
.bb-utgave {
  max-width: 960px;
  margin: 28px auto 18px;
  padding: 0 18px;
  color: var(--ink-muted);
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.bb-utgave.gammel { color: var(--cerise); font-weight: 600; }

/* ------------------------------------------------- boken som ren tekst --- */
/* Hele historien i ett strekk, til lesing og retting. Ingen bildeplass,
   ingen knapper. Renate 22. september 2026: "Man må få se teksten og kunne
   redigere uten å måtte laste ned pdf." */
.bb-manus {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 20px 26px;
  /* Lesebredde. En linje som går tvers over en skjerm er tung å lese, og
     hun leser mest på mobil uansett. */
  max-width: 640px;
}
.bb-manus-tittel {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 4px;
}
.bb-manus-tittel.andre { color: var(--ink-soft); font-size: 18px; }
.bb-manus-rad {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.bb-manus-rad.under { border-top: none; padding-top: 0; }
/* Sidetallet står i margen, lite og rolig, så teksten er det man ser. */
.bb-manus-merke {
  flex: 0 0 34px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: right;
}
.bb-manus-tekst {
  flex: 1 1 auto;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}
.bb-manus-tekst.andre { color: var(--ink-soft); font-style: italic; font-size: 15.5px; }
/* En side uten tekst skal SYNES som tom, ikke se ut som om den mangler. */
.bb-manus-rad.tom .bb-manus-tekst { min-height: 27px; background: var(--cream); border-radius: 8px; }
.bb-manus-rad.bakside .bb-manus-merke { font-size: 12px; }
@media (max-width: 640px) {
  .bb-manus { padding: 16px 14px 20px; }
  .bb-manus-merke { flex-basis: 26px; font-size: 12px; }
}

/* Sier "lagrer" og "lagret" mens hun retter. En lagring ingen ser, er en
   lagring hun ikke tør stole på. */
/* display her slår ut hidden-attributtet, og da sto en tom, lime pille på
   skjermen bestandig. Oppdaget på et skjermbilde, ikke i en test: en test
   som spør om elementet er synlig, spør sjelden om det er PENT. */
.bb-lagrestatus[hidden] { display: none; }
.bb-lagrestatus {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--ink-soft);
  font-size: 14px;
}
.bb-boktittel { font-size: 24px; margin-bottom: 6px; }
.bb-undertittel { color: var(--ink-soft); }
/* Den andre utgaven av tittelen, naar hun viser begge spraak paa samme side. */
.bb-boktittel.andre { font-size: 19px; color: var(--ink-soft); margin-top: -2px; }
.bb-undertittel.andre { font-style: italic; font-size: 15.5px; }

.bb-sidetall {
  position: absolute; right: 18px; bottom: 14px; font-family: var(--font-head);
  font-size: 13px; color: var(--ink-muted);
}

/* Knappene hoerer til arbeidet, ikke til boken. De forsvinner i utskriften. */
.bb-verktoy { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bb-verktoy label { cursor: pointer; margin: 0; }
.bb-fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.bb-valg { margin-bottom: 4px; }

/* ---------------------------------------------------------- boklisten --- */
.bb-rad-bok {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px; margin-bottom: 11px;
}
.bb-rad-bok h3 { font-size: 17px; margin-bottom: 2px; }
.bb-rad-bok .bb-hjelp { margin: 0 0 10px; }
.bb-rad-bok .bb-verktoy { margin-top: 0; }

/* ---------------------------------------------------------------- lister --- */
.bb-liste { list-style: none; margin: 10px 0; }
.bb-liste li { padding-left: 24px; position: relative; margin-bottom: 8px; font-size: 15.5px; }
.bb-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--cerise); font-weight: 800; }

.bb-steg { list-style: none; counter-reset: s; margin: 12px 0; }
.bb-steg li { counter-increment: s; padding-left: 40px; position: relative; margin-bottom: 12px; font-size: 15.5px; }
.bb-steg li::before {
  content: counter(s); position: absolute; left: 0; top: -1px; width: 28px; height: 28px;
  background: var(--sky-soft); border: 2px solid var(--sky); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 13px;
}

.bb-ut {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; min-height: 150px; resize: vertical;
}

.bb-tom { color: var(--ink-muted); font-size: 15px; }
.bb-notis { font-size: 14px; color: var(--ink-soft); background: var(--cream-deep); border-radius: 14px; padding: 13px 15px; margin-top: 14px; }
.bb-hjelp { font-size: 13.5px; color: var(--ink-muted); margin-top: 6px; }

.bb-laster { display: inline-block; margin-left: 10px; font-size: 14px; color: var(--ink-soft); }
.bb-laster[hidden] { display: none; }

@media (max-width: 620px) {
  .bb-wrap { padding: 16px 14px 80px; }
  h1.bb-h1 { font-size: 25px; }
  .bb-rad { grid-template-columns: 1fr; }
  .bb-kort { padding: 18px; }
}

/* ------------------------------------------------------------- utskrift --- */
/* PDF-en lages av nettleserens egen utskrift. Da blir teksten ekte tekst i
   filen, ikke et bilde av tekst, og vi slipper aa laste ned et bibliotek.
   Knappen setter klassen bb-skriver paa body foerst, saa bare boksidene blir
   med og alt annet paa siden faller bort. */
@media print {
  @page { size: A4 portrait; margin: 12mm; }

  body.bb-skriver { background: #fff; }
  body.bb-skriver .bb-topp,
  body.bb-skriver .bb-merke,
  body.bb-skriver .bb-faner,
  body.bb-skriver h1.bb-h1,
  body.bb-skriver .bb-ing,
  body.bb-skriver .bb-kort,
  body.bb-skriver .bb-verktoy,
  body.bb-skriver .bb-beskjed,
  body.bb-skriver #lme-gate,
  body.bb-skriver .bb-hjelp,
  body.bb-skriver .bb-lagrestatus,
  body.bb-skriver .bb-utgave,
  /* Tekstvisningen er et arbeidsverktøy, ikke boken. PDF-en er alltid
     boksidene, se lagpdf i barnebok.js. */
  body.bb-skriver .bb-manus,
  body.bb-skriver .bb-panel[hidden] { display: none !important; }

  /* Et felt som kan rettes er en bokside på papiret, ikke et felt. All
     pynten som viser at det går an å trykke skal bort. */
  body.bb-skriver .bb-rett {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.bb-skriver #panel-ferdig { display: block !important; }
  body.bb-skriver #bokut { display: block !important; }

  /* Én bokside per ark, og aldri et sideskift midt i en side. */
  body.bb-skriver .bb-bokside {
    border: none; border-radius: 0; padding: 0; margin: 0;
    break-after: page; page-break-after: always;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.bb-skriver .bb-bokside:last-child { break-after: auto; page-break-after: auto; }
  body.bb-skriver .bb-bildeplass { border: none; border-radius: 0; }
  body.bb-skriver .bb-mangler { color: #8A8A8A; }
  /* Fargene skal faktisk komme med, ellers skriver nettleseren dem bort. */
  body.bb-skriver .bb-bokside,
  body.bb-skriver .bb-bildeplass img {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ------------------------------------------------------- Canva-velgeren --- */
/* Ligger over siden, og vises bare naar hun trykker Hent fra Canva. */
.bb-velger {
  position: fixed; inset: 0; z-index: 60; background: rgba(26, 26, 26, .45);
  display: grid; place-items: center; padding: 18px;
}
.bb-velger[hidden] { display: none; }
.bb-velger-boks {
  background: #fff; border-radius: var(--r-lg); padding: 20px;
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(26, 26, 26, .28);
}
.bb-velger-topp { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.bb-velger-topp h2 { font-size: 20px; margin: 0; }
.bb-velger-topp button { margin-left: auto; flex: none; }

.bb-design {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.bb-design:last-of-type { border-bottom: none; }
.bb-design img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 12px;
  background: var(--cream); flex: none;
}
.bb-design-tekst { flex: 1 1 auto; min-width: 0; }
.bb-design-tekst h3 {
  font-size: 15.5px; margin: 0 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-design-tekst .bb-hjelp { margin-top: 0; }
.bb-design button { flex: none; }
.bb-sidefelt {
  width: 62px; font-family: var(--font-body); font-size: 14px;
  border: 1px solid var(--line); border-radius: 9px; padding: 3px 7px; margin-left: 5px;
}

@media (max-width: 460px) {
  .bb-design { flex-wrap: wrap; }
  .bb-design-tekst { flex: 1 1 140px; }
}