/* NOKTO Crypto — bare plattformspesifikke regler. Grunnlaget er /felles/nokto.css (docs/designprofil.md).
   Bare tokens fra nokto.css: ingen hex, ingen frie avstander, ingen fonter. */

/* hidden vinner alltid (også i nokto.css, så det gjelder uten dette stilarket). */
[hidden] { display: none !important; }

/* Hopp til innholdet: usynlig til den får tastaturfokus. Står rett under hele den klebrige toppen (og under
   alarmbåndet når det ruller med siden), i høyre ende av innholdskolonnen: der dekker den verken merket,
   miljømerket, nødstoppbrikken, alarmen eller sidetittelen. */
.hopp {
  --hopp-topp: calc(var(--klebrig) + var(--rom-2));
  position: absolute;
  right: max(var(--marg), calc((100% - var(--bredde-maks)) / 2));
  top: var(--hopp-topp);
  z-index: 20;
  padding: var(--rom-2) var(--rom-3);
  border-radius: var(--radius);
  background: var(--tekst);
  color: var(--bunn);
  font-weight: var(--v-medium);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--hopp-topp) - var(--rom-4)));   /* helt over sidens topp */
}
@media (max-width: 1100px) {
  :root[data-nodstopp="aktiv"] .hopp { --hopp-topp: calc(var(--klebrig) + var(--alarm-maalt, var(--alarm-hoyde)) + var(--rom-2)); }
}
.hopp:focus-visible { transform: none; }

main:focus { outline: none; }

/* Uten skript (blokkert, 429, feil bygg): en ekte feiltilstand med reserveveien til nødstopp. app.js skjuler den. */
.start-feil { max-width: 56ch; padding: var(--rom-9) 0; }
/* Hele kommandoen står (med --begrunnelse og --av) og brytes bare mellom argumentene (span), aldri inni «--aktiver»
   og aldri med sidelengs rulling. */
.start-feil code { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-feil code > span { white-space: nowrap; }

/* ---------- Innlogging ---------- */

.fullbredde { width: 100%; }
.innlogging-flate form > .dempet { max-width: 44ch; }
.innlogging-felt { margin-top: var(--rom-6); }
.fotnote { margin-top: var(--rom-5); padding-top: var(--rom-4); border-top: var(--strek) solid var(--linje); }
.innlogging-flate form[aria-busy="true"] .knapp { cursor: progress; }

/* ==================== Drift, marked, betalinger og nødstopp (fra NOKTO Control) ==================== */

/* ---------- Statuslinje og bannere ---------- */

.banner { margin-bottom: var(--rom-5); }
.banner code { white-space: nowrap; }

/* ---------- Nøkkeltall ---------- */

.nokkel-tilstand:empty { visibility: hidden; }
[data-busy="k"][aria-busy="true"] .nokkel-verdi { color: var(--tekst-3); }   /* plassholder til første svar */
.nokkel-detalj:empty { display: none; }
/* Detaljlinjen har fast plass (tre linjer à 20 px; mobil to à 16 px): platen står stille når en detalj endrer
   lengde, og når første svar kommer. Tom detalj (aktiv nødstopp) tar ingen plass. */
.nokkel-detalj { min-height: 60px; }
/* Lasting: tilstand og detalj har skjelettstreker (12 px, --flate-2) i den plassen de får med data. */
[data-busy="k"][aria-busy="true"] .nokkel-tilstand:empty::before,
[data-busy="k"][aria-busy="true"] .nokkel-detalj:empty::before,
[data-busy="k"][aria-busy="true"] .nokkel-detalj:empty::after {
  content: "";
  display: block;
  height: 12px;
  border-radius: var(--radius);
  background: var(--flate-2);
  visibility: visible;
}
[data-busy="k"][aria-busy="true"] .nokkel-tilstand:empty::before { width: 54%; }
[data-busy="k"][aria-busy="true"] .nokkel-detalj:empty { display: flex; flex-direction: column; gap: var(--rom-2); padding-top: var(--rom-1); }
[data-busy="k"][aria-busy="true"] .nokkel-detalj:empty::before { width: 72%; }
[data-busy="k"][aria-busy="true"] .nokkel-detalj:empty::after { width: 46%; }
@media (max-width: 760px) {
  .nokkel-detalj { min-height: 32px; }
  [data-busy="k"][aria-busy="true"] .nokkel-detalj:empty { gap: var(--rom-1); padding-top: calc(var(--rom-1) / 2); }
  /* Handlingen i hovedcellen står i flyten på mobil og kommer med første svar: plassen holdes under lasting. */
  [data-busy="k"][aria-busy="true"] .plate > .nokkel:first-child::after {
    content: "";
    order: 5;
    height: var(--knapp-hoyde);
    margin-top: var(--rom-3);
    border-radius: var(--radius);
    background: var(--flate-2);
  }
}
.nokkel .fakta { margin-top: var(--rom-1); }

/* Utdatert: list og merkelapp (○ utdatert) i --varsel, som toppindikatoren og utdatert-banneret. */
.nokkel.utdatert::before { background: var(--varsel); }

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

.tabell .operasjon { display: inline-flex; align-items: center; gap: var(--rom-3); }
/* Status med årsakskode (Pay: feilet, ukjent): samme boks som en merkelapp alene, øverst i linjeboksen. Med
   leverandørens kode i tillegg brytes boksen innenfor 240 px (som td.bryt), så tabellen ikke blir bredere. */
.tabell td > .status-arsak {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rom-1) var(--rom-3);
  min-height: 22px;
  max-width: 240px;
  vertical-align: top;
}
.tabell .arsak { color: var(--tekst-2); }
/* Hele årsaken for en feilet eller ukjent betaling står som tekst under statusen (title er aldri eneste sted). */
.tabell .arsak-tekst { display: block; margin-top: var(--rom-1); font-size: 12px; line-height: 16px; color: var(--tekst-2); }
/* Rad med årsak (Pay: feilet, ukjent) er høyere enn de andre: alle cellene står da på første linje, ikke midt i
   raden. Tekstlinjen (20 px) står like langt fra radens topp som i en vanlig rad (15 px, mobil 13 px), og en
   boks på 22 px (merkelapp) 1 px høyere, så dato, status, beløp og referanse har samme midtlinje. En handling
   på 44 px (berøring) sentreres på samme midtlinje. */
.tabell tbody tr.toppstilt > * { vertical-align: top; padding-top: calc((var(--rad-hoyde) - 2px - 20px) / 2); }
.tabell tbody tr.toppstilt > td > :is(.merkelapp, .status-arsak):first-child { margin-top: -1px; }
@media (pointer: coarse) {
  .tabell tbody tr.toppstilt .handlinger { margin-top: calc((20px - 44px) / 2); }
}
.tabell td.feil-tall { color: var(--fare); }
.tabell .feilkode { font-family: var(--mono); font-size: 13px; color: var(--fare); }

/* ---------- Revisjonsspor ---------- */

.spor-meta { display: inline-flex; align-items: baseline; gap: var(--rom-4); flex: none; }

/* ---------- Betalinger ---------- */

.seksjon-hode h2 > span:first-child { flex: none; }
/* Grensene kommer med første svar: linjen holder plassen fra første tegning. */
#k-marked-grenser:empty { min-height: 20px; }
.pay-volum { min-height: 20px; margin-top: var(--rom-4); }
[data-busy="k"][aria-busy="true"] .pay-volum:empty::before {
  content: "";
  display: block;
  width: 46%;
  height: 12px;
  margin-top: var(--rom-1);
  border-radius: var(--radius);
  background: var(--flate-2);
}
/* Tallrekken har egen toppstrek: streken står på innholdskolonnens topp (seksjonstittelens linjetopp). */
@media (min-width: 901px) { #k-pay-innhold > .tallrekke:first-child { margin-top: calc(-1 * var(--grunnlinje-luft)); } }
.pay-volum + .t-meta { margin-top: var(--rom-1); max-width: 72ch; }
.pay-rad { margin: var(--rom-7) 0; }
.pay-rad > .underseksjon + .underseksjon { margin-top: 0; }

/* Sikkerhet: «Ikke aktivert» skjules når live-betalinger er på; neste underseksjon står da øverst. */
.underseksjon[hidden] + .underseksjon { margin-top: 0; }

.qr-ramme { display: flex; flex-direction: column; gap: var(--rom-4); }
img.qr {
  width: 264px;
  height: 264px;
  border-radius: var(--radius);
  image-rendering: pixelated;
}
.qr-lenke { overflow-wrap: anywhere; }

/* ---------- Kvitteringer og skjemafeil ---------- */

/* Kvitteringene er live-regioner (status og alert) og skal alltid finnes i tilgjengelighetstreet:
   tom kvittering tar ingen plass, men skjules aldri med display eller visibility. */
.kvittering:empty { margin-top: 0; }
.kvittering.feil, .kvittering.feil strong { color: var(--fare); }

@media (max-width: 760px) {
  /* Aktiv nødstopp: den eneste mulige handlingen står først når knappene står under hverandre. */
  :root[data-nodstopp="aktiv"] #k-nodstopp-deaktiver { order: -1; }
  .pay-rad { margin: var(--rom-6) 0; }
  .pay-rad.to-kolonner { row-gap: var(--rom-6); }
  img.qr { width: 100%; max-width: 264px; height: auto; }
}

/* ==================== Autopilot (fra NOKTO Autopilot) ==================== */

/* ---------- Nøkkeltall ---------- */

/* Enheten (NOK, %) står i --tekst-2 etter tallet, mindre enn tallet (som i tallrekken): linjen er tallets. */
.nokkel-verdi .enhet { font-size: 20px; line-height: 0; letter-spacing: 0; }
/* Et tall som ikke får plass i cellen, settes ett trinn mindre (app.js måler): aldri avkortet, aldri sidelengs
   rulling. Linjehøyden står fast, så tallene i platen holder samme linje. */
/* Samme spesifisitet som platens egne størrelser i nokto.css (også mobil), så trinnet alltid vinner. */
.plate > .nokkel .nokkel-verdi.mindre { font-size: 40px; }
.plate > .nokkel .nokkel-verdi.minst { font-size: 28px; letter-spacing: -0.01em; }
.plate > .nokkel .nokkel-verdi.minst .enhet { font-size: 14px; }
.nokkel-tilstand { flex-wrap: wrap; gap: var(--rom-1) var(--rom-4); }
[data-busy="a"][aria-busy="true"] .nokkel-verdi { color: var(--tekst-3); }
/* Detaljen har fast plass (tre linjer à 20 px; mobil to à 16 px), så platen står stille når en detalj endrer
   lengde og når første svar kommer. */
.nokkel-detalj { min-height: 60px; }

/* ---------- Autopilot: tilstand og styring ---------- */

.styring-kropp { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: var(--rom-7); align-items: start; }
.styring-tekst { min-width: 0; }
.styring-urskive { width: 240px; }
.tilstander { row-gap: var(--rom-2); align-items: center; }
.tilstander dd { display: flex; align-items: center; min-height: 22px; }
.neste-tekst { max-width: 64ch; margin-top: var(--rom-4); }
#a-hendelse-tekst { max-width: 64ch; margin-top: var(--rom-2); }
#a-hendelse-tekst:empty { display: none; }
.styring-panel { margin-top: var(--rom-5); max-width: 640px; }
.styring-panel .knapperad { margin-top: var(--rom-4); }

/* ---------- Verdiutvikling ---------- */

.graf { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--rom-3); }
.graf:empty { display: none; }
.graf-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--tekst-2); text-align: right; }
.graf-flate { grid-row: 1; grid-column: 2; min-width: 0; height: 200px; }
.graf-flate svg { width: 100%; height: 100%; overflow: visible; }
.graf-x { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; gap: var(--rom-4); margin-top: var(--rom-2); font-size: 12px; line-height: 16px; color: var(--tekst-2); }
.graf-x time { color: var(--tekst-2); white-space: normal; }   /* kan brytes mellom dato og klokkeslett på 320 px */
.graf-x time:last-child { text-align: right; }
.graf-kant { fill: none; stroke: var(--linje); stroke-width: 1; shape-rendering: crispEdges; }
.graf-grunnlag { fill: none; stroke: var(--linje-sterk); stroke-width: 1; stroke-dasharray: 1 3; }
.graf-linje { fill: none; stroke: var(--tekst-2); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.graf-estimat { fill: var(--bunn); stroke: var(--varsel); stroke-width: 2; }
.graf-siste { fill: var(--messing); }
.verdi-forklaring { margin-top: var(--rom-3); max-width: 72ch; }
#a-verdi-tall { margin-top: var(--rom-5); }
.verdi-kilde { margin-top: var(--rom-3); max-width: 72ch; }
.verdi-kilde:empty { display: none; }

/* ---------- Beslutninger ---------- */

.beslutninger li {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: var(--rom-5);
  padding: var(--rom-4) 0;
  border-top: var(--strek) solid var(--linje);
}
.beslutninger li:first-child { border-top: 0; padding-top: 0; }
.beslutninger time { font-size: 13px; line-height: 20px; }
.beslutninger .beslutning-tekst { max-width: 72ch; }
.beslutninger strong { font-weight: var(--v-medium); }
.beslutninger details { grid-column: 2; margin-top: var(--rom-2); font-size: 13px; line-height: 20px; color: var(--tekst-2); }
.beslutninger summary { cursor: pointer; width: max-content; max-width: 100%; color: var(--tekst); text-decoration: underline; text-decoration-color: var(--messing); text-underline-offset: 4px; }
.kandidater { margin-top: var(--rom-2); }
.kandidater li { display: block; padding: var(--rom-1) 0 var(--rom-1) var(--rom-4); border: 0; position: relative; }
.kandidater li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 2px; background: var(--tekst-2); }
.kandidater .instrument { color: var(--tekst); }

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

.tabell .risiko { vertical-align: middle; }
.tabell td.dempet { color: var(--tekst-2); }

/* ---------- Nytt mandat ---------- */

.kapital-felt { max-width: 320px; }
.nivaer { margin: var(--rom-6) 0 0; padding: 0; border: 0; min-width: 0; }
.nivaer legend { padding: 0; margin-bottom: var(--rom-3); font-size: 13px; line-height: 20px; font-weight: var(--v-medium); }
.nivaliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rom-4); }
.nivaliste.to { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.dca-felt { margin-top: var(--rom-6); padding-left: var(--rom-4); border-left: var(--list) solid var(--messing); }
.dca-felt .nivaer { margin-top: var(--rom-5); }
.niva {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rom-3);
  min-width: 0;
  padding: var(--rom-4);
  border: var(--strek) solid var(--kant);
  border-radius: var(--radius);
  cursor: pointer;
}
.niva:hover { border-color: var(--tekst-2); }
/* Valgt nivå: flate og messingstrek (valgt rad, 3.2). Formen (antall streker) og ordet bærer nivået. */
.niva:has(input:checked) { background: var(--flate); border-color: var(--messing); box-shadow: inset 0 var(--list) 0 var(--messing); }
.niva-topp { display: flex; align-items: center; gap: var(--rom-3); }
.niva input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--tekst); }
.niva-beskrivelse { font-size: 13px; line-height: 20px; color: var(--tekst); }
.rammeliste { font-size: 13px; line-height: 20px; color: var(--tekst-2); }
.rammeliste li { position: relative; padding-left: var(--rom-4); }
.rammeliste li + li { margin-top: var(--rom-1); }
.rammeliste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--tekst-2); }
.nivaer.feil-gruppe .niva { border-color: var(--fare); box-shadow: inset 3px 0 0 var(--fare); }
.niva-melding { color: var(--fare); }
.advarsel { margin-top: var(--rom-5); max-width: 64ch; font-weight: var(--v-medium); }
.hindring { color: var(--tekst); }

/* ---------- Tom tilstand og første visning ---------- */

.velkomst-kropp { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: var(--rom-7); align-items: start; }
.velkomst-tekst .tom { max-width: 56ch; }
.velkomst-urskive { width: 240px; }

.aktivaklasser li + li { margin-top: var(--rom-1); }

/* ---------- Stoppdialog ---------- */

.stopp-dialog { width: min(480px, calc(100% - 2 * var(--marg))); max-width: none; color: var(--tekst); }
.stopp-dialog::backdrop { background: var(--bunn); opacity: 0.8; }
.stopp-dialog h2 { margin-bottom: var(--rom-3); }
.stopp-dialog .knapperad { margin-top: 0; }
.stopp-dialog form > p { max-width: 56ch; margin-bottom: var(--rom-5); color: var(--tekst-2); }
.stopp-dialog .felt { margin-bottom: var(--rom-5); }

/* ---------- Konto og personvern ---------- */

.konto-tekst { max-width: 64ch; margin-bottom: var(--rom-4); color: var(--tekst-2); }
.konto-liste { max-width: 64ch; margin: 0 0 var(--rom-4); }
#kt-epost { overflow-wrap: anywhere; }

/* ---------- Tvungne farger ---------- */

@media (forced-colors: active) {
  .graf-linje, .graf-grunnlag, .graf-kant { stroke: CanvasText; }
  .graf-siste { fill: CanvasText; }
  .graf-estimat { stroke: CanvasText; fill: Canvas; }
  .niva:has(input:checked) { outline: 3px double CanvasText; }
}

/* ---------- Brytpunkter ---------- */

@media (max-width: 1100px) {
  .styring-kropp, .velkomst-kropp { grid-template-columns: minmax(0, 1fr); }
  .styring-urskive, .velkomst-urskive { margin-top: var(--rom-6); }
  .styring-urskive:not(.med-viser) { display: none; }
  .nivaliste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nokkel-detalj { min-height: 32px; }
  .plate > .nokkel .nokkel-verdi .enhet { font-size: 16px; }
  .plate > .nokkel:first-child .nokkel-verdi .enhet { font-size: 20px; }
  .graf-flate { height: 160px; }
  .beslutninger li { grid-template-columns: minmax(0, 1fr); row-gap: var(--rom-1); }
  .beslutninger details { grid-column: 1; }
  .kapital-felt { max-width: none; }
  .nivaliste.to { grid-template-columns: minmax(0, 1fr); }
  .dca-felt { padding-left: var(--rom-3); }
  .stopp-dialog { width: calc(100% - 2 * var(--marg)); }
}

/* ==================== Plattformen: skall, navigasjon, roller og nye seksjoner ==================== */

/* Låsingen: [ordmerke] | Crypto [SIMULERING i Autopilot]. Modusmerket står fast, også når produktnavnet skjules. */
.lasing .modus { flex: none; }
@media (max-width: 760px) {
  .innlogging-flate .lasing.stor { flex-wrap: wrap; row-gap: var(--rom-3); }
}
.topp-hoyre .merkelapp { min-width: 0; }
.laster-tekst { padding: var(--rom-6) 0 var(--rom-8); }

/* Innlogget: navigasjonen er en del av den klebrige toppen (44 px). */
:root { --nav-hoyde: 0px; }
:root[data-innlogget] { --nav-hoyde: 44px; }
:root { --klebrig: calc(var(--baand-hoyde) + var(--topp-hoyde) + var(--nav-hoyde)); }
@media (min-width: 1101px) {
  :root[data-nodstopp="aktiv"] { --klebrig: calc(var(--baand-hoyde) + var(--topp-hoyde) + var(--nav-hoyde) + var(--alarm-maalt, var(--alarm-hoyde))); }
  :root[data-nodstopp="aktiv"] .alarm { top: calc(var(--baand-hoyde) + var(--topp-hoyde) + var(--nav-hoyde)); }
}

/* Miljøbåndet (6.3): TEST vises for alle; PRODUKSJON bare for operatøren (og før rollen er kjent bare på
   innloggingen, der det heller ikke vises: kundeflater i produksjon har ikke bånd). Uten stilark står båndet. */
:root[data-miljo="produksjon"]:not([data-rolle="operator"]) { --baand-hoyde: 0px; }
:root[data-miljo="produksjon"]:not([data-rolle="operator"]) .miljobaand { display: none; }

/* Rollestyrt innhold: operatørdelene vises aldri for en kunde (API-et avviser dem uansett med 403). */
:root:not([data-rolle="operator"]) .bare-operator { display: none !important; }

/* Hver modul har sin egen toppindikator, statuslinje og sine bannere; bare den aktive seksjonens vises. */
:root:not([data-modul="k"]) [data-for="k"],
:root:not([data-modul="a"]) [data-for="a"],
:root:not([data-modul="p"]) [data-for="p"] { display: none !important; }
:root:not([data-premium="ja"]) #topp-modus { display: none !important; }

.hovednav { border-bottom: var(--strek) solid var(--linje); background: var(--bunn); }
.hovednav .ramme { height: calc(var(--nav-hoyde) - var(--strek)); }
.hovednav-liste {
  display: flex;
  align-items: stretch;
  gap: var(--rom-5);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.hovednav-liste::-webkit-scrollbar { display: none; }
.hovednav-liste li { display: flex; flex: none; }
.hovednav-liste a {
  display: flex;
  align-items: center;
  padding: 0 var(--rom-1);
  font-size: 14px;
  line-height: 20px;
  color: var(--tekst-2);
  text-decoration: none;
  box-shadow: inset 0 calc(-1 * var(--list)) 0 transparent;
}
.hovednav-liste a:hover { color: var(--tekst); }
/* Valgt seksjon: tekst i --tekst og messingstrek under (valgt, 3.2). Formen bærer valget, ikke bare fargen. */
.hovednav-liste a[aria-current="page"] { color: var(--tekst); font-weight: var(--v-medium); box-shadow: inset 0 calc(-1 * var(--list)) 0 var(--messing); }
.hovednav-liste a:focus-visible { outline-offset: -4px; }
@media (max-width: 760px) {
  .hovednav-liste { gap: var(--rom-4); margin: 0 calc(-1 * var(--marg)); padding: 0 var(--marg); }
}

.rute > .seksjon:first-child, .rute > div:first-child > .seksjon:first-child, .rute > div:first-child > h2 + .plate { border-top: var(--strek) solid var(--linje-sterk); }
.p-linje { margin-top: var(--rom-4); max-width: 72ch; }
.p-linje:empty { display: none; }
.felt-rad.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.felt select { width: 100%; }
@media (max-width: 760px) { .felt-rad.tre { grid-template-columns: minmax(0, 1fr); } }

/* Premium-siden for Autopilot uten aktivt abonnement: rolig, ingen nedtelling, ingen løfter. */
.premium-side { display: block; }
.premium-kropp { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--rom-8); align-items: center; }
.premium-tekst { min-width: 0; max-width: 64ch; }
.premium-etikett { color: var(--tekst-2); }
.premium-tittel { margin-top: var(--rom-3); font-size: 32px; line-height: 40px; font-weight: var(--v-lett); letter-spacing: -0.01em; }
.premium-ingress { margin-top: var(--rom-4); color: var(--tekst-2); }
.premium-liste { margin-top: var(--rom-5); padding: 0; list-style: none; }
.premium-liste li { position: relative; padding: var(--rom-3) 0 var(--rom-3) var(--rom-5); border-top: var(--strek) solid var(--linje); }
.premium-liste li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 2px; background: var(--tekst-2); }
.premium-liste strong { font-weight: var(--v-medium); }
.premium-kropp .urskive { width: 280px; }
.premium-teaser .knapperad { margin-top: var(--rom-4); }
@media (max-width: 1100px) {
  .premium-kropp { grid-template-columns: minmax(0, 1fr); }
  .premium-kropp .urskive { display: none; }
}
@media (max-width: 760px) { .premium-tittel { font-size: 24px; line-height: 32px; } }

/* Revisjonsspor (Sikkerhet): samme liste som operasjonens spor. */
.spor-liste .spor-tekst { min-width: 0; overflow-wrap: anywhere; }
.seksjon-kropp > .tom + .underseksjon, .seksjon-kropp > .tabell-feste + .tom + .underseksjon { margin-top: var(--rom-7); }
.periode { white-space: nowrap; }
.p-linje + .underseksjon { margin-top: var(--rom-6); }
/* Kunder i produksjon har ikke miljøbånd, og dermed ikke båndets Logg ut på smal skjerm: knappen i toppfeltet
   står da på alle bredder (som i den tidligere Autopilot-flaten). Logg ut er alltid i det klebrige toppfeltet. */
@media (max-width: 760px) {
  :root[data-miljo="produksjon"]:not([data-rolle="operator"]) #logg-ut.kun-bred { display: inline-flex !important; }
}
.integrasjon-tilstand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rom-2) var(--rom-3); }
.integrasjon-bruk { display: block; margin-top: var(--rom-1); color: var(--tekst-2); }

/* ---------- Resultattavle (Strategier) ---------- */

.tavle-konklusjon { margin-bottom: var(--rom-4); max-width: 72ch; font-weight: var(--v-medium); }
.tavle-tall { display: block; text-align: right; white-space: nowrap; }
.tavle-under { display: block; font-size: 12px; line-height: 16px; color: var(--tekst-2); white-space: nowrap; }

/* ==================== Salg: forside, registrering, abonnement og juridiske sider ==================== */

/* Forsiden (ikke innlogget). Natt som resten; én primærknapp (Registrer deg). */
.salg-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-4);
  height: var(--topp-hoyde);
  border-bottom: var(--strek) solid var(--linje);
}
.salg-topp .lasing .ordmerke { height: 18px; }
.salg-helt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  column-gap: var(--rom-9);
  padding: var(--rom-9) 0 var(--rom-8);
}
.salg-helt-tekst { min-width: 0; max-width: 60ch; }
.salg-helt h1 { margin: var(--rom-4) 0 0; font-size: 56px; line-height: 60px; font-weight: var(--v-lett); letter-spacing: var(--sperre-stor); max-width: 16ch; }
.salg-ingress { margin-top: var(--rom-5); font-size: 16px; line-height: 24px; color: var(--tekst-2); max-width: 52ch; }
.salg-helt .urskive { justify-self: end; width: 440px; }
/* Pengeregelen (3.5): skravur = ikke ekte penger. Modusmerket bærer skravuren; teksten står på bunnen. */
.salg-simulering {
  display: flex;
  align-items: flex-start;
  gap: var(--rom-4);
  margin-top: var(--rom-6);
  padding: var(--rom-4) 0;
  border-top: var(--strek) solid var(--linje);
  border-bottom: var(--strek) solid var(--linje);
  max-width: 60ch;
}
.salg-simulering .modus { flex: none; margin-top: 2px; }
.salg-simulering p { color: var(--tekst-2); }
.salg-simulering strong { display: block; color: var(--tekst); font-weight: var(--v-medium); }
.salg-helt .knapperad { margin-top: var(--rom-6); }
.salg-pris { padding-bottom: var(--rom-5); }
.salg-pris-verdi { margin-top: var(--rom-2); font-size: 40px; line-height: 48px; font-weight: var(--v-lett); letter-spacing: var(--sperre-stor); }
.pris-belop[data-pris] { font-variant-numeric: tabular-nums; }
.salg .premium-liste { margin-top: 0; max-width: 64ch; }
.salg .definisjoner dd { color: var(--tekst-2); max-width: 64ch; }
@media (max-width: 1100px) {
  .salg-helt { grid-template-columns: minmax(0, 1fr); }
  .salg-helt .urskive { display: none; }
}
@media (max-width: 760px) {
  .salg-helt { padding: var(--rom-7) 0 var(--rom-6); }
  .salg-helt h1 { font-size: 40px; line-height: 44px; }
  .salg-ingress { font-size: 14px; line-height: 20px; }
  .salg-helt .knapperad .knapp { flex: 1 1 100%; }
  .salg-pris-verdi { font-size: 28px; line-height: 36px; }
}

/* Innlogging, registrering, glemt og nytt passord: lenker under skjemaet og avkrysning for vilkårene. */
.lenkerad { margin-top: var(--rom-4); }
.innlogging-flate .kvittering:empty { margin-top: 0; }
.innlogging-flate .kvittering.feil { color: var(--fare); }
.felt .avkrysning { display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--rom-3); margin-bottom: 0; font-size: 13px; line-height: 20px; font-weight: var(--v-normal); color: var(--tekst); cursor: pointer; }
.felt .avkrysning input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; border: 0; background: none; accent-color: var(--tekst); }
.felt.feil .avkrysning input { box-shadow: none; }
.valg-felt { margin-top: var(--rom-5); }
.felt.feil .avkrysning input { outline: var(--strek) solid var(--fare); outline-offset: 2px; }

/* Bunnlinjen: vilkår og personvern på alle sider. */
.bunnlenker { flex: none; }

/* Abonnement i Autopilot. */
#a-pris-tekst { margin-top: var(--rom-3); }
.abonnement-tekst { max-width: 64ch; }
.abonnement-tekst strong { font-weight: var(--v-medium); }

/* Juridiske sider (/vilkar, /personvern): ren tekst, utkastet merket øverst. Plassholdere i varselfarge. */
.juridisk-topp { display: flex; align-items: center; height: var(--topp-hoyde); border-bottom: var(--strek) solid var(--linje); }
.juridisk-topp .lasing { color: inherit; text-decoration: none; }
.juridisk-topp .ordmerke { height: 18px; }
.juridisk { max-width: 72ch; padding: var(--rom-7) 0 var(--rom-8); }
.juridisk-utkast { margin-bottom: var(--rom-7); }
.juridisk h1 { margin: var(--rom-3) 0 var(--rom-2); font-size: 28px; line-height: 36px; font-weight: var(--v-lett); letter-spacing: -0.01em; }
.juridisk h2 { margin-top: var(--rom-7); padding-top: var(--rom-4); border-top: var(--strek) solid var(--linje-sterk); }
.juridisk h3 { margin-top: var(--rom-5); }
.juridisk p, .juridisk ul { margin-top: var(--rom-3); }
.juridisk ul { padding-left: var(--rom-5); list-style: disc; }
.juridisk li::marker { color: var(--tekst-2); }
.juridisk li + li { margin-top: var(--rom-2); }
.juridisk strong { font-weight: var(--v-medium); }
.juridisk-liste { margin-top: var(--rom-4); }
.juridisk-liste > div { padding: var(--rom-3) 0; border-bottom: var(--strek) solid var(--linje); }
.juridisk-liste dt { font-weight: var(--v-medium); }
.juridisk-liste dd { margin: var(--rom-1) 0 0; }
.juridisk-ledd { display: block; }
.juridisk-slutt { margin-top: var(--rom-7); padding-top: var(--rom-4); border-top: var(--strek) solid var(--linje); }
.plassholder { padding: 0 var(--rom-1); border-radius: var(--radius); background: var(--varsel-flate); color: var(--varsel); font-weight: var(--v-medium); }