/* ==========================================================================
   Laget over designsystemet, ikke inni det.

   assets/nordiva.css er en KOPI fra kreatørportalen, og retningen på
   rettelser er enveis — se README. Redigerer vi kopien, kan vi ikke lenger
   hente en oppdatert versjon derfra uten å miste det som står her.

   TO FLATER, TO FORSKJELLIGE BEHOV

   Kreatørportalen krever minst 18px brødtekst overalt, fordi kreatørene er
   mellom 35 og 55. Redigererne er yngre og sitter i Premiere hele dagen, så
   en litt tettere arbeidsflate leser de raskere, ikke tregere.

   Men det gjelder ARBEIDSFLATEN. Første utgave av denne fila strammet inn
   alt, innloggingen inkludert, og det var feil: innloggingen er en skjerm du
   ser sjelden, gjør én ting på, og gjerne på telefon i en travel situasjon.
   Der er tetthet ingen gevinst — den gjør bare at kortet ser klemt ut.

   Så nå: arbeidsflaten er dempet strammere enn kreatørportalen, men mildere
   enn før. Innloggingen er tvert imot romsligere enn utgangspunktet.
   ========================================================================== */

body {
  /* 17, ikke 16. Første forsøk gikk til 16 og ble for trangt. Fortsatt under
     kreatørportalens 18, som er poenget. */
  font-size: var(--t-5);
  line-height: 1.65;
}

:root {
  /* Rytmen strammes rundt ti prosent, ikke tjue. Forholdet mellom trinnene
     beholdes, så komponentene ser like ut — de står bare litt tettere. */
  --luft-1: 9px;
  --luft-2: 16px;
  --luft-3: 25px;
  --luft-4: 39px;
  --luft-5: 70px;
}

/* ---------------------------------------------------------------- LOGIN ---
   Alt her går motsatt vei av resten: større, luftigere, tydeligere.
   -------------------------------------------------------------------------- */

.loginside {
  font-size: var(--t-5);
  /* Kortet skal stå i den optiske midten, ikke klistret mot toppen. */
  justify-content: center;
  padding: 40px 20px;
}

.loginkort {
  /* 440 var trangt for en linje som «Vi har sendt en kode til
     theodor@nordiva.no». Nå brekker den ikke midt i adressen. */
  max-width: 520px;
  padding: 52px 46px 40px;
}

.loginkort h1 {
  font-size: var(--t-8);
  line-height: 1.15;
  margin: 0 0 14px;
}

.loginkort .lead {
  font-size: var(--t-5);
  line-height: 1.6;
  margin: 0 0 30px;
}

.loginkort .felt { margin-bottom: 24px; }

.loginkort label {
  font-size: var(--t-5);
  margin-bottom: 8px;
  display: block;
}

/* Feltene blir høyere. Et innskrivingsfelt som er lett å treffe med tommelen
   er hele forskjellen på en telefon. */
.loginkort input {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: var(--t-5);
}

.loginkort .btn {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: var(--t-5);
}

/* Sifferfeltet er det eneste man skal se på når man er kommet hit. */
.loginkort .kodefelt.sifre {
  font-size: var(--t-8);
  padding-top: 18px;
  padding-bottom: 18px;
}

/* HJELPEBOKSEN SKAL IKKE KONKURRERE MED «LOGG INN»

   Den sto med samme visuelle vekt som hovedhandlingen, og da leser øyet to
   likeverdige valg der det bare finnes ett. Nå er den lettere, mindre, og
   tydelig underordnet — men fortsatt der, fordi den er veien ut for den som
   skrev feil adresse. */
.loginkort .varsel {
  margin-top: 30px;
  padding: 18px 20px;
  font-size: var(--t-4);
  line-height: 1.55;
  background: var(--paper);
  border-color: var(--line);
}
.loginkort .varsel b { display: block; margin-bottom: 6px; }
.loginkort .varsel .btn { font-size: var(--t-4); padding: 10px 18px; }

.loginkort .hint { margin-top: 18px; font-size: var(--t-4); }
.loginskille { margin: 30px 0 18px; }

/* ------------------------------------------------------------ ARBEIDSFLATEN --- */

.innhold h1 { font-size: var(--t-7);  line-height: 1.25; }
.innhold h2 { font-size: var(--t-6); line-height: 1.3; }
.innhold h3 { font-size: var(--t-5); line-height: 1.35; }

.innhold .kort { padding: 20px 22px; }
.innhold .kort + .kort { margin-top: 14px; }

/* Tall som skal sammenlignes nedover en kolonne må stå i kolonne. Uten dette
   danser sifrene sidelengs i honorarlista. */
.innhold .hoyre, .stripe .hoyre { font-variant-numeric: tabular-nums; }

/* Oppdragskortet: et helt kort som er én klikkflate. Nettleseren gir <button>
   sin egen sentrerte, innrammede stil, og alt her nullstiller den. */
.oppdragskort {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 20px 22px;
  transition: border-color .15s ease, transform .15s ease;
}
.oppdragskort + .oppdragskort { margin-top: 14px; }
.oppdragskort:hover  { border-color: var(--brand); }
.oppdragskort:active { transform: translateY(1px); }
.oppdragskort h3     { margin: 0 0 4px; }

.innhold .slippsone { padding: 26px 20px; }