/* ==========================================================================
   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. Derfor
   ligger hver eneste forskjell i denne fila, lastet etterpå.

   ALT HER HANDLER OM ÉN TING: brukerne er andre mennesker.

   Kreatørportalens spesifikasjon krever minst 18px brødtekst, og begrunnelsen
   står i klartekst: kreatørene er mellom 35 og 55. Det er en riktig regel for
   dem, og feil regel her.

   Videoredigererne er yngre, og — viktigere enn alderen — de sitter i Premiere
   eller Resolve hele dagen. Verktøyene deres er tette: tidslinjer, bins,
   effektpaneler, alt synlig samtidig. En flate med 18px tekst og luft mellom
   hver linje leser de ikke som «lettlest», de leser den som treg. Den tvinger
   fram scrolling for å se fire oppdrag som fint kunne stått på én skjerm.

   Så: mindre type, tettere rytme, mer på skjermen. Ingenting annet er endret —
   fargene, formene og komponentene er de samme, fordi det fortsatt er Nordiva.
   ========================================================================== */

body {
  /* 16, ikke 18. Fortsatt over nettleserens standard på 16 for de fleste
     komponenter, og godt over det Premiere selv bruker i panelene sine. */
  font-size: 16px;
  line-height: 1.6;
}

:root {
  /* Rytmen strammes rundt 20 prosent. Forholdet mellom trinnene beholdes, så
     komponentene som bruker skalaen ser like ut — de står bare tettere. */
  --luft-1: 8px;
  --luft-2: 14px;
  --luft-3: 22px;
  --luft-4: 34px;
  --luft-5: 60px;
}

/* Overskriftene følger med ned. Uten dette blir spranget fra h1 til brødtekst
   for stort, og siden ser ut som en plakat i stedet for et verktøy. */
.innhold h1 { font-size: 1.75rem; line-height: 1.25; }
.innhold h2 { font-size: 1.25rem; line-height: 1.3; }
.innhold h3 { font-size: 1.05rem; line-height: 1.35; }

/* Kortene puster mindre. De er lister man skanner, ikke sider man leser. */
.innhold .kort { padding: 18px 20px; }
.innhold .kort + .kort { margin-top: 12px; }

/* Tall som skal sammenlignes nedover en kolonne må stå i kolonne. Uten dette
   danser sifrene sidelengs i honorarlista, og summen blir vanskeligere å lese
   enn den trenger å være. */
.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(--radius-card);
  padding: 18px 20px;
  transition: border-color .15s ease, transform .15s ease;
}
.oppdragskort + .oppdragskort { margin-top: 12px; }
.oppdragskort:hover  { border-color: var(--brand); }
.oppdragskort:active { transform: translateY(1px); }
.oppdragskort h3     { margin: 0 0 4px; }

/* Slippsonen kan være lavere. «Dra filene hit» er ikke en instruksjon disse
   trenger plass til å oppdage — de har dratt filer inn i et vindu før. */
.innhold .slippsone { padding: 22px 18px; }