@charset "UTF-8";
/* =============================================================================
   Øre Regnskap — stilark
   -----------------------------------------------------------------------------
   Samme formspråk som rødstrupe.no: blanke knapper, hårfine skillelinjer og
   tekst preget ned med en hvit skygge. Håndskrevet, i én fil.

     01  Grunnlag          06  Tabeller
     02  Typografi         07  Skjema
     03  Rammeverk         08  Nøkkeltall og kort
     04  Sidestolpen       09  Meldinger og dialoger
     05  Knapper           10  Pålogging og små skjermer
   ========================================================================== */

/* == 01  Grunnlag ========================================================== */

:root {
  --oransje:      #f25d00;
  --oransje-dyp:  #bf3d00;
  --oransje-lys:  #ff8a00;
  --glod:         #ffb52f;
  --bla:          #138bd2;
  --bla-dyp:      #0a447a;
  --bla-mid:      #0d5f9f;

  --natt:         #16202b;
  --natt-myk:     #24313f;
  --dis:          #f3f4f6;   /* lys, kjølig flate — de hvite kortene ligger oppå den */
  --papir:        #ffffff;

  --blekk:        #2c3440;
  --blekk-myk:    #5f6b78;
  --blekk-svak:   #7c8590;   /* var brukt 13 steder uten å være definert — tekst arvet da full styrke */
  --strek:        #d0d5dd;
  --strek-svak:   #e4e7ec;
  --strek-mork:   #b9c0c9;

  --gronn:        #1f6b43;
  --rod:          #b3261e;

  --aksent:       #31679b;
  --aksent-lys:   #5a91c5;
  --aksent-dyp:   #24517f;
  --aksent-flate: #eaf1f8;

  /* De to flate grå-flatene alt kromet er bygget av — se DESIGNPLAN.md. */
  --krom:         #f9fafb;   /* dialogfot, tabellhoder, mobilmeny */
  --kontroll-flate: #f3f4f6; /* segment, sekundære flater */

  /* Serif bare der siden «snakker»: sidetitler og nøkkeltall. Grensesnittet
     (knapper, felt, tabeller) er sans. Systemfonter — ingen nedlasting. */
  --skrift-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                    Georgia, "Times New Roman", serif;

  /* Én skala. Alt annet er et avvik som må kunne begrunnes. */
  --t-mikro:   11px;
  --t-liten:   12px;
  --t-basis:   14px;
  --t-mid:     16px;
  --t-tittel:  18px;
  --t-stor:    20px;
  --sperr:     .08em;   /* felles tracking for versal-mikroetiketter */

  --preg:         none;   /* preget tekst-skygge er slått av — se DESIGNPLAN.md */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    18px;   /* dialoger og innloggingskortet */
  --stolpe:       236px;

  /* Kontrollhøyde. Ett tall for knapper og felt, så de står på linje. */
  --kontroll:       34px;
  --kontroll-stor:  38px;
  --kort-innsats:   16px;
  --stolpe-innsats: 18px;   /* felles venstrekant i sidestolpen */

  /* Kortkant erstattet av skygge, ikke av en synlig CSS-border — målt mot
     Fiken/Conta/Tripletex sine faktiske stilark, se DESIGNPLAN.md. */
  --kortskygge: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--dis);
  color: var(--blekk);
  font: 400 14px/21px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; border: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; border-radius: 2px; }

.hopp-lenke { position: fixed; z-index: 200; top: -80px; left: 16px; padding: 10px 16px; background: white; border: 2px solid #31679b; }
.hopp-lenke:focus { top: 8px; }

/* == 01  Offentlig forside =================================================
   Forsiden bruker samme farger som appen, men har sitt eget avgrensede
   namespace. Det gjør at landingssiden kan være romslig uten å påvirke
   dashboardet som ligger i samme HTML-dokument bak [hidden]. */

.hjem {
  position: relative; z-index: 0; min-height: 100vh; overflow-x: clip;
  isolation: isolate;
  --hjem-max-bredde: 1200px;
  --hjem-gutter: clamp(24px, 3vw, 40px);
  --hjem-sidekant: max(var(--hjem-gutter), calc((100% - var(--hjem-max-bredde)) / 2 + var(--hjem-gutter)));
  --hjem-luft: clamp(52px, 5vw, 68px);
  background: #fff; color: var(--blekk);
}
.hjem-nav, .hjem > main, .hjem-fot { position: relative; z-index: 1; }
.hjem a, .hjem button { position: relative; z-index: 2; pointer-events: auto; }
.hjem-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  width: 100%; max-width: none;
  min-height: 72px; margin: 0;
  padding: 12px var(--hjem-sidekant);
  border-bottom: 1px solid #e8edf2; background: #fff;
}
.hjem-nav-hoyre {
  display: flex; align-items: center; justify-content: flex-end;
  flex: none; width: max-content; min-width: 0; margin-left: auto;
  gap: clamp(8px, 1vw, 12px);
}
.hjem-nav-hoyre > nav { display: flex; align-items: center; flex: none; margin: 0; }
.hjem-nav-hoyre > nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--blekk-myk); font-size: 14px; font-weight: 600;
  white-space: nowrap; text-decoration: none; transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.hjem-nav-hoyre > nav a.hjem-kontakt-lenke { padding-inline: 11px; }
.hjem-nav-hoyre > nav a:hover,
.hjem-nav-hoyre > nav a[aria-current="page"] { border-color: #cdd8e3; color: var(--aksent-dyp); background: #f6f8fa; text-decoration: none; }
.hjem-nav-hoyre > nav a:focus-visible { outline-offset: 1px; }
.hjem-merke {
  display: inline-flex; align-items: center; flex: none; gap: 10px; color: var(--natt);
  text-decoration: none; font-size: 20px; font-weight: 650; letter-spacing: -.025em;
}
.hjem-merke:hover { text-decoration: none; }
.hjem-merke img { width: 36px; height: 36px; filter: drop-shadow(0 2px 3px rgba(22,32,43,.14)); }
.hjem-merke small {
  display: block; margin-top: 1px; color: var(--aksent-dyp);
  font-size: 9px; font-weight: 700; letter-spacing: .15em; line-height: 1.15; text-transform: uppercase;
}
.hjem-nav-handlinger { display: flex; align-items: center; flex: none; white-space: nowrap; }
.hjem .hjem-dashboard-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: max-content; min-width: 0; min-height: 44px; height: 44px;
  padding: 0 18px; color: #fff;
  border: 1px solid var(--aksent-dyp); border-radius: 10px; font-size: 14px; font-weight: 650;
  line-height: 1.2; background: var(--aksent-dyp); box-shadow: 0 1px 2px rgba(22,32,43,.12);
  transition: background .16s ease, border-color .16s ease;
}
.hjem .hjem-dashboard-knapp:hover {
  color: #fff; border-color: var(--aksent); background: var(--aksent);
  text-decoration: none;
}
.hjem .hjem-dashboard-knapp:active { background: var(--aksent-dyp); }
.hjem .hjem-dashboard-knapp:focus-visible { outline-offset: 3px; }
.hjem-dashboard-tekst { line-height: 1; white-space: nowrap; }
.hjem-tekstknapp {
  min-height: var(--kontroll); padding: 0 10px; border: 0; background: transparent;
  color: var(--blekk-myk); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.hjem-tekstknapp:hover { color: var(--aksent-dyp); text-decoration: none; }
.hjem-tekstknapp-stor { padding: 0; color: var(--aksent-dyp); }
.hjem-tekstknapp span { margin-left: 6px; font-size: 17px; vertical-align: -1px; }

.hjem-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: clamp(28px, 4vw, 44px);
  max-width: var(--hjem-max-bredde); margin: 0 auto;
  padding: clamp(54px, 6vw, 76px) var(--hjem-gutter);
}
.hjem-hero-tekst { min-width: 0; }
.hjem-merkeord {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  color: var(--aksent-dyp); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.hjem-merkeord::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--oransje);
}
.hjem h1 {
  max-width: 520px; margin: 0 0 16px; color: var(--natt);
  font-family: inherit; font-size: clamp(40px, 4.5vw, 58px);
  font-weight: 650; letter-spacing: -.045em; line-height: 1.06;
}
.hjem h1 em { color: var(--aksent-dyp); font-style: italic; }
.hjem-ingress {
  max-width: 480px; margin: 0 0 21px; color: var(--blekk-myk);
  font-size: 16px; line-height: 1.55;
}
.hjem-hero-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hjem-hero-pris { color: var(--blekk-myk); font-size: 14px; }
.hjem-hero-pris strong { color: var(--natt); font-weight: 700; }
.hjem .hjem-hero .knapp-stor {
  min-height: 46px; height: auto; padding-inline: 22px; border-radius: 9px;
  font-size: 15px; font-weight: 650;
}
.hjem-lovnader {
  display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 30px 0 0; padding: 0;
  list-style: none; color: var(--blekk-myk); font-size: 12.5px;
}
.hjem-lovnader li { display: inline-flex; align-items: center; gap: 7px; }
.hjem-lovnader li span {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; color: #fff; background: var(--gronn); font-size: 11px; font-weight: 700;
}

.portal-vilkar { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--blekk-myk); }
.portal-vilkar input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; }

body[data-reserve]::before {
  content: 'Reservedrift: Øre viser en kopi og kan bare leses akkurat nå.';
  position: sticky; top: 0; z-index: 1000; display: block;
  padding: 6px 12px; color: #fff; background: #b45309;
  font-size: 13px; font-weight: 600; text-align: center;
}

.hjem-preview {
  min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid #e2e7ed; border-radius: 16px; background: #fff;
  box-shadow: 0 20px 52px rgba(22,32,43,.10), 0 2px 8px rgba(22,32,43,.04);
}
.hjem-preview-bilde {
  display: block; width: 100%; height: auto; aspect-ratio: 32 / 25;
  background: var(--dis); user-select: none; pointer-events: none;
}
.hjem-preview figcaption {
  padding: 10px 16px; border-top: 1px solid var(--strek-svak);
  color: var(--blekk-myk); background: #fff; font-size: 13px; line-height: 1.45;
}

.hjem-seksjon {
  width: 100%; max-width: none; margin: 0;
  padding: var(--hjem-luft) var(--hjem-sidekant);
}
.hjem-seksjon-intro { max-width: 620px; }
.hjem h2 { color: var(--natt); font-family: inherit; font-size: clamp(28px, 3vw, 38px); font-weight: 650; letter-spacing: -.035em; line-height: 1.12; }
.hjem-priser .hjem-seksjon-intro h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); }
.hjem-seksjon-intro p { max-width: 580px; margin: 10px 0 0; color: var(--blekk-myk); font-size: 16px; line-height: 1.6; }
.hjem-priser { border-top: 0; background: #fff; }
.pris-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.pris-kort { position: relative; display: flex; flex-direction: column; padding: 24px; min-height: 184px; border: 1px solid #e2e7ed; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(22,32,43,.035); }
.pris-kort-anbefalt { border-color: #91abc4; box-shadow: 0 8px 24px rgba(49,103,155,.09); }
.pris-navn { color: var(--natt); font-size: 20px; font-weight: 650; }
.pris-kort p { margin: 4px 0 14px; color: var(--blekk-myk); font-size: 14px; }
.pris-belop { display: block; margin-bottom: 8px; color: var(--natt); font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.pris-belop small { color: var(--blekk-svak); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.pris-velg { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; margin-top: auto; color: var(--aksent-dyp); font-size: 14px; font-weight: 650; text-decoration: none; }
.pris-velg:hover { color: var(--aksent); text-decoration: underline; text-underline-offset: 3px; }
.pris-velg:focus-visible { outline-offset: 2px; }
.hjem-prisfot { margin-top: 9px; line-height: 1.4; }
.hjem-bytte {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  width: 100%; max-width: var(--hjem-max-bredde);
  margin: 0 auto var(--hjem-luft);
  padding: clamp(26px, 3vw, 36px) var(--hjem-gutter);
  border: 1px solid #e1e8f0; border-radius: 18px; background: #f4f7fa;
}
.hjem-bytte > div { max-width: 780px; }
.hjem-bytte h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); }
.hjem-bytte p { max-width: 68ch; margin: 0; color: var(--blekk-myk); font-size: 16px; line-height: 1.6; }
.hjem-rabatt {
  display: inline-flex; align-items: center; min-height: 27px; margin-top: 10px; padding: 3px 10px;
  border: 1px solid #d5e2ef; border-radius: 999px; color: var(--aksent-dyp);
  background: #fff; font-size: 12px; font-weight: 650;
}
.hjem-bytte > .knapp { flex: none; min-width: 172px; min-height: 46px; height: auto; font-size: 14px; }
.hjem-fot { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; width: 100%; max-width: none; margin: 0; padding: 28px var(--hjem-sidekant) 36px; border-top: 1px solid var(--strek-svak); color: var(--blekk-svak); font-size: 13px; line-height: 1.65; }
.hjem-fot a { color: var(--blekk-myk); }
.hjem-fot-virksomhet { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 18px; width: 100%; }
.hjem-juridisk { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; padding-top: 11px; border-top: 1px solid var(--strek-svak); }
.hjem-juridisk a { font-size: 13px; }
.hjem-produkt { border-block: 1px solid #e8edf2; background: #f6f8fa; }
.hjem-produkt .hjem-seksjon-intro { margin-bottom: 22px; }
.hjem-produkt .hjem-seksjon-intro h2 { margin: 4px 0 0; font-size: clamp(26px, 2.8vw, 34px); }
.produkt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hjem-produkt .produkt-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: auto auto; }
.produkt-kort {
  display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid #e2e7ed; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(22,32,43,.035);
}
.produkt-kort img {
  display: block; width: 100%; height: auto; flex: none;
  object-fit: cover; object-position: 50% 0; background: var(--dis);
  border-bottom: 1px solid var(--strek-svak); user-select: none; pointer-events: none;
}
.produkt-kort-mobil { grid-row: span 2; }
.produkt-kort-mobil img { flex: 1 1 0; min-height: 280px; contain: size; padding: 18px 18px 0; }
.produkt-kort figcaption { padding: 14px 18px 16px; }
.produkt-kort h3 { margin: 0 0 3px; color: var(--natt); font-size: 16px; font-weight: 650; }
.produkt-kort p { margin: 0; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }

/* Funksjonsrutenett: ikon, navn, én linje. */
.funksjon-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 24px 0 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid #e2e7ed; border-radius: 14px; background: #e2e7ed;
}
.funksjon { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 20px 20px 22px; background: #fff; }
.funksjon svg {
  width: 26px; height: 26px; margin-bottom: 8px; fill: none; stroke: var(--aksent-dyp);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.funksjon strong { color: var(--natt); font-size: 15px; font-weight: 650; line-height: 1.3; }
.funksjon span { color: var(--blekk-myk); font-size: 13.5px; line-height: 1.45; }

/* Prissammenligning som stolper. Andelen settes per rad i HTML. */
.pris-sammenligning { margin: 36px 0 0; padding: 22px 24px 24px; border: 1px solid #e2e7ed; border-radius: 14px; background: #f6f8fa; }
.pris-sammenligning figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.pris-sammenligning h3 { margin: 0; color: var(--natt); font-size: 18px; font-weight: 650; }
.pris-sammenligning figcaption span { color: var(--blekk-svak); font-size: 13px; }
.pris-stolper { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pris-stolpe { display: grid; grid-template-columns: 84px minmax(0, 1fr) 88px; align-items: center; gap: 12px; font-size: 14px; }
.pris-stolpe > span { color: var(--blekk-myk); font-weight: 600; }
.pris-stolpe > i {
  display: block; width: calc(var(--andel) * 100%); height: 12px; border-radius: 6px;
  background: #c3ccd6; transform-origin: left center;
}
.pris-stolpe > strong { color: var(--blekk-myk); font-weight: 600; text-align: right; white-space: nowrap; }
.pris-stolpe-ore > span, .pris-stolpe-ore > strong { color: var(--natt); font-weight: 700; }
.pris-stolpe-ore > i { background: var(--oransje); }

/* Bytte til og fra. */
.hjem-flytt {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px 48px;
  border-top: 1px solid #e8edf2;
}
.hjem-flytt h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); }
.hjem-flytt-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hjem-flytt-liste li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid #e2e7ed; border-radius: 12px; background: #fff; }
.hjem-flytt-liste strong { color: var(--aksent-dyp); font-size: 15px; font-weight: 700; }
.hjem-flytt-liste span { color: var(--blekk-myk); font-size: 13.5px; line-height: 1.45; }

/* Spørsmål og svar. */
.hjem-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 48px; padding-top: 0; }
.hjem-faq h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); }
.hjem-faq-liste { border-top: 1px solid var(--strek-svak); }
.hjem-faq details { border-bottom: 1px solid var(--strek-svak); }
.hjem-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none;
  color: var(--natt); font-size: 16px; font-weight: 600; line-height: 1.35;
}
.hjem-faq summary::-webkit-details-marker { display: none; }
.hjem-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--strek); border-radius: 50%; color: var(--aksent-dyp); font-size: 17px; font-weight: 500;
  transition: transform .2s ease;
}
.hjem-faq details[open] summary::after { transform: rotate(45deg); }
.hjem-faq summary:hover { color: var(--aksent-dyp); }
.hjem-faq details p { max-width: 62ch; margin: -2px 0 16px; color: var(--blekk-myk); font-size: 15px; line-height: 1.6; }
.hjem-faq details a { color: var(--aksent-dyp); text-underline-offset: 3px; }

/* Siste oppfordring. */
.hjem-avslutning {
  display: grid; justify-items: center; gap: 6px; margin: 0; padding: clamp(48px, 6vw, 72px) var(--hjem-gutter);
  background: var(--natt); color: #fff; text-align: center;
}
.hjem .hjem-avslutning h2 { margin: 0; color: #fff; }
.hjem-avslutning p { margin: 0 0 14px; color: #b9c4d0; font-size: 15px; }
.hjem .hjem-avslutning .knapp-stor { min-height: 46px; height: auto; padding-inline: 24px; border-color: #fff; color: var(--natt); background: #fff; font-weight: 650; }
.hjem .hjem-avslutning .knapp-stor:hover { background: #eaf1f8; }

/* Rolige animasjoner: toppen glir inn ved lasting, resten når det kommer til syne
   (bare i nettlesere med scroll-drevne animasjoner). */
@keyframes hjem-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hjem-stolpe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hjem-hero-tekst > *, .hjem-preview { animation: hjem-inn .6s cubic-bezier(.2,.7,.2,1) both; }
.hjem-hero-tekst > :nth-child(2) { animation-delay: .06s; }
.hjem-hero-tekst > :nth-child(3) { animation-delay: .12s; }
.hjem-hero-tekst > :nth-child(4) { animation-delay: .18s; }
.hjem-hero-tekst > :nth-child(5) { animation-delay: .24s; }
.hjem-preview { animation-duration: .8s; animation-delay: .22s; }
@supports (animation-timeline: view()) {
  .hjem-vis { animation: hjem-inn linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .pris-stolpe > i { animation: hjem-stolpe linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .hjem-hero-tekst > *, .hjem-preview, .hjem-vis, .pris-stolpe > i { animation: none !important; }
}
.hjem-fot { background: #f6f8fa; }
.info-innhold { max-width: 900px; margin: 0 auto; padding: clamp(42px, 6vw, 68px) var(--hjem-gutter) clamp(56px, 8vw, 88px); }
.passord-innhold { display: grid; place-items: center; max-width: 760px; min-height: 520px; }
.passord-kort { width: 100%; max-width: 540px; margin: 0; padding: clamp(22px, 4vw, 36px); }
.passord-kort h1 { margin-bottom: 10px; }
.passord-kort .info-ingress { margin-bottom: 22px; font-size: 15px; }
.passord-skjema { display: grid; gap: 15px; }
.passord-skjema .felt { margin: 0; }
.passord-skjema button { justify-self: start; min-width: 170px; min-height: 44px; }
.passord-status { min-height: 21px; margin: 0; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.passord-status-ok { color: var(--gronn); }
.passord-status-feil { color: var(--rod); }
.passord-innlogging { color: var(--aksent-dyp); font-size: 14px; font-weight: 650; }
.passord-tilbake { margin: 23px 0 0; padding-top: 16px; border-top: 1px solid var(--strek-svak); font-size: 14px; }
.passord-tilbake a { color: var(--aksent-dyp); font-weight: 600; text-underline-offset: 3px; }
.kontakt-innhold {
  display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  align-items: start; gap: clamp(24px, 3.5vw, 40px) clamp(28px, 4vw, 52px); max-width: var(--hjem-max-bredde);
  padding-block: clamp(38px, 4.5vw, 58px) clamp(52px, 6vw, 76px);
}
.kontakt-intro { align-self: start; padding-top: 8px; }
.kontakt-intro > .hjem-merkeord { margin: 8px 0 12px; }
.info-innhold h1 { max-width: 780px; margin: 0 0 12px; font-size: clamp(36px, 5vw, 54px); }
.info-innhold h2 { margin: 34px 0 10px; font-size: clamp(22px, 3vw, 28px); }
.info-innhold h3 { margin: 23px 0 7px; color: var(--natt); font-size: 17px; }
.info-innhold p, .info-innhold li { max-width: 760px; color: var(--blekk-myk); font-size: 15px; line-height: 1.7; }
.info-innhold li + li { margin-top: 6px; }
.info-innhold a { color: var(--aksent-dyp); text-underline-offset: 3px; }
.info-ingress { max-width: 720px; margin: 0 0 25px; color: var(--blekk-myk); font-size: 17px; line-height: 1.6; }
.info-status { margin: 20px 0 28px; padding: 15px 17px; border: 1px solid #e4c77c; border-radius: 10px; color: #59420d; background: #fff9e8; font-size: 14px; line-height: 1.6; }
.info-status strong { display: block; margin-bottom: 3px; color: #493707; }
.info-kort { margin: 18px 0; padding: 17px 19px; border: 1px solid var(--strek-svak); border-radius: 12px; background: #fff; box-shadow: var(--kortskygge); }
.info-kort p:last-child { margin-bottom: 0; }
.kontakt-kort { grid-column: 2; grid-row: 1; width: 100%; max-width: none; margin: 0; padding: clamp(24px, 3vw, 32px); border-color: #e1e7ee; border-radius: 14px; box-shadow: 0 8px 24px rgba(22,32,43,.055); }
.kontakt-skjema { display: grid; gap: 16px; }
.kontakt-skjema .felt { margin: 0; }
.kontakt-skjema input, .kontakt-skjema textarea { width: 100%; }
.kontakt-skjema textarea { min-height: 168px; padding: 10px 12px; }
.kontakt-felle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-merknad { margin: -4px 0 0; font-size: 13px !important; line-height: 1.5 !important; }
.kontakt-status { min-height: 20px; color: var(--blekk-myk); font-size: 14px; }
.kontakt-status-ok { color: var(--gronn); }
.kontakt-status-feil { color: var(--rod); }
.kontakt-skjema button { justify-self: start; min-width: 176px; min-height: 42px; border-radius: 9px; }
.kontakt-alternativ { margin: 22px 0 0; font-size: 14px !important; }
.info-tabell { width: 100%; margin: 16px 0 25px; border-collapse: collapse; background: #fff; font-size: 13px; }
.info-tabell th, .info-tabell td { padding: 10px 12px; border: 1px solid var(--strek-svak); text-align: left; vertical-align: top; line-height: 1.55; }
.info-tabell th { color: var(--natt); background: #f7f8fa; }
.info-kilde { font-size: 13px !important; }
.info-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0; }
.info-tilbake { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--strek-svak); }
.kontakt-innhold .info-tilbake { margin-top: 24px; padding-top: 0; border-top: 0; }
.info-tilbake a { font-weight: 600; }
.juridisk-merking { display: inline-flex; margin: 0 0 12px; padding: 5px 9px; border-radius: 999px; color: #725610; background: #fff4ce; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 900px) {
  .hjem-hero { grid-template-columns: 1fr; max-width: var(--hjem-max-bredde); }
  .hjem-hero-tekst { max-width: 650px; }
  .funksjon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hjem-flytt, .hjem-faq { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pris-grid, .produkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .kontakt-innhold { display: block; }
  .kontakt-intro { max-width: 680px; }
  .kontakt-kort { margin: 24px 0 0; }
}
@media (max-width: 700px) {
  .hjem { --hjem-luft: 38px; }
  .hjem-nav { min-height: 64px; padding: 9px var(--hjem-gutter); gap: 10px; }
  .hjem-nav-hoyre { gap: 8px; }
  .hjem-nav-hoyre > nav a { min-height: 42px; padding-inline: 9px; font-size: 13px; }
  .hjem .hjem-dashboard-knapp { min-width: 0; min-height: 42px; height: 42px; padding-inline: 14px; font-size: 13px; }
  .hjem-hero, .hjem-seksjon, .hjem-fot { padding-inline: var(--hjem-gutter); }
  .info-innhold { padding: 36px var(--hjem-gutter) 52px; }
  .passord-innhold { min-height: 0; padding-block: 36px 48px; }
  .info-tabell { display: block; overflow-x: auto; }
  .hjem-hero { padding-block: var(--hjem-luft); }
  .hjem h1 { font-size: clamp(39px, 11vw, 58px); }
  .hjem-ingress { font-size: 15px; }
  .pris-grid, .produkt-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .pris-kort:last-child, .produkt-kort:last-child { grid-column: auto; width: auto; }
  .hjem-produkt .produkt-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .produkt-kort-mobil { grid-row: auto; }
  .produkt-kort-mobil img { flex: none; min-height: 0; contain: none; aspect-ratio: 4 / 3; }
  .funksjon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .funksjon { padding: 16px 14px 18px; }
  .hjem-flytt-liste { grid-template-columns: 1fr; gap: 8px; }
  .pris-sammenligning { padding: 18px 16px 20px; }
  .pris-stolpe { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; font-size: 13px; }
  .kontakt-kort { margin: 20px 0 0; padding: 20px; }
  .passord-skjema button { width: 100%; }
  .kontakt-alternativ { margin-top: 22px; }
  .hjem-bytte { align-items: stretch; flex-direction: column; gap: 16px; margin: 0 auto var(--hjem-luft); padding: 20px var(--hjem-gutter); }
  .hjem-bytte > .knapp { width: 100%; }
  .hjem-fot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .hjem { --hjem-gutter: 16px; }
  .hjem-nav { min-height: 60px; padding: 8px var(--hjem-gutter); gap: 7px; }
  .hjem-merke { gap: 7px; font-size: 18px; }
  .hjem-merke img { width: 32px; height: 32px; }
  .hjem-nav-hoyre { gap: 6px; }
  .hjem-nav-hoyre > nav a { min-height: 40px; padding-inline: 7px; font-size: 12px; }
  .hjem .hjem-dashboard-knapp { min-height: 42px; height: 42px; padding-inline: 11px; font-size: 13px; }
  .hjem-preview-bilde { aspect-ratio: 1 / 1; object-fit: cover; object-position: 26% 0; }
}
@media (max-width: 360px) {
  .hjem { --hjem-gutter: 12px; }
  .hjem-nav { gap: 4px; }
  .hjem-merke { gap: 5px; font-size: 17px; }
  .hjem-merke img { width: 29px; height: 29px; }
  .hjem-nav-hoyre { gap: 5px; }
  .hjem-nav-hoyre > nav a { min-height: 38px; padding-inline: 7px; font-size: 12px; }
  .hjem .hjem-dashboard-knapp { padding-inline: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* == 02  Typografi ========================================================= */

h1, h2, h3, h4 {
  margin: 0 0 8px; color: var(--natt);
  font-weight: 600; line-height: 1.25; letter-spacing: -0.012em;
  text-shadow: var(--preg);
}
h1 { font-size: 28px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: #215e91; text-decoration: none; }
a:hover { text-decoration: underline; }

.svak   { color: var(--blekk-svak); }
.ingenting { color: var(--blekk-svak); opacity: .62; }
/* «Ingenting her» inne i en tabell. Én form, med luft nok til at raden ikke
   ser ut som en rad som mangler innhold. */
.tomrad {
  display: block; padding: 22px 0; text-align: center;
  color: var(--blekk-svak); font-size: 13px;
}
.myk    { color: var(--blekk-myk); }
.liten  { font-size: 13px; }
.tall   { font-variant-numeric: tabular-nums; }
.hoyre  { text-align: right; }
.positiv { color: var(--gronn); }
.negativ { color: var(--rod); }

.stikkord {
  display: block; margin-bottom: 6px;
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: var(--sperr);
  text-transform: uppercase; color: var(--blekk-svak);
}


/* == 03  Rammeverk ========================================================= */

.skall { display: flex; min-height: 100vh; }

.hoved { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--dis); }

.topplinje {
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px; min-height: 56px;
  background: var(--papir);
  border-bottom: 1px solid var(--strek-svak);
  font-size: 13px; color: var(--blekk-myk);
}
/* Brødsmulen i topplinjen og H1 rett under er søsken, ikke i samme spalte.
   Uten dette står de på hver sin venstrekant, og avviket vokser med bredden.
   Bare over mobilbruddpunktet: under det er begge på 16px allerede. */
@media (min-width: 861px) {
  .topplinje { padding-inline: max(32px, calc((100% - 1500px) / 2 + 32px)); }
  .stolpe { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.topplinje strong { color: var(--natt); }
/* Roten i smulestien er bedriften, altså et sted man faktisk kan gå. */
.smulerot {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 3px 8px; margin-left: -8px; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--blekk-myk); text-shadow: var(--preg);
}
.smulerot:hover { background: rgba(255,255,255,.7); border-color: var(--strek-svak); color: var(--natt); }
.smulerot > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.topplinje .fyll { flex: 1 1 auto; }

/* Globalt søk i topplinjen. Trefflisten ER resultatet — ingen egen søkeside. */
.sok { position: relative; flex: 1 1 auto; max-width: 460px; margin: 0 auto; }
.sok > .ikon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--blekk-svak); pointer-events: none;
}
/* (0,2,1) — må slå basisregelen `input[type="search"]` i seksjon 07. */
.topplinje .sok input {
  width: 100%; height: 32px; padding: 0 46px 0 32px;
  border: 1px solid var(--strek-svak); border-radius: var(--radius-sm);
  background: var(--papir); color: var(--blekk);
  font: inherit; font-size: 13px; -webkit-appearance: none; appearance: none;
}
.sok input::placeholder { color: var(--blekk-svak); }
.sok input:focus { outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px rgba(49, 103, 155, .15); }
.sok input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sok-snarvei {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 1px 6px; border: 1px solid var(--strek-svak); border-radius: 4px;
  background: var(--kontroll-flate); color: var(--blekk-svak);
  font: inherit; font-size: 11px; pointer-events: none;
}
.sok-treff {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  max-height: min(70vh, 520px); overflow-y: auto; padding: 6px 0;
  background: var(--papir); border-radius: var(--radius);
  box-shadow: var(--kortskygge), 0 18px 40px rgba(22, 32, 43, .16);
}
.sok-gruppe {
  padding: 8px 14px 4px;
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: var(--sperr);
  text-transform: uppercase; color: var(--blekk-svak);
}
.sok-rad {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--blekk);
}
.sok-rad:hover, .sok-rad.pa { background: var(--aksent-flate); }
.sok-rad .kode { flex: none; min-width: 42px; font-variant-numeric: tabular-nums; color: var(--blekk-myk); }
.sok-rad .fyll { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sok-rad .svak { flex: none; font-size: 13px; }
.sok-tom { padding: 16px 14px; font-size: 13px; color: var(--blekk-svak); text-align: center; }
/* På telefon er søket bare lupen til det får fokus — da tar det hele linjen. */
@media (max-width: 860px) {
  .topplinje { position: relative; }
  .topplinje .sok { flex: 0 0 38px; max-width: none; margin: 0 0 0 auto; }
  .topplinje .sok input { padding: 0 0 0 38px; color: transparent; }
  .topplinje .sok input::placeholder { color: transparent; }
  .topplinje .sok:focus-within {
    position: absolute; z-index: 5; left: 12px; right: 12px; top: 50%;
    transform: translateY(-50%); flex: none;
  }
  .topplinje .sok:focus-within input { padding: 0 12px 0 32px; color: var(--blekk); }
  .topplinje .sok:focus-within input::placeholder { color: var(--blekk-svak); }
  .sok-snarvei, .topplinje > .merke { display: none; }
}

.innhold { flex: 1 1 auto; padding: 30px 32px 60px; max-width: 1500px; width: 100%; margin: 0 auto; }
.midt { max-width: 1020px; }

.sidehode {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.sidehode > div:first-child { flex: 1 1 320px; }
.sidehode p { margin: 0; color: var(--blekk-myk); }
/* Merkefargen som en tynn tråd: en kort oransje strek over hver sidetittel. */
.sidehode h1::before {
  content: ""; display: block; width: 34px; height: 3px; margin-bottom: 12px;
  border-radius: 2px; background: var(--oransje);
}

/* Faner rett under sidehodet: sidens undersider. Valgt fane har den oransje
   understreken — samme tråd som markøren i sidestolpen. */
.sidefaner {
  display: flex; gap: 2px; margin: -6px 0 18px;
  border-bottom: 1px solid var(--strek-svak); overflow-x: auto;
}
.sidefaner button {
  padding: 8px 12px 9px; margin-bottom: -1px; white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--blekk-myk); font: inherit; font-size: 14px; font-weight: 500;
}
.sidefaner button:hover { color: var(--natt); }
.sidefaner button.pa { color: var(--natt); font-weight: 600; border-bottom-color: var(--oransje); }

.rad { display: flex; gap: 20px; flex-wrap: wrap; }
.rad > * { flex: 1 1 280px; min-width: 0; }

.panel {
  background: var(--papir);
  border: 1px solid var(--strek-svak);
  border-radius: var(--radius);
  box-shadow: var(--kortskygge);
  margin-bottom: 20px;
}
.panel-hode {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--kort-innsats) 12px;
  border-bottom: 1px solid var(--strek-svak);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-hode h2, .panel-hode h3 { margin: 0; }
.panel-hode h2 { font-size: 15px; color: var(--natt); }
.panel-hode h3 { font-size: 15px; }
.panel-hode .fyll { flex: 1 1 auto; }
.panel-kropp { padding: 18px var(--kort-innsats); }
.liste { list-style: none; margin: 0; padding: 0 var(--kort-innsats); }
.liste-rad { display: flex; align-items: center; gap: 14px; min-height: 50px; border-bottom: 1px solid var(--strek); }
.liste-rad:last-child { border-bottom: 0; }
.liste-rad .knapp { flex: 0 0 auto; }
/* En tabell inne i panel-kroppen arver kroppens innsats. Uten dette legger
   cellens egen innsats seg oppå, og kolonnen starter et annet sted enn
   tittelen over den. */
.panel-kropp > table.data th, .panel-kropp > table.data td,
.panel-kropp > .tabellramme > table.data th, .panel-kropp > .tabellramme > table.data td { padding-inline: 0; }
.panel-kropp > table.data th:not(:first-child), .panel-kropp > table.data td:not(:first-child),
.panel-kropp > .tabellramme > table.data th:not(:first-child),
.panel-kropp > .tabellramme > table.data td:not(:first-child) { padding-left: var(--kort-innsats); }
.panel-fot {
  padding: 11px var(--kort-innsats); font-size: 13px; color: var(--blekk-myk);
  border-top: 1px solid var(--strek-svak);
  border-radius: 0 0 var(--radius) var(--radius);
}

.merke {
  display: inline-block; padding: 2px 9px 3px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 999px; text-shadow: none; white-space: nowrap;
  color: var(--oransje-dyp); background: rgba(242, 93, 0, 0.09);
  border: 1px solid rgba(242, 93, 0, 0.26);
}
.merke-bla  { color: var(--bla-dyp); background: rgba(13,95,159,.09); border-color: rgba(13,95,159,.26); }
.merke-gronn{ color: var(--gronn);   background: rgba(31,107,67,.09); border-color: rgba(31,107,67,.26); }
.merke-graa { color: var(--blekk-myk); background: rgba(93,104,117,.09); border-color: rgba(93,104,117,.24); }
/* Utkast skiller seg i FORM, ikke bare farge: stiplet kant, ingen fyllfarge. */
.merke-utkast { background: transparent; border-style: dashed; }
/* Bokført faktura: nummeret står med en liten lås foran. */
.laast { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ikon-laas { width: 12px; height: 12px; flex-basis: 12px; stroke-width: 1.8; color: var(--blekk-svak); }
.valgfri { font-weight: 400; color: var(--blekk-svak); }

.mva-status {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 11px var(--kort-innsats);
  background: var(--kontroll-flate);
  border-bottom: 1px solid var(--strek-svak);
}

.ai-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 18px;
  margin-bottom: 18px;
}
.ai-import-steg p { margin: 0 0 16px; }
.ai-import-steg p:last-child { margin-bottom: 0; }
.ai-import-detalj { overflow: hidden; }
.ai-import-tabell { border-top: 1px solid var(--strek); }
.ai-import-tabell .panel-hode { background: #fff; }
.ai-import-tabell table.data { min-width: 640px; }
@media (max-width: 820px) {
  .ai-import-grid { grid-template-columns: 1fr; }
}
.mva-status > div:first-child { min-width: 0; }
.mva-status-tekst { margin-left: 8px; color: var(--blekk-myk); font-size: 13px; }
.mva-status-hjelp { margin-top: 5px; }
.mva-status .knapp { flex: 0 0 auto; }
.mva-status-handlinger { justify-content: flex-end; }
.mva-validering {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px var(--kort-innsats); font-size: 12.5px;
  color: var(--blekk-myk); background: var(--papir);
  border-bottom: 1px solid var(--strek-svak);
}
.mva-validering.avvik { color: #8a1d16; background: #fdf2f1; }
.mva-innsending {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px var(--kort-innsats); font-size: 12.5px;
  color: var(--blekk-myk); background: var(--papir);
  border-bottom: 1px solid var(--strek-svak);
}
.mva-innsending.avvik { color: #8a1d16; background: #fdf2f1; }
.mva-innsending.godkjent { color: var(--gronn); background: #f3faf5; }
.mva-dokumenter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.mva-dokumenter .knapp { color: var(--gronn); }
@media (max-width: 650px) {
  .mva-status { align-items: flex-start; flex-direction: column; }
  .mva-status-handlinger { justify-content: flex-start; }
  .mva-status .knapp { align-self: flex-start; }
}

.sjekkliste { list-style: none; margin: 0; padding: 0 var(--kort-innsats); }
.sjekkliste-rad {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: 68px;
  border-bottom: 1px solid var(--strek);
}
.sjekkliste-rad:last-child { border-bottom: 0; }
.sjekkikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--strek);
  border-radius: 50%; color: var(--blekk-myk); font-size: 13px;
}
.sjekkikon .ikon { width: 15px; height: 15px; }
.sjekk-feil .sjekkikon { color: var(--oransje-dyp); border-color: rgba(191,61,0,.35); }
.sjekk-advarsel .sjekkikon { color: var(--oransje-dyp); border-color: rgba(191,61,0,.35); }
.sjekk-ok .sjekkikon { color: var(--gronn); border-color: rgba(31,107,67,.35); }
.sjekkoverskrift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.sjekkinnhold { min-width: 0; }
.sjekkliste-rad > .knapp { align-self: center; }
@media (max-width: 600px) {
  .sjekkliste-rad { grid-template-columns: 26px minmax(0, 1fr); padding: 11px 0; }
  .sjekkliste-rad > .knapp { grid-column: 2; justify-self: start; }
}


/* == 04  Sidestolpen ======================================================= */

.stolpe {
  flex: 0 0 var(--stolpe); width: var(--stolpe);
  display: flex; flex-direction: column;
  background: #1c2632;
}

.stolpe-merke {
  display: flex; align-items: center; gap: 12px;
  min-height: 84px; padding: 18px var(--stolpe-innsats);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.stolpe-merke img { width: 38px; height: 38px; display: block; }
.stolpe-merke span { color: #fff; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.stolpe-merke small {
  display: block; font-size: var(--t-mikro); font-weight: 600; letter-spacing: var(--sperr);
  color: var(--glod); text-transform: uppercase;
}

.selskapsvelger {
  display: flex; align-items: center; gap: 10px;
  margin: 14px var(--stolpe-innsats) 2px; width: calc(100% - var(--stolpe-innsats) * 2);
  padding: 9px 12px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.selskapsvelger:hover { background: rgba(255, 255, 255, .1); }
.selskapsvelger > span { flex: 1 1 auto; min-width: 0; }
.selskapsvelger .velgerpil { opacity: .5; }
.selskapsvelger:hover .velgerpil { opacity: .85; }
.selskapsvelger strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bedriftsprikk {
  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.selskapsvelger small { color: #a9b8c8; font-size: 11.5px; }

.stolpe nav { padding: 4px 10px 14px; flex: 1 1 auto; }
.stolpe .gruppe {
  padding: 18px calc(var(--stolpe-innsats) - 8px) 6px;
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: var(--sperr);
  text-transform: uppercase; color: #8fa2b8;
}
.stolpe nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 36px; padding: 7px 10px; margin-bottom: 2px;
  background: transparent; border: 0; border-radius: 8px;
  color: #b7c5d4;
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.stolpe nav button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.stolpe nav button.pa { color: #fff; background: rgba(255, 255, 255, 0.11); }
.stolpe nav button.pa .menyikon { color: var(--glod); opacity: 1; }
.stolpe nav .antall {
  margin-left: auto; padding: 0 6px;
  font-size: 11.5px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85);
}
.stolpe nav button.pa .antall { background: rgba(0, 0, 0, 0.22); color: #fff; }

/* Ikonene rendres 1:1 mot sitt eget 20-rutenett. Skaleres de til 17px, lander
   hver heltallskoordinat på brøkpiksel og ingen strek blir skarp. */
.ikon { width: 20px; height: 20px; flex: 0 0 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon-liten { width: 16px; height: 16px; flex-basis: 16px; stroke-width: 1.7; }
.ikon-lukk  { width: 14px; height: 14px; flex-basis: 14px; stroke-width: 1.6; }
.menyikon { opacity: .82; }
.stolpe nav button.pa .menyikon { opacity: 1; }

.stolpe-fot {
  padding: 16px var(--stolpe-innsats); border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px; color: #8fa2b8;
}
.stolpe-fot button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #a9b8c8; font: inherit; font-size: 11.5px;
  text-decoration: underline;
}
.stolpe-fot button:hover { color: #fff; }


/* == 05  Knapper =========================================================== */

/* Faste høyder, sentrert med flex — da tåler knappen ikoner senere, og den
   store knappen står nøyaktig like høy som feltet over seg i påloggingen. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--kontroll); padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.35;
  color: #333c39; text-align: center; text-decoration: none;
  cursor: pointer; vertical-align: middle; white-space: nowrap;
  background: var(--papir);
  border: 1px solid var(--strek); border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  -webkit-appearance: none; appearance: none;
}
.knapp:hover { text-decoration: none; background: #f9fafb; }
.knapp:active { background: #eef0f3; }
.knapp:disabled, .knapp[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.knapp[aria-disabled="true"] { pointer-events: none; }
/* Et ikon i en knapp skal ikke arve knappens preg — det hører til tekst. */
.knapp .knappikon { width: 13px; height: 13px; flex: none; margin-left: 7px; opacity: .72; }

.knapp-hoved { border-color: var(--aksent-dyp); color: #fff; background: var(--aksent); }
.knapp-hoved:hover { background: var(--aksent-lys); }
.knapp-hoved:active { background: var(--aksent-dyp); }
.ai-import-slett { border-color: #e6c9c5; color: var(--rod); }
.ai-import-slett:hover { border-color: var(--rod); background: #fff7f6; }

.knapp-liten { height: 28px; padding: 0 10px; font-size: 12.5px; }
.knapp-stor  { height: var(--kontroll-stor); padding: 0 22px; font-size: 15px; }

/* Bokføring er varig — «bokførte bilag endres og slettes ikke» (README).
   Den knappen skal derfor aldri se ut som et vanlig «Lagre» eller «Neste». */
.knapp-bokfor, .knapp-hoved.knapp-bokfor { background: var(--gronn); border-color: #164f32; color: #fff; }
.knapp-bokfor:hover, .knapp-hoved.knapp-bokfor:hover { background: #24815a; }
.knapp-bokfor:active, .knapp-hoved.knapp-bokfor:active { background: #164f32; }

.knapprad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knapprad .fyll { flex: 1 1 auto; }
.mva-post-handling { display: inline-flex; flex: 0 0 auto; margin: 0; }

/* Segmentkontroll: «du står her», ikke «gjør dette». Hovedknappen betydde før
   tre forskjellige ting — handling, valgt tilstand og nedlasting. Nå bare den
   ene, og valgt tilstand har fått sitt eget uttrykk. */
.segment {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--kontroll-flate); border-radius: var(--radius-sm);
}
.segment button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--blekk-myk);
  background: transparent;
}
.segment button:hover { color: var(--natt); }
.segment button[aria-pressed="true"] {
  color: var(--natt); background: var(--papir);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04);
}


/* == 06  Tabeller ========================================================== */

.tabellramme { overflow-x: auto; }

table.data {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; background: var(--papir);
}
table.data th, table.data td {
  padding: 10px var(--kort-innsats); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--strek-svak);
}
/* Fem alderskolonner (dager siden forfall) presser navnet: navnekolonnen får en
   gulvbredde, og cellene tettere innsats så tabellen holder seg innenfor kortet. */
.aldersfordelt th:first-child { min-width: 140px; }
.aldersfordelt th, .aldersfordelt td { padding-inline: 8px; }
.aldersfordelt th:first-child, .aldersfordelt td:first-child { padding-left: var(--kort-innsats); }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--krom);
  border-bottom: 1px solid var(--strek-svak);
  font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--blekk-myk); text-shadow: none; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr.klikkbar { cursor: pointer; }
table.data tbody tr.klikkbar:hover td { background: var(--aksent-flate); }
/* Et kjennetegn som ikke flytter innholdet, i motsetning til en ekte kant. */
table.data tbody tr.klikkbar:hover td:first-child { box-shadow: inset 2px 0 0 var(--aksent); }
/* --aksent-flate er lysere enn den hvite raden, så .svak faller under AA der. */
table.data tbody tr.klikkbar:hover td .svak,
table.data tbody tr.venter td .svak { color: var(--blekk-myk); }
table.data td.tall, table.data th.tall {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Koder — organisasjonsnummer, kontonummer i tekst — er ikke mengder. De skal
   leses fra venstre som tekst, men med sifferbredde så de står under hverandre. */
table.data td.kode, table.data th.kode {
  text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Sebrastripene ligger på cellene, så nivåene må melde seg ut av dem
   eksplisitt — ellers arver en delsum en tilfeldig grå fra radtellingen. */
table.data tr.delsum td, table.data tr.bunnlinje td { background: var(--papir) !important; }
table.data tr.delsum td {
  font-weight: 500; color: var(--natt); border-top: 1px solid var(--strek);
}
table.data tr.sum td {
  font-weight: 600; color: var(--natt);
  background: #eef2f6 !important; border-top: 1px solid var(--strek);
}
table.data tr.bunnlinje td {
  font-weight: 600; color: var(--natt); font-size: 14px;
  border-top: 1px solid var(--natt); border-bottom: 3px double var(--natt);
  padding-top: 10px; padding-bottom: 10px;
}
/* En gruppeoverskrift er en etikett, ikke en sum. Gjør den tydelig til noe
   annet enn tallradene under, ellers står tre nivåer med samme vekt. */
table.data tr.gruppe td {
  font-weight: 600; color: var(--blekk-svak); background: var(--papir) !important;
  padding-top: 18px; padding-bottom: 5px;
  font-size: var(--t-mikro); letter-spacing: var(--sperr); text-transform: uppercase;
  border-bottom-color: transparent;
}
table.data tr.gruppe:first-child td { padding-top: 10px; }

/* En tom liste er stedet brukeren trenger mest hjelp, ikke minst. Seksjonens
   eget ikon i en hårfin skive gir den samme vekt som innholdet den erstatter. */
.tom {
  padding: 44px 24px 46px; text-align: center; color: var(--blekk-svak);
}
.tom .tomikon {
  width: 26px; height: 26px; flex: none; margin: 0 auto 14px; padding: 13px;
  box-sizing: content-box; border-radius: 50%;
  color: var(--blekk-svak); opacity: .72;
  background: var(--kontroll-flate);
  border: 1px solid var(--strek);
}
.tom h3 { color: var(--blekk-myk); margin-bottom: 5px; }
.tom p { max-width: 42ch; margin: 0 auto; font-size: 13px; }


/* == 07  Skjema ============================================================ */

.felt { position: relative; margin-bottom: 14px; }
.felt label {
  display: block; margin-bottom: 4px;
  font-size: 13px; font-weight: 600; color: var(--natt); text-shadow: var(--preg);
}
.felt .hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--blekk-svak); font-weight: 400; }

/* Brønnøysund-oppslag: en statuslinje under organisasjonsnummeret, og en
   nedtrekksliste med treff under navnefeltet. Begge stille når det ikke er
   noe å si — det skal aldri se ut som et skjema med to meninger om seg selv. */
.brreg-status { display: block; margin-top: 4px; min-height: 15px; }
.brreg-treff {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 4px 0; list-style: none;
  max-height: 220px; overflow-y: auto;
  background: var(--papir); border: 1px solid var(--strek); border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(22, 32, 43, 0.16);
}
.brreg-treff li {
  padding: 6px 12px; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.brreg-treff li:hover, .brreg-treff li.uthevet { background: var(--dis); }
.brreg-treff li strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brreg-treff li span { flex: 0 0 auto; white-space: nowrap; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], textarea, select {
  width: 100%; height: var(--kontroll-stor); padding: 0 11px;
  font: inherit; font-size: 14px; color: var(--blekk);
  background: #fff; border: 1px solid var(--strek); border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  -webkit-appearance: none; appearance: none;
}
textarea { height: auto; min-height: 72px; padding: 6px 9px; resize: vertical; line-height: 1.5; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235d6875' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px;
  padding-right: 28px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--aksent); outline: none;
  box-shadow: inset 0 1px 2px rgba(22,32,43,.09), 0 0 0 3px rgba(49, 103, 155, 0.18);
}
input.tall, input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }

/* Serveren sier hvilket felt som er galt. Da skal det være umulig å overse. */
/* Basisregelen for felt er `input[type="text"], …`, altså (0,1,1). En ren
   klasse er (0,1,0) og taper — så markeringen malte aldri et tekstfelt rødt.
   Den vant bare i fokus, og blinket dermed til og forsvant i samme øyeblikk
   brukeren flyttet seg, mens aria-invalid ble stående. */
input.feilfelt, select.feilfelt, textarea.feilfelt, .feilfelt:focus {
  border-color: var(--rod);
  box-shadow: inset 0 1px 2px rgba(22,32,43,.09), 0 0 0 3px rgba(179, 38, 30, .16);
}


/* Søk + klassevalg over en lang liste. Aktive filtre er alltid synlige. */
.filterrad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filterrad .rapport-ar-felt { display: flex; align-items: center; gap: 8px; margin: 0; }
.filterrad .rapport-ar-felt label { flex: none; margin: 0; }
.filterrad .rapport-ar-felt select { min-width: 100px; }
.faktura-sidehint { margin: 8px 0 0; }
.faktura-last-flere { justify-content: center; margin: 12px 0 24px; }
.filterrad input[type="search"] { max-width: 300px; }
.filterrad select { width: auto; min-width: 150px; }

.datorad { display: flex; align-items: center; gap: 8px; }
.datorad input { flex: 1 1 auto; min-width: 0; }
.datorad .knapp { flex: none; }

/* Radavstand 0: feltene har allerede 14px bunnmarg, så brutte rader får samme
   avstand som felt stablet under hverandre. */
.feltrad { display: flex; gap: 0 12px; flex-wrap: wrap; }
.feltrad > .felt { flex: 1 1 150px; margin-bottom: 14px; }

.avkryss { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.avkryss input { width: auto; margin-top: 3px; box-shadow: none; -webkit-appearance: checkbox; appearance: checkbox; }

fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--natt); }


/* == 08  Nøkkeltall ======================================================== */

/* Månedsdiagrammet: ren SVG, farger fra tokenene. */
.diagram { display: block; width: 100%; height: auto; }
.diagram .soyle-inn { fill: var(--aksent); }
.diagram .soyle-kost { fill: var(--strek-mork); }
.diagram .diagram-akse { stroke: var(--strek); stroke-width: 1; }
.diagram .diagram-mnd { font-size: 11px; fill: var(--blekk-svak); font-family: inherit; }
.diagram-forklaring { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blekk-myk); }
.prikk { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 10px; }
.prikk-inn { background: var(--aksent); }
.prikk-kost { background: var(--strek-mork); }
.diagram-tom { text-align: center; margin-top: 4px; }

.budsjettpanel .panel-hode { align-items: flex-start; }
.budsjettpanel .panel-undertekst { margin: 4px 0 0; color: var(--blekk-myk); }
.budsjett-sammendrag {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  padding: 16px var(--kort-innsats) 6px;
}
.budsjett-sammendrag > div {
  padding: 12px 14px; background: var(--dis); border-radius: var(--radius-sm);
}
.budsjett-sammendrag span, .budsjett-sammendrag small { display: block; color: var(--blekk-myk); font-size: 12px; }
.budsjett-sammendrag strong { display: block; margin: 4px 0; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--natt); }
.budsjett-tabell th, .budsjett-tabell td { white-space: nowrap; }
.budsjett-tabell tbody th { font-weight: 500; }
.budsjett-tom { padding-top: 10px; }
.budsjett-tom h3 { margin-top: 0; }
.budsjett-redigering input { min-width: 130px; text-align: right; }
@media (max-width: 600px) {
  .budsjett-sammendrag { grid-template-columns: 1fr; }
  .budsjett-sammendrag > div { padding: 10px 12px; }
}

/* «Hva vil du gjøre?» — tre verb øverst på oversikten. Bare ett av dem er fylt. */
.gjor-rad {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gjor {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px 13px; border: 1px solid var(--strek-svak); border-radius: var(--radius); cursor: pointer;
  background: var(--papir); box-shadow: var(--kortskygge); color: var(--natt);
  font: inherit; text-align: left;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.gjor strong { font-size: var(--t-mid); font-weight: 600; }
.gjor span { font-size: 13px; color: var(--blekk-myk); }
.gjor:hover { box-shadow: var(--kortskygge), 0 6px 18px rgba(22, 32, 43, .10); transform: translateY(-1px); }
.gjor:active { transform: translateY(0); }
.gjor-hoved { background: var(--aksent); border-color: var(--aksent-dyp); color: #fff; box-shadow: none; }
.gjor-hoved span { color: rgba(255, 255, 255, .78); }
.gjor-hoved:hover { background: var(--aksent-dyp); box-shadow: 0 6px 18px rgba(36, 81, 127, .28); }

.tall-rad { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-bottom: 22px; }

.tallkort {
  padding: 20px 22px;
  background: var(--papir);
  border: 1px solid var(--strek-svak);
  border-radius: var(--radius);
  box-shadow: var(--kortskygge);
}
.tallkort .navn { font-size: 13px; letter-spacing: 0; color: var(--blekk-myk); }
.tallkort .verdi {
  display: block; margin: 8px 0 3px;
  font-size: clamp(24px, 2.2vw, 32px); font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
  color: var(--natt); font-variant-numeric: tabular-nums; text-shadow: none;
}
.tallkort .under { font-size: 11.5px; color: var(--blekk-svak); }
/* Det ene tallet som betyr mest står på natt-blått: ett tydelig blikkfang per side. */
.tallkort.fremhevet { background: var(--natt); border-color: var(--natt); box-shadow: 0 8px 24px rgba(22, 32, 43, .2); }
.tallkort.fremhevet .navn { color: var(--glod); }
.tallkort.fremhevet .verdi { color: #fff; }
.tallkort.fremhevet .verdi.negativ { color: #ffa28f; }
.tallkort.fremhevet .under { color: rgba(255, 255, 255, .62); }

.sikkerhet-kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sikkerhet-kort .panel-kropp p { margin-top: 14px; }
@media (max-width: 1100px) { .sikkerhet-kort { grid-template-columns: 1fr; gap: 0; } }
.driftsbackup-panel { margin-top: 18px; }
.driftsbackup-toppstatus, .driftsbackup-tilstand {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  max-width: 100%; padding: 5px 9px; border: 1px solid #e4c77c; border-radius: 999px;
  color: #725610; background: #fff9e8; font-size: 14px; font-weight: 600; line-height: 1.35;
  text-align: center;
}
.driftsbackup-liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.driftsbackup-liste li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 12px 14px; border: 1px solid var(--strek-svak);
  border-radius: var(--radius-sm); background: #fff;
}
.driftsbackup-liste li > span:first-child { min-width: 0; }
.driftsbackup-liste strong { display: block; color: var(--natt); font-size: 14px; }
.driftsbackup-liste small { display: block; margin-top: 3px; color: var(--blekk-myk); font-size: 13px; line-height: 1.45; }
.driftsbackup-tilstand { align-self: center; }
.driftsbackup-tilstand.god { color: var(--gronn); border-color: rgba(31,107,67,.26); background: rgba(31,107,67,.09); }
.driftsbackup-runbook { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--strek-svak); }
.driftsbackup-runbook summary { color: var(--aksent-dyp); font-size: 15px; font-weight: 650; cursor: pointer; }
.driftsbackup-runbook[open] summary { margin-bottom: 14px; }
.driftsbackup-veiledning { max-width: 900px; }
.driftsbackup-steg { display: grid; gap: 11px; margin: 0; padding-left: 22px; color: var(--blekk-myk); font-size: 14px; line-height: 1.6; }
.driftsbackup-steg li { padding-left: 3px; }
.driftsbackup-steg strong { color: var(--natt); }
.driftsbackup-kommandoer {
  max-width: 100%; margin: 12px 0; padding: 12px 14px; overflow-x: auto;
  border: 1px solid var(--strek-svak); border-radius: var(--radius-sm);
  color: var(--natt); background: var(--krom); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.driftsbackup-kommandoer code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.driftsbackup-advarsel { margin: 16px 0 0; line-height: 1.55; }
.driftsbackup-advarsel strong { display: block; color: var(--natt); }
@media (max-width: 700px) {
  .driftsbackup-liste { grid-template-columns: 1fr; }
  .driftsbackup-panel > .panel-hode { align-items: flex-start; flex-wrap: wrap; }
  .driftsbackup-tilstand { text-align: left; }
}
.driftskostnadssatser {
  display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px;
  margin: 16px 0 8px;
}
.driftskostnadssatser .felt { margin: 0; }
.driftskostnadssatser input { width: 100%; }
.driftsokonomi-summer {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.driftsokonomi-summer > span {
  display: flex; flex: 1 1 150px; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--strek-svak);
  border-radius: var(--radius); background: var(--kontroll-flate);
  color: var(--blekk-myk); font-size: 12px;
}
.driftsokonomi-summer strong { color: var(--natt); font-size: 18px; font-variant-numeric: tabular-nums; }
.driftsokonomi-summer small { color: var(--blekk-myk); font-size: 11px; }
.driftsokonomi-stotte-inndata { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.driftsokonomi-stotte-inndata input { width: 104px; min-width: 104px; height: 32px; padding-inline: 8px; }
.driftsokonomi-stotte-inndata .knapp { flex: 0 0 auto; }
[data-support-status] { display: block; margin-top: 4px; min-width: 12em; }
@media (max-width: 900px) { .driftskostnadssatser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .driftskostnadssatser { grid-template-columns: 1fr; } }

.api-token-notis { overflow-wrap: anywhere; }
.api-token { display: block; margin-top: 10px; padding: 12px 14px; background: var(--papir); border: 1px solid var(--strek); color: var(--natt); font-size: 13px; line-height: 1.5; }
.data code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.abonnement-panel { margin-top: 18px; }
.abonnement-bytte { display: inline-flex; align-items: center; gap: 6px; }
.abonnement-bytte input { accent-color: var(--aksent); }
.abonnement-administrasjon { align-items: center; margin-top: 14px; }

.notis {
  padding: 11px 15px; margin-bottom: 18px;
  font-size: 13px; border-radius: var(--radius-sm);
  background: #fff8f1; border: 1px solid #f6dcc3; border-left: 3px solid var(--oransje);
}
.notis-graa { background: var(--krom); border-color: var(--strek); border-left-color: var(--bla-mid); }
.notis h3 { margin-bottom: 3px; }
.saft-mappingliste { display: grid; gap: 7px; }
.saft-mappingrad { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr); align-items: center; gap: 12px; }
.saft-mappingrad > span { min-width: 0; overflow-wrap: anywhere; }
.saft-mappingrad .feltkontroll { height: 32px; font-size: 12.5px; }
@media (max-width: 620px) {
  .saft-mappingrad { grid-template-columns: 1fr; gap: 4px; }
}


/* == 09  Meldinger og dialoger ============================================= */

.melding {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  font-size: 13px; border-radius: var(--radius-sm);
}
.melding.feil  { background: #fdf2f1; border: 1px solid #efcac6; color: #8a1d16; }
.melding.ok    { background: #f1f8f3; border: 1px solid #c6e0ce; color: #14512f; }
.melding.advarsel { background: #fff8e8; border: 1px solid #edd9a3; color: #795800; }
.portal-skille { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--blekk-myk); font-size: 12px; }
.portal-skille::before, .portal-skille::after { content: ''; height: 1px; flex: 1; background: var(--strek); }
.portal-google-knapp { width: 100%; justify-content: center; gap: 9px; background: #fff; border-color: var(--strek); color: var(--blekk); text-decoration: none; }
.portal-google-knapp:hover { background: var(--krom); }
.portal-google-merke { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid #4285f4; border-radius: 50%; color: #4285f4; font-weight: 700; font-family: Arial, sans-serif; }
.portal-google-hjelp { display: block; margin-top: 9px; text-align: center; }
.portal-passordlenke { margin: 10px 0 0; text-align: right; font-size: 13px; }
.portal-passordlenke a { color: var(--aksent-dyp); text-underline-offset: 3px; }
.melding .fyll { flex: 1 1 auto; }
.melding button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; opacity: .6; font-size: 16px; line-height: 1;
}
.melding button:hover { opacity: 1; }

/* Siden bak må låses, ellers ruller hjulet over kantene av en kort dialog
   innholdet under den — og brukeren mister stedet hen kom fra. */
body.dialog-apen { overflow: hidden; }

.bakteppe {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  background: rgba(12, 19, 27, 0.45);
}
.dialog {
  width: 100%; max-width: 560px;
  background: var(--papir); border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(12, 19, 27, 0.35);
  overflow: hidden;
}
.dialog.bred { max-width: 800px; }
.dialog-hode {
  display: flex; align-items: center; gap: 12px; padding: 15px 22px 13px;
  border-bottom: 1px solid var(--strek-svak);
  border-radius: var(--radius) var(--radius) 0 0;
}
.dialog-hode h2 { margin: 0; flex: 1 1 auto; font-size: 16px; }
.dialog-hode button.lukk {
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--blekk-svak);
}
.dialog-kropp { padding: 20px 22px; }
.dialog-fot {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 13px 22px;
  background: var(--krom); border-top: 1px solid var(--strek-svak);
  border-radius: 0 0 var(--radius) var(--radius);
}
.dialog-fot .fyll { flex: 1 1 auto; }

/* Linjeredigering i bilag og faktura */
table.linjer { width: 100%; border-collapse: collapse; font-size: 13px; }
table.linjer th {
  padding: 0 6px 5px; text-align: left;
  font-size: 11.5px; font-weight: 600; color: var(--blekk-myk);
}
table.linjer td { padding: 0 6px 7px; vertical-align: top; }
table.linjer input, table.linjer select { font-size: 13px; padding: 4px 7px; }
table.linjer td.smal { width: 108px; }
table.linjer td.knappecelle { width: 30px; padding-top: 3px; }
table.linjer button.fjern {
  background: none; border: 0; cursor: pointer; padding: 3px 5px;
  color: var(--blekk-svak); font-size: 16px; line-height: 1;
}
table.linjer button.fjern:hover { color: var(--rod); }

.ab-csv-import {
  margin: 14px 0 18px; padding: 13px 16px;
  border: 1px solid var(--strek-svak); border-radius: var(--radius-sm); background: #fff;
}
.ab-csv-import summary { color: var(--aksent-dyp); cursor: pointer; font-weight: 600; }
.ab-csv-innhold { max-width: 760px; padding-top: 12px; }
.ab-csv-innhold p { margin: 0 0 8px; line-height: 1.55; }
.ab-csv-handlinger { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.ab-csv-handlinger .felt { flex: 1 1 280px; min-width: 0; margin: 0; }
.ab-csv-handlinger input[type="file"] { display: block; width: 100%; min-width: 0; height: auto; padding: 8px; }
.ab-csv-status { min-height: 1.5em; margin: 10px 0 0 !important; color: var(--blekk-myk); font-size: 13px; }
.ab-csv-kartlegging { margin-top: 16px; padding: 16px; border: 1px solid var(--strek); border-radius: var(--radius-sm); background: #fff; }
.ab-csv-kartlegging h3 { margin: 0 0 5px; color: var(--natt); font-size: 16px; }
.ab-csv-kartlegging > p { margin: 0 0 12px; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.ab-csv-kartlegging-tabell { min-width: 620px; }
.ab-csv-kartlegging-tabell td { vertical-align: middle; }
.ab-csv-saldo { min-width: 132px; }
.ab-csv-saldo > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; }
.ab-csv-saldo small { color: var(--blekk-myk); font-size: 13px; }
.ab-csv-saldo strong { font-variant-numeric: tabular-nums; }
.ab-csv-kartlegging-tabell select { width: 100%; min-width: 240px; }
.ab-csv-kartlegging-bunn { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.ab-csv-kartlegging-bunn p { margin: 0; font-size: 14px; line-height: 1.45; }
.ab-csv-kartlegging-bunn button { flex: none; }
@media (max-width: 620px) {
  .ab-csv-kartlegging { padding: 12px; }
  .ab-csv-kartlegging-bunn { align-items: stretch; flex-direction: column; }
  .ab-csv-kartlegging-bunn button { width: 100%; }
}

/* Vedleggsliste i bilagsdialogen */
ul.vedlegg { list-style: none; margin: 0; padding: 0; }
ul.vedlegg li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 4px;
  background: #fbfcfd; border: 1px solid var(--strek); border-radius: var(--radius-sm);
}
ul.vedlegg a {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  color: var(--blekk); text-decoration: none;
}
ul.vedlegg a:hover .navn { color: var(--aksent); text-decoration: underline; }
ul.vedlegg .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.vedlegg .fjern {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  padding: 2px 5px; font-size: 16px; line-height: 1; color: var(--blekk-svak);
}
ul.vedlegg .fjern:hover { color: var(--rod); }
ul.vedlegg .fjern:disabled { opacity: .4; cursor: default; }

.balansestrek {
  display: flex; gap: 20px; justify-content: flex-end; align-items: baseline;
  padding: 10px 6px 0; margin-top: 4px;
  border-top: 1px solid var(--strek);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.balansestrek strong { color: var(--natt); }
.balansestrek.ujevn { color: var(--rod); }
.balansestrek.jevn  { color: var(--gronn); }


/* == 10  Pålogging og små skjermer ========================================= */

.portal {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 30px 20px;
  background: var(--dis);
}
.portal-kort { width: 100%; max-width: 418px; }
.portal .panel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 40px rgba(16, 24, 40, .1), 0 1px 3px rgba(16, 24, 40, .06); }
.portal .panel-kropp { padding: 26px 30px; }
.portal-merke { text-align: center; margin-bottom: 22px; }
.portal-merke img {
  width: 74px; height: 74px;
  /* To skygger: den tette rett under mynten, som før lå innbakt i SVG-en og
     ble klippet av viewBoxen, og den myke som løfter den fra flaten. */
  filter: drop-shadow(0 2px 2px rgba(58, 31, 4, .34)) drop-shadow(0 6px 13px rgba(22, 32, 43, .2));
}
.portal-merke h1 { margin: 12px 0 3px; font-size: 29px; color: #29435d; }
.portal-merke p { color: #506477; font-size: 14px; }
/* Samme «pille i spor» som segmentvalgene ellers. */
.portal .fane {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 18px;
  background: var(--kontroll-flate); border-radius: var(--radius-sm);
}
.portal .fane button {
  flex: 1 1 50%; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--blekk-myk);
  background: transparent;
}
.portal .fane button:hover { color: var(--natt); }
.portal .fane button.pa {
  color: var(--natt); background: var(--papir);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04);
}

/* Veiviseren for ny bedrift: tre steg, ett kort, alltid synlig hvor man er.
   Fullskjerm i stedet for dialog — det er det første man ser, og det skal
   ikke se ut som noe som kan avbrytes ved et uhell. */
.veiviser { max-width: 600px; margin: 24px auto 0; }
.veiviser-steg {
  display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none;
  font-size: var(--t-liten); color: var(--blekk-svak);
}
.veiviser-steg li { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; white-space: nowrap; }
.veiviser-steg li:last-child { flex: 0 0 auto; }
.veiviser-steg li:not(:last-child)::after {
  content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: var(--strek-svak);
}
.veiviser-steg li.paa { color: var(--natt); font-weight: 600; }
.veiviser-steg li.ferdig { color: var(--gronn); }
.veiviser-nr {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: var(--t-mikro); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--kontroll-flate); color: var(--blekk-myk);
  border: 1px solid var(--strek);
}
.veiviser-steg li.paa .veiviser-nr { background: var(--aksent); border-color: var(--aksent-dyp); color: #fff; }
.veiviser-steg li.ferdig .veiviser-nr { background: var(--gronn); border-color: #164f32; color: #fff; }
.veiviser-kort .panel-kropp { padding: 26px 30px 28px; }
.veiviser-kort h1 { margin-bottom: 6px; }
.veiviser-oppsummering { margin-top: 16px; }
.veiviser-oppsummering td { padding-inline: 0 !important; }
.veiviser-nestevalg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.veiviser-nestevalg > section { min-width: 0; padding: 16px; border: 1px solid var(--strek-svak); border-radius: var(--radius); background: #fff; }
.veiviser-nestevalg > .veiviser-nestevalg-ny { border-color: #c7d9eb; background: #f7faff; }
.veiviser-nestevalg h2 { margin: 2px 0 6px; color: var(--natt); font-size: 16px; line-height: 1.35; }
.veiviser-nestevalg p { margin: 0 0 12px; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.veiviser-nestevalg .knapprad { display: flex; flex-wrap: wrap; gap: 8px; }
.veiviser-nestevalg .knapp { min-height: 36px; height: auto; }
.veiviser-videre { display: flex; justify-content: flex-end; margin-top: 12px; }
.veiviser .felt-kort { flex: 0 0 118px; }
@media (max-width: 520px) {
  .veiviser-kort .panel-kropp { padding: 20px 18px 22px; }
  .veiviser .feltrad > .felt { flex: 1 1 100%; }
  .veiviser .feltrad > .felt-kort { flex: 1 1 calc(50% - 6px); }
  .veiviser-nestevalg { grid-template-columns: 1fr; }
  .veiviser-nestevalg > section { padding: 14px; }
}

/* «Kom i gang» på oversikten, bare før det første bilaget. */
.startsteg { list-style: none; margin: 0; padding: 2px var(--kort-innsats) 4px; }
.startsteg li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--strek-svak);
}
.startsteg li:first-child { border-top: 0; }
.startsteg li > div { flex: 1 1 auto; min-width: 0; }
.startsteg li strong { display: block; color: var(--natt); }
.startsteg li .hint { display: block; margin-top: 2px; font-size: 13px; color: var(--blekk-myk); }
.startsteg li.gjort strong { color: var(--blekk-myk); }
.startsteg li.gjort .veiviser-nr { background: var(--gronn); border-color: #164f32; color: #fff; }
.startsteg .veiviser-nr { margin-top: 1px; }
.startsteg .knapp { flex: none; min-height: 36px; height: auto; align-self: center; }
.startsteg-handlinger { display: flex; flex: none; align-items: center; gap: 6px; }
.startvalg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 12px 16px 14px;
}
.startvalg-kort {
  min-width: 0; padding: 16px; border: 1px solid var(--strek-svak);
  border-radius: var(--radius); background: var(--kontroll-flate);
}
.startvalg-ny { border-color: #c7d9eb; background: #f7faff; }
.startvalg-merke {
  display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 8px; padding: 3px 8px;
  border-radius: 999px; color: var(--aksent-dyp); background: var(--aksent-flate);
  font-size: 12px; font-weight: 650; line-height: 1.3;
}
.startvalg-merke-bytte { color: var(--blekk-myk); background: #edf0f3; }
.startvalg-kort > strong { display: block; color: var(--natt); font-size: 16px; line-height: 1.35; }
.startvalg-kort p { margin: 6px 0 12px; color: var(--blekk-myk); font-size: 14px; line-height: 1.55; }
.startvalg-kort .knapprad { flex-wrap: wrap; }
.startvalg-bytte { align-self: start; background: #fff; }
.startvalg-bytte > summary { display: grid; justify-items: start; gap: 8px; list-style: none; cursor: pointer; }
.startvalg-bytte > summary::-webkit-details-marker { display: none; }
.startvalg-bytte > summary .startvalg-merke { margin-bottom: 0; }
.startvalg-bytte > summary > strong { color: var(--natt); font-size: 16px; line-height: 1.4; }
.startvalg-bytte-korttekst { color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.startvalg-bytte > summary::after { content: "Vis importvalg"; color: var(--aksent-dyp); font-size: 14px; font-weight: 650; }
.startvalg-bytte[open] > summary::after { content: "Skjul importvalg"; }
.startvalg-bytte-innhold { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--strek-svak); }
.saft-startsteg { display: grid; gap: 6px; margin: 10px 0 14px; padding-left: 21px; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.startpanel-opplysninger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 16px 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--krom);
}
.startpanel-opplysninger strong { display: block; color: var(--natt); }
.startpanel-opplysninger span { display: block; margin-top: 3px; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.startpanel-opplysninger .knapp { flex: none; }
.saft-eksporthjelp { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--strek-svak); border-radius: var(--radius-sm); background: #fff; }
.saft-eksporthjelp > summary { color: var(--aksent-dyp); cursor: pointer; font-size: 14px; font-weight: 650; }
.saft-eksporthjelp > p { margin: 8px 0; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.saft-eksportliste { margin-top: 6px; border-top: 1px solid var(--strek-svak); }
.saft-eksportliste details + details { border-top: 1px solid var(--strek-svak); }
.saft-eksportliste summary { padding: 9px 0; color: var(--natt); cursor: pointer; font-size: 14px; font-weight: 600; }
.saft-eksportliste p { margin: 0 0 7px; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.saft-eksportliste a { display: inline-block; margin-bottom: 10px; color: var(--aksent-dyp); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.saft-eksporthjelp .saft-eksportmerknad { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--strek-svak); }
@media (max-width: 520px) {
  .startsteg li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; }
  .startsteg .knapp { grid-column: 2; justify-self: start; }
  .startsteg-handlinger { grid-column: 2; }
  .startvalg { grid-template-columns: 1fr; margin-inline: 12px; }
  .startpanel-opplysninger { align-items: flex-start; flex-direction: column; margin-inline: 12px; padding: 12px; }
  .startpanel-opplysninger .knapp { width: 100%; }
}

.mobilmeny { display: none; }

@media (max-width: 860px) {
  .stolpe {
    position: fixed; inset: 0 auto 0 0; z-index: 70;
    overflow-y: auto;
    transform: translateX(-100%); transition: transform .18s ease-out;
  }
  .stolpe.apen { transform: none; box-shadow: 4px 0 24px rgba(12,19,27,.3); }
  /* Holder ikonet, ikke et lånt skrifttegn — strekbredden er vår egen. */
  .mobilmeny {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 26px; padding: 0; margin-right: 2px;
    background: var(--kontroll-flate);
    border: 1px solid #b6bdc0; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--blekk-myk);
  }
  .mobilmeny:active { background: #e0e3e4; }
  .topplinje { padding: 0 16px; }
  .innhold { padding: 22px 16px 50px; }
  .tall-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.linjer td.smal { width: 92px; }
}

@media (max-width: 520px) {
  h1 { font-size: 23px; }
  .dialog-kropp { padding: 16px; }
  .knapprad .knapp { flex: 1 1 auto; }
  .topplinje { gap: 8px; }
  #smulear { display: none; }
  .portal .panel-kropp { padding: 22px; }
}

/* == 11  Polert skrivebordsuttrykk, inspirert av regnskapsprogrammer fra 2010 ==
   -----------------------------------------------------------------------------
   Én regel styrer fargebruken: BLÅTT er interaksjon — det som er valgt, aktivt,
   fokusert eller klikkbart. ORANSJE er oppmerksomhet — merkevaren, varsler og
   avvik. Ingenting er begge deler. Uten den regelen slåss to aksentfarger om
   samme flate, og det er nettopp det som får et ellers pent program til å se
   hjemmesnekret ut.
   ========================================================================== */

/* Ett lukkekryss, én klikkflate, fire steder. */
.melding button, .dialog-hode button.lukk,
table.linjer button.fjern, ul.vedlegg .fjern {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border-radius: var(--radius-sm);
}
.melding button:hover, .dialog-hode button.lukk:hover { background: rgba(22, 32, 43, .07); }

.vedleggstall { display: inline-flex; align-items: center; gap: 4px; color: var(--blekk-myk); }

.bytte-foresporsel {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--strek-svak); border-radius: var(--radius-sm); background: var(--krom);
}
.bytte-foresporsel summary { color: var(--natt); font-weight: 600; cursor: pointer; }
.bytte-foresporsel[open] summary { margin-bottom: 10px; }
.bytte-foresporsel p { margin: 0 0 8px; }
.bytte-foresporsel textarea {
  display: block; width: 100%; min-height: 150px; margin: 8px 0 10px; padding: 10px 12px;
  border: 1px solid var(--strek); border-radius: var(--radius-sm); color: var(--blekk);
  background: #fff; font: inherit; line-height: 1.5; resize: vertical;
}
.bytte-foresporsel textarea:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.bytte-foresporsel .knapprad { align-items: center; }
.bytte-foresporsel .knapp { font-size: 14px; }
.saft-import-bilagsforhandsvisning { margin-top: 14px; }
.saft-import-bilagsforhandsvisning summary { color: var(--aksent-dyp); font-weight: 650; cursor: pointer; }
.saft-import-bilagsforhandsvisning[open] summary { margin-bottom: 10px; }
.saft-import-bilagsforhandsvisning > p { margin: 0 0 10px; }
.saft-import-bilagsforhandsvisning table { min-width: 680px; }
.saft-import-bilagsforhandsvisning td:nth-child(2) { min-width: 240px; }
.startvalg-kort .startvalg-saldo-info { margin: 10px 0 0; color: var(--blekk-myk); font-size: 14px; line-height: 1.5; }
.startvalg-kort .bytte-foresporsel { margin: 12px 0 0; padding: 10px; background: #fff; }
.startvalg-kort .bytte-foresporsel summary { font-size: 14px; }
.startvalg-kort .bytte-foresporsel textarea { min-height: 130px; }

.gjentakende-panel { margin-top: 18px; }
.gjentakende-panel .panel-hode { align-items: flex-start; }
.gjentakende-panel .panel-undertekst { margin: 4px 0 0; color: var(--blekk-myk); }
.tom-liten { padding: 22px; }
.tom-liten .tomikon { width: 28px; height: 28px; margin-bottom: 8px; }

/* Spøkelsesrader i en dialog som venter. Samme høyde som linjene som kommer,
   så dialogen ikke rykker når de lander. */
.spokelsesrad {
  height: 34px; margin-bottom: 7px;   /* samme som --kontroll-stor i linjeeditoren */ border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #eef1f4, #f7f9fa 50%, #eef1f4) 0 0 / 280px 100%;
  animation: skjelett 1.25s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spokelsesrad { animation: none; } }

/* Lastetilstand. Skjelettet har samme form som innholdet som kommer, så siden
   ikke rykker når svaret lander. Det vises først etter 180 ms — er svaret
   raskt, ser ingen et blaff. */
.skjelett-tekst, .skjelett-rad {
  background: linear-gradient(90deg, #e4e9ef 25%, #eef2f6 50%, #e4e9ef 75%) 0 0 / 280px 100%;
  border-radius: var(--radius-sm); color: transparent !important; text-shadow: none;
  animation: skjelett 1.25s linear infinite;
}
.skjelett-tekst { display: inline-block; min-width: 110px; height: 1em; }
.skjelett-tittel { display: block; width: 320px; max-width: 100%; height: 26px; margin: 4px 0 8px; }
.stikkord.skjelett-tekst { display: block; }
.skjelett-liste { padding: 6px 0; }
.skjelett-rad { height: 13px; margin: 13px var(--kort-innsats); }
.skjelett-rad:nth-child(3n) { margin-right: calc(var(--kort-innsats) + 90px); }
.skjelett-rad:nth-child(3n+2) { margin-right: calc(var(--kort-innsats) + 36px); }
@keyframes skjelett { to { background-position: 280px 0; } }
@media (prefers-reduced-motion: reduce) { .skjelett-tekst, .skjelett-rad { animation: none; } }

/* En rad som henter noe skal si fra at den holder på. */
table.data tbody tr.venter, tr.venter, .venter { cursor: progress; }
tr.venter td { background: var(--aksent-flate) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* == AI-hjelp ===============================================================
   To separate, fast plasserte hjelpepanele. Samtaleinnhold settes inn som
   tekstnoder, aldri som HTML.
   ========================================================================== */
.ai-hjelp-widget { position: fixed; z-index: 120; right: 24px; bottom: 22px; font-size: 14px; }
.ai-hjelp-apner {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px;
  border: 1px solid #214d76; border-radius: 999px; color: #fff; background: #24517f;
  box-shadow: 0 5px 22px rgba(22,32,43,.2); cursor: pointer; font: inherit; font-weight: 650;
}
.ai-hjelp-apner:hover { background: #183e63; }
.ai-hjelp-apner:focus-visible { outline: 3px solid #ffb52f; outline-offset: 3px; }
.ai-hjelp-apner svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.ai-hjelp-panel {
  position: absolute; right: 0; bottom: 62px; display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 28px)); height: min(570px, calc(100dvh - 105px));
  min-height: 340px; overflow: hidden; border: 1px solid var(--strek);
  border-radius: 16px; background: #f8fafc; box-shadow: 0 16px 50px rgba(22,32,43,.22);
}
.ai-hjelp-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #fff; background: var(--natt); }
.ai-hjelp-topp > div { display: grid; gap: 2px; }
.ai-hjelp-topp strong { font-size: 15px; }
.ai-hjelp-topp span { color: #d6e0e8; font-size: 11px; }
.ai-hjelp-topp button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; font-size: 21px; line-height: 1; }
.ai-hjelp-meldinger { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; padding: 15px; overflow-y: auto; overscroll-behavior: contain; }
.ai-hjelp-melding { max-width: 88%; padding: 10px 12px; border: 1px solid var(--strek-svak); border-radius: 12px; color: var(--blekk); background: #fff; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-hjelp-assistent { align-self: flex-start; border-top-left-radius: 4px; }
.ai-hjelp-bruker { align-self: flex-end; border-color: var(--aksent-dyp); border-top-right-radius: 4px; color: #fff; background: var(--aksent-dyp); }
.ai-hjelp-feil { align-self: flex-start; border-color: #e7c4c1; color: #7f211d; background: #fff6f5; }
.ai-hjelp-rapportert { align-self: flex-start; margin: -3px 0 2px; color: var(--gronn); font-size: 12px; line-height: 1.45; }
.ai-hjelp-personvern { margin: 0; padding: 9px 13px; border-top: 1px solid var(--strek-svak); color: var(--blekk-myk); background: #fff; font-size: 11px; line-height: 1.45; }
.ai-hjelp-skjema { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--strek-svak); background: #fff; }
.ai-hjelp-skjema textarea { flex: 1 1 auto; width: 0; min-height: 42px; max-height: 112px; resize: vertical; border-radius: 9px; font-size: 13px; }
.ai-hjelp-skjema .knapp { min-height: 38px; padding-inline: 14px; }
.ai-hjelp-skjema .knapp:disabled { opacity: .65; cursor: wait; }
.ai-hjelp-status { position: absolute; }
@media (max-width: 520px) {
  .ai-hjelp-widget { right: 14px; bottom: 14px; }
  .ai-hjelp-panel { right: -2px; bottom: 60px; height: min(570px, calc(100dvh - 88px)); min-height: 300px; }
  .ai-hjelp-apner { min-height: 46px; padding-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-hjelp-widget *, .ai-hjelp-widget *::before, .ai-hjelp-widget *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .stolpe, .topplinje, .knapprad, .segment, .mobilmeny, .notis { display: none !important; }
  body { background: #fff; }
  .innhold { padding: 0; }
  .panel { border: 0; box-shadow: none; }
}