/* Oppfølgingsskjermen — arbeidskøen.
 *
 * Arket eier ingen nye farger. Paletten er husets, kortformen er husets, og
 * det ene som er nytt er TETTHETEN: en rad her er én linje arbeid, ikke et
 * kort med alt vi vet om kunden.
 *
 * MÅLT FØR OMBYGGINGA 25.09.2026, på 1 440 px: 40 rader à 178 px, tre rader
 * over folden, side 8 018 px. På 390 px: 325 px per rad, én rad over folden,
 * side 14 189 px. Hver rad bar navn, merke, bil, telefon, hele begrunnelsen,
 * bigrunnene, en lenke og fem knapper — alt i samme vekt. Det er ikke en
 * arbeidsliste, det er et arkiv med knapper på.
 *
 * DE FIRE KOLONNENE er skannerekkefølgen, og de er i den rekkefølgen et
 * spørsmål stilles: HVEM · HVORFOR · HVA GJØR JEG · HVA ER DET VERDT. Alt
 * annet — historikk, kontaktinfo, bigrunner, kommende behov, notat og
 * meldingsskriveren — bor i skuffen, ett trykk unna.
 *
 * MERKET kan ikke skilles på farge alene (WCAG 1.4.1): hvert merke bærer
 * ORDET sitt, og fargen er bare et ekko. Det samme gjelder prioriteten —
 * kanten til venstre har et ord ved siden av seg i skuffen, og rekkefølgen i
 * lista bærer den uansett.
 */

.np-oppf {
  margin: 6px 0 0;

  /* ÉN kilde for kolonnebreddene. Kolonnehodet og hver eneste rad leser
     den samme variabelen — to lister med hver sin `grid-template-columns`
     står i lodd akkurat til noen retter den ene. */
  --oppf-kol: minmax(0, 2.1fr) minmax(0, 1.15fr) minmax(0, 1.7fr) minmax(0, 0.75fr);
  --oppf-handling: 178px;
  --oppf-pad: 14px;
}

.np-oppf-hode {
  margin-bottom: 14px;
}
.np-oppf-hode h2 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-xl);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}
/* LEDEN ER ET TALL, IKKE EN BESKRIVELSE, og den er derfor større enn
   hjelpetekst ellers i huset. «Kunder som er verdt en telefon» sto her før og
   forklarte hva lista var; denne sier hvor mye arbeid som ligger foran deg.
   Det er den ene setningen man leser før man begynner. */
.np-oppf-hode p {
  margin: 5px 0 0;
  max-width: 74ch;
  font-size: var(--np-t-md);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

/* ── BUNKENE ─────────────────────────────────────────────────────────────
   Tallet ER navigasjonen. Fire flater med ett tall og ett ord hver, og de er
   samtidig skjermens eneste nøkkeltall — en egen rad med statistikk over en
   rad med faner ville sagt de samme fire tallene to ganger.

   `1fr` hver og ikke `auto`: fire like brede flater leser som fire like
   valg, og bredden hopper ikke når et tall går fra 9 til 10. */
.np-oppf-bunker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.np-oppf-bunke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 62px;
  padding: 9px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--navy2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.np-oppf-bunke:hover:not(.valgt) {
  border-color: var(--border-hover);
  background: var(--navy25);
}
/* DEN VALGTE ER IKKE FYLT MED IS.
   Husregelen er is-fyll på valgt tilstand, og den gjelder piller og knapper
   — små flater der fyllet er et merke. Her er flata 62 px høy og inneholder
   et 30 px tall; is-fyll over hele ville gjort den valgte fanen til det
   sterkeste elementet på skjermen, foran radene som er selve arbeidet.
   Løsninga er husets andre signal for «du står her»: is-kant og is-tall,
   samme grep som `.np-oppf-merke` bruker. */
.np-oppf-bunke.valgt {
  border-color: var(--ice);
  background: var(--ice-bg);
}
.np-oppf-bunke-tall {
  font-family: var(--np-font-display);
  font-size: var(--np-t-tall);
  font-weight: 700;
  line-height: var(--np-lh-tett);
  letter-spacing: var(--np-t-trakk-tett);
  font-variant-numeric: tabular-nums;
  color: var(--offwhite);
}
.np-oppf-bunke.valgt .np-oppf-bunke-tall {
  color: var(--ice);
}
.np-oppf-bunke-navn {
  font-size: var(--np-t-xs);
  font-weight: var(--v-halvfet);
  line-height: var(--np-lh-kort);
  color: var(--silver);
}
.np-oppf-bunke.valgt .np-oppf-bunke-navn {
  color: var(--offwhite);
}

/* ── VERKTØYLINJA ────────────────────────────────────────────────────────
   Søket står alltid; alt annet er bak «Filtrer». Standardvisninga skal være
   riktig uten at noen stiller på noe — de avanserte valgene finnes for de
   gangene den ikke er det, og en rad med fire nedtrekk man aldri rører, er
   fire ting å lese forbi hver morgen. */
.np-oppf-verktoy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.np-oppf-sok {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.np-oppf-sok input {
  width: 100%;
  padding-left: 38px;
}
/* Lupa sitter I feltet. `pointer-events: none` så et klikk på ikonet lander
   i feltet under og ikke på ingenting — det er der folk sikter. */
.np-oppf-sokikon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--silver);
  pointer-events: none;
}
.np-oppf-mer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--fill-subtle);
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  cursor: pointer;
}
.np-oppf-mer:hover {
  border-color: var(--border-hover);
  color: var(--offwhite);
}
.np-oppf-mer.valgt {
  border-color: var(--ice);
  color: var(--ice);
}
.np-oppf-mer .np-kip {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}
.np-oppf-mer .np-kip.foran {
  transform: rotate(180deg);
}

.np-oppf-avansert {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--fill-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
}
.np-oppf-valg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}
/* TAK PÅ NEDTREKKENE. Uten det ble de 600 px hver på 1440 px — to felter med
   fire og tre valg, like brede som halve skjermen. Et felt som er mye bredere
   enn det lengste svaret sitt, leser som om det venter på noe mer.
   `flex: 0 1 260px` og ikke `1 1`: de skal ikke vokse for å fylle raden. */
.np-oppf-valg .np-lab {
  flex: 0 1 260px;
  min-width: 0;
}

/* ── Sekundærfilteret på GRUNN ───────────────────────────────────────────
   Samme form som banefilteret i daglista. Tallet står PÅ pilla — et filter
   som ikke sier hvor mye det skjuler, er et filter man ikke tør trykke på. */
.np-oppf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.np-oppf-filterknapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--navy2);
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.np-oppf-filterknapp:hover:not(.valgt) {
  border-color: var(--border-hover);
  color: var(--offwhite);
}
/* Valgt er is-fyll med MØRK etikett — husregelen for fylte aksentflater.
   Her gjelder den, i motsetning til på bunkefanene over: pilla er 34 px høy
   og fyllet leser som et merke, ikke som en flate. */
.np-oppf-filterknapp.valgt {
  background: var(--ice-fyll);
  border-color: var(--ice-fyll);
  color: var(--navy);
  font-weight: 700;
}
.np-oppf-tall {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.np-oppf-filterknapp.valgt .np-oppf-tall {
  opacity: 0.6;
}
@media (pointer: coarse) {
  .np-oppf-filterknapp {
    min-height: 44px;
  }
}

/* ── ANGRELINJA ──────────────────────────────────────────────────────────
   «Ferdig» flyttet raden ut av køen. Uten denne linja er den eneste veien
   tilbake å laste sida på nytt, som samtidig kaster alt annet man har gjort.
   Den står ØVERST i lista og ikke som en tost i hjørnet: en melding som
   forsvinner av seg selv, forsvinner alltid akkurat før man rakk å lese den. */
.np-oppf-angre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
  padding: 9px 13px;
  background: var(--ice-bg);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-oppf-angre button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ice);
  text-decoration: underline;
  cursor: pointer;
}

/* ── KOLONNEHODET ────────────────────────────────────────────────────────
   Fire ord i versaler over lista. Det er `aria-hidden` med vilje: hver celle
   under er selvforklarende for en skjermleser (navnet er et navn, merket
   bærer ordet sitt), og fire ekstra ord foran hver av 25 rader er støy i en
   opplesning. Det er en VISUELL hjelp til å skanne, ikke struktur. */
.np-oppf-kolonnehode {
  display: grid;
  grid-template-columns: var(--oppf-kol) var(--oppf-handling);
  gap: 14px;
  padding: 0 var(--oppf-pad) 6px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
.np-oppf-kolonnehode > :nth-child(4) {
  text-align: right;
}

/* ── LISTA ───────────────────────────────────────────────────────────────
   INGEN `--elev-card`. Skyggen er laget for å løfte ETT kort fram fra flata;
   på 25 rader i strekk løfter den ingenting og blir 25 uskarpe kanter.
   Ramma alene skiller radene, og det holder på en liste man SKANNER.

   `gap: 0` med delelinjer i stedet for mellomrom: 25 rader à 10 px gap er
   250 px ren luft, og en tabell man skanner nedover leses raskere med en
   strek enn med et hopp. */
.np-oppf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy2);
}
.np-oppf-rad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--oppf-handling);
  align-items: center;
  gap: 14px;
  padding: 0 var(--oppf-pad) 0 0;
  border-top: 1px solid var(--border-faint);
  transition: background 0.12s ease;
}
.np-oppf-liste > .np-oppf-rad:first-child {
  border-top: 0;
}
.np-oppf-rad:hover {
  background: var(--navy25);
}
.np-oppf-rad.apen {
  background: var(--ice-bg);
}

/* PRIORITETEN ER EN KANT, IKKE ET MERKE.
   Her kunne stått en pille til på hver rad. Tre nivåer × 25 rader er 25
   ekstra ord som alle sier omtrent det samme som merket ved siden av, og
   rekkefølgen i lista bærer prioriteten uansett — den øverste raden ER den
   viktigste. Kanten er 3 px og leses i sidesynet mens man skanner navnene;
   ordet står i skuffen, for den som vil vite hvorfor.
   `venter` har INGEN kant, ikke en grå en: en grå strek på en grå kant er
   ikke et nivå, det er støy. */
.np-oppf-rad::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.np-oppf-rad[data-niva="haster"]::before {
  background: var(--ice);
}
.np-oppf-rad[data-niva="snart"]::before {
  background: rgba(125, 211, 252, 0.35);
}

/* HELE SKANNEFLATA ER ÉN KNAPP, og handlingene står UTENFOR den.
   En knapp inne i en knapp er ingen av delene for et skjermleserprogram, og
   et klikk på «Ring» ville dessuten åpnet skuffen i samme slengen. */
.np-oppf-aapne {
  display: grid;
  grid-template-columns: var(--oppf-kol);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 11px 0 11px var(--oppf-pad);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.np-oppf-hvem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* `text-overflow` og ikke bryting: raden skal ha samme høyde uansett hvor
   langt navnet er. Hele navnet står i skuffen. */
.np-oppf-navn,
.np-oppf-bil {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-oppf-navn {
  font-size: var(--np-t-md);
  font-weight: 700;
  line-height: var(--np-lh-kort);
  color: var(--white);
}
.np-oppf-bil {
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-kort);
  color: var(--silver);
}
.np-oppf-hvorfor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.np-oppf-alder {
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-kort);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-oppf-gjor {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* ANBEFALINGA ER DEN ANDRE TINGEN ØYET SKAL TREFFE, etter navnet. Den er
   offwhite og halvfet mot sølv rundt — samme vekt som navnet, men ikke hvit,
   så kolonne én fortsatt er den første. */
.np-oppf-anb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  line-height: var(--np-lh-kort);
  color: var(--offwhite);
}
/* Ledig tid er is: det er det ene på raden som er et TILBUD man kan gi i
   telefonen, og det eneste som kommer fra kalenderen og ikke fra historikken. */
.np-oppf-ledig {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-kort);
  color: var(--ice-tekst);
  font-variant-numeric: tabular-nums;
}
/* Tall man skal sammenligne nedover en liste må stå på samme sifferplass.
   `tabular-nums` alene holder ikke når «590 kr» og «4 290 kr» er venstrestilt. */
.np-oppf-verdi {
  text-align: right;
  font-size: var(--np-t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--silver);
  white-space: nowrap;
}

/* Merket. ORDET bærer betydningen; fargen er et ekko av den. To grupper:
   noe som krever svar (is), og noe som kan vente (sølv). */
.np-oppf-merke {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--fill-subtle);
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--silver);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* `vente` inn i is-gruppa, `frafall` bevisst utenfor. Gruppa er «krever
   svar», ikke «er viktig»: den som står på ventelista venter på et svar fra
   oss akkurat nå, mens et brutt mønster er en telefon man tar denne uka.
   Det er samme skille som HASTER trekker i del-oppfolging.js — to steder som
   sier det samme, og som derfor må si det likt. */
.np-oppf-merke.vente,
.np-oppf-merke.ubekreftet,
.np-oppf-merke.avbud {
  border-color: var(--ice);
  color: var(--ice);
}

/* ── HANDLINGENE PÅ RADEN ────────────────────────────────────────────────
   ÉN primærknapp og én tekstknapp. Den gamle raden hadde fem — Ring, Skriv
   melding, Legg inn time, Historikk, Ferdig — på hver eneste rad. Fem like
   knapper på 40 rader er 200 knapper, og da er ingen av dem et svar. */
.np-oppf-knapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.np-oppf-knapper > .np-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* «Ring» er en <a> fordi den ÅPNER TELEFONEN. Den arver knappeformen, men
   ikke understrekinga en lenke ellers har. */
.np-oppf-knapper a {
  text-decoration: none;
}
/* «Ferdig»/«Angre» er en tekstknapp. Den skjuler ikke noe og utfører ingen
   handling mot kunden — den flytter raden — og skal ikke se ut som de to
   andre. Samme form som `.np-hull-skjul`. */
.np-oppf-avfei {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--np-t-sm);
  color: var(--silver);
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
}
.np-oppf-avfei:hover {
  color: var(--offwhite);
  background: var(--fill-subtle);
}
@media (pointer: coarse) {
  .np-oppf-avfei {
    min-height: 44px;
  }
}

/* ── «HVA SKJEDDE?» ──────────────────────────────────────────────────────
   Tar handlingsplassen på raden man nettopp ringte fra — ikke en modal over
   hele skjermen for fire ord. Den kan hoppes over ved å trykke et annet sted;
   et spørsmål man MÅ svare på for å få jobbe videre, er et spørsmål folk
   lærer seg å svare feil på.

   Den bryter ut av handlingskolonnen på 178 px og legger seg over hele
   raden, fordi fire knapper ikke får plass der. `grid-column: 1 / -1` og
   ikke en egen rad i markupen: da måtte hver rad hatt en tom celle. */
.np-oppf-utfall {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px var(--oppf-pad) 11px;
  background: var(--fill-subtle);
  border-top: 1px solid var(--border-faint);
}
.np-oppf-utfall-sp {
  margin-right: 2px;
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
}
.np-oppf-utfall-knapp {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--navy2);
  font: inherit;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
  cursor: pointer;
  white-space: nowrap;
}
.np-oppf-utfall-knapp:hover {
  border-color: var(--ice);
  color: var(--ice);
}
@media (pointer: coarse) {
  .np-oppf-utfall-knapp {
    min-height: 44px;
  }
}

/* Kvitteringa. To små ord som bare står når de er sanne, og som alltid sier
   «i denne økta» — demoen lagrer ikke, og et merke som ser ut som det huskes
   er verre enn ingen merke. */
.np-oppf-skrevet {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 var(--oppf-pad) 9px calc(var(--oppf-pad) + 0px);
  font-size: var(--np-t-xs);
  color: var(--silver);
}

/* ── VIS FLERE ───────────────────────────────────────────────────────────
   Taket var en fotnote: «Viser 40 av 407.» De 367 andre fantes ikke noe sted,
   og man måtte gjette seg til et filter som traff dem. En kø man kan bla
   videre i er en kø man kan bli ferdig med. */
.np-oppf-flerknapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  background: var(--fill-subtle);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
  cursor: pointer;
}
.np-oppf-flerknapp:hover {
  border-color: var(--border-hover);
  background: var(--navy25);
}

/* ── LENKA TIL KUNDEREGISTERET ───────────────────────────────────────────
   Tekstknapp, ikke en tredje ramme. Den bor i skuffen nå. */
.np-oppf-lenke {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--np-t-sm);
  color: var(--ice-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.np-oppf-lenke:hover {
  color: var(--white);
}
@media (pointer: coarse) {
  .np-oppf-lenke {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SKUFFEN
   ════════════════════════════════════════════════════════════════════════
   Alt som ikke må stå på raden, står her. Den er en `<aside>` og ikke en
   `<dialog>`: verkstedet skal kunne se lista mens skuffen står åpen — man
   sammenligner den man har på tråden med den neste — og en modal som stenger
   resten av skjermen for å vise historikken til ÉN kunde, stenger nettopp
   det man jobber i.

   Bakteppet er derfor heller ikke et mørkleggingsteppe: det er en usynlig
   flate som fanger klikk utenfor, så skuffen lukkes der man intuitivt
   trykker. Uten farge, fordi lista bak SKAL være lesbar. */
.np-skuff-bak {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
  border: 0;
  cursor: default;
}
.np-skuff {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--navy2);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--elev-card);
  animation: np-skuff-inn 0.16s ease-out;
}
@keyframes np-skuff-inn {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.np-skuff-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-faint);
}
.np-skuff-topp h3 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}
.np-skuff-topp p {
  margin: 2px 0 0;
  font-size: var(--np-t-xs);
  color: var(--silver);
}
.np-skuff-lukk {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--fill-subtle);
  font: inherit;
  font-size: var(--np-t-sm);
  color: var(--silver);
  cursor: pointer;
}
.np-skuff-lukk:hover {
  border-color: var(--border-hover);
  color: var(--offwhite);
}
@media (pointer: coarse) {
  .np-skuff-lukk {
    min-height: 44px;
  }
}
/* `overscroll-behavior: contain` så et sveip forbi bunnen av skuffen ikke
   drar hele lista bak den med seg. */
.np-skuff-kropp {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px;
}
.np-skuff-bolk {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-faint);
}
.np-skuff-bolk:last-child {
  border-bottom: 0;
}
.np-skuff-bolk h4 {
  margin: 0 0 7px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
.np-skuff-bolk p {
  margin: 0;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}
/* ANBEFALINGSBOLKEN er den ene som ikke ser ut som de andre: den er hele
   grunnen til at skuffen åpnes, og den står derfor med en h4 i full
   skjermtittelstørrelse i stedet for en versaletikett. */
.np-skuff-anb h4 {
  margin: 6px 0 6px;
  font-family: var(--np-font-display);
  font-size: var(--np-t-lg);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  text-transform: none;
  color: var(--white);
}
.np-skuff-niva {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--silver);
}
.np-skuff-niva.haster {
  border-color: var(--ice);
  color: var(--ice);
}
.np-skuff-flere {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
.np-skuff-flere li {
  margin-top: 3px;
}
/* Fakta-lista: to spalter, etikett i sølv og verdi høyrestilt. Tre linjer
   man leser med øyet, ikke en setning man leser med hodet. */
.np-skuff-fakta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 12px 0 0;
  font-size: var(--np-t-sm);
}
.np-skuff-fakta dt {
  color: var(--silver);
}
.np-skuff-fakta dd {
  margin: 0;
  text-align: right;
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
.np-skuff-tlf {
  font-size: var(--np-t-md) !important;
  font-variant-numeric: tabular-nums;
}
/* MÅLT 86×19 px. WCAG 2.5.8 krever 24×24 for enhver peker, ikke bare for
   berøring — det er nøyaktig samme funn som tekststørrelsesknappene på 30×19
   i september, og det gjentok seg fordi `format.py` bare måler trykkflater
   under 600 px. En `inline-flex` med gulv er hele rettelsen; teksten står
   like stor. */
.np-skuff-tlf a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  text-decoration: none;
}
@media (pointer: coarse) {
  .np-skuff-tlf a {
    min-height: 44px;
  }
}
.np-skuff-tlf a:hover {
  text-decoration: underline;
}
.np-skuff-behov {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--np-t-sm);
}
.np-skuff-behov li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--offwhite);
}
.np-skuff-behov li span:last-child {
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.np-root .np-skuff-notat {
  min-height: 62px;
  resize: vertical;
}
/* Handlingene følger med når man ruller — det er der man er når man har lest
   ferdig. `env(safe-area-inset-bottom)` fordi skuffen går helt til kanten på
   en telefon med hjemmestripe. */
.np-skuff-bunn {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-strong);
  background: var(--navy25);
}
.np-skuff-bunn > * {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}
.np-skuff-bunn a {
  text-decoration: none;
}

/* ── KUNDEKORTET i skuffen ───────────────────────────────────────────────
   Uendret form fra da det foldet seg ut under raden. `--fill-subtle` og ikke
   `--navy2`: skuffen er alt `--navy2`, og et kort i samme farge ville flytt
   sammen med den. */
.np-oppf-kort {
  padding: 10px 12px;
  background: var(--fill-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-btn);
}
.np-oppf-kort-sum {
  margin: 0 0 8px;
  font-size: var(--np-t-xs) !important;
  color: var(--silver) !important;
  font-variant-numeric: tabular-nums;
}
.np-oppf-kort-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Tre spalter: dato · tjeneste · pris. Datoen har fast bredde så kolonnen
   står i lodd nedover, og prisen er høyrestilt med tabulærtall av samme
   grunn — en liste med beløp man skal kunne summere med øyet. */
.np-oppf-kort-liste li {
  display: grid;
  grid-template-columns: 10ch 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-oppf-kort-dato {
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-oppf-kort-tj {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.np-oppf-kort-pris {
  text-align: right;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}

/* ── Tomt og forbehold ─────────────────────────────────────────────────── */

/* TOMT ER DEN GODE TILSTANDEN her, i motsetning til overalt ellers i panelet.
   Is-stolpe, ikke varselgult: en tom kø er en beskjed om at verkstedet er
   à jour. */
.np-oppf-tom {
  margin: 0;
  padding: 16px 18px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--ice);
  border-radius: var(--r-md);
  font-size: var(--np-t-md);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}

.np-oppf-merknad {
  margin: 18px 0 0;
  padding: 10px 12px;
  background: var(--fill-subtle);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  max-width: 78ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}
/* Samme regel som `.np-innst-merknad b` (stil-innstillinger.css:93).
   Uten den sto ordet «Demo.» varselgult i Innstillinger og hvitt her, i to
   bokser som ellers er tegnet likt. */
.np-oppf-merknad b {
  color: var(--warn);
  font-weight: 700;
}

/* ── Antallsmerket i menylinja ─────────────────────────────────────────── */
.np-navmerke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(2ch + 4px);
  margin-left: 7px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ice-fyll);
  color: var(--navy);
  font-size: var(--np-t-mikro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* På den VALGTE fanen er bakgrunnen alt is-fyll, og et is-merke på is-fyll er
   usynlig. Da snus det: mørk pille med is-tekst. */
.np-navvalg.valgt .np-navmerke {
  background: var(--navy);
  color: var(--ice);
}

/* ════════════════════════════════════════════════════════════════════════
   SMALERE SKJERMER
   ════════════════════════════════════════════════════════════════════════ */

/* 1180 px: verdikolonnen flytter inn under anbefalinga.
   Grensa er MÅLT og ikke rundet: under den blir «Tilby ledig time» klippet i
   kolonne tre mens verdikolonnen står med 60 px tomt til høyre. */
@media (max-width: 1180px) {
  .np-oppf {
    --oppf-kol: minmax(0, 2.1fr) minmax(0, 1.15fr) minmax(0, 1.9fr);
  }
  .np-oppf-kolonnehode > :nth-child(4),
  .np-oppf-aapne > .np-oppf-verdi {
    display: none;
  }
  /* Verdien skal ikke FORSVINNE — den skal flytte. Den står nå som en tredje
     linje i «gjør dette»-kolonnen, etter ledig tid. */
  .np-oppf-gjor::after {
    content: attr(data-verdi);
    font-size: var(--np-t-xs);
    line-height: var(--np-lh-kort);
    color: var(--silver);
    font-variant-numeric: tabular-nums;
  }
  .np-oppf-gjor[data-verdi=""]::after {
    content: none;
  }
}

/* ── MOBIL: EGEN ARBEIDSFLYT, IKKE EN STABLET TABELL ─────────────────────
 *
 * Under 760 px er raden ikke lenger fire kolonner. Den som står med telefonen
 * i hånda trenger fire ting og ikke ni: HVEM · HVORFOR · HVA GJØR JEG ·
 * og knappen. Resten er ett trykk unna, som på skrivebordet.
 *
 * Kolonnehodet forsvinner: fire versaletiketter over en liste som ikke er en
 * tabell lenger, beskriver en form som ikke finnes.
 *
 * MÅLT før: 325 px per rad, én rad over folden. */
@media (max-width: 759px) {
  .np-oppf-kolonnehode {
    display: none;
  }
  .np-oppf-rad {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .np-oppf-aapne {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 12px;
    padding: 11px 14px 8px;
  }
  /* Navn og verdi på linje én, grunn og anbefaling under. Verdien står
     ØVERST til høyre og ikke nederst: det er tallet som avgjør hvilken av to
     like hastende rader man tar først, og øyet leser toppen av et kort. */
  .np-oppf-hvem {
    grid-column: 1;
    grid-row: 1;
  }
  .np-oppf-verdi {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    align-self: start;
    padding-top: 1px;
  }
  .np-oppf-hvorfor {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
  }
  .np-oppf-gjor {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4px;
  }
  /* Verdien står i sin egen celle igjen på mobil, så ::after-flyttinga fra
     1180-regelen må slås av — ellers står tallet to ganger. */
  .np-oppf-gjor::after {
    content: none !important;
  }
  .np-oppf-anb {
    font-size: var(--np-t-md);
    color: var(--white);
  }
  /* Knappene får sin egen linje under. «Ring» STREKKES IKKE ut i full
     bredde, og det er husets egen regel anvendt: tre skjermfylte is-flater
     under hverandre roper like høyt, og da roper ingen av dem. Den er
     bredest av de to og står først — det holder for å si hva som er
     primærhandlinga. «Ferdig» skyves til motsatt kant, der tommelen på
     høyre hånd ikke treffer den ved et uhell. */
  .np-oppf-knapper {
    justify-content: space-between;
    padding: 0 14px 10px;
  }
  .np-oppf-knapper > .np-btn {
    flex: 0 0 auto;
    min-width: 116px;
  }
  .np-oppf-avfei {
    flex: 0 0 auto;
  }
  /* Bunkene i to rader à to. Fire på 390 px gir 87 px hver, og «Trenger
     handling» blir tre linjer. */
  .np-oppf-bunker {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Skuffen er et ark over hele flata: på 390 px er det ikke plass til både
     lista og en 420 px skuff, og en skuff som dekker 92 % av skjermen med en
     stripe liste i kanten er verre enn en som dekker alt. */
  .np-skuff {
    width: 100vw;
    top: auto;
    height: 92dvh;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: np-skuff-opp 0.18s ease-out;
  }
  @keyframes np-skuff-opp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  /* Her SKAL bakteppet mørklegge: skuffen dekker flata, og uten et teppe
     ser man kanten av en liste man ikke kan nå. */
  .np-skuff-bak {
    background: rgba(2, 8, 20, 0.5);
  }
}

@media (max-width: 480px) {
  /* Verktøylinja: søket får hele bredden, «Filtrer» faller under. To
     elementer på 320 px gir søkefeltet 190 px, som er for lite til å se hva
     man har skrevet. */
  .np-oppf-verktoy {
    flex-wrap: wrap;
  }
  .np-oppf-sok {
    flex: 1 1 100%;
  }
  .np-oppf-mer {
    flex: 1 1 100%;
    justify-content: center;
  }
  .np-oppf-bunke {
    min-height: 56px;
    padding: 8px 11px;
  }
}

/* ── HISTORIKKRADA KLIPPET TJENESTENAVNET PÅ 320 PX MED STØRSTE TEKST ────
 *
 * MÅLT i en sveip over 9 bredder × 2 tekststørrelser × 7 tilstander — ett
 * eneste funn i 126 målinger, og det sto her: «Innvendig rens» og
 * «Maskinpolering» ble klippet i midtspalta av `10ch 1fr auto` inne i
 * skuffen. Regnestykket: skuffen er 320 px minus 36 px polstring = 284, og
 * med datoen på 10ch og prisen til høyre får tjenesten rundt 120 px — nok til
 * «Dekkskift», ikke til de to lengste navnene i prislista.
 *
 * `data-skala`-KROKEN og ikke en ren breddegrense: på 320 px med NORMAL tekst
 * står de tre spaltene fint, og en form som endres for alle fordi én
 * tekststørrelse er trang, er en form som er feil for de to andre. Kroken
 * finnes nettopp for der layouten skifter FORM og ikke bare mål — en custom
 * property kan ikke leses av en mediespørring.
 *
 * `:not([data-skala="normal"])` og ikke `="storst"`: «stor» ligger mellom, og
 * en grense som bare fanger ytterpunktet lar mellomtrinnet klippe videre. */
@media (max-width: 400px) {
  :root:not([data-skala="normal"]) .np-oppf-kort-liste li {
    grid-template-columns: 1fr auto;
  }
  :root:not([data-skala="normal"]) .np-oppf-kort-tj {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* RESPEKTER «MINDRE BEVEGELSE».
   Skuffen glir inn fra kanten. Det er 0,16 s og det er lite, men husets
   regel er at ingenting beveger seg for den som har bedt om at det ikke
   skal — og en skuff som spretter er nettopp det folk slår av. */
@media (prefers-reduced-motion: reduce) {
  .np-skuff {
    animation: none;
  }
  .np-oppf-rad,
  .np-oppf-mer .np-kip {
    transition: none;
  }
}

/* UTSKRIFTA STÅR SIST I ARKET, og det er ikke en smakssak.
   Blokka sto FØR mobilregelen en gang, og begge kan matche samtidig: et
   smalt papir er både «print» og under 760 px. Ved lik spesifisitet vant da
   mobilregelen. Rekkefølgen er hele forskjellen.

   Det som skrives ut er en RINGELISTE: navn, bil, hvorfor, hva du skal gjøre.
   Knapper, faner, søk og skuff er tilbud om å gjøre noe på en skjerm, og de
   finnes ikke på papir. */
@media print {
  .np-oppf-bunker,
  .np-oppf-verktoy,
  .np-oppf-avansert,
  .np-oppf-knapper,
  .np-oppf-utfall,
  .np-oppf-flerknapp,
  .np-oppf-angre,
  .np-skuff,
  .np-skuff-bak,
  .np-oppf-merknad {
    display: none !important;
  }
  .np-oppf-liste {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .np-oppf-rad {
    grid-template-columns: minmax(0, 1fr);
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    break-inside: avoid;
  }
  .np-oppf-rad::before {
    display: none;
  }
  .np-oppf-aapne {
    padding: 8px 0;
  }
  /* TELEFONNUMMERET ER HELE POENGET MED EN UTSKREVET RINGELISTE, og det står
     ikke lenger i flata — det bor i skuffen og i «Ring»-knappen, som begge er
     borte på papir. `data-tlf` på raden er veien tilbake, og den er derfor
     ikke fjernet fra markupen selv om ingenting på skjermen leser den. */
  .np-oppf-hvem::after {
    content: attr(data-tlf);
    display: block;
    font-size: 11px;
    color: #000;
  }
  .np-oppf-hode h2,
  .np-oppf-navn,
  .np-oppf-anb {
    color: #000;
  }
  .np-oppf-hode p,
  .np-oppf-bil,
  .np-oppf-merke,
  .np-oppf-alder,
  .np-oppf-ledig,
  .np-oppf-verdi {
    color: #333;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HULLFYLLEREN — linja over kalenderen (del-hull.js)
   ═══════════════════════════════════════════════════════════════════════

   HVORFOR STÅR DEN I OPPFØLGINGSARKET OG IKKE I SITT EGET?

   Husregelen er at en skjermspesifikk seksjon får sitt eget `stil-<skjerm>.css`
   — og den regelen er brutt her med vitende og vilje, ikke av latskap. Et
   nytt ark må lenkes fra `index.html`, og den fila eies ikke av denne runden.
   Alternativene var inline stil på hver node, som del-ansatte.js måtte ty til
   (det gir ingen hover, ingen `@media`, ingen utskriftsregel), eller
   `demo-tillegg.css`, som er delt med to andre byggere i samme runde.

   Dette arket er dessuten ikke tilfeldig valgt blant de fem: halvparten av
   navnene linja tilbyr kommer fra `NB.oppfolgingListe`, den andre halvparten
   fra `NB.ventelisteApen` — begge eksportert fra del-oppfolging.js. De to
   flatene svarer på samme spørsmål fra hver sin kant: hvem skal vi ringe, og
   hva skal vi tilby dem.

   FLYTT BLOKKA til `stil-hull.css` den dagen noen kan legge inn
   `<link rel="stylesheet" href="stil-hull.css?v=…">` i index.html. Ingenting
   annet må endres; hver eneste selektor her begynner på `.np-hull`.
   ═══════════════════════════════════════════════════════════════════════ */

/* Formen er husets «opplysning festet i flyten»: tonet flate, is-stolpe til
   venstre, avrundet i den ENE enden. Samme som `.np-notat` (panel.css:916) og
   `.np-oppf-merknad` over. Ikke et kort med ramme og skygge — et kort ville
   lest som en seksjon på linje med kalenderen under, og dette er en linje.
   `--fill-subtle` og ikke `--navy2`: den ligger rett over rutenettet, som er
   `--navy2`, og to like flater over hverandre flyter sammen.

   FRA SEKSJON TIL POPOVER 23.09.2026. Polstringa flyttet HIT fra linja, fordi
   linja er en <button> nå og en knapp med egen polstring inne i en boks med
   polstring gir dobbel luft i den ene enden. */
.np-hull {
  margin: 0 0 14px;
  background: var(--fill-subtle);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ANKERET. Samme rolle som `.np-meny-boks` i styrelinja: popoveren er
   `position: absolute` og trenger noe å stå i forhold til. */
.np-hull-boks {
  position: relative;
}

/* TRIGGEREN — hele linja er knappen.
   En knapp arver hverken flate, farge eller tekstjustering fra flyten, så
   alle fire nullstilles her. `width: 100%` og `text-align: left` gjør at
   trykkflata dekker hele linja: en linje man skal kunne treffe med tommelen
   uten å sikte på et ord. */
.np-hull-linje {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--offwhite);
  /* `--np-t-md` og ikke `sm`: dette er den ene linja på skjermen som sier noe
     verkstedet ikke visste, og den står over en kalender full av 13,5 px. Et
     hakk større er forskjellen på lest og oversett. */
  font: inherit;
  font-size: var(--np-t-md);
  line-height: var(--np-lh-brod);
  text-align: left;
  cursor: pointer;
}
/* Linja ligger ALT på `--fill-subtle`, så husets vanlige hover-flate ville
   vært usynlig her. `--navy25` er neste flate oppover i settet og gir den
   ene tingen en trykkflate trenger: at noe skjer. Ingen ny verdi innført —
   `--fill-hover` finnes ikke i dette treet, og et token som ikke er definert
   gir `unset`, altså arvet farge, uten at noe sier fra. */
.np-hull-linje:hover {
  background: var(--navy25);
}

/* Teksten tar plassen, merket og pila står på hver sin side av den.
   `min-width: 0` så en lang setning brekker i stedet for å presse pila ut. */
.np-hull-tekst {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 88ch;
}
/* Etiketten. Is, som stolpen til venstre — den ene fargen sier «dette er
   panelet som snakker», og ordet bærer betydningen uansett (WCAG 1.4.1). */
.np-hull-linje b {
  color: var(--ice);
  font-weight: 700;
}
/* «3 hull til de neste sju dagene.» Et tall som setter det største i
   sammenheng, ikke en andre beskjed — derfor sølv og et hakk mindre, i samme
   avsnitt og ikke på egen linje.
   `inline-block` og ikke `inline`: et inline-element som brekker over to
   linjer får et rektangel som er unionen av linjeboksene, og det dekker da
   alt som står foran det på linje én. qa9 melder «OVERLAPP» på nettopp det —
   og den har rett i geometrien selv om skjermen er i orden. En inline-blokk
   er ÉN boks: den flyttes hel ned til neste linje i stedet for å deles, og
   da finnes ikke rektangelet som dekket naboen. */
.np-hull-flere {
  display: inline-block;
  color: var(--silver);
  font-size: var(--np-t-xs);
}

/* ANTALLSMERKET. Samme form og samme begrunnelse som `.np-meny-merke`: det
   er merket som gjør at popoveren tåler å ligge lukket. Is-fyll med mørk
   etikett, som alle fylte aksentflater i huset — hvit på is måler 1,9:1. */
.np-hull-merke {
  flex: none;
  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;
}
/* Pila. `align-self: center` og ikke baseline: et ikon har ingen grunnlinje,
   og på baseline henger det under teksten.
   ROTASJONEN STÅR IKKE HER. `.np-kip` i panel.css eier den allerede —
   `[aria-expanded="true"] > .np-kip { transform: rotate(180deg) }` pluss
   `transition: transform 120ms ease` — og ikonet er direkte barn av knappen
   som bærer attributtet. En egen regel her ville vært en andre kopi av en
   regel som virker, og de to ville glidd fra hverandre første gang noen
   endret varigheten ett av stedene. */
.np-hull-pil {
  flex: none;
  align-self: center;
}

/* POPOVEREN. Samme maskineri som `.np-meny` i styrelinja, og med vilje like:
   to popovers på samme skjerm som åpner seg ulikt, er to ting å lære.

   `left: 0` og ikke `right: 0` som menyen: menyen henger under en knapp i
   høyre hjørne, denne under en linje som starter til venstre.

   MAKSBREDDEN ER TO TALL, og begge trengs. 720 px er lesegrensa — en rad er
   «navn · tjeneste · kilde · knapp», og over 720 px blir avstanden mellom
   navnet og knappen så stor at øyet mister raden. `calc(100vw - 32px)` er
   telefonen: uten den stikker en 320 px minstebredde utenfor kanten på en
   320 px skjerm og drar hele sida sideveis. */
.np-hull-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: min(320px, 100%);
  width: max-content;
  max-width: min(720px, calc(100vw - 32px));
  padding: 10px 14px 12px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  /* Fem rader pluss en handlingsrad kan bli høyere enn en liten laptop.
     Da skal popoveren rulle, ikke stikke ut under kanten — samme grense som
     menyen bruker. */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

/* Navnene. Maks fem rader, og hver rad er ÉN linje på skrivebordet:
   navn · tjeneste · hvor de kom fra · knapp. `flex-wrap` gjør de tre første
   til én linje og knappen til en annen når plassen tar slutt, i stedet for å
   klemme knappeteksten. */
.np-hull-navn {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np-hull-rad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--np-t-sm);
}
.np-hull-rad b {
  color: var(--white);
  font-weight: 700;
}
.np-hull-tj {
  color: var(--silver);
}
/* Hvor navnet kom fra — «Venteliste» eller «Oppfølging». En rolig pille, ikke
   et merke: den forklarer hvor opplysningen er hentet, og den er ikke en
   status kunden har. Derfor samme form som `.np-oppf-merke` i sølv, uten
   is-varianten. */
.np-hull-kilde {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--fill-subtle);
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--silver);
  white-space: nowrap;
}
/* Knappen skyves ut til høyre, så de fem står i lodd nedover uansett hvor
   langt navnet er. Uten dette flyttet knappekolonnen seg fem ganger på fem
   rader, og øyet fant den ikke. */
.np-hull-rad .np-btn {
  margin-left: auto;
}

/* Hullet finnes, men ingen på listene passer i det. En annen beskjed enn
   «ingen hull», og verdt å si — da er svaret å fylle det med noe annet enn en
   oppringing. */
.np-hull-ingen {
  margin: 8px 0 0;
  max-width: 78ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

.np-hull-handling {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/* «Skjul» er en tekstknapp, ikke en tredje ramme — nøyaktig samme
   begrunnelse som `.np-oppf-avfei` over: den minst viktige handlinga skal
   ikke se ut som den viktigste. `margin-left: auto` skyver den bort fra
   «Tilby hullet til disse», som er den ene ekte handlinga her.
   36 px er knappehøyden i huset etter at `.np-btn` fikk eksplisitt
   line-height; står de to i samme rad, må de være like høye. */
.np-hull-skjul {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-btn);
  background: none;
  font: inherit;
  font-size: var(--np-t-sm);
  color: var(--silver);
  cursor: pointer;
}
.np-hull-skjul:hover {
  color: var(--offwhite);
  background: var(--fill-subtle);
}

/* BRETTET ER BORTE (23.09.2026). Her sto to mediespørringer som gjemte
 * navnelista under 560 px og lot den stå framme over: `.np-hull-mer` som
 * bryter, og `.np-hull:not(.apen) .np-hull-brett { display: none }`.
 *
 * De løste et ekte problem — MÅLT 22.09: seksjonen tok 529 px på 375 px, og
 * 379 av dem var navnelista — men de løste det bare på telefon. På
 * skrivebordet sto de fem radene framme og tok 400 px rett over kalenderen,
 * altså dyttet de bort nettopp det de varsler om.
 *
 * Popoveren løser begge bredder med én mekanikk, og da er brettet ikke bare
 * overflødig — det er en andre måte å skjule det samme på, og to slike glir
 * fra hverandre. `apen`-klassen på seksjonen er borte med dem; `hullApen`
 * styrer nå om popoveren i det hele tatt TEGNES, ikke om den er synlig.
 *
 * MÅLT ETTER, 375 px: linja 142 → 56 px. */

/* `.np-btn.liten` løftes til 44 px på berøring (panel.css:1352). Står
   «Skjul» i samme rad, må den følge med — ellers er rada 44/36 på telefon.
   Fingeren er kravet, ikke skjermbredden; samme regel som `.np-oppf-avfei`. */
@media (pointer: coarse) {
  .np-hull-skjul {
    min-height: 44px;
  }
}

/* På smal skjerm får knappen hele linja under de tre opplysningene.
   `margin-left: auto` skyver den ellers ut til kanten på en linje der det er
   fire piksler igjen, og teksten brekker midt i et ord. Samme 560 px som
   resten av dette arket bruker. */
@media (max-width: 560px) {
  .np-hull-rad .np-btn {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* UTSKRIFTA: linja er borte. Den er et TILBUD om å gjøre noe — knapper, en
   kvittering, fem navn å ringe — og ingenting av det virker på papir. En
   utskrevet dagsplan skal vise timene som står, ikke tida som ikke gjør det. */
@media print {
  .np-hull,
  .np-oppf-lenke {
    display: none !important;
  }
  /* `.np-oppf-tak` sto her og ble svertet på papir: «Viser 40 av 358» måtte
     stå på en utskrevet ringeliste som bare hadde 40 av navnene. Linja finnes
     ikke lenger — taket er en KNAPP («Vis 25 til») fra 25.09.2026, og en knapp
     hører ikke hjemme på papir. Den er skjult sammen med de andre i
     utskriftsblokka lenger opp, og regelen her er fjernet framfor å stå igjen
     og peke på en klasse ingen skriver. */
}