/* Designsystemet til HoldingRegnskap.
 *
 * FARGEN er Skifer, og den er vår egen. To farger med hver sin jobb:
 *
 *   «bok»    hovedboken. Overskrifter, nøkkeltall, sumlinjer og
 *            Bokfør-knappen. Nøytral grafitt – rolig og autoritativ, og den
 *            skifter aldri karakter.
 *   «aksent» handlingene. Lenker, knapper, fokusring og KI-flatene.
 *            Skiferblå #2C4C8C, den eneste kulørte fargen på siden.
 *
 * Todelingen er grunnen til at et regnskap ser ut som et regnskap: tallene er
 * alltid rolige, og fargen ligger bare på det du kan trykke på. Statusfargene
 * – grønt for bokført, gult for advarsel, rødt for forfalt og negative beløp –
 * står utenfor og betyr det samme overalt.
 *
 * OPPSETT er formen, ikke fargen: tetthet, radius, skygge, skriftvalg i
 * ingressen og hvor mye farge det er i toppstripen. Tre av dem, valgbare i
 * bunnen av hver side. Et oppsett nevner aldri en farge ved navn – det peker
 * på tokenene over, så fargen kan endres ett sted.
 *
 * Ingen webfonter og ingen CSS-rammeverk. Alt her er skrevet for denne appen.
 */

/* --- Skifer, lys variant ------------------------------------------------ */

:root {
  color-scheme: light dark;

  --pille: 9999px;

  --sans: "Inter", "Segoe UI Variable Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --serif: ui-serif, Charter, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Flater */
  --lerret: #f2f4f6;
  --flate: #ffffff;
  --flate-hev: #ffffff;
  --flate-dempet: #eef1f4;
  --zebra-farge: #f9fafb;
  --kant: #dde2e8;
  --kant-sterk: #c0c8d2;

  /* Blekk */
  --blekk: #141a21;
  --blekk-dempet: #4c5865;
  --blekk-svak: #7b8694;

  /* Aksent – handlingene */
  --aksent: #2c4c8c;
  --aksent-mork: #1e3766;
  --aksent-blekk: #ffffff;
  --aksent-svak: #e8edf7;
  --aksent-kant: #a9bcdd;

  /* Bok – tallene */
  --bok-900: #171b20;
  --bok-700: #333b44;
  --bok: #4a545e;
  --bok-300: #c3c9d0;
  --bok-100: #e7eaee;
  --bok-50: #f3f5f7;
  --bok-blekk: #ffffff;

  /* Dypt krom, brukt av oppsettet «dyp» */
  --krom-dyp: #1b232c;
  --krom-dyp-blekk: #eef2f6;
  --krom-dyp-kant: #0f151b;

  --merke-bakgrunn: linear-gradient(150deg, #2c4c8c 0%, #16233d 100%);
  --merke-blekk: #ffffff;

  --ring: 0 0 0 3px rgba(44, 76, 140, 0.26);
  --skygge-tone: 20, 26, 33;

  /* Status – står utenfor paletten og betyr det samme overalt. */
  --ok-700: #1f6b45;
  --ok-100: #e3f1e9;
  --advarsel-700: #855410;
  --advarsel-100: #faeed8;
  --feil-700: #a5322f;
  --feil-100: #fbe6e4;
}

/* --- Skifer, mørk variant ----------------------------------------------- */

/* Ikke inverterte lyse verdier: egne toner, med lerretet tonet i skiferens
 * retning og aksenten løftet så den fortsatt bærer tekst. */
@media (prefers-color-scheme: dark) {
  :root {
    --lerret: #14171a;
    --flate: #1c2025;
    --flate-hev: #23282e;
    --flate-dempet: #181c20;
    --zebra-farge: #1f242a;
    --kant: #2c333a;
    --kant-sterk: #3e464f;

    --blekk: #e8ecf1;
    --blekk-dempet: #a3adb8;
    --blekk-svak: #78828d;

    --aksent: #6f9ae4;
    --aksent-mork: #93b6f0;
    --aksent-blekk: #0d1729;
    --aksent-svak: #1a2436;
    --aksent-kant: #35507f;

    --bok-900: #e3e8ee;
    --bok-700: #b9c2cc;
    --bok: #8e99a5;
    --bok-300: #3b434c;
    --bok-100: #222831;
    --bok-50: #1b2027;
    --bok-blekk: #12161b;

    --krom-dyp: #10141a;
    --krom-dyp-blekk: #e8ecf1;
    --krom-dyp-kant: #262d35;

    --merke-bakgrunn: linear-gradient(150deg, #6f9ae4 0%, #2c4c8c 100%);
    --merke-blekk: #0d1729;

    --ring: 0 0 0 3px rgba(111, 154, 228, 0.3);
    --skygge-tone: 0, 0, 0;

    --ok-700: #7cc79c;
    --ok-100: #16301f;
    --advarsel-700: #dfb168;
    --advarsel-100: #2f2513;
    --feil-700: #ec9089;
    --feil-100: #341d1b;
  }
}

/* ======================================================================== */
/* OPPSETT                                                                  */
/* ======================================================================== */

/* Oppsettene nevner ingen farge ved navn – de peker på tokenene over. */

/* --- Luftig -------------------------------------------------------------- */

/* Stor luft, myke former, gjennomsiktig krom. Oversikten leder med
 * KI-inngangen; menyen er for det du vet hvor er. */
[data-oppsett="luftig"] {
  --r-xs: 5px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --skygge: 0 1px 2px rgba(var(--skygge-tone), 0.05),
    0 1px 3px rgba(var(--skygge-tone), 0.04);
  --skygge-hev: 0 6px 20px rgba(var(--skygge-tone), 0.09),
    0 1px 3px rgba(var(--skygge-tone), 0.05);

  --brodtekst: 15.5px;
  --h1: 30px;
  --h2: 17.5px;
  --seksjon-topp: 38px;
  --tabell-tekst: 14px;
  --rad-y: 11px;
  --rad-x: 15px;
  --kort-pad: 18px 20px;
  --kort-verdi: 26px;
  --kort-min: 172px;
  --felt-pad: 9px 11px;
  --felt-tekst: 14.5px;
  --linje-pad: 7px 9px;
  --skjema-pad: 20px;
  --zebra: transparent;

  --ingress-font: var(--serif);
  --ingress-storrelse: 17px;

  --meny: 236px;
  --bredde: 1120px;
  --ki-bredde: 400px;

  --topp-flate: color-mix(in srgb, var(--flate) 92%, transparent);
  --topp-blekk: var(--blekk);
  --topp-kant: var(--kant);
  --meny-flate: transparent;
  --meny-kant: transparent;
  --meny-blekk: var(--blekk-dempet);
  --meny-tittel: var(--blekk-svak);
  --meny-hover: var(--flate-dempet);
  --meny-aktiv-flate: var(--aksent-svak);
  --meny-aktiv-blekk: var(--aksent-mork);
  --meny-aktiv-strek: transparent;
}

/* --- Tett ---------------------------------------------------------------- */

/* Slik regnskapsprogramvare faktisk ser ut: tette rader, små radier,
 * stripete tabeller, bredt lerret og ingen redaksjonell ingress. En som
 * fører regnskap for en levevei vil se flere linjer, ikke mer luft. */
[data-oppsett="tett"] {
  --r-xs: 3px;
  --r-sm: 4px;
  --r: 5px;
  --r-lg: 6px;
  --skygge: 0 1px 1px rgba(var(--skygge-tone), 0.06);
  --skygge-hev: 0 3px 10px rgba(var(--skygge-tone), 0.1);

  --brodtekst: 14px;
  --h1: 20px;
  --h2: 14.5px;
  --seksjon-topp: 24px;
  --tabell-tekst: 13px;
  --rad-y: 6px;
  --rad-x: 10px;
  --kort-pad: 11px 13px;
  --kort-verdi: 19px;
  --kort-min: 148px;
  --felt-pad: 6px 9px;
  --felt-tekst: 13.5px;
  --linje-pad: 5px 7px;
  --skjema-pad: 14px;
  --zebra: var(--zebra-farge);

  --ingress-font: var(--sans);
  --ingress-storrelse: 13.5px;

  --meny: 208px;
  --bredde: 1400px;
  --ki-bredde: 360px;

  --topp-flate: color-mix(in srgb, var(--flate) 95%, transparent);
  --topp-blekk: var(--blekk);
  --topp-kant: var(--kant);
  --meny-flate: transparent;
  --meny-kant: transparent;
  --meny-blekk: var(--blekk-dempet);
  --meny-tittel: var(--blekk-svak);
  --meny-hover: var(--flate-dempet);
  --meny-aktiv-flate: var(--aksent-svak);
  --meny-aktiv-blekk: var(--aksent-mork);
  --meny-aktiv-strek: var(--aksent);
}

/* --- Dyp ----------------------------------------------------------------- */

/* Toppstripen i skiferens dypeste tone og menyen som eget panel. Farge i
 * kromet, ikke bare i detaljene – for den som vil at produktet skal ha en
 * flate å kjenne igjen på avstand. */
[data-oppsett="dyp"] {
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 9px;
  --r-lg: 13px;
  --skygge: 0 1px 2px rgba(var(--skygge-tone), 0.07),
    0 1px 3px rgba(var(--skygge-tone), 0.04);
  --skygge-hev: 0 4px 16px rgba(var(--skygge-tone), 0.11);

  --brodtekst: 15px;
  --h1: 26px;
  --h2: 16.5px;
  --seksjon-topp: 32px;
  --tabell-tekst: 14px;
  --rad-y: 10px;
  --rad-x: 14px;
  --kort-pad: 16px 18px;
  --kort-verdi: 24px;
  --kort-min: 168px;
  --felt-pad: 8px 10px;
  --felt-tekst: 14px;
  --linje-pad: 6px 8px;
  --skjema-pad: 18px;
  --zebra: transparent;

  --ingress-font: var(--sans);
  --ingress-storrelse: 15.5px;

  --meny: 232px;
  --bredde: 1180px;
  --ki-bredde: 400px;

  --topp-flate: var(--krom-dyp);
  --topp-blekk: var(--krom-dyp-blekk);
  --topp-kant: var(--krom-dyp-kant);
  --meny-flate: var(--flate);
  --meny-kant: var(--kant);
  --meny-blekk: var(--blekk-dempet);
  --meny-tittel: var(--blekk-svak);
  --meny-hover: var(--flate-dempet);
  --meny-aktiv-flate: var(--aksent-svak);
  --meny-aktiv-blekk: var(--aksent-mork);
  --meny-aktiv-strek: var(--aksent);
}

/* --- Grunnlag ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lerret);
  color: var(--blekk);
  font: 400 var(--brodtekst) / 1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.hopp {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--aksent);
  color: var(--aksent-blekk);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.hopp:focus {
  top: 12px;
}

/* --- Toppstripe --------------------------------------------------------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 24px;
  min-height: 60px;
  background: var(--topp-flate);
  color: var(--topp-blekk);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--topp-kant);
}

.merke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.merke:hover {
  color: inherit;
  opacity: 0.85;
}

.merke-figur {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--merke-bakgrunn);
  color: var(--merke-blekk);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.topp-hoyre {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
}

.topp-selskap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.topp-selskap strong {
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topp-orgnr {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.aarsvelger {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aarsvelger .etikett {
  opacity: 0.6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.aar {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--pille);
  border: 1px solid transparent;
  color: inherit;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-decoration: none;
}
.aar:hover {
  color: inherit;
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.aar[aria-current="true"] {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 650;
}

/* Den innloggede og utloggingsknappen. Begge arver fargen fra toppstripen,
   som skifter med oppsettet - derfor currentColor og ikke et eget token. */
.topp-bruker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.topp-navn {
  opacity: 0.7;
  font-size: 13px;
}
/* Lenken til egne API-nøkler står ved siden av navnet og utloggingen. Den
   skal leses som en del av skallet, ikke som en aksentfarget lenke midt i
   toppstripen. */
.topp-lenke {
  color: inherit;
  opacity: 0.7;
  font-size: 13px;
}
.topp-lenke:hover {
  color: inherit;
  opacity: 1;
}
.utlogg {
  padding: 4px 11px;
  border-radius: var(--pille);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.utlogg:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* --- Skall og sidemeny -------------------------------------------------- */

.skall {
  display: grid;
  grid-template-columns: var(--meny) minmax(0, 1fr);
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 0 24px;
}
.skall.uten-meny {
  grid-template-columns: minmax(0, 1fr);
}

.meny {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  margin: 26px 20px 40px 0;
  padding: 8px 10px 12px;
  background: var(--meny-flate);
  border: 1px solid var(--meny-kant);
  border-radius: var(--r);
}

.meny-gruppe + .meny-gruppe {
  margin-top: 18px;
}
.meny-tittel {
  margin: 0 0 6px 10px;
  color: var(--meny-tittel);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.meny a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--meny-blekk);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.35;
}
.meny a:hover {
  background: var(--meny-hover);
  color: var(--blekk);
}
.meny a.aktiv {
  background: var(--meny-aktiv-flate);
  color: var(--meny-aktiv-blekk);
  font-weight: 600;
}
/* Strek langs den aktive lenken – bransje- og dnb-designet bruker den, ki
 * lar den være gjennomsiktig. */
.meny a.aktiv::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--pille);
  background: var(--meny-aktiv-strek);
}
.meny-ikon {
  flex: none;
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
}
.meny a.aktiv .meny-ikon {
  opacity: 1;
}
/* KI-gruppen får aksentfargen i de designene der aksenten ikke er grønn. */
.meny-gruppe.ki .meny-tittel {
  color: var(--aksent);
}

main {
  min-width: 0;
  padding: 30px 0 64px 28px;
}
.skall.uten-meny main {
  padding-left: 0;
}

/* --- Sidehode ----------------------------------------------------------- */

.sidehode {
  margin-bottom: 24px;
}
h1 {
  margin: 0;
  color: var(--bok-900);
  font-size: var(--h1);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.022em;
}
.sidehode .stikkord {
  margin: 0 0 8px;
  color: var(--blekk-svak);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.ingress {
  max-width: 64ch;
  margin: 12px 0 0;
  color: var(--blekk-dempet);
  font-family: var(--ingress-font);
  font-size: var(--ingress-storrelse);
  line-height: 1.6;
}

h2 {
  margin: var(--seksjon-topp) 0 12px;
  color: var(--blekk);
  font-size: var(--h2);
  font-weight: 650;
  letter-spacing: -0.012em;
}
h2:first-child {
  margin-top: 0;
}
h3 {
  margin: 22px 0 8px;
  font-size: 14.5px;
  font-weight: 650;
}

p {
  margin: 0 0 12px;
}
.tekst {
  max-width: 68ch;
}
.hjelp {
  max-width: 68ch;
  color: var(--blekk-dempet);
  font-size: 13.5px;
  line-height: 1.55;
}
.hjelp:last-child {
  margin-bottom: 0;
}

a {
  color: var(--aksent-mork);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--aksent);
  text-decoration-color: currentColor;
}

code {
  padding: 1.5px 5px;
  border-radius: var(--r-xs);
  background: var(--flate-dempet);
  border: 1px solid var(--kant);
  color: var(--blekk-dempet);
  font-family: var(--mono);
  font-size: 0.875em;
}

/* --- KI-inngangen ------------------------------------------------------- */

/* Hovedflaten på oversikten: spør regnskapet, eller slipp inn et bilag.
 * Dette er det som gjør ki-designet KI-forward – tallene kommer etterpå. */
.ki-inngang {
  margin-bottom: 26px;
  padding: 20px 22px 18px;
  border: 1px solid var(--kant);
  border-radius: var(--r-lg);
  background: var(--flate);
  box-shadow: var(--skygge-hev);
}
.ki-inngang-hode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--blekk-dempet);
  font-size: 13px;
}
.ki-inngang-hode .gnist {
  color: var(--aksent);
  font-size: 14px;
}
.ki-inngang-hode strong {
  color: var(--blekk);
  font-weight: 600;
}

/* Spørrefeltet: én linje med knappen inni, som en samtaleinngang. Feltet på
 * samtalesiden er en textarea som vokser; på oversikten er det én linje. */
.ki-sporre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--pille);
  background: var(--flate-hev);
}
.ki-sporre:focus-within {
  border-color: var(--aksent);
  box-shadow: var(--ring);
}
.ki-sporre input,
.ki-sporre textarea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.ki-sporre input:focus,
.ki-sporre textarea:focus {
  outline: none;
  box-shadow: none;
}
/* Knappen skal stå ved den nederste linjen når feltet har vokst. */
.ki-sporre {
  align-items: flex-end;
}
.ki-sporre button {
  margin-bottom: 1px;
}

.sporre-hjelp {
  margin: 8px 0 0;
  color: var(--blekk-svak);
  font-size: 12.5px;
}
.ki-sporre button {
  flex: none;
  border-radius: var(--pille);
  padding: 8px 18px;
}

/* Under feltet: filopplasting og forslagene som venter. */
.ki-inngang-bunn {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ki-slipp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ki-slipp input[type="file"] {
  width: auto;
  max-width: 280px;
  padding: 6px 10px;
  font-size: 13px;
}
.ki-inngang-hint {
  margin: 0;
  color: var(--blekk-svak);
  font-size: 12.5px;
}
.ki-inngang-varsel {
  max-width: 74ch;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--kant);
  color: var(--feil-700);
  font-size: 13px;
  line-height: 1.5;
}

/* Kø-varselet: leire, og alltid en lenke videre. */
.ki-ko {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--aksent-kant);
  border-radius: var(--pille);
  background: var(--aksent-svak);
  color: var(--aksent-mork);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ki-ko:hover {
  background: color-mix(in srgb, var(--aksent) 18%, var(--aksent-svak));
  color: var(--aksent-mork);
}

/* --- Kort --------------------------------------------------------------- */

.kort-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kort-min), 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.kort {
  padding: var(--kort-pad);
  border: 1px solid var(--kant);
  border-radius: var(--r);
  background: var(--flate);
  box-shadow: var(--skygge);
}
.kort .etikett {
  color: var(--blekk-dempet);
  font-size: 12.5px;
  line-height: 1.4;
}
.kort .verdi {
  margin-top: 4px;
  color: var(--bok-900);
  font-size: var(--kort-verdi);
  font-weight: 650;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.kort .verdi .enhet {
  color: var(--blekk-svak);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
}
.kort .fotnote {
  margin-top: 6px;
  color: var(--blekk-svak);
  font-size: 12.5px;
}
.kort .verdi.negativ {
  color: var(--feil-700);
}

.panel {
  padding: 18px 20px;
  border: 1px solid var(--kant);
  border-radius: var(--r);
  background: var(--flate);
}
.panel > :last-child {
  margin-bottom: 0;
}

/* --- Tabeller ----------------------------------------------------------- */

.tabellramme {
  overflow-x: auto;
  border: 1px solid var(--kant);
  border-radius: var(--r);
  background: var(--flate);
  box-shadow: var(--skygge);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tabell-tekst);
}
.tabellramme > table {
  border: none;
}

th,
td {
  padding: var(--rad-y) var(--rad-x);
  text-align: left;
  border-bottom: 1px solid var(--kant);
  vertical-align: top;
}
thead th {
  background: var(--flate-dempet);
  color: var(--blekk-dempet);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
tbody tr:last-child > td {
  border-bottom: none;
}
tbody tr:nth-child(even) > td {
  background: var(--zebra);
}
tbody tr:hover > td {
  background: color-mix(in srgb, var(--bok-50) 70%, transparent);
}

td.tall,
th.tall {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.negativ {
  color: var(--feil-700);
}

/* Radskjema: et lite skjema inne i en tabellrad, der handlingen trenger et
   par opplysninger - som dato og betalingsfrist når en ordre faktureres. */
.radskjema {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.radskjema .radfelt {
  margin: 0;
  font-size: 12px;
  color: var(--blekk-dempet);
  font-weight: 550;
}
.radskjema input {
  width: auto;
  margin: 0;
}
.radskjema input.radtall {
  width: 5.5em;
  text-align: right;
}

/* Sumlinjer i sjøgrønt – tallene tilhører hovedboken i alle tre design. */
tr.sum > td {
  background: var(--bok-50);
  border-top: 1px solid var(--bok-300);
  font-weight: 650;
  color: var(--bok-900);
}
tr.sum-tung > td {
  background: var(--bok-100);
  border-top: 2px solid var(--bok);
  font-weight: 700;
  color: var(--bok-900);
}
tr.delsum > td {
  border-top: 1px solid var(--kant-sterk);
  font-weight: 650;
}
tr.sum:hover > td,
tr.sum-tung:hover > td,
tr.delsum:hover > td {
  background: var(--bok-100);
}
td.konto {
  color: var(--blekk-svak);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fotlinje under en tabell: antall og sum, slik regnskapsprogram gjør det. */
.tabellfot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--blekk-dempet);
  font-size: 13px;
}
.tabellfot .skille {
  color: var(--kant-sterk);
}

/* Bla mellom sider i en lang liste. Enden av spennet vises som en utgrået
   knapp og ikke ved å fjerne den: forsvant «Neste» på siste side, flyttet
   «Forrige» seg dit musepekeren nettopp var. */
.sider {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.sider [aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- Merkelapper -------------------------------------------------------- */

.merkelapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 9px;
  border-radius: var(--pille);
  border: 1px solid transparent;
  background: var(--flate-dempet);
  color: var(--blekk-dempet);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.merkelapp.ok {
  background: var(--ok-100);
  border-color: color-mix(in srgb, var(--ok-700) 25%, transparent);
  color: var(--ok-700);
}
.merkelapp.advarsel {
  background: var(--advarsel-100);
  border-color: color-mix(in srgb, var(--advarsel-700) 25%, transparent);
  color: var(--advarsel-700);
}
.merkelapp.feil {
  background: var(--feil-100);
  border-color: color-mix(in srgb, var(--feil-700) 25%, transparent);
  color: var(--feil-700);
}
.merkelapp.ki {
  background: var(--aksent-svak);
  border-color: var(--aksent-kant);
  color: var(--aksent-mork);
}
.merkelapp.rolig {
  background: var(--bok-50);
  border-color: var(--bok-300);
  color: var(--bok-900);
}
.merkelapp code {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 11.5px;
}

/* --- Meldinger ---------------------------------------------------------- */

.melding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 78ch;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--kant);
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.55;
}
.melding::before {
  flex: none;
  font-size: 14px;
  line-height: 1.5;
}
.melding.ok {
  background: var(--ok-100);
  border-color: color-mix(in srgb, var(--ok-700) 22%, transparent);
  color: var(--ok-700);
}
.melding.ok::before {
  content: "✓";
  font-weight: 700;
}
.melding.feil {
  background: var(--feil-100);
  border-color: color-mix(in srgb, var(--feil-700) 22%, transparent);
  color: var(--feil-700);
}
.melding.feil::before {
  content: "!";
  font-weight: 700;
}
.melding.info {
  background: var(--bok-50);
  border-color: var(--bok-300);
  color: var(--bok-900);
}
.melding.info::before {
  content: "i";
  font-style: italic;
  font-weight: 700;
}
.melding a {
  color: inherit;
  font-weight: 600;
}
.melding > div > :last-child {
  margin-bottom: 0;
}

/* --- Tom tilstand ------------------------------------------------------- */

.tomt {
  padding: 26px 22px;
  border: 1px dashed var(--kant-sterk);
  border-radius: var(--r);
  background: var(--flate);
  text-align: center;
}
.tomt .tomt-figur {
  font-size: 20px;
  line-height: 1;
  opacity: 0.5;
}
.tomt p {
  max-width: 48ch;
  margin: 8px auto 0;
  color: var(--blekk-dempet);
  font-size: 13.5px;
}
.tomt .knapp {
  margin-top: 14px;
}

/* --- Skjemaer ----------------------------------------------------------- */

form.skjema {
  max-width: 640px;
  padding: var(--skjema-pad);
  border: 1px solid var(--kant);
  border-radius: var(--r);
  background: var(--flate);
  box-shadow: var(--skygge);
}
form.skjema.bred {
  max-width: none;
}
form.skjema > :last-child {
  margin-bottom: 0;
}

.felt {
  margin-bottom: 16px;
}
.felt:last-child {
  margin-bottom: 0;
}
.felt-smal input,
.felt-smal select,
input.smal,
select.smal {
  max-width: 210px;
}
.felt-halv input,
.felt-halv select,
input.felt-halv,
select.felt-halv {
  max-width: 320px;
}
.felt-vokser {
  flex: 1 1 260px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: var(--blekk);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.felt .hjelp {
  margin: 6px 0 0;
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  padding: var(--felt-pad);
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-sm);
  background: var(--flate-hev);
  color: var(--blekk);
  font: inherit;
  font-size: var(--felt-tekst);
}
input::placeholder {
  color: var(--blekk-svak);
}
input:hover,
select:hover {
  border-color: color-mix(in srgb, var(--aksent) 45%, var(--kant-sterk));
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--aksent);
  box-shadow: var(--ring);
}
input[type="file"] {
  padding: 8px 10px;
  background: var(--flate-dempet);
  cursor: pointer;
}
/* Beløpsfelt høyrestilles som i en oppstilling. Årstall gjør det ikke. */
input[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

.avkryss {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.avkryss input[type="checkbox"],
.avkryss input[type="radio"] {
  width: auto;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--aksent);
}
.avkryss-gruppe {
  margin-bottom: 16px;
}
.avkryss-gruppe > label:first-child {
  margin-bottom: 8px;
}

/* En valgfri del av et skjema - «bokfør kjøpet samtidig» - rammes inn, slik at
   det er tydelig hvor den slutter og resten av skjemaet fortsetter. */
fieldset {
  border: 1px solid var(--kant);
  border-radius: 8px;
  padding: 14px 16px 4px;
  margin: 0 0 16px;
}
fieldset > legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blekk-dempet);
}
fieldset > label:not(.avkryss) {
  display: block;
  margin-bottom: 8px;
}

.rad {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.rad > * {
  margin-bottom: 0;
}

/* Verktøylinje over en tabell: søk, filter og hovedhandling. */
.verktoylinje {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.verktoylinje .hoyre {
  margin-left: auto;
}

/* --- Knapper ------------------------------------------------------------ */

.knapp,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--aksent);
  color: var(--aksent-blekk);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.knapp:hover,
button:hover {
  background: var(--aksent-mork);
  color: var(--aksent-blekk);
}
button:active {
  transform: translateY(0.5px);
}

.knapp-stille,
button.stille {
  background: var(--flate-hev);
  border-color: var(--kant-sterk);
  color: var(--blekk);
}
.knapp-stille:hover,
button.stille:hover {
  background: var(--flate-dempet);
  border-color: var(--blekk-svak);
  color: var(--blekk);
}

/* Bokføring er hovedboken, ikke KI-en: den knappen er alltid sjøgrønn, slik
 * at handlingen ser like «regnskap» ut i alle tre design. */
.knapp-bokfor,
button.bokfor {
  background: var(--bok);
  color: var(--bok-blekk);
  border-color: transparent;
}
.knapp-bokfor:hover,
button.bokfor:hover {
  background: var(--bok-700);
  color: var(--bok-blekk);
}

button.fare {
  background: transparent;
  border-color: color-mix(in srgb, var(--feil-700) 35%, transparent);
  color: var(--feil-700);
}
button.fare:hover {
  background: var(--feil-100);
  color: var(--feil-700);
}

button.liten,
.knapp.liten {
  padding: 5px 11px;
  font-size: 13px;
}

button.hake {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--r-xs);
  border-color: var(--kant-sterk);
  background: var(--flate-hev);
  color: var(--ok-700);
  font-size: 13px;
}
button.hake:hover {
  background: var(--bok-50);
  border-color: var(--bok);
  color: var(--bok);
}
button.hake[aria-pressed="true"] {
  background: var(--ok-100);
  border-color: color-mix(in srgb, var(--ok-700) 40%, transparent);
}

.handlinger {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Et skjema som bor i en tabellrad - et datofelt og en knapp ved siden av
 * hverandre, uten panelet et vanlig skjema har. Feltene er smale her: en
 * handlingskolonne skal ikke dra tabellen bredere enn tallene i den. */
.radskjema {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.radskjema input,
.radskjema select {
  width: auto;
  max-width: 170px;
}

/* --- Bilagslinjer ------------------------------------------------------- */

.bilaglinjer {
  margin: 8px 0 0;
}
.bilaglinjer th {
  background: transparent;
  border-bottom: 1px solid var(--kant);
}
.bilaglinjer td {
  padding: 5px 8px;
}
.bilaglinjer td:first-child,
.bilaglinjer th:first-child {
  padding-left: 0;
}
.bilaglinjer td:last-child,
.bilaglinjer th:last-child {
  padding-right: 0;
}
.bilaglinjer input,
.bilaglinjer select {
  padding: var(--linje-pad);
}
.bilaglinjer tbody tr:hover > td,
.bilaglinjer tbody tr:nth-child(even) > td {
  background: transparent;
}
.bilaglinjer .konto-felt {
  max-width: 110px;
}
.bilaglinjer .belop-felt {
  max-width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bilaglinjer .kol-konto {
  width: 52%;
}

/* --- Utvidbar seksjon --------------------------------------------------- */

.utvid {
  margin-top: 16px;
}
.utvid > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--pille);
  background: var(--flate-hev);
  color: var(--blekk-dempet);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.utvid > summary::-webkit-details-marker {
  display: none;
}
.utvid > summary::before {
  content: "▸";
  font-size: 10px;
}
.utvid[open] > summary::before {
  content: "▾";
}
.utvid > summary:hover {
  border-color: var(--blekk-svak);
  color: var(--blekk);
}
.utvid[open] > summary {
  margin-bottom: 12px;
}

.smaltekst {
  font-size: 13px;
}

/* --- KI-flater ---------------------------------------------------------- */

/* Sammensatte selektorer med vilje: `form.skjema` og `.panel` er mer
 * spesifikke enn en enkel klasse og ville ellers overstyre kanten. */
.ki-flate,
.panel.ki-flate,
form.skjema.ki-flate {
  border-left: 3px solid var(--aksent);
  background: color-mix(in srgb, var(--aksent-svak) 60%, var(--flate));
}

.forslag,
form.skjema.forslag {
  max-width: none;
  margin-bottom: 16px;
  border-left: 3px solid var(--aksent);
}
.forslag-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.forslag-tittel {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.forslag-lapper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.forslag-meta {
  margin: 6px 0 0;
  color: var(--blekk-svak);
  font-size: 13px;
}
.forslag-begrunnelse {
  max-width: 74ch;
  margin: 8px 0 0;
  color: var(--blekk-dempet);
  font-size: 13.5px;
}
.forslag-sperre {
  margin: 8px 0 0;
  color: var(--feil-700);
  font-size: 13.5px;
  font-weight: 500;
}

/* --- Samtale ------------------------------------------------------------ */

.samtale {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.boble {
  max-width: 74ch;
  padding: 14px 18px;
  border: 1px solid var(--kant);
  border-radius: var(--r-lg);
  background: var(--flate);
}
.boble .rolle {
  color: var(--blekk-svak);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.boble .tekst {
  margin-top: 6px;
  white-space: pre-wrap;
  max-width: none;
}
.boble .verktoy {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--kant);
  color: var(--blekk-svak);
  font-size: 12.5px;
}
.boble.bruker {
  align-self: flex-end;
  background: var(--flate-dempet);
  border-bottom-right-radius: var(--r-xs);
}
.boble.assistent {
  align-self: flex-start;
  border-left: 3px solid var(--aksent);
  border-bottom-left-radius: var(--r-xs);
}

/* --- Strømmende svar ---------------------------------------------------- */

/* Statuslinjen over svaret mens det arbeides fram: én pulserende prikk og
 * teksten som forklarer hva modellen holder på med akkurat nå. */
.strom-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--blekk-dempet);
  font-size: 12.5px;
}
.strom-puls {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--pille);
  background: var(--aksent);
  animation: puls 1.4s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.strom-status.ferdig {
  color: var(--ok-700);
}
.strom-status.ferdig .strom-puls {
  background: var(--ok-700);
  animation: none;
}
.strom-status.feil {
  color: var(--feil-700);
}
.strom-status.feil .strom-puls {
  background: var(--feil-700);
  animation: none;
}

/* Markøren står sist i teksten så lenge den vokser. */
.strom-markor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--aksent);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

.verktoy-spor {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.verktoy-spor:empty {
  display: none;
}

.eksempelrad {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
button.eksempel {
  padding: 5px 13px;
  border-radius: var(--pille);
  border: 1px solid var(--kant-sterk);
  background: var(--flate-hev);
  color: var(--blekk-dempet);
  font-size: 13px;
  font-weight: 500;
}
button.eksempel:hover {
  border-color: var(--aksent);
  background: var(--aksent-svak);
  color: var(--aksent-mork);
}

/* --- Markdown i svarene ------------------------------------------------- */

/* Modellen svarer i Markdown; samtale.js bygger DOM-noder av den. Blokkene
 * skal se ut som resten av appen, ikke som en råtekstdump. */
.boble .tekst.markdown {
  white-space: normal;
}
.tekst.markdown > :first-child {
  margin-top: 0;
}
.tekst.markdown > :last-child {
  margin-bottom: 0;
}
.tekst.markdown p {
  margin: 0 0 10px;
}
.tekst.markdown h3,
.tekst.markdown h4 {
  margin: 16px 0 6px;
  font-size: 14.5px;
  font-weight: 650;
}
.tekst.markdown ul,
.tekst.markdown ol {
  margin: 0 0 10px;
  padding-left: 22px;
}
.tekst.markdown li {
  margin-bottom: 4px;
}
.tekst.markdown blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--kant-sterk);
  color: var(--blekk-dempet);
}
.tekst.markdown pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--kant);
  border-radius: var(--r-sm);
  background: var(--flate-dempet);
}
.tekst.markdown pre code {
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
}
.tekst.markdown hr {
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--kant);
}
.tekst.markdown .tabellramme {
  margin: 0 0 10px;
  box-shadow: none;
}
.tekst.markdown th.sentrert,
.tekst.markdown td.sentrert {
  text-align: center;
}

/* --- KI-panelet --------------------------------------------------------- */

/* Chatten står til høyre på hver side. Den er et lag over lerretet, ikke en
 * tredje kolonne i .skall: skallet og bunnteksten har max-width og margin
 * auto, så et padding-right på body sentrerer dem selv i resten av bredden.
 * Da slipper vi å stille --bredde på nytt i alle tre oppsettene, og den
 * klistrede toppstripen og menyen trenger ikke røres.
 *
 * Tilstanden står på <html data-ki> og kommer fra en informasjonskapsel, så
 * siden rendres riktig med én gang – uten et glimt av feil layout. */
.kipanel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--ki-bredde);
  background: var(--flate);
  border-left: 1px solid var(--kant);
}
.kipanel-hode {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--kant);
  color: var(--blekk-dempet);
  font-size: 13px;
}
.kipanel-hode strong {
  color: var(--blekk);
  font-weight: 600;
}
.kipanel-modell {
  color: var(--blekk-svak);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kipanel-knapper {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.kipanel-knapper a {
  padding: 3px 8px;
  border-radius: var(--r-sm);
  color: var(--blekk-dempet);
  font-size: 13px;
  text-decoration: none;
}
.kipanel-knapper a:hover {
  background: var(--flate-dempet);
  color: var(--blekk);
}

/* Tråden ruller for seg selv, slik at feltet nederst alltid står stille. */
.kipanel-trad {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 16px;
}
.kipanel-fot {
  flex: none;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--kant);
  scroll-margin-top: 76px;
}
.kipanel-historikk {
  flex: none;
  margin: 0 16px 12px;
}
.kipanel .melding {
  margin: 12px 16px 0;
}
/* Boblene er skrevet for en artikkelbredde; i en 400 px kolonne må de bruke
 * plassen de har. */
.kipanel .boble {
  max-width: none;
  padding: 11px 13px;
}
.kipanel .boble.bruker {
  align-self: stretch;
}
.kipanel .tomt {
  padding: 18px 4px;
}

/* Knappen står alltid i dokumentet, men vises bare når panelet er lagt bort. */
/* Godkjenningskortet: der assistentens forslag møter et menneske. Feltene er
 * redigerbare, og kortet sier hva som skjer og hvordan det tas tilbake -
 * begge deler før du trykker, ikke etterpå. */
.handlingskort {
  flex: none;
  margin: 0 16px 12px;
  padding: 14px 15px 12px;
  border: 1px solid var(--kant-sterk);
  border-left: 3px solid var(--aksent);
  border-radius: var(--r);
  background: var(--flate-hev);
}
.handlingskort-hode {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.handlingskort-hode strong {
  font-size: 14px;
  font-weight: 600;
}
.handlingskort .felt {
  margin-bottom: 8px;
}
.handlingskort .hjelp {
  margin: 4px 0 0;
  font-size: 12px;
}
.handlingskort-knapper {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.handlingskort-avvis {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--kant);
}
.handlingskort-avvis input {
  flex: 1 1 auto;
  min-width: 0;
}
/* Det som ikke kan kalles tilbake skal se annerledes ut enn det som kan. */
.handlingskort.risiko-hoy {
  border-left-color: var(--advarsel-700);
}
.handlingskort.risiko-utad {
  border-left-color: var(--feil-700);
}
.handlingskort-advarsel {
  margin: 0 0 8px;
  color: var(--feil-700);
  font-size: 12.5px;
  font-weight: 600;
}

/* Et felt assistenten har fylt ut ser annerledes ut enn et du skrev selv.
 * Uten det skillet vet du ikke hva du faktisk har kontrollert. */
.ki-fylt {
  border-color: var(--aksent) !important;
  background: color-mix(in srgb, var(--aksent-svak) 45%, var(--flate));
}

/* Sporet i samtalen: hva assistenten gjorde, eller klargjorde. */
.handlingsspor {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--kant);
  border-radius: var(--r-sm);
  background: var(--flate-dempet);
  font-size: 13px;
}
.handlingsspor-navn {
  font-weight: 600;
  font-family: var(--mono);
  font-size: 12.5px;
}
.handlingsspor-knapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: var(--blekk-svak);
  font-size: 12.5px;
}

/* Nivåvelgeren står i foten, alltid synlig. */
.autovelger {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.autovelger .etikett {
  margin-right: 2px;
}
.autovelger button {
  padding: 3px 9px;
  border: 1px solid var(--kant);
  border-radius: var(--pille);
  background: none;
  color: var(--blekk-svak);
  font-size: 12px;
  font-weight: 500;
}
.autovelger button:hover {
  border-color: var(--kant-sterk);
  color: var(--blekk);
}
.autovelger button[aria-current="true"] {
  border-color: var(--aksent);
  background: color-mix(in srgb, var(--aksent-svak) 60%, var(--flate));
  color: var(--aksent-mork);
  font-weight: 650;
}

.kipanel-apne {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 31;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--pille);
  background: var(--flate-hev);
  box-shadow: var(--skygge-hev);
  color: var(--blekk);
  font-size: 14px;
  text-decoration: none;
}
.kipanel-apne:hover {
  border-color: var(--aksent);
  color: var(--aksent);
}

[data-ki="panel"] body {
  padding-right: var(--ki-bredde);
}
[data-ki="skjult"] .kipanel {
  transform: translateX(100%);
  visibility: hidden;
}
[data-ki="skjult"] .kipanel-apne {
  display: inline-flex;
}
[data-ki="full"] body {
  padding-right: 0;
  overflow: hidden;
}
[data-ki="full"] .kipanel {
  width: 100%;
  border-left: none;
}
/* I fullskjerm skal teksten fortsatt ha lesbar bredde. */
[data-ki="full"] .kipanel-trad,
[data-ki="full"] .kipanel-fot > *,
[data-ki="full"] .kipanel-historikk,
[data-ki="full"] .kipanel .melding {
  max-width: 820px;
  margin-inline: auto;
}
[data-ki="full"] .kipanel .boble {
  max-width: 74ch;
}
[data-ki="full"] .kipanel .boble.bruker {
  align-self: flex-end;
}

/* Samtalefeltet står under siste svar, ikke klistret over det. Etter et
 * spørsmål sender tjeneren brukeren til #siste, så det nye svaret og feltet
 * er det man ser – uten en linje JavaScript. */
.samtalefot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--kant);
  scroll-margin-top: 76px;
}
.samtalefot .hjelp {
  margin: 10px 0 0;
}

/* --- Lenkerad, temavelger og bunn --------------------------------------- */

.lenkerad {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 14px;
}
.lenkerad .skille {
  color: var(--kant-sterk);
}

footer {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 22px 24px 40px;
  border-top: 1px solid var(--kant);
  color: var(--blekk-svak);
  font-size: 13px;
}
footer p {
  max-width: 78ch;
  margin: 0;
}

.temavelger {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.temavelger .etikett {
  margin-right: 2px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.temavelger a {
  padding: 4px 12px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--pille);
  color: var(--blekk-dempet);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.temavelger a:hover {
  border-color: var(--blekk-svak);
  color: var(--blekk);
}
.temavelger a[aria-current="true"] {
  background: var(--aksent-svak);
  border-color: var(--aksent-kant);
  color: var(--aksent-mork);
}

/* --- Designvelger og palettgalleri -------------------------------------- */

.designvelger {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.designlenke {
  font-size: 12.5px;
  font-weight: 600;
}

/* Rollekortene på /design viser hva de to fargene brukes til. */
.rollekort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

.swatcher {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.swatch {
  flex: 1 1 0;
  height: 40px;
  border-radius: var(--r-xs);
  border: 1px solid color-mix(in srgb, var(--blekk) 12%, transparent);
}
.swatch.s-bok-900 {
  background: var(--bok-900);
}
.swatch.s-bok {
  background: var(--bok);
}
.swatch.s-bok-300 {
  background: var(--bok-300);
}
.swatch.s-bok-100 {
  background: var(--bok-100);
}
.swatch.s-bok-50 {
  background: var(--bok-50);
}
.swatch.s-aksent-mork {
  background: var(--aksent-mork);
}
.swatch.s-aksent {
  background: var(--aksent);
}
.swatch.s-aksent-kant {
  background: var(--aksent-kant);
}
.swatch.s-aksent-svak {
  background: var(--aksent-svak);
}
.swatch.s-lerret {
  background: var(--lerret);
}
.swatch-etiketter {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 5px 0 0;
  color: var(--blekk-svak);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* --- Hjelpeklasser ------------------------------------------------------ */

.usynlig {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tall {
  font-variant-numeric: tabular-nums;
}
.luft-topp {
  margin-top: 26px;
}

/* --- Smale skjermer ----------------------------------------------------- */

/* Under denne bredden er det ikke plass til både innhold og panel ved siden
 * av hverandre. Panelet blir et overlegg i stedet – samme markup, samme
 * tilstand, bare uten å reservere plass. Bruddpunktet er sitt eget: 860 er
 * der menyen blir en pillerad, og de to har ingenting med hverandre å gjøre. */
@media (max-width: 1180px) {
  [data-ki="panel"] body {
    padding-right: 0;
  }
  .kipanel {
    width: min(var(--ki-bredde), 100%);
    box-shadow: var(--skygge-hev);
  }
}

@media (max-width: 620px) {
  .kipanel {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .skall {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px;
  }
  .meny {
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 14px 0 12px;
    border: none;
    border-bottom: 1px solid var(--kant);
    border-radius: 0;
    background: transparent;
    display: flex;
    gap: 18px;
  }
  .meny-gruppe + .meny-gruppe {
    margin-top: 0;
  }
  .meny-gruppe {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .meny-tittel {
    margin: 0;
    white-space: nowrap;
  }
  .meny a {
    padding: 6px 12px;
    border: 1px solid var(--kant);
    border-radius: var(--pille);
    white-space: nowrap;
  }
  .meny a.aktiv::before {
    display: none;
  }
  .meny-ikon {
    display: none;
  }
  main {
    padding: 22px 0 48px;
  }
  h1 {
    font-size: calc(var(--h1) * 0.8);
  }
  /* Nøkkeltallene skal stå på én linje også i to smale kolonner. */
  .kort .verdi {
    font-size: calc(var(--kort-verdi) * 0.78);
    letter-spacing: -0.02em;
  }
  .topp {
    padding: 10px 16px;
    gap: 10px;
  }
  .topp-hoyre {
    width: 100%;
    margin-left: 0;
  }
  .ki-sporre {
    flex-wrap: wrap;
    border-radius: var(--r);
    padding: 10px;
  }
  .ki-sporre input {
    flex-basis: 100%;
    padding: 4px 6px;
  }
  .ki-sporre button {
    width: 100%;
  }
  .ki-ko {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Utskrift ----------------------------------------------------------- */

@media print {
  .topp,
  .meny,
  footer,
  .hopp,
  form,
  .lenkerad,
  .ki-inngang,
  .kipanel,
  .kipanel-apne,
  .verktoylinje {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    /* Panelet er borte på papir; plassen det tok skal ikke bli stående. */
    padding-right: 0 !important;
  }
  .skall {
    display: block;
    max-width: none;
    padding: 0;
  }
  main {
    padding: 0;
  }
  .tabellramme,
  .kort {
    border-color: #999;
    box-shadow: none;
    break-inside: avoid;
  }
  thead th {
    background: #eee;
  }
  h1 {
    color: #000;
    font-size: 16pt;
  }
}

/* --- Diagrammer --------------------------------------------------------- */

/* Diagrammene er SVG uten JavaScript. Fargene hentes herfra, så de følger
   oppsettet og lys/mørk-modus uten å vite om det. */
.graf {
  display: block;
  width: 100%;
  height: 240px;
  margin: 6px 0 2px;
  overflow: visible;
}
.graf-akse {
  stroke: var(--kant-sterk);
  stroke-width: 1;
}
.graf-soyle {
  fill: var(--aksent);
}
.graf-sammenligning {
  fill: var(--aksent-kant);
}
.graf-linje {
  fill: none;
  stroke: var(--aksent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.graf-prikk {
  fill: var(--aksent);
}
.graf-navn {
  fill: var(--blekk-svak);
  font-size: 11px;
  font-family: var(--sans);
}
/* Forklaringen står ved siden av diagrammet, ikke inni det: en SVG med
   tekstbokser blir uleselig på små skjermer. */
.graf-tegn {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--blekk-dempet);
  margin-bottom: 4px;
}
.graf-tegn span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  background: var(--aksent);
}
.graf-tegn span.sammenligning::before {
  background: var(--aksent-kant);
}

/* ======================================================================== */
/* OFFENTLIG LANDINGSSIDE                                                   */
/* ======================================================================== */

body.landing {
  --landing-mork: #111d32;
  --landing-bla: #31599d;
  --landing-bla-lys: #eaf0fb;
  --landing-krem: #f7f8fa;
  --landing-gronn: #267251;
  --landing-maks: 1180px;
  background: #fff;
  color: #172033;
  font-size: 16px;
  line-height: 1.6;
}
.landing main {
  padding: 0;
  overflow: hidden;
}
.landing a {
  color: inherit;
}
.landing-topp {
  position: relative;
  z-index: 40;
  height: 74px;
  border-bottom: 1px solid #e8ebf0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}
.landing-nav {
  max-width: var(--landing-maks);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.landing-merke {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--landing-mork) !important;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.landing-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #3e68ad, #182d50);
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: -0.05em;
  box-shadow: 0 5px 14px rgba(28, 49, 84, 0.2);
}
.landing-lenker {
  display: flex;
  gap: 29px;
  margin-left: auto;
}
.landing-lenker a,
.landing-logginn {
  color: #505b6d;
  font-size: 13.5px;
  font-weight: 570;
  text-decoration: none;
}
.landing-lenker a:hover,
.landing-logginn:hover {
  color: var(--landing-bla);
}
.landing-navhandlinger {
  display: flex;
  align-items: center;
  gap: 18px;
}
.landing-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 9px;
  background: var(--landing-bla);
  color: #fff !important;
  font-weight: 680;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(49, 89, 157, 0.2);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.landing-knapp:hover {
  transform: translateY(-1px);
  background: #274b86;
  box-shadow: 0 10px 26px rgba(49, 89, 157, 0.28);
}
.landing-knapp-liten { padding: 8px 16px; font-size: 13px; }
.landing-knapp-stor { padding: 13px 21px; font-size: 14.5px; }
.landing-knapp-full { width: 100%; }
.landing-hero {
  position: relative;
  padding: 80px 0 96px;
  background:
    radial-gradient(circle at 80% 12%, rgba(103, 136, 192, 0.13), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8fafe 100%);
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: radial-gradient(#9daac0 0.65px, transparent 0.65px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, transparent, #000 35%, #000 80%, transparent);
}
.landing-hero-innhold {
  position: relative;
  z-index: 1;
  max-width: var(--landing-maks);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(390px, 0.84fr) minmax(610px, 1.25fr);
  align-items: center;
  gap: 28px;
}
.landing-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--landing-bla);
  font-size: 11px;
  font-weight: 730;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.landing-eyebrow > span {
  width: 22px;
  height: 2px;
  background: currentColor;
}
.landing-hero h1,
.landing h2 {
  margin: 0;
  color: var(--landing-mork);
  font-size: clamp(45px, 4.4vw, 68px);
  font-weight: 720;
  line-height: 1.03;
  letter-spacing: -0.052em;
}
.landing h1 em,
.landing h2 em {
  color: var(--landing-bla);
  font-family: var(--serif);
  font-weight: 500;
}
.landing-lead {
  max-width: 540px;
  margin: 25px 0 0;
  color: #596579;
  font-size: 18px;
  line-height: 1.68;
}
.landing-hero-knapper {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}
.landing-tekstlenke {
  color: #3d4a60 !important;
  font-size: 13.5px;
  font-weight: 620;
  text-decoration: none;
}
.landing-tekstlenke span { margin-left: 5px; color: var(--landing-bla); }
.landing-trygghet {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  color: #707b8c;
  font-size: 11.5px;
}
.landing-trygghet span { color: var(--landing-gronn); font-weight: 800; }
.landing-venteliste,
.landing-prisventer {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid #cbd4e3;
  border-radius: 9px;
  background: #fff;
  color: #536077;
  font-size: 14px;
  font-weight: 650;
}

/* Produktbildet bygges med ekte HTML slik at det er skarpt i alle bredder. */
.landing-produkt {
  position: relative;
  width: 680px;
  transform: perspective(1600px) rotateY(-2deg) rotateX(1deg);
}
.produkt-vindu {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 34px 80px rgba(24, 42, 73, 0.17), 0 4px 12px rgba(24, 42, 73, 0.08);
}
.produkt-vinduhode {
  height: 47px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e7ebf1;
  color: #3f4a5e;
  font-size: 10px;
}
.produkt-vindumerke {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #31599d;
  color: #fff;
  font-size: 9px;
  font-weight: 760;
}
.produkt-vindunavn { font-weight: 680; }
.produkt-aar { margin-left: auto; padding: 3px 8px; border: 1px solid #e1e5eb; border-radius: 999px; }
.produkt-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e9eef8; color: #31599d; font-weight: 750; }
.produkt-app { display: grid; grid-template-columns: 126px 1fr; min-height: 384px; }
.produkt-meny {
  padding: 20px 10px;
  border-right: 1px solid #e9edf2;
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #6a7485;
  font-size: 8.5px;
}
.produkt-meny > span:not(.produkt-menytittel) { padding: 6px 8px; border-radius: 5px; }
.produkt-meny > span.aktiv { background: #eaf0fa; color: #31599d; font-weight: 670; }
.produkt-meny b { display: inline-block; width: 15px; font-weight: 500; }
.produkt-menytittel { margin: 0 0 5px 8px; color: #a3aab5; font-size: 6.5px; font-weight: 760; letter-spacing: .12em; }
.produkt-menyavstand { margin-top: 12px; }
.produkt-hoved { padding: 23px 24px; background: #fff; }
.produkt-velkommen { display: flex; align-items: center; justify-content: space-between; }
.produkt-velkommen span { display: block; color: #17233a; font-size: 15px; font-weight: 720; letter-spacing: -.025em; }
.produkt-velkommen small,
.produkt-korthode small { display: block; color: #8b94a2; font-size: 7.5px; }
.produkt-velkommen .produkt-nyttbilag { padding: 6px 10px; border-radius: 5px; background: #31599d; color: #fff; font-size: 7.5px; font-weight: 650; }
.produkt-kortgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 18px; }
.produkt-kort { padding: 13px 13px 11px; border: 1px solid #e7ebf0; border-radius: 7px; background: #fff; box-shadow: 0 2px 5px rgba(20, 35, 60, .035); }
.produkt-kort small { display: block; color: #929aa6; font-size: 6px; font-weight: 700; letter-spacing: .06em; }
.produkt-kort strong { display: block; margin: 5px 0 1px; color: #1d2a40; font-size: 14px; letter-spacing: -.025em; }
.produkt-kort span { color: #8a93a1; font-size: 6.5px; }
.produkt-kort .produkt-opp { color: #267251; }
.produkt-nedre { display: grid; grid-template-columns: 1.38fr .85fr; gap: 10px; margin-top: 10px; }
.produkt-grafkort,
.produkt-frister { padding: 13px; border: 1px solid #e7ebf0; border-radius: 7px; }
.produkt-korthode { display: flex; align-items: flex-start; justify-content: space-between; }
.produkt-korthode strong { display: block; color: #273349; font-size: 8px; }
.produkt-korthode > span { padding: 3px 6px; border: 1px solid #e5e9ef; border-radius: 4px; color: #929aa6; font-size: 6px; }
.produkt-graf { position: relative; height: 135px; margin-top: 9px; }
.produkt-graf svg { position: absolute; inset: 0 0 12px; width: 100%; height: calc(100% - 12px); }
.produkt-gridlinjer { position: absolute; inset: 0 0 15px; display: flex; flex-direction: column; justify-content: space-between; }
.produkt-gridlinjer i { display: block; border-top: 1px solid #edf0f4; }
.produkt-grafmaaneder { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; color: #9ca4b0; font-size: 5.5px; }
.produkt-frist { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.produkt-frist:last-child { border-bottom: 0; }
.produkt-frist time { width: 27px; color: #31599d; font-size: 11px; font-weight: 750; text-align: center; line-height: 1; }
.produkt-frist time small { display: block; margin-top: 3px; font-size: 5px; }
.produkt-frist > span { min-width: 0; flex: 1; }
.produkt-frist strong,
.produkt-frist small { display: block; white-space: nowrap; }
.produkt-frist strong { color: #354156; font-size: 7px; }
.produkt-frist small { color: #989faa; font-size: 6px; }
.produkt-frist > b { color: #a0a8b4; font-size: 8px; }
.produkt-flyt {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(25, 43, 72, .14);
}
.produkt-flyt > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e4f3eb; color: #267251; font-size: 11px; font-weight: 800; }
.produkt-flyt strong,
.produkt-flyt small { display: block; white-space: nowrap; }
.produkt-flyt strong { color: #2f3b4e; font-size: 8px; }
.produkt-flyt small { color: #8b94a1; font-size: 6.5px; }
.produkt-flyt-en { left: -34px; bottom: 42px; }
.produkt-flyt-to { right: -21px; top: 76px; }
.produkt-flyt-to > span { background: #e9eef9; color: #31599d; }
.produkt-glod { position: absolute; border-radius: 50%; filter: blur(1px); }
.produkt-glod-en { width: 150px; height: 150px; right: -46px; top: -35px; background: rgba(81, 119, 181, .10); }
.produkt-glod-to { width: 90px; height: 90px; left: -38px; bottom: -22px; background: rgba(81, 119, 181, .08); }

.landing-bevis { border-top: 1px solid #e8ebf0; border-bottom: 1px solid #e8ebf0; background: #fff; }
.landing-bevisinnhold { max-width: var(--landing-maks); margin: 0 auto; padding: 24px; display: flex; align-items: center; gap: 45px; }
.landing-bevis p { margin: 0; color: #9098a5; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.landing-bevisinnhold > div { flex: 1; display: flex; justify-content: space-between; gap: 22px; color: #798292; font-size: 12px; font-weight: 670; }

.landing-seksjon { max-width: var(--landing-maks); margin: 0 auto; padding: 108px 24px; }
.landing-seksjonshode { max-width: 660px; }
.landing h2 { font-size: clamp(38px, 4vw, 57px); }
.landing-seksjonshode > p:last-child { max-width: 590px; margin: 20px 0 0; color: #657084; font-size: 16px; }
.landing-funksjonsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.landing-funksjon { position: relative; min-height: 250px; padding: 27px; overflow: hidden; border: 1px solid #e2e6ec; border-radius: 13px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.landing-funksjon:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(29, 46, 74, .08); }
.landing-funksjon-stor { grid-row: span 2; min-height: 516px; background: linear-gradient(150deg, #f5f8fd, #fff 75%); }
.landing-funksjon-bred { grid-column: span 2; min-height: 220px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px; }
.landing-ikon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d6e0f1; border-radius: 9px; background: #edf2fb; color: #31599d; font-size: 16px; }
.landing-funksjon h3 { margin: 20px 0 9px; color: #19253a; font-size: 17px; letter-spacing: -.02em; }
.landing-funksjon p { max-width: 39ch; margin: 0; color: #697487; font-size: 13.5px; line-height: 1.65; }
.mini-bilag { position: absolute; right: -15px; bottom: 25px; left: 27px; padding: 13px 0 0 13px; border: 1px solid #dfe4eb; border-radius: 9px 0 0 9px; background: #fff; box-shadow: 0 12px 32px rgba(32, 48, 74, .1); color: #697386; font-size: 8px; }
.mini-bilag > div { display: grid; grid-template-columns: 1fr 70px 70px; padding: 9px 13px 9px 0; border-bottom: 1px solid #edf0f4; }
.mini-bilag b { color: #354157; text-align: right; }
.mini-bilag footer { max-width: none; margin: 0; padding: 9px 13px 9px 0; border: 0; display: flex; justify-content: space-between; color: #777f8c; font-size: 8px; }
.mini-bilag footer strong { color: #267251; }
.mini-rapport { height: 126px; display: flex; align-items: flex-end; gap: 8px; padding: 14px 14px 0; border-bottom: 1px solid #dfe4eb; background: repeating-linear-gradient(to top, transparent 0, transparent 31px, #edf0f4 32px); }
.mini-rapport span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#5f81ba, #31599d); opacity: .88; }
.mini-rapport span:nth-child(1) { height: 42%; }
.mini-rapport span:nth-child(2) { height: 56%; }
.mini-rapport span:nth-child(3) { height: 48%; }
.mini-rapport span:nth-child(4) { height: 74%; }
.mini-rapport span:nth-child(5) { height: 68%; }
.mini-rapport span:nth-child(6) { height: 88%; }

.landing-bytte { padding: 100px 24px; background: var(--landing-mork); color: #fff; }
.landing-bytteinnhold { max-width: var(--landing-maks); margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; }
.landing-eyebrow-lys { color: #91addd; }
.landing-bytte h2,
.landing-slutt h2 { color: #fff; }
.landing-bytte h2 em,
.landing-slutt h2 em { color: #9ab5e2; }
.landing-byttetekst > p:not(.landing-eyebrow) { margin: 22px 0; color: #aeb9ca; }
.landing-byttetekst ul { margin: 24px 0 0; padding: 0; list-style: none; color: #dfe5ef; font-size: 13px; }
.landing-byttetekst li { margin: 10px 0; }
.landing-byttetekst li span { margin-right: 9px; color: #79c49e; }
.landing-flytting { position: relative; min-height: 330px; display: flex; align-items: center; justify-content: center; }
.flytte-kilde,
.flytte-maal { width: 145px; height: 145px; padding: 22px 16px; border: 1px solid #35435a; border-radius: 14px; background: #192740; text-align: center; box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.flytte-maal { width: 178px; height: 178px; padding-top: 27px; border-color: #5274ad; background: linear-gradient(145deg, #274a83, #1b355e); }
.flytte-kilde > span,
.flytte-maal > span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 10px; background: #f0f4fa; color: #25364f; font-size: 17px; font-weight: 800; }
.flytte-maal > span { width: 51px; height: 51px; background: #fff; color: #31599d; font-size: 14px; }
.flytte-kilde strong,
.flytte-kilde small,
.flytte-maal strong,
.flytte-maal small { display: block; }
.flytte-kilde strong,
.flytte-maal strong { font-size: 12px; }
.flytte-kilde small,
.flytte-maal small { margin-top: 5px; color: #8997aa; font-size: 7px; }
.flytte-maal small { color: #b8c8e2; }
.flytte-linje { width: 55px; display: flex; align-items: center; color: #7187aa; }
.flytte-linje i { flex: 1; border-top: 1px dashed #52647e; }
.flytte-linje b { font-size: 12px; }
.flytte-status { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); min-width: 250px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #3b4b63; border-radius: 9px; background: #18263d; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.flytte-status > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #1f513e; color: #8dd2af; font-size: 10px; }
.flytte-status strong,
.flytte-status small { display: block; white-space: nowrap; }
.flytte-status strong { color: #ecf1f8; font-size: 8px; }
.flytte-status small { color: #8997a9; font-size: 6.5px; }

.landing-sammenligning { max-width: 1230px; }
.landing-seksjonshode-sentrert { margin: 0 auto; text-align: center; }
.landing-seksjonshode-sentrert .landing-eyebrow { justify-content: center; }
.landing-seksjonshode-sentrert > p:last-child { margin-right: auto; margin-left: auto; }
.landing-tabellramme { margin-top: 47px; overflow-x: auto; border: 1px solid #dfe4ea; border-radius: 14px; box-shadow: 0 15px 38px rgba(29, 45, 70, .06); }
table.landing-tabell { min-width: 840px; margin: 0; border-collapse: collapse; background: #fff; font-size: 12.5px; }
.landing-tabell th,
.landing-tabell td { padding: 16px 20px; border-bottom: 1px solid #e8ebf0; text-align: left; }
.landing-tabell thead th { padding-top: 20px; padding-bottom: 20px; background: #f8f9fb; color: #27344a; }
.landing-tabell thead th:first-child { width: 24%; }
.landing-tabell thead span,
.landing-tabell thead small { display: block; }
.landing-tabell thead span { font-size: 14px; }
.landing-tabell thead small { margin-top: 2px; color: #929aa8; font-size: 8px; font-weight: 500; }
.landing-tabell tbody th { background: #fcfcfd; color: #505c70; font-weight: 620; }
.landing-tabell td { color: #5c687a; }
.landing-tabell tr:last-child th,
.landing-tabell tr:last-child td { border-bottom: 0; }
.landing-tabell .oss { background: #eef3fb; color: #253f6c; }
.landing-tabell thead .oss { position: relative; background: #31599d; color: #fff; }
.landing-tabell thead .oss small { color: #cddaf0; }
.landing-tabell .sjekk { color: #267251; font-weight: 800; }
.landing-tabell sup { color: #31599d; }
.landing-tabellnoter { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-top: 16px; color: #7c8696; font-size: 10.5px; }
.landing-tabellnoter a { color: #31599d; }

.landing-pris { padding: 105px 24px; background: #f4f6fa; }
.landing-prisinnhold { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 105px; }
.landing-pristekst > p:not(.landing-eyebrow) { max-width: 510px; margin: 21px 0 0; color: #687387; }
.landing-prispoeng { margin-top: 31px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.landing-prispoeng > div { display: flex; gap: 9px; }
.landing-prispoeng span { color: #31599d; font-size: 9px; font-weight: 750; }
.landing-prispoeng p { margin: 0; color: #788293; font-size: 10.5px; line-height: 1.45; }
.landing-prispoeng strong { display: block; color: #334056; font-size: 11px; }
.landing-priskort { position: relative; padding: 36px 38px 30px; border: 1px solid #dfe4eb; border-radius: 16px; background: #fff; box-shadow: 0 24px 55px rgba(29, 45, 72, .11); }
.landing-prismerke { position: absolute; top: 16px; right: 16px; padding: 4px 8px; border-radius: 999px; background: #e5f2eb; color: #267251; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.landing-priskort > p:first-of-type { margin: 0; color: #667287; font-size: 12px; font-weight: 650; }
.landing-prisbelop { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.landing-prisbelop strong { color: #17243a; font-size: 52px; line-height: 1; letter-spacing: -.05em; }
.landing-prisbelop span { color: #4d5b70; font-size: 12px; font-weight: 650; line-height: 1.2; }
.landing-prisbelop small { color: #87909e; font-size: 9px; font-weight: 500; }
.landing-prisunder { margin: 5px 0 23px; padding-bottom: 22px; border-bottom: 1px solid #e7eaf0; color: #929aa7; font-size: 10px; }
.landing-priskort ul { margin: 0 0 24px; padding: 0; list-style: none; color: #4f5c70; font-size: 12px; }
.landing-priskort li { margin: 10px 0; }
.landing-priskort li span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background: #e6f2eb; color: #267251; font-size: 8px; font-weight: 800; }
.landing-priskort > small { display: block; margin-top: 11px; color: #9098a6; font-size: 8.5px; text-align: center; }
.landing-prisventer { display: flex; justify-content: center; width: 100%; }

.landing-faq { display: grid; grid-template-columns: 320px 1fr; gap: 90px; }
.landing-faqgrid details { border-bottom: 1px solid #e0e4ea; }
.landing-faqgrid summary { padding: 18px 0; display: flex; justify-content: space-between; gap: 20px; color: #28364b; font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.landing-faqgrid summary::-webkit-details-marker { display: none; }
.landing-faqgrid summary span { color: #31599d; font-size: 17px; font-weight: 400; transition: transform .15s ease; }
.landing-faqgrid details[open] summary span { transform: rotate(45deg); }
.landing-faqgrid details p { max-width: 72ch; margin: -4px 35px 18px 0; color: #707b8d; font-size: 12.5px; }
.landing-slutt { padding: 92px 24px; background: linear-gradient(135deg, #182b4a, #274d87); text-align: center; }
.landing-slutt > div { max-width: 790px; margin: 0 auto; }
.landing-slutt .landing-eyebrow { justify-content: center; }
.landing-slutt h2 { font-size: clamp(39px, 4.2vw, 58px); }
.landing-knapp-lys { margin-top: 28px; background: #fff; color: #24487f !important; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.landing-knapp-lys:hover { background: #f2f5fa; }
.landing-slutt > div > p:last-child { margin: 14px 0 0; color: #b4c3da; font-size: 10.5px; }
.landing-slutt .landing-snart { margin: 22px auto 0; color: #c5d0e1; font-size: 13px; }
.landing-footer { max-width: none; padding: 0; border: 0; background: #0f192a; color: #9ba8bc; }
.landing-footerinnhold { max-width: var(--landing-maks); margin: 0 auto; padding: 36px 24px; display: flex; align-items: center; gap: 25px; }
.landing-footer .landing-merke { color: #fff !important; }
.landing-footer p { margin: 0; font-size: 10px; }
.landing-footer nav { margin-left: auto; display: flex; gap: 22px; }
.landing-footer nav a { color: #aeb9c9; font-size: 10px; text-decoration: none; }
.landing-footer small { padding-left: 22px; border-left: 1px solid #2c3748; font-size: 9px; }

@media (max-width: 1080px) {
  .landing-hero { padding-top: 60px; }
  .landing-hero-innhold { grid-template-columns: 1fr; text-align: center; }
  .landing-hero-tekst { max-width: 710px; margin: 0 auto; }
  .landing-eyebrow,
  .landing-hero-knapper,
  .landing-trygghet { justify-content: center; }
  .landing-lead { margin-right: auto; margin-left: auto; }
  .landing-produkt { margin: 35px auto 0; transform: none; }
  .landing-bytteinnhold { gap: 45px; }
  .landing-prisinnhold { gap: 55px; }
}
@media (max-width: 820px) {
  .landing-lenker { display: none; }
  .landing-navhandlinger { margin-left: auto; }
  .landing-produkt { width: 100%; }
  .produkt-flyt { display: none; }
  .landing-bevisinnhold { align-items: flex-start; }
  .landing-bevisinnhold > div { flex-wrap: wrap; justify-content: flex-start; }
  .landing-funksjonsgrid { grid-template-columns: 1fr 1fr; }
  .landing-funksjon-stor { grid-row: span 2; }
  .landing-funksjon-bred { grid-column: span 2; }
  .landing-bytteinnhold,
  .landing-prisinnhold,
  .landing-faq { grid-template-columns: 1fr; }
  .landing-bytteinnhold { text-align: center; }
  .landing-bytte .landing-eyebrow { justify-content: center; }
  .landing-byttetekst ul { display: inline-block; text-align: left; }
  .landing-priskort { max-width: 440px; margin: 0 auto; }
  .landing-faq { gap: 30px; }
  .landing-tabellnoter { grid-template-columns: 1fr; gap: 4px; }
  .landing-footerinnhold { flex-wrap: wrap; }
  .landing-footer nav { width: 100%; order: 4; margin-left: 0; }
}
@media (max-width: 570px) {
  .landing-topp { height: 66px; }
  .landing-nav { padding: 0 17px; }
  .landing-logo { width: 31px; height: 31px; }
  .landing-merke > span:last-child { font-size: 14px; }
  .landing-navhandlinger .landing-knapp { display: none; }
  .landing-hero { padding: 52px 0 68px; }
  .landing-hero-innhold { min-width: 0; padding: 0 18px; }
  .landing-hero h1 { font-size: 42px; }
  .landing-lead { font-size: 16px; }
  .landing-hero-knapper { flex-direction: column; gap: 14px; }
  .landing-trygghet { gap: 9px 14px; }
  .produkt-app { grid-template-columns: 1fr; min-height: 0; }
  .produkt-meny { display: none; }
  .produkt-hoved { padding: 16px; }
  .produkt-kortgrid { grid-template-columns: 1fr 1fr; }
  .produkt-kort:last-child { display: none; }
  .produkt-nedre { grid-template-columns: 1fr; }
  .produkt-frister { display: none; }
  .landing-bevisinnhold { display: block; padding: 20px 18px; }
  .landing-bevis p { margin-bottom: 13px; }
  .landing-bevisinnhold > div { gap: 11px 18px; }
  .landing-seksjon { padding: 76px 18px; }
  .landing h2 { font-size: 38px; }
  .landing-funksjonsgrid { grid-template-columns: 1fr; margin-top: 34px; }
  .landing-funksjon-stor { grid-row: auto; min-height: 490px; }
  .landing-funksjon-bred { grid-column: auto; grid-template-columns: 1fr; }
  .mini-rapport { margin-top: 10px; }
  .landing-bytte { padding: 75px 18px; }
  .landing-flytting { transform: scale(.75); margin: -35px -100px; }
  .landing-pris { padding: 76px 18px; }
  .landing-prispoeng { grid-template-columns: 1fr; }
  .landing-priskort { padding: 32px 24px 26px; }
  .landing-faq { padding-top: 75px; }
  .landing-slutt { padding: 72px 18px; }
  .landing-slutt h2 { font-size: 39px; }
  .landing-footerinnhold { padding: 30px 18px; }
  .landing-footer p { width: 100%; }
  .landing-footer small { margin-left: auto; }
}

@media (prefers-color-scheme: dark) {
  /* Markedssiden har en bevisst lys produktpresentasjon uavhengig av appens
     valgte tema. Den mørke kontrastflaten brukes som et eget merkeelement. */
  body.landing { color-scheme: light; }
}