/* ==========================================================================
   Mørkt tema. Nordiva-blå som flate, ikke bare som aksent.

   HVORFOR DETTE FINNES

   nordiva.css er kreatørportalens designsystem: lyst, rolig, 18px, bygget for
   kreatorer mellom 35 og 55 som er innom noen ganger i måneden. Det er riktig
   der. Her er brukerne yngre, de sitter i Premiere og Resolve hele dagen, og
   de ser på video mens de bruker flaten.

   Det siste er ikke en smakssak: en hvit flate ved siden av en videorute
   endrer hvordan øyet leser fargene i klippet. Alle verktøyene deres er mørke
   av nettopp den grunn.

   HVORDAN DET ER GJORT

   Ikke ved å skrive om komponentene, men ved å bytte ut tokenene de allerede
   bruker. nordiva.css tegner alt gjennom --paper, --card, --ink og --line, så
   å definere dem på nytt her snur hele flaten uten å røre en eneste
   komponentregel. Kopien forblir uendret, og retningen på rettelser er
   fortsatt enveis.
   ========================================================================== */

:root {
  /* --- flatene ------------------------------------------------------------
     Tre lag, mørkest nederst. Uten tre nivåer forsvinner kortene inn i siden,
     og da har man en mørk flate uten struktur — som leses som rot, ikke som
     ro. --card er selve Nordiva-blåen; siden er en dypere variant av den. */
  --paper:     #060B1E;
  --card:      #0E1B4D;
  --brand-myk: rgba(80, 125, 255, .14);

  --line:      rgba(255, 255, 255, .10);
  --line-mork: rgba(255, 255, 255, .18);

  /* --- tekst --------------------------------------------------------------
     Ikke ren hvit. #FFF på mørk blå gir en hardhet som tretter øyet etter en
     time; et snev av blått i teksten legger seg roligere på flaten. */
  --ink:      #E9EEFB;
  --ink-soft: #98A5C9;

  /* --- aksent -------------------------------------------------------------
     Merkefargen kan ikke lenger være knappefargen: marineblå på marineblå er
     en usynlig knapp. Aksenten er den samme fargen løftet opp til den bærer
     hvit tekst og leses som «trykk her» på en mørk flate. */
  --brand:      #4C7DFF;
  --brand-mork: #3A66E0;

  /* --- statuser -----------------------------------------------------------
     De lyse bakgrunnene fra kreatørportalen (#EDF5EF og slekt) blir lysende
     flekker på mørk flate. Her bærer fargen teksten, og bakgrunnen er bare et
     hint av den samme fargen. */
  --green:  #5FD99B;  --green-bg:  rgba(95, 217, 155, .13);  --green-line:  rgba(95, 217, 155, .32);
  --red:    #FF8B8B;  --red-bg:    rgba(255, 139, 139, .13); --red-line:    rgba(255, 139, 139, .32);
  --amber:  #F2C46B;  --amber-bg:  rgba(242, 196, 107, .13); --amber-line:  rgba(242, 196, 107, .32);
  --violet: #A9B6FF;  --violet-bg: rgba(169, 182, 255, .13); --violet-line: rgba(169, 182, 255, .32);

  /* Skygger gjør ingenting på mørk flate — der er det lyset som skiller lag.
     Beholdt som en svak dybde under kortene, ikke som en glorie rundt dem. */
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.38);
  --shadow-lav: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3);
}

/* --- lyset i bakgrunnen ---------------------------------------------------
   To myke skjær, ett blått oppe til venstre og ett svakere nede til høyre.
   De ligger fast i vinduet og scroller ikke, så flaten får dybde uten at noe
   beveger seg mens man jobber.

   Bevisst rolig. TIHLDE har animerte bølger, og det kler en forside man
   besøker. Dette er en arbeidsflate man står i — der blir bevegelse noe man
   må se bort fra. */
body {
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(76, 125, 255, .20), transparent 62%),
    radial-gradient(900px  520px at 92% 108%, rgba(76, 125, 255, .11), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

/* Logoen er marineblå og forsvinner mot marineblått. Den snus til hvit i
   stedet for at vi legger inn en ny fil — samme bilde, ett filter. */
.logo, .loginlogo { filter: brightness(0) invert(1); }

/* --- flater som var hvite ------------------------------------------------- */

.topplinje {
  background: rgba(10, 18, 48, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.sidemeny, .bunnmeny, .ark .arkinnhold {
  background: rgba(14, 27, 77, .55);
  border: 1px solid var(--line);
}

.bunnmeny { backdrop-filter: blur(14px); }

/* Valgt punkt i menyen. Merkefargen som svakt felt, ikke som fyll — et fylt
   punkt i en meny drar blikket vekk fra innholdet det peker på. */
.sidemeny button[aria-current="true"],
.bunnmeny button[aria-current="true"] {
  background: var(--brand-myk);
  color: var(--ink);
}
.sidemeny button:hover, .bunnmeny button:hover { background: rgba(255,255,255,.05); }

/* --- felt ----------------------------------------------------------------- */

input, select, textarea {
  background: rgba(255, 255, 255, .045);
  border-color: var(--line);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  background: rgba(255, 255, 255, .07);
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 125, 255, .18);
}
input::placeholder, textarea::placeholder { color: rgba(152, 165, 201, .55); }

/* Select-pilen i nordiva.css er tegnet mørk for lys flate. */
select { color-scheme: dark; }

/* --- knapper --------------------------------------------------------------- */

.btn.rolig {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line);
  color: var(--ink);
}
.btn.rolig:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--line-mork);
}

/* --- kort og striper ------------------------------------------------------- */

.kort, .oppdragskort, .varsel {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
}
.oppdragskort:hover { border-color: var(--brand); background: rgba(76, 125, 255, .07); }

.stripe { border-color: var(--line); }

/* Videoruta skal være svart, ikke grå. Alt annet enn svart rundt et klipp
   forskyver hvordan man leser bildet. */
.videoramme { background: #000; border: 1px solid var(--line); }
.videoramme .mangler { color: var(--ink-soft); }

/* --- småting --------------------------------------------------------------- */

.merkepille {
  background: var(--brand-myk);
  color: var(--ink);
  border: 1px solid rgba(76, 125, 255, .3);
}
.brukerchip { background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.brukerchip:hover { background: rgba(255,255,255,.09); }
.initialer { background: var(--brand); color: #fff; }
.meny2 { background: #101C46; border: 1px solid var(--line-mork); }
.meny2 button:hover { background: rgba(255,255,255,.06); }

.tomstat { color: var(--ink-soft); }
.tomstat .ikon svg { opacity: .55; }

.loginbunn, .hint { color: var(--ink-soft); }
.loginskille:before, .loginskille:after { background: var(--line); }

a { color: var(--brand); }
code { background: rgba(255,255,255,.07); color: var(--ink); padding: 2px 6px; border-radius: 6px; }

/* ==========================================================================
   BØLGENE BAK INNLOGGINGEN
   ========================================================================== */

.bolger {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Ligger i #login, som skjules når man er innlogget. Bølgene forsvinner
     dermed av seg selv idet arbeidsflaten åpnes — ingen egen regel for det. */
}

/* Kortet må ligge over. Uten dette havner innloggingen bak sitt eget bakteppe. */
.loginside { position: relative; z-index: 1; }

.bolger .grunn use {
  fill: none;
  stroke: rgba(120, 160, 255, .13);
  stroke-width: 1.1;
}

/* LYSPUNKTET

   pathLength="1000" på hver bane er nøkkelen: den normaliserer alle kurvene
   til samme regnelengde, uansett hvor lange de faktisk er. Da kan én
   dasharray gjelde for alle seksten, og lyspunktet blir like langt på hver.
   Uten den måtte hver linje hatt sine egne tall, målt for hånd.

   140 lys og 1000 mørkt: gapet er like langt som hele banen, så det er aldri
   mer enn ett lyspunkt på en linje om gangen. */
.bolger .lys use {
  fill: none;
  stroke: #7BA5FF;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-dasharray: 140 1000;
  stroke-dashoffset: 1140;
  animation-name: bolgelop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Gløden ligger på GRUPPA, ikke på hver linje. Seksten separate filtre er
   seksten separate lag nettleseren må tegne hver frame; ett filter over hele
   flokken gir samme utseende til en brøkdel av jobben. */
.bolger .lys { filter: drop-shadow(0 0 7px rgba(76, 125, 255, .55)); }

@keyframes bolgelop { to { stroke-dashoffset: 0; } }

/* Den som har slått av bevegelse i systemet skal ikke få den likevel. Linjene
   blir stående — flaten ser fortsatt ut som den skal, den beveger seg bare
   ikke. */
@media (prefers-reduced-motion: reduce) {
  .bolger .lys use { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: .35; }
}