/* Kalenderdemoen — statistikkskjermen.
 *
 * Alt her er scopet under `.np-sx`, og alle farger er tokens fra `panel.css`.
 * (Varmekartet «Når kundene vil ha time» hadde fire egne fargetrinn. Hele
 * seksjonen er tatt ut 17.09, og med den de fire tokenene.)
 *
 * Diagrammene er rein HTML, CSS og SVG. Nettstedet har en CSP som forbyr
 * tredjeparter, så et diagrambibliotek ville uansett ikke lastet — men det er
 * ikke derfor det ikke er her. Sju diagrammer med ett datasett hver trenger
 * ikke 90 kB JavaScript.
 *
 * ── Verktøytipsene har ingen JavaScript ──
 *
 * Hvert tips ligger inne i en beholder med `position: relative` og klassen
 * `.np-sx-hov`, og vises på `:hover`. Treffflata er HELE beholderen — en hel
 * spalte i linjediagrammet, en hel rad i stolpene — ikke markøren, som er
 * 8 px og umulig å sikte på.
 *
 * Tipsene er plassert i soner (venstre, midt, høyre) OG får et tak på
 * bredden. Begge regnes ut i del-statistikk.js — se `tipsPlass`. Sonen alene
 * holdt ikke: et tips på 200 px midt i en flate på 276 px stikker ut uansett
 * hvor sonegrensa går, og da rullet sida vannrett, som er forbudt. Taket
 * kommer inn som `max-width: min(var(--sx-tips-tak), <rom>%)`, der rommet er
 * regnet i prosent av tipsets EGEN beholder — altså i faktiske piksler, ved
 * hver tegning, uansett tekststørrelse.
 *
 * ── Tipsene finnes bare der det finnes en peker ──
 *
 * `@media (hover: none)` tar dem helt ut. MÅLT: på 375 px er (hover: hover)
 * false, så de kunne ikke åpnes der i det hele tatt — samtidig som de sto i
 * veien og ga vannrett sidrulling. Ingen tall går tapt: de står i «Vis
 * tallene» under hvert diagram, som er den tilgjengelige veien uansett.
 *
 * ── Tastaturet leser tabellen ──
 *
 * Sporene og cellene er ikke fokuserbare, og det er med vilje: 63 tabbestopp i
 * ett varmekart er verre enn ingen. Hvert diagram har en `<details>` med en
 * ekte `<table>` under seg, og DEN er den tilgjengelige veien til tallene.
 */

.np-sx {
  /* HER STO EN FORKLARING PÅ VARMEKARTETS FIRE FARGETRINN. Seksjonen ble
     tatt ut 17.09 sammen med tokenene den beskrev, og kommentaren ble
     stående alene over en `margin-top` den ikke har noe med å gjøre — en
     begrunnelse uten en regel er verre enn ingen, for den neste leter etter
     fargene den lover og finner dem ikke.

     RADIUSEN I GRAFIKKLAGET, 21.09. Dette arket hadde femten rå px-verdier
     for `border-radius` — 2, 3 og 4 px — mens de fem andre arkene i demoen
     bruker husets fem tokens uten unntak. To slags flater lå i den bunken,
     og de skulle aldri hatt samme svar:

       KORTFLATER    nøkkeltallsflisene, tomtilstanden, tabellrammen,
                     konverteringsboksen og radene i stolpediagrammene.
                     De er flater man leser innhold i, og huset gir dem
                     8–16 px. De sto på 3 og leste som skarpe hjørner ved
                     siden av avrundede kort — det eneste stedet i demoen
                     der to flater i samme skjermbilde hadde ulik form uten
                     at noen hadde bestemt det. De står nå på `--r-sm`.

       GRAFIKKMERKER stolpene, de stengte dagene, kildestripa og
                     fargeprikkene. En 10 px stolpe med 8 px hjørner blir en
                     pille; her ER det lille hjørnet riktig. Men det var
                     2 px ett sted, 3 et annet og 4 et tredje, i samme
                     diagram. Ett navngitt trinn i stedet, så neste
                     diagram ikke må gjette. */
  --r-graf: 3px;

  /* 6 px, ikke 4 (rettet 21.09). De tre skjermrøttene tegnes inn i samme
     posisjon og starter med hvert sitt tall: `.np-oppf` og `.np-innst` står
     begge på `margin: 6px 0 0`. To av tre er ikke en skala — de er en
     tilfeldighet, og da skal den tredje følge flertallet. */
  margin-top: 6px;
}
/* ── Topplinja og periodevelgeren ─────────────────────────────────────── */

.np-sx-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
/* SKJERMTITTEL. Ett nivå for alle skjermer: display-familien, --np-t-xl,
   700, --np-t-trakk-tett, --white. Statistikk strammet med -0,02em og
   Oppfølging med -0,01em — den eneste målbare forskjellen mellom de to
   titlene etter at stigen kom. */
.np-sx-topp h2 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-xl);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}
/* Én rad, fire valg. Samme familie som 7/30-velgeren i trafikken, så linja
   leser som panelets egen kontroll og ikke som fire løse knapper. */
.np-sx-perioder {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.np-sx-perioder button {
  padding: 7px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.np-sx-perioder button:hover[aria-pressed="false"] {
  color: var(--offwhite);
  background: var(--fill-subtle);
}
/* Valgt er is-fyll med MØRK etikett — husregelen for fylte aksentflater.
   Hvit tekst på is måler 1,9:1. Fetere skrift i tillegg, så valget ikke bare
   er en farge. */
.np-sx-perioder button[aria-pressed="true"] {
  background: var(--ice-fyll);
  color: var(--navy);
  font-weight: 700;
}
.np-sx-spenn {
  margin: 0 0 18px;
  font-size: var(--np-t-md);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
/* ── NØKKELTALLENE ───────────────────────────────────────────────────────
 *
 * SJU LIKESTILTE FLISER STO HER, og de var likestilte helt bokstavelig: samme
 * boks, samme 30 px tall, samme farge. Et rutenett der alt roper like høyt er
 * ikke et hierarki, det er en liste.
 *
 * Nå er det to nivåer. FIRE kort øverst — omsetning, bookinger, nye kunder,
 * snittpris — i full størrelse med hver sin sparkline. FIRE tall under, i en
 * stripe uten bokser, i halv størrelse. De fire nederste er ikke mindre
 * viktige for den som leter etter dem; de er mindre viktige for den som ikke
 * gjør det, og det er den som bestemmer hvor stort noe skal være.
 *
 * Grensene under er ARVET og målt fra sju-fliser-tida, og de holder for fire:
 * 360 px er der to spalter fortsatt gir tallet 123 px innhold (tallet er
 * 116 px på telefon, der toppen av typografistigen krymper). Under det, én
 * spalte. */
.np-sx-kpi {
  display: grid;
  gap: 10px;
  margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 360px) {
  .np-sx-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* To tall ved siden av hverandre må stå på samme linje. Etikettene er
     ulikt lange («SNITTPRIS» mot «NYE KUNDER»), og uten et gulv står tallene
     på hver sin høyde i samme rad. `2lh` er nøyaktig to linjer; `3em` står
     foran som reserve for Safari før 16.4. */
  .np-sx-kpi-kort dt {
    min-height: 3em;
    min-height: 2lh;
  }
}
@media (min-width: 900px) {
  .np-sx-kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .np-sx-kpi-kort dt {
    min-height: 0;
  }
}
.np-sx-kpi-kort {
  position: relative;
  padding: 16px 18px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.np-sx-kpi-kort dt {
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 8px;
}
.np-sx-kpi-kort dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* HOVEDTALLET ER HVITT, ikke offwhite. Det er den eneste hvite teksten i
   kortet, og forskjellen mot etiketten og sammenligningen under er det som
   gjør at øyet lander på tallet først. */
/* INGEN `font-family` HER, og det er en rettelse. Første utgave satte
   `--np-font-display` på hovedtallet. MÅLT på skjermbilde: «349 440,-» ble
   merkbart bredere og komma-bindestreken falt fra hverandre til «, -», fordi
   Schibsted Grotesk setter tegnparet annerledes enn Inter. Tallene på denne
   sida er Inter med `tnum` og `ss02` (panel.css) — det er husets tallskrift,
   og et nøkkeltall er ikke et sted å bytte den. */
.np-sx-kpi-tall {
  font-size: var(--np-t-tall);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  line-height: var(--np-lh-tett);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.np-sx-kpi-under {
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
/* SPARKLINJA ER EN FORM, IKKE ET DIAGRAM. Ingen akse, ingen tall, ingen
   verktøytips — den svarer på «opp eller ned» i sidesynet mens man leser
   tallet. Den ligger i hjørnet og ikke under tallet: under ville den skjøvet
   sammenligningssetningen ned og gjort kortet høyere, og den er ikke verdt
   en eneste piksel høyde.
   Dempet is og ikke full: den skal kunne overses. Er den like sterk som
   tallet, konkurrerer to ting om samme blikk. */
.np-sx-spark {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 64px;
  height: 20px;
  overflow: visible;
  opacity: 0.55;
}
.np-sx-spark path {
  fill: none;
  stroke: var(--ice);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Under 900 px står kortene i to spalter, og da er det ikke plass til både
   en to-linjers etikett og en 64 px linje på samme rad. */
@media (max-width: 899.98px) {
  .np-sx-spark {
    display: none;
  }
}

/* ── SEKUNDÆRSTRIPA ──────────────────────────────────────────────────────
 * Fire tall uten bokser. Ingen ramme, ingen flate, ingen skygge — bare en
 * hårstrek mellom dem. Formen sier «dette er opplysninger», ikke «dette er
 * nøkkeltall», og det er hele grunnen til at de fire ble flyttet hit. */
.np-sx-smaa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 14px 0 0;
  padding: 14px 2px 0;
  border-top: 1px solid var(--border-faint);
}
@media (min-width: 720px) {
  .np-sx-smaa {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.np-sx-smaa-kort dt {
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 3px;
}
.np-sx-smaa-kort dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.np-sx-smaa-tall {
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  line-height: var(--np-lh-tett);
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
.np-sx-smaa-under {
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
/* Sammenligningssetningen i stripa skal ikke veie like mye som i kortene
   over. Samme farger, mindre skrift. */
.np-sx-smaa .np-sx-endring {
  font-size: var(--np-t-xs);
}
.np-sx-forbehold {
  margin-top: 14px;
}

/* Retningsfargene er STATUSFARGER og betyr tilstand, aldri «serie nummer
   fire». `flatt` er sølv og påstår ingenting — den brukes når prosenten er
   trukket fordi grunnlaget var for tynt. */
.np-sx-endring {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--np-t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.np-sx-endring.opp { color: var(--green); }
.np-sx-endring.ned { color: var(--warn); }
.np-sx-endring.flatt { color: var(--silver); }
.np-sx-endring span { color: var(--silver); font-weight: 400; }
/* ── Boksene ──────────────────────────────────────────────────────────── */

.np-sx-boks {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
}
/* SEKSJONSHODE. Samme nivå som .np-innst-bolk h2 i Innstillinger. Her
   manglet display-familien helt, så seksjonshodene i Statistikken sto i
   brødfamilien mens de i Innstillinger sto i display. */
.np-sx-boks h3 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--offwhite);
}
.np-sx-under {
  margin: 4px 0 0;
  font-size: var(--np-t-sm);
  color: var(--silver);
}
/* En tom periode sier det med ord. Et rutenett med akser og null søyler ser
   ut som en ødelagt side, ikke som en rolig måned. */
.np-sx-tom {
  margin: 16px 0 0;
  padding: 18px 16px;
  background: var(--navy2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--np-t-md);
  color: var(--silver);
}
/* ── Linje og areal ───────────────────────────────────────────────────── */

.np-sx-graf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 8px;
  margin-top: 16px;
}
.np-sx-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Luftrommet SVG-en holder av over og under dataflata, så etikettene står i
     lodd med den øverste og nederste rutelinja. Tallet er 8 av 240
     BRUKERENHETER i viewBox-en, og plottet er 240 px høyt — så her er 8 px
     riktig, og i telefonblokka nederst (plottet 200 px) er det 6,67 px.
     PROSENT VIRKER IKKE HER, og det er verdt å vite hvorfor: en prosent i
     `padding` regnes ALLTID av den omsluttende blokkas BREDDE, aldri av
     høyden — også for `padding-top`. `.np-sx-y` er en smal spalte på rundt
     40 px, så `3.3333%` ville blitt 1,3 px, ikke 6,67.
     Det er nettopp derfor prosenten var riktig på `.np-sx-spor-lag`: der er
     det `top`/`bottom` på et absolutt plassert element, og DE regnes av
     høyden. Samme tall, to forskjellige referanser. */
  padding: 8px 0;
  text-align: right;
  font-size: var(--np-t-mikro);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.np-sx-plott {
  position: relative;
  height: 240px;
}
.np-sx-svg {
  display: block;
  width: 100%;
  height: 240px;
  overflow: visible;
}
/* Rutenettet er dempet. Det skal kunne leses av, ikke ses på. */
.np-sx-rute {
  stroke: var(--border-faint);
  stroke-width: 1;
}
.np-sx-rute.grunn {
  stroke: var(--border);
}
.np-sx-areal {
  fill: var(--ice-bg);
  stroke: none;
}
/* ÉN serie, og da er fargen bare is. `non-scaling-stroke` holder streken på
   2 px selv om x-aksen strekkes: viewBoxen er 1000 enheter bred uansett hvor
   bred beholderen er. Uten den ville streken blitt tynnere jo bredere skjermen
   var. Det er også grunnen til at det ikke finnes sirkler inne i SVG-en — en
   sirkel ville blitt en ellipse av samme strekk. */
.np-sx-linje {
  fill: none;
  stroke: var(--ice);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.np-sx-spor-lag {
  position: absolute;
  left: 0;
  right: 0;
  /* 8 av 240 brukerenheter — SVG-ens eget luftrom over og under dataflata —
     i PROSENT, ikke i piksler. Med `8px` sto laget for lavt der plottet er
     200 px høyt (telefonblokka nederst i fila): 8/240 av 200 er 6,7 px, så
     grunnlinja i SVG-en lå 1,3 px under laget. Punktene tålte det; en
     dagstolpe gjør ikke, for den ville hengt over grunnlinja i stedet for å
     stå på den. 8/240 = 3,3333 %. */
  top: 3.3333%;
  bottom: 3.3333%;
}
.np-sx-spor {
  position: absolute;
  top: 0;
  bottom: 0;
}
.np-sx-kryss {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-hover);
  opacity: 0;
}
.np-sx-punkt {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 2px var(--navy);
  opacity: 0;
}
.np-sx-spor:hover .np-sx-kryss,
.np-sx-spor:hover .np-sx-punkt {
  opacity: 1;
}
/* ── Dagstolpene ──────────────────────────────────────────────────────── */

/* Dagbøtter tegnes som stolper og ikke som areal — begrunnelsen står i
   `omsetningOverTid`. Stolpen er en HTML-boks og ikke et SVG-rektangel, fordi
   SVG-en strekkes vannrett: en kant inne i den ville fått ulik prikkavstand i
   x og y, av samme grunn som en sirkel der ville blitt en ellipse.
   1 px inntrekk på hver side gir 2 px mellom naboene — på 375 px, der en
   celle er rundt 9 px, står det da igjen rundt 7 px farge. `margin: 0 auto`
   med både left og right satt sentrerer stolpen når taket slår inn, så brede
   skjermer får 26 px stolper med luft mellom i stedet for én sammenhengende
   isflate.

   REKKEFØLGEN I MARKUPEN GJØR EN JOBB HER: kryssmarkøren skrives FØR stolpen,
   og begge er absolutt plassert uten z-index. Da males stolpen over krysset,
   og krysset synes bare OVER stolpetoppen — det peker ut kolonnen uten å
   skrape en strek gjennom fargen. */
.np-sx-dagstolpe {
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  max-width: 26px;
  /* En dag MED omsetning skal alltid kunne ses. Dagen uten omsetning har
     ingen stolpe i det hele tatt, så dette gulvet kan ikke forveksles med
     null. */
  min-height: 2px;
  background: var(--ice);
  border-radius: var(--r-graf) var(--r-graf) 0 0;
}
/* Stengt er ikke null. Samme stiplede tomrom som varmekartets stengte celler
   — samme tegn, samme betydning, og leseren slipper å lære det to ganger. */
.np-sx-dagstengt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  max-width: 26px;
  border: 1px dashed var(--border-faint);
  border-radius: var(--r-graf);
}
/* Tom celle under y-etikettene, så x-aksen står i lodd med plottet. */
.np-sx-hjorne {
  display: block;
}
.np-sx-x {
  display: grid;
  gap: 0;
  font-size: var(--np-t-mikro);
  color: var(--silver);
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* AKSERADA KAN IKKE STREKKE SIDA, uansett hvor stor teksten blir.
     MÅLT på 390 px i STØRSTE tekst: cella er 10 px, etiketten «10. sep» er
     42–51 px, og den siste flyter 31 px ut til høyre. Det forplantet seg opp
     gjennom .np-sx-graf til .np-wrap og ga documentElement.scrollWidth 402 mot
     et vindu på 390 — vannrett sidrulling, som ikke er lov.
     `clip` og ikke `hidden`: `hidden` lager en rullebeholder, og da kunne
     aksen rulles for seg selv. `clip` klipper bare, og fordi rada er like
     bred som plottet, rører den ikke en etikett som flyter inn i en TOM
     NABOCELLE — det er bare spillet UTENFOR plottet som forsvinner. */
  overflow-x: clip;
}
/* Etiketten får LOV til å flyte ut av cella si. Bare hver n-te celle har
   tekst, så naboen er tom — og en etikett som klippes midt i er verre enn en
   som låner to piksler av ingenting.
   ENDECELLENE ANKRES LIKEVEL INN — første venstrestilt, siste høyrestilt —
   for de er de eneste som ikke har en nabo å låne av.
   MERK at det er `clip` over som GARANTERER at sida ikke strekkes; ankringa
   hjelper bare når endecella faktisk bærer tekst. Den gjør den ikke alltid:
   aksen skriver hver n-te celle, og med 30 dager og steg 4 står siste tekst
   på indeks 28, ikke 29. `tynnAkse` gir siste SKREVNE etikett forrang over
   nest siste, men den flytter ingen tekst til siste celle. */
.np-sx-x span {
  white-space: nowrap;
}
/* `.forst` og `.sist` settes av del-statistikk.js på den første og SISTE
   SKREVNE etiketten — ikke av :first-child/:last-child, for den siste cella er
   sjelden den siste etiketten (30 dager og steg 4 gir siste tekst på indeks 28
   og en tom celle 29). Se kommentaren ved aksen i del-statistikk.js.

   OG DET ER `justify-self` + `width: max-content`, IKKE `text-align`.
   `text-align: right` var det første forsøket, og det virket ikke: alignment
   plasserer LINJEBOKSEN inne i innholdsboksen, og er linja bredere enn boksen,
   renner den over mot slutten uansett. Målt: «29. sep» sto fortsatt 32 px
   utenfor rada med `text-align: right`.
   `width: max-content` gjør boksen like bred som teksten, og `justify-self:
   end` legger BOKSEN mot slutten av sporet sitt. Da vokser teksten innover, i
   de tomme nabocellene den har lov til å låne, og rada trenger ikke klippe
   noe. Målt etterpå: 0 px kutt på 360, 390, 430, 768, 1512 px i både normal og
   største tekst. */
.np-sx-x span.forst {
  width: max-content;
  justify-self: start;
}
.np-sx-x span.sist {
  width: max-content;
  justify-self: end;
}
/* ── Verktøytips ──────────────────────────────────────────────────────── */

.np-sx-hov {
  position: relative;
}
.np-sx-tips {
  position: absolute;
  z-index: 6;
  width: max-content;
  /* Taket bor i en variabel og ikke i `max-width` direkte, fordi
     del-statistikk.js legger et ANDRE tak oppå: `max-width: min(var(
     --sx-tips-tak), <rom>%)` inline. Sto tallet her, ville telefonblokka
     nederst i fila tapt mot den inline-regelen. */
  --sx-tips-tak: 240px;
  max-width: var(--sx-tips-tak);
  padding: 7px 10px;
  background: var(--navy3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  /* EGEN HEVING, ikke kortskyggen (rettet 21.09). `--elev-card` har
     −20 px spredning, som trekker skyggeflata 20 px inn fra hver kant.
     På et element som er lavere enn 40 px tegner tokenet derfor
     ingenting, og verktøytipset svevde uten å løfte seg fra flata det
     lå over. Spredningen står nå i takt med tipsets egen høyde. */
  box-shadow: 0 4px 12px -4px rgba(2, 8, 20, 0.7);
  font-size: var(--np-t-xs);
  font-weight: 400;
  /* Teksten i tipset bærer ALDRI seriefargen. Den er brødtekst. */
  color: var(--offwhite);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 110ms ease;
}
/* Sonene. Midtstilt er standard; `start` og `slutt` forankrer tipset i sin
   egen kant. Hvilken av de tre som velges, er DEN AV DEM SOM GIR MEST PLASS —
   regnet i del-statistikk.js (`tipsPlass`), som samtidig sender med hvor mye
   plass det ble. Sonen alene holder ikke: et tips som er bredere enn plassen
   stikker ut uansett hvilken kant det står på, og da ruller sida vannrett. */
.np-sx-tips {
  left: 50%;
  transform: translateX(-50%);
}
.np-sx-tips.start {
  left: 0;
  right: auto;
  transform: none;
}
.np-sx-tips.slutt {
  left: auto;
  right: 0;
  transform: none;
}
.np-sx-spor .np-sx-tips {
  top: 2px;
}
.np-sx-spor:hover .np-sx-tips {
  opacity: 1;
}
/* FUNN 36: TIPSENE FANTES DER DE IKKE KUNNE ÅPNES, OG STO I VEIEN.
 *
 * MÅLT av Phillip 15.09: formatsveipen meldte vannrett sidrulling på
 * statistikkskjermen ved 360, 390 og 430 px i STØRSTE tekst. Kjeden på 390 px
 * var `.np-sx-spor` 9 px bred med 200 px innhold → `.np-sx-plott` 276/288 →
 * `.np-sx-graf` 334/367 → `.np-wrap` 374/387 → documentElement 395 mot et
 * vindu på 390. Samme måling: på 375 px er `(hover: hover)` false, så tipsene
 * kunne ikke åpnes der i det hele tatt. De var død vekt som ga en synlig feil.
 *
 * `display: none` og ikke `opacity: 0`: en flate ingen kan åpne skal ikke
 * kunne påvirke layouten heller. Tallene står i «Vis tallene» under hvert
 * diagram — den samme veien tastaturet bruker. */
@media (hover: none) {
  .np-sx-tips {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .np-sx-tips { transition: none; }
}
/* ── Vannrette stolper: tjenester, belegg, trakt ──────────────────────── */

.np-sx-spor-flate {
  display: block;
  height: 14px;
  background: var(--fill-subtle);
  border-radius: 0 var(--r-graf) var(--r-graf) 0;
  overflow: hidden;
}
/* Dataenden er avrundet, grunnlinja er det ikke: stolpen er forankret i
   nullpunktet til venstre og skal se forankret ut. */
.np-sx-fyll {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--ice);
  border-radius: 0 var(--r-graf) var(--r-graf) 0;
}
/* FIRE DIAGRAMMER LÅNER DEN SAMME RADA, DE KOPIERER DEN IKKE.
   Tjenestene, belegget, tidsbruket, timeprisen, kanalene og kapasiteten er
   alle «navn — spor — verdi» på en rad. Rutenettet, hover-flata, polstringa
   og hele telefonblokka nederst i fila står derfor ÉN gang, og de nye
   seksjonene fra 22.09 er føyd inn i selektorlistene. Skrev man rutenettet på
   nytt for hver seksjon, ville navnekolonnas tak (`148px * --np-skala`, som
   ble rettet 21.09 fordi et fast tall klippet navnene ved største tekst) måtte
   rettes seks steder neste gang. */
.np-sx-stolper,
.np-sx-belegg,
.np-sx-avvik,
.np-sx-timepris,
.np-sx-uker {
  display: flex;
  flex-direction: column;
  /* 2 px mellom naboflater, så to like stolper ikke leser som én. */
  gap: 2px;
  margin-top: 16px;
}
.np-sx-stolpe,
.np-sx-beleggrad,
.np-sx-avvikrad,
.np-sx-prisrad,
.np-sx-ukerad {
  display: grid;
  /* Taket følger tekststørrelsen (rettet 21.09). 148 px var et fast tall
     mens navnet inni skalerer med `--np-skala`, så «Bremseskift foran»
     klippet ved «størst» selv om stolpesporet ved siden av hadde hundrevis
     av piksler til overs. Gulvet på 90 står: det er kolonnas minstebredde
     på en telefon, og der skal navnet brekke, ikke skyve stolpen ut. */
  grid-template-columns: minmax(90px, calc(148px * var(--np-skala))) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
}
.np-sx-stolpe:hover,
.np-sx-beleggrad:hover,
.np-sx-avvikrad:hover,
.np-sx-prisrad:hover,
.np-sx-ukerad:hover {
  background: var(--fill-subtle);
}
.np-sx-stolpe-navn,
.np-sx-belegg-navn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--np-t-md);
  color: var(--offwhite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ELLIPSEN MÅ HA ET ELEMENT Å BITE I (rettet 21.09).
   `text-overflow` virker bare på en blokkbeholder. Begge navnene over er
   `display: flex` — belegg-navnet fordi det bærer ansattmarkøren, stolpe-
   navnet fordi det deler regel med den — så en naken tekstnode blir et
   anonymt flex-element og erklæringa gjør ingenting. MÅLT på 320 px med
   største tekst: «Marte Solvang» ble hardklippet 19 px inn i navnet, uten
   prikker, og det ser ut som en gjengivelsesfeil og ikke som plassmangel.
   Stolpenavnet inneholder bare tekst og kan være en blokk; beleggnavnet
   har markøren ved siden av og beholder flex, men teksten har fått sitt
   eget span å klippes i. */
.np-sx-stolpe-navn {
  display: block;
}
.np-sx-belegg-navn > .np-sx-navntekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-sx-stolpe-verdi,
.np-sx-belegg-verdi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--np-t-md);
  font-weight: 600;
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.np-sx-stolpe-verdi small,
.np-sx-belegg-verdi small {
  font-size: var(--np-t-xs);
  font-weight: 400;
  color: var(--silver);
}
/* Markøren bærer identiteten til den ansatte — ikke teksten, som står i
   brødtekstfargen som alt annet. Fargen settes inline fra verdenen. */
.np-sx-merke {
  flex: none;
  width: 10px;
  height: 10px;
  /* SIRKEL, ikke firkant (rettet 21.09). Prikken som bærer «hvem» er
     `border-radius: 50%` seks andre steder i demoen — i rutenettet, i
     fargeforklaringa, i daglista og i detaljkortet. Her var den den
     eneste avrundede firkanten, og samme opplysning skal ikke ha to
     former i samme produkt. */
  border-radius: 50%;
}
/* ── Trakta ───────────────────────────────────────────────────────────── */

.np-sx-trakt {
  margin-top: 16px;
}
.np-sx-trinn {
  padding: 8px 8px 10px;
  border-radius: var(--r-sm);
}
.np-sx-trinn:hover {
  background: var(--fill-subtle);
}
.np-sx-trinn-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: var(--np-t-md);
  color: var(--offwhite);
}
.np-sx-trinn-hode b {
  font-size: var(--np-t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.np-sx-trinn .np-sx-spor-flate {
  height: 16px;
}
/* Fallet SKRIVES ut. To stolper ved siden av hverandre viser at det er
   mindre; bare tallet sier hvor mye som forsvant. */
.np-sx-fall {
  margin: 2px 0 2px 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-strong);
  font-size: var(--np-t-sm);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-sx-konv {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--ice-bg);
  border-radius: var(--r-sm);
  font-size: var(--np-t-md);
  color: var(--offwhite);
}
.np-sx-konv b {
  font-size: var(--np-t-lg);
  font-weight: 700;
  /* Tallet er tekst, ikke en serie. Det står i --offwhite, ikke i is. */
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
/* ── Avsatt tid mot faktisk tid ───────────────────────────────────────── */

/* SPORET HAR NULLPUNKTET I MIDTEN.
 *
 * Alle de andre stolpene på arket er forankret i venstre kant, fordi de måler
 * en mengde og null er ingenting. Denne måler et AVVIK, og null er «jobben tok
 * akkurat så lang tid som verkstedet satte av» — et helt vanlig og ganske godt
 * svar, ikke bunnen av en skala. Da må nullpunktet ligge der øyet finner det,
 * og det er midt i sporet.
 *
 * ÉN FARGE PÅ BEGGE SIDER. Stolpen til høyre og stolpen til venstre er den
 * samme serien sett fra hver sin side av referanselinja, ikke to serier. To
 * farger her ville vært det eneste stedet på arket der en retning bæres av
 * farge alene — fortegnet står skrevet i verdikolonnen og i tabellen, og
 * SIDEN sier det samme en gang til.
 *
 * Nullinja stikker 2 px over og under sporet. Inne i sporet ville den blitt
 * dekket av fyllet i det øyeblikket avviket er null, og det er nettopp da den
 * har mest å si.
 *
 * NULLINJA STÅR I --offwhite, OG DEN STO FEIL FØRST. Her sto --border-hover,
 * som er rutenettspråket ellers på arket (--border-faint i omsetningsgrafen,
 * --border på grunnlinja). MÅLT mot sporflata ga --border-hover 1,64:1, og
 * WCAG 1.4.11 krever 3:1 for et grafisk objekt som bærer mening. De svake
 * rutelinjene i omsetningsgrafen er BAKGRUNNSRULERINGER man kan overse; denne
 * er selve referansen hele diagrammet leses mot, på linje med venstrekanten i
 * et vanlig stolpediagram — og den kanten er en hard strukturkant med
 * uendelig kontrast. MÅLT i --offwhite: 11,6:1 mot sporflata, 13,4:1 mot
 * kortflata der de 2 pikslene stikker ut.
 *
 * Samme farge som referansemerket i «Kroner per arbeidstime», og med vilje:
 * de to nye seksjonene har ETT språk for «dette er en referanse, ikke en
 * serie». Ligger en liten positiv stolpe helt inntil linja, kan de to ikke
 * skilles (offwhite mot is måler 1,48:1) — men de skal heller ikke skilles:
 * begge sider av null er den samme serien, og tallet står skrevet i
 * verdikolonnen uansett. */
.np-sx-avvik-spor {
  position: relative;
  display: block;
  height: 14px;
  background: var(--fill-subtle);
  border-radius: var(--r-graf);
}
.np-sx-avvik-null {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--offwhite);
}
.np-sx-avvik-fyll {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background: var(--ice);
  border-radius: var(--r-graf);
}
/* ET GRUNNLAG PÅ TRE JOBBER ER IKKE ET SNITT, OG STOLPEN SKAL IKKE SE LIKE
   SIKKER UT SOM EN PÅ FØRTI. Fyllet dempes, og ORDET «usikkert» står i
   verdikolonnen og i tabellens egen kolonne «Grunnlag» — dempinga alene er en
   fargeforskjell, og en fargeforskjell kan ingen lese seg til betydningen av
   (WCAG 1.4.1). Raden fjernes ikke: tjenesten ble faktisk solgt tre ganger.

   0,5 OG IKKE 0,4. Her sto 0,4, og det var under gulvet: MÅLT mot sporflata
   (--fill-subtle over --navy2) gir is på 40 % 2,5:1, mens WCAG 1.4.11 krever
   3:1 for et grafisk objekt man skal kunne se. På 50 % måler den 3,1:1, og
   forskjellen mot en full stolpe er fortsatt tydelig — dempinga skal si
   «usikker», ikke «nesten borte». */
.np-sx-avvikrad.usikker .np-sx-avvik-fyll {
  opacity: 0.5;
}
/* ── Kroner per arbeidstime ───────────────────────────────────────────── */

/* Sporet er `.np-sx-spor-flate` lånt hele veien; her kommer bare de to
   tilleggene merket trenger. `overflow` må åpnes fordi merket stikker 3 px
   over og under kanten med vilje: et merke som slutter i kanten av sporet
   leser som enda en stolpe, et som stikker ut leser som en målestrek. */
.np-sx-pris-spor {
  position: relative;
  overflow: visible;
}
/* REFERANSEMERKET ER IKKE SERIE NUMMER TO.
   Det står i --offwhite, som er TEKSTFARGEN på dette arket — samme farge som
   tallene i verdikolonnen og i tabellen. Is ville gjort det til en serie, og
   sølv ville lagt seg 13,7 ΔE fra is og vært umulig å skille fra stolpen for
   en del av leserne. Fargen sier samtidig hva merket ER: en verdi som står
   skrevet, ikke en kategori.

   MEN ÉN FARGE HOLDT IKKE, OG DET VAR IKKE ÅPENBART FØR DET BLE MÅLT.
   Merket kan havne på to helt ulike underlag, fordi hele poenget med
   seksjonen er at det noen ganger ligger til venstre for stolpeenden og noen
   ganger til høyre:

     på det tomme sporet   offwhite mot sporflata  11,6:1   ✓
     oppå stolpen          offwhite mot is          1,5:1   ✗

   MÅLT: 1,48:1. Dekkhotell er nettopp tilfellet — jobben går raskere enn
   avsatt, så merket ligger inne på stolpen, og der var det så godt som borte.
   En annen enkeltfarge løser det ikke: den som er synlig på is forsvinner i
   sporet.

   Derfor har merket to farger som ikke kan svikte samtidig: en offwhite kjerne
   med en 1 px navy-ring rundt. Mot is måler navy 10,4:1, mot sporflata måler
   offwhite 11,6:1 — uansett hva som ligger bak, er minst den ene godt over
   gulvet på 3:1 for grafiske objekter. Ringen er `box-shadow` og ikke
   `border`, så den legger seg UTENPÅ de to pikslene i stedet for å spise av
   dem; merket ville ellers blitt en enkelt navy strek på is. */
.np-sx-pris-mal {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--offwhite);
  box-shadow: 0 0 0 1px var(--navy);
  border-radius: 1px;
}
/* Setningen som sier hvilken tjeneste som flytter seg mest. Samme form som
   `.np-sx-konv` i trakta: det er den samme slags påstand — én setning som
   leser av diagrammet over og sier hva det betyr. */
.np-sx-flytt {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--ice-bg);
  border-radius: var(--r-sm);
  font-size: var(--np-t-md);
  color: var(--offwhite);
}
.np-sx-flytt b {
  font-weight: 700;
  /* Tjenestenavnet er tekst, ikke en serie. --offwhite som resten. */
  color: var(--offwhite);
}
/* ── Kapasitet framover ───────────────────────────────────────────────── */

/* Uka har en linje til enn de andre radene: sammenligningen mot i fjor eller
   mot de fire siste ukene. Den kunne ikke stå i verdikolonnen — den er
   `white-space: nowrap` (nødvendig, så «18,5 t av 29,8 t» ikke brekker midt i
   et tall), og «mot snittet av de fire siste ukene (41 %)» er 210 px som ikke
   kan brekke. MÅLT på 375 px ga det vannrett sidrulling, som er forbudt.
   Derfor egen rad under, over hele bredden, der teksten får brekke fritt. */
.np-sx-ukerad {
  /* 4 px mellom de to radene, 12 px mellom spaltene — samme sidetall som de
     andre radene, bare med en loddrett verdi i tillegg. */
  gap: 4px 12px;
}
.np-sx-uke-mot {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
/* EN UKE UNDER GRENSA ER MERKET MED ET ORD, IKKE BARE MED EN FARGE.
   Kanten i --warn er en statusfarge som sier «her er det noe», på samme måte
   som `.np-sx-endring.ned` bruker den. Betydningen bæres av merkelappen ved
   siden av, som sier «ledig kapasitet» med bokstaver — kanten alene ville vært
   en påstand bare den som ser farger kan lese. */
.np-sx-ukerad.ledig {
  box-shadow: inset 2px 0 0 var(--warn);
}
.np-sx-flagg {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--border-hover);
  border-radius: var(--r-pill);
  font-size: var(--np-t-mikro);
  font-weight: 600;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}
/* ── Nett mot telefon ─────────────────────────────────────────────────── */

/* To kategorier som ikke er personer. Da er svaret IKKE to farger — is mot
   sølv måler ΔE 13,7 og er under gulvet. ÉN fylt andel i is mot en umalt rest
   med synlig kant, og begge tallene skrevet rett på flata.

   ── NÅR ETIKETTEN IKKE FÅR PLASS INNE I FLATA ──

   MÅLT av Phillip med alle timer satt til telefon: nett-boksen ble 24 px bred
   — bare polstringa — og begge etikettene ble malt i 0 px. De trenger 19 og
   44. En is-farget stubb uten tekst ved siden av «100 % Telefon» er det
   verste av to verdener: den viser en andel som ikke finnes, og den sier ikke
   hvem den er.

   Løsninga er delt i to, og de to gjør hver sin ting:

     • GULVET på flata. En andel som er null får ingen bredde i det hele tatt
       (`tom-*`): ingen polstring, ingen kant, ingen luft mellom. En andel over
       null får 3 px, nok til å se at den ER der.
     • ETIKETTEN ut. `ute-*` flytter den under stolpen, med de samme ordene og
       et merke som ser ut som flata den hører til. Ordet «Nett» eller
       «Telefon» står fortsatt skrevet — identiteten ligger aldri i fargen
       alene (WCAG 1.4.1).

   Hvem som får `ute-*` avgjøres to steder: null-andelen i STRENGEN
   (del-statistikk.js `kilden`), og den lille-men-ikke-null-andelen ETTER
   TEGNING (`kildeEtiketter`), fordi det bare er da bredden finnes.
   Grunnen til at null-tilfellet avgjøres i strengen, er at det skal være
   riktig i et SVEIP — en måling som leser HTML-en uten å kjøre
   etter-tegninga, får likevel den riktige etiketten. IKKE på papir: print-
   blokka i denne fila skjuler både `.np-sx-kilde` og `.np-sx-kilde-ute`, så
   verken stolpen eller etikettene kommer på arket — bare tabellen gjør.
   (Her sto «på papir og i et sveip». Papir-halvdelen var feil.)
   Terskelen er målt plass, ikke en fast prosent: samme etikett faller ut
   rundt 16 % av flata på 375 px og rundt 5 % på 1280 px. */
.np-sx-kilde {
  display: flex;
  gap: 2px;
  margin-top: 16px;
}
.np-sx-kilde > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 12px;
  /* GULVET: 3 px er nok til å se en strek, og lite nok til at den ikke kan
     leses som en andel. Nullandelen slår det av under. */
  min-width: 3px;
  /* Holder stolpen i live om BEGGE etikettene skulle havne utenfor. Uten den
     er det ingenting igjen å gi flata høyde. */
  min-height: 16px;
}
/* `overflow: hidden` sto på flata selv, og klippet dermed verktøytipset:
   tipset er absolutt plassert i forhold til flata og ligger HELT over den, så
   det ble aldri synlig. Ellipsen trengs bare på teksten, og her er den. */
.np-sx-kilde-inne {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.np-sx-kilde b {
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Nowrap er ikke pynt: det er DET som gjør «får den plass?» målbart etter
     tegning. Kan «0 %» brytes til to linjer, renner den aldri over kanten, og
     da finnes overskridelsen ikke i `scrollWidth`. */
  white-space: nowrap;
}
.np-sx-kilde small {
  font-size: var(--np-t-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Etiketten utenfor flata. Står i markupen hver gang og vises bare når den
   skal — så ingen tekst finnes i to synlige utgaver, og skjermleseren leser
   bare den ene (`display: none` tar den ut av tilgjengelighetstreet). */
.np-sx-kilde-ute {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  font-size: var(--np-t-sm);
  color: var(--silver);
}
.np-sx-kilde-ute > span {
  display: none;
  align-items: baseline;
  gap: 7px;
}
.np-sx-kilde-ute b {
  font-size: var(--np-t-md);
  color: var(--offwhite);
}
/* Merket ser ut som flata det hører til: fylt is for nett, umalt med kant for
   telefon. Det bærer ikke identiteten alene — ordet står ved siden av. */
.np-sx-kilde-ute i {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: var(--r-graf);
}
.np-sx-ute-nett i {
  background: var(--ice-fyll);
}
.np-sx-ute-tlf i {
  border: 1px solid var(--border-hover);
}
.np-sx-kilde-blokk.ute-nett .np-sx-ute-nett,
.np-sx-kilde-blokk.ute-tlf .np-sx-ute-tlf {
  display: inline-flex;
}
.np-sx-kilde-blokk.ute-nett .np-sx-kilde-nett .np-sx-kilde-inne,
.np-sx-kilde-blokk.ute-tlf .np-sx-kilde-tlf .np-sx-kilde-inne {
  display: none;
}
/* Uten etikett inne er polstringa bare 24 px løgn om bredden. */
.np-sx-kilde-blokk.ute-nett .np-sx-kilde-nett,
.np-sx-kilde-blokk.ute-tlf .np-sx-kilde-tlf {
  padding: 0;
}
/* Nullandelen: ingen bredde, ingen kant, ingen luft — og den andre flata tar
   hele stolpen med hele radiusen sin. */
.np-sx-kilde-blokk.tom-nett .np-sx-kilde,
.np-sx-kilde-blokk.tom-tlf .np-sx-kilde {
  gap: 0;
}
.np-sx-kilde-blokk.tom-nett .np-sx-kilde-nett,
.np-sx-kilde-blokk.tom-tlf .np-sx-kilde-tlf {
  min-width: 0;
  border: 0;
}
.np-sx-kilde-blokk.tom-nett .np-sx-kilde-tlf,
.np-sx-kilde-blokk.tom-tlf .np-sx-kilde-nett {
  border-radius: var(--r-graf);
}
/* Fylt aksentflate: MØRK etikett. Hvit tekst på is måler 1,9:1 og er
   husforbud. */
.np-sx-kilde-nett {
  background: var(--ice-fyll);
  border-radius: var(--r-graf) 0 0 var(--r-graf);
  color: var(--navy);
}
.np-sx-kilde-nett small {
  color: var(--navy);
  opacity: 0.78;
}
.np-sx-kilde-tlf {
  background: none;
  border: 1px solid var(--border-hover);
  border-radius: 0 var(--r-graf) var(--r-graf) 0;
  color: var(--offwhite);
}
.np-sx-kilde-tlf small {
  color: var(--silver);
}
/* ── Tabellene under diagrammene ──────────────────────────────────────── */

.np-sx-tabell {
  margin-top: 14px;
}
.np-sx-tabell summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-btn);
  font-size: var(--np-t-sm);
  color: var(--silver);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.np-sx-tabell summary::-webkit-details-marker {
  display: none;
}
/* Markøren var `content: "▸"` som ble byttet mot `"▾"` på `[open]`. To
   forskjellige glyffer som hopper i ett bilde — et innholdsbytte kan ikke
   animeres. Nå er det ett symbol som roteres; se `.np-kip` i
   demo-tillegg.css. Nettleserens egen trekant er fortsatt av, over. */
/* Størrelsen kommer fra `.np-kip` i demo-tillegg.css — én verdi for alle
   chevroner. Her sto 1,08em, som ga et annet mål enn de to andre. */
.np-sx-tabell summary:hover {
  color: var(--offwhite);
  border-color: var(--border-hover);
}
.np-sx-tabell summary:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}
/* Brede tabeller ruller INNE i sin egen ramme. Sida skal aldri rulle
   vannrett — varmekartets tabell har TOLV kolonner: ukedag, «Åpne dager» og
   de ti klokketimene. (Den sto som elleve til kolonnen «Åpne dager» kom.) */
.np-sx-tabellramme {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
}
.np-sx-tabell table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--np-t-sm);
  font-variant-numeric: tabular-nums;
}
.np-sx-tabell th,
.np-sx-tabell td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-faint);
}
.np-sx-tabell thead th {
  background: var(--navy2);
  color: var(--silver);
  font-size: var(--np-t-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.np-sx-tabell tbody th {
  font-weight: 600;
  color: var(--offwhite);
}
.np-sx-tabell tbody td {
  color: var(--offwhite);
}
.np-sx-tabell th.tall,
.np-sx-tabell td.tall {
  text-align: right;
}
.np-sx-tabell tbody tr:last-child th,
.np-sx-tabell tbody tr:last-child td {
  border-bottom: 0;
}
/* ── Telefon ──────────────────────────────────────────────────────────── */

/* Alt skal tåle 375 px. Diagrammene krymper; sida ruller aldri vannrett. */
@media (max-width: 620px) {
  .np-sx-stolpe,
  .np-sx-beleggrad,
  .np-sx-avvikrad,
  .np-sx-prisrad,
  .np-sx-ukerad {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .np-sx-stolpe-navn,
  .np-sx-belegg-navn {
    grid-column: 1;
  }
  .np-sx-stolpe-verdi,
  .np-sx-belegg-verdi {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
  /* Stolpen får sin egen rad under navnet — på 375 px er en navnekolonne på
     90 px og en stolpe på 60 px to ting som begge er ubrukelige. */
  .np-sx-stolpe .np-sx-spor-flate,
  .np-sx-beleggrad .np-sx-spor-flate,
  .np-sx-prisrad .np-sx-spor-flate,
  .np-sx-ukerad .np-sx-spor-flate,
  .np-sx-avvikrad .np-sx-avvik-spor {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  /* UKERADA MÅ PLASSERES HELT UT, IKKE HALVT.
     Den har fire barn i DOM-rekkefølgen navn, spor, verdi, sammenligning, og
     sporet er flyttet til rad 2 over. Overlater man de tre andre til
     automatisk plassering, søker den etter FØRSTE ledige celle: verdien
     havner da i rad 1 spalte 2 (riktig), men sammenligningen — som spenner
     hele bredden — får ikke plass før rad 3, og rad 2 er alt tatt av sporet.
     Det virker, men bare så lenge ingen legger til et femte barn. Eksplisitt
     rad og spalte på alle fire, så neste endring ikke flytter noe i stillhet. */
  .np-sx-ukerad .np-sx-stolpe-navn {
    grid-row: 1;
  }
  .np-sx-ukerad .np-sx-stolpe-verdi {
    grid-row: 1;
  }
  .np-sx-uke-mot {
    grid-row: 3;
  }
  .np-sx-plott,
  .np-sx-svg {
    height: 200px;
  }
  /* 8 av 240 brukerenheter, av et plott som her er 200 px: 6,67 px. */
  .np-sx-y {
    padding: 6.67px 0;
  }
  /* Her sto `font-size: var(--np-t-mikro)`. Det var demoens ENESTE
     typografiske mobiljustering, og den gikk feil vei: den gjorde systemets
     minste tekst enda mindre (11,5 → 10 px) mens nøkkeltallene på 30 px sto
     urørt. 10 px er under gulvet for en etikett man skal lese av et rutenett,
     og det løste ikke plassproblemet — det gjorde bare tallet uleselig.
     Timeetiketten står nå på mikrotrinnet som de andre aksene. */
  .np-sx-tips {
    --sx-tips-tak: 200px;
  }
  /* Fire piller på 375 px brekker til to rader, og en pilleform som brekker
     ser ut som et uhell. To like kolonner i stedet, med kortets radius. */
  /* `minmax(0, 1fr)` og ikke `1fr`: en grid-spalte har `min-width: auto`,
     så den kan ikke bli smalere enn innholdet sitt. Innholdet er
     `white-space: nowrap`, og «Siste 30 dager» holdt dermed spalta 123 px
     bred uansett hvor lite plass rutenettet hadde — hele gruppa sto 271 px
     bred i en forelder på 220 og stakk 51 px ut på 390 px @ 150 %.
     Gulvet må løses opp OG teksten må få brekke; bare det ene flytter
     problemet inn i knappen i stedet for ut av kortet. */
  .np-sx-perioder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: var(--r-md);
    /* OG DEN MÅ FYLLE RADEN. `.np-sx-perioder` er et flex-barn i
       `.np-sx-topp`, og et flex-barn er «shrink to fit»: rutenettet ble
       derfor så bredt som det bredeste ordet krevde, ikke så bredt som
       raden var. MÅLT på 390 px: 284 px i en rad på 350, med 66 px tomt til
       høyre og rad 2 («Siste 90 dager» / «I år») hengende ut i ingenting.
       To spalter som ikke når kanten leser ikke som en kontroll — de leser
       som to knapper som tilfeldigvis står under to andre. */
    width: 100%;
  }
  .np-sx-perioder button {
    border-radius: var(--r-btn);
    white-space: normal;
  }
  /* FEM KNAPPER I TO SPALTER BLIR 2 + 2 + 1, og den siste sto alene i venstre
     spalte med et hull ved siden av — som en knapp noen glemte. «7 dager» kom
     25.09.2026 og gjorde fire til fem.
     Regelen er skrevet på ODDETALL og ikke på «fem», så den holder om
     antallet perioder endrer seg igjen. Det er samme mønster nøkkeltallene
     brukte da de var fem og sju, og samme begrunnelse: ingenting skal stå
     alene på en rad. */
  .np-sx-perioder button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* ── Papiret ──────────────────────────────────────────────────────────── */

/* VALGET: diagrammene er skjermting og forsvinner. TABELLENE STÅR IGJEN, og
   de brettes ut av seg selv — et sammenfoldet `<details>` på papir er en
   tom side der tallene skulle vært.
   Nøkkeltallene blir stående: de er tekst, ikke grafikk, og de er hele
   grunnen til at noen skriver ut denne skjermen. */
@media print {
  /* Forbeholdet MÅ med på papiret, og det må stå på HVERT ark.
     `panel.css` skjuler hele `.np-topbar` på papir, så demomerket der kan ikke
     gjøre jobben — og `demo-tillegg.css` henger sin løpende topptekst på
     `.np-dagliste`, som ikke finnes på denne skjermen. Uten denne regelen kom
     statistikken ut som ark med omsetning og konvertering og ikke ett ord om
     at tallene er oppdiktede. Samme mønster som daglistas: `position: fixed`
     inne i @media print gjentas av nettleseren på hver side, og plassen den
     tar hentes inn igjen med padding-top. */
  .np-sx::before {
    content: "Demo — alle tall på dette arket er oppdiktede. nordicops.no";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #666;
    background: #fff;
    font-size: var(--np-t-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
  }
  .np-sx {
    padding-top: 26px;
  }
  /* Nettleseren skjuler innholdet i et lukket `<details>` på to ulike måter,
     avhengig av alder: en UA-regel på barna, eller `content-visibility` på
     ::details-content. Begge må åpnes, ellers står tabellen igjen som en tom
     linje på arket. */
  .np-sx-tabell > *:not(summary) {
    display: block !important;
  }
  .np-sx-tabell::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  .np-sx-tabellramme {
    overflow: visible;
    border-color: #666;
  }
  .np-sx-topp h2,
  .np-sx-boks h3,
  .np-sx-kpi-tall,
  .np-sx-smaa-tall,
  .np-sx-tabell tbody th,
  .np-sx-tabell tbody td {
    color: #000;
  }
  .np-sx-spenn,
  .np-sx-under,
  .np-sx-kpi-kort dt,
  .np-sx-kpi-under,
  .np-sx-smaa-kort dt,
  .np-sx-smaa-under,
  .np-sx-endring,
  .np-sx-endring span,
  .np-sx-flagg,
  .np-sx-tabell thead th {
    color: #333;
  }
  /* Setningen om hvilken tjeneste som flytter seg er den ene påstanden i
     seksjonen som ikke står i tabellen, og den skal med på arket. Flata er
     is-tonet på skjerm og blir hvit her, som `.np-sx-konv` alt er. */
  .np-sx-flytt {
    background: none;
    border: 1px solid #666;
    color: #000;
  }
  .np-sx-flytt b {
    color: #000;
  }
  .np-sx-flagg {
    border-color: #666;
  }
  /* Kanten som merker en uke under grensa er en `box-shadow`, og skygger
     skrives ikke ut. Merkelappen «ledig kapasitet» står som tekst og gjør
     jobben alene — den var aldri avhengig av kanten. */
  .np-sx-ukerad.ledig {
    box-shadow: none;
  }
  .np-sx-kpi-kort,
  .np-sx-tabell thead th {
    background: none;
    border-color: #666;
  }
  .np-sx-boks {
    border-top-color: #bbb;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .np-sx-tabell th,
  .np-sx-tabell td {
    border-bottom-color: #bbb;
  }
}


/* Arket hadde ingen `pointer: coarse`-blokk — bare `hover: none` (linje 526),
   som skjuler verktøytips. Begge kontrollene her sto 35 px på berøring.
   `summary` er ikke pynt: under `hover: none` er «Vis tallene» den ENESTE
   veien til tabellen, siden tipsene er borte. demo-tillegg.css:794 kaller den
   selv «hvert ekte klikkmål i demoen» og gir den trykkrespons — men ingen ga
   den trykkflate. */
@media (pointer: coarse) {
  .np-sx-perioder button,
  .np-sx-tabell summary {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   KOMPONENTER SOM KOM MED OMBYGGINGA 25.09.2026
   ════════════════════════════════════════════════════════════════════════ */

/* ── FANENE over hovedgrafen og tjenestelista ────────────────────────────
 * Samme familie som periodevelgeren, men ETT hakk roligere: ingen pilleramme
 * rundt gruppa, mindre skrift, og valgt tilstand er is-KANT og ikke is-fyll.
 * Grunnen er hierarki: periodevelgeren styrer hele sida og skal være den
 * sterkeste kontrollen på skjermen. Fanene styrer én seksjon. To kontroller
 * som ser like sterke ut, leser som om de gjør like mye. */
.np-sx-faner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.np-sx-fane {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: none;
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.np-sx-fane:hover:not(.valgt) {
  border-color: var(--border-hover);
  color: var(--offwhite);
}
.np-sx-fane.valgt {
  border-color: var(--ice);
  color: var(--ice);
  background: var(--ice-bg);
}
@media (pointer: coarse) {
  .np-sx-fane {
    min-height: 44px;
  }
}

/* ── GRUPPESKILLET ───────────────────────────────────────────────────────
 * Tre ord og en hårstrek. Sida har ti seksjoner, og uten et skille leser de
 * som ti likestilte bokser — den som ruller vet ikke om hen har gått fra
 * «hvordan går det» til «hva gjør vi med det».
 * Det er IKKE en overskrift i dokumentstrukturen: seksjonene under har sine
 * egne h3-er, og et h2-nivå her ville gjort dem til underkapitler av en
 * gruppe de bare tilfeldigvis står i. Derfor en `p`. */
.np-sx-gruppe {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0 -6px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
.np-sx-gruppe::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* ── FORDELINGSSTRIPA (bookinger, kunder) ────────────────────────────────
 * Én vannrett stolpe delt i to eller tre. IKKE et kakediagram: et kakestykke
 * på 11 % er umulig å sammenligne med ett på 14 % uten å lese tallene, og da
 * er tallene diagrammet. En stripe sammenligner LENGDER, som øyet er godt på.
 *
 * `flex: <antall> 1 0` og ikke prosentbredder: forholdstallene er antallene
 * selv, og da kan de ikke komme i utakt med teksten under. */
.np-sx-fordeling {
  display: flex;
  gap: 3px;
  height: 46px;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.np-sx-del {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  border-radius: 3px;
}
.np-sx-del-tall {
  font-size: var(--np-t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
/* FARGENE ER TILSTANDSFARGER, ikke «serie 1, 2, 3». Grønn er det som gikk
   bra, is er det som ligger foran, rød er avbudet. Det er samme språk som
   endringspilene i nøkkeltallene bruker, og en farge som betyr én ting ett
   sted og noe annet et annet sted, betyr ingenting. */
.np-sx-del.gjort { background: var(--green); }
.np-sx-del.kommer { background: var(--ice-fyll); }
.np-sx-del.avlyst { background: var(--bad); }
.np-sx-del.nye { background: var(--ice-fyll); }
/* Returnerende er den ROLIGE av de to, ikke den sterkeste: det normale
   tilfellet skal ikke rope. Sølv med mørk tekst holder AA. */
.np-sx-del.retur { background: var(--silver); }
.np-sx-del.avlyst .np-sx-del-tall { color: var(--navy); }

/* Tegnforklaringa bærer ORDET og TALLET. Fargen alene er ikke identitet
   (WCAG 1.4.1), og en stripe uten forklaring er tre farger uten navn. */
.np-sx-tegnforklaring {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--np-t-sm);
  color: var(--silver);
}
.np-sx-tegnforklaring li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.np-sx-tegnforklaring b {
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
.np-sx-tegnforklaring small {
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-sx-prikk {
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.np-sx-tegnforklaring .gjort .np-sx-prikk { background: var(--green); }
.np-sx-tegnforklaring .kommer .np-sx-prikk { background: var(--ice-fyll); }
.np-sx-tegnforklaring .avlyst .np-sx-prikk { background: var(--bad); }
.np-sx-tegnforklaring .nye .np-sx-prikk { background: var(--ice-fyll); }
.np-sx-tegnforklaring .retur .np-sx-prikk { background: var(--silver); }

/* ── VARMEKARTET ─────────────────────────────────────────────────────────
 * Sju rader, én per ukedag, og én kolonne per åpningstime. Rutenettet er
 * bygget med `grid` og ikke med en tabell, fordi kolonnetallet er DATA — det
 * følger åpningstida i perioden — og en tabell med skiftende kolonnetall er
 * en tabell man må bygge om for hver periode. Tabellen finnes, under «Vis
 * tallene», og den er den som leses av en skjermleser.
 *
 * STYRKEN LIGGER I EN CUSTOM PROPERTY og males med `color-mix`: cella er
 * navy2 med is blandet inn etter hvor travelt tidspunktet er. En egen
 * fargerampe med fem trinn ville vært fem nye tokener for én seksjon. */
/* MAKSBREDDE, og den er ikke en smakssak. Uten den strekker ni kolonner seg
   over hele 1 320 px og hver celle blir 133 px bred — et rutenett der én
   celle er bredere enn ordet «torsdag» leser som en tabell med tomme felt,
   ikke som et varmekart. 880 px gir rundt 85 px per celle, som er nok til
   at fargeflatene kan sammenlignes og lite nok til at rekka leses som én. */
.np-sx-varme {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  max-width: 880px;
}
.np-sx-varme-hode,
.np-sx-varme-rad {
  display: grid;
  grid-template-columns: 3.4em repeat(var(--np-sx-kol), minmax(0, 1fr)) 2.6em;
  gap: 3px;
  align-items: center;
}
.np-sx-varme-hode {
  font-size: var(--np-t-mikro);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.np-sx-varme-dag {
  font-size: var(--np-t-xs);
  color: var(--silver);
}
/* FAST HØYDE, IKKE KVADRAT. Første utgave sto med `aspect-ratio: 1 / 1`.
   MÅLT på 1 440 px: cella ble 145 px høy, sju rader ble 1 015 px, og hele
   seksjonen 1 140 px — den høyeste på sida, for det minste spørsmålet.
   Et varmekart trenger ikke kvadrater; det trenger at FARGENE kan
   sammenlignes, og det gjør de like godt i et bånd. */
.np-sx-varme-celle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-height: 30px;
  border-radius: 3px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  color: var(--navy);
  background: color-mix(in srgb, var(--ice) calc(var(--np-sx-styrke) * 100%), var(--navy2));
}
/* Den travleste cella får en is-kant i tillegg til fyllet. Fyllet alene er
   100 % is, og da er det ingen vei igjen til «denne er sterkest» — kanten er
   det siste hakket. */
.np-sx-varme-celle.best {
  box-shadow: 0 0 0 1.5px var(--ice);
}
.np-sx-varme-sum {
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Under 560 px blir cellene så små at kvadratet ikke tjener noe. Da låses
   høyden i stedet, og rutenettet blir lavere og bredere. */
@media (max-width: 559.98px) {
  .np-sx-varme-celle {
    height: 22px;
    min-height: 22px;
  }
  .np-sx-varme-hode,
  .np-sx-varme-rad {
    grid-template-columns: 2.8em repeat(var(--np-sx-kol), minmax(0, 1fr)) 2.2em;
    gap: 2px;
  }
}

/* Toppen: tittelen og spennet står sammen til venstre, periodevelgeren til
   høyre. Spennet sto som en egen linje UNDER hele toppen før, og da hadde
   sida to linjer med metatekst før det første tallet. */
.np-sx-tittel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-sx-tittel .np-sx-spenn {
  margin: 0;
  font-size: var(--np-t-sm);
}
.np-sx-klippet {
  margin-top: 0;
}

/* UTSKRIFT: fanene og periodevelgeren er tilbud om å gjøre noe, og papiret
   kan ikke ta imot. Sparklinjene står — de er en del av tallet. */
@media print {
  .np-sx-faner,
  .np-sx-perioder {
    display: none !important;
  }
  .np-sx-gruppe {
    color: #000;
  }
  .np-sx-kpi-tall,
  .np-sx-smaa-tall {
    color: #000;
  }
  .np-sx-kpi-kort {
    background: none;
    border-color: #ccc;
    break-inside: avoid;
  }
  .np-sx-varme-celle {
    color: #000;
  }
}