/* idgo: delt stil for innlogging, profil og dokumentsider. Mørk drakt. */

:root {
  color-scheme: dark;

  /* Maalt fra framer.com, ikke gjettet fra skjermbilder:
     flater #000/#111/#1e1e1e/#242424 noytralt, kant som 6% hvit overlegg,
     aksent #0099ff, radius 8px, container 1200px. */
  --bg: #000000;
  --flate: #111111;
  --flate-hev: #1e1e1e;
  --felt: #0a0a0a;
  --kant: rgba(255, 255, 255, 0.06);
  --kant-sterk: rgba(255, 255, 255, 0.14);

  --tekst: #ffffff;
  --tekst-dempet: #999999;
  --deaktivert: #666666;

  --aksent: #0099ff;
  --aksent-mork: #007acc;
  --aksent-lys: #4db8ff;
  --aksent-tekst: #ffffff;
  --aksent-tekst-hev: #ffffff;
  --ok: #00bb88;
  --ok-flate: rgba(0, 187, 136, 0.1);
  --advarsel: #eda238;
  --advarsel-flate: rgba(237, 162, 56, 0.1);
  --fare: #ff5c5c;
  --fare-flate: rgba(255, 92, 92, 0.1);
  --fokus: #0099ff;

  --kant-hover: rgba(255, 255, 255, 0.22);
  --flate-hover: #242424;

  --font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-overskrift: "Cabinet Grotesk", "Inter", system-ui, sans-serif;

  /* Spranget er systemet: 12-14px til alt i UI, 44-54px til display.
     Nesten ingenting imellom. Det er derfor referansen har luft. */
  --t-display: clamp(38px, 5vw, 54px);
  --t-h2: 18px;
  --t-h3: 14px;
  --t-brod: 14px;
  --t-liten: 13px;
  --t-etikett: 12px;

  --radius: 8px;
  --gutter: 24px;
  --bredde-smal: 480px;
  --bredde-lese: 720px;
  --bredde-side: 1200px;
}

* { box-sizing: border-box; }

html, body {
  font-family: var(--font-tekst); margin: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--tekst);
  /* IKKE font:-kortformen her. Den nullstiller font-family og overkjorer
     tokenet satt over, saa displayfonten aldri blir bedt om. */
  font-size: var(--t-brod);
  line-height: 1.5;
  /* Referansen har subtil negativ tracking paa ALT, ikke bare overskrifter.
     Det er det som gjor at teksten henger sammen i stedet for aa flyte. */
  letter-spacing: -0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
p { margin: 0 0 14px; }

a { color: var(--aksent); text-decoration: none; }
a:hover { color: var(--aksent-lys); text-decoration: underline; }

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

.skjult-visuelt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Rammeverk for sidene */

.innlogging {
  max-width: calc(var(--bredde-smal) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 48px var(--gutter) 40px;
}

.side {
  max-width: calc(var(--bredde-side) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}

/* Lesespalte, ikke appbredde: lovteksten leses, den skannes ikke. Sida setter
   bredden, og topplinja og bunnen leser den samme verdien. */
body:has(.dokument) { --bredde-innhold: var(--bredde-lese); }

.dokument {
  max-width: calc(var(--bredde-innhold) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
}

.dokument h2, .dokument h3 {
  font-family: var(--font-overskrift);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--tekst);
}
.dokument h2 { margin-top: 32px; font-size: var(--t-h2); }
.dokument h3 { font-size: var(--t-h3); }
.dokument ul { margin: 0 0 14px; padding-left: 22px; }
.dokument li { margin-bottom: 6px; }

.merke { text-align: center; margin-bottom: 24px; }
.merke .navn { font-size: 30px; }
.merke p { color: var(--tekst-dempet); margin: 6px 0 0; font-size: 15px; }

.topplinje {
  border-bottom: 1px solid var(--kant);
  background: var(--flate);
}
/* Topplinja spenner fra kant til kant, men innholdet i den hoerer hjemme i
   samme spalte som sida under. Lesesidene er 720 px brede, appsidene 1200, og
   uten dette sto merket ute i margen paa lovtekstene. Ett sted aa styre det
   fra: --bredde-innhold settes av sida, alle tre linjene folger. */
.topplinje-innhold {
  max-width: calc(var(--bredde-innhold, var(--bredde-side)) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.bunn {
  max-width: calc(var(--bredde-innhold, var(--bredde-side)) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
}

/* Kort og bokser */

.kort {
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 24px;
}

.boks {
  /* Ingen bakgrunn, ingen ramme, ingen avrunding: seksjonene ligger paa samme
     flate og skilles av EN haarstrek. Svevende avrundede kort med luft mellom
     er nettopp oppsettet som fikk sida til aa se generisk ut. */
  border-top: 1px solid var(--kant);
  padding: 28px 0;
  margin: 0;
}
.boks:last-of-type { border-bottom: 1px solid var(--kant); }

/* Faner mellom innlogging og registrering */

.fanerad {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--kant);
}
.fane {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tekst-dempet);
  font: inherit;
  font-weight: 600;
  padding: 10px 4px;
  margin-bottom: -1px;
  cursor: pointer;
}
.fane[aria-selected="true"] { color: var(--tekst); border-bottom-color: var(--aksent); }
.fane:hover { color: var(--tekst); }
.fane:disabled { color: var(--deaktivert); cursor: not-allowed; }

/* Skjema */

.felt { margin-bottom: 16px; }
.felt label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.hjelp { font-size: 13px; color: var(--tekst-dempet); margin: 6px 0 0; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100%;
  background: var(--felt);
  color: var(--tekst);
  border: 1px solid var(--kant-sterk);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}
select { appearance: auto; }
option { background: var(--felt); color: var(--tekst); }

input::placeholder, textarea::placeholder { color: var(--tekst-dempet); }

input:hover, select:hover, textarea:hover { border-color: var(--kant-hover); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--felt);
  color: var(--deaktivert);
  border-color: var(--kant);
  cursor: not-allowed;
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--fare);
}

.feil {
  color: var(--fare);
  font-size: 13.5px;
  margin: 6px 0 0;
}
.feil:empty { display: none; }

.skjemafeil {
  color: var(--fare);
  background: var(--fare-flate);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}
.skjemafeil:empty { display: none; }

.melding {
  color: var(--ok);
  background: var(--ok-flate);
  border: 1px solid rgba(47, 190, 116, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}
.melding:empty { display: none; }

.avkrysning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin: 18px 0;
}
.avkrysning input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--aksent);
  background: var(--felt);
  flex: none;
}
.avkrysning input[type="checkbox"]:disabled { cursor: not-allowed; }

/* Knapper */

.knapp {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  background: var(--aksent);
  color: var(--aksent-tekst);
  border: 1px solid var(--aksent);
  border-radius: 8px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.knapp:hover { background: var(--aksent-mork); border-color: var(--aksent-mork); color: var(--aksent-tekst-hev); text-decoration: none; }
.knapp:disabled {
  background: var(--kant);
  border-color: var(--kant);
  color: var(--deaktivert);
  cursor: not-allowed;
}
.knapp.bred { width: 100%; }

.knapp-sekundar {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  background: var(--flate-hev);
  color: var(--tekst);
  border: 1px solid var(--kant-sterk);
  border-radius: 8px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.knapp-sekundar:hover { background: var(--flate-hover); color: var(--tekst); text-decoration: none; }
.knapp-sekundar:disabled {
  background: var(--flate);
  border-color: var(--kant);
  color: var(--deaktivert);
  cursor: not-allowed;
}
.knapp-sekundar.bred { width: 100%; }

.knapp-lenke {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--aksent);
  cursor: pointer;
}
.knapp-lenke:hover { color: var(--aksent-lys); text-decoration: underline; }
.knapp-lenke:disabled { color: var(--deaktivert); cursor: not-allowed; text-decoration: none; }

.knapp-fare {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--fare);
  cursor: pointer;
}
.knapp-fare:hover { text-decoration: underline; }
.knapp-fare:disabled { color: var(--deaktivert); cursor: not-allowed; text-decoration: none; }

.knapperad {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.skille {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tekst-dempet);
  font-size: 13px;
  margin: 20px 0;
}
.skille::before, .skille::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kant);
}

.google-merke {
  width: 18px;
  height: 18px;
  flex: none;
}

.under-kortet {
  text-align: center;
  font-size: 14px;
  color: var(--tekst-dempet);
  margin-top: 18px;
}

/* Profil */

.profiltopp {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 40px;
}
.profiltopp img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--kant-sterk);
}
.profiltopp h1 { margin: 0; word-break: break-word; }
.profiltopp .konto-type { color: var(--tekst-dempet); font-size: 14px; margin: 4px 0 0; }

.opplysninger { margin: 0; }
.opplysninger .rad {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--kant);
}
.opplysninger .rad:last-child { border-bottom: 0; }
.opplysninger dt {
  flex: 0 0 132px;
  font-size: 14px;
  color: var(--tekst-dempet);
}
.opplysninger dd {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  word-break: break-word;
}
.tom-verdi { color: var(--tekst-dempet); font-style: italic; }

.merkelapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.merkelapp.ok { color: var(--ok); background: var(--ok-flate); border: 1px solid rgba(47, 190, 116, 0.4); }
.merkelapp.advarsel { color: var(--advarsel); background: var(--advarsel-flate); border: 1px solid rgba(237, 162, 56, 0.4); }

.handlinger {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--kant);
}

.handlinger .merknad { font-size: 13px; color: var(--tekst-dempet); margin: 0; }

.rutenett-to {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.underskjema {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--kant);
}
.underskjema h3 { font-size: 16px; margin-bottom: 14px; }

/* Tabellen med tilkoblinger */

.tabellskall { overflow-x: auto; }

table.tilkoblinger {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
table.tilkoblinger th {
  text-align: left;
  font-size: 13px;
  color: var(--tekst-dempet);
  font-weight: 600;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}
table.tilkoblinger td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--kant);
  vertical-align: middle;
}
table.tilkoblinger tr:last-child td { border-bottom: 0; }
table.tilkoblinger th:last-child,
table.tilkoblinger td:last-child { text-align: right; padding-right: 0; }

.tjeneste { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
table.tilkoblinger tr.ikke-koblet .tjeneste { color: var(--tekst-dempet); }

/* Apprutenettet */

.apprutenett {
  display: grid;
  /* auto-fit, ikke auto-fill: med ÉN app skal kortet fylle bredden i stedet
     for aa staa igjen paa minstebredden med teksten brukket i fire linjer. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.appkort {
  /* Referanseraden er ett merke midt i mye luft, ikke ikon og tekst side om
     side. Hoyden er FAST: like hoye kort er hele poenget, og hoyde som folger
     tekstlengden gir den rotete raden vi hadde for. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  height: 208px;
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 24px 20px;
  color: var(--tekst);
}
.appkort img, .appkort .logo-plass {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex: none;
}
/* contain, ikke cover: Halo sin logo er 600x282, og cover klipper den midt av.
   Ingen flis under merket heller -- referansen setter merket rett paa kortet. */
.appkort img { object-fit: contain; }
.appkort .logo-plass {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: var(--aksent);
  background: var(--flate-hev);
  border: 1px solid var(--kant);
}
a.appkort:hover {
  background: var(--flate-hover);
  border-color: var(--kant-hover);
  color: var(--tekst);
  text-decoration: none;
}
.appkort .appnavn { font-weight: 600; margin: 0 0 4px; }
.appkort .appbeskrivelse {
  font-size: 13px;
  line-height: 1.45;
  color: var(--tekst-dempet);
  margin: 0;
  /* To linjer, punktum. Ellers bestemmer den lengste beskrivelsen hoyden. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Luft over seksjonen, slik referansen har. */
#apper-seksjon { margin-top: 44px; }
#apper-seksjon h2 { margin-bottom: 18px; }

.laster { color: var(--tekst-dempet); font-size: 14.5px; }

@media (max-width: 560px) {
  .rutenett-to { grid-template-columns: minmax(0, 1fr); }
  .opplysninger .rad { flex-direction: column; gap: 2px; }
  .opplysninger dt { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- typografi (merkevare) ----
   Referansene setter overskriftene tungt og tett, og lar smaa etiketter staa
   i store bokstaver med luft mellom. Det er hele forskjellen paa «systemfont»
   og «noen har bestemt seg». */
/* Displayfonten KUN der den er stor nok til at karakteren leser seg. Paa 19px
   ser en displaygrotesk bare rar ut; referansen bruker den paa 54px og Inter
   paa alt i UI-skala. */
h1 {
  font-family: var(--font-overskrift);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.0;
  font-size: var(--t-display);
}

/* Seksjonsoverskrifter er ETIKETTER, ikke overskrifter. Samme behandling som
   kolonnetitlene i tabellen, slik at spranget ned fra h1 blir stort. */
h2, h3 {
  font-family: var(--font-tekst);
  font-weight: 500;
  font-size: var(--t-etikett);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-dempet);
  line-height: 1.4;
}

.navn {
  font-family: var(--font-overskrift);
  font-weight: 800;
  letter-spacing: -0.055em;
  font-size: 19px;
}

th {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-dempet);
}

/* Leverandormerke i tilkoblingstabellen. */
.tjeneste { display: inline-flex; align-items: center; gap: 8px; }
.merke-ikon { flex: none; }

/* Laasen: avtrykket til venstre, ordmerket til hoyre, avstand 30 % av
   merkehoyden. Merkehoyden er ETT tall per flate; alt annet folger av den. */
.las {
  --merke: 22px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--merke) * 0.3);
  color: var(--tekst);
}
.las:hover { color: var(--tekst); text-decoration: none; }
.las img { height: var(--merke); width: auto; flex: none; }
.innlogging .las { --merke: 44px; margin-bottom: 10px; }