/* Kalenderdemoen — arket fra verkstedpanelet, i NordicOps' palett.
 *
 * Dette er `panel.css` fra det ekte kontrollpanelet, kjørt gjennom
 * `legg_om_palett.py`. Layout, typografi, mål og media queries er URØRT — det
 * er nettopp derfor demoen kan love at den viser det kunden får. Bare fargene
 * er lagt om, og de er palett 2 «Charcoal» (07.10.2026) — se token-blokka.
 *
 * Regenerer i stedet for å redigere for hånd:
 *   python3 legg_om_palett.py panel-original.css panel-nordicops.css
 *
 * ── Det ene som ikke er et rent fargebytte ──
 *
 * Aksenten gikk fra en MØRK blå til en LYS flate (først is, fra 07.10.2026
 * hvit). Alt som er en fylt aksentflate med tekst oppå måtte derfor snu
 * tekstfargen fra hvit til mørk. Hvit tekst på hvit aksent er usynlig.
 *
 * ── Skrifta er Atkinson Hyperlegible Next fra 23.10.2026 ──
 *
 * Brødteksten var Inter fra kontrollpanelet og fram til 23.10.2026. Phillip
 * valgte Atkinson av seks kandidater på ekte ONE (kalenderdemo-verktoy/
 * forslag-skrift/). Den har `tnum` uten å gi - , . : tabellbredde, og I, l,
 * 1, 0 og O er ulike i selve tegningen. Inter står igjen som reserve for
 * tegn Atkinson mangler (pilene).
 *
 * Alt er scopet under .np-root og prefikset np-.
 */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Atkinson Hyperlegible Next (Braille Institute, 2025, OFL): brødteksten.
   Latin-subsett med Latin Extended-A, 39 kB, variabel 200–800. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-next-latin.woff2?v=1") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Atkinson Hyperlegible Mono (samme familie): brukernavn, referanser, eksport
   og kode, der tegnene leses ett og ett. 20 kB, variabel 200–800. */
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-mono-latin.woff2?v=1") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* ONE Sans (one-font/ut/web, 22.10.2026) sto på overskriftene og de store
   tallene til 23.10.2026. Da ville Phillip ha Atkinson i HELE ONE («har du lagt
   04 i HELEEE ONE»), så --np-font-display peker på Atkinson også. Flatene under
   står igjen så det er én linje å bytte tilbake; de lastes ikke når ingen
   bruker dem. Merket og ONE-ordet er SVG og har aldri vært skrift. */
@font-face {
  font-family: "ONE Sans";
  src: url("../assets/fonts/one-sans-regular.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ONE Sans";
  src: url("../assets/fonts/one-sans-medium.woff2?v=2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ONE Sans";
  src: url("../assets/fonts/one-sans-bold.woff2?v=2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
/* ONE Skilt (one-font/skilt, 23.10.2026): tegnene på det norske bilskiltet,
   tegnet etter tolv fotograferte skilt. 4 kB, bare A–Å, 0–9 og mellomrom,
   og bare til .np-skilt-tegn. `block`: et skilt i reserveskriften er et annet
   skilt, så heller et øyeblikk uten tegn. Hele vekten er tegnet inn, derfor
   400 og font-synthesis: none på skiltet. */
@font-face {
  font-family: "ONE Skilt";
  src: url("../assets/fonts/one-skilt.woff2?v=2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Tekstskalaen bor på :root og ikke på .np-root: panelet har flere .np-root,
   og en lokal erklæring ville slått den nedarvede. */
:root {
  /* Nettleserens egne flater utenfor .np-root (rullefeltet på siden,
     autofyll) følger temaet. Lys modus setter `light` under. */
  color-scheme: dark;
  --np-skala: 1;
  /* Bakgrunnen bak hele siden (html, body) — utenfor .np-root, så den bor
     her og ikke i tokenblokka. Lik --bg. */
  --app-bg: #06141B;
}

.np-root {
  /* ── MIDNIGHT ICE (22.10.2026) — ONEs tema ──────────────────────────
   *
   * Phillip 22.10.2026: «MIDNIGHT ICE — COMPLETE APPLICATION-WIDE VISUAL
   * REFINEMENT». Avløser palett 2 «Charcoal» (07.10) og is-aksenten fra
   * 19.10: dypere, svakt kalde flater, ÉN is-blå aksent, et fullt
   * semantisk statussett, lilla KUN for KI, og ONE Sans på overskriftene.
   *
   * FARGERUNDEN (22.10.2026, natt — «GLOBAL COLOR SYSTEM … PREMIUM UI
   * REFINEMENT»): verdiene over sto alt der briefen ville ha dem, så de er
   * beholdt. Endret: KI har IKKE lenger egen farge (--ai er nøytral, gnisten
   * er merket), gløden i grafene er halvert, en handling som går igjen på
   * hvert kort har kant og ikke fylt is, valgte filtre er nøytrale, og
   * kundens nettside har egne tokens (--kunde-*). Vakta som holder dette:
   * kalenderdemo-verktoy/fargevakt.py.
   *
   * DETTE ER DET ENE STEDET FARGENE BOR. Alle ark skriver mot navnene her;
   * en hex-verdi i et annet ark er en feil med mindre den er utskrift, en
   * maske (#000 i mask-image er alfa, ikke farge) eller kundens eget innhold.
   * Tokenene er SEMANTISKE: de sier hva flata ER, ikke hvilken farge den har.
   * De gamle navnene (--navy, --ice …) står nederst som ALIASER, fordi over
   * fire tusen linjer CSS bruker dem. Skriv nye regler mot de semantiske.
   *
   * KONTRAST (WCAG 2.2 AA, regnet mot de ugjennomsiktige flatene):
   *              bg     surface  raised  raised-2
   *   --text     17,8   15,8     13,9    12,9
   *   --text-2    8,3    7,4      6,5     6,0
   *   --text-3    6,0    5,3      4,7     4,3   ← ikke dempet tekst på hover
   *   --accent   10,6    9,4      8,3     7,6
   *   --ok        9,3    8,3      7,3     6,7
   *   --warn     10,6    9,5      8,3     7,7
   *   --danger    7,1    6,3      5,6     5,1
   *   --ai        = --text-2 (KI er nøytral fra 22.10, natt)
   *   --neutral   6,3    5,6      4,9     4,5
   * To avvik fra briefen, begge for AA: --text-3 er #84909F (briefens
   * #778393 målte 4,49 på kortflata og 3,95 på hevet flate), og skjemafelt
   * har sin egen kant --line-input (3,15:1 mot kortflata; briefens sterkeste
   * kant #3B4552 gir 1,78:1, og et felt man ikke ser grensa på er et felt man
   * ikke finner — 1.4.11 krever 3:1). */

  /* Flatene, fra bunnen og opp. Hver flate er ett trinn lysere enn den den
   * står på; et kort skiller seg fra bakgrunnen på flaten, ikke på en kant. */
  --bg: #06141B;           /* appbakgrunnen, den mørkeste */
  --bg-2: #0B1A24;         /* sekundære områder: topplinja, sidefelt, bånd */
  --surface: #11212D;      /* kort, rutenett, lister — og vinduene og skuffene (målt 23.10: alle 16) */
  --surface-2: #172834;    /* mellomtrinnet: åpningsbåndet, rader på hover */
  --raised: #1E2F3D;       /* hevet: timekort, popovere, menyer, nedtrekk */
  --raised-2: #253745;     /* hover på en hevet flate */
  --logo-plate: #DDE1E0;   /* den lyse plata bak en leverandørlogo (Integrasjoner), 23.10 */

  /* Linjene. En kant er en skillelinje, ikke en ramme rundt alt — bruk
   * flate og luft først, kant bare der to like flater møtes. */
  --line-soft: #1B2C38;    /* timestreker og skillelinjer inne i en flate */
  --line: #253745;         /* kanten på et kort eller en liste */
  --line-strong: #374957;  /* kanten på en kontroll man skal se */
  --line-hover: #4A5C6A;
  --line-input: #6A7A84;   /* grensa på felt, brytere og bokser (3:1) */

  /* Teksten, i fire trinn. Ingen ren hvit: #F3F5F8 er hvit nok og blender
   * ikke. --text-disabled står under 4,5:1 med vilje — WCAG unntar
   * avslåtte kontroller, og de skal SE avslåtte ut. */
  --text: #CCD0CF;
  --text-2: #9BA8AB;       /* sekundær: tjeneste, bil, undertekst */
  --text-3: #8A979E;       /* dempet: akse, etiketter, tidsstempler */
  --text-disabled: #5E6E78;
  --white: #E6E9E8;

  /* AKSENTEN — ICE BLUE. Ett sted per skjerm: valgt tilstand, fokus, den
   * ene primærhandlinga, aktiv kalendermarkør og hovedserien i grafene.
   * Ikke på alt som er klikkbart. En fylt aksentflate har ALLTID
   * --accent-ink som tekst (10,2:1); hvit på isen måler 1,8:1. */
  --accent: #CCD0CF;
  --accent-hover: #E6E9E8;
  --accent-ink: #06141B;
  --accent-muted: rgba(204, 208, 207, 0.12);
  --accent-border: rgba(204, 208, 207, 0.30);
  --accent-bg: var(--accent-muted);         /* valgt rad, valgt fane */
  --selected: rgba(204, 208, 207, 0.12);
  --focus: #CCD0CF;
  /* Fokusringen er ÉN regel for hele ONE (under .np-root :focus-visible). */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;

  /* STATUS. Én farge per betydning, aldri som pynt, og aldri alene: hver
   * status har også et ord eller et ikon. Hver har fire varianter, fordi
   * én hex-verdi ikke fungerer som både tekst, flate og kant:
   *   --x        selve fargen: tekst, prikk, strek, ikon
   *   --x-bg     den tonede flata bak et merke (teksten står 5,1–7,1:1 på den)
   *   --x-border kanten rundt en tonet flate
   *   --x-hover  den tonede flata under pekeren
   *   grønn  = fullført, betalt, bekreftet, aktiv integrasjon
   *   oransje= venter, krever oppfølging, nær frist
   *   rød    = feil, forfalt, mislykket, avlyst
   *   blå    = info, pågår, planlagt, valgt (samme som aksenten)
   *   grå    = inaktiv, ikke startet, arkivert
   * Livsløpet, likt i alle moduler: venter/utkast/ubekreftet = oransje,
   * pågår/planlagt = blå, ferdig/sendt/betalt/bekreftet = grønn,
   * avlyst/feilet/forfalt = rød, av/utløpt/hentet = grå.
   * KI og forslag har INGEN egen farge (22.10, natt: «AI-funksjoner skal
   * ikke automatisk få egne lilla … elementer»). De står i ONEs nøytrale
   * grå, og gnisten (.np-ki, .np-ki-gnist) er det som sier «forslag» —
   * form, ikke farge. --ai beholdes som NAVN, så reglene sier hva de mener. */
  --ok: #42C995;
  --ok-bg: rgba(155, 168, 171, 0.12);
  --ok-border: rgba(155, 168, 171, 0.30);
  --ok-hover: rgba(155, 168, 171, 0.18);
  --warn: #EAB76B;
  --warn-bg: rgba(155, 168, 171, 0.12);
  --warn-border: rgba(155, 168, 171, 0.30);
  --warn-hover: rgba(155, 168, 171, 0.18);
  --danger: #F07878;
  --danger-text: #FFD6D6;  /* tekst PÅ den tonede feilflata (10,6:1) */
  --danger-bg: rgba(155, 168, 171, 0.12);
  --danger-border: rgba(155, 168, 171, 0.30);
  --danger-hover: rgba(155, 168, 171, 0.18);
  --info: #CCD0CF;
  /* «Under arbeid» (23.10.2026, Phillip: «bruk farge paletten og få litt farge på statusen»):
     blåtonen i paletten (#4A5C6A, 205°) med mer farge, så jobbstatusen leses på avstand. */
  --status-arbeid: #8EC0EA;
  /* Booket og ankommet (23.10.2026, Phillip: «når de står som booket at de har en nyanse blå» og
     «bytte ut orange fargen på ankommet og til noe i palleten»): booket en dempet blå (lysere enn
     paletten, mørkere enn under arbeid), ankommet palettens lyseste #CCD0CF. */
  --status-booket: #6E93B8;
  --status-ankommet: #CCD0CF;
  --info-bg: rgba(204, 208, 207, 0.10);
  --info-border: rgba(204, 208, 207, 0.30);
  --ai: var(--text-2);
  --ai-bg: var(--neutral-bg);
  --ai-border: var(--neutral-border);
  --ai-hover: var(--fill-3);
  --neutral: #6A7A84;
  --neutral-bg: rgba(106, 122, 132, 0.14);
  --neutral-border: rgba(106, 122, 132, 0.32);
  --disabled-text: var(--text-disabled);
  --disabled-bg: #0E1C26;

  /* GRAFENE. Ice blue er hovedserien. De andre seriene skilles på lyshet
   * (is-rampa) eller er nøytrale, så en kategori aldri leses som en status.
   * Statusfargene står bare der de BETYR noe: positivt/negativt avvik,
   * forfalt. --data er den LYSE NØYTRALE serien som står ved siden av isen
   * («Betalt» mot «Fakturert» i Økonomi, stolpene, bookingprikken i
   * tidslinja) — skilt fra isen på kulør, ikke bare lyshet. --data-2 er den
   * dempede («forrige periode»). */
  --chart-primary: #CCD0CF;
  --chart-secondary: #8C999D;
  --chart-positive: #CCD0CF;
  --chart-negative: #6A7A84;
  --chart-ai: var(--chart-secondary);
  --chart-1: #CCD0CF;      /* is-rampa: rangerte kategorier, størst først */
  --chart-2: #9BA8AB;
  --chart-3: #7A8A92;
  --chart-4: #5E6E78;
  --chart-5: #4A5C6A;
  --chart-rest: #253745;   /* «Resten» */
  /* Strømmen i kundesporet (del-trakt.js): is i fem trinn med jevn avstand
     i lyshet — de to mørkeste i --chart-1…5 forsvant mot flaten der. */
  --flyt-1: #CCD0CF;
  --flyt-2: #9BA8AB;
  --flyt-3: #7A8A92;
  --flyt-4: #5E6E78;
  --flyt-5: #4A5C6A;
  --flyt-rest: #374957;    /* «Resten» i strømmen */
  --flyt-andre: #8C999D;   /* «Andre veier» */
  --chart-grid: #1A2A35;   /* rutenettet bak grafene */
  --chart-axis: var(--text-3);
  --chart-fill: rgba(204, 208, 207, 0.18);  /* toppen av flaten under kurven */
  --chart-glow: rgba(204, 208, 207, 0.10);  /* sparsomt: et hint, ikke et lys (0,32 til 22.10) */
  --chart-hot: #E6E9E8;    /* det lyseste punktet: toppen, pekeren */
  --data: #BFC5C6;
  --data-2: var(--chart-secondary);
  /* SKILTET (23.10.2026, Phillip: «skiltet må være en eksakt kopi av det
     norske skiltet»). Det blå og det røde er målt på åtte fotograferte skilt,
     hvitbalansert mot det hvite i N-en og flaggkorset: feltet ligger rundt
     kulør 217°, mettet og middels lyst — klart lysere enn EU-ens «reflex blue»
     (#00308F, brukt til 23.10), som er trykkfargen og ikke det øyet ser på
     en bil. Korset er flaggets egen marine. Lys modus overstyrer dem ikke:
     et skilt er hvitt med svart kant uansett tema. */
  --skilt-hvit: #FFFFFF;
  --skilt-svart: #121212;
  --skilt-bla: #1659DA;
  --skilt-rod: #E0303E;
  --skilt-kryss: #00205B;

  /* OVERLEGG. Ett slør for alt som legger seg over appen (modal, skuff,
   * ark), og ett lettere for paneler som ikke tar hele fokuset. Dempet,
   * aldri helt svart, og ingen uskarphet: blur koster maling på telefon og
   * sier ingenting sløret ikke sier. --scrim er for tekst og knapper oppå
   * BILDER og video (spilleknapp, varighet), som må stå på et ukjent motiv. */
  --overlay: rgba(6, 20, 27, 0.64);
  --overlay-soft: rgba(6, 20, 27, 0.36);
  --scrim: rgba(6, 20, 27, 0.78);
  --scrim-strong: rgba(6, 20, 27, 0.88);
  --scrim-kant: rgba(255, 255, 255, 0.18); /* ring og spor oppå bilde */
  --on-scrim: #FFFFFF;                     /* ikon og tekst oppå bilde, alle tema */
  --on-scrim-feil: #FFC4C4;                /* feiltekst oppå bilde, alle tema */
  /* Fyll: hvit med lav dekning, til brikker og knapper på en flate de ikke
   * eier. Bytter med temaet. */
  --fill-1: rgba(255, 255, 255, 0.03);
  --fill-2: rgba(255, 255, 255, 0.05);
  --fill-3: rgba(255, 255, 255, 0.08);
  --fill-4: rgba(255, 255, 255, 0.11);
  --hatch: rgba(255, 255, 255, 0.045);      /* skravur: stengt, blokkert */

  /* KUNDENS INNHOLD (22.10, natt). Forhåndsvisningen av bedriftens nettside
   * (Nettsiden, .np-ns-v*) er IKKE ONEs grensesnitt: knappene der er
   * kundens, og ikke handlinger i ONE. De bærer derfor ikke ONEs is-aksent,
   * men disse. Profilfargen er tatt ut av Nettsiden (del-nettside.js), så de
   * er nøytrale; kommer den tilbake, settes den HER og ingen andre steder. */
  --kunde-merke: var(--text);
  --kunde-merke-ink: var(--bg);

  /* Radiusene er små med vilje. Store hjørner overalt er det første som får
   * et panel til å se ut som en mal. --r-xl er flatene i Statistikk og
   * modalene, ikke kort. */
  --r-sm: 6px;
  --r-btn: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 100px;

  /* Høyde. Skyggen er svak på en mørk flate — det er flatetrinnet som
   * løfter. Skyggen sier bare «dette ligger OVER», på det som faktisk gjør. */
  --elev-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-raised: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --elev-pop: 0 18px 48px -16px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4);
  --elev-modal: 0 30px 80px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
  --elev-side: -24px 0 48px -28px rgba(0, 0, 0, 0.75);   /* skuff fra høyre */
  --elev-sheet: 0 -20px 48px -24px rgba(0, 0, 0, 0.85);  /* ark nedenfra */
  --elev-valgt: 0 1px 2px rgba(0, 0, 0, 0.4);            /* valgt segment */
  --skygge-farge: rgba(0, 0, 0, 0.6);  /* til skygger med egen geometri */

  /* Luft, på et 4-punktsrutenett. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Bevegelse. Kort og presis: en overgang skal bekrefte, ikke vente.
   * prefers-reduced-motion nuller dem (blokka «prefers-reduced-motion» i
   * dette arket). */
  --dur-1: 120ms;          /* hover, trykk, farge */
  --dur-2: 180ms;          /* meny, nedtrekk, fane, toning inn */
  --dur-3: 240ms;          /* modal, skuff, ark */
  --ease: cubic-bezier(0.2, 0, 0, 1);       /* inn og ut, standard */
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1); /* det som ankommer */
  --ease-inn: cubic-bezier(0.4, 0, 1, 1);   /* det som forsvinner */

  /* Lagene. Ett tall per slag, så ingen popup havner bak noe den skal
   * ligge over. (Arkene bruker fortsatt sine egne tall; disse er navnet på
   * dem, og et nytt overlegg tar sitt tall herfra.) */
  --z-kalender: 4;
  --z-topp: 30;
  --z-skuff: 40;
  --z-ark: 45;
  --z-modal: 60;
  --z-varsel: 70;

  /* ── ALIASER for de gamle navnene. Ikke skriv nye regler mot disse. ── */
  --navy: var(--bg);
  --navy2: var(--surface);
  --navy25: var(--surface-2);
  --navy3: var(--raised);
  --offwhite: var(--text);
  --silver: var(--text-2);
  --ice: var(--accent);
  --ice-fyll: var(--accent);
  --ice-tekst: var(--accent);
  --ice-bg: var(--accent-bg);
  --green: var(--ok);
  --green-bg: var(--ok-bg);
  --bad: var(--danger);
  --bad-text: var(--danger-text);
  --bad-bg: var(--danger-bg);
  --border-faint: var(--line-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-hover: var(--line-hover);
  --fill-subtle: var(--fill-2);
  /* SKRIFTENE (22.10.2026). ONE Sans er ONEs egen skrift, tegnet ut fra
   * merket (one-font/), og står på overskrifter, sidetitler og de store
   * tallene. Alt under ~17 px er brødskriften: i ONE Sans er I og l samme
   * strek og 0 og O nesten like, og i et panel der folk taster skiltnumre er
   * det et gjettespill. Phillip: «bruk det kun på hoved skrifter og
   * overskrifter. og små skrifter bruker du en font som er clean og stilren».
   * Brødskriften var Inter til 23.10.2026 («sikkelig standard word font …
   * gjør øynene slitene»); nå Atkinson Hyperlegible Next, se toppen av fila.
   * Samme kveld: Atkinson i HELE ONE, også titler og nøkkeltall (display) og
   * monospace. Bare skiltet (ONE Skilt) er unntatt: det er en kopi av det
   * norske skiltet, ikke typografi. Navnet --np-font-display står, så
   * reglene som skiller tittel fra tekst ikke må skrives om. */
  --np-font-display: "Atkinson Hyperlegible Next", "Inter", ui-sans-serif, system-ui, sans-serif;
  --np-font: "Atkinson Hyperlegible Next", "Inter", ui-sans-serif, system-ui, sans-serif;
  --np-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Lys tekst på mørkt LESER tyngre enn den er (irradiasjon). En 700 som er
     riktig på hvitt, smører seg igjen i småstørrelser. 640 er halvfeten for
     tekst under ~15 px; over den er 700 fortsatt riktig. */
  --v-halvfet: 640;
  min-height: 100dvh;
  background: var(--navy);
  color: var(--offwhite);
  font-family: var(--np-font);
  font-size: calc(16px * var(--np-skala));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* `tnum` gjør at klokkeslettene står i kolonne. Atkinson gir bare sifrene
     tabellbredde; Inter ga også - , . : det, så «C-klasse» ble «C - klasse».
     Stor I med seriffer, l med hale og null med skråstrek er tegnet inn i
     Atkinson, så Inters `ss02` trengs ikke lenger (den fantes ikke der heller). */
  font-variant-numeric: tabular-nums;
}
/* Knapper og felt arver ikke skrift av seg selv i nettleseren. Uten denne sto
   kontonavnene i Markedsføring (en <button>) i systemskriften (målt 23.10.2026).
   Regler med egen klasse og egen font vinner fortsatt. */
.np-root :is(button, input, select, textarea) {
  font-family: inherit;
}

/* ── LYS MODUS (Midnight Ice, 22.10.2026) ──────────────────────────────
 *
 * Midnight Ice er standard. Lys modus er det samme systemet med egne
 * verdier: hver semantisk token over får sitt lyse motstykke her, og INGEN
 * komponent skriver egne regler for temaet. Slås på med
 * `<html data-tema="lys">` (Innstillinger → Visning → Tema, NB.settTema i
 * kjerne.js; huskes i «np-visning»). Bare ONEs eget grensesnitt (.np-root)
 * bytter — kundens nettside, e-postmalene og utskriften er urørt.
 *
 * Fargene er MØRKERE enn i mørkt tema, ikke de samme: isen #75C9F3 står
 * 1,9:1 mot hvitt og kan ikke være tekst eller ring der. Aksenten er her en
 * dyp is (#09649A) med HVIT tekst på fylt flate (5,9:1).
 *
 * KONTRAST (regnet mot de ugjennomsiktige flatene):
 *              bg     surface  raised  raised-2
 *   --text     16,9   18,3     16,2    15,1
 *   --text-2    7,0    7,6      6,7     6,2
 *   --text-3    5,5    5,9      5,2     4,9
 *   --accent    5,5    5,9      5,2     4,9
 *   status      6,0–7,2 på kortflata; 4,5–5,4 på sin egne tonede flate
 *               over en hevet flate
 * Introen (intro.js) er mørk i begge temaene: den er merket, ikke appen. */
:root[data-tema="lys"] {
  color-scheme: light;
  --app-bg: #C3CCD2;
}
:root[data-tema="lys"] .np-root {
  color-scheme: light;
  /* LYS MODUS PÅ NYTT (23.10.2026 kveld, Phillip: «"lys" modus ser helt for jævlig ut»).
     Grunnen var en grønnstikkende grå (#DDE1E0, en tone av #CCD0CF) som så skitten ut,
     et sidefelt som var LYSERE enn sida, og timer i kalenderen i nesten samme flate
     som kolonnene. Nå: kjølige toner av #9BA8AB, hvite kort, kanter som skiller,
     navy #11212D på hovedknappene. Kort mot grunn 1,2:1 pluss kant og skygge.

     DEMPET 24.10.2026 (Phillip: «lys visning er forsatt dritt. altfor lys»): hvitt var
     fortsatt det meste av skjermen. Nå er ingen flate hvit: grunnen er en kjølig skifergrå
     (#C3CCD2), flatene lys skifer (#DEE4E8), og bare det man kan trykke på og det som er
     hevet (timene, popovere) er lysest (#E9EEF1). Teksten er mørkere, så den holder AA på
     den mørkere grunnen. Fargetonen er blå-grå (B > G > R), aldri den grønne tonen av #CCD0CF
     som så skitten ut 23.10. */

  --bg: #C3CCD2;
  --bg-2: #CCD4D9;
  --surface: #DEE4E8;
  --surface-2: #D5DCE1;
  --raised: #E9EEF1;
  --raised-2: #F1F4F6;
  --logo-plate: #F1F4F6;

  --line-soft: #CCD4D9;
  --line: #B6C1C8;
  --line-strong: #96A5AE;
  --line-hover: #788A94;
  --line-input: #627380;

  --text: #06141B;
  --text-2: #283A45;
  --text-3: #3F4F59;
  --text-disabled: #8796A0;
  /* «--white» er panelets STERKESTE tekst (titler, navn, ulest), ikke
     fargen hvit — i lys modus er den nesten svart. Det som skal være hvitt
     uansett tema (ikoner på video), bruker --on-scrim. */
  --white: #040E13;
  /* Initialene og kundens merkefarge: navy fra paletten, ikke svart (var --text). */
  --kunde-merke: #253745;
  --kunde-merke-ink: #FFFFFF;

  --accent: #11212D;
  --accent-hover: #253745;
  --accent-ink: #FFFFFF;
  --accent-muted: rgba(37, 55, 69, 0.10);
  --accent-border: rgba(37, 55, 69, 0.32);
  --selected: rgba(17, 33, 45, 0.11);
  --focus: #253745;

  --ok: #0A5A39;
  --ok-bg: rgba(74, 92, 106, 0.10);
  --ok-border: rgba(74, 92, 106, 0.30);
  --ok-hover: rgba(74, 92, 106, 0.15);
  --warn: #7A4600;
  --warn-bg: rgba(74, 92, 106, 0.10);
  --warn-border: rgba(74, 92, 106, 0.30);
  --warn-hover: rgba(74, 92, 106, 0.15);
  --danger: #9E2430;
  --danger-text: #8E1F27;
  --danger-bg: rgba(74, 92, 106, 0.10);
  --danger-border: rgba(74, 92, 106, 0.30);
  --danger-hover: rgba(74, 92, 106, 0.15);
  --info: #253745;
  --status-arbeid: #1F5A8E;
  --status-booket: #4D7397;
  --status-ankommet: #4A5C6A;
  --info-bg: rgba(37, 55, 69, 0.10);
  --info-border: rgba(37, 55, 69, 0.30);
  /* --ai og --chart-ai: ingen egne verdier — de peker på de nøytrale over. */
  --neutral: #6F7F88;
  --neutral-bg: rgba(74, 92, 106, 0.11);
  --neutral-border: rgba(74, 92, 106, 0.30);
  --disabled-bg: #D0D8DD;

  /* Grafene: is-rampa går fra MØRKEST (viktigst) til lysest — på hvitt er
     det den dype isen som springer fram, ikke den lyse. */
  --chart-primary: #253745;
  --chart-secondary: #5E6E78;
  --chart-positive: #11212D;
  --chart-negative: #9BA8AB;
  --chart-1: #11212D;
  --chart-2: #253745;
  --chart-3: #4A5C6A;
  --chart-4: #6F7F88;
  --chart-5: #9BA8AB;
  --chart-rest: #B3BEC5;
  --chart-grid: #C8D0D6;
  --chart-fill: rgba(37, 55, 69, 0.14);
  --chart-glow: rgba(37, 55, 69, 0);   /* ingen glød på hvitt */
  --chart-hot: #06141B;
  --flyt-1: #11212D;
  --flyt-2: #253745;
  --flyt-3: #4A5C6A;
  --flyt-4: #6F7F88;
  --flyt-5: #9BA8AB;
  --flyt-rest: #AEB9BC;    /* «Resten»: lys nok til å skilles fra kortet (23.10) */
  --flyt-andre: #5E6E78;
  --data: #5E6E78;

  --overlay: rgba(6, 20, 27, 0.42);
  --overlay-soft: rgba(6, 20, 27, 0.22);
  --fill-1: rgba(15, 23, 34, 0.035);
  --fill-2: rgba(15, 23, 34, 0.055);
  --fill-3: rgba(15, 23, 34, 0.08);
  --fill-4: rgba(15, 23, 34, 0.11);
  --hatch: rgba(15, 23, 34, 0.07);

  --elev-card: 0 1px 2px rgba(6, 20, 27, 0.08), 0 0 0 1px rgba(6, 20, 27, 0.07);
  --elev-raised: 0 6px 16px -6px rgba(15, 23, 34, 0.24);
  --elev-pop: 0 18px 48px -16px rgba(15, 23, 34, 0.22), 0 2px 6px rgba(15, 23, 34, 0.08);
  --elev-modal: 0 30px 80px -24px rgba(15, 23, 34, 0.28), 0 0 0 1px var(--line);
  --elev-side: -24px 0 48px -28px rgba(15, 23, 34, 0.22);
  --elev-sheet: 0 -20px 48px -24px rgba(15, 23, 34, 0.25);
  --elev-valgt: 0 1px 2px rgba(15, 23, 34, 0.12);
  --skygge-farge: rgba(15, 23, 34, 0.18);
}
/* Datovelgerens ikon var invertert for mørk flate. */
:root[data-tema="lys"] .np-felt::-webkit-calendar-picker-indicator,
:root[data-tema="lys"] .np-root input::-webkit-calendar-picker-indicator {
  filter: opacity(0.6);
}
:root[data-tema="lys"] .np-root input::-webkit-search-cancel-button {
  filter: opacity(0.5);
}
.np-root *,
.np-root *::before,
.np-root *::after {
  box-sizing: border-box;
}
.np-root a {
  color: var(--ice-tekst);
}
.np-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px calc(56px + env(safe-area-inset-bottom));
}
.np-root :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- topp ---------- */
.np-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.np-brand {
  font-family: var(--np-font-display);
  font-weight: 700;
  font-size: calc(20px * var(--np-skala));
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Logoen er TATT UT her, ikke byttet.
 *
 * Kilda maskerer Nordic Bilstudios egen PNG, og den fila finnes ikke i denne
 * mappa. Demoens ordmerke er skrevet som TEKST og bor i `demo-tillegg.css` —
 * ikke her. Grunnen er at denne 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-brand small {
  display: block;
  font-family: var(--np-font);
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.np-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--np-skala));
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
}
.np-pill.periode {
  background: var(--fill-subtle);
  color: var(--silver);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Et driftsavbrudd, ikke en aksent. I is ville pilla vært umulig å skille
   fra «krever svar»-merket og fra treffantallet i søket. */
.np-pill.nede {
  background: var(--bad-bg);
  color: var(--bad-text);
}
.np-pill.knapp {
  background: transparent;
  color: var(--silver);
  cursor: pointer;
  font-family: inherit;
}
.np-pill.knapp:hover {
  border-color: var(--border-hover);
  color: var(--offwhite);
}

/* ---------- styrelinja: uke fram og tilbake, og de to knappene ---------- */
.np-styre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
}
.np-uke-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Naboene `.np-styre` og `.np-styre-knapper` bryter begge; denne raden var
     den eneste som ikke gjorde det. Foelgen: paa 375 px vokste den til 506 px
     og dro hele kalenderen 151 px ut i sidelengs rulling. Verkstedet bruker
     panelet paa telefon, saa det er ikke en detalj. */
  flex-wrap: wrap;
}
.np-navknapp {
  font-family: inherit;
  font-size: calc(22px * var(--np-skala));
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: var(--r-btn);
  border: 1px solid var(--border-strong);
  background: var(--fill-subtle);
  color: var(--offwhite);
  cursor: pointer;
}
.np-navknapp:hover {
  border-color: var(--border-hover);
}
.np-ukelabel {
  min-width: 168px;
}
.np-ukelabel b {
  display: block;
  font-family: var(--np-font-display);
  font-size: calc(18.5px * var(--np-skala));
  color: var(--white);
  line-height: 1.2;
}
.np-ukelabel span {
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-styre-knapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- ukerutenettet ---------- */
.np-rutenett-boks {
  display: none;
}
@media (min-width: 900px) {
  .np-rutenett-boks {
    display: block;
  }
}
.np-rutenett {
  display: grid;
  /* Reserve for server-HTML før komponenten setter sin egen bredde inline.
     Den ekte aksebredden bor i kontrollpanel.tsx, fordi antall kolonner er
     dynamisk. Holdes i takt med den: 68 px. */
  grid-template-columns: calc(58px * var(--np-skala)) repeat(7, minmax(0, 1fr));
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  overflow: hidden;
}
.np-akse {
  border-right: 1px solid var(--border-faint);
}
.np-akse-topp {
  height: 54px;
  border-bottom: 1px solid var(--border);
}
.np-akse-spor {
  position: relative;
}
.np-akse-time {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: calc(12.5px * var(--np-skala));
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Siste etikett sitter på selve bunnkanten; sentrert ville halve tallet blitt
   klippet av rutenettets overflow. Den legges over linja i stedet. */
.np-akse-time.sist {
  transform: translateY(-100%);
}
.np-kolonne {
  min-width: 0;
  border-right: 1px solid var(--border-faint);
}
.np-kolonne:last-child {
  border-right: 0;
}
/* Dagens kolonne. Husets blå, ikke CarCares røde — den var det siste røde
   igjen etter porteringen, og den lyste opp hele kalenderen i feil farge. */
.np-kolonne.idag {
  background: var(--fill-1);
}
.np-kolonne-hode {
  height: 54px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.np-kh-dag {
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-kh-dato {
  font-family: var(--np-font-display);
  font-size: calc(18.5px * var(--np-skala));
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
.np-kolonne.idag .np-kh-dag,
.np-kolonne.idag .np-kh-dato {
  color: var(--ice-tekst);
}
.np-kh-stengt {
  font-size: calc(12px * var(--np-skala));
  color: var(--silver);
  width: 100%;
  text-align: center;
  margin-top: -6px;
}
.np-flate {
  position: relative;
  cursor: copy;
}
/* Stengte dager får skravur, ikke bare en dus farge — det leser som «her er
   det ingenting å hente» også i et raskt blikk over uka. */
.np-flate.stengt {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 7px,
    var(--hatch) 7px,
    var(--hatch) 14px
  );
  cursor: default;
}
.np-apent {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--fill-2);
  pointer-events: none;
}
.np-strek {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-faint);
  pointer-events: none;
}
.np-naa {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ice);
  pointer-events: none;
  z-index: 3;
}
.np-naa::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ice);
}

.np-time {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ice);
  border-radius: var(--r-sm);
  background: var(--navy3);
  color: var(--offwhite);
  cursor: pointer;
  /* 1.55 fra roten er riktig for prosa og feil her: i et kort paa 26 px spiser
     linjeavstanden plassen navnet skulle hatt. */
  line-height: 1.25;
}
.np-time:hover {
  border-color: var(--border-hover);
  border-left-color: var(--ice);
}
/* Navnet skal ALLTID være synlig. Uten `flex: none` krymper det sammen med
   tjeneste og klokkeslett når boksen er lav, og da blir alle tre uleselige. */
.np-time b {
  flex: none;
  font-size: calc(13.5px * var(--np-skala));
  font-weight: var(--v-halvfet);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kortet tilpasser seg BEGGE retninger.
 *
 * Høyden var det eneste som ble målt før, og det holder ikke: en time som er
 * fire timer lang men bare 55 px bred — fordi tre kunder overlapper i samme
 * spalte — er høy nok til tre linjer og for smal til én eneste av dem. Da sto
 * det «Bj…» over «Pol…» over «09:0», tre avkuttede linjer der én hel hadde
 * vært til nytte.
 *
 * Med kortet som egen målebeholder faller klokkeslettet bort under 108 px og
 * tjenesten under 96 px, slik at navnet får hele plassen — og under 96 px får
 * navnet i tillegg bryte over to linjer. Resten står i detaljkortet, som er
 * ett klikk unna.
 *
 * `container-type: inline-size` måler bare bredde og legger ingen føringer på
 * høyden — kortets høyde er tidens lengde, og den skal den fortsatt være. */
.np-time {
  container-type: inline-size;
}
/* Rekkefølgen ting ofres i, og hvorfor.
 *
 * Klokkeslettet ryker FØRST, og det er med vilje selv om det leser bakvendt:
 * i et tidsrutenett ER kortets plassering klokkeslettet. Overkanten er start,
 * underkanten er slutt, og aksen står rett ved siden av. Teksten «09:00–13:30»
 * gjentar bare det øyet allerede leser av posisjonen.
 *
 * Navnet gjentar ingenting. Det ryker sist. */
@container (max-width: 108px) {
  .np-time i {
    display: none;
  }
}
/* Et ETTLINJES kort har navn og klokkeslett ved siden av hverandre, og da
   konkurrerer de om den samme bredden. Samme regel gjelder: klokkeslettet
   viker. 200 px fordi en dagkolonne i uka er ~170 px — der skal navnet alltid
   stå helt, mens dagsvisningens brede spalter beholder tida. */
@container (max-width: 200px) {
  .np-time.kort i {
    display: none;
  }
}
@container (max-width: 96px) {
  .np-time span {
    display: none;
  }
  /* Navnet får bryte når det er alt som står der. To linjer «Bjørn
     Rasmussen» slår én linje «Bj…».
     `break-word` og ikke `anywhere`: da brytes det på mellomrommet først, og
     bare inne i et ord når ordet alene ikke får plass. `hyphens: auto` gir
     bindestrek når det først må skje — «Halvor-sen» leser som et navn,
     «Halvorse n» gjør det ikke. Krever lang="nb" på <html>, som ruta setter. */
  .np-time b,
  /* Også ettlinjes-kortet. `.np-time.kort b` setter `nowrap` og vinner på
     spesifisitet uansett hvilken beholderspørring vi står i, så det må sies
     her. Et kort som er BÅDE lavt og smalt får ikke navnet inn på én linje —
     og to linjer à 12,5 px er 30 px, som får plass i et kort på 51. */
  .np-time.kort b {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: calc(12.5px * var(--np-skala));
    line-height: 1.2;
    /* Et lavt kort har plass til NØYAKTIG to linjer. Uten taket brøt
       «Silje Andreassen» til tre — «Silje / Andreas- / sen» — og den tredje
       ble klippet på midten av kortets `overflow: hidden`. Målt: to av
       tjueén kort. Med taket ender linje to i prikker i stedet, som er et
       signal om at det er mer, ikke en halv bokstavrekke. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Under ~45 px er det plass til én linje. Da står navnet, og klokkeslettet
   får resten av plassen; tjenesten leser man i detaljkortet. */
.np-time.kort {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
}
.np-time.kort span {
  display: none;
}
/* Paa én linje maa navnet faa lov aa krympe. `.np-time b` er `flex: none` —
   riktig i det stablede kortet, der navnet ellers presses bort av tjenesten,
   men feil her: to `flex: none` ved siden av hverandre kan ikke dele en for
   smal rad, og klokkeslettet ble skjovet ut av kortet og klippet til «1».
   Navnet krymper og faar prikker; klokkeslettet er kort og staar fast. */
.np-time.kort b {
  flex: 1 1 auto;
  min-width: 0;
  /* `white-space: nowrap` STO HER, og det var feil sted for den.
     `.np-time b` setter den allerede, så den var overflødig — og fordi
     `.np-time.kort b` veier tyngre enn `.np-time b`, og en beholderspørring
     IKKE gir ekstra vekt, slo denne linja bryteregelen inne i
     `@container (max-width: 96px)` ovenfor. Følgen, målt: alle åtte
     ettlinjes-kortene i uka sto på 81 px med `nowrap` og kappet navnet, mens
     de høye kortene ved siden av brøt pent. */
}
.np-time.kort i {
  margin-left: auto;
  flex: none;
}
.np-time span {
  font-size: calc(13px * var(--np-skala));
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-time i {
  font-style: normal;
  font-size: calc(12.5px * var(--np-skala));
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Nye, ubekreftede timer er stiplet — de krever et svar. Fyllet ligger et hakk
   UNDER det bekreftede kortet, slik at kortet leser som utstanset og ikke
   ferdig satt. Samme forhold som før, bare i den mørke rampa. */
.np-time.ny {
  border-style: dashed;
  border-left-style: solid;
  background: var(--navy25);
}
.np-time.valgt {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
/* Avlyst er GRÅTT, ikke rødt. Rødt er aksenten nå, og en avlyst time er ikke
   noe man skal se etter — den er død. Se toppen av fila. */
.np-time.avlyst {
  /* Skravur, ikke farge. Kanten BEHOLDER personens farge, for i en samlet uke
     er fargen det eneste som sier hvem — og gjorde vi avlyste grå, delte de
     nøyaktig samme grå med «Ufordelt», og fargeforklaringa under rutenettet
     ble tvetydig. Nå betyr farge alltid HVEM, og skravuren pluss
     gjennomstrekingen betyr «denne står ikke lenger». To uavhengige signaler,
     ingen av dem farge alene (WCAG 1.4.1). */
  /* Det avlyste kortet var LYSERE enn naboene i det svarte temaet, der
     de mørke trinnene ligger tett. På navy er trinnene lengre fra
     hverandre, og et lyst kort løfter bakgrunnen under den dempede
     teksten. MÅLT i nettleseren: --silver på fill-subtle over
     `.np-kolonne.idag` ga 4,34:1 — under AA, og nettopp i dagens egen
     kolonne, der man ser etter.
     Kortet legges derfor et trinn NED i stedet for opp. --navy2 er
     ugjennomsiktig, så tallet blir det samme i alle kolonner: 5,89:1.
     Det leser dessuten riktigere: den aktive timen er hevet (--navy3),
     den avlyste er sunket. Skravuren og gjennomstrekingen står. */
  background-color: var(--navy2);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    var(--hatch) 5px,
    var(--hatch) 10px
  );
  /* `opacity: 0.65` sto her og dro BAADE navnet og klokkeslettet under
     kontrastgrensa — 0,65 x et allerede dempet graatt er ikke lesbart. Den
     doede tilstanden vises naa med gjennomstreking, dempet ramme og et graatt
     merke, som er signaler man kan lese. Se toppen av fila. */
  border-color: var(--border-faint);
}
.np-time.avlyst b,
.np-time.avlyst span,
.np-time.avlyst i {
  color: var(--silver);
}
.np-time.avlyst b {
  text-decoration: line-through;
}

.np-blokk {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 1;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-faint);
  background-color: var(--fill-2);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    var(--hatch) 5px,
    var(--hatch) 10px
  );
  display: flex;
  align-items: flex-start;
  padding: 3px 7px;
  overflow: hidden;
}
.np-blokk span {
  font-size: calc(12.5px * var(--np-skala));
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-blokk:hover {
  border-color: var(--border-hover);
}
.np-blokk.valgt {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.np-hint {
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
  margin-top: 10px;
}

/* ---------- daglista (telefon) ---------- */
.np-dagliste {
  display: block;
}
@media (min-width: 900px) {
  .np-dagliste {
    display: none;
  }
}
.np-dagstripe {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.np-dagknapp {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 52px;
  padding: 8px 6px;
  border-radius: var(--r-btn);
  border: 1px solid var(--border-faint);
  background: var(--navy2);
  color: var(--offwhite);
  font-family: inherit;
  cursor: pointer;
  position: relative;
}
.np-dagknapp span {
  display: block;
  font-size: calc(12px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-dagknapp b {
  display: block;
  font-size: calc(18.5px * var(--np-skala));
  font-family: var(--np-font-display);
  font-variant-numeric: tabular-nums;
}
/* Antallet står UNDER datoen, ikke oppå ukedagen.
   Merket var `position: absolute; top: 4; right: 5` og lå da over høyre halvdel
   av «MAN» — usynlig så lenge teksten var liten nok, og en kollisjon i det
   skrifta ble lesbar. Et tall som skjuler ukedagen er verre enn intet tall.
   I flyten kan de to ikke kollidere, uansett tekststørrelse. */
.np-dagknapp i {
  display: block;
  margin: 3px auto 0;
  width: fit-content;
  font-style: normal;
  font-size: calc(12px * var(--np-skala));
  font-weight: 700;
  min-width: calc(2ch + 6px);
  line-height: 1.5;
  border-radius: var(--r-pill);
  background: var(--ice-fyll);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.np-dagknapp.idag span {
  color: var(--ice-tekst);
}
.np-dagknapp.valgt {
  border-color: var(--ice);
  background: var(--navy25);
}
.np-dagkort {
  margin-top: 12px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  padding: 16px;
}
.np-dagkort-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.np-dagkort-hode h2 {
  font-family: var(--np-font-display);
  font-size: calc(18.5px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
}
.np-dagkort-hode span {
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
}
.np-dagrad {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-faint);
  padding: 11px 0;
  color: inherit;
  cursor: pointer;
}
.np-dagrad:first-of-type {
  border-top: 0;
}
.np-dr-tid {
  /* Bredden fulgte Panchangs sifre. Inter sine er 43 % smalere, og de er
     tabulaere — «08:00» maaler naa 40 px ved skala 1. Med ch-enheten foelger
     bredden BEGGE deler: skrifta og skalaknappen. */
  flex: 0 0 calc(5.4ch + 8px);
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
  font-variant-numeric: tabular-nums;
  font-size: calc(15px * var(--np-skala));
}
.np-dr-tid span {
  display: block;
  font-weight: 400;
  font-size: calc(13px * var(--np-skala));
  color: var(--silver);
}
.np-dr-hva {
  flex: 1;
  min-width: 0;
}
.np-dr-hva b {
  display: block;
  color: var(--white);
  font-weight: var(--v-halvfet);
  font-size: calc(15px * var(--np-skala));
  line-height: 1.35;
}
.np-dr-hva small {
  display: block;
  color: var(--silver);
  font-size: calc(13.5px * var(--np-skala));
}
.np-dagrad.valgt {
  background: var(--navy25);
  border-radius: var(--r-sm);
  padding-left: 8px;
  padding-right: 8px;
}
.np-dagrad.avlyst .np-dr-hva b {
  text-decoration: line-through;
  color: var(--silver);
}
.np-dagrad.blokkert {
  cursor: default;
}
.np-dagrad.blokkert .np-dr-hva b {
  color: var(--silver);
  font-weight: 600;
}

.np-status {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: var(--v-halvfet);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
/* Tre merker, tre betydninger, tre farger som ikke kan forveksles:
   grønn = ferdig, rød = krever svar, grå = død. Får «Avlyst» rødt merke igjen,
   ser den ubekreftede og den avlyste timen like ut nedover en dagliste. */
.np-status.ok {
  color: var(--green);
  background: var(--green-bg);
}
.np-status.ny {
  color: var(--ice-tekst);
  background: var(--ice-bg);
}
.np-status.av {
  color: var(--silver);
  background: var(--fill-subtle);
}

/* ---------- detaljer om én time ---------- */
.np-detalj {
  margin-top: 16px;
  background: var(--navy25);
  border: 1px solid var(--ice);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  padding: 18px;
}
.np-detalj-hode {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.np-detalj-hode h2 {
  font-family: var(--np-font-display);
  font-size: calc(22px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.np-detalj-hode p {
  font-size: calc(14.5px * var(--np-skala));
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-detalj-merker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.np-kilde {
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--silver);
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.np-detalj-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.np-dl {
  display: block;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-detalj-rutenett b {
  font-weight: 700;
  color: var(--white);
  font-size: calc(15px * var(--np-skala));
  word-break: break-word;
}
.np-notat {
  margin-top: 12px;
  font-size: calc(14.5px * var(--np-skala));
  color: var(--offwhite);
  background: var(--fill-subtle);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 9px 12px;
}
.np-detalj .np-knapper {
  margin-top: 14px;
}
.np-flytt {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}
.np-tel {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.np-tel:hover {
  text-decoration: underline;
}

/* ---------- skjemaer ---------- */
.np-skjema {
  margin-bottom: 16px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  padding: 18px;
}
.np-skjema-hode {
  margin-bottom: 14px;
}
.np-skjema-hode h2 {
  font-family: var(--np-font-display);
  font-size: calc(18.5px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
}
.np-skjema-hode p {
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
  margin-top: 2px;
}
.np-felt-rad {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.np-lab {
  display: block;
  flex: 1 1 190px;
  min-width: 0;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-lab.smal {
  flex: 0 1 140px;
}
.np-lab.bred {
  flex: 2 1 320px;
}
/* Bekreftelsen på at nummeret er kjent fra før — den skal leses som en
   opplysning, ikke som en feilmelding. */
.np-kjent {
  display: block;
  margin-top: 5px;
  font-size: calc(13px * var(--np-skala));
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ice-tekst);
}
.np-valgfri {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
.np-felt {
  display: block;
  width: 100%;
  margin-top: 5px;
  font-family: inherit;
  /* 16px: alt under gir fokus-zoom i Safari på iPhone. */
  font-size: calc(16px * var(--np-skala));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--offwhite);
  background: var(--navy);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  padding: 10px 12px;
}
.np-felt::placeholder {
  color: var(--silver);
}
.np-felt:focus {
  border-color: var(--ice);
}
/* `outline: none` sto på `:focus` og slo derfor ut den blå ringa fra
   `.np-root :focus-visible` (lik spesifisitet, men senere i fila) på alle
   feltene i panelet. Igjen sto bare en kantfargeendring — for lite til at
   den som styrer med tastatur ser hvor hen er i et skjema med ti felter.
   Ringa er tilbake for tastatur; musklikk er fortsatt rene, som var det
   `outline: none` egentlig var der for. */
.np-felt:focus:not(:focus-visible) {
  outline: none;
}
/* Datovelgerens ikon er svart på mørk bakgrunn uten dette. */
.np-felt::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
  cursor: pointer;
}

/* ---------- blokkert tid ---------- */
.np-blokkliste {
  margin-top: 16px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.np-blokkliste h2 {
  font-family: var(--np-font-display);
  font-size: calc(16px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.np-blokkrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border-faint);
  font-size: calc(14.5px * var(--np-skala));
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-blokkrad b {
  color: var(--offwhite);
  font-weight: 700;
}
.np-mini-btn {
  font-family: inherit;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--fill-subtle);
  color: var(--offwhite);
  cursor: pointer;
}
.np-mini-btn:hover:not(:disabled) {
  border-color: var(--border-hover);
}
.np-mini-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Det destruktive skal ikke lyse i husets aksent. En «Avlys»-knapp som
   får samme is-glød som «Lagre» lærer folk at fargen ikke betyr noe. */
.np-mini-btn.fare:hover:not(:disabled) {
  color: var(--bad-text);
  background: var(--bad-bg);
  border-color: var(--bad);
}

/* ---------- knapper, meldinger, bunn ---------- */
.np-knapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.np-btn {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: calc(15px * var(--np-skala));
  padding: 10px 18px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
}
.np-btn.liten {
  font-size: calc(14px * var(--np-skala));
  padding: 8px 14px;
}
/* Fylt is med MØRK navy etikett. Dette er NordicOps' egen knapperegel, og
   den følger av at aksenten er lys: hvit tekst på #7DD3FC måler 1,9:1.
   Aldri gradient-fyll, aldri hvit etikett. */
.np-btn.prim {
  background: var(--ice-fyll);
  color: var(--navy);
}
.np-btn.sek {
  background: var(--fill-subtle);
  color: var(--offwhite);
  border-color: var(--border-strong);
}
.np-btn.sek:hover:not(:disabled) {
  border-color: var(--border-hover);
}
.np-btn.sek.fare:hover:not(:disabled) {
  color: var(--bad-text);
  background: var(--bad-bg);
  border-color: var(--bad);
}
.np-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.np-feil {
  margin-top: 12px;
  font-size: calc(14px * var(--np-skala));
  /* En FEIL, ikke en opplysning. På det gamle temaet var aksenten rød,
     og da bar aksenten selv beskjeden. Is gjør ikke det: fokusringen,
     den valgte timen og primærknappen er alle is, og en feilmelding i
     samme farge forsvinner i mengden. --bad-text og ikke --bad som
     tekstfarge — --bad på tonet rødt måler 4,21:1 og ryker AA. */
  color: var(--bad-text);
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}
.np-tom {
  color: var(--silver);
  font-size: calc(14.5px * var(--np-skala));
  padding: 10px 0;
}
.np-foot {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.np-foot p {
  font-size: calc(14px * var(--np-skala));
  color: var(--silver);
  max-width: 58ch;
}

/* ---------- låseskjerm ---------- */
.np-las {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.np-las-kort {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-card);
  padding: 28px;
  width: 100%;
  max-width: 400px;
}
.np-las-kort h1 {
  font-family: var(--np-font-display);
  font-size: calc(21px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.np-las-kort p {
  font-size: calc(14.5px * var(--np-skala));
  color: var(--silver);
  margin-top: 6px;
}
.np-las .np-felt {
  margin-top: 18px;
}
.np-las .np-btn {
  width: 100%;
  margin-top: 12px;
  text-align: center;
}
/* Hjelpelinja under feltene. Den er ikke pynt: den er den ENESTE stedet som
   sier at et tomt brukernavn gir verkstedspassordet, og verkstedet trenger den
   veien den dagen kontoene ikke svarer. Dempet, men ikke usynlig. */
.np-las-hjelp {
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
  margin-top: 10px;
}
/* Flagget under knappen: en rolig, sentrert rad, ikke en knapp til. Det skal
   ikke konkurrere med «Lås opp», bare være der for den som trenger det. */
.np-las-sprak {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .np-root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
  .np-root * {
    transition: none !important;
  }
}

/* ── Trafikk & drift ──────────────────────────────────────────────────────
   Ligger under kalenderen. Verkstedet skal lese ÉN ting her: hvor mange så
   på sida, og hvor mange av dem bestilte. Alt annet er støtte til det. */
.np-tr { margin-top: 28px; }
.np-tr-hode {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.np-tr-hode h2 {
  margin: 0; font-size: calc(20px * var(--np-skala)); font-weight: 700; letter-spacing: -0.02em;
  color: var(--offwhite);
}
.np-tr-valg { display: flex; gap: 6px; }
.np-tr-valg button {
  min-height: 34px; padding: 0 12px; font: inherit; font-size: calc(14px * var(--np-skala));
  color: var(--silver); background: transparent; cursor: pointer;
  border: 1px solid var(--border-faint); border-radius: 2px;
}
.np-tr-valg button[aria-pressed="true"] {
  color: var(--navy); background: var(--ice-fyll); border-color: var(--ice-fyll);
}

.np-tr-tall {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.np-tr-kort {
  padding: 14px 16px; background: var(--navy2);
  border: 1px solid var(--border-faint); border-radius: 3px;
}
.np-tr-kort dt {
  font-size: calc(12.5px * var(--np-skala)); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver); margin-bottom: 6px;
}
.np-tr-kort dd {
  margin: 0; font-size: calc(30px * var(--np-skala)); font-weight: 700; letter-spacing: -0.02em;
  color: var(--offwhite); font-variant-numeric: tabular-nums;
}
.np-tr-kort .np-tr-under { font-size: calc(13px * var(--np-skala)); color: var(--silver); font-weight: 400; }

/* Søylene. Ren CSS-høyde — ingen graf-bibliotek for fjorten tall. */
.np-tr-graf {
  display: grid; gap: 3px; align-items: end; height: 132px;
  padding: 0 2px; border-bottom: 1px solid var(--border-faint);
}
.np-tr-soyle { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.np-tr-del { border-radius: 1px 1px 0 0; min-height: 0; }
.np-tr-del.besok { background: var(--ice-fyll); }
.np-tr-del.bestilt { background: var(--green); }
.np-tr-akse {
  display: grid; gap: 3px; margin-top: 6px;
  font-size: calc(12px * var(--np-skala)); color: var(--silver); text-align: center;
  font-variant-numeric: tabular-nums;
}
.np-tr-skala {
  margin: 0 0 6px; font-size: calc(12.5px * var(--np-skala)); color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-tr-tegn { display: flex; gap: 16px; margin-top: 14px; font-size: calc(13px * var(--np-skala)); color: var(--silver); }
.np-tr-tegn span { display: inline-flex; align-items: center; gap: 6px; }
.np-tr-prikk { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.np-tr-drift {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-faint);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: calc(14px * var(--np-skala)); color: var(--silver);
}
.np-tr-drift b { color: var(--offwhite); font-weight: 600; }

/* ── Måned mot måned ──────────────────────────────────────────────────── */
.np-st { margin-top: 28px; }
.np-st-tall {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.np-st-kort {
  padding: 14px 16px; background: var(--navy2);
  border: 1px solid var(--border-faint); border-radius: 3px;
}
.np-st-kort dt {
  font-size: calc(12.5px * var(--np-skala)); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver); margin-bottom: 6px;
}
.np-st-kort dd {
  margin: 0; font-size: calc(30px * var(--np-skala)); font-weight: 700; letter-spacing: -0.02em;
  color: var(--offwhite); font-variant-numeric: tabular-nums;
}
.np-st-endring {
  display: inline-flex; align-items: baseline; gap: 5px;
  margin-top: 6px; font-size: calc(13px * var(--np-skala)); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.np-st-endring.opp   { color: var(--green); }
.np-st-endring.ned   { color: var(--warn); }
.np-st-endring.flatt { color: var(--silver); }
.np-st-endring span { color: var(--silver); font-weight: 400; }

.np-st-topp { margin-top: 16px; }
.np-st-topp h3 {
  margin: 0 0 8px; font-size: calc(13px * var(--np-skala)); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--silver); font-weight: 600;
}
.np-st-topp ol { list-style: none; margin: 0; padding: 0; }
.np-st-topp li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--border-faint);
  font-size: calc(15px * var(--np-skala)); color: var(--offwhite);
}
.np-st-topp li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--silver); }

/* ── Trykkflater paa telefon ──────────────────────────────────────────────
   Panelet ble tegnet for skjerm og mus. Verkstedet — og kunden som skal se
   det — aapner det like gjerne paa telefonen, og der er «Log out» paa 31 px
   og ukepilene paa 38 px for smaa til aa treffe. 44 px er grensa, og
   ukepilene er verst fordi de trykkes om og om igjen.

   `pointer: coarse` og ikke en bredde: det er FINGEREN som er kravet, ikke
   skjermstoerrelsen. En berøringsskjerm paa 1024 px trenger det samme. */
@media (pointer: coarse) {
  .np-pill,
  .np-pill.knapp,
  .np-navknapp,
  .np-styre-knapper button,
  .np-tr-valg button,
  .np-btn.liten,
  .np-mini-btn {
    min-height: 44px;
  }
  .np-navknapp {
    min-width: 44px;
  }

  /* Handlingsknappene som HELE rader, ikke som en brukket linje.
     Maalt paa 375 px: «Ny time», «Blokker tid» og «Ansatte» krever 408 px i
     en beholder paa 335, saa de faar aldri plass paa én rad uten aa krympe
     skrifta. Da er valget mellom to rader som ser ut som et uhell — «Ansatte»
     alene, venstrestilt — og to rader som ser bevisste ut.
     `flex: 1 1 0` gir like brede knapper som fyller raden ut. Det leser som en
     segmentkontroll, ikke som tekst som ikke fikk plass. */
  .np-styre-knapper {
    width: 100%;
  }
  .np-styre-knapper button {
    /* `1 1 auto`, ikke `1 1 0`. Med like tredjedeler ble «Blokker tid» presset
       til to linjer og den knappen ble hoeyere enn de to andre — en ujevn rad
       ser mer uferdig ut enn en ekstra rad gjoer. Med `auto` beholder hver
       knapp sin egen tekstbredde og strekker seg deretter ut i det som er
       igjen, saa BEGGE radene blir flush i begge kanter og ingen ord brekker. */
    flex: 1 1 auto;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── Tekststørrelsen ──────────────────────────────────────────────────────
   Tre A-er i stigende størrelse. Bokstaven ER kontrollen — den viser hva den
   gjør uten å skrive det, og den trenger ingen oversettelse.

   Knappene skalerer med vilje IKKE med `--np-skala`. En kontroll som flytter
   seg og vokser mens man trykker på den, er vanskelig å treffe to ganger på
   rad, og det er nettopp det man gjør når man leter etter riktig trinn. */
.np-tekstvelger {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.np-tv-knapp {
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  min-width: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--silver);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.np-tv-knapp + .np-tv-knapp {
  border-left: 1px solid var(--border-faint);
}
.np-tv-knapp:hover {
  color: var(--offwhite);
}
.np-tv-knapp.valgt {
  /* Valgt segment er nøytralt, som .np-seg (fargerunden 22.10, natt). */
  background: var(--raised-2);
  color: var(--text);
}

/* Bare for skjermleser. `display: none` og `visibility: hidden` tar teksten ut
   av tilgjengelighetstreet også — da står knappen igjen som en naken «A». */
.np-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Fargeforklaring under uka ────────────────────────────────────────────
   Tegnes bare når dagene står samlet. Da er den venstre fargekanten på kortet
   det eneste som sier hvem timen er på, og en farge uten forklaring er pynt. */
.np-tegn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: calc(13px * var(--np-skala));
  color: var(--silver);
}
.np-tegn span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ── Finn: søk og kommende timer ──────────────────────────────────────────
   Lista er rutenettets lesbare tvilling. Den viser det samme, men i en form
   som virker på en telefon, i en skjermleser og fire måneder fram i tid — tre
   steder rutenettet ikke rekker. */
.np-finn {
  margin-top: 20px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-card);
  padding: 16px 18px;
}
.np-finn-hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.np-finn-hode h2 {
  margin: 0;
  font-size: calc(18.5px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
}
.np-finn-bryter {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.np-finn-tall {
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  color: var(--ice-tekst);
  background: var(--ice-bg);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.np-finn-styre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 300px;
  justify-content: flex-end;
}
.np-finn-felt {
  flex: 1 1 240px;
  max-width: 380px;
  min-width: 0;
}
.np-finn-felt .np-felt {
  margin-top: 0;
}

.np-finn-mnd {
  margin-top: 16px;
}
.np-finn-mnd h3 {
  margin: 0 0 4px;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-finn-rad {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-faint);
  padding: 11px 0;
  color: inherit;
  cursor: pointer;
}
.np-finn-rad.valgt {
  background: var(--navy25);
  border-radius: var(--r-sm);
  padding-left: 10px;
  padding-right: 10px;
}
/* Datoblokka er tallet og ukedagen stablet, ikke en dato på én linje. Det gjør
   den til et anker øyet kan hoppe nedover, i stedet for tekst som må leses. */
.np-finn-dato {
  flex: 0 0 auto;
  min-width: calc(3.4ch + 14px);
  text-align: center;
  line-height: 1.1;
}
.np-finn-dato b {
  display: block;
  font-size: calc(20px * var(--np-skala));
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.np-finn-dato span {
  display: block;
  font-size: calc(12px * var(--np-skala));
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.np-finn-hva {
  flex: 1 1 auto;
  min-width: 0;
}
.np-finn-hva b {
  display: block;
  font-size: calc(15px * var(--np-skala));
  font-weight: var(--v-halvfet);
  color: var(--white);
  line-height: 1.35;
}
.np-finn-hva small {
  display: block;
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
}
.np-finn-hoyre {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.np-finn-om {
  font-size: calc(13px * var(--np-skala));
  color: var(--silver);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.np-finn-rad.avlyst .np-finn-hva b,
.np-finn-rad.avlyst .np-finn-dato b {
  text-decoration: line-through;
  color: var(--silver);
}
.np-finn-hoyre .np-status {
  margin-left: 0;
}

@media (max-width: 560px) {
  /* «Om fire måneder» og merket under hverandre til høyre stjeler halve raden
     på en telefon. Da flyttes de under teksten i stedet. */
  .np-finn-rad {
    flex-wrap: wrap;
  }
  /* `width: 100%` PLUSS en venstremarg er 100 % + margen, og det er nøyaktig
     så mye raden stakk utenfor: målt 23 px vannrett rulling på hele panelet
     ved både 390 og 360 px. Hele sida vagget sidelengs på telefon, i det
     verktøyet verkstedet bruker hver dag. Bredden trekker nå fra margen. */
  .np-finn-hoyre {
    width: calc(100% - 3.4ch - 28px);
    margin-left: calc(3.4ch + 28px);
    justify-content: flex-start;
  }
}

/* ── Hurtigtastlista ────────────────────────────────────────────────────── */
.np-taster {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
}
.np-taster > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.np-taster dt {
  flex: 0 0 auto;
}
.np-taster dd {
  margin: 0;
  font-size: calc(13.5px * var(--np-skala));
  color: var(--silver);
}
.np-taster kbd {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-family: inherit;
  font-size: calc(12.5px * var(--np-skala));
  font-weight: 700;
  color: var(--offwhite);
  background: var(--fill-subtle);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 3px 8px;
}

/* ── Utskrift ─────────────────────────────────────────────────────────────
   Et verksted skriver ut dagen og henger den på veggen. Det som da skal på
   papiret er LISTA, ikke rutenettet.

   Grunnen er ikke smak: rutenettets kort er `position: absolute` inne i en
   flate med fast høyde, og absolutt plasserte elementer lar seg ikke dele over
   sider — nettleseren klipper dem eller kaster dem. En liste flyter, og bryter
   der den skal. Det er samme valg FullCalendar tar med `eventPrintLayout:
   'stack'`.

   Daglista er allerede i DOM-en for telefonvisningen, så det koster ingenting
   å bruke den: her slås den bare PÅ igjen og settes i svart på hvitt. */
@media print {
  .np-root {
    --np-skala: 1;
    background: #fff;
    color: #000;
    min-height: 0;
  }
  .np-wrap {
    max-width: none;
    padding: 0;
  }
  /* Alt som er en handling er meningsløst på papir. */
  .np-topbar,
  .np-styre,
  .np-rutenett-boks,
  .np-finn,
  .np-blokkliste,
  .np-tr,
  .np-st,
  .np-foot,
  .np-skjema,
  .np-dagstripe,
  .np-detalj .np-knapper,
  .np-tekstvelger {
    display: none !important;
  }
  .np-dagliste {
    display: block !important;
  }
  .np-dagkort,
  .np-detalj {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .np-dagkort-hode h2,
  .np-dr-hva b,
  .np-dr-tid,
  .np-detalj-hode h2,
  .np-detalj-rutenett b {
    color: #000;
  }
  .np-dagkort-hode span,
  .np-dr-hva small,
  .np-dr-tid span,
  .np-dl,
  .np-detalj-hode p {
    color: #333;
  }
  .np-dagrad {
    border-top: 1px solid #bbb;
    /* Én time skal ikke deles i to av et sideskift. */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .np-status {
    border: 1px solid #666;
    color: #000 !important;
    background: none !important;
  }
  /* Filterknappene over lista er en kontroll, ikke innhold. */
  .np-dagkort .np-mini-btn {
    display: none;
  }
}

/* ── SKILTET: en kopi av det norske skiltet, brukt i hele ONE (23.10.2026) ──
   Målt på fotograferte skilt, rettet opp til 520 × 110 mm (hele skiltet synlig
   på en vegg, tre andre i skiltholder til kryssjekk). Alle mål er brøker av
   skiltets høyde H, så skiltet er det samme i 18 px og i 440 px:

     bredde 520/110 H · kantlinje 2 mm (1,8 %, aldri under 1 px) · hjørner 5,5 mm
     blått felt til 53,5 mm fra kanten · flagg 38,25 × 27,8 mm, toppen 15,75 mm ned
     N 20 mm høy, bunnen 90 mm ned · tegn 75 mm høye (0,682 H), midt 55,5 mm ned,
     sentrert i det hvite feltet (+1,5 mm, som målt)

   Skriften er ONE Skilt, tegnet etter skiltene selv (one-font/skilt). Mellom-
   rommet mellom bokstavene og sifrene (0,6 tegnhøyder) bor i fontens mellomrom,
   så teksten er et vanlig «EL 48213». DIN-skriftene står bare som reserve.
   Markupen: NB.h.skilt (kjerne.js). Står her og ikke i stil-timekort.css,
   fordi hver side som laster kjerne.js også laster panel.css. */
.np-root .np-skilt {
  --skilt-h: calc(22px * var(--np-skala, 1));
  --skilt-kant: max(1px, round(nearest, calc(var(--skilt-h) * 0.018), 1px));
  position: relative;
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  /* hele piksler i høyde og bredde: kanten blir skarp, og den skarpe svg-en
     (NB.skarpSkilt) får en innholdsboks som går opp i skjermpiksler. Med
     tekstskala 1,12 er 22 px ellers 24,64. */
  height: var(--skilt-h);
  height: round(nearest, var(--skilt-h), 1px);
  width: calc(var(--skilt-h) * 520 / 110);
  width: round(nearest, calc(var(--skilt-h) * 520 / 110), 1px);
  font-size: var(--skilt-h);
  line-height: 1;
  vertical-align: middle;
  border: var(--skilt-kant) solid var(--skilt-svart);
  border-radius: calc(var(--skilt-h) * 0.05);
  background: var(--skilt-hvit);
  color: var(--skilt-svart);
  overflow: hidden;
  white-space: nowrap;
}
/* Den skarpe forsiden (NB.skarpSkilt i kjerne.js): svg-en i skjermpiksler ligger
   over innholdsboksen; feltet under skjules og teksten blir gjennomsiktig, men
   står der for søk, markering og skjermlesere. */
.np-root .np-skilt-skarp {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}
.np-root .np-skilt.er-skarp:not(.np-skilt--one) .np-skilt-felt { visibility: hidden; }
.np-root .np-skilt.er-skarp .np-skilt-tegn { color: transparent; }
.np-root .np-skilt-skarp .b { fill: var(--skilt-bla); }
.np-root .np-skilt-skarp .r { fill: var(--skilt-rod); }
.np-root .np-skilt-skarp .v { fill: var(--skilt-hvit); }
.np-root .np-skilt-skarp .k { fill: var(--skilt-kryss); }
.np-root .np-skilt-skarp .t { fill: var(--skilt-svart); }
@media (forced-colors: active) {
  .np-root .np-skilt-skarp { display: none; }
  .np-root .np-skilt.er-skarp .np-skilt-felt { visibility: visible; }
  .np-root .np-skilt.er-skarp .np-skilt-tegn { color: inherit; }
}
.np-root .np-skilt.liten { --skilt-h: calc(18px * var(--np-skala, 1)); }
/* ── ONE-SKILTET (23.10.2026, standard): skiltets tegn og form i ONEs farger ──
   Phillip: «lag one versjon av rg nr er litt stygt med det norske». Valgt blant
   fire; Phillip valgte A, «mørkt, nøytralt» (først bygd med is-merket, B): en
   hevet flate med kant som en radhandling, ONE-N-en i dempet tekst på et mørkere
   felt med en strek mot tegnene der flagget og N-en sto, skilttegnene (ONE Skilt)
   i sterkeste tekst, og bredden etter innholdet i stedet for 520/110. Ingen is:
   skiltet er en opplysning, ikke en handling. Det norske: NB.VIS.skilt = "norsk". */
.np-root .np-skilt.np-skilt--one {
  width: auto;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--skilt-h) * 0.24);
  background: var(--raised);
  color: var(--text);
}
.np-root .np-skilt--one .np-skilt-felt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--skilt-h) * 0.92);
  width: round(nearest, calc(var(--skilt-h) * 0.92), 1px);
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
}
/* Merket er ONE-N-en (#i-merke i index.html) som maske, så skiltet ikke trenger
   ikonarket på sida og ikke bærer 2 kB sti per skilt. */
.np-root .np-skilt--one .np-skilt-felt::before {
  content: "";
  display: block;
  width: 56%;
  height: 56%;
  background: currentColor;
  -webkit-mask: var(--skilt-merke) center / contain no-repeat;
  mask: var(--skilt-merke) center / contain no-repeat;
}
.np-root .np-skilt--one {
  --skilt-merke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370 340'%3E%3Cpath d='M82.88,1.38 L91.00,1.50 L93.12,2.00 L99.50,2.25 L102.50,3.38 L106.75,3.88 L108.88,4.88 L111.62,5.25 L113.12,6.25 L116.12,6.88 L117.38,7.75 L119.75,8.25 L121.00,9.25 L122.88,9.75 L124.00,10.75 L131.00,14.12 L137.62,18.50 L144.75,24.88 L195.12,76.88 L209.88,91.38 L226.75,109.00 L226.88,110.38 L200.25,135.75 L197.12,138.62 L196.00,138.88 L181.25,124.25 L149.88,91.62 L137.00,79.00 L113.88,54.88 L108.38,50.38 L103.25,47.62 L99.88,46.12 L97.50,45.75 L95.75,44.75 L92.38,44.50 L89.75,43.62 L82.12,43.38 L78.62,44.50 L75.00,44.75 L73.00,45.88 L70.88,46.12 L67.12,47.88 L60.88,51.88 L54.38,58.25 L50.25,65.12 L49.00,68.38 L48.38,72.62 L48.88,78.25 L54.38,84.50 L118.12,149.50 L163.50,196.75 L171.88,204.75 L184.88,218.75 L252.25,287.25 L257.25,291.38 L262.75,294.38 L266.00,295.75 L268.75,296.12 L270.25,297.00 L276.00,297.75 L282.25,297.88 L289.75,297.25 L298.38,294.25 L303.62,291.25 L311.12,285.00 L317.00,277.50 L319.88,272.38 L319.62,267.00 L318.38,265.00 L310.00,256.00 L300.00,246.25 L281.00,226.12 L221.50,165.12 L221.38,164.00 L249.50,137.88 L251.75,136.25 L252.75,136.38 L317.00,202.62 L321.00,206.25 L322.12,208.12 L323.88,208.38 L324.38,207.38 L324.12,3.38 L324.62,2.50 L325.88,2.38 L327.38,3.62 L329.00,3.88 L330.25,4.88 L331.75,5.12 L337.12,7.88 L339.25,8.25 L340.75,9.38 L345.75,11.12 L350.62,13.75 L355.50,15.50 L357.12,16.62 L365.88,20.00 L368.25,21.25 L368.75,22.12 L368.62,259.38 L368.00,261.88 L368.12,264.75 L367.25,270.62 L365.62,276.88 L362.75,284.88 L361.50,286.88 L360.00,290.88 L353.75,301.50 L347.88,308.75 L341.88,315.00 L331.62,323.38 L324.75,327.62 L318.62,330.75 L312.00,333.50 L304.12,335.75 L302.50,336.62 L292.50,338.38 L285.38,339.00 L275.88,339.12 L263.50,337.88 L257.12,336.50 L248.00,333.50 L241.50,330.75 L233.38,326.38 L227.12,322.25 L221.62,317.75 L212.88,308.12 L188.12,282.75 L183.62,277.50 L172.00,266.12 L140.00,232.38 L126.12,218.62 L62.62,152.88 L54.00,144.50 L47.25,137.00 L46.38,137.12 L45.75,138.25 L45.88,303.50 L45.38,304.25 L44.38,304.25 L1.38,282.75 L1.12,78.12 L2.75,66.00 L3.62,64.00 L3.88,61.75 L7.25,52.00 L13.12,40.50 L25.00,25.88 L35.38,17.00 L48.12,9.62 L59.50,5.25 L62.12,4.88 L64.50,3.88 L68.25,3.50 L71.50,2.38 L82.88,1.50 Z'/%3E%3C/svg%3E");
}
.np-root .np-skilt--one .np-skilt-tegn {
  padding: 0 calc(var(--skilt-h) * 0.3) 0 calc(var(--skilt-h) * 0.27);
  font-size: calc(var(--skilt-h) * 0.74);
}
.np-root .np-skilt--one .np-skilt-skarp path { fill: currentColor; }
.np-root .np-skilt.stor { --skilt-h: calc(34px * var(--np-skala, 1)); }
.np-root .np-skilt-felt {
  display: block;
  flex: none;
  width: calc(var(--skilt-h) * 53.5 / 110 - var(--skilt-kant));
  width: round(nearest, calc(var(--skilt-h) * 53.5 / 110 - var(--skilt-kant)), 1px);
  height: 100%;
  background: var(--skilt-bla);
}
/* Flagget tegnes med kantutjevning, ikke shape-rendering: crispEdges. Med skarpe
   kanter runder Chrome og WebKit pikslene ulikt: i WebKit dekket det blå korset
   det hvite i 34 px. Utjevnet er det likt i begge, og et lite skilt ser ut som
   et ekte skilt på avstand (målt 1x og 2x i Chrome og WebKit 23.10). */
.np-root .np-skilt-felt .r { fill: var(--skilt-rod); }
.np-root .np-skilt-felt .v { fill: var(--skilt-hvit); }
.np-root .np-skilt-felt .k { fill: var(--skilt-kryss); }
.np-root .np-skilt-tegn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* +0,5 mm ned og +1,5 mm til høyre, som målt; under ~30 px avgjør
     grunnlinjens avrunding til hele piksler resten */
  padding: calc(var(--skilt-h) * 0.009) 0 0 calc(var(--skilt-h) * 0.0273);
  font-family: "ONE Skilt", "DIN Alternate", "Bahnschrift", "DIN 1451", "D-DIN", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: calc(var(--skilt-h) * 0.9741 * var(--skilt-tf, 1));
  font-feature-settings: normal;
  font-variant-numeric: normal;
  font-kerning: none;
  letter-spacing: 0;
}