/* Kalenderdemoen — arket til Innstillinger-skjermen.
 *
 * Skjermen er ny og finnes ikke i produktets `panel.css`, så reglene bor i sin
 * egen fil. `panel.css` genereres på nytt fra panelet hver gang panelet endrer
 * seg, og en regel som bare finnes fordi dette er en demo, ville blitt slettet
 * i det stille ved neste kjøring.
 *
 * Ingen nye verdier. Alle farger, radier og skygger er tokens fra `.np-root` i
 * `panel.css`. Alle tekststørrelser går gjennom `--np-skala`, ellers svarer
 * ikke skjermen på sin egen tekststørrelsesvelger.
 */

/* ── Rammen: faner til venstre, bolken til høyre ──────────────────────────
   Fanekolonna er `sticky` fordi Varsler- og Bestilling-bolkene er lengre enn
   skjermen på en liten laptop, og fanene skal ikke rulle bort under føttene på
   den som leter. */
.np-innst {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 6px 0 0;
}

.np-innst-faner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 16px;
}

.np-innst-fane {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--np-t-md);
  font-weight: 600;
  line-height: 1.35;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  color: var(--silver);
  cursor: pointer;
}
.np-innst-fane:hover {
  background: var(--fill-subtle);
  color: var(--offwhite);
}
/* Den valgte fanen har FORM i tillegg til farge: en is-stolpe langs venstre
   kant. Bare en fargeendring ville vært usynlig for den som ikke ser is. */
.np-innst-fane.valgt {
  background: var(--fill-subtle);
  border-color: var(--border-strong);
  color: var(--white);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--ice);
}

/* ── Bolken ────────────────────────────────────────────────────────────── */
.np-innst-bolk {
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  padding: 18px;
}
/* Nettleserens egne marger på h2 og p slår inn her — `panel.css` har ingen
   generell nullstilling, hver seksjon setter sine egne. */
.np-innst-bolk h2 {
  margin: 0 0 12px;
  font-family: var(--np-font-display);
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}

/* Forbeholdet. Varselgult, ikke is: is er husets «se her», og dette er et
   forbehold. Ett per bolk, aldri ett per rad. */
.np-innst-merknad {
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--fill-subtle);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}
.np-innst-merknad b {
  color: var(--warn);
  font-weight: 700;
}

.np-innst-brod {
  margin: 0 0 4px;
  font-size: var(--np-t-md);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
  max-width: 62ch;
}

/* ── Raden: etikett og forklaring til venstre, kontrollen til høyre ─────── */
.np-innst-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding: 14px 0;
}
/* Skillestreken settes av naboskapet, ikke av `:first-of-type`: forbeholdet er
   også en <p> og ville flyttet «den første» ett hakk.
   Kontolista står MELLOM to rader i Konto-fanen, og et naboskap kjenner bare
   sin nærmeste nabo: uten den andre velgeren mistet «Bytt passord» streken
   over seg, fordi naboen foran den er en <ul> og ikke en rad. */
.np-innst-rad + .np-innst-rad,
.np-innst-kontoliste + .np-innst-rad {
  border-top: 1px solid var(--border-faint);
}

.np-innst-tekst {
  flex: 1 1 250px;
  min-width: 0;
}
.np-innst-tekst b {
  display: block;
  font-size: var(--np-t-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}
/* Forklaringa er ikke pynt. En innstilling ingen tør røre fordi de ikke vet
   hva den gjør, er en innstilling som ikke finnes. */
.np-innst-tekst p {
  margin: 3px 0 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
  max-width: 56ch;
}

.np-innst-kontroll {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  flex-wrap: wrap;
}
/* Rader med flere opplysninger stabler dem. Tre verdier på én linje leser som
   én lang setning; under hverandre leser de som tre opplysninger. */
.np-innst-kontroll.stablet {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.np-innst-verdi {
  font-size: var(--np-t-md);
  overflow-wrap: anywhere;
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
/* HER STO `.np-innst-notis` — en merknad som hørte til ÉN rad. Den eneste
   brukeren var språkraden, med teksten «Engelsk er ikke med i demoen». Engelsk
   KOM med i demoen, teksten ble fjernet, og klassen ble stående igjen med en
   kommentar som pekte på en bruker som ikke fantes. */

/* ── Segmentvelgeren ─────────────────────────────────────────────────────
   `.np-tekstvelger` i `panel.css` gjør det samme, men skalerer med vilje IKKE
   med `--np-skala` — den er tekststørrelsesvelgeren, og en kontroll som vokser
   mens man trykker på den er vanskelig å treffe to ganger på rad. Alle ANDRE
   segmentvelgere skal derimot følge tekststørrelsen, ellers står de igjen som
   småskrift når kunden har satt panelet til størst.

   Ingen `overflow: hidden` her, som i `.np-tekstvelger`: den klipper
   fokusringa på den første og siste knappen, og denne skjermen skal kunne
   styres med tastatur. Hjørnene rundes på knappene i stedet. */
.np-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
}
.np-seg-knapp {
  font-family: inherit;
  font-size: var(--np-t-md);
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--silver);
  cursor: pointer;
  white-space: nowrap;
}
.np-seg-knapp + .np-seg-knapp {
  border-left: 1px solid var(--border-faint);
}
.np-seg-knapp:first-child {
  border-radius: var(--r-pill) 0 0 var(--r-pill);
}
.np-seg-knapp:last-child {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}
.np-seg-knapp:hover:not(:disabled):not(.valgt) {
  color: var(--offwhite);
}
/* Fylt is med MØRK navy etikett, som alle fylte aksentflater i huset. Hvit
   tekst på #7DD3FC måler 1,9:1 og er husforbud. */
.np-seg-knapp.valgt {
  background: var(--ice-fyll);
  color: var(--navy);
  font-weight: 700;
}
.np-seg-knapp:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── EGENDEFINERT VERDI ──────────────────────────────────────────────────
 *
 * Justerknappen ligger INNE i `.np-seg` og arver pillens form, skille og
 * hjørner. Den skal lese som det siste segmentet, ikke som en knapp lagt
 * ved siden av — derfor ingen egen ramme, ingen egen bakgrunn.
 *
 * `position: relative` her er det som gjør popoveren fri: den legger seg
 * OVER flata i stedet for å skyve raden ned, så ingenting hopper når den
 * åpnes. Det var et uttrykt krav.
 */
.np-seg {
  position: relative;
}
.np-seg-juster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 9px loddrett som segmentknappene, men smalere: den bærer et ikon, ikke
     et ord. 34 px bredde gir 24 px trykkflate med luft rundt. */
  padding: 9px 10px;
  min-width: 34px;
  border: 0;
  border-left: 1px solid var(--border-faint);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: transparent;
  color: var(--silver);
  cursor: pointer;
}
.np-seg-juster .ikn {
  font-size: var(--np-t-md);
}
.np-seg-juster:hover:not(:disabled) {
  color: var(--offwhite);
}
/* Åpen tilstand: tonet flate, ikke is-fyll. Is betyr «dette er valgt» i
   huset, og knappen er ikke et valg — den åpner et felt. */
.np-seg-juster.apen {
  background: var(--fill-subtle);
  color: var(--offwhite);
}
.np-seg-juster:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Chipen som viser at en egenverdi er i bruk. Den ER et segment, med samme
   valgt-tilstand som presetene — det er hele poenget: brukeren skal se at
   verdien er aktiv uten å åpne noe. */
.np-seg-egen {
  font-variant-numeric: tabular-nums;
}

/* ── Popoveren ───────────────────────────────────────────────────────────
 * Ikke en modal. Raden er kort, og et overlegg over hele skjermen for å
 * skrive ett tall er ute av proporsjon. Kortformen er husets: `--navy2`
 * med `--border-strong`, som skjemaet og tolkningskortet.
 */
.np-egen-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 264px;
  padding: 12px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  text-align: left;
}
.np-egen-rad {
  display: flex;
  gap: 8px;
}
.np-egen-tall {
  width: 84px;
  flex: none;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}
.np-egen-enhet {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
/* Feilmeldinga har ALLTID plass, også når den er tom. Uten `min-height`
   vokser kortet i det feilen kommer, og knappene flytter seg under fingeren
   idet man trykker «Bruk» en gang til. */
.np-egen-feil {
  margin: 8px 0 0;
  min-height: calc(var(--np-t-xs) * var(--np-lh-brod));
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-brod);
  color: var(--bad-text);
}
.np-egen-knapper {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* På telefon er 264 px nesten hele bredden. Popoveren festes til HØYRE kant
   av pilla på skrivebordet; på smal skjerm ville det skjøvet den utenfor
   viewporten, og vannrett sidrulling er forbudt i dette huset. */
@media (max-width: 560px) {
  .np-egen-pop {
    right: auto;
    left: 0;
    width: min(264px, calc(100vw - 72px));
  }
}

/* ── Bryteren ────────────────────────────────────────────────────────────
   TRE signaler, ikke ett: ordet «På»/«Av», knotten som flytter seg, og fargen.
   En bryter som bare skifter farge er usynlig for den som ikke ser den fargen
   (WCAG 1.4.1). Ordet er det som virker uansett — også i utskrift, også for
   den som ser skjermen i sollys.
   Selve sporet står i faste piksler mens ordet skalerer: knotten er et symbol,
   ikke tekst, og den blir ikke lettere å lese av å bli større. */
.np-innst-bryter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: var(--np-t-md);
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--fill-subtle);
  color: var(--silver);
  cursor: pointer;
}
.np-innst-bryter:hover:not(:disabled) {
  border-color: var(--border-hover);
}
.np-innst-bryter.pa {
  color: var(--offwhite);
}
.np-innst-bryter:disabled {
  opacity: 0.45;
  cursor: default;
}
.np-bryter-ord {
  min-width: 2.2em;
  text-align: left;
}
.np-bryter-spor {
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--fill-subtle);
  border: 1px solid var(--border-strong);
  transition: background 120ms ease, border-color 120ms ease;
}
.np-bryter-spor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--silver);
  transition: transform 120ms ease, background 120ms ease;
}
.np-innst-bryter.pa .np-bryter-spor {
  background: var(--ice-bg);
  border-color: var(--ice);
}
.np-innst-bryter.pa .np-bryter-spor::after {
  background: var(--ice);
  transform: translateX(14px);
}
/* Den som har slått av bevegelse skal ikke få knotten til å gli. */
@media (prefers-reduced-motion: reduce) {
  .np-bryter-spor,
  .np-bryter-spor::after {
    transition: none;
  }
}

/* ── Kontolista: én innlogging per ansatt, ren lesevisning ───────────────
 *
 * DETTE ER EN LISTE OG IKKE ET RUTENETT, og valget er målt i aritmetikk, ikke
 * i smak. Prislista over er seks faste kolonner, og de får plass fordi den
 * ligger inne i et skjema som fyller bolken. Kontolista har fem opplysninger
 * per person, og bolken er bare 592–792 px bred mellom 900 og 1100 px
 * skjermbredde (rammen står i to kolonner der: bredde − 2×20 wrap-polstring −
 * 210 fanekolonne − 22 gap − 2×18 bolkpolstring). Fem kolonner med
 * «tor 11. sep kl. 08:15» i én av dem overlever ikke det.
 *
 * To linjer per person gjør det samme arbeidet uten en eneste fast bredde:
 * navnet og tilstanden øverst, de tre opplysningene under. Ingen kolonne kan
 * klemmes, fordi det ikke er noen kolonner.
 *
 * Ingen kolonnehoder: hver opplysning bærer sin egen betydning. «marte.demo»
 * ER et brukernavn, «Styrer kontoer» ER en tilgang, og «Sist inne: …» sier
 * det selv. Et hode over en to-linjes rad ville dessuten bare stått over den
 * første personen. */
.np-innst-kontoliste {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.np-innst-konto {
  padding: 10px 0;
}
.np-innst-konto + .np-innst-konto {
  border-top: 1px solid var(--border-faint);
}
.np-konto-topp {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.np-konto-topp b {
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--offwhite);
}
/* Merkene skyves til høyre kant av samme grunn som på et timekort: tilstanden
   leses nedover en kolonne, ikke i slutten av hvert navn. `.np-status` bærer
   `margin-left: auto` selv, og to merker etter hverandre ville da fått den
   ene skjøvet fra den andre — derfor ligger auto-margen på beholderen. */
.np-konto-merker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.np-konto-merker .np-status {
  margin-left: 0;
}
.np-konto-linje {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
/* Skilletegnet står i arket og ikke i strengen. Limte man « · » inn i JS,
   ville oversetteren fått tre biter i stedet for tre hele opplysninger — og
   en bit som brekker til neste linje tar prikken med seg.
   Ingen egen farge: prikken ER tegnsetting og skal arve linjas sølv. Samme
   form som `apningstekst()` og tidslinja i detaljkortet bruker. */
.np-konto-linje > :not(:first-child)::before {
  content: "·";
  margin-right: 8px;
}
/* Egen fontstabel, for huset har ingen monotoken. Grunnen er ikke pynt: et
   brukernavn tastes tegn for tegn, og i Inter er «l», «1» og «I» samme
   loddrette strek. */
.np-konto-linje code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--np-t-xs);
  color: var(--offwhite);
  overflow-wrap: anywhere;
}

/* ── «Vis avlyste timer i kalenderen» ────────────────────────────────────
   Klassen settes på `.np-root` av `del-innstillinger.js`. Den treffer
   rutenettet OG daglista, fordi daglista ER kalenderen under 900 px.
   Søket er med vilje IKKE med: leter man etter en kunde som avlyste, skal
   timen fortsatt være mulig å finne. */
.np-root.np-skjul-avlyste .np-time.avlyst,
.np-root.np-skjul-avlyste .np-dagrad.avlyst {
  display: none;
}

/* ── Under 900 px: fanene legger seg vannrett over innholdet ─────────────
   Samme knekkpunkt som `panel.css` bruker når rutenettet viker for daglista.
   Kolonna blir en rad som kan dras sideveis, og is-stolpen flytter fra venstre
   kant til underkanten — samme form, ny retning. */
@media (max-width: 899px) {
  .np-innst {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .np-innst-faner {
    position: static;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    /* Fokusringa på en fane skal ikke klippes av rullefeltet. */
    padding: 2px 2px 8px;
    margin: 0 -2px;
    scrollbar-width: thin;
    /* STRIPA MÅ SI AT DEN RULLER — MEN BARE DER DET ER MER.
       Stripa er lengre enn vinduet og ruller til den valgte ved opptegning.
       TALLET ER UTDATERT OG STÅR MED VILJE: «sju faner er 642 px i en stripe
       på 354» ble målt da stripa hadde sju. Den har TI fra 22.09.2026
       (Tillegg, Oppskrift og Logg kom til), så 642 er et gulv og ikke lenger
       målet. Regelen under er en TERSKEL («ruller det, vis masken»), ikke et
       tall som må treffe, så den virker uendret — men skal maskens bredde
       eller rullingen til valgt fane røres, MÅ stripa måles på nytt med ti. Det så ikke ut som en stripe man kan dra — det så ut
       som en avkuttet fane: på Bestilling-fanen sto «Verkstedet» igjen som
       «et» i venstre kant, og et halvt ord leser som en feil.
       `scrollbar-width: thin` sto her fra før og hjelper ikke: macOS og iOS
       skjuler rullefelt til man faktisk ruller, altså etter at man har
       gjettet riktig.

       En FAST uttoning i begge ender ble prøvd først og var verre enn
       problemet: på den første fanen er det ingenting til venstre å tone
       ut, så masken bleket i stedet den VALGTE fanens ramme og
       is-understrek. Målt og sett på 390 px.

       Nå følger masken rulleposisjonen, uten en linje JavaScript: masken
       er 18 px BREDERE enn stripa og forskyves fra -18 px til 0 mens man
       ruller. Ved starten ligger venstre uttoning utenfor elementet (ingen
       bleking av fane én) og høyre er inne; ved enden er det omvendt.
       `mask-position` lar seg interpolere — det gjør ikke `mask-image` med
       ulike stoppunkter, som var grunnen til at den første varianten måtte
       være fast.

       Alt ligger inne i `@supports`: uten `animation-timeline` settes ingen
       maske i det hele tatt, og stripa er som før — «et» i kanten, men
       ingenting bleket. Det er riktig vei å feile.

       ── OG DEN VAR ALDRI SKREVET (funnet 21.09) ──
       Kommentaren over sto her alene. Det fantes ingen `@supports`-blokk,
       ingen `mask-image` og ingen `@keyframes` i fila — bare beskrivelsen
       av dem. MÅLT i nettleseren på Konto-fanen, 390 px:
       `mask-image: none`, `animation-timeline: auto`, stripa 354 px bred
       med 641 px innhold og `scrollLeft` 238. Venstre kant sto med «atte»
       av «Ansatte», i full styrke, akkurat slik kommentaren sier at den
       IKKE skulle.
       En begrunnelse uten regelen sin er verre enn ingen av delene: den
       neste leser at problemet er løst og måler ikke etter. Reglene står
       nå under. */
  }

  /* Uttoningen som kommentaren over beskriver. Longhands og ikke
     `animation`-kortformen: kortformen setter `animation-duration: 0s`, og
     en rulledrevet animasjon med null varighet står bom stille. */
  @supports (animation-timeline: scroll(self inline)) {
    .np-innst-faner {
      --fanefade: 18px;
      -webkit-mask-image: linear-gradient(
        to right, transparent 0, #000 var(--fanefade),
        #000 calc(100% - var(--fanefade)), transparent 100%);
      mask-image: linear-gradient(
        to right, transparent 0, #000 var(--fanefade),
        #000 calc(100% - var(--fanefade)), transparent 100%);
      -webkit-mask-size: calc(100% + var(--fanefade)) 100%;
      mask-size: calc(100% + var(--fanefade)) 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      animation-name: np-fanefade;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(self inline);
    }
  }
  .np-innst-fane {
    width: auto;
    white-space: nowrap;
  }
  .np-innst-fane.valgt {
    box-shadow: inset 0 -3px 0 var(--ice);
  }
  .np-innst-bolk {
    padding: 16px 14px;
  }
}

/* På en telefon står kontrollen under teksten, ikke ved siden av. Da skal den
   stå VENSTREJUSTERT under sin egen etikett — en høyrestilt bryter uten noe
   til venstre for seg leser som om den hører til neste rad. */
@media (max-width: 560px) {
  /* `.np-seg` er `inline-flex` uten `max-width` og uten wrap, og knappene
     har `white-space: nowrap`. Bredden var dermed LÅST til summen av
     innholdet: «1 mnd / 2 mnd / 3 mnd» måler 257 px og ble stående 257 px
     bred i en forelder på 190 — 67 px ut av kortet på 390 px @ 150 %, og
     15 px ut alt på 125 %.
     Huset har allerede et svar på dette. `.np-sx-perioder` møter det samme
     under 968 px og løser det slik (stil-statistikk.css:968): pilleformen
     slippes, og gruppa blir like flater med kortets radius — «en pilleform
     som brekker ser ut som et uhell». Samme grep her, så de to gruppene
     oppfører seg likt når plassen tar slutt. */
  .np-seg {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 4px;
    padding: 3px;
    border-radius: var(--r-md);
  }
  /* Når gruppa brekker, er «første» og «siste» ikke lenger endene av én
     pille — de er tilfeldige plasser i et rutenett. Alle får samme form,
     og skillestreken faller bort: den skilte to knapper som nå har gap. */
  .np-seg-knapp,
  .np-seg-knapp:first-child,
  .np-seg-knapp:last-child {
    border-radius: var(--r-btn);
  }
  .np-seg-knapp + .np-seg-knapp {
    border-left: 0;
  }
  .np-innst-rad {
    gap: 10px;
  }
  .np-innst-kontroll {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .np-innst-kontroll.stablet {
    align-items: flex-start;
  }
}

/* ── Utskrift ────────────────────────────────────────────────────────────
   Innstillinger er kontroller. En kontroll er ingenting på et ark, så hele
   skjermen skjules — men den som trykker Ctrl+P skal få et svar, ikke et
   blankt ark. */
.np-innst-papir {
  display: none;
}
@media print {
  .np-innst {
    display: none !important;
  }
  .np-innst-papir {
    display: block;
    margin: 0;
    font-size: var(--np-t-xs);
    color: #000;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Verkstedet redigerer seg selv — skjemaene i Verkstedet-fanen
   ══════════════════════════════════════════════════════════════════════════
 * De ligger UNDER raden de hører til, i normal flyt, ikke i en modal. En rad
 * spør, skjemaet svarer, og resten av sida blir stående. Samme valg som
 * ansattfanen tar, av samme grunn: man vil se hva man endrer mens man endrer.
 *
 * Feltene er `.np-felt` fra panel.css — samme høyde, samme ramme, samme
 * fokusring som «Ny time». Det er ingenting her som skal se ut som en annen
 * slags kontroll enn resten av panelet. */
.np-innst-skjema {
  grid-column: 1 / -1;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border-faint);
}
.np-innst-hjelp {
  margin: 0 0 12px;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

/* ── Åpningstidene: sju rader, dag + åpent/stengt + to klokkeslett ───────── */
.np-innst-tidrad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.np-innst-dag {
  flex: 0 0 44px;
  font-size: var(--np-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--silver);
}
.np-innst-tidrad .np-felt {
  max-width: 140px;
}

/* ── Prislista: en tabell som er en tabell, også på en telefon ───────────
 * Kolonnene er grid og ikke <table> fordi radene skal kunne brekke: under
 * 720 px faller hodet bort og hver rad blir en stablet blokk. En <table>
 * kan ikke det uten å slutte å være en tabell for skjermleseren. */
.np-innst-tabell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-innst-tabellhode,
.np-innst-tabellrad {
  display: grid;
  /* 132 og ikke 116 på varighetskolonna: «1 t 30 min» måler 73 px tekst, og
     med polstring og nedtrekkspila var det 1 px for lite. Målt, ikke gjettet —
     og det er den lengste etiketten i VARIGHETER. */
  grid-template-columns: minmax(0, 1fr) 132px 96px 104px 92px auto;
  gap: 8px;
  align-items: center;
}
.np-innst-tabellhode {
  padding: 0 0 4px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--silver);
}
/* 6 og ikke 3: raden er to linjer høy nå (flagglinja under), og med 3 px lå
   streken mellom to rader nesten inntil bryterne over den. */
.np-innst-tabellrad {
  padding: 6px 0;
}
/* ── Flaggene på tjenesteraden: «Fra-pris» og «Tid avtales» ──────────────
 *
 * DE LIGGER PÅ EGEN LINJE, IKKE I TO NYE KOLONNER, og valget er aritmetikk.
 * Raden bruker alt 132 + 96 + 104 + 92 px på faste kolonner pluss
 * Fjern-knappen og seks gap. To brytere til er ~97 px hver: 200 px mer. Den
 * bredden finnes ikke mellom 900 og 1100 px skjermbredde, der rammen fortsatt
 * står i to spalter og bolken bare er 592–792 px (bredde − 2×20
 * wrap-polstring − 210 fanekolonne − 22 gap − 2×18 bolkpolstring). Navnefeltet
 * ville endt under 70 px, og «Maskinpolering» ville vist fem tegn.
 *
 * `grid-column: 1 / -1` koster ingen bredde i det hele tatt, og virker i
 * BEGGE utgavene av tabellen — også i den stablede under 720 px, der raden
 * bare har to kolonner.
 *
 * Prisen er høyden: raden blir to linjer, så rader må skilles med en strek.
 * Uten den renner tolv tjenester sammen til én blokk.
 * BARE `border-top` her, ingen polstring: under 720 px setter mediespørringa
 * nederst i arket `padding: 10px 0` på raden, og den har lavere spesifisitet
 * enn en naboskapsvelger — en `padding-top` her ville overstyrt den uten at
 * noen ba om det. Lufta ligger derfor i radens egen polstring over. */
.np-innst-tabellrad + .np-innst-tabellrad {
  border-top: 1px solid var(--border-faint);
}
.np-innst-flaggrad {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 2px 0 2px;
}
.np-innst-flagg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Samme form som kolonnehodet over — 11,5 px, fet, store bokstaver, sølv.
   Flagglinja ER et kolonnehode; det står bare ved siden av kontrollen i
   stedet for over den. */
.np-innst-flagg > span {
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-innst-nyrad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 96px 104px auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}

/* ── Kvitteringa ─────────────────────────────────────────────────────────
 * Is-stolpe og ikke varselgult: dette er en bekreftelse på noe som gikk bra.
 * Den blir stående til noe annet skjer — en endring man rakk å se, er en
 * endring man tør gjøre igjen. */
.np-innst-kvittering {
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--fill-subtle);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}

@media (max-width: 720px) {
  /* Hodet forklarer kolonner som ikke lenger står ved siden av hverandre. */
  .np-innst-tabellhode {
    display: none;
  }
  .np-innst-tabellrad,
  .np-innst-nyrad {
    grid-template-columns: minmax(0, 1fr) 132px;
    padding: 10px 0;
    border-top: 1px solid var(--border-faint);
  }
  .np-innst-tabellrad > :first-child,
  .np-innst-nyrad > :first-child {
    grid-column: 1 / -1;
  }
}


/* ARKET HADDE INGEN BERØRINGSREGEL I DET HELE TATT — eneste mediespørringer
   var bredde, print og motion. Det er skjermen med flest små kontroller ved
   siden av hverandre, og den sto 33/34/40 mens kalenderen ved siden av var
   44 hele veien. `.np-seg-knapp` på 33 px var den minste trykkflata i hele
   demoen.
   Regelen bor HER og ikke i demo-tillegg.css: det arket lastes nr. 2 av
   seks, og en regel der taper mot dette arkets egne ved lik spesifisitet.
   Det er samme felle som spiste tre rettelser tidligere samme dag. */
@media (pointer: coarse) {
  .np-innst-fane,
  .np-seg-knapp,
  .np-seg-juster,
  .np-innst-bryter {
    min-height: 44px;
  }
}

/* Masken over fanestripa forskyves fra −18 px til 0 mens man ruller: ved
   starten ligger venstre uttoning utenfor elementet (fane én står hel), ved
   enden ligger høyre utenfor (siste fane står hel). Se begrunnelsen i
   `@media (max-width: 899px)` lenger opp.
   Ruller ikke stripa — den får plass, som på 768 px — står animasjonen på
   0 %, og da ligger høyre uttoning på beholderens høyrekant. Der er det
   ingen faner, bare tom plass, så den syns ikke. */
@keyframes np-fanefade {
  from {
    -webkit-mask-position: calc(var(--fanefade) * -1) 0;
    mask-position: calc(var(--fanefade) * -1) 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* ── ARBEIDSTIDSRADA ─────────────────────────────────────────────────────
 *
 * Sju rader, én per ukedag, hver med et dagmerke og tre nedtrekk: modus,
 * fra og til. Raden var `display: flex` uten `flex-wrap`, med `max-width`
 * på nedtrekkene og ingen `min-width`. Flex har ingen nedre grense å stoppe
 * på da — den krymper til innholdet er borte.
 *
 * MÅLT 21.09 på 390 px: alle 21 nedtrekkene sto som «Eg…», «08…», «17:…».
 * Det er ikke en trang rad; det er sju dager der ingen kan se hva som er
 * stilt inn. Raden er den eneste måten å gi en ansatt egne tider på.
 *
 * Rutenett i stedet for flex, fordi det er et rutenett: fire kolonner som
 * skal stå under hverandre nedover de sju radene. `minmax(gulv, tak)` gir
 * hver kolonne både en nedre grense å stoppe på og en øvre å ikke vokse
 * forbi. Gulvene er målt innhold ved normal tekst:
 *
 *   modus   «Følg åpningstida»  125 px tekst + 24 polstring + 22 pil = 171
 *   klokke  «08:00»              45 px tekst + 24 polstring + 22 pil =  91
 *
 * Og de ganges med `--np-skala`, så de følger tekststørrelsen — samme
 * grunn som feltgulvene i demo-tillegg.css punkt 10.
 *
 * UNDER 520 PX ER DET TO LINJER. Ett rutenett på 44 + 171 + 91 + 91 + tre
 * mellomrom er 421 px, og kortets innhold er 362 px på en 430 px skjerm.
 * Da deles raden: dagmerket til venstre over begge linjene, modus alene på
 * linje én og de to klokkeslettene side om side på linje to. Det er samme
 * form som raden har på bredere skjerm, bare brettet — ikke en annen
 * kontroll. Grensa er den samme 520 px som topplinja, styrelinja og
 * knapperadene bruker. */
/* SMAL SKJERM: FLEX, IKKE RUTENETT.
   Første utgave brukte rutenett i begge bredder. Det holdt ved normal
   tekst, men et rutenett har ingen brekk: kolonnene krymper til innholdet
   klippes, og de kan ikke flytte seg ned. MÅLT på 320 px med stor og
   største tekst: alle klokkeslettene sto «08:0…» igjen — nøyaktig feilen
   raden ble rettet for, bare en tekststørrelse lenger ut.
   Flex med et gulv løser det av seg selv: får ikke begge klokkeslettene
   plass ved siden av hverandre, går det andre ned på egen linje. Og
   dagmerket tar ikke lenger en kolonne i klokkelinja, så den linja har
   hele bredden å dele på — MÅLT på 320 px × størst: 126 px per felt, mot
   de 102 som trengs. */
.np-ans-tidrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.np-ans-dag {
  flex: 0 0 auto;
  font-size: calc(12px * var(--np-skala));
  font-weight: 700;
  text-transform: uppercase;
  color: var(--silver);
}
/* Modus fyller resten av linje én, så de to klokkeslettene må ned. */
.np-ans-tidrad > .np-ans-modus {
  flex: 1 1 calc(100% - 4.5em);
  min-width: 0;
}
/* Gulvet er MÅLT innhold: «08:00» er 45 px pluss 24 polstring, 22 pil og
   2 ramme = 91, ganget med tekststørrelsen. Under det brekker de fra
   hverandre i stedet for å klippe. */
.np-ans-tidrad > .np-ans-klokke {
  flex: 1 1 calc(91px * var(--np-skala));
  min-width: calc(91px * var(--np-skala));
}

/* ÉN LINJE FØRST FRA 600 PX — og tallet er regnet, ikke valgt.
   Rutenettets kolonner kan ikke brekke; de krymper til innholdet klippes.
   Summen av gulvene er 44 + (171 + 91 + 91) × skala + 24 mellomrom, og
   kortets innhold er vindusbredden minus 68 (`.np-wrap` 40 + bolkens 28).
   Det gir en nedre grense på 489 px ved normal tekst, 533 ved stor og
   577 ved største. Grensa sto først på 520, og MÅLT ga det vannrett
   rulling på nøyaktig 520 px × største tekst — kolonnene krevde 510 px i
   et kort på 452. 600 dekker alle tre tekststørrelsene med margin.
   Under grensa er raden flex, og flex brekker i stedet for å klippe. */
@media (min-width: 600px) {
  .np-ans-tidrad {
    display: grid;
    grid-template-columns:
      44px
      minmax(calc(171px * var(--np-skala)), calc(200px * var(--np-skala)))
      minmax(calc(91px * var(--np-skala)), calc(120px * var(--np-skala)))
      minmax(calc(91px * var(--np-skala)), calc(120px * var(--np-skala)));
    justify-content: start;
  }
  .np-ans-tidrad > .np-ans-modus,
  .np-ans-tidrad > .np-ans-klokke {
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   «ENDRE» SOM EGEN KOLONNE — hvorfor knappene kom tilbake
   ══════════════════════════════════════════════════════════════════════════
 * «Endre»-knappene ble tatt ut av Verksted-fanen 17.09 med en presis
 * begrunnelse: de sto på tre ulike x-posisjoner, og den nederste la seg oppå
 * verdikolonnen. Begge deler var sanne, og begge var følger av HVOR de lå —
 * inne i `.np-innst-kontroll`, som er en `flex-end`-boks med `flex-wrap` og
 * en `.stablet`-variant som snur til kolonne. En knapp der arver posisjonen
 * til det som tilfeldigvis sto foran den, og i den stablede raden havner den
 * under de tre verdiene.
 *
 * Nå er knappen en TREDJE flexbarn i raden, etter teksten og kontrollen.
 *   · `.np-innst-endre` er `flex: 0 0 auto` og står derfor sist, mot radens
 *     høyrekant. Alle tre knappene deler nøyaktig den ene kanten, uansett hvor
 *     brede verdiene til venstre for dem er.
 *   · `.medendre .np-innst-kontroll` får `flex: 1 1 auto` i stedet for
 *     `0 1 auto`. Uten det ville `justify-content: space-between` på raden
 *     spredt den frie plassen MELLOM de tre barna, og verdien hadde stått og
 *     flytt midt i raden. Med voksende midtkolonne blir verdien liggende
 *     inntil knappen, der den hører hjemme.
 *   · Den stablede varianten beholder kolonneretninga si. De tre verdiene på
 *     bedriftsraden står fortsatt under hverandre, bare til venstre for
 *     knappen i stedet for over den.
 * Kollisjonen er dermed ikke unngått ved å flytte på noe — den er umulig,
 * fordi de to ikke deler plass lenger. */
.np-innst-rad.medendre > .np-innst-kontroll {
  flex: 1 1 auto;
}
.np-innst-endre {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* SKILLESTREKEN MÅ KJENNE SINE NYE NABOER.
   `.np-innst-rad + .np-innst-rad` er en naboskapsvelger, og et naboskap
   kjenner bare sin NÆRMESTE nabo. Står det et skjema, en liste, en plakat
   eller en eksportrute mellom to rader, mister den nederste streken sin —
   nøyaktig samme feil som kontolista hadde i Konto-fanen, der «Bytt passord»
   sto uten strek fordi naboen foran var en <ul>.
   Hver ny blokk som kan stå mellom to rader må derfor stå her. */
.np-innst-skjema + .np-innst-rad,
.np-innst-liste + .np-innst-rad,
.np-innst-punktvis + .np-innst-rad,
.np-innst-tom + .np-innst-rad,
.np-eksport + .np-innst-rad {
  border-top: 1px solid var(--border-faint);
}

/* ── Tomtilstanden ───────────────────────────────────────────────────────
 * SØLV, IKKE VARSELFARGE. «Ingen punkter ennå» er et svar, ikke en mangel:
 * ikke alle jobber har noe som må sies hver gang, og en tom oppskrift i gult
 * ville lært verkstedet at de tolv tjenestene deres har elleve feil.
 * Samme form som `.np-innst-hjelp`, med litt mer luft over og under, så den
 * leses som en linje i flyten og ikke som en melding som har dukket opp. */
.np-innst-tom {
  margin: 4px 0 10px;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

/* ── Lesevisninga av tilleggslista ───────────────────────────────────────
 * Liste og ikke tabell, fordi den ikke redigeres: tre opplysninger per rad
 * der den ene (tjenestene) er en setning som brekker. En tabell ville gitt
 * den en kolonne som var enten for smal eller for bred på hver eneste skjerm.
 * Samme form som kontolista i Konto-fanen, av samme grunn. */
.np-innst-liste {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.np-innst-listerad {
  padding: 10px 0;
}
.np-innst-listerad + .np-innst-listerad {
  border-top: 1px solid var(--border-faint);
}
.np-liste-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.np-liste-topp b {
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
  min-width: 0;
}
/* Prisen i tabellsifre: tolv rader med priser under hverandre skal stå i
   kolonne, ellers leser man ikke lista, man leter i den. */
.np-liste-tall {
  flex: 0 0 auto;
  font-size: var(--np-t-md);
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
/* Metalinja brekker med vilje: «Tilbys ved Service, EU-kontroll, Oljeskift»
   er en setning og ikke en kolonne, og den skal få lov til å gå over to
   linjer i stedet for å klippes. 18 px mellomrom på tvers er nok til at
   minuttene og tjenestene leses som to opplysninger og ikke som én. */
.np-liste-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 3px 0 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

/* ── Tilleggstabellen ────────────────────────────────────────────────────
 * Fire kolonner mot prislistas seks: navn, pris, ekstra tid, fjern.
 *
 * KOLONNENE GANGES MED `--np-skala`, OG DET GJØR IKKE PRISLISTAS.
 * Det er ikke en inkonsekvens, det er en måling. Prislistas nedtrekk er
 * 132 px, satt etter «1 t 30 min» — 73 px tekst + 24 polstring + 22 pil + 2
 * ramme = 121, med litt margin. Dette nedtrekkets lengste etikett er «Ingen
 * ekstra tid», som er 118 px tekst ved normal tekststørrelse: 164 px med
 * samme påslag, altså 40 % mer enn naboens. Ved «størst» (1,25) er den 194,
 * og et fast tall ville klippet den til «Ingen ekstra…» — nøyaktig den
 * feilen arbeidstidsrada ble rettet for én tekststørrelse lenger ut.
 * Et rutenett kan ikke brekke; det klipper. Da må tallet følge teksten.
 * Prisfeltet ganges av samme grunn: to kolonner som vokser ulikt ville
 * skjøvet navnefeltet i utakt med seg selv. */
.np-innst-tabell.tillegg > .np-innst-tabellhode,
.np-innst-tabell.tillegg > .np-innst-tabellrad,
.np-innst-nyrad.tillegg {
  grid-template-columns:
    minmax(0, 1fr)
    calc(96px * var(--np-skala))
    calc(164px * var(--np-skala))
    auto;
}

/* Hakene: hvilke tjenester tillegget tilbys ved.
   EGEN LINJE, IKKE TOLV KOLONNER — samme aritmetikk som flaggene i prislista.
   `grid-column: 1 / -1` koster ingen bredde og virker i begge utgavene av
   tabellen, også den stablede under 720 px der raden bare har to kolonner.
   `gap: 6px 18px` og `flex-wrap` lar antallet haker vokse med prislista uten
   at noe må regnes om: tolv tjenester i dag, tjue i morgen. */
.np-innst-tilrad {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 4px 0 2px;
}
/* Etiketten er KLIKKBAR sammen med haken — `<label>` rundt begge — og hele
   flata er derfor trykkflata. Gulvet på 32 px er husets minste (panel.css),
   og berøringsregelen nederst i arket løfter den til 44. */
.np-innst-hake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
  cursor: pointer;
}
/* 16 px og ikke nettleserens 13: haken står ved siden av 13,5 px tekst, og en
   hake som er mindre enn bokstavene ved siden av leser som en prikk. */
.np-innst-hake input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--ice);
  cursor: pointer;
}

/* ── Oppskrifta: punktene ────────────────────────────────────────────────
 * Nummerert liste, fordi rekkefølgen betyr noe: «ta bilde før» og «ta bilde
 * etter» er to punkter som ikke kan bytte plass.
 * Tallet står i sin egen kolonne og ikke som list-style, fordi raden er
 * `display: flex` — en markør fra `list-style` ville hengt utenfor flexboksen
 * og flyttet seg når feltet brakk. */
.np-innst-punkter {
  list-style: none;
  counter-reset: np-punkt;
  margin: 0 0 10px;
  padding: 0;
}
.np-innst-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  counter-increment: np-punkt;
}
.np-innst-punkt::before {
  content: counter(np-punkt) ".";
  flex: 0 0 auto;
  min-width: 1.5em;
  font-size: var(--np-t-xs);
  font-weight: 700;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
/* Feltet tar all plassen som blir igjen. `min-width: 0` fordi et `<input>`
   har en egen minstebredde fra nettleseren som flex ellers respekterer — uten
   den kan raden bli bredere enn kortet og gi vannrett rulling. */
.np-innst-punkt .np-felt {
  flex: 1 1 auto;
  min-width: 0;
}
.np-innst-nypunkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}
.np-innst-nypunkt .np-felt {
  flex: 1 1 200px;
  min-width: 0;
}

/* Lesevisninga av oppskrifta, under den lukkede raden. Her ER `list-style`
   riktig: det er ren tekst, ingen flexbokser, og innrykket fra `padding-left`
   gir punktene en venstrekant de deler. */
.np-innst-punktvis {
  margin: 0 0 8px;
  padding: 0 0 0 1.6em;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
.np-innst-punktvis li {
  padding: 1px 0;
}

/* ── Loggen ──────────────────────────────────────────────────────────────
 * Fire opplysninger per rad: når, hvem, hva, og hvilken time det gjaldt.
 * FLEX OG IKKE GRID, og det er et valg: «for 3 uker siden kl. 14:20» og
 * «i dag kl. 08:05» er ulike lengder, og et rutenett måtte satt kolonnen
 * etter den lengste og latt de korte stå med et hull foran seg. Flex lar
 * linja brekke der den må på en telefon og stå på én linje på en skjerm.
 * `gap: 2px 14px` — tett nedover når den brekker, luftig bortover når den
 * ikke gjør det. */
.np-innst-logg {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-innst-loggrad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 8px 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
}
.np-innst-loggrad + .np-innst-loggrad {
  border-top: 1px solid var(--border-faint);
}
/* Tidsstempelet har fast bredde så de 24 radene står i kolonne — det er den
   ene opplysningen man skanner nedover. 11em ved 13,5 px er «for 3 uker
   siden kl. 14:20» med margin, og den er den lengste formen `naartekst` og
   `omHvorLenge` kan gi. Under 520 px slippes bredden: der brekker raden
   uansett, og en fast kolonne ville bare stjålet plass fra navnet. */
.np-logg-naar {
  flex: 0 0 auto;
  min-width: 11em;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-logg-hvem {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--white);
}
.np-logg-hva {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--offwhite);
}
/* Referansen i monospace, av samme grunn som brukernavnet i Konto: den leses
   tegn for tegn, og i en proporsjonal font er «l», «1» og «I» samme strek. */
.np-logg-ref {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--np-t-xs);
  color: var(--silver);
}
/* Nedtrekket i «Vis bare» skal ikke vokse til hele kontrollkolonnen. To navn
   i demoen, ti i et verksted — 220 px tar det lengste norske navnet uten å
   ta hele raden. */
.np-logg-velg {
  max-width: calc(220px * var(--np-skala));
}
/* Tellerlinja over lista. Den er `role="status"`, så den leses opp når
   filteret endres — og den er derfor det eneste stedet som sier at lista
   faktisk ble kortere. */
.np-innst-tellerlinje {
  margin: 12px 0 4px;
  font-size: var(--np-t-sm);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}

/* ── Eksporten ───────────────────────────────────────────────────────────
 * Ruta viser RÅ CSV, med vilje. En pen tabell ville vist hva panelet mener
 * om dataene; de seks linjene her viser hva som faktisk står i fila — med
 * semikolonene, med anførselstegnene rundt et felt som inneholder ett, og
 * med kolonnene i den rekkefølgen regnskapsføreren får dem. Det er hele
 * poenget med å vise noe i det hele tatt.
 *
 * `overflow-x: auto` på beholderen og ikke på `<pre>`: fokusringen skal ligge
 * rundt ruta, ikke rundt innholdet som ruller inni den. `tabindex="0"` står i
 * markupen fordi en flate som bare kan rulles med musa er en flate en
 * tastaturbruker ikke kommer inn i. */
.np-eksport {
  margin: 4px 0 8px;
}
.np-eksport-tall {
  margin: 0 0 8px;
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.np-eksport-rute {
  overflow-x: auto;
  padding: 10px 12px;
  background: var(--fill-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
}
.np-eksport-rute pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--np-t-xs);
  /* 1.7 og ikke arvet 1,55: seks linjer monospace uten luft mellom seg leser
     som én blokk, og da ser man ikke at hver linje er en rad. */
  line-height: 1.7;
  color: var(--offwhite);
  /* INGEN BRYTING. En CSV-linje som brekker midt i et felt ser ut som to
     rader, og da er forhåndsvisninga en løgn om hva fila inneholder. Den
     ruller sideveis i stedet — det er det fila gjør i et regneark også. */
  white-space: pre;
}

@media (max-width: 720px) {
  /* Tilleggstabellen stables som prislista. Reglene over er
     `.np-innst-tabell.tillegg > …` og `.np-innst-nyrad.tillegg`, altså to og
     tre klasser — arkets egen 720-regel har bare én og taper på
     spesifisitet uansett hvor den står. Derfor gjentas stablinga her, med
     samme vekt som regelen den skal slå.
     Hvert felt bærer alt sitt eget aria-label med tilleggets navn i, så
     tabellhodet kan falle bort uten at noen mister konteksten. */
  .np-innst-tabell.tillegg > .np-innst-tabellrad,
  .np-innst-nyrad.tillegg {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ÉN KOLONNE OG IKKE TO, i motsetning til prislista som beholder et
     132 px-felt ved siden av navnet. Regnestykket: kortets innhold er
     ~312 px på en 390 px skjerm, og nedtrekket alene krever 194 px ved
     «størst». To kolonner ville gitt 152 px hver, og da står «Ingen
     ekstra…» igjen. Én kolonne kan ikke klippe.
     Prisen er høyde, og den er verdt den: raden har tolv haker under seg
     uansett, så den var aldri en énlinjes rad på en telefon. */
  .np-innst-tabell.tillegg > .np-innst-tabellrad > .np-mini-btn,
  .np-innst-nyrad.tillegg > .np-btn {
    /* Et rutenettbarn fyller kolonnen sin. En rød «Fjern» i full bredde
       leser som handlinga raden er til for. */
    justify-self: start;
  }
}

@media (max-width: 560px) {
  /* Under 560 står kontrollen under teksten, venstrejustert — og da skal
     «Endre» gjøre det samme. Reglene måtte gjentas her fordi
     `.medendre .np-innst-kontroll` over er to klasser og ville slått arkets
     `.np-innst-kontroll` uansett kildeordning. */
  .np-innst-rad.medendre > .np-innst-kontroll {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .np-innst-endre {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  /* Tidsstempelet slipper den faste bredden. Raden brekker uansett her, og
     en 11em-kolonne ville bare tatt plass fra navnet ved siden av. */
  .np-logg-naar {
    min-width: 0;
  }
}

/* Berøring: hakene i tilleggstabellen og nedtrekket i loggen er begge nye
   trykkflater, og de skal følge samme gulv som resten av skjermen. Regelen
   bor her og ikke i demo-tillegg.css av samme grunn som den over den: det
   arket lastes nr. 2 av seks og taper mot dette ved lik spesifisitet. */
@media (pointer: coarse) {
  .np-innst-hake {
    min-height: 44px;
  }
}