/* ------------------------------------------------------------
   Min side for behandlere

   Samme uttrykk som headeren, footeren og forsiden: hvit bunn, mye luft,
   rolige skiller. Men dette er et arbeidsverktøy, ikke en salgsside, så
   det er ett spor nedover og ingen ting som blinker.

   To regler som gjelder hele fila:

   1. Alle farger står som tall. Ingen var() på `color`. En farge satt med
      var() som ikke lar seg løse blir ugyldig, og en ugyldig `color`
      arver – som på en mørk flate gir hvit tekst på hvit knapp. Det
      kostet tre runder på forsiden. Her gjentar vi det ikke.
   2. Klasser dobles (.bnms.bnms) der temaet har regler som kan slå oss.
      Temaets Elementor-Kit ligger på 0-2-0, og en enkel klasse taper.
      Doblingen løfter oss over uten !important.
   ------------------------------------------------------------ */

/* Bryter seg ut av temaets smale innholdsspalte. Regnestykket er
   selvkorrigerende: 50 % av egen boks minus 50 % av vindusbredden er
   nøyaktig avstanden ut til kanten, uansett hvor bred spalten er. */
.bnms.bnms{
  margin-inline: calc(50% - 50vw);
  padding-inline: 24px;
  padding-block: 40px 64px;

  /* Én sentrert spalte. Alle barna havner i den, uten at markupen
     trenger en ekstra innpakning per skjerm. minmax(0, …) fordi et
     rutenettspor ellers har min-width:auto og nekter å krympe. */
  display: grid;
  grid-template-columns: minmax(0, 1060px);
  justify-content: center;
  align-content: start;
  row-gap: 0;

  background: #fff;
  color: #4a5a52;
  font-family: var(--bnett-font-body, "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
}
.bnms *{ box-sizing: border-box; }

/* Breakouten overskyter med halve rullefeltet. clip, ikke hidden: hidden
   ødelegger position:sticky lenger opp i treet. */
body:has(.bnms){ overflow-x: clip; }

/* ---- typografi ---- */
.bnms h1,
.bnms h2,
.bnms h3{
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  color: #14241d;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.bnms h1{ margin: 0 0 10px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1.15; }
.bnms h2{ margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.bnms h3{ margin: 0 0 10px; font-size: 17px; font-weight: 700; }

.bnms .bnms__ingress{
  margin: 0 0 24px;
  max-width: 68ch;
  color: #4a5a52;
  font-size: 16.5px;
}
.bnms .bnms__undertittel{
  margin: 28px 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #5f6f67;
  font-family: inherit;
}
.bnms .bnms__note{
  margin: 14px 0 0;
  max-width: 68ch;
  color: #5f6f67;
  font-size: 14.5px;
}
.bnms .bnms__hjelp{
  margin: 6px 0 18px;
  max-width: 68ch;
  color: #5f6f67;
  font-size: 14px;
}
.bnms a{ color: #2f7048; }
.bnms .bnms__lenke{
  display: inline-block;
  padding: 4px 0;
  color: #2f7048;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}
.bnms .bnms__lenke:hover,
.bnms .bnms__lenke:focus{ color: #16352b; text-decoration: underline; }

/* ---- beskjeder ---- */
.bnms .bnms__melding{
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid #cddbd1;
  background: #f1f7f2;
  color: #16352b;
  font-size: 15.5px;
}
.bnms .bnms__melding--feil{
  border-color: #e7c9c3;
  background: #fcf3f1;
  color: #6d2a1c;
}

/* ---- kort ---- */
.bnms .bnms__kort{
  margin: 0 0 20px;
  padding: 26px 26px 28px;
  border: 1px solid #e6e8e6;
  border-radius: 16px;
  background: #fff;
}
.bnms .bnms__kort--smal{ max-width: 460px; }
.bnms .bnms__kort-topp{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}
/* margin-right:auto samler merkene til hoeyre. Uten den ville
   space-between lagt «Ikke synlig» midt i linjen, mellom navnet og
   nivaamerket. */
.bnms .bnms__kort-topp h2{ margin: 0; margin-right: auto; }

/* ---- meny ---- */
.bnms .bnms__meny{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 4px;
  margin: 0 0 28px;
  padding-bottom: 2px;
  border-bottom: 1px solid #e6e8e6;
}
.bnms .bnms__menypunkt{
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: #4a5a52;
  text-decoration: none;
  font-size: 15.5px; font-weight: 600;
}
.bnms .bnms__menypunkt:hover,
.bnms .bnms__menypunkt:focus{ color: #16352b; background: #f4f6f4; }
.bnms .bnms__menypunkt.er-aktiv{ color: #16352b; border-bottom-color: #388051; }
.bnms .bnms__menypunkt:focus-visible{ outline: 2px solid #388051; outline-offset: -2px; border-radius: 6px; }

/* Utloggingen er et skjema, ikke en lenke: den endrer noe. Men den skal
   se ut som det den er – en rolig utvei, helt til høyre. */
.bnms .bnms__meny .bnms__skjema{ margin: 0 0 0 auto; }
.bnms .bnms__loggut{
  min-height: 44px;
  padding: 0 12px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: #5f6f67;
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.bnms .bnms__loggut:hover,
.bnms .bnms__loggut:focus{ color: #16352b; background: #f4f6f4; }
.bnms .bnms__loggut:focus-visible{ outline: 2px solid #388051; outline-offset: 2px; }

/* ---- skjema ---- */
.bnms .bnms__skjema{ margin: 0; }
.bnms .bnms__etikett{
  display: block;
  margin: 18px 0 6px;
  color: #14241d;
  font-size: 14.5px; font-weight: 600;
}
.bnms .bnms__felt{
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #c9d2cc;
  border-radius: 10px;
  background: #fff;
  color: #14241d;
  font: inherit; font-size: 16px;
}
.bnms .bnms__felt::placeholder{ color: #7c8a83; }
.bnms .bnms__felt:focus{
  border-color: #388051;
  outline: 3px solid #d7e7dc;
  outline-offset: 0;
}
.bnms .bnms__felt--stor{ min-height: 180px; resize: vertical; line-height: 1.6; }
.bnms .bnms__felt--kode{
  max-width: 190px;
  font-size: 24px; font-weight: 700;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
}

.bnms .bnms__avkryss{
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  margin: 18px 0 0;
  color: #14241d;
  font-size: 15.5px;
  cursor: pointer;
}
.bnms .bnms__avkryss input{ width: 19px; height: 19px; accent-color: #388051; }

/* En bryter er en avkryssing med forklaring. Forklaringen er poenget:
   «meldinger» sier ingenting om hva som skjer når den står på. */
.bnms .bnms__bryter{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 0;
  border-top: 1px solid #eef0ee;
  cursor: pointer;
}
.bnms .bnms__bryter:first-of-type{ border-top: 0; padding-top: 4px; }
.bnms .bnms__bryter input{ width: 20px; height: 20px; margin-top: 3px; accent-color: #388051; }
.bnms .bnms__bryter span{ color: #4a5a52; font-size: 15px; }
.bnms .bnms__bryter b{ display: block; margin-bottom: 3px; color: #14241d; font-size: 16px; }

/* ---- knapper ---- */
/* Fargene står som tall på begge sider, i alle tilstander. Det var
   nettopp en :hover uten `color` som ga hvit tekst på hvit flate før. */
.bnms a.bnms__knapp,
.bnms button.bnms__knapp{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  margin-top: 22px;
  padding: 13px 24px;
  border: 1px solid #c9d2cc;
  border-radius: 999px;
  background: #fff;
  color: #16352b;
  font: inherit; font-size: 15.5px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.bnms a.bnms__knapp:hover,
.bnms a.bnms__knapp:focus,
.bnms button.bnms__knapp:hover,
.bnms button.bnms__knapp:focus{
  background: #f1f7f2;
  border-color: #388051;
  color: #16352b;
}
.bnms a.bnms__knapp--primar,
.bnms button.bnms__knapp--primar{
  border-color: #388051;
  background: #388051;
  color: #fff;
}
.bnms a.bnms__knapp--primar:hover,
.bnms a.bnms__knapp--primar:focus,
.bnms button.bnms__knapp--primar:hover,
.bnms button.bnms__knapp--primar:focus{
  background: #2f7048;
  border-color: #2f7048;
  color: #fff;
}
.bnms a.bnms__knapp:focus-visible,
.bnms button.bnms__knapp:focus-visible{ outline: 3px solid #a8cdb5; outline-offset: 2px; }

/* ---- nivåmerke ---- */
.bnms .bnms__nivaa{
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #d5ddd7;
  background: #f4f6f4;
  color: #4a5a52;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.bnms .bnms__nivaa--synlig{ border-color: #b9d7c4; background: #eef7f1; color: #1f5636; }
.bnms .bnms__nivaa--prioritert{ border-color: #388051; background: #388051; color: #fff; }

/* ---- ikke publisert ennå ----
   En behandler kommer inn på Min side selv om oppføringen er inaktiv. Da
   må det stå her hvorfor profilen ikke er å finne ute – ellers ser det ut
   som om lagringen ikke virker. Fargene er skrevet som tall, ikke som
   var(): en var() som ikke finnes, gjør at hele erklæringen faller bort,
   og for `color` betyr det arvet farge – det var slik vi fikk hvitt på
   hvitt i en tidligere runde. */
.bnms .bnms__hvilende{
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid #e3d3a6;
  border-left: 4px solid #c99a2e;
  border-radius: 10px;
  background: #fdf8ec;
  color: #4a3f22;
}
.bnms .bnms__hvilende p{
  margin: 0;
  color: #4a3f22;
  font-size: 15px;
  line-height: 1.6;
}
.bnms .bnms__hvilende p + p{ margin-top: 8px; }
.bnms .bnms__hvilende p.bnms__hvilende-tittel{ font-size: 16px; font-weight: 700; }

/* Staar inne i en h2 paa profilskjermen, saa font-size maa settes her –
   ellers arver merket overskriftens stoerrelse. */
.bnms .bnms__ikkesynlig{
  display: inline-block;
  vertical-align: middle;
  padding: 2px 9px;
  border: 1px solid #d9cba4;
  border-radius: 999px;
  background: #fbf3e2;
  color: #6b5620;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---- profilstyrke ---- */
.bnms .bnms__styrke{
  padding: 18px;
  border-radius: 12px;
  background: #f7f9f7;
}
.bnms .bnms__styrke-topp{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px;
  color: #14241d;
  font-size: 15.5px;
}
.bnms .bnms__styrke-topp b{ color: #16352b; font-variant-numeric: tabular-nums; }

.bnms .bnms__maler{
  height: 10px;
  margin: 10px 0 0;
  border-radius: 999px;
  background: #e2e8e3;
  overflow: hidden;
}
.bnms .bnms__maler > span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #388051;
}

.bnms .bnms__mangler{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.bnms .bnms__mangler li{
  position: relative;
  padding-left: 24px;
  color: #4a5a52;
  font-size: 15px;
}
.bnms .bnms__mangler li::before{
  content: "";
  position: absolute; left: 4px; top: .55em;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #c98a2e;
}
.bnms .bnms__ferdig{ margin: 12px 0 0; color: #1f5636; font-size: 15px; font-weight: 600; }

/* ---- tallene ---- */
.bnms .bnms__tall{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 170px));
  gap: 16px 24px;
  margin: 0;
}
.bnms .bnms__tall dt{
  margin: 0 0 3px;
  color: #5f6f67;
  font-size: 13.5px;
}
.bnms .bnms__tall dd{
  margin: 0;
  color: #14241d;
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bnms .bnms__forrige{
  display: block;
  margin-top: 4px;
  color: #5f6f67;
  font-family: var(--bnett-font-body, "Inter", -apple-system, system-ui, sans-serif);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0;
}

.bnms .bnms__laast{
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed #d5ddd7;
  border-radius: 12px;
  background: #f7f9f7;
  color: #4a5a52;
  font-size: 15px;
}
.bnms .bnms__laast b{ color: #16352b; }

/* ---- nivåene ---- */
.bnms .bnms__nivaaer{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 8px;
}
.bnms .bnms__nivaakort{
  display: flex; flex-direction: column;
  padding: 22px 20px 24px;
  border: 1px solid #e6e8e6;
  border-radius: 16px;
  background: #fff;
}
.bnms .bnms__nivaakort.er-aktiv{ border-color: #388051; background: #f7fbf8; }
.bnms .bnms__nivaakort h3{ margin: 0 0 6px; font-size: 19px; }

.bnms .bnms__pris{
  margin: 0;
  color: #16352b;
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bnms .bnms__pris--ukjent{ font-size: 15px; font-weight: 600; }
.bnms .bnms__pris--ukjent a{ color: #2f7048; }
.bnms .bnms__oppstart{ margin: 3px 0 0; color: #5f6f67; font-size: 13.5px; }
.bnms .bnms__nivaa-under{ margin: 10px 0 0; color: #4a5a52; font-size: 14.5px; }

.bnms .bnms__punkter{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.bnms .bnms__punkter li{
  position: relative;
  padding-left: 24px;
  color: #4a5a52;
  font-size: 14.5px;
}
/* Haken og streken er tegnet i CSS, ikke satt som tegn: et ✓ arver
   fonten og forsvinner i en fallback som ikke har det. */
.bnms .bnms__punkter li.er-med::before{
  content: "";
  position: absolute; left: 3px; top: .28em;
  width: 11px; height: 6px;
  border-left: 2px solid #388051;
  border-bottom: 2px solid #388051;
  transform: rotate(-45deg);
}
.bnms .bnms__punkter li.er-uten{ color: #6b7a73; }
.bnms .bnms__punkter li.er-uten::before{
  content: "";
  position: absolute; left: 3px; top: .62em;
  width: 11px; height: 0;
  border-top: 2px solid #aab5ae;
}

.bnms .bnms__ditt{
  margin: auto 0 0;
  padding-top: 20px;
  color: #1f5636;
  font-size: 14.5px; font-weight: 700;
}
.bnms .bnms__nivaakort .bnms__knapp{ margin-top: auto; }
.bnms .bnms__nivaakort .bnms__punkter{ margin-bottom: 20px; }

/* ---- tabell ---- */
.bnms .bnms__tabell{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.bnms .bnms__tabell th{
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #d5ddd7;
  color: #5f6f67;
  text-align: left;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.bnms .bnms__tabell td{
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid #eef0ee;
  color: #14241d;
}
.bnms .bnms__tabell td:nth-child(3){ font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Smalere skjermer
   ------------------------------------------------------------ */
@media (max-width: 900px){
  .bnms .bnms__nivaaer{ grid-template-columns: minmax(0, 1fr); }
  .bnms .bnms__nivaakort .bnms__knapp{ width: 100%; }
}
@media (max-width: 620px){
  .bnms.bnms{ padding-inline: 16px; padding-block: 28px 48px; }
  .bnms .bnms__kort{ padding: 20px 18px 22px; border-radius: 14px; }
  .bnms .bnms__meny{ gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .bnms .bnms__meny .bnms__skjema{ margin-left: 8px; }
  .bnms .bnms__menypunkt{ padding: 0 11px; white-space: nowrap; }
  .bnms .bnms__tall{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bnms button.bnms__knapp--primar{ width: 100%; }
  /* Tabellen er det ene som får rulle for seg selv. Alternativet er at
     hele siden ruller sidelengs, og det er verre. */
  .bnms .bnms__tabell{ display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce){
  .bnms a.bnms__knapp,
  .bnms button.bnms__knapp{ transition: none; }
}

/* Kjennetegnene er tre felt på rad. Etiketten er der for skjermleseren,
   ikke for øyet – tre «Kjennetegn 1/2/3» over hverandre er støy når
   plassholderen sier det samme. */
.bnms .bnms__etikett--skjult{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bnms .bnms__felt--usp{ margin-top: 8px; }

/* En inline-lenke i en note-linje var 16px høy. Det er ikke en
   klikkflate. Samme feil som e-postlenken i footeren hadde. */
.bnms .bnms__note a,
.bnms .bnms__laast a{ display: inline-block; padding: 4px 0; }

/* Prisfeltet er flerlinjet, men kortere enn «om deg» – en prisliste er
   fire-fem linjer, ikke en side. */
.bnms .bnms__felt--pris{ min-height: 104px; resize: vertical; line-height: 1.6; }