/* Det som hører DEMOEN til, og ikke produktet.
 *
 * `panel.css` er hentet ordrett fra det ekte kontrollpanelet og skal kunne
 * genereres på nytt når panelet endrer seg. Alt som bare finnes fordi dette er
 * en demo, står derfor HER — da er det åpenbart hva som er lånt og hva som er
 * lagt til, og regenereringen kan ikke skrive over det.
 *
 * Reglene er få med vilje. Blir denne fila lang, har demoen begynt å skille seg
 * fra produktet, og da lyver den.
 */

/* ── TYPOGRAFISTIGEN ─────────────────────────────────────────────────────
 *
 * MÅLT før denne: 153 font-size-deklarasjoner fordelt på 24 px-verdier, og
 * over hundre av dem lå en HALV PIKSEL fra naboen sin — 12,5 mot 13 er 47
 * deklarasjoner, 13,5 mot 14 er 30, 14,5 mot 15 er 23. Ingen ser en halv
 * piksel, men den gjorde at samme komponent hadde ulik størrelse i to filer:
 * filterpillene var 13 px på Oppfølging og 13,5 px i Statistikken, og
 * antallsmerket fantes i tre utgaver på 11,5, 12 og 12,5.
 *
 * Trinnene er ikke en generisk 1,25-skala. De er de faktiske klyngene som
 * alt lå i demoen, samlet til ett tall hver:
 *
 *   mikro  11    versaletiketter, aksetall          (var 10 / 11 / 11,5)
 *   xs     12,5  meta, antallsmerker, chips         (var 12 / 12,5)
 *   sm     13,5  sekundærtekst, prosa, tabeller     (var 13 / 13,5)
 *   md     15    brødtekst, knapper, feltetiketter  (var 14 / 14,5 / 15 / 15,5)
 *   lg     19    seksjonshoder                      (var 18,5 / 19 / 20)
 *   xl     22    skjermtitler                       (var 21 / 22 / 24)
 *   tall   30    nøkkeltall                         (var 28 / 30)
 *
 * `--np-t-felt` er IKKE et trinn i stigen, det er et GULV: `.np-felt` må
 * ligge på 16 px, fordi alt under gir fokus-zoom i Safari på iPhone
 * (panel.css:1010). Det er derfor det står for seg selv.
 *
 * Hvorfor her og ikke i panel.css: den fila genereres av
 * `legg_om_palett.py panel-original.css`, som bare bytter farger. En
 * typografiendring der forsvinner i stillhet ved neste kjøring. De 74
 * deklarasjonene som bor i panel.css er derfor IKKE rørt — de hører til
 * produktets panel og må endres der, ikke her. Denne stigen dekker demoens
 * egne fem ark. */
.np-root {
  --np-t-mikro: calc(11px * var(--np-skala));
  --np-t-xs: calc(12.5px * var(--np-skala));
  --np-t-sm: calc(13.5px * var(--np-skala));
  --np-t-md: calc(15px * var(--np-skala));
  --np-t-felt: calc(16px * var(--np-skala));
  --np-t-lg: calc(19px * var(--np-skala));
  --np-t-xl: calc(22px * var(--np-skala));
  --np-t-tall: calc(30px * var(--np-skala));

  /* Ni linjehøyder ble fire. `flat` er for tall og ikoner som skal sitte på
     sin egen linje uten luft, `tett` for store tall, `kort` for etiketter
     over to linjer, `brod` for alt man faktisk leser. */
  --np-lh-flat: 1;
  --np-lh-tett: 1.15;
  --np-lh-kort: 1.3;
  --np-lh-brod: 1.5;

  /* Ni letter-spacings ble to som betyr noe: versaler trenger å åpnes, store
     tall OG begge overskriftsnivåene trenger å strammes. Alt annet var støy. */
  --np-t-trakk-caps: 0.08em;
  --np-t-trakk-tett: -0.02em;
}

/* TOPPEN AV STIGEN KRYMPER PÅ TELEFON.
 *
 * MÅLT: `--np-skala` ble deklarert nøyaktig to steder i hele demoen — på
 * `:root` og på `.np-root` inne i `@media print`. INGEN breddebasert
 * mediespørring rørte den. Følgen var at en iPhone på 320 px fikk nøyaktig
 * samme 30 px nøkkeltall som en skjerm på 1512 px, mens bredden falt til en
 * femtedel. Demoen var ikke mobiltilpasset i typografien; den var bare
 * nedskalert i layout.
 *
 * Bare de tre øverste trinnene krymper. Brødtekst og nedover skal IKKE ned
 * på en liten skjerm — der er 15 px allerede gulvet for komfortabel lesing,
 * og `.np-felt` må uansett stå på 16 for å unngå fokus-zoom i Safari.
 * Det er toppen av stigen som er dimensjonert for en skrivebordsflate.
 *
 * 620 px er demoens egen grense: det er der stolpene og plottet i
 * statistikken skifter form (stil-statistikk.css:1013). Tallene og titlene
 * som krymper her, er nettopp dem som står i den seksjonen. */
@media (max-width: 620px) {
  .np-root {
    --np-t-tall: calc(24px * var(--np-skala));
    --np-t-xl: calc(20px * var(--np-skala));
    --np-t-lg: calc(17.5px * var(--np-skala));
  }
}

/* Grunnfargen på selve dokumentet.
 *
 * `panel.css` maler `.np-root`, ikke `<body>` — i verkstedappen gjør
 * merkevarelaget i styles.css den jobben. Uten dette står nettleserens egen
 * grunnfarge igjen i overrullingen (den gummistrikken en telefon gir når du
 * drar forbi toppen), og demoen blinker hvitt eller svart i kanten. */
html,
body {
  background: #0D1B2A;
}

/* ── FUNN 37: BODY HADDE NETTLESERENS STANDARDMARG PÅ 8 PX ──
 *
 * Regelen over tok over `<body>` for grunnfargen. MARGEN ble ikke tatt over,
 * og `panel.css` har ingen body-regel i det hele tatt — den maler `.np-root`,
 * fordi merkevarelaget i verkstedappens styles.css eier `<body>` der. Her
 * eier ingen den, og da står nettleserens 8 px igjen på alle fire kanter.
 *
 * MÅLT av Phillip 15.09 på 390 px: body starter på x = 8, `.np-wrap` blir
 * 374 px i stedet for 390, og med `.np-wrap` sin egen `padding: 0 20px` er
 * innholdet inntrukket 28 px i stedet for 20.
 *
 * Margen er USYNLIG, og det er derfor den har fått stå: `html` og `body`
 * males i samme navy av regelen over, så det er ingen lys kant å se — bare
 * 8 px som ikke er der man tror. Den kan ikke finnes med øyet, bare med
 * målebåndet. 16 px av 390 er 4 % av skjermen, og på en telefon er det mye:
 * det er den plassen kundenavnet i et timekort mangler. */
body {
  margin: 0;
}

.np-root {
  /* Samme mønster som --ice-bg i paletten: tonet flate til en pille.
     Brukes bare av demomerket under. */
  --warn-bg: rgba(245, 184, 65, 0.14);
}

/* NordicOps' ordmerke, skrevet som TEKST.
 *
 * `panel.css` maskerer verkstedets egen PNG. Den fila finnes ikke her, og
 * regelen er derfor tømt der. Ordmerket står her i stedet — «Nordic» i hvitt og
 * «Ops» i is, husregelen, ikke gradient-tekst. Skrevet som tekst finnes det
 * ingen bildefil å glemme å bytte når demoen kopieres.
 *
 * DEN MÅ BO HER OG IKKE I panel.css: den fila genereres på nytt fra produktet
 * 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. */
.np-logo {
  display: block;
  font-family: var(--np-font-display);
  font-weight: 800;
  font-size: var(--np-t-xl);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--white);
}
.np-logo i {
  font-style: normal;
  color: var(--ice);
}
/* `.np-logo.stor` sto her med 28 px. Ingen markup setter den klassen —
   del-topp.js:85 skriver `class="np-logo"` og ingenting annet i treet legger
   til `stor`. Død regel, fjernet. */

/* Demomerket. Ingen som ser denne sida skal kunne tro at navnene i kalenderen
   er noens ekte kunder. Varsel-gult, ikke is: is er aksenten og betyr «se
   her», mens dette er et forbehold. */
.np-pill.demo {
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 700;
}

/* Utskrift: forbeholdet skal MED på papiret. Skriver noen ut dagen og legger
   arket i en bunke, er det arket alene som må si at navnene er oppdiktede.
   Demomerket i topplinja kan ikke gjøre jobben — `panel.css` skjuler hele
   `.np-topbar` på papir, og en `display` på et barn hjelper ikke når
   forelderen er borte. Derfor står forbeholdet på daglista, som ER utskriften. */
@media print {
  /* Forbeholdet er en LØPENDE topptekst, ikke en linje på ark én.
     Som vanlig blokk sto det bare øverst i elementet, og en dag med mange timer
     gir ark to og tre uten et eneste ord om at navnene er oppdiktede — nettopp
     de arkene som blir liggende i en bunke på et verkstedbord. `position: fixed`
     inne i @media print gjentas av nettleseren på hver side.
     Plassen den tar er hentet inn igjen med padding-top på daglista, ellers
     legger toppteksten seg oppå den første timen. */
  .np-dagliste::before {
    content: "Demo — alle navn, timer og 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-dagliste {
    padding-top: 26px;
  }
}

/* ── Utskriften: fire hull, funnet ved måling ──
 *
 * «Skriv ut dagen» er en av knappene demoen skal vise fram, så arket som
 * kommer ut av skriveren må kunne leses. Fire regler i `panel.css` overlever
 * `@media print` og tar med seg skjermens farger til hvitt papir. TRE AV DEM
 * ER OGSÅ I DET EKTE PANELET — de er ikke laget av palettbyttet, de ble
 * funnet mens det ble målt, og de bør meldes videre.
 *
 * Målt mot hvitt papir, WCAG 2.1:
 *
 *   .np-notat tekst          --offwhite på hvitt      1,12:1   usynlig
 *   .np-notat venstrekant    --ice på hvitt           1,67:1   forsvinner
 *   .np-kilde                --silver på hvitt        2,56:1   under AA
 *   avlyst/blokkert navn     --silver på hvitt        2,56:1   under AA
 *   .np-dagrad.valgt         #000 på --navy25         1,63:1   mørk blokk
 *
 * Den siste er den verste: den valgte raden er som regel nettopp den man
 * skriver ut FOR, og den trykkes som et mørkt felt med usynlig tekst.
 *
 * Kun `.np-notat` sin blå kant skyldes palettbyttet — #116DFF målte 4,51:1 på
 * papir og var lesbar. Den står likevel her, sammen med de tre andre, fordi de
 * hører til samme feil: skjermfarger som ikke ble stanset ved papirkanten.
 */
@media print {
  .np-notat {
    color: #000;
    background: none;
    border-left: 2px solid #666;
  }
  .np-kilde {
    color: #000;
    background: none;
    border: 1px solid #666;
  }
  .np-dagrad.avlyst .np-dr-hva b,
  .np-dagrad.blokkert .np-dr-hva b {
    color: #333;
  }
  .np-dagrad.valgt {
    background: none;
    /* Den valgte raden må fortsatt kunne PEKES ut på papiret; en ramme sier
       det samme som en flate gjorde, uten å svelge teksten. */
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  /* Lenkene. `.np-root a` er is, og is på hvitt er 1,67:1 — telefonnummeret og
     e-postadressen til kunden er nettopp det man skriver ut arket for, og de
     var borte. Understrekinga overlever, så det leser fortsatt som en lenke
     for den som ser arket ved siden av skjermen. */
  .np-root a,
  .np-tel {
    color: #000;
  }

  /* Filter- og tildelingsknappene. `panel.css` har allerede
     `.np-dagkort .np-mini-btn { display: none }` for papir — men knappene
     bærer en INLINE `display: inline-flex` (kontrollpanel.tsx linje 2417 og
     3198), og en inline-stil slår enhver regel i et ark. Regelen har derfor
     aldri virket, i produktet heller. `!important` er den eneste veien forbi
     en inline-stil, og en knapp er uansett meningsløs på papir.
     Tildelingsknappene i detaljkortet står utenfor `.np-detalj .np-knapper`
     som print skjuler, og trengte sin egen linje. */
  .np-dagkort .np-mini-btn,
  .np-detalj .np-mini-btn {
    display: none !important;
  }
}

/* ── Handlingsmenyen ──
 *
 * Styrelinja hadde ti likestilte knapper, og de fleste trykkes en gang i uka.
 * Nå står navigasjonen til venstre, «Ny time» alene til høyre, og alt annet i
 * én meny gruppert etter hva det handler om.
 *
 * Dette er DEMOENS eget tillegg, ikke produktets — derfor står det her og ikke
 * i `panel.css`, som genereres på nytt fra panelet. Liker Phillip det, skal det
 * porteres den andre veien.
 *
 * Fargene er panelets egne tokens. Ingen nye verdier.
 */
.np-meny-boks {
  position: relative;
}
.np-meny-knapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Farge, størrelse og transition kommer alle fra `.np-kip`. */
/* Antallsmerket er hele grunnen til at «Fordel dagen» tåler å ligge skjult:
   nudgen overlever selv om knappen forsvinner. Is-fyll med mørk etikett, som
   alle fylte aksentflater i huset. */
.np-meny-merke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(2ch + 4px);
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ice-fyll);
  color: var(--navy);
  font-size: var(--np-t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.np-meny {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 268px;
  padding: 6px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  /* Menyen kan bli lengre enn skjermen på en liten laptop. Da skal den rulle,
     ikke stikke ut under kanten. */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.np-meny-bolk + .np-meny-bolk {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-faint);
}
.np-meny-bolk h3 {
  margin: 0;
  padding: 8px 10px 4px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  /* Sto som `var(--tracking-caps, 0.1em)`. `--tracking-caps` er aldri
     definert noe sted i demoen, så fallbacken har vært verdien hele tiden —
     en variabel som lot som den hørte til et system som ikke fantes. */
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
.np-meny-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--offwhite);
  font: inherit;
  font-size: var(--np-t-md);
  text-align: left;
  cursor: pointer;
}
/* `:not(.ikke-knapp)` sto her, og klassen skrives ikke av noen js-fil —
   den kom fra det ekte panelet, der menyen har en rad som bare er en
   etikett. Demoens meny har bare knapper. */
.np-meny-rad:hover {
  background: var(--fill-subtle);
}
.np-meny-hint {
  flex: none;
  font-size: var(--np-t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--silver);
}
/* Bryteren. Formen sier på/av i tillegg til fargen — en bryter som bare skifter
   farge er usynlig for den som ikke ser den fargen (WCAG 1.4.1). */
.np-meny-bryter {
  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-meny-bryter::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-meny-bryter.pa {
  background: var(--ice-bg);
  border-color: var(--ice);
}
.np-meny-bryter.pa::after {
  background: var(--ice);
  transform: translateX(14px);
}

/* Menyen er en kontroll. På papiret er den ingenting. */
@media print {
  .np-meny-boks {
    display: none !important;
  }
}

/* ── Menylinja ──
 *
 * Panelet var én lang side. Nå er det tre skjermer, og navigasjonen mellom dem
 * står i topplinja. Valgene er piller i samme familie som resten av panelet, så
 * linja leser som ett element og ikke som tre løse knapper.
 */
.np-nav {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.np-navvalg {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.np-navvalg:hover:not(.valgt) {
  color: var(--offwhite);
  background: var(--fill-subtle);
}
/* Valgt er is-fyll med MØRK etikett — husregelen for fylte aksentflater.
   `font-weight` går opp i tillegg til fargen, så valget ikke bare er en farge. */
.np-navvalg.valgt {
  background: var(--ice-fyll);
  color: var(--navy);
  font-weight: 700;
}

/* På en telefon er merket, navigasjonen og pillene tre rader. Da skal
   navigasjonen ligge til venstre som alt annet, ikke midtstilt i en tom rad. */
/* ── MENYLINJA MED FEM VALG: ÉN RULLENDE RAD, IKKE TRE STABLEDE ─────────
 *
 * HER STO OPPSKRIFTA FOR FIRE VALG, og den var riktig for fire. «Kunder»
 * kom 22.09.2026 som det femte, og da brakk den samme oppskrifta i TRE
 * rader på en telefon — med «Innstillinger» alene nederst, strukket tvers
 * over skjermen, akkurat den formen blokka under her ble skrevet for å
 * hindre da det var fire.
 *
 * MÅLT FØR, 375 × 812 px, normal tekst, fersk innlasting: menystripa 148 px
 * i tre rader, topplinja 263 px, og første timerad 1 355 px ned i et vindu
 * på 812.
 *
 * REGNESTYKKET, målt med `flex: 0 0 auto` på pillene og `scrollWidth` på
 * stripa (1 440 px, der ingenting er klemt):
 *
 *               pillene                stripa   merke   piller   + 2×14 gap
 *   normal      98+144+85+100+117        566     165      232       991 px
 *   stor       106+155+91+108+127        609     185      252      1074 px
 *   størst     115+168+98+116+138        657     207      274      1166 px
 *
 * `.np-wrap` har 20 px innrykk på hver side, så de tre summene krever et
 * VINDU på 1031, 1114 og 1206 px. Den gamle grensa på 1023 var regnet for
 * FIRE piller (904 px) og er for lav nå: MÅLT på 1024 px med normal tekst
 * lå navigasjonen oppe til høyre på rad 1 mens de to pillene lå alene og
 * venstrestilt på rad 2 — nøyaktig den skjeve formen forrige runde rettet.
 * Grensene under er de tre målte tallene, ett per tekststørrelse.
 *
 * OG UNDER GRENSA: ÉN RAD SOM RULLER SIDELENGS. Fem piller krever 566 px,
 * og en telefon på 375 gir stripa 329 px innvendig. Tre former fantes:
 *
 *   TRE RADER (det som sto her) koster 148 px på den skjermen der plassen
 *   er knappest, og gir en enslig, strukket pille nederst.
 *
 *   TO RADER 3+2 er umulig, ikke trangt: tre piller på én rad krever
 *   98+144+85 = 327 px pluss 8 px mellomrom = 335 mot 329 tilgjengelige —
 *   og ved «størst» kreves 381. En form som holder på ett tall og ryker på
 *   det neste er ikke en form. (Ordene kan ikke kortes ned heller:
 *   «Oppfølging» og «Innstillinger» er det de er, og et ikon erstatter
 *   aldri en tekststreng her.)
 *
 *   ÉN RULLENDE RAD koster 52 px. Innvendingen mot den sto skrevet i denne
 *   blokka — «SIDELENGS RULLING kan legge ‹Innstillinger› utenfor kanten
 *   uten at noe sier at den finnes» — og den er besvart to ganger nedenfor:
 *   pilla man STÅR på klebes innenfor kanten så den alltid er synlig, og
 *   pilla som så vidt stikker utenfor er selv beskjeden om at det er mer.
 *   En avskåret pille er den eneste affordansen som ikke koster høyde.
 *
 * `flex: 1 0 auto` og ikke `1 1 auto`: med krympefaktor 1 ville flex klemt
 * pillene sammen under sin egen tekst i stedet for å la stripa rulle, og da
 * klippes «Innstillinger» til et ord ingen har skrevet. Med `0` er ordets
 * egen bredde et gulv, mens `flex-grow: 1` fortsatt fyller raden der de fem
 * FÅR plass (766–1030 px).
 *
 * ANTALLSMERKET PÅ «OPPFØLGING» kan ikke havne utenfor pilla lenger, og det
 * er en FØLGE av formen og ikke en egen regel: merket er et inline-element
 * inne i knappen, og knappen har nå sin naturlige bredde i hver eneste
 * bredde. En knapp som aldri klemmes kan heller ikke klemme barnet sitt ut.
 * MÅLT: merket 24 × 17 px, helt innenfor pilla, i alle elleve breddene. */
@media (max-width: 1030.98px) {
  .np-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Rullefeltet skjules. På macOS og iOS er det et overlegg som ikke tar
       plass uansett, men på en plattform som tegner det i flyten ville det
       lagt 15 px på en stripe som er 52 — og under 766 px, der stripa
       faktisk ruller, er pekeren en finger som ikke bruker rullefelt. */
    scrollbar-width: none;
  }
  .np-nav::-webkit-scrollbar {
    display: none;
  }
  .np-navvalg {
    flex: 1 0 auto;
    text-align: center;
  }
  /* DEN VALGTE PILLA KLEBES INNENFOR KANTEN.
     `position: sticky` med BÅDE `left` og `right` klemmer elementet inn i
     rullevinduet: `right` skyver det tilbake når det ville ligget utenfor
     høyre kant, `left` når det ville ligget utenfor venstre. Imellom står
     det helt stille på sin egen plass.
     Kjernen gjør `rot.innerHTML = html` ved hver eneste tegning, så stripa
     står alltid på `scrollLeft = 0` etter et klikk. Uten dette ville
     «Innstillinger» vært usynlig nettopp på Innstillinger-skjermen, og
     `aria-current="page"` pekt på noe ingen kunne se.
     BARE `.valgt` klebes, og det er ikke en smakssak: et klebet element
     legger seg OPPÅ naboen, og `.np-navvalg` har `background: none`. Den
     valgte har `--ice-fyll`, som er #7DD3FC — en heldekkende farge. En
     gjennomsiktig pille som la seg oppå en annen ville vist begge ordene
     gjennom hverandre. */
  .np-navvalg.valgt {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 1;
  }
}

/* ── OG GRENSA FLYTTER SEG MED TEKSTSTØRRELSEN ──────────────────────────
 *
 * 1031 er riktig ved normal tekst. Ved «stor» og «størst» er det feil, og
 * en mediespørring kan ikke se forskjellen: `--np-skala` er en custom
 * property, og den finnes ikke på det stadiet CSS evaluerer `@media`.
 * `:root[data-skala="…"]` er kroken kjernen skriver ved hver tegning
 * (kjerne.js, rett under `--np-skala`) — et attributt KAN kombineres med en
 * mediespørring gjennom velgeren, det tallet ikke kan.
 *
 * De to blokkene er skrevet ut i sin helhet og ikke slått sammen med den
 * over. CSS har ingen måte å dele én erklæringsliste mellom tre ulike
 * mediespørringer på, og en felles `:is()`-liste ville tvunget den
 * STRENGESTE grensa (1206) på alle tre tekststørrelsene — altså gitt normal
 * tekst en full-bredde stripe på 1 100 px, der de fem pillene har 109 px til
 * overs på rad én. */
@media (max-width: 1113.98px) {
  :root[data-skala="stor"] .np-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :root[data-skala="stor"] .np-nav::-webkit-scrollbar {
    display: none;
  }
  :root[data-skala="stor"] .np-navvalg {
    flex: 1 0 auto;
    text-align: center;
  }
  :root[data-skala="stor"] .np-navvalg.valgt {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
@media (max-width: 1205.98px) {
  :root[data-skala="storst"] .np-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :root[data-skala="storst"] .np-nav::-webkit-scrollbar {
    display: none;
  }
  :root[data-skala="storst"] .np-navvalg {
    flex: 1 0 auto;
    text-align: center;
  }
  :root[data-skala="storst"] .np-navvalg.valgt {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 1;
  }
}

/* Under 400 px viker polstringa: ordet er innholdet, luften rundt er ikke.
   Det var en lesbarhetsregel da stripa brakk i rader; nå er det en
   RULLEAVSTAND. MÅLT på 375 px: de fem pillene krever 419 px med 10 px
   polstring mot 479 med 16, altså 60 px mindre å dra på en stripe som er
   329 px bred — nesten en femtedel av veien. 320 px × «størst» er iPhone SE
   med største systemtekst, det smaleste reelle tilfellet, og der er
   polstringa forskjellen på fire og tre synlige piller. */
@media (max-width: 400px) {
  .np-navvalg {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* HER STO EN KLAMME FOR MYE, rett under den som lukker mediespørringa over.
   En løs `}` på øverste nivå blir forkastet av parserens feilretting, så den
   har aldri malt noe galt og kunne heller ikke ses — men den er en ekstra
   klamme å telle feil for den neste som legger en regel inn her. Målt: fila
   balanserte på 0 med nøyaktig én negativ dybde, på denne linja. */

/* Navigasjonen er en kontroll. Papiret har bare én skjerm. */
@media print {
  .np-nav {
    display: none !important;
  }
}

/* ── Utskrift per skjerm ──
 *
 * `panel.css` sine print-regler er skrevet for ÉN skjerm: de skjuler rutenettet,
 * topplinja, søket og bunnseksjonene, og løfter fram daglista. Det er riktig på
 * kalenderskjermen og feil på de to andre — statistikkskjermen ville trykt et
 * blankt ark, for alt den består av står på skjulelista.
 *
 * `data-skjerm` settes av kjernen på #np-app ved hver tegning.
 */
@media print {
  /* HER STO EN REGEL SOM SKULLE LØFTE FRAM STATISTIKKEN PÅ PAPIR, med
     `.np-st`, `.np-tr` og `.np-statistikk`. Ingen av de tre klassene finnes i
     demoen — statistikkskjermen er bygget med `np-sx-*` (se
     stil-statistikk.css). Regelen traff altså ingenting, og det SÅ ut som om
     den gjorde jobben fordi skjermen skrives ut fint likevel: `.np-st` og
     `.np-tr` står på produktets egen skjuleliste i panel.css, og siden demoen
     ikke bruker dem, blir statistikken aldri skjult i utgangspunktet.
     To døde regler som opphevet hverandre. Begge er borte; målt etter:
     statistikkskjermen skriver fortsatt ut 341 tekstnoder.
     Daglista finnes ikke på de to andre skjermene, men regelen fra produktet
     tvinger den synlig. En tom, tvungen blokk gir et blankt førsteark. */
  [data-skjerm="statistikk"] .np-dagliste,
  [data-skjerm="innstillinger"] .np-dagliste {
    display: none !important;
  }
  /* HER STO EN ::before-MELDING OM AT INNSTILLINGER IKKE LAR SEG SKRIVE UT.
     Den var nummer TO: `.np-innst-papir` i stil-innstillinger.css sier det
     samme, og den er en ekte node med lenka til nordicops.no. Begge to skrev
     seg ut, under hverandre, på samme ark — en dobbeltvisning ingen så, fordi
     ingen skriver ut en innstillingsside for å sjekke den. Meldinga eies nå
     av arket som eier skjermen. */
}

/* ══════════════════════════════════════════════════════════════════════════
   Ett-linjes timekort — navnet skal ikke klippes på midten av en bokstavrad
   ══════════════════════════════════════════════════════════════════════════
 * `@container (max-width: 96px) { .np-time.kort b }` i panel.css lar navnet
 * bryte til to linjer, med den begrunnelsen at «to linjer à 12,5 px er 30 px,
 * som får plass i et kort på 51». Riktig for et kort på 51 — men klassen
 * `kort` gjelder helt ned til høydegulvet på 26 px, og der er innholdsboksen
 * 20 px. Linje to ble klippet på midten, og navn skiftet betydning:
 * «Ramberg» → «Rambera», «Nygård» → «Nvaård», «Nordby» → «Nordbv».
 *
 * Målt før: 191 av 670 synlige kort over fjorten uker (29 %), verste uke 45 %.
 * Målt etter: 0.
 *
 * `enlinje` settes av del-rutenett.js når høyden ikke rekker to linjer.
 * Regelen står HER og ikke i panel.css fordi panel.css skal kunne bygges om
 * fra `legg_om_palett.py` byte for byte; den fila endrer bare farger.
 * Samme spesifisitet som regelen i beholderspørringa (0,0,2,1) — dette arket
 * lastes etter panel.css og vinner på rekkefølge.
 *
 * Hele navnet blir stående i `title`, i `aria-label`, i daglista og i
 * detaljkortet; det er bare de siste bokstavene på kortet som viker. */
.np-time.enlinje b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: none;
}

/* Et blokkmerke som er halvt dekket av et timekort leser som et annet ord —
   «Jonas Berge · Tannlege» ble til «e · Tannlege». Merket flyttes derfor til
   det bredeste ledige feltet i blokka av `plasserBlokkmerker` i
   del-rutenett.js, og skjules helt når ingenting er ledig nok. Selve
   skraveringa, tittelen og daglista sier fortsatt at tida er blokkert. */
.np-blokk.merke-skjult span {
  visibility: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   En tom uke skal si det med ord
   ══════════════════════════════════════════════════════════════════════════
 * Linja skrives av del-rutenett.js når de synlige dagene ikke har ÉN booking,
 * blokkering eller fravær. Begrunnelsen — og hvorfor demoen avviker fra
 * produktet her, med vilje — står der, over `tellSynlig`.
 *
 * `position: absolute` og IKKE et gridelement: en `grid-column: 1 / -1` ville
 * lagt beslag på hele rad 1, og de åtte auto-plasserte barna (tidsaksen og de
 * sju kolonnene) ville blitt skjøvet ned i rad 2 — meldinga over en kalender
 * som er like høy som før, i stedet for midt i den tomme flata.
 *
 * `.np-rutenett` må derfor bli det nærmeste plasserte forelderen. Det endrer
 * INGENTING annet: hvert absolutt plasserte etterkommer inne i rutenettet har
 * alt en nærmere `position: relative` over seg — `.np-akse-time` i
 * `.np-akse-spor`, og `.np-apent`, `.np-strek`, `.np-naa`, `.np-time` og
 * `.np-blokk` i `.np-flate`. Lest i panel.css linje 299 og 361.
 *
 * Reglene står HER og ikke i panel.css, som skal kunne bygges om fra
 * `legg_om_palett.py` byte for byte — den fila endrer bare farger. */
.np-rutenett {
  position: relative;
}
.np-uketom {
  /* Fire longhands og ikke `inset: 0` — samme skrivemåte som panel.css bruker
     for hvert absolutt plasserte element i rutenettet. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* .np-naa er 3, .np-time 2, .np-blokk 1. 4 legger linja over alle tre —
     den skal kunne leses også i inneværende uke, der nålinja krysser flata. */
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* `padding-top` settes INLINE av del-rutenett.js til kolonnehodets høyde
     (54 eller 76 px × tekstskalaen), slik at innholdsboksen blir nøyaktig lik
     flata og linja havner midt i DEN, ikke midt i hele rutenettet. Derfor
     longhands her: en `padding`-shorthand ville nullet den inline verdien i
     kaskaden for `padding-top`. */
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  text-align: center;
  /* KLIKK SKAL FORTSATT VIRKE. Boksen dekker hele bookingflata, og «klikk i
     et tomt felt for å legge inn en time» er det første selgeren viser fram.
     Uten denne linja ville setningen om at uka er tom, gjort det umulig å
     fylle den — og en tom uke er nettopp uka man vil fylle.
     Vi nekter ikke — vi teller. */
  pointer-events: none;
}
/* `.np-tom` bærer fargen og størrelsen fra daglistas egen tomtekst, så de to
   visningene sier det samme med samme stemme. --silver på --navy2 måler
   5,89:1, og 5,26:1 der åpningsbåndet (hvit 4 %) ligger under — begge over
   AA-kravet på 4,5:1 for løpende tekst. Polstringa og <p>-margen tas bort:
   de hører til en liste, ikke til en sentrert linje i en flate. */
.np-uketom .np-tom {
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Heltimestreken — 1,155:1 → 1,269:1
   ══════════════════════════════════════════════════════════════════════════
 * `.np-strek` er `--border-faint`, altså rgba(255,255,255,0.05), og den ligger
 * på rutenettets `--navy2` (#13273F, ugjennomsiktig). Regnet med ekte
 * alfakomposisjon, WCAG 2.1:
 *
 *   --border-faint 5 %  over navy2  →  rgb(31, 50, 73)   1,1554:1
 *   --border       8 %  over navy2  →  rgb(38, 56, 78)   1,2694:1
 *
 * Inne i åpningsbåndet ligger `.np-apent` (hvit 4 %) under streken, og der er
 * tallene 1,1621:1 og 1,2774:1 — samme retning, samme størrelsesorden. Målt
 * på alle fire flatene i rutenettet (vanlig kolonne og dagens kolonne, med og
 * uten åpningsbånd) spriker det bare i tredje desimal.
 *
 * Dette er en FORBEDRING OG INGEN OPPFYLLELSE. WCAG 1.4.11 krever 3:1 for
 * meningsbærende grafiske objekter, og 1,269:1 er langt under. REGNET: en
 * strek som skulle nå 3:1 mot navy2 måtte være hvit på 34 % alfa —
 * rgb(99, 112, 128), altså nesten sju ganger --border-faint og nesten tre
 * ganger --border-strong (12 %, som måler 1,447:1). Da tegner hver kolonne
 * ti tydelige grå linjer, og kortene står i et rutepapir i stedet for på en
 * flate. Valget er derfor: løft de ti strekene som ALT er der, så langt det
 * går uten å bytte hva rutenettet ER. Oppløsningen står fortsatt i tidsaksen
 * til venstre, som er tekst og måler 5,89:1.
 *
 * MERK: dette gjelder BARE demoen. `.np-strek` er identisk i produktets eget
 * ark, og geometrien er urørt — ingen halvtimestrek, ingen ny høydeklasse på
 * kortet. Det er én tokenverdi som flyttes ett hakk opp i samme rampe. */
.np-strek {
  background: var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   Ansattfanen skal sitte som de seks andre fanene
   ══════════════════════════════════════════════════════════════════════════
 * Seksjonen er en `.np-skjema` fra kalenderen, lagt inn i innstillingsskjermen
 * som en fane. De to kortene er bygget likt — samme `--navy2`, samme ramme,
 * samme radius, samme 18 px polstring — så den ser riktig ut med én gang. To
 * ting skiller dem likevel, og begge merkes først når man BYTTER fane:
 *
 *   `.np-innst-bolk h2` nullstiller nettleserens egen h2-marg (`margin: 0 0 12px`).
 *   `.np-skjema-hode h2` gjør det ikke, og arver 15,355 px over OG under.
 *   `.np-skjema` har i tillegg `margin-bottom: 16px`; ingen av fanene har det.
 *
 * Målt: overskrifta sto 15 px lavere på ansattfanen enn på de seks andre, og
 * kortet sluttet 16 px lenger ned. Innholdet hoppet for hvert fanebytte.
 *
 * Regelen er SNEVRET til innstillingsskjermen med vilje. Kortene «Ny time» og
 * «Blokker tid» på kalenderen er de samme klassene, og de skal fortsatt se ut
 * som produktets — det er bare inne i fanestripa at de skal føye seg. */
.np-innst-innhold .np-skjema {
  margin-bottom: 0;
}
.np-innst-innhold .np-skjema-hode h2 {
  margin: 0 0 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Styrelinja på telefon: to rader som begge er fulle
   ══════════════════════════════════════════════════════════════════════════
 * `.np-uke-nav` har seks barn: ‹ · uketeksten · › · «I dag» · «Uke» · «Dag».
 * De har `flex-wrap: wrap` og ingenting annet, så flex pakket så mange som
 * mulig på rad 1 og lot resten falle.
 *
 * MÅLT på 390 og 430 px: rad 1 ble ‹ tekst › «I dag» — 349 av 350 px, altså
 * akkurat innafor — og rad 2 ble «Uke» «Dag» = 123 px, med 227 px tomt til
 * høyre. På 320 px falt det annerledes igjen (rad 2 = tre knapper, 84 px
 * tomt). Samme kontroll, tre forskjellige former, ingen av dem bestemt.
 *
 * Huset har alt svaret på dette. `.np-styre-knapper` møtte det samme og
 * løste det på berøring (panel.css:1374): raden får `width: 100%`, knappene
 * `flex: 1 1 auto`, og begge radene blir flush i begge kanter — «to rader
 * som ser bevisste ut» i stedet for «to rader som ser ut som et uhell».
 * Dette er samme grep på naboraden, av samme grunn.
 *
 * Bruddet tvinges av uketeksten, ikke av en `<br>`: `flex-basis` settes til
 * alt som er igjen når de to pilknappene og mellomrommene er trukket fra
 * (2 × 44 + 2 × 10 = 108 på berøring; 2 × 36 + 20 = 92 med mus, og da er
 * basisen 16 px for liten, noe som bare gjør bruddet sikrere). Rad 1 fylles
 * dermed nøyaktig av ‹ tekst ›, og «I dag» må ned. Der møter den «Uke» og
 * «Dag», og de tre deler raden mellom seg.
 *
 * Grensa er den samme 520 px som menylinja over, og av samme slags grunn:
 * MÅLT brekker raden av seg selv først ved 505 px, så over 520 er det én
 * rad og ingenting å ordne. Én grense for topplinja og styrelinja sammen —
 * ikke to som ligger 15 px fra hverandre.
 *
 * `min-width: 0` på teksten: uten den kan et flex-barn ikke bli smalere enn
 * innholdet sitt, og «21. sep – 27. sep» ville holdt raden bredere enn
 * skjermen på de smaleste telefonene. */
@media (max-width: 519px) {
  .np-uke-nav {
    width: 100%;
  }
  .np-ukelabel {
    flex: 1 1 calc(100% - 108px);
    min-width: 0;
  }
  .np-uke-nav .np-btn.liten {
    flex: 1 1 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Menyen skal ikke havne utenfor skjermkanten
   ══════════════════════════════════════════════════════════════════════════
 * `.np-meny` er `position: absolute; right: 0` i `.np-meny-boks`, altså hengt
 * på høyre kant av Meny-knappen. Det er riktig på en bred skjerm, der knappen
 * står ytterst til høyre.
 *
 * MÅLT FEIL: under 768 px brekker `.np-styre-knapper`, og Meny-knappen havner
 * midt i raden. Da ligger menyens venstre kant på −43 px — utenfor skjermen —
 * og sida ruller ikke sidelengs, så den delen er ikke bare stygg, den er
 * UMULIG Å LESE. Funnet på 360, 390, 430, 560 og 768 px.
 *
 * Å bytte til `left: 0` flytter bare problemet til høyre kant. Løsninga er å
 * flytte FESTEPUNKTET: under 768 px festes menyen til hele styrelinja i
 * stedet for til knappen, og spenner den fra kant til kant. Da kan den ikke
 * havne utenfor, uansett hvor knappen endte opp da raden brakk.
 *
 * `.np-meny-boks` må bli `static` for at `.np-styre` skal bli det nærmeste
 * plasserte forelderen. `top: 100%` blir dermed «under hele linja», som er
 * der en meny som spenner linja hører. */
@media (max-width: 768px) {
  .np-styre {
    position: relative;
  }
  .np-meny-boks {
    position: static;
  }
  .np-meny {
    left: 0;
    right: 0;
    min-width: 0;
    /* Under folden på en telefon er 70vh for mye: menyen dekket hele skjermen
       og man mistet kalenderen bak den. */
    max-height: min(60vh, 460px);
  }
}

/* ── OG 768 VAR FEIL TAK (funnet og målt 21.09) ─────────────────────────
 *
 * Blokka over retter at menyen havner utenfor skjermkanten når
 * `.np-styre-knapper` brekker til egen linje. Men BREKKPUNKTET er ikke
 * 768 px — det er der `.np-uke-nav` + 14 px + `.np-styre-knapper` ikke får
 * plass, og den summen flytter seg med to ting mediespørringa ikke ser:
 * `--np-skala` og BREDDEN PÅ UKETEKSTEN (dagvisning med årssuffiks er
 * bredere enn «Uke 39»).
 *
 * MÅLT over 53 uker × 2 visninger × 3 tekststørrelser × 2 språk:
 *
 *   nb · uke  · størst   brekker opp til 795,7 px
 *   nb · dag  · størst   brekker opp til 824,4 px
 *   nb · dag  · stor     brekker opp til 776,1 px
 *   nb · alle · normal   brekker senest 731,5 px  ← under 768, dekket
 *
 * Verifisert live på 820 px, dagvisning, 2027-03-15, størst:
 * `.np-meny` venstre kant −15,4 px, `matchMedia('(max-width: 768px)')`
 * false, og `scrollWidth === innerWidth` — sida ruller ikke sidelengs, så
 * de pikslene er BORTE, ikke bare utenfor. På 776 px med «stor» er det
 * −29,9. Samme feil som kommentaren over kaller «UMULIG Å LESE», bare
 * flyttet noen piksler opp av tekstvelgeren.
 *
 * Bare FESTEPUNKTET løftes. Kant-til-kant-menyen er et telefonvalg og blir
 * stående på 768. Over det beholder `.np-meny` sin `right: 0` og løses mot
 * styrelinja i stedet for mot knappen — og det er gratis: når raden IKKE
 * brekker, ligger knappens høyrekant allerede på styrelinjas høyrekant
 * (målt på 776 px: begge 756).
 *
 * `768.01px` og ikke `768.02`: Chrome regner mediespørringer i 1/64 px, og
 * 768,02 ville latt 768,015625 falle mellom de to blokkene ved brøkdels-
 * zoom.
 * INGEN ØVRE GRENSE. Daglistas 899 px ble vurdert og forkastet: raden
 * brekker opp til 956 px på engelsk, og der klipper det bare ikke fordi
 * «New appointment» + «Menu» gjør knappeparet 325 px bredt. Blir etiketten
 * lengre eller knappene smalere, flytter feilen seg over 900. Festepunktet
 * på styrelinja er riktig på ENHVER bredde der raden brekker, og over
 * brekkpunktet er det som vist samme sted som i dag. */
@media (min-width: 768.01px) {
  .np-styre {
    position: relative;
  }
  .np-meny-boks {
    position: static;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Trykkflater på telefon — WCAG 2.2, 2.5.8 Target Size (Minimum)
   ══════════════════════════════════════════════════════════════════════════
 * Regelen er 24 × 24 CSS-piksler, og den gjelder DET SOM ER TRYKKBART — ikke
 * hver node som ser liten ut.
 *
 * MÅLT på 390 px med pekeskjerm. To ting falt under, og ett gjorde det ikke:
 *
 *   tekststørrelse-knappene «A A A»        30 × 19   FALLER UNDER
 *   e-postlenka i detaljkortet            211 × 19   FALLER UNDER
 *   avkrysningsboksene i ansattfanen        13 × 13   FALSK ALARM
 *
 * Boksene er 13 px, men de ligger inne i en <label> uten `for`-attributt, og
 * DA er etiketten trykkflata: et trykk hvor som helst på «Aktiv» eller
 * «Dekkskift» veksler boksen. Å blåse opp boksene til 24 px ville gjort en
 * ekte, stor flate om til en stor blå firkant uten å gjøre den lettere å
 * treffe. Derfor står boksene som de er — men ETIKETTENE måles, og de var
 * 19 px høye. Det er dem som løftes.
 *
 * Reglene står HER og ikke i panel.css, som skal kunne bygges om fra
 * `legg_om_palett.py` byte for byte — den fila endrer bare farger.
 *
 * `pointer: coarse` og ikke `any-pointer`: en laptop med berøringsskjerm har
 * også styreflate, og der er 19 px greit nok. En telefon har bare tommelen. */

/* ── IKONLAGET ───────────────────────────────────────────────────────────
 *
 * Demoen hadde NULL ikoner: én <svg> i hele treet, og det var stolpe-
 * diagrammet i statistikken. Dette er laget som ikke fantes.
 *
 * Ikonet arver størrelse fra `font-size`. Det er hele grunnen til at det
 * treffer «lite ikon ved siden av tekst» av seg selv, uten et eneste mål:
 * står det i en 15 px knapp, er det 15 px.
 *
 * Symbolene bor i index.html rett etter <body>, utenfor #np-app — se
 * kommentaren der for hvorfor de ikke kan bo noe annet sted. */
.np-root svg.ikn {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

/* ── INTERAKSJONSLAGET ───────────────────────────────────────────────────
 *
 * Én regel for hele demoen. MÅLT før dette: `:active` fantes NULL steder i
 * 4 663 linjer CSS, i alle seks ark. Trykk er det eneste signalet som
 * finnes på en telefon — og telefonen er demoens hovedvisning: under 900 px
 * forsvinner rutenettet og daglista ER kalenderen.
 *
 * `transform` og ikke farge: det er det ene signalet som leses på enhver
 * flate. En `border-color`-endring ville tegnet en ring på `.np-btn.prim`,
 * som er kantløs is — sidas mest trykte knapp, og i dag den eneste
 * knappefamilien uten hover i det hele tatt.
 *
 * Selektoren tar <button>, de fire <a class="np-btn"> og <summary> — altså
 * hvert ekte klikkmål i demoen. */
.np-root button:not(:disabled):active,
.np-root a.np-btn:active,
.np-root summary:active {
  transform: translateY(1px);
}

/* Den tomme cella i rutenettet er en <div> (del-rutenett.js:263), ikke en
   knapp, og treffes ikke av regelen over. Den var også det eneste klikkmålet
   i demoen HELT uten hover: «ny time i et tomt felt» var usynlig til man
   traff den.

   `.stengt` holdes utenfor hover med vilje. Klikket virker der også — det
   sier kommentaren i del-rutenett.js:256 — men fila setter `cursor: default`
   på den for at en stengt dag ikke skal invitere. Da skal den heller ikke
   lyse opp når musa passerer. Trykket kvitterer den fortsatt for. */
/* `background-color`, IKKE `background`. Kortformen nullstiller
   `background-image`, og en stengt dag har skravuren sin nettopp der
   (panel.css:368). Begge selektorene her er (0,2,0) — samme som
   `.np-flate.stengt` — og dette arket lastes sist, så kortformen vant og
   skravuren forsvant så lenge fingeren lå nede. Da så en stengt dag ut
   som en åpen i akkurat det sekundet man vurderte å trykke på den.
   `:active` beholdes for stengte dager med vilje: kommentaren over sier at
   klikket virker der, og trykket skal kvittere. Det er skravuren som skal
   bli stående, ikke kvitteringa som skal bort. */
@media (hover: hover) {
  .np-flate:not(.stengt):hover {
    background-color: var(--border-faint);
  }
}
.np-flate:active {
  background-color: var(--fill-subtle);
}

/* LENKEKNAPPER OG EKTE KNAPPER MÅLTE ULIKT.
 *
 * `.np-btn` brukes på BEGGE: fire steder i demoen er den en `<a>` (footerens
 * to lenker, «Se nettsida» i Om, «Ring» i Oppfølging), resten er `<button>`.
 * MÅLT med identiske klasser, samme padding (8/14) og samme font (14 px):
 *   <a class="np-btn prim liten">      40 px   line-height 21,7 px
 *   <button class="np-btn sek liten">  35 px   line-height normal
 *
 * Årsaken er at `font: inherit` på en knapp IKKE tar med `line-height` —
 * nettleseren setter sin egen `normal`. Lenka arver derimot rotas 1,55.
 * Fem piksler forskjell mellom to knapper som står side om side, og det
 * synes med én gang når den ene er fylt.
 *
 * En eksplisitt verdi gjør dem like uansett elementtype. 1,25 er samme tall
 * som timekortet bruker, og valgt fordi 1,55 er en PROSA-linjehøyde: en
 * knappetikett er én linje og skal ikke ha luft over og under som et avsnitt. */
.np-root .np-btn {
  line-height: 1.25;
}

/* FØLGESENDRING TIL «Ny» → «Ikke bekreftet» I DAGLISTA.
 *
 * Statusmerket er `flex: 0 0 auto` og krymper aldri, så navnekolonna tar
 * hele tapet når pilla blir bredere. MÅLT: kolonna er viewport − 124 px
 * (np-wrap 2×20 + np-dagkort 2×16 + 2×12 gap) − 53,90·skala (np-dr-tid) −
 * pillebredden. Ved 360 px og tekststørrelse «størst» blir den 63 px, mens
 * ordet «Ramberg» alene måler 82,2 px. `.np-dr-hva b` har ingen
 * `overflow-wrap`, så navnet fløt ut av flex-elementet og la seg OPPÅ pilla.
 *
 * Grensa flytter seg fra 344 px til 379 px med det lengre ordet — altså
 * treffer den iPhone SE og 13 mini (375 px) på største tekst, og 390 px når
 * raden er valgt (`.np-dagrad.valgt` legger på 2×8 px, panel.css:807).
 * Det er derfor ingen har sett det før.
 *
 * Regelen hører hjemme i panel.css:795, men den fila regenereres av
 * legg_om_palett.py og skal ikke røres. Den står derfor her, som alt annet
 * som bare finnes fordi dette er en demo. */
.np-dr-hva b {
  overflow-wrap: anywhere;
}

/* ETTERSKRIFT 22.09.2026 — REGNESTYKKET OVER GJELDER FORTSATT, OG HVORFOR.
 *
 * Timeraden ligger nå i en beholder (`.np-jobbrad`) sammen med statusknappen,
 * og en knapp ved siden av raden ville tatt 95 px + 8 px gap av nøyaktig den
 * kolonna som måles over — 63 px ville blitt −40. Beholderen wrapper derfor,
 * og knappen faller ned på egen linje under viewport 453 px (skala 1) og
 * 540 px (skala «størst») — MÅLT i nettleseren, ikke regnet. Raden er da like
 * bred som før: 246,0 px ved 320 px, med `.np-dr-tid` på 61,9 og navnekolonna
 * på 84,4. Tallene over står uendret på hver eneste telefonbredde.
 *
 * (Merk at 53,90 i regnestykket over er eldre enn skriftskiftet: `.np-dr-tid`
 * måler 61,9 px ved skala 1 i dag. Grensa denne regelen beskriver flytter seg
 * altså litt oppover, den forsvinner ikke.)
 *
 * Hele utregninga, med alle mellomtallene, står i stil-jobb.css øverst under
 * «1. DAGLISTA». Den står der og ikke her fordi det er beholderen som eier
 * bruddet; dette er bare merknaden om at den ikke rører kolonna denne regelen
 * handler om. */

/* Den tredje `.np-dagrad`-nabosaken: jobbmerket er et <span> og ikke en
   <small>, nettopp for å slippe å slåss med `.np-dr-hva small { display:
   block }` i panel.css:802. Ingen regel her — den står i stil-jobb.css,
   sammen med resten av statuslaget. */

/* «Åpnes i ny fane»-ikonet. Mindre enn chevronen: det er en fotnote til
   lenketeksten, ikke en kontroll. Marg og ikke gap, fordi `.np-btn` ikke er
   flex — samme grep som på mini-knappene. */
.np-ut {
  font-size: var(--np-t-xs);
  color: var(--silver);
  margin-left: 6px;
}

/* LUPA I SØKEFELTET.
 *
 * `.np-finn-felt` er en <label> i panel.css (urørt), så posisjoneringa står
 * her. Regnestykket: `.np-felt` har `padding: 10px 12px` og 1 px kant, så
 * ikonet står 12 px inn — på linje med der teksten ellers begynner — og
 * teksten skyves til 36 px: 12 venstremarg + 15 ikon + 9 luft.
 *
 * `pointer-events: none` er ikke pynt: uten den spiser ikonet klikket som
 * var ment for feltet, og et søkefelt man ikke kan trykke på er verre enn
 * et uten ikon. */
/* `.np-finn-bryter` arver `gap: 10px` fra panel.css (linje 1494), satt da
   knappen bare hadde tekst og antallsmerke. Med en chevron foran er 10 px
   for mye luft mellom pil og overskrift; 8 px er husets gap ellers. */
.np-finn-bryter {
  gap: 8px;
}

.np-finn-felt {
  position: relative;
}
.np-finn-lupe {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--np-t-md);
  color: var(--silver);
  pointer-events: none;
}
.np-finn-felt .np-felt {
  padding-left: 36px;
}

/* TIMEKORTET ER KLIKKBART, OG SA DET NESTEN IKKE.
 *
 * `panel.css:434` gir `.np-time:hover` en `border-color` og en
 * `border-left-color` — men venstrekanten settes til `var(--ice)`, som er
 * nøyaktig fargen den har fra før (linje 424). Halve hover-effekten var
 * altså ingen effekt, og den andre halvparten er én tone på en 1 px kant.
 * Kortet leste som informasjon, og teksten under kalenderen måtte si
 * «klikk på en time for å se kunden».
 *
 * Bakgrunnen løftes ett hakk i stedet. Det er samme grep som daglista
 * bruker, det leses uten å lete, og det gjør ikke flata urolig: --navy3 til
 * --fill-subtle er ett trinn, ikke et blink. Venstrekanten er urørt — den
 * bærer ansattfargen og er den eneste nøkkelen til hvem timen er på. */
@media (hover: hover) {
  /* `:not(.avlyst)` OG `background-color`, og de to løser hver sin ting.
     En avlyst time bæres av TO signaler som ikke er farge (panel.css:585):
     45°-skravuren og gjennomstrekinga. Kortformen her nullstilte
     `background-image` og tok skravuren; regelen tok i tillegg den
     ugjennomsiktige `--navy2` bort og satte kortet på `--fill-subtle` —
     nøyaktig den flata panel.css:590 sier ble MÅLT til 4,34:1 for sølv og
     forkastet som under AA.
     Derfor holdes avlyste kort helt utenfor hover-løftet: de har sin egen
     flate av en grunn. Samme form som `.np-flate:not(.stengt):hover`. */
  .np-root .np-time:not(.avlyst):hover {
    background-color: var(--fill-subtle);
  }
}

/* CHEVRONEN. Ett symbol, og retningen er CSS.
 *
 * Derfor ett og ikke to: en `transform: rotate()` kan animeres, et
 * innholdsbytte kan ikke. Statistikktabellen byttet `▸` mot `▾` i en
 * `::before`, og da hopper glyfen i ett bilde uten bevegelse.
 *
 * Står chevronen FORAN en overskrift, peker den høyre når lukket og ned når
 * åpen — mappa som folder seg ut. Står den BAKERST på en knapp, peker den
 * ned når lukket og snur helt rundt når åpen.
 *
 * 120 ms ease er husets egen varighet (linje 300 og 311 i denne fila).
 *
 * Redusert bevegelse er dekket for DENNE: panel.css:1231 slår av
 * `transition` på `.np-root *`, og chevronen er et ekte element. Den
 * slutter da å animere, men peker fortsatt riktig vei — `transform` er en
 * TILSTAND her, ikke en animasjon.
 * Universalselektoren treffer derimot IKKE pseudoelementer; se sperra
 * nederst i fila for knotten på menybryteren. */
.np-kip {
  /* ÉN størrelse for hver chevron i demoen. Her sto tre ulike `em`-verdier
     — 0,86em i «Kommende timer» (h2, 18,5 px), 0,93em på Meny (15 px) og
     1,08em på «Vis tallene» (13 px) — fordi hver arvet sin egen kontekst.
     Målt ga det 13,9 / 14,6 / 15,9 px: samme symbol i tre størrelser.
     `--np-t-sm` er et absolutt trinn på stigen, så alle blir like STORE,
     og de skalerer fortsatt med tekststørrelsesvelgeren. */
  font-size: var(--np-t-sm);
  color: var(--silver);
  transition: transform 120ms ease;
}
/* HER STO `.np-mini-btn .np-kip { margin-left: 6px }` med begrunnelsen at
   «`.np-mini-btn` har verken flex eller gap — den er en ren inline-knapp».
   Det stemte ikke da regelen ble skrevet: klassen får `display: inline-flex`
   lenger nede i denne fila, i geometri-rettelsene. Marga er byttet mot
   `gap: 6px` på selve knappen (se «`.np-mini-btn` ER FLEX» sist i fila) —
   samme avstand, riktig verktøy, og den virker også for prikken FORAN
   teksten i «Hvem»-pilla, som marga aldri rørte.
   `vertical-align: -0.125em` fra `svg.ikn` gjør loddrett sentrering. */
.np-kip.foran { transform: rotate(-90deg); }
[aria-expanded="true"] > .np-kip { transform: rotate(180deg); }
[aria-expanded="true"] > .np-kip.foran { transform: rotate(0deg); }
/* <details> har ingen `aria-expanded` — `[open]` er tilstanden der. Chevronen
   står foran «Vis tallene», altså `.foran`: høyre når lukket, ned når åpen. */
.np-sx-tabell[open] summary .np-kip.foran { transform: rotate(0deg); }

/* FARE PÅ BERØRING.
 *
 * `.np-mini-btn.fare` og `.np-btn.sek.fare` er røde KUN på `:hover`
 * (panel.css:1092 og 1134). På telefon finnes ingen hover, og da ser
 * «Slett timen» nøyaktig ut som «Vis arbeidstid» — de står ved siden av
 * hverandre i handlingsraden i detaljkortet.
 *
 * Dette er grunnen til at papirkurv-ikonet ble vurdert og FORKASTET: form er
 * feil verktøy her, farge er riktig. Regelen treffer hver eneste fare-knapp,
 * også dem ingen har talt opp, og koster null visuell vekt på skrivebordet. */
@media (hover: none) {
  .np-root .fare {
    color: var(--bad-text);
    border-color: var(--bad);
  }
}

/* AA-gulvet gjelder også med mus. `.np-tv-knapp` målte 30x19 px på
   skrivebordet — `@media (pointer: coarse)` under løfter dem til 40x36 på
   telefon, men WCAG 2.2 § 2.5.8 sitt krav på 24x24 gjelder enhver peker.
   `format.py` måler trykkflater bare under 600 px, så dette sto umålt.
   5 px høyere er ikke synlig; det er luft, ikke et nytt utseende. */
.np-tv-knapp {
  min-height: 24px;
}

@media (pointer: coarse) {
  /* 40×36 sto her og var husets eneste «nesten 44». Tre knapper ved siden
     av hverandre («A A A») er akkurat det tilfellet der en tomme bommer på
     nabo­knappen, så den følger nå samme mål som alt annet. */
  .np-tv-knapp {
    min-width: 44px;
    min-height: 44px;
  }
  /* E-post og telefon i detaljkortet er lenker man trykker med tommelen.
     Polstringa gjør flata høy nok, den negative margen tar tilbake plassen
     den la til — raden flytter seg ikke. */
  .np-detalj a {
    display: inline-block;
    padding: 6px 0;
    margin: -6px 0;
  }
  /* HER STO OGSÅ `.np-mini-btn`, og den regelen SENKET en trykkflate.
     Målinga bak den var 25 px, men 25 er skrivebordshøyden — på berøring
     står `.np-mini-btn` i husets egen 44 px-liste (panel.css:1359).
     Dette arket lastes etter panel.css, så «hevinga» til 32 px tok i
     virkeligheten 12 px BORT fra tommelen. Den er ute igjen; huset hadde
     alt et riktig svar for den knappen.
     `.np-finn-bryter` står ikke i den lista og har ingen annen
     berøringsregel — for den er 32 px en reell heving fra 25. */
  .np-finn-bryter {
    min-height: 32px;
  }
}

/* Etikettene rundt en avkrysningsboks ER trykkflata: en `<input>` inne i en
   `<label>` gjør hele etiketten klikkbar, så det er etikettens mål WCAG 2.2
   § 2.5.8 gjelder — ikke boksens 13 px.
   REGELEN STO I `@media (pointer: coarse)` OVER og gjaldt dermed bare på
   telefon. Med mus var etikettene fortsatt 19 px. Kravet på 24×24 er ikke
   et berøringskrav; det gjelder enhver peker, akkurat som for
   `.np-tv-knapp` lenger oppe i fila — samme feil, samme sted, andre gang.
   `min-height` og ikke polstring: etikettene står i en flex-rad med `gap`,
   og polstring ville flyttet naboene.
   Regelen treffer bredt — også etiketter rundt et tekstfelt — og det er
   trygt: de er høyere enn 24 px fra før, så for dem er dette et null-ledd. */
.np-skjema label,
.np-innst-innhold label {
  min-height: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GEOMETRI-RETTELSER
   Fem funn fra den visuelle sveipen (qa8.py, 4 bredder × 3 zoom). Alle
   fem er rettet DER ÅRSAKEN BOR — på den delte klassen, ikke på raden der
   symptomet ble sett. Ingen av tallene under er valgt for å dekke et
   utstikk; hvert av dem følger av en måling som står i kommentaren.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Knapperader med to faste høyder ────────────────────────────────
   `.np-navknapp` er hardkodet 38×38 (panel.css:239) og `.np-btn` måler 36
   etter at den fikk eksplisitt `line-height`. De står side om side i
   `.np-uke-nav`, og raden var 38/38/36/36/36.
   Pilknappen skal være KVADRATISK — det er hele formen dens — så den
   følger knappehøyden i stedet for å ha sin egen. 36 er fortsatt godt
   over AA-gulvet på 24, og `min-width: 44px` på berøring (panel.css:1364)
   er urørt. */
.np-navknapp {
  width: 36px;
  height: 36px;
}

/* ── 2 · `.np-mini-btn` hadde ingen høyde i det hele tatt ───────────────
   Klassen (panel.css:1072) setter `font-size` og `padding`, men verken
   `line-height` eller `min-height`. Høyden falt dermed ut av innholdet:
   tekstknappene ble 25 px, mens fargeknappen i Ansatte — som inneholder
   en 10 px prikk og bærer sin egen `padding:6px 8px` i en inline-stil
   (del-ansatte.js:292) — ble 24. En piksel, men den står i en rad med
   seks naboer og raden leser skjevt.
   Låst høyde her i stedet for å rette inline-stilen ETT sted: det er
   klassen som mangler en høyde, og den brukes rundt 30 steder. Sentrering
   i tillegg, så innholdet står midt i flata uansett hva det er. */
.np-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  line-height: 1.25;
}
/* 26 px er SKRIVEBORDSHØYDEN. Panel.css løfter den samme knappen til 44 på
   berøring (panel.css:1359), men den regelen står i et ark som lastes FØR
   dette — og en `@media`-blokk gir ingen ekstra spesifisitet. Uten linjene
   under vant `min-height: 26px` over husets 44, og tommelen mistet 18 px.
   Det er tredje gang i samme fil at en skrivebordsmåling har spist en
   berøringsregel: `.np-tv-knapp` (rettet), `.np-mini-btn` via 32 px-regelen
   (rettet), og denne. Årsaken er alltid den samme — riggene emulerte aldri
   `pointer: coarse`, så laget sto umålt. Det gjør de nå. */
@media (pointer: coarse) {
  .np-mini-btn {
    min-height: 44px;
  }
}

/* ── 3 · Merk: de tre øvrige rettelsene bor IKKE her ────────────────────
   `.np-seg`, `.np-sx-perioder` og `.np-oppf-handling` ble først skrevet i
   denne fila og BET IKKE. Arket lastes som nr. 2 av seks (index.html:23),
   før de fire `stil-*.css`, så en regel her taper mot en regel med samme
   spesifisitet der — stille, slik kaskaden alltid taper stille.
   De tre står nå i sine egne ark, som er der de hørte hjemme uansett:
   denne fila er for det som ikke HAR et eget ark. `.np-navknapp` og
   `.np-mini-btn` over bor i panel.css, som regenereres av
   legg_om_palett.py og derfor ikke kan redigeres. */

/* På berøring løfter huset sine kontroller til 44 px (panel.css:1353).
   Avkrysningsetikettene sto igjen på 24 — nok for AA, men trangt for en
   tommel, og ute av takt med hver annen kontroll på samme skjerm.
   `:has()` og ikke den brede etikettvelgeren: den treffer også etiketter
   OVER et tekstfelt, og 44 px på hver av dem ville blåst opp skjemaene på
   telefon. Her skal bare den som ER en trykkflate vokse.
   Faller `:has()` bort i en eldre nettleser, står de 24 px som over —
   fortsatt innenfor kravet, bare mindre romslig. */
@media (pointer: coarse) {
  .np-skjema label:has(input[type="checkbox"]),
  .np-innst-innhold label:has(input[type="checkbox"]) {
    min-height: 44px;
  }
}

/* ── TRYKKFLATEHØYDE PÅ NOE INGEN TRYKKER PÅ ────────────────────────────
   Husets berøringsblokk (panel.css:1353) løfter `.np-pill` til 44 px
   sammen med de ekte kontrollene. I det EKTE panelet er det riktig: der
   finnes `.np-pill.knapp`, en pille man trykker på.
   I demoen finnes den varianten ikke i en eneste js-fil. Alle tre
   bruksstedene er `<span>`: «Demodata», «Databasen svarer ikke» og
   «Oppdatert {tid}» (del-topp.js:119–125). Tre rene etiketter fikk
   dermed 44 px høyde på telefon, og topplinja ble 44 px høy for å bære
   dem — 14 px av den skjermen der plassen er knappest, brukt på
   demomerket.
   `:not(.knapp)` og ikke en fjerning av regelen: kommer den trykkbare
   varianten inn senere, skal den fortsatt løftes. */
@media (pointer: coarse) {
  .np-pill:not(.knapp) {
    min-height: 0;
  }
}


/* ── KONTROLLER HUSETS 44px-LISTE ALDRI FIKK MED SEG ────────────────────
 *
 * `panel.css:1353` løfter sju navngitte klasser til 44 px på berøring.
 * Lista er arvet fra det ekte panelet, og demoen har kontroller det panelet
 * ikke har — de har stått utenfor hele tiden. Målt på 390 px med ekte
 * `pointer: coarse`:
 *
 *   .np-navvalg              37 px   hovednavigasjonen, mest trykte element
 *   .np-btn (uten .liten)    41 px   bunnlenkene «Tilbake til demo» m.fl.
 *   .np-oppf-filterknapp     37 px   se stil-oppfolging.css
 *   .np-sx-perioder button   35 px   se stil-statistikk.css
 *   .np-sx-tabell summary    35 px   se stil-statistikk.css
 *   .np-innst-fane           40 px   se stil-innstillinger.css
 *   .np-seg-knapp            33 px   se stil-innstillinger.css, minst i huset
 *
 * Alle er over WCAG 2.2 § 2.5.8 sitt gulv på 24, så ingen av dem er et
 * BRUDD. Det som var galt er at kalenderskjermen var 44 hele veien mens
 * Innstillinger var 33/34/36/40 — to ulike svar på samme spørsmål, i samme
 * produkt, og forskjellen kjennes med tommelen uten at man ser hvorfor.
 *
 * Hver regel står i det arket klassen bor i, ikke her: dette arket lastes
 * nr. 2 av seks og taper mot de fire `stil-*.css` ved lik spesifisitet.
 * Her står bare de to som ikke HAR et eget ark.
 */
@media (pointer: coarse) {
  .np-navvalg {
    min-height: 44px;
  }
  /* `.np-btn.liten` står i husets liste, full `.np-btn` gjør ikke — så den
     STORE knappen var lavere enn den lille. Regelen treffer også `.liten`,
     som alt er 44 fra en mer spesifikk regel; ingen konflikt. */
  .np-btn {
    min-height: 44px;
  }
}


/* ── REDUSERT BEVEGELSE, DEN HALVDELEN SOM MANGLET ──────────────────────
   `panel.css:1231` slår av `transition` på `.np-root *`. Universalselektoren
   matcher ELEMENTER, ikke pseudoelementer — det er ikke en detalj, det er
   hvordan CSS er definert.
   `.np-meny-bryter::after` er knotten i bryteren, og den har `transition:
   transform 120ms ease, background 120ms ease` (linje 386). Den fortsatte
   altså å gli for en bruker som har bedt systemet om å la være. Én bryter,
   men den som ber om roligere bevegelse har som regel en grunn.
   `!important` for å matche formen i kilden — sperra må vinne over en hvilken
   som helst regel den slår av. */
@media (prefers-reduced-motion: reduce) {
  .np-root *::before,
  .np-root *::after {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   DEN VISUELLE SVEIPEN 21.09.2026
   Ti bredder (320 · 360 · 375 · 390 · 430 · 768 · 1024 · 1280 · 1440 ·
   1920) × 23 tilstander, målt med ekte `pointer: coarse` under 768 px.
   Alt under følger av et tall i kommentaren; ingenting er smak alene.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TEKSTFELTENE VAR 2 PX LAVERE ENN HVER ANDRE KONTROLL ───────────
 *
 * Husets berøringsblokk (panel.css:1353) løfter sju klasser til 44 px, og
 * de to blokkene lenger opp i denne fila løfter fem til. `.np-felt` sto
 * utenfor begge lister.
 *
 * MÅLT på 390 px med berøring, ansattfanen: navnefeltet 189×42 rett ved
 * siden av fargeknappen 28×44, og «Fornavn Etternavn» 312×42 rett over
 * «Legg til» 92×44. Det samme i bookingskjemaet, i søket og i
 * kommandolinja — ti felt i alt, alle 42, alle med en 44 px nabo.
 *
 * To piksler høres ut som ingenting. Det er nettopp derfor det ser galt ut
 * uten at man finner ut hvorfor: raden er ikke skjev nok til å lese som en
 * feil, bare nok til å lese som slurv. Feltet er en kontroll og skal ha
 * kontrollhøyden.
 *
 * `min-height` og ikke `padding`: polstringa er 10 px og gir teksten sin
 * plass; høyden skal komme utenpå den, ikke i stedet for.
 *
 * OG DEN GJELDER ALLE PEKERE, ikke bare berøring. `.np-felt` setter ingen
 * høyde i det hele tatt, så høyden faller ut av nettleserens egen
 * gjengivelse per felttype. MÅLT på 1440 px i «Ny time»:
 *
 *   input[type=text|tel|email|number|search]   42 px
 *   select og input[type=date]                 44 px
 *
 * Samme klasse, samme rolle, to høyder — og de står side om side i samme
 * rad: «Dato» (44) ved siden av «Fra» (44) er greit, men «Navn» (42) rett
 * under dem er det ikke, og «Ansatt» (44) ved siden av «Varighet» (42) er
 * det heller ikke. Det er ikke en mobilfeil; den har stått på skrivebordet
 * hele tiden.
 * 44 og ikke 42: det er den høyden feltene ALT har på berøring, og det er
 * tallet huset bruker for en kontroll man skal treffe. */
.np-root .np-felt {
  min-height: 44px;
}

/* ── 2 · «KOMMENDE TIMER» VAR 32 PX HØY PÅ TELEFON ──────────────────────
 *
 * `.np-finn-bryter` (panel.css:1485) har `padding: 0` og henter høyden sin
 * fra teksten. MÅLT 229×32 på berøring, i alle tolv kalendertilstandene.
 * Den åpner og lukker hele søkeseksjonen — det er ikke en lenke i en
 * setning, det er seksjonens egen bryter, og den er det eneste elementet
 * i den seksjonen man trykker på. */
@media (pointer: coarse) {
  .np-root .np-finn-bryter {
    min-height: 44px;
  }
}

/* ── 3 · DAGSTRIPA: SJU KNAPPER KLEMT MOT VENSTRE KANT ──────────────────
 *
 * `.np-dagknapp` er `flex: 0 0 auto` med `min-width: 52px`. Det er riktig
 * på en telefon, der stripa ruller. Det er feil på alt over.
 *
 * MÅLT: sju knapper er 400 px inkludert mellomrom. På 768 px er stripa
 * 728 px — 328 px står tomme til høyre, og uka ser ut som en liste som
 * ikke ble ferdig. Stripa vises fra 0 til 899 px (over det tar rutenettet
 * over), så halve spennet den lever i, lever den feil.
 *
 * `flex: 1 1 auto` lar knappene vokse ut i raden når det er plass og
 * krympe til `min-width: 52px` når det ikke er det. Under 430 px er summen
 * fortsatt større enn stripa, så den ruller akkurat som før — MÅLT 400 mot
 * 350 px på 390, altså samme sideblikk på knapp nummer sju som før.
 *
 * ── og sjuende dag sto 22 px LAVERE enn de seks andre.
 * Knappen har tre barn: ukedag, dato og et antallsmerke. Merket tegnes
 * ikke når dagen har null timer (del-dagliste.js:—), og søndag er stengt.
 * En `<button>` sentrerer innholdet sitt loddrett når den er høyere enn
 * det, og alle sju er like høye fordi flex strekker dem. Følgen: «MAN» sto
 * øverst i sin knapp mens «SØN» sto midt i sin. Ukedagene lå ikke på linje,
 * og det er den slags skjevhet man ser uten å kunne peke på den.
 * Kolonneflex med `justify-content: flex-start` legger innholdet fra
 * toppen i alle sju, med eller uten merke. */
.np-dagknapp {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* ── 4 · PLASSHOLDERE BLE KAPPET MIDT I ET ORD ──────────────────────────
 *
 * MÅLT på 320–430 px: kommandolinjas plassholder krever 375 px og fikk
 * 254–364, søkefeltets krever 260 og fikk 192–247. Nettleseren klipper i
 * kanten uten tegn, så teksten endte «…eller et sp» og «…eller tjenes».
 * Et avkuttet ord leser som en feil i siden, ikke som en tekst det ikke
 * var plass til.
 *
 * `text-overflow: ellipsis` gjelder også plassholderen, og da ender
 * setningen på «…» — som er det tegnet som betyr nettopp «her er det mer».
 * Teksten selv røres ikke: den er den samme på alle bredder, og på en
 * skjerm som har plass står den fortsatt hel. */
.np-root .np-felt {
  text-overflow: ellipsis;
}

/* ── 5 · «FJERN» LÅ ALENE OG VENSTRESTILT MED 259 PX TOMT VED SIDEN AV ──
 *
 * Ansattraden er én lang flex-rad med ti kontroller som brekker der de må.
 * MÅLT på 390 px: rad 3 ble «Vis arbeidstid · Tjenester · ↑ · ↓» = 277 av
 * 312 px, og «Fjern» (53 px) fikk ikke plass og falt ned alene.
 *
 * Å fylle raden ut med `flex: 1 1 auto` slik styrelinja gjør, er feil her:
 * det ville gitt en 312 px bred «Fjern» tvers over kortet, og den er den
 * ene destruktive handlinga på skjermen. En fareknapp skal ikke være den
 * bredeste flata i et kort.
 *
 * `margin-left: auto` gir motsatt svar: den blir stående der den havnet,
 * men presses til høyre kant. Da leser raden som «rutinehandlingene til
 * venstre, det man gjør én gang helt til høyre» i stedet for som en linje
 * som ikke ble ferdig. Havner den likevel på samme rad som naboene (bredt
 * nok kort), skyver den seg til kanten der — samme betydning, samme form.
 *
 * Velgeren er `data-nb` og ikke en klasse: raden bygges med en inline-stil
 * uten klassenavn (del-ansatte.js:279), og `ansatte:fjern` finnes nøyaktig
 * én gang per rad. Fraværschipsens «Fjern» heter `ansatte:slett-fravar` og
 * røres ikke — den har alt sin egen plass ytterst i sin egen rad.
 *
 * Bare under 900 px: over det er kortet bredt nok til at hele rada står på
 * én linje, og da skal «Fjern» stå der den står, ikke 300 px unna. */
@media (max-width: 899px) {
  .np-root [data-nb="ansatte:fjern"] {
    margin-left: auto;
  }
}

/* ── 6 · TOPPLINJA HADDE SKRIVEBORDETS LUFT PÅ EN TELEFON ───────────────
 *
 * `.np-topbar` har `padding: 18px 0` og `gap: 14px` (panel.css:145) på
 * alle bredder. På 1440 px er det tre ting på én rad og 113 px i alt — helt
 * riktig. På 390 px er det tre rader, og da telles de samme tallene fire
 * ganger: 36 px polstring + 2 × 14 px mellomrom = 64 px av en topplinje på
 * 271, før noe innhold i det hele tatt.
 *
 * MÅLT: første innhold på kalenderskjermen begynte 560 px ned på siden.
 * På en iPhone SE (375 × 667) er det 84 % av skjermen, på en 320 × 568 er
 * det 102 % — man måtte rulle FØR man så én eneste time.
 *
 * 14/10 i stedet for 18/14 tar 16 px, og det er nettopp den slags luft som
 * er riktig når rammen er bred og feil når den er smal. Under kravet til
 * trykkflater kommer vi ikke: mellomrommet mellom to rader er ikke selve
 * flata, og alle kontrollene står fortsatt på 44 px. */
@media (max-width: 519px) {
  .np-topbar {
    padding: 14px 0;
    gap: 10px;
  }
}

/* ── 7 · SKJEMAENE: FELTENE I EN RAD STO IKKE PÅ SAMME LINJE ────────────
 *
 * `.np-felt-rad` er en flex-rad av `<label>`-er som hver inneholder en
 * etikett og et felt. Rada strekker barna til lik høyde (`align-items` er
 * `stretch` som standard), men INNHOLDET i hvert barn blir stående øverst.
 *
 * MÅLT på 390 px i «Ny time»: «ANSATT» er én linje og «VARIGHET (VALGFRI)»
 * to. Begge etikettboksene ble 88 px høye, men feltet under «Ansatt» sto
 * 20 px høyere enn feltet under «Varighet». To felt ved siden av hverandre,
 * på hver sin høyde, uten at noe i skjemaet forklarer hvorfor.
 *
 * `flex-end` i stedet for `stretch`: boksene får sin egen høyde og stilles
 * opp etter UNDERKANTEN. Feltet er siste barn i hver av dem, så da står
 * feltene på linje uansett hvor mange linjer etiketten tok. Det er samme
 * regel et papirskjema følger — linja er der man skriver, ikke der
 * ledeteksten begynner. */
.np-felt-rad {
  align-items: flex-end;
}

/* ── 8 · «Hvem som helst» KUNNE IKKE LESES PÅ NOEN SKJERM ───────────────
 *
 * `.np-lab.smal` er `flex: 0 1 140px` (panel.css:1032) — ett tall for fire
 * ulike felt. MÅLT på 390, 768 OG 1440 px: ansattvelgeren har 92 px
 * innvendig plass og trenger 121 for standardvalget sitt. Den sto altså
 * «Hvem so…» i hver eneste bredde, på skrivebordet like mye som på telefon.
 * Dette er ikke en responsivitetsfeil — det er et felt som aldri har vært
 * bredt nok, og som ingen bredde kunne redde.
 *
 * 170 px er regnet, ikke valgt: 121 px tekst + 24 px polstring + 22 px
 * pil + 2 px ramme + 1 px slark (168 traff nøyaktig 120 mot 121 og klippet
 * med én piksel — nettopp den slags treff som ser ut som en tilfeldighet). Samme tall for alle fire kompaktfeltene, så de leser
 * som ÉN feltstørrelse i stedet for fire tilfeldige. De tre andre trenger
 * 114, 92 og 98 px og får dermed litt slakk — det er riktig vei å ta feil.
 *
 * MÅLT etter: raden på 1440 px fyller 1242 px nøyaktig (bred-feltet tar
 * resten), og ingen av de fire klipper i noen av de ti breddene. */
.np-lab.smal {
  flex: 0 1 170px;
}

/* PÅ TELEFON DELES RADEN ETTER BEHOV, IKKE I TO LIKE HALVDELER.
 * Under 560 px får det ikke plass fire kompaktfelt på en rad uansett, så de
 * står to og to — og da skal de to fylle rada ut. MÅLT før: «Dato» og «Fra»
 * sto 292 px i en rad på 312, altså 20 px kortere enn feltene over og under
 * dem. En kant som nesten stemmer ser mer uferdig ut enn en som åpenbart
 * ikke gjør det.
 * 62/38 og ikke 50/50 på ansattraden: ansattvelgeren trenger 170 px for
 * teksten sin og naboen «Varighet» trenger 98. Like halvdeler ville gitt
 * begge 150 og klippet den ene mens den andre hadde 52 px til overs.
 * Forholdet er MÅLT på den smaleste bredden det skal holde på, ikke gjettet:
 * kortets innhold er 282 px på en 360 px skjerm, og 62 % av det er 169 —
 * nøyaktig de 121 px tekst pluss polstring, pil og ramme. 58 % ga 158 og
 * klippet med elleve piksler på nettopp den skjermen.
 * MÅLT etter, innvendig plass mot de 121 som trengs: 320 px → 96 (klipper
 * fortsatt), 360 → 121, 375 → 130, 390 → 139, 430 → 180. 320 px er den ene
 * bredden der to felt på rad ikke kan bære teksten, og der veier en ekstra
 * rad tyngre enn tre bokstaver. */
@media (max-width: 560px) {
  .np-felt-rad > .np-lab.smal {
    flex: 1 1 calc(50% - 6px);
  }
  .np-felt-rad > .np-lab.smal:has(select[data-felt="ansattId"]) {
    flex-basis: calc(62% - 6px);
  }
  .np-felt-rad > .np-lab.smal:has(select[data-felt="ansattId"]) + .np-lab.smal {
    flex-basis: calc(38% - 6px);
  }
}

/* ── 9 · TO FELT SOM VOKSTE UT AV ALL PROPORSJON PÅ STORE SKJERMER ──────
 *
 * MÅLT på 1920 px (innholdet er da 1280 px bredt):
 *
 *   notatfeltet i «Ny time»        1242 px for én linje fritekst
 *   «Legg til ansatt»-feltet        908 px for «Fornavn Etternavn»
 *
 * Ingen av dem er en feil i layouten — begge er det flex gjør når et felt
 * står alene på en rad uten tak. Men et tekstfelt som er tre ganger så
 * bredt som den lengste teksten noen skriver i det, leser som at siden ikke
 * vet hva feltet er til. Det er den samme observasjonen som ligger bak
 * `.np-finn-felt { max-width: 380px }` i panel.css:1516 — huset har alt
 * bestemt at et enlinjes tekstfelt ikke skal være bredere enn det.
 *
 * 380 px for navnefeltet er nettopp det tallet, gjenbrukt.
 * 720 px for notatet er et annet slags tak: notatet kan faktisk være langt,
 * og 720 px er ~70 tegn på 16 px — linjelengden man leser uten å miste
 * linja. Feltet er fortsatt det bredeste i skjemaet, bare ikke dobbelt så
 * bredt som alt annet.
 *
 * Kommandolinja er BEVISST utenfor: den spenner 1280 px fordi den ligger
 * rett over rutenettet og deler kant med det. Der er bredden en justering
 * mot naboen, ikke en tilfeldighet. */
.np-root input.np-felt[data-felt="notat"] {
  max-width: 720px;
}
.np-root [data-nb-send="ansatte:ny"] .np-lab {
  max-width: 380px;
}

/* ── 10 · BREDDENE MÅ FØLGE TEKSTSTØRRELSEN, IKKE BARE SKJERMEN ─────────
 *
 * Punkt 8 over ga kompaktfeltene 170 px — regnet på «Hvem som helst» ved
 * NORMAL tekst. Demoen har tre tekststørrelser, og de to andre ble aldri
 * målt mot det tallet. MÅLT etterpå:
 *
 *   tekst     «Hvem som helst»   innvendig plass   dom
 *   normal        121 px              122          går inn
 *   stor          136 px              122          KLIPPES
 *   størst        152 px              122          KLIPPES
 *
 * Det er samme feil som 170-tallet selv rettet, bare en etasje opp: en
 * bredde satt etter ÉN måling holder bare for den målinga. Og den slo inn
 * på 1440 px like mye som på 320 — en kunde som skrur opp teksten på en
 * stor skjerm fikk «Hvem som hels…» der det var 500 px ledig ved siden av.
 *
 * `min-width` og ikke en større `flex-basis`: gulvet skal bare gjelde når
 * teksten faktisk krever det. Blir gulvet høyere enn det raden har plass
 * til, brekker naboen ned på egen linje av seg selv — flex gjør det uten at
 * noen mediespørring må vite om det. MÅLT: på 320 px og normal tekst flytter
 * «Varighet» ned og ansattfeltet blir 242 px, som er den ene bredden punkt 8
 * ikke klarte å redde. På 390 px og normal tekst rører gulvet ingenting.
 *
 * Datofeltet har samme sak i det små: «2026-09-21» krever 101 px ved stor
 * tekst og hadde 89 på 320 px. 118 px er feltets eget behov ved normal
 * tekst (90 px tekst + 26 px polstring, ramme og kalenderikon), og ganget
 * med skalaen følger det med oppover. */
.np-felt-rad > .np-lab.smal:has(select[data-felt="ansattId"]) {
  min-width: calc(170px * var(--np-skala));
}
.np-felt-rad > .np-lab.smal:has(input[type="date"]) {
  min-width: calc(118px * var(--np-skala));
}

/* ── 11 · KNAPPERADENE BRAKK 4 + 1 PÅ DE VANLIGSTE TELEFONENE ───────────
 *
 * `.np-knapper` (panel.css:—) er en naken `flex-wrap: wrap` uten noe som
 * sier hva som skal skje NÅR den brekker. Det finnes tre av dem i demoen,
 * og alle tre brekker på en telefon. MÅLT:
 *
 *   detaljkortet   390 og 430 px   Flytt · Rediger · Avlys · Slett på rad 1,
 *                                  «Lukk» ALENE på rad 2 — 63 px av 312,
 *                                  venstrestilt, med 249 px tomt ved siden av
 *   detaljkortet   320 og 360 px   3 + 2
 *   footeren       320 og 360 px   «nordicops.no» alene på rad 2
 *   «Ny time»      320 px          hver knapp på sin egen rad
 *
 * Detaljkortet er det som betyr noe: det åpnes hver gang man trykker på en
 * time, altså oftere enn noe annet på skjermen, og 390 og 430 px er de to
 * vanligste telefonbreddene som finnes.
 *
 * Huset har svaret fra før, på naboraden: `.np-styre-knapper` fikk
 * `flex: 1 1 auto` på berøring (panel.css:1374) med begrunnelsen «to rader
 * som ser ut som et uhell» mot «to rader som ser bevisste ut». Samme grep
 * her.
 *
 * `1 1 auto` og ikke `1 1 0`: ordets egen bredde er gulvet, og den ledige
 * plassen deles likt OVENPÅ den. «Legg inn timen» blir da 180 px mot
 * «Avbryt» sine 122 — primærhandlinga beholder vekta si. Med like deler
 * ville de blitt like brede, og da sier formen at de er like viktige.
 *
 * Grensa 520 px er den samme som menylinja og styrelinja bruker. Over den
 * har alle tre radene plass på én linje uansett; da strekker knappene seg
 * ut i raden i stedet for å ligge klemt mot venstre kant med hundre piksler
 * tomt til høyre — og det er også en forbedring, ikke en bivirkning. */
@media (max-width: 519px) {
  .np-root .np-knapper > * {
    flex: 1 1 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANDRE RUNDE 21.09 — funn fra den statiske granskninga, etterprøvd i
   nettleseren før de ble rettet. Alt her er overstyringer av `panel.css`,
   som regenereres og derfor ikke kan redigeres.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ORDMERKET OG VERKSTEDSNAVNET HADDE SAMME STØRRELSE PÅ TELEFON ──────
 *
 * `.np-logo` står på `--np-t-xl` og `.np-brand` er hardkodet til 20 px
 * (panel.css:156). Over 620 px er stigen 22 mot 20, altså ett trinn. Under
 * 620 krymper `--np-t-xl` til nøyaktig 20 — og da er de to linjene like
 * store, like fete og rett over hverandre. MÅLT på 390 px: begge 20 px.
 * Merket leser ikke lenger som et merke; det leser som første halvdel av
 * verkstedsnavnet.
 * Egen verdi på `.np-logo` i stedet for å røre stigen: `--np-t-xl` er
 * skjermtitlenes trinn og skal krympe på telefon. Ordmerket er ikke en
 * skjermtittel. */
.np-root .np-logo {
  font-size: calc(22px * var(--np-skala));
}

/* ── «KOMMENDE TIMER» VAR MINDRE ENN TALLENE UNDER SEG ──────────────────
 *
 * MÅLT: `.np-finn-hode h2` 18,5 px i Inter, mens datotallet inne i hver
 * treffrad under den (`.np-finn-dato b`, panel.css:1562) er 20 px. Et
 * seksjonshode som er mindre enn innholdet sitt snur hierarkiet, og det er
 * dessuten det eneste levende h2-et i demoen som ikke står i skriftsnittet
 * for overskrifter. */
.np-root .np-finn-hode h2 {
  font-family: var(--np-font-display);
  font-size: var(--np-t-lg);
}
.np-root .np-finn-dato b {
  font-size: var(--np-t-md);
}

/* ── STENGT-ETIKETTEN I KOLONNEHODET BLE KUTTET MIDT I EN BOKSTAVRAD ────
 *
 * Kolonnehodet har låst høyde og `overflow: hidden` (del-rutenett.js:211).
 * `.np-kh-stengt` (panel.css:354) er `width: 100%` uten brytekontroll, så
 * et langt helligdagsnavn går til to linjer og linje to blir klippet på
 * midten av bokstavene. Én linje med ellipse sier «det står mer» i stedet
 * for å se ut som en gjengivelsesfeil; hele navnet står i `title`. */
.np-root .np-kh-stengt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── FOKUSRINGA PÅ TEKSTSTØRRELSE-KNAPPENE BLE KLIPPET BORT ─────────────
 *
 * `.np-tekstvelger` har `overflow: hidden` (panel.css:1402) for å runde
 * hjørnene på de tre A-knappene. Følgen er at fokusringa — `outline` med
 * `outline-offset: 2px` — klippes på den første og den siste. Demoen har
 * selv skrevet ned nøyaktig denne diagnosen for tvillingkontrollen sin
 * (stil-innstillinger.css:180: «Ingen `overflow: hidden` her, som i
 * `.np-tekstvelger`: den klipper fokusringa») og rettet den der, men lot
 * originalen stå. Samme rettelse her: hjørnene flyttes til knappene, og
 * beholderen slipper å klippe. */
.np-root .np-tekstvelger {
  overflow: visible;
}
.np-root .np-tv-knapp:first-child {
  border-radius: var(--r-btn) 0 0 var(--r-btn);
}
.np-root .np-tv-knapp:last-child {
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}

/* ── MENYRADENE ARVET STYRELINJAS BERØRINGSPOLSTRING ────────────────────
 *
 * `.np-styre-knapper button` (panel.css:1377) er skrevet for de to knappene
 * i styrelinja, men `.np-meny` ligger inne i `.np-meny-boks` inne i
 * `.np-styre-knapper` — så etterkommerselektoren treffer også de fem
 * menyradene. På berøring får de dermed `white-space: nowrap` og
 * `padding: 12px` beregnet for en knapp, ikke for en menyrad med etikett
 * og hurtigtast. Radene er brede nok til at nowrap ikke klipper i dag, men
 * regelen er en lekkasje: den gjelder noe den ikke ble skrevet for. */
@media (pointer: coarse) {
  .np-root .np-meny .np-meny-rad {
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
  }
}

/* ── `.np-mini-btn` ER FLEX, OG DA ER MARG FEIL VERKTØY ─────────────────
 *
 * `.np-mini-btn .np-kip { margin-left: 6px }` ble skrevet med begrunnelsen
 * «klassen har verken flex eller gap». Det stemte ikke da regelen ble
 * skrevet: `.np-mini-btn` fikk `display: inline-flex` lenger opp i denne
 * fila. Marg og gap gir samme avstand her, men gap er det
 * layoutmodellen faktisk bruker — og det virker også for prikken foran
 * teksten i «Hvem»-pilla, som marga aldri rørte. */
.np-root .np-mini-btn {
  gap: 6px;
}

/* ── 12 · PILLERADEN KOSTET EN HEL RAD I TELEFONTOPPEN ──────────────────
 *
 * `.np-top-right` bærer to opplysninger — «Demodata» og «Oppdatert 08:27» —
 * og hadde sin EGEN rad på alt under 470 px. MÅLT: 32 px pluss 10 px
 * mellomrom = 42 px av en topplinje på 257, brukt på to etiketter ingen
 * trykker på.
 *
 * Regnestykket for hvorfor den falt ned (alt målt, ikke anslått):
 *
 *   merket                     165 px
 *   mellomrom                   10 px
 *   «Demodata»                  91 px
 *   mellomrom                   10 px
 *   «Oppdatert 08:27»          131 px
 *   ────────────────────────────────
 *   hele raden                 407 px   →  får plass først fra 470 px vindu
 *
 * Men pillene MÅ ikke stå ved siden av hverandre. Legger de seg under
 * hverandre, trenger gruppa bare bredden til den bredeste:
 *
 *   merket + mellomrom + 131   306 px   →  får plass fra 360 px vindu
 *
 * Og da er gruppa 74 px høy (32 + 10 + 32) mot merkets 77 — den går inn i
 * høyden som alt er der. Raden forsvinner uten at en eneste opplysning
 * gjør det.
 *
 * `flex-basis` er hele mekanikken — og det MÅTTE være basis, ikke
 * `min-width`. Første forsøk satte `min-width: 131px` og endret ingenting:
 * med `flex-wrap: wrap` deler flex opp i linjer FØR den krymper noe, og et
 * element som ikke får plass flyttes ned i stedet for å bli smalere. Målt
 * etter det forsøket sto gruppa fortsatt 232 px bred på egen rad i alle
 * breddene. Basis er tallet linjedelinga faktisk regner med: settes den til
 * den bredeste PILLA i stedet for til summen av begge, får gruppa plass på
 * rad én, og `flex-grow` fyller ut resten av plassen som er igjen.
 * Og den lar flex bestemme selv: når merket pluss basisen ikke får plass —
 * 320 px, eller en smal skjerm med største tekst — brekker gruppa ned på
 * egen rad akkurat som før. Ingen mediespørring vet om dette; den regner
 * seg fram til det ved hver bredde og hver tekststørrelse.
 *
 * `* var(--np-skala)` fordi pilleteksten skalerer: «Oppdatert 08:27» er
 * 131 px ved normal tekst og 164 ved største, og et fast gulv ville låst
 * gruppa for smal og brukket teksten inne i pilla i stedet.
 *
 * `justify-content: flex-end`: når de to legger seg under hverandre, er de
 * ulikt brede (91 mot 131). Venstrestilt ville gitt en ragget høyrekant mot
 * topplinjas egen kant. Høyrestilt står de i flukt med kanten de hører til.
 *
 * MÅLT etter, kalenderskjermen: topplinja 257 → 215 px på 360, 375, 390,
 * 430 og 470 px, og første time begynner 42 px høyere — 506 i stedet for
 * 548 på en 390 px skjerm. 320 px er uendret: der er det ikke plass, og da
 * skal raden fortsatt falle ned. Ved største tekst flytter grensa seg opp
 * av seg selv — 320–390 px blir stående som før, 430 og 470 vinner 47 px. */
/* Bare under 520 px. Over det ligger pillene alt på samme rad som merket,
   så regelen har ingenting å hente — og den koster: `flex-grow` lar gruppa
   sluke den ledige plassen i en topplinje som er `space-between`, og da
   flytter navigasjonen seg. MÅLT på 1024 px med største tekst ble
   topplinja 132 px i stedet for 113 og pillene brakk i to rader der de
   hadde plass på én. Grensa er den samme 520 px som resten av
   telefonrettelsene. */
@media (max-width: 519px) {
  .np-root .np-top-right {
    flex: 1 1 calc(131px * var(--np-skala));
    justify-content: flex-end;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   NETTLESERENS EGNE MARGER, SOM ALDRI SKULLE VÆRT HER
   Runden 22.09.2026
   ═══════════════════════════════════════════════════════════════════════

   `panel.css` er hentet ut av kontrollpanelet, og det panelet er en
   React-app som laster en global reset FØR arket sitt. Demoen laster arket
   alene. Følgen er at hvert `<h2>` og hvert `<p>` som arket ikke gir en
   eksplisitt marg, står igjen med nettleserens standard: 0,83em over og
   under en overskrift, 1em over og under et avsnitt.

   Det syns ikke som en feil — det syns som at noen har lagt inn litt ekstra
   luft ett sted og ikke et annet. MÅLT på 390 px, over fjorten tilstander,
   med signaturen «margen er nøyaktig 0,83em eller 1em av elementets egen
   `font-size»`:

     .np-dagkort-hode h2   15,36 px over OG under  («I dag» i daglista)
     .np-skjema-hode h2    15,36 px over OG under  («Ny time», «Gå til dato»,
                                                    «Hurtigtaster»)
     .np-skjema-hode p     13,50 px under          (undertittelen)
     .np-detalj-hode h2    18,26 px over OG under  (kundenavnet i timekortet)
     .np-detalj-hode p     14,50 px over OG under  (tid og varighet)
     .np-hint              13,50 px under          (fem steder)

   At det er UA-verdier og ikke valg, kan leses ut av arket selv: alle seks
   reglene setter `font-size`, `color` og i tre tilfeller `margin-top` — og
   ingen av dem setter `margin-bottom`. `.np-skjema-hode p` har
   `margin-top: 2px`, altså husets svar på «hvor tett skal undertittelen stå
   under tittelen». Ved siden av 13,5 px arvet luft under er de 2 pikslene
   over meningsløse.

   OG DET KOSTER PÅ TELEFONEN: `.np-dagkort-hode h2` legger 30 px rett over
   den første timeraden på kalenderskjermen — den ene raden hele denne runden
   handler om å få opp i første skjermhøyde.

   `margin-bottom: 0` og ikke `margin: 0` der arket HAR skrevet en
   `margin-top`: de 10, 6 og 2 pikslene er noens valg og skal stå.

   Footerens `<p>` står med vilje UTENFOR lista. Den har også 14 px arvet
   marg over og under, men der er den det eneste som skiller avsnittet fra
   knapperaden under — den ville altså vært en endring uten et målt problem,
   og en slik endring hører ikke hjemme i en runde som retter målte feil. */
.np-root .np-dagkort-hode h2,
.np-root .np-skjema-hode h2,
.np-root .np-detalj-hode h2,
.np-root .np-detalj-hode p {
  margin: 0;
}
.np-root .np-skjema-hode p,
.np-root .np-hint {
  margin-bottom: 0;
}


/* ── «Alle 8» BRAKK I TO LINJER MENS NABOENE STO PÅ ÉN ──────────────────
 *
 * Filterrada i daglista er `display: flex; overflow-x: auto` uten klasse
 * (del-dagliste.js skriver den med inline-stil). Baneknappene får
 * `white-space: nowrap` i den samme inline-stilen; «Alle {n}» får det ikke,
 * for den skrives et par linjer lenger opp og med en annen mal.
 *
 * Følgen er ikke at teksten klippes — den brekker. Et flex-barn kan krympes
 * helt ned til `min-content`, og for en boks som har lov til å bryte er
 * `min-content` det LENGSTE ORDET. MÅLT på 390 px: «Alle 8» sto 46 px bred
 * med innholdet fordelt på TO linjeboksar, mens «Marte Solvang 4» sto 135 px
 * på én. Den første knappen i rada var den eneste som brakk, og den så
 * dermed ut som en annen slags kontroll enn de tre ved siden av.
 *
 * `white-space: nowrap` løser det uten et eneste nytt mål: en boks som ikke
 * kan bryte har hele teksten som `min-content`, og da kan flex ikke klemme
 * den under den bredden. Rada ruller allerede sidelengs, så plassen finnes.
 *
 * Regelen skrives HER og ikke som en femte inline-stil i del-dagliste.js:
 * fila eies av en annen i denne runden, og `.np-dagkort .np-mini-btn` er
 * dessuten den scopinga arket allerede bruker for papirreglene sine. */
.np-dagkort .np-mini-btn {
  white-space: nowrap;
}


/* ── UKE/DAG-VELGEREN SKJULES UNDER 900 px (22.09.2026) ──────────────────
   Begrunnelsen i sin helhet står i del-styre.js, over markupen. Kort: under
   900 px velger ARKET dagliste framfor rutenett, og de to knappene er da
   MÅLT inerte — identisk dokumenthøyde i begge tilstander, og
   `.np-rutenett-boks` display:none i begge.

   900 px og ikke 899,98: grensa er DEN SAMME som arket bruker til å bytte
   mellom rutenett og dagliste, og den står i panel.css. Skrives den som et
   annet tall her, oppstår et bånd der knappene finnes uten å virke — og det
   er nettopp båndet regelen skal fjerne. To grenser som beskriver det samme
   glir fra hverandre; denne må følge den andre hvis den flyttes.

   `display: contents` og ikke `display: inline-flex` over 900: beholderen
   skal ikke innføre en ny flexkontekst i styrelinja, som regner
   knappebredder og gap selv. Med `contents` er de to knappene fortsatt
   direkte flexbarn av raden, og all eksisterende geometri står urørt. */
.np-visningsvalg { display: contents; }

@media (max-width: 899.98px) {
  .np-visningsvalg { display: none; }
}

/* ── TIMERADA BREKKER FØR INNHOLDET KOLLAPSER (22.09.2026) ───────────────
   MÅLT med qa8 og reprodusert for hånd på 260 px (= 390 px ved 150 %
   nettleserzoom, som er en helt vanlig innstilling hos den som ser dårlig):

     rad 186 = tid 62 + gap 12 + hva 24 + gap 12 + status 76

   `.np-dr-tid` har fast bredde og `.np-status` har `flex-shrink: 0`, så
   `.np-dr-hva` er den ENESTE som kan krympe — og den krympet til 24 px med
   et jobbmerke på 49 px inni. Merket rant 25 px ut av spalta si, og navnet
   og tjenesten sto på hver sin bokstav. qa8 meldte det på 7 av 12 ruter;
   `.np-status` rant 3 px ut av samme grunn og ble meldt før jobbmerket kom.

   Rettelsen er et GULV, ikke en skjuling: får innholdsspalta ikke plass til
   merket sitt, skal raden brekke og statuspilla falle ned på egen linje.
   Gulvet ganges med `--np-skala`, fordi merket vokser med teksten — 49 px
   ved normal, målt 61 ved største. 62 px dekker begge.

   Regnestykket for når den brekker: 62 + 12 + 62 + 12 + 76 = 224 px kreves.
   Tilgjengelig radbredde er vindusbredden minus 74 px krom, så brekkpunktet
   er 298 px. Det ligger UNDER husets måltegnede gulv på 320 px, og
   320-oppsettet er derfor uendret — MÅLT: hva 84 px, ingen brekking, ingen
   overflyt. Under 298 brekker raden i stedet for å klemme innholdet bort. */
.np-dagrad { flex-wrap: wrap; }
.np-dagrad .np-dr-hva { min-width: calc(62px * var(--np-skala)); }