/* HeatCheck · felles stilark
   ══════════════════════════════════════════════════════════════════════════

   Det de fem sidene faktisk deler, ett sted. Fram til 15. august 2026 sto
   dette som fem kopier — én i hver `<style>`-blokk — og repoet visste det:
   kommentaren over temabryteren sa rett ut at «blokka er ordrett lik i alle
   fem sidene», og `tools/tema-check.mjs` ble skrevet for å holde kopiene i
   takt. En sjekk som passer på en kopi er billigere enn å oppdage at den har
   glidd, men den er dyrere enn å ikke ha kopien.

   ── HVA SOM STÅR HER, OG HVA SOM IKKE GJØR DET ────────────────────────────

   Her: de elleve fargevariablene alle fem definerer likt i begge temaer, og
   temabryterens utseende — 851 tegn som var byte-identiske fem steder.

   Ikke her: alt en side eier alene. `temp-bets.html` har 35 fargevariabler,
   `login.html` har 11; de som bare hovedappen bruker hører hjemme der de
   brukes. En fellesfil som samler alt noen bruker er ikke felles — den er
   bare en annen fil å lete i.

   Sidene definerer fortsatt sine egne variabler ETTER at denne er lastet, så
   en side kan overstyre en fellesverdi med vilje. Gjør du det, skriv hvorfor
   — ellers ser det ut som drift.

   ── LÅSEN ─────────────────────────────────────────────────────────────────

   `/felles.css` står i `ÅPNE` i `api/_las.mjs`. Uten det ville
   innloggingssiden — som er åpen — hentet et stilark bak låsen og blitt
   tegnet uten stil, for den som ikke er logget inn ennå.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --accent:      #FF6B35;
  --accent-2:    #FF8A5C;
  --bg:          #0B0F14;
  --line:        #304154;
  --neg:         #F85149;
  --on-accent:   #1A0B03;
  --surface:     #101720;
  --surface-2:   #131A22;
  --text:        #E6EDF3;
  --text-3:      #8B9AA8;
  --warn:        #D29922;
}

/* `--accent` ble mørknet fra #C2570A til #B85309 den 15. august 2026. Målt mot
   `--bg` var den gamle 4,19:1 — AA bare for stor tekst, og aksentfargen bærer
   småtekst flere steder (lenker i tabeller, «Se det i appen», valgt fane).
   Den nye er 4,56:1 mot bakgrunn og 4,91:1 mot kort, altså AA for all tekst.

   Kuløren er den samme; bare lysheten er senket to hundredeler. Å bytte til en
   annen oransje ville gjort «beslutning» til en annen farge enn den appen har
   brukt hele veien, for å vinne et krav som en justering løser.

   Hvit tekst PÅ aksenten (valgt temaknapp, aktiv fane) er 4,91:1 — den ble
   bedre, ikke dårligere. */
html[data-tema="lys"] {
  color-scheme: light;
  --accent:      #B85309;
  --accent-2:    #9A4407;
  --bg:          #F4F7FA;
  --line:        #D5DEE7;
  --neg:         #C0281F;
  --on-accent:   #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #EDF2F7;
  --text:        #0E1720;
  --text-3:      #62717F;
  --warn:        #8A6000;
}

/* ── TEMABRYTEREN ─────────────────────────────────────────────────────────
   Bryteren bygges av `felles.js` og finnes ikke som markup; sidene bærer bare
   et tomt `<span data-temabryter>`. Utseendet står her av samme grunn som
   paletten: det var fem kopier av de samme reglene. */
  .temabryter { display: inline-flex; border: 1px solid var(--line-2);
                border-radius: 8px; overflow: hidden; flex: none; }
  .temabryter button {
    padding: 5px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
    background: var(--surface-2); color: var(--text-3);
    border: 0; border-left: 1px solid var(--line-2);
  }
  .temabryter button:first-child { border-left: 0; }
  .temabryter button:hover { color: var(--text); }
  /* Det valgte alternativet bærer BÅDE farge og `aria-pressed`. En markering
     som bare er en farge er usynlig for en skjermleser — og for den som ikke
     skiller de to gråtonene fra hverandre. */
  .temabryter button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
  .temabryter button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── TEMABRYTEREN PÅ SMAL SKJERM ──────────────────────────────────────────
   Tre ord er 166 px. I appens toppstripe står den sammen med merke,
   analytikerbryter, byggstempel og økt, og summen ble bredere enn en telefon
   — hele siden skrollet sidelengs (målt 517 px i et 390 px vindu).

   Under 560 px byttes ordet med et ikon. Ordet blir STÅENDE i DOM-en, bare
   skrudd til 0 px: `aria-pressed` virker som før, `title` sier fortsatt
   «Mørkt tema», og en skjermleser leser det samme som på bred skjerm. Det er
   forskjellen på å komprimere og å fjerne.

   Valgt framfor å skjule byggstempelet, som er det eneste stedet i appen som
   svarer på «hvilken kode kjører?» — og det spørsmålet stiller man som regel
   fra telefonen, når noe ser rart ut. */
@media (max-width: 560px) {
  .temabryter button { font-size: 0; padding: 5px 9px; }
  .temabryter button::before { font-size: 13px; line-height: 1; }
  .temabryter button[data-tema-valg="mork"]::before   { content: "\25D2"; }
  .temabryter button[data-tema-valg="lys"]::before    { content: "\2600"; }
  .temabryter button[data-tema-valg="system"]::before { content: "\25D1"; }
}

/* ── HELSEPRIKKEN ─────────────────────────────────────────────────────────
   Bygges av `felles.js` inn i et tomt `<span data-helseprikk>`. Farge ALENE
   er ikke en tilstand — rødt og grønt er den vanligste fargeblindheten som
   finnes — så prikken bærer alltid ordet «Jobber» ved siden av, og en `title`
   som sier hva tilstanden betyr. */
.helseprikk { display: inline-flex; align-items: center; gap: 6px;
              text-decoration: none; color: var(--text-3);
              font-size: 12px; white-space: nowrap; }
.helseprikk:hover { color: var(--text-2); }
.helsedot { width: 8px; height: 8px; border-radius: 50%; flex: none;
            background: var(--text-3); }
.helseprikk.h-ok .helsedot      { background: #3FB950; }
.helseprikk.h-kjører .helsedot  { background: var(--accent-2); }
.helseprikk.h-rød .helsedot     { background: var(--neg); }
.helseprikk.h-avslått .helsedot { background: var(--text-3); }
/* «Stille» får både farge og en puls. Den er den eneste tilstanden der det
   ikke finnes noe å se på — jobben startet aldri — og den skal derfor være
   den som fanger blikket, ikke den røde. */
.helseprikk.h-stille .helsedot,
.helseprikk.h-aldri-kjørt .helsedot { background: var(--warn); }
/* «Avbrutt» er en kjøring noen eller noe stoppet. Den teller med i
   `alvorlige` på /prosesser, så den må ha en farge her også — ellers falt den
   stille ut av rangeringen og en avbrutt kritisk jobb ga grønn prikk. */
.helseprikk.h-avbrutt .helsedot { background: var(--warn); }
.helseprikk.h-stille .helsetekst,
.helseprikk.h-aldri-kjørt .helsetekst,
.helseprikk.h-avbrutt .helsetekst,
.helseprikk.h-merknad .helsetekst,
.helseprikk.h-rød .helsetekst   { color: var(--text-2); }
/* «Merknad» er rød eller stille på en prosess som IKKE er kritisk. Samme
   farge som den røde — det er den samme slags feil — men hul, fordi den ikke
   krever handling nå. Nøyaktig samme grep som «foreldet» bruker mot «stille»:
   rammen skiller dem uten å innføre enda en farge, og uten å la en jobb som
   feilet se ut som en jobb som gikk bra. */
.helseprikk.h-merknad .helsedot { background: transparent;
                                  box-shadow: inset 0 0 0 2px var(--neg); }
.helseprikk.h-kritisk .helsedot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 35%, transparent); }
/* «Foreldet» er prikken som sier at den ikke vet — rapporten den leser er for
   gammel til å bety noe. Den er den ENESTE tilstanden som handler om målingen
   selv og ikke om jobbene, og den slår alle de andre: står den her, er ingen
   av de andre fargene verdt å tro på.

   Rammen skiller den fra «stille» uten å bruke farge alene. Teksten byttes
   dessuten fra «Jobber» til «Ukjent» i `felles.js` — en prikk som sier noe
   annet enn ordet ved siden av er en prikk som blir mistolket. */
.helseprikk.h-foreldet .helsedot,
/* `ukjent` settes når tilstanden til en enkelt jobb ikke lot seg måle. Den
   sier det samme som «foreldet» — vet ikke — og skal se ut som det. */
.helseprikk.h-ukjent .helsedot   { background: var(--warn);
                                   box-shadow: inset 0 0 0 2px var(--bg); }
.helseprikk.h-foreldet .helsetekst,
.helseprikk.h-ukjent .helsetekst { color: var(--text-2); }
@media (max-width: 560px) { .helseprikk .helsetekst { display: none; } }

/* ── HOPP TIL INNHOLDET ───────────────────────────────────────────────────
   Første tabulatortrykk på forsiden lander her. Lenken er usynlig til den
   får fokus — da ligger den øverst, over alt annet, så en tastaturbruker
   slipper å gå gjennom toppstripa og tretten faner for å nå dommen. */
.hopp { position: absolute; left: 8px; top: -100px; z-index: 1000;
        padding: 8px 12px; border-radius: 8px;
        background: var(--accent); color: #fff; font-weight: 600;
        text-decoration: none; }
.hopp:focus { top: 8px; outline: 2px solid var(--text); outline-offset: 2px; }

/* ── REDUSERT BEVEGELSE ───────────────────────────────────────────────────
   Den som har bedt operativsystemet om mindre bevegelse skal få det her
   også: overgangene på faner, kort og bunnmenyen kortes til null. Fargene
   og tilstandene er de samme — bare reisen mellom dem forsvinner. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── SIDEMENYEN ───────────────────────────────────────────────────────────
   Bygges av `js/meny.js` inn i `<span data-meny>` på hver side bak låsen.
   Bred skjerm: en linje med sidene. Gjeldende side er merket med
   `aria-current`, og bærer det med en strek OG en farge — farge alene er
   ikke en tilstand. */
.sitemeny { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center;
            font-size: 13px; line-height: 1; }
.sitemeny a { color: var(--text-3); text-decoration: none; padding: 7px 9px;
              border-radius: 8px; border-bottom: 2px solid transparent; }
.sitemeny a:hover { color: var(--text); background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.sitemeny a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent);
                                   font-weight: 600; }
.sitemeny a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 720px) {
  /* På telefon er bunnraden menyen. Topplinja ville vært den samme menyen
     to ganger på den skjermen som har minst plass. */
  .sitemeny { display: none; }
}

/* ── BUNNRADEN OG «MER»-ARKET, TELEFON ────────────────────────────────────
   Flyttet hit fra forsiden 5. september 2026, så alle sidene får den samme
   raden. Forsiden bygger sin av fanene (`js/bunnmeny.js`), de andre av
   sidene (`js/meny.js`); klassene og utseendet er de samme. Fallback-
   verdiene i `var(--x, …)` er for sidene som ikke definerer forsidens
   avstands- og skriftvariabler — fargene er felles og trenger ingen. */
.botnav, .moresheet { display: none; }

@media (max-width: 720px) {
  .botnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; margin: 0;
    background: color-mix(in srgb, var(--surface-2) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -3px 14px color-mix(in srgb, var(--text) 10%, transparent);
  }
  .botnav button, .botnav a {
    flex: 1 1 0; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 0; cursor: pointer; text-decoration: none;
    color: var(--text-3); font-family: var(--sans, inherit); font-size: 10px; font-weight: 600;
    padding: 8px 2px 7px; position: relative;
  }
  .botnav .bi { font-size: 18px; line-height: 1; }
  .botnav .bl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .botnav [aria-current="true"], .botnav [aria-current="page"] { color: var(--accent); }
  .botnav [aria-current="true"]::before, .botnav [aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px;
    background: var(--accent); border-radius: 0 0 3px 3px;
  }
  .botnav button:active, .botnav a:active { background: color-mix(in srgb, var(--text-3) 12%, transparent); }
  .botnav button:focus-visible, .botnav a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; }
  /* Plass til bunnraden, pluss den trygge sonen mot hjem-linja — bare på
     sider som faktisk har fått en rad. */
  body.har-bunnrad { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Arket: alt som ikke fikk plass i raden, gruppert. Et ark, ikke en ny
     meny: det ligger over siden, lukkes av bakgrunnen, av Escape og av
     valget du tar. */
  .moresheet {
    display: block; position: fixed; inset: 0; z-index: 70;
    visibility: hidden; opacity: 0; transition: opacity .16s ease, visibility .16s ease;
  }
  .moresheet.on { visibility: visible; opacity: 1; }
  .moresheet .msback {
    position: absolute; inset: 0; border: 0; width: 100%; padding: 0;
    background: var(--scrim, color-mix(in srgb, var(--bg) 70%, transparent));
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .moresheet .mspanel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border-top: 1px solid var(--line-2, var(--line));
    border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0;
    padding: var(--s2, 8px) var(--s4, 16px) calc(var(--s5, 24px) + env(safe-area-inset-bottom));
    transform: translateY(12px); transition: transform .16s ease;
    box-shadow: 0 -8px 28px color-mix(in srgb, var(--text) 18%, transparent);
  }
  .moresheet.on .mspanel { transform: translateY(0); }
  .moresheet .msgrip {
    width: 36px; height: 4px; border-radius: 999px; background: var(--line-2, var(--line));
    margin: var(--s2, 8px) auto var(--s3, 12px);
  }
  .moresheet .mshead {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--t-micro, 11px); text-transform: uppercase;
    letter-spacing: .14em; color: var(--text-3); margin: var(--s4, 16px) 0 var(--s2, 8px);
  }
  .moresheet .msitem {
    display: flex; align-items: center; gap: var(--s3, 12px); width: 100%;
    min-height: 48px; padding: var(--s3, 12px) var(--s2, 8px); box-sizing: border-box;
    background: transparent; border: 0; border-top: 1px solid var(--line);
    color: var(--text-2, var(--text)); font-family: var(--sans, inherit);
    font-size: var(--t-body, 15px); text-align: left; cursor: pointer; text-decoration: none;
  }
  .moresheet .mshead + .msitem { border-top: 0; }
  .moresheet .msitem .mi { font-size: 18px; line-height: 1; flex: 0 0 auto; }
  .moresheet .msitem[aria-current="true"], .moresheet .msitem[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .moresheet .msitem:active { background: color-mix(in srgb, var(--text-3) 10%, transparent); }
  .moresheet .msitem:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
}