/* ============================================================
   Vevelstadsaga Barnehage — Skjemadesign
   Felles stilark for observasjons- og drøftingsskjemaer.
   Tokens og typografi er hentet direkte fra Barnehage-OS /
   merkevareboka (Misprint 2026). Skog · Honning · Terra · Krem.
   ============================================================ */

/* Fontene ligger lokalt i vendor/, ikke på Google. Skjemamappa ble glemt da
   resten av OS-et ble vendret 2026-08-19 — og et skjema som venter på
   fonts.googleapis.com bak et filtrerende barnehagenett rendres med
   systemfont mens resten av OS-et står riktig. Ikke bytt tilbake. */
@import url('../vendor/fonter.css');

:root {
  --green:   #1A7A6E;   /* Skog — primær */
  --green2:  #155f55;
  --green3:  #0f4a42;
  --yellow:  #F5C93E;   /* Honning */
  --terra:   #C85D3A;   /* Terra */
  --cream:   #FAF3E8;   /* Krem — bakgrunn */
  --cream2:  #F0E6D4;
  --ink:     #1E2B1A;   /* Ink — tekst */
  --muted:   #335B56;
  --field:   #FCFAF6;   /* feltbakgrunn */
  --soft:    #eef6f4;   /* grønn tint */
  --soft-terra: #fbf0e6;

  --red:    #C0413A;  --red-bg: #f7e2e0;
  --amber:  #D99A1C;  --amber-bg: #faedcd;
  --grn:    #2F8F5B;  --grn-bg: #e2f0e4;

  --radius:    18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(20,60,52,.08);

  --font-head: "Nunito", system-ui, sans-serif;
  --font-ui:   "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 15px;
}

/* ---------- Toppstripe (app-shell-følelse) ---------- */
.appbar {
  background: var(--ink);
  color: #fff;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.appbar .brand {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.appbar .brand img { height: 24px; }
.appbar a.back {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}
.appbar a.back:hover { color: #fff; }
.appbar .sp { flex: 1; }
.appbar .tip {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  max-width: 360px;
  line-height: 1.45;
}
.appbar .tip b { color: var(--yellow); font-weight: 700; }
.tb-btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green);
  color: #fff;
  transition: .15s;
}
.tb-btn:hover { background: #1f8d80; }

/* ---------- Ark (A4-aktig dokument) ---------- */
.sheet {
  max-width: 820px;
  margin: 26px auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* Gradient-toppstripe: Skog → Honning → Terra */
.top-bar {
  height: 7px;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--terra));
}

/* ---------- Header / logo-lockup ---------- */
.head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 40px 18px;
  border-bottom: 1px solid var(--cream2);
}
.head .logo { width: 70px; height: 70px; object-fit: contain; flex: 0 0 auto; }
.head .wordmark { flex: 1 1 auto; }
.head .wordmark .name {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 900;
  font-size: 25px;
  color: var(--ink);
  line-height: 1;
}
.head .wordmark .sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.head .docmeta { text-align: right; flex: 0 0 auto; }
.head .docmeta .kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra);
}
.head .docmeta .tagline {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 900;
  color: var(--green);
  font-size: 14px;
  margin-top: 3px;
}

/* ---------- Tittelblokk ---------- */
.title-block { padding: 24px 40px 4px; }
.title-block h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 33px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 9px;
}
.title-block .lede { font-size: 15px; color: var(--muted); max-width: 62ch; margin: 0; }

/* Infostripe */
.callout {
  margin: 18px 40px 0;
  background: var(--soft);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 13px 17px;
  font-size: 13.5px;
  color: var(--green2);
}
.callout strong { color: var(--green3); }
.callout.warn { background: #fdf6e3; border-left-color: var(--yellow); color: #7a5a14; }

/* ---------- Seksjoner ---------- */
.body { padding: 8px 40px 8px; }
section.block { margin-top: 26px; }
section.block:first-child { margin-top: 18px; }

.eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 5px;
}
h2.section {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 14px;
}
.hint { font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }

/* ---------- Felt ---------- */
.grid { display: grid; gap: 14px 22px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"], input[type="date"], input[type="time"], textarea, select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--cream2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: #bdb6a6; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
textarea.tall { min-height: 150px; }
textarea.short { min-height: 62px; }

/* ---------- Avkrysning (pills) ---------- */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border: 1.5px solid var(--cream2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: .12s;
}
.choices input { accent-color: var(--green); width: 15px; height: 15px; margin: 0; }
.choices label:hover { border-color: var(--green); }
.choices label:has(input:checked) { background: var(--soft); border-color: var(--green); color: var(--green2); font-weight: 700; }

/* Vertikal liste med beskrivelse */
.optlist { display: flex; flex-direction: column; gap: 8px; }
.optlist label {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1.5px solid var(--cream2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  cursor: pointer;
  transition: .12s;
  background: #fff;
}
.optlist label:hover { border-color: var(--green); }
.optlist label:has(input:checked) { background: var(--soft); border-color: var(--green); }
.optlist input { accent-color: var(--green); margin-top: 3px; width: 16px; height: 16px; }
.optlist .opt-title { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.optlist .opt-desc { font-size: 12.5px; color: var(--muted); }

/* ---------- Bekymringsnivå (grønt/gult/rødt) ---------- */
.levels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.levels label {
  border: 2px solid var(--cream2);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  display: block;
  position: relative;
  background: #fff;
  transition: .12s;
}
.levels .lv-head { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--ink); font-family: var(--font-head); }
.levels .dot { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; }
.levels .lv-desc { font-size: 12px; color: var(--muted); margin-top: 6px; }
.levels input { position: absolute; opacity: 0; pointer-events: none; }
.levels .green  .dot { background: var(--grn); }
.levels .yellow .dot { background: var(--amber); }
.levels .red    .dot { background: var(--red); }
.levels label:has(input:checked).green  { border-color: var(--grn); background: var(--grn-bg); }
.levels label:has(input:checked).yellow { border-color: var(--amber); background: var(--amber-bg); }
.levels label:has(input:checked).red    { border-color: var(--red); background: var(--red-bg); }

/* ---------- Tabeller (editerbare) ---------- */
table.grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--cream2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
table.grid-table th {
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 11px;
}
table.grid-table td { border-top: 1px solid var(--cream2); padding: 0; vertical-align: top; }
table.grid-table td input, table.grid-table td textarea {
  border: none; border-radius: 0; background: transparent; min-height: 46px; padding: 9px 11px;
}
table.grid-table td input:focus, table.grid-table td textarea:focus {
  background: var(--soft);
}
table.grid-table td select {
  border: none; border-radius: 0; background: transparent;
  min-height: 46px; padding: 9px 11px; width: 100%;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  appearance: none; -webkit-appearance: none;
}
table.grid-table td select:focus { background: var(--soft); outline: none; }
table.grid-table td + td { border-left: 1px solid var(--cream2); }
table.grid-table tr:nth-child(even) td { background: #fdfbf7; }

/* ---------- Knapper ---------- */
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 9px 17px;
  border: 1.5px solid var(--green);
  background: #fff;
  color: var(--green2);
  cursor: pointer;
  transition: .12s;
}
.btn:hover { background: var(--soft); }
.btn-add { margin-top: 10px; }

/* ---------- Hjelpe-bokser ---------- */
.note {
  background: var(--cream);
  border: 1px solid var(--cream2);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 13px;
  color: var(--muted);
}
.note .formula {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  color: var(--green2);
  font-size: 15px;
}

/* ---------- Footer ---------- */
.foot { margin-top: 30px; }
.foot .hills { display: block; width: 100%; height: auto; }
.foot .foot-inner {
  border-top: 1px solid var(--cream2);
  background: var(--cream);
  padding: 14px 40px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.foot .org { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.foot .org strong { font-family: var(--font-head); font-weight: 800; color: var(--ink); }
.foot .conf { color: var(--terra); font-weight: 700; }
.foot .tag {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 900;
  color: var(--green);
  font-size: 15px;
}

/* ============================================================
   TILPASS SPØRSMÅL  (sporsmal.js)
   ============================================================ */

/* Kopien av feltinnholdet finnes hele tiden i DOM-en, men angår bare
   papiret. Se utskrift.js for hvorfor den ikke bygges på beforeprint. */
.utskrift-verdi { display: none; }

/* .field er display:flex, og flex slår nettleserens innebygde
   [hidden]{display:none}. Uten !important her blir hvert «skjulte»
   spørsmål stående synlig på skjermen og på papiret. */
.field[hidden] { display: none !important; }

body.q-rediger .sheet .field > label {
  background: var(--soft);
  border-radius: 7px;
  padding: 3px 8px;
  margin: -3px -8px 2px;
  outline: 1.5px dashed var(--green);
  cursor: text;
}
body.q-rediger .sheet .field > label:focus {
  outline: 2px solid var(--green);
  background: #fff;
}
/* Feltene selv er ikke det man holder på med i redigeringsmodus */
body.q-rediger .sheet input,
body.q-rediger .sheet textarea,
body.q-rediger .sheet select { opacity: .45; pointer-events: none; }

.q-verktoy { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.q-btn {
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: #fff;
  border: 1.5px solid var(--cream2);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.q-btn:hover { border-color: var(--green); color: var(--green2); }

/* Skjult spørsmål, sett fra redigeringsmodus: synlig, men tydelig avslått */
body.q-rediger .field.q-skjult > label { opacity: .5; text-decoration: line-through; }
body.q-rediger .field.q-skjult > input,
body.q-rediger .field.q-skjult > textarea { opacity: .2; }

/* Egne spørsmål merkes så det er tydelig hva som er lagt til lokalt */
body.q-rediger .field.q-egen > label::after {
  content: " · ditt eget";
  font-weight: 700;
  color: var(--terra);
  letter-spacing: .02em;
}

/* ============================================================
   PRINT / PDF
   ============================================================ */
@media print {
  /* Redigeringsmodus skal aldri komme med på papiret, uansett om noen
     trykker Skriv ut mens den står på. */
  .q-verktoy, .q-btn { display: none !important; }
  body.q-rediger .sheet input,
  body.q-rediger .sheet textarea,
  body.q-rediger .sheet select { opacity: 1 !important; }
  body.q-rediger .sheet .field > label {
    background: none; outline: none; padding: 0; margin: 0 0 5px;
  }
  html, body { background: #fff; }
  body { font-size: 11.5pt; }
  .appbar { display: none !important; }
  .btn-add, .btn { display: none !important; }
  /* Skjermhjelpemidler, ikke dokumentinnhold. «Påbegynt»-stripa er den
     viktigste: den lister koder til andre barn enn det arket handler om. */
  .paabegynt-stripe, .kun-skjerm, .dikt-rad, .save-status { display: none !important; }

  /* ── Utfylt skjema: bruksanvisningen skal ikke i mappa ──
     Se utskrift.js. Blankt skjema beholder alt — da er hjelpetekstene
     hele poenget med å skrive det ut.

     `:not(:has(...))` er ikke pynt. `.note` er brukt to steder: som
     forklaringsboks («Spør før du forklarer …») og som BEHOLDER rundt
     episodefeltene i ABC-observasjon. Uten unntaket forsvant tolv utfylte
     felt fra papiret i det skjemaet — teksten var skrevet, feltet fantes,
     og hele blokken var skjult. Skjul aldri på klassenavn alene når
     klassen er brukt til to ting: skjul det som ikke rommer svar.

     ANDRE UNNTAK: et `.hint` som står rett FØR en avkryssingsgruppe eller
     en tabell er ikke en instruksjon — det er gruppas ETIKETT. «Type
     samtale», «Hvordan kom samtalen i stand», «Involverte instanser».
     I Drøftingsskjema er hintet eneste overskrift for fire grupper.
     Skjules det, står kryssene igjen uten at noe sier hva de gjelder —
     verre enn støy, det er tapt mening i et arkivert dokument.

     Regelen tar heller med litt for mye enn for lite: «Bare det som
     faktisk skal gjøres …» over avtaletabellen er ren instruksjon og blir
     stående. Et hint for mye på papiret er en skjønnhetsfeil; en etikett
     for lite gjør dokumentet uleselig.

     Reglene står hver for seg med vilje. Samles de i én selektorliste,
     gjør ÉN selektor nettleseren ikke forstår hele regelen ugyldig — og
     da blir alt stående. Det skjedde her: en linjedelt selektor ble lest
     som etterkommer-kombinator, og alle forklaringene kom med på papiret. */
  /* `.callout.warn` er unntatt. De fire advarslene i skjemaene er ikke
     bruksanvisning, men regler som gjelder ARKET: «Lagres i avdelingens
     dokumentasjon — ikke i enkeltbarns mapper», «Andre barn skal kodes,
     ikke navngis», og i Samhandlingsplan den juridiske rammen for fysisk
     inngripen. En samhandlingsplan uten den setningen er farlig
     ufullstendig, og en lagringsinstruks hjelper ingen på skjermen når
     arket ligger i feil perm. */
  body.utfylt .callout:not(.warn):not(:has(input, textarea, select)) { display: none !important; }
  body.utfylt .note:not(:has(input, textarea, select)) { display: none !important; }
  body.utfylt .hint:not(:has(input, textarea, select)):not(:has(+ .choices)):not(:has(+ .optlist)):not(:has(+ .levels)):not(:has(+ table)) { display: none !important; }

  /* Beskrivelsene under avkryssingene er stort sett DEFINISJONER, ikke
     instruksjoner: «Henvisning til PPT → drøftet med og samtykket av
     foresatte» endrer hva krysset betyr, og «Få noe → oppmerksomhet,
     aktivitet, gjenstand» definerer en funksjonskategori. De skal med.

     Det som er støy på et utfylt ark, er beskrivelsene under valgene som
     IKKE ble krysset av. De ryddes bort — men bare når gruppa faktisk har
     et valg. Står gruppa tom, er arket ufullstendig, og da skal alt være
     der så det kan fylles ut for hånd. */
  body.utfylt .optlist:has(input:checked) label:not(:has(input:checked)) .opt-desc,
  body.utfylt .levels:has(input:checked) label:not(:has(input:checked)) .lv-desc {
    display: none !important;
  }
  /* Placeholderne skrives ut som om de sto i feltet. På et arkivert
     dokument leses «mor / far / begge foresatte» i feltet «Fra hjemmet»
     som om noen har fylt det ut — eksempeltekst som ser ut som innhold. */
  body.utfylt .sheet input::placeholder,
  body.utfylt .sheet textarea::placeholder { color: transparent !important; opacity: 0 !important; }
  .sheet { box-shadow: none; border-radius: 0; margin: 0; max-width: 100%; }
  .head, .title-block, .body, .foot .foot-inner { padding-left: 16mm; padding-right: 16mm; }
  .callout { margin-left: 16mm; margin-right: 16mm; }
  /* ── Sidebytte ──
     «Hele seksjoner holdes samlet» var regelen, og den var riktig for et
     BLANKT skjema: da er alt kort, og en seksjon som deles midt i ser
     slurvete ut. På et UTFYLT skjema er den skadelig. En seksjon med fire
     grundige svar er høyere enn et A4-ark, og et element som ikke kan få
     plass noe sted må nettleseren bryte likevel — den bare gjør det på
     verst tenkelige måte, midt i en setning.

     Små, avgrensede ting holdes fortsatt samlet. Beholdere som KAN bli
     lange får dele seg, og i stedet holdes overskriften sammen med starten
     av innholdet (regelen under). */
  p, li, img, figure, blockquote,
  .card, .fld, .row,
  .meta-block, .signature-area, .levels, .callout, .hint, .note,
  .optlist label, .choices, thead,
  .sec-img, .img-ph, .hero-imgs, .quote-block, .print-filler {
    break-inside: avoid; page-break-inside: avoid;
  }
  section, .block, .section, .grid, .row, table, table.grid-table,
  .section-item {
    break-inside: auto; page-break-inside: auto;
  }
  /* Et felt holdes samlet så lenge det ER samlebart — er svaret langt,
     deles det heller enn å bli klippet. Labelen følger alltid med det
     første av teksten, så ingen står igjen som en overskrift uten svar. */
  .field { break-inside: auto; page-break-inside: auto; }
  .field > label { break-after: avoid; page-break-after: avoid; }
  tr { break-inside: auto; page-break-inside: auto; }

  /* ── Utfylt tekst (utskrift.js) ──
     Kopien av det som står i feltet, som vanlig avsnitt: den flyter over
     sideskift slik tekst gjør. Kontrollen selv tas ut, ellers ville svaret
     stått to ganger — én gang klippet, én gang helt. */
  .utskrift-verdi {
    display: block !important;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: var(--font-ui);
    font-size: 11.5pt;
    line-height: 1.55;
    color: var(--ink);
    background: #fff;
    border: 1px solid #c9c2b0;
    border-radius: 3px;
    padding: 2mm 2.5mm;
    min-height: 9mm;
    break-inside: auto; page-break-inside: auto;
  }
  .sheet input.har-verdi,
  .sheet textarea.har-verdi,
  .sheet select.har-verdi { display: none !important; }
  table.grid-table td .utskrift-verdi {
    border: none; border-radius: 0; padding: 2mm 2.5mm; min-height: 12mm;
  }
  /* Overskrift følger alltid med innholdet under (ingen foreldreløs tittel) */
  h1, h2, h3, h4, h2.section, .eyebrow, .section-item h3 {
    break-after: avoid; page-break-after: avoid;
  }

  /* Håndutfylling: tydelige felt med god skriveplass og linjer å skrive på */
  input[type="text"], input[type="date"], input[type="time"], select { min-height: 9mm !important; }
  textarea {
    min-height: 24mm;
    line-height: 8.5mm;
    padding-top: 1.5mm;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(8.5mm - 1px), #e3dcca calc(8.5mm - 1px), #e3dcca 8.5mm);
    background-attachment: local;
  }
  textarea.short { min-height: 17mm; }
  textarea.tall  { min-height: 42mm; }
  /* Tabellceller: ingen linjelinjer (for trangt), men nok høyde */
  table.grid-table td input, table.grid-table td textarea { min-height: 12mm; background-image: none; }
  table.grid-table td select { min-height: 12mm; border-bottom: 1px solid #c9c2b0 !important; }
  /* Avkrysningsbokser blir litt større og tydeligere på papir */
  .choices input, .optlist input, .levels .dot { transform: scale(1.15); }

  input, textarea, select { border-color: #c9c2b0 !important; background-color: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4; margin: 12mm 0; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 680px) {
  .grid.cols-2, .grid.cols-3, .levels { grid-template-columns: 1fr; }
  .head, .title-block, .body, .foot .foot-inner { padding-left: 22px; padding-right: 22px; }
  .callout { margin-left: 22px; margin-right: 22px; }
  .head { flex-wrap: wrap; }
  .head .docmeta { text-align: left; }
  .title-block h1 { font-size: 26px; }
}