/* Kalenderdemoen — JOBBSTATUS, BILDER OG OPPSKRIFT.
 *
 * Arket eier det som er nytt og går på tvers av flatene: hvor bilen står
 * (daglista, rutenettet, detaljkortet), bildene av jobben og oppskrifta per
 * tjeneste. Alt som bare UTVIDER en eksisterende delt regel i panel.css står
 * i demo-tillegg.css, ikke her.
 *
 * TO AKSER SOM ALDRI SKAL SLÅS SAMMEN:
 *   `.np-status`     — har kunden en avtale? bekreftet / ikke bekreftet /
 *                      avlyst. Pille, alltid i HØYRE kant av raden.
 *   `.np-jobbmerke`  — hvor er bilen? booket → ankommet → arbeid → ferdig →
 *                      hentet. Strek med ord, alltid i radens KROPP.
 * To former på to steder. Hadde begge vært piller ved siden av hverandre,
 * måtte man lese begge for å vite hvilken som var hvilken, og en liste man
 * skanner nedover leser man ikke.
 *
 * Fargene: is = i flyt, noen må gjøre noe. Grønn = gjort. Sølv = ikke begynt.
 * Ingen lilla, og ingen farge står alene — hvert merke har et ord eller en
 * form ved siden av fargen.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. DAGLISTA — raden og statusknappen
   ═══════════════════════════════════════════════════════════════════════

   EN KNAPP KAN IKKE LIGGE INNE I EN KNAPP. `.np-dagrad` ER et <button>
   (panel.css:758), så statusknappen må være SØSKEN av raden. Beholderen
   `.np-jobbrad` finnes bare for å holde de to side om side.

   STREKEN MELLOM RADENE FLYTTER MED. `.np-dagrad` har `border-top` og
   `.np-dagrad:first-of-type` tar den bort på den første knappen i kortet.
   Innpakka er hver timeknapp eneste <button> i sin egen beholder, og
   `:first-of-type` ville truffet dem alle. Streken bor derfor på beholderen,
   og del-dagliste.js setter `.forste` på den øverste når ingen blokkrad kom
   foran den — nøyaktig den regelen `:first-of-type` uttrykte før.

   ── PLASSEN, MÅLT I NETTLESEREN 22.09.2026 ─────────────────────────────
   Innvendig bredde i dagkortet = viewport − 40 (np-wrap 2×20)
                                            − 32 (np-dagkort 2×16)
                                            −  2 (np-dagkort 2×1 ramme)
   MÅLT ved 320 px: 246,0 px. Ved 390 px: 316,0 px. Formelen stemmer.

   Raden selv (flex, gap 12) bruker, MÅLT ved 320 px og skala 1:
     .np-dr-tid     61,9 px   (calc(5.4ch + 8px); demo-tillegg.css:1041 sier
                               53,90 — det tallet er eldre enn denne fonten)
     2 × gap        24,0 px
     .np-status     75,7 px «Bekreftet» / 103,3 px «Ikke bekreftet»
                            (`flex: 0 0 auto`, krymper aldri)
     igjen til navnet: 84,4 px på en bekreftet rad
   Ordet «Ramberg» alene måler 82,2 px (demo-tillegg.css:1044). Raden er
   altså ALLEREDE på grensa ved 320 px — det er derfor `.np-dr-hva b` har
   `overflow-wrap: anywhere` (demo-tillegg.css:1054).

   En knapp ved siden av ville tatt ~96 px til («Ankommet» er det lengste
   ordet) pluss 8 px gap. Navnet ville fått 84,4 − 104 = NEGATIV plass, og
   klokkeslettet ville blitt neste offer.

   Derfor wrapper beholderen. Raden får en flex-basis som er den minste
   bredden der navnet får én hel linje:
       61,9·s + 24 + 103·s + 85·s  ≈  251·s + 24
   og knappen 96·s. MÅLT hvor bruddet faktisk går:
       skala 1      452 px → under,  453 px → ved siden av
       skala 1,25   535 px → under,  540 px → ved siden av
   Under det fyller knappen bredden — MÅLT 246 × 44 px ved 320 px og
   246 × 55 px ved 320 px med største tekst, uten vannrett sidrulling. For en
   hanskekledd finger er det uansett det beste svaret på en telefon; fra
   453 px står den til høyre, som oppdraget beskriver. Ved 899 px — siste
   bredde der daglista finnes (panel.css:667) — er knappen MÅLT til 100,5 px
   og raden til 716,5, altså tar navnet 99 % av overskuddet.
   ─────────────────────────────────────────────────────────────────────── */

.np-jobbrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border-faint);
}
.np-jobbrad.forste {
  border-top: 0;
}
/* Raden bærer ikke lenger sin egen strek — beholderen gjør det, slik at
   streken går helt ut til knappen og ikke stopper midt i raden. */
.np-jobbrad > .np-dagrad {
  border-top: 0;
  /* `flex-grow: 99` mot knappens 1: når de deler linje, skal overskuddet gå
     til navnet og ikke til knappen. Ved 899 px er overskuddet 448 px, og
     knappen tar 1 % av det — fire og en halv piksel. Alene på sin egen linje
     har knappen ingen å dele med, og vokser til full bredde. */
  flex: 99 1 calc(251px * var(--np-skala) + 24px);
  /* Uten denne kan ikke `.np-dr-hva` krympe under sitt eget innhold, og
     navnet skyver pilla ut av raden. */
  min-width: 0;
}

/* STATUSKNAPPEN. Samme klasse i daglista og i detaljkortet — det er én
   handling, og den skal se lik ut begge steder.
   44 px er berøringsgulvet (WCAG 2.5.8 krever 24, Apples og Googles egne
   retningslinjer 44/48). Det ganges med `--np-skala`: etiketten vokser med
   tekststørrelsen, og en knapp som ikke vokser med den klipper ordet. */
.np-jobb-steg {
  flex: 1 1 calc(96px * var(--np-skala));
  min-width: calc(44px * var(--np-skala));
  min-height: calc(44px * var(--np-skala));
  white-space: nowrap;
}

/* MERKET I RADKROPPEN. Står nederst i `.np-dr-hva`, under den ansatte, som
   den siste og eneste opplysninga som endrer seg i løpet av dagen.
   `inline-flex` og ikke `block`: streken og ordet skal stå på samme
   grunnlinje, og elementet skal ikke være bredere enn ordet — en full
   radbredde med bakgrunn ville lest som en ny pille. */
.np-jobbmerke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--np-t-xs);
  font-weight: 600;
  color: var(--silver);
}
/* Streken er 3 px bred og litt lavere enn linja, samme bredde som
   timekortets venstrekant i rutenettet. Den er ekkoet av ordet, ikke
   bæreren av det: ordet står alltid ved siden av. */
.np-jobbmerke::before {
  content: "";
  flex: none;
  width: 3px;
  height: calc(12px * var(--np-skala));
  border-radius: 2px;
  background: var(--silver);
}
.np-jobbmerke.trinn-ankommet::before,
.np-jobbmerke.trinn-arbeid::before {
  background: var(--ice);
}
/* Bare «under arbeid» og «ferdig» får farget TEKST. De to andre trinnene er
   ventetilstander som gjelder halve lista samtidig, og fire farger nedover en
   dagliste er en fargeforklaring ingen har bedt om. */
.np-jobbmerke.trinn-arbeid {
  color: var(--ice-tekst);
}
.np-jobbmerke.trinn-ferdig {
  color: var(--green);
}
.np-jobbmerke.trinn-ferdig::before {
  background: var(--green);
}

/* Setninga som sier hvorfor knappen ikke er der. Står ÉN gang under lista,
   ikke én gang per rad — daglista viser én dag, så hele lista deler svaret. */
.np-jobb-naar {
  margin-top: 10px;
  font-size: var(--np-t-xs);
  color: var(--silver);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. RUTENETTET — statusen som en flate på timekortet
   ═══════════════════════════════════════════════════════════════════════

   Kortet har et høydegulv på 26*skala og tåler ikke et fjerde barn
   (del-rutenett.js), så statusen må bæres av en flate. Venstre kant er
   opptatt: den er personens farge, og den er WCAG-belegget for hvem timen er
   på. Stolpa legges derfor langs HØYRE kant.

   Som en bakgrunn og ikke som `border-right`: `.np-time` har
   `box-sizing: border-box` og `container-type: inline-size`, og en ramme på
   3 px ville krympet målebeholderen med 3 px. Beholderspørringene i
   panel.css:475, :484 og :489 slår om ved 108, 200 og 96 px — et kort som
   ligger nøyaktig på en av grensene ville byttet utseende fordi det fikk en
   statusstolpe. En bakgrunn flytter ingen mål.

   `background` er satt med kortform i `.np-time` (:427) og `.np-time.ny`
   (:570), og kortformen nullstiller image, size, position og repeat. Alle
   fire settes derfor eksplisitt her, og dette arket lastes sist. */
.np-time.jobb-arbeid,
.np-time.jobb-ferdig {
  background-repeat: no-repeat;
  background-size: 3px 100%;
  background-position: 100% 0;
}
/* HEL stolpe: bilen er inne nå, plassen er opptatt. */
.np-time.jobb-arbeid {
  background-image: linear-gradient(var(--ice), var(--ice));
}
/* BRUTT stolpe: jobben er ferdig, bilen står og venter på å bli hentet.
   Form i tillegg til farge — hel mot brutt kan skilles uten å se fargen,
   og hele setninga står uansett i `title` og `aria-label` på kortet. */
.np-time.jobb-ferdig {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--green) 0,
    var(--green) 6px,
    transparent 6px,
    transparent 10px
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   3. DETALJKORTET — flyten, tidsbruken, tilleggene, oppskrifta, bildene
   ═══════════════════════════════════════════════════════════════════════ */

/* Seksjonen skilles fra kundefeltene over med samme svake strek som
   `.np-detalj-rutenett` bruker i begge kanter — ikke med en ny bakgrunn.
   Kortet er alt en hevet flate; en flate til inni den leser som et vindu. */
.np-jobb {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
}

/* Overskriftene er `.np-dl` fra panel.css:902 — kortets egen etikettstil,
   som alt står på hver celle i detaljrutenettet rett over. Her legges bare
   layouten ikonet trenger på. `display: flex` slår `.np-dl`s `block`, fordi
   dette arket lastes sist og spesifisiteten er lik. */
.np-jobb-h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
}
/* Den første overskrifta står rett under streken og trenger ikke luft over. */
.np-jobb > .np-jobb-h3:first-child {
  margin-top: 0;
}
.np-jobb-h3ikon {
  color: var(--ice-tekst);
}

/* ── Flyten ────────────────────────────────────────────────────────────
   Fem brikker som brytes, ikke fem rader. MÅLT ved 320 px: detaljkortet er
   320 − 40 (np-wrap) − 36 (np-detalj 2×18) = 244 px innvendig, og den bredeste
   brikka er «Under arbeid» — 12 tegn Inter 13,5 px ≈ 78 px pluss 2×10
   polstring = 98 px. To brikker per linje, tre linjer. En loddrett liste
   hadde tatt fem.

   TRE TILSTANDER, TRE FORMER — ikke tre farger:
     gjort  fylt flate, ingen ramme
     naa    fylt flate MED is-ramme, og `aria-current="step"` i markupen
     igjen  stiplet ramme, ingen flate — husets «her skal det komme noe»
   Fargen følger med, men formen bærer. */
.np-jobb-flyt {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.np-jobb-trinn {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--fill-subtle);
  color: var(--silver);
}
.np-jobb-trinn.naa {
  background: var(--ice-bg);
  border-color: var(--ice);
  color: var(--ice-tekst);
}
.np-jobb-trinn.igjen {
  background: none;
  border-style: dashed;
  border-color: var(--border-strong);
}
/* SISTE TRINN ER GRØNT, IKKE IS. Is betyr «her må noen gjøre noe» i hele
   panelet — fokusringen, den valgte timen, primærknappen. Står flyten på
   «Hentet», er det ingenting igjen å gjøre, og hver eneste time i fortida
   står der. Grønt er husets «gjort», samme som `.np-status.ok`. */
.np-jobb-trinn.naa.slutt {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.np-jobb-trinn-ord {
  display: block;
  font-size: var(--np-t-xs);
  font-weight: 700;
}
.np-jobb-trinn-tid {
  display: block;
  font-size: var(--np-t-mikro);
  font-variant-numeric: tabular-nums;
}

/* ── Hva jobben tok ────────────────────────────────────────────────────
   Demoens tyngste enkeltopplysning, og derfor den eneste linja i seksjonen
   som står i brødtekstfarge og ikke i sølv: et verksted vet hva det har satt
   av tid, og nesten aldri hva jobben TOK. */
.np-jobb-tok {
  margin-top: 10px;
  font-size: var(--np-t-sm);
  font-weight: 600;
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}

/* Knappen står som eget blokkelement her, ikke som flex-barn som i daglista.
   Margen scopes til `.np-jobb` nettopp derfor — i daglista ville en margin
   over brutt justeringa mot raden. */
.np-jobb .np-jobb-steg {
  display: block;
  margin-top: 12px;
}

/* ── Tilleggssalget ───────────────────────────────────────────────────
   Navn til venstre, beløp til høyre, slik en linje på en faktura leser.
   `tabular-nums` på beløpet så kolonna står rett når det er flere varer. */
.np-jobb-tillegg {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-jobb-tillegg li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--border-faint);
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-jobb-tillegg li:first-child {
  border-top: 0;
}
.np-jobb-tillegg li span + span {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Oppdelinga under Pris-cella. `.np-detalj-rutenett b` er hvit og 15 px;
   dette er fotnoten til den og skal ikke konkurrere med tallet. */
.np-jobb-prisdeling {
  display: block;
  margin-top: 2px;
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}

/* ── Oppskrifta ───────────────────────────────────────────────────────
   Punktene er ting som skal GJØRES, men de er ikke avkryssbare i demoen — og
   en tom avkryssingsboks som ikke kan hukes av er et løfte flata ikke holder.
   Markøren er derfor en prikk, ikke en boks. */
.np-jobb-oppskrift {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-jobb-oppskrift li {
  position: relative;
  padding: 3px 0 3px 18px;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-jobb-oppskrift li::before {
  content: "";
  position: absolute;
  left: 2px;
  /* 0,5 linjehøyder ned, minus halve prikken. Følger tekststørrelsen av seg
     selv, i motsetning til en fast `top`. */
  top: calc(0.75em + 3px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ice);
}
.np-jobb-hint {
  margin-top: 6px;
  font-size: var(--np-t-mikro);
  color: var(--silver);
}

/* ── Det interne notatet ──────────────────────────────────────────────
   Kundens eget notat står over, i hermetegn, med IS-stolpe (`.np-notat`,
   panel.css:916). Dette er verkstedets beskjed til seg selv. De to må ikke
   kunne forveksles: «Kunden har vært misfornøyd før» lest som noe kunden
   selv skrev er en helt annen setning.

   Skillet bæres av ORDET «Internt» foran teksten. Stolpa skifter i tillegg
   fra is til varselgult, men den er ekkoet av ordet, ikke bæreren av det —
   en som ikke ser forskjell på de to fargene leser fortsatt merkelappen. */
.np-jobb-internt {
  margin-top: 8px;
  padding: 9px 12px;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
  background: var(--fill-subtle);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.np-jobb-internt-merke {
  display: inline-block;
  margin-right: 8px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--warn);
}

/* ── Bildene ──────────────────────────────────────────────────────────
   Rutene selv har ingen regler her. De bruker `.np-kunde-bilde*` fra
   stil-kunder.css:436–471, som er NØYAKTIG samme form — en plass med et
   kameraikon og en etikett, stiplet fordi stiplet er husets «her skal det
   komme noe». Fire kopierte regler for å få et nøytralt klassenavn ville vært
   en kopi, og da ville de to flatene kunnet gli fra hverandre.
   Navnet er feil, formen er riktig. Omdøpinga må gjøres i begge filene
   samtidig og står i rapporten. */

/* ═══════════════════════════════════════════════════════════════════════
   4. UTSKRIFT
   ═══════════════════════════════════════════════════════════════════════
   @media print i panel.css:1695 gjør daglista til utskriften. Den kjenner
   ikke beholderen, så streken og sideskift-vernet må flyttes hit — og
   statusknappen er en KONTROLL, som «Alle 3»-filterknappene over lista. */
@media print {
  .np-jobbrad {
    border-top: 1px solid #bbb;
    /* Én time skal ikke deles i to av et sideskift. Regelen sto på
       `.np-dagrad`; nå er det beholderen som er raden. */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .np-jobbrad.forste {
    border-top: 0;
  }
  .np-jobb-steg {
    display: none !important;
  }
  /* Merker og brikker trykkes i svart og grått, som `.np-status` gjør
     (panel.css:1735) — is og grønt på hvitt papir er lyst nok til å forsvinne
     i en laserutskrift. */
  .np-jobbmerke,
  .np-jobbmerke.trinn-arbeid,
  .np-jobbmerke.trinn-ferdig,
  .np-jobb-naar,
  .np-jobb-hint,
  .np-jobb-prisdeling {
    color: #333;
  }
  .np-jobbmerke::before,
  .np-jobbmerke.trinn-ankommet::before,
  .np-jobbmerke.trinn-arbeid::before,
  .np-jobbmerke.trinn-ferdig::before {
    background: #666;
  }
  .np-jobb-trinn,
  .np-jobb-trinn.naa,
  .np-jobb-trinn.igjen {
    color: #000;
    background: none;
    border-color: #666;
  }
  .np-jobb-tok,
  .np-jobb-tillegg li,
  .np-jobb-oppskrift li,
  .np-jobb-internt {
    color: #000;
    background: none;
  }
  .np-jobb-internt {
    border-left-color: #666;
  }
  .np-jobb-internt-merke {
    color: #000;
  }
  .np-jobb-oppskrift li::before {
    background: #666;
  }
}


/* ── NETTLESERENS EGEN MARG UNDER DE TO SETNINGENE ─────────────────────
 *
 * Begge reglene over setter `margin-top` og lar `margin-bottom` stå. Et
 * `<p>` uten en eksplisitt bunnmarg arver nettleserens 1em, og demoen har
 * ingen global reset — produktet har det, og `panel.css` er hentet derfra.
 *
 * MÅLT på 390 px: `.np-jobb-naar` 12,5 px under (= 1em av 12,5) og
 * `.np-jobb-hint` 11 px (= 1em av 11). Begge står SIST i sin beholder, så
 * luften legger seg mellom setninga og kanten på kortet — og kortet har
 * allerede sin egen polstring der. To ulike avstander på samme sted, og den
 * ene er det ingen som har bestemt.
 *
 * `margin-bottom` alene: de 10 og 6 pikslene over er valgt og skal stå.
 * Samme rettelse, og samme begrunnelse, som blokka nederst i
 * `demo-tillegg.css` gjør for de seks andre stedene. */
.np-jobb-naar,
.np-jobb-hint {
  margin-bottom: 0;
}


/* ── TO HÅRSTREKER 16 PX FRA HVERANDRE ─────────────────────────────────
 *
 * `.np-jobb` åpner med `border-top: 1px solid var(--border-faint)`, og
 * seksjonen den følger etter — `.np-detalj-rutenett` (panel.css:894) —
 * lukker med `border-bottom` i nøyaktig samme farge og tykkelse.
 *
 * MÅLT på 390 px i det valgte timekortet: en strek på y=2530 og en til på
 * y=2546. Seksjonen har `margin-top: 16px`, så de to ligger 16 px fra
 * hverandre og leser som en dobbel skillelinje ingen har tegnet — den slags
 * skjevhet man ser uten å kunne peke på den.
 *
 * NABOVELGEREN OG IKKE EN FJERNING: mellom rutenettet og flyten kan det stå
 * et kundenotat (`.np-notat`) eller et internt notat, og de har ingen egen
 * strek. Står et av dem imellom, treffer ikke `+`, og `.np-jobb` beholder
 * streken sin — som den skal.
 *
 * `padding-top` ryker med: de 14 pikslene var luft UNDER en strek som ikke
 * lenger er der, og `margin-top: 16px` gir alt avstanden ned fra rutenettets
 * egen kant. Beholdt begge ville flyten startet 30 px under streken, mot
 * rutenettets egne 14 px over den. */
.np-detalj-rutenett + .np-jobb {
  border-top: 0;
  padding-top: 0;
}