/* ─────────────────────────────────────────────────────────────────────
   SEJR Organic Analytics — det layout dashboardet SELV er.

   Alt udseende kommer fra /identitet/sejr-identitet.css: SEJR IDENTITY
   (farve, skrift, bevægelse) plus hele UI-kittet, fladgjort af
   scripts/byg-identitet.mjs.

   DEN ENE REGEL FOR DENNE FIL: den definerer ingen farve og ingen
   skriftgrad. Ikke én hex, ikke én px skriftstørrelse. Alt peges på med
   var(). Det er kittets egen regel for sit eget lag, og en app der bryder
   den, er præcis dén drift kittet findes for at stoppe — 642 fremmede
   værdier målt på tværs af apperne, da nogen sidst talte efter.

   Filen havde selv fejlen indtil 22. september 2026: den opfandt --mute,
   --line, --fill, --teal og --gold-ink, og genbrugte --stone/--mist/
   --fog/--chalk, som ikke findes i identiteten. Fire af dem lå under AA
   som tekst. De er væk; det der står tilbage er --n-*-skalaen, --tekst-*,
   --kant og tilstandsfarverne, som alle er målt i kilden.

   Og: crimson optræder ikke på denne skærm. Crimson er HANDLINGEN, ét
   sted pr. skærm, og et dashboard har ingen. Retning bæres af ordet og
   fortegnet, ikke af rød og grøn — fremgang er --money-in, tilbagegang er
   neutral, for færre sessioner er ikke en fejl.
   ───────────────────────────────────────────────────────────────────── */

/* ── log ind ────────────────────────────────────────────────────────── */

#login {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rum-5);
  background: var(--flade);
}
#loginkort {
  inline-size: min(360px, 100%);
  align-items: flex-start;
  gap: var(--rum-4);
}
#loginkort .kort-under { max-inline-size: var(--maal-kort); }
.fejl { color: var(--fn-danger); font-size: var(--fs-body-s); min-block-size: 1.2em; margin: 0; }

/* ── links ──────────────────────────────────────────────────────────── */

/* Kittet sætter ingen farve på et bart <a> — det er et lag, ikke et
   dokument — så uden dette arver hver sti i hver tabel browserens blå og
   besøgt-lilla. To fremmede farver, indført af ingenting.
   Behandlingen er husets egen, skrevet af .prosa a i sejr-skrift.css:
   farven arves, stregen bærer klikket. Crimson gør det ikke: crimson er
   handlingen, ét sted pr. skærm, og en sti i en tabel er ikke den. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dekor);
  text-underline-offset: .15em;
  transition: text-decoration-color var(--overgang-tilstand);
}
a:hover { text-decoration-color: currentColor; }

/* ── skal ───────────────────────────────────────────────────────────── */

#app { display: none; }
.skal { --skal-maal: 78rem; }

/* Doken bærer status til venstre og kontrollerne til højre. Kittets egen
   .dok centrerer sin søgepille; her er der ingen pille at centrere. */
.dok { justify-content: space-between; gap: var(--rum-4); }
/* På nat er sidebjælkens ink og indholdets ink den samme værdi, og skillet
   forsvinder. Hårstregen hører egentlig i kittet; den står her indtil den
   gør. */
.skal-side { border-inline-end: 1px solid var(--kant); }
.dok .raekke { flex: none; }
/* På en telefon siger vælgeren selv «30 d»; navnet ved siden af er det
   samme ord to gange, og det er dét der skubber solknappen ud. */
@media (max-width: 560px) { .periodevaelger-navn { display: none; } }

@media (max-width: 900px) {
  /* Sidebjælken er en skuffe på mobil. Tæppet hører til skuffen, ikke til
     knappen der åbner den. */
  .skal-taeppe {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--slor);
    border: 0;
  }
  .skal-taeppe[hidden] { display: none; }
}
@media (min-width: 901px) {
  .skal-taeppe { display: none; }
}

/* ── sektioner ──────────────────────────────────────────────────────── */

.sektion { scroll-margin-top: calc(var(--kontrol-h) + var(--rum-8)); }
.sektion + .sektion { margin-block-start: var(--rum-9); }
.sektion-hoved { flex-wrap: wrap; }
.sektion-hoved .sektion-tekst { flex: 1; }
.sektion-krop[hidden] { display: none; }

h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--spor-etiket);
  text-transform: uppercase;
  color: var(--tekst-3);
}

/* To spalter hvor den ene bærer en graf eller en tabel og den anden en
   liste. Kittets .gitter-2 deler lige; her skal den brede have mere. */
.gitter.delt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .gitter.delt { grid-template-columns: minmax(0, 1fr); } }

.kort-hoved { align-items: baseline; }
details.kort > summary { cursor: pointer; list-style: none; }
details.kort > summary::-webkit-details-marker { display: none; }
details.kort > summary::after {
  content: "vis";
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--tekst-3);
}
details.kort[open] > summary::after { content: "skjul"; }

pre {
  margin: 0;
  padding: var(--rum-4) var(--rum-5);
  border-radius: var(--hjorne-3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── tabeller ───────────────────────────────────────────────────────── */

.tabel .sti {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  overflow-wrap: anywhere;
}
.tabel .soegeord { display: inline-block; max-inline-size: 34ch; overflow-wrap: anywhere; }
.tabel .gruppe td {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--spor-etiket);
  text-transform: uppercase;
  color: var(--tekst-3);
  background: var(--flade-3);
  block-size: auto;
  padding-block: var(--rum-2);
}
/* Retning: ordet og fortegnet bærer beskeden, farven bekræfter den.
   .ind og .ud er kittets egne — grøn for fremgang, neutral for det
   modsatte, aldrig rød: en nedgang er ikke en fejl. */
.tabel .ind, .noegletal-under .ind, .ind { color: var(--money-in); }
.tabel .ud, .noegletal-under .ud, .ud { color: var(--tekst); }
.flad { color: var(--tekst-3); }

@media (max-width: 760px) {
  /* Tabellerne holder op med at være tabeller: hver række bliver en
     etiketteret blok. Så ruller ingen kolonne ud af skærmen, og
     .tabel-ramme behøver ikke at gemme den halve tabel bag et rul. */
  .tabel-ramme { overflow-x: visible; }
  .tabel thead { display: none; }
  .tabel tbody tr { display: block; padding: var(--rum-3) var(--rum-4); border-block-end: 1px solid var(--kant); }
  .tabel tbody tr:last-child { border-block-end: 0; }
  .tabel tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--rum-4);
    align-items: baseline;
    block-size: auto;
    padding: var(--rum-1) 0;
    border: 0;
    text-align: start;
  }
  .tabel tbody td::before {
    content: attr(data-etiket);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    letter-spacing: var(--spor-etiket);
    text-transform: uppercase;
    color: var(--tekst-3);
    flex: none;
  }
  .tabel tbody td:first-child { display: block; font-weight: var(--fw-medium); padding-block-end: var(--rum-2); }
  .tabel tbody td:first-child::before { content: none; }
  .tabel tbody tr.gruppe td { display: block; }
  .tabel tbody tr.gruppe td::before { content: none; }
  .tabel .soegeord { max-inline-size: none; }
}

/* ── grafen ─────────────────────────────────────────────────────────── */

/* §09 regel 1-10 ligger i kittets .graf. Det her er kun pladsen: 30-90
   søjler står tættere end kittets standard, som er sat til måneder. */
.graf-taet { --graf-h: 150px; }
.graf-taet .graf-felt,
.graf-taet .graf-mrkr { gap: var(--rum-1); }
.graf-taet .soejle { position: relative; }
.graf-taet .stang { border-radius: var(--hjorne-1) var(--hjorne-1) 0 0; }
.graf-taet .soejle:hover .stang { opacity: .62; }
.graf-mrk { white-space: nowrap; }
.graf-mrk:first-child { text-align: start; }
.graf-mrk:last-child { text-align: end; }

.graf-lag { position: relative; }
.graf-lag .tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  max-inline-size: none;
}
.graf-lag .tip.er-fremme { opacity: 1; }

/* ── lister og skeletter ────────────────────────────────────────────── */

.soejleliste-navn { gap: var(--rum-3); }

.venter-blok { display: grid; gap: var(--rum-3); }
.venter-graf { block-size: 150px; }
.fejlet {
  display: flex;
  align-items: center;
  gap: var(--rum-4);
  flex-wrap: wrap;
  color: var(--tekst-2);
  font-size: var(--fs-body-s);
}
.fejlet b { color: var(--fn-danger); font-weight: var(--fw-medium); }
.henter { opacity: .5; transition: opacity var(--overgang-tilstand); }

/* ── print ──────────────────────────────────────────────────────────── */

@media print {
  .skal { grid-template-columns: 1fr; }
  .skal-side, .dok, .knap, .sektion-handling { display: none; }
  .kort { break-inside: avoid; box-shadow: none; }
  .sektion-krop[hidden] { display: revert; }
}