/* 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 hentet fra PALETT.md.
 *
 * 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 is. Alt som er en fylt aksentflate
 * med tekst oppå måtte derfor snu tekstfargen fra hvit til navy. Fire regler:
 * antallsmerket i dagstripa, primærknappen, 7/30-velgeren i trafikken og den
 * valgte tekststørrelsen. Hvit tekst på #7DD3FC måler 1,9:1.
 *
 * ── Skrifta er fortsatt Inter, med vilje ──
 *
 * Rutenettet er tegnet i Inter fordi det er den eneste av husets skrifter som
 * har `tnum` (klokkeslettene står i kolonne) og `ss02` (I mot l, 0 mot O — i et
 * verksted tastes registreringsnumre). Schibsted Grotesk brukes bare der
 * NordicOps ellers bruker den: overskrifter og merkenavnet.
 *
 * 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;
}
@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;
}

/* 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 {
  --np-skala: 1;
}

.np-root {
  /* Grunnene, i rekkefølge: sida, kort/rutenett, hevet flate, og det som er
   * løftet over kortet. Verdiene er navy-rampa i PALETT.md; --navy25 er det
   * ene mellomtrinnet panelet trenger og som rampa ikke har navn på.
   * Timekortet må løfte seg tydelig fra rutenettet, og på navy er --navy3
   * det trinnet som leser som en egen flate. */
  --navy: #0D1B2A;
  --navy2: #13273F;
  --navy25: #162C46;
  --navy3: #1A3350;
  --white: #ffffff;
  --offwhite: #EEF2F7;
  --silver: #94A3B8;
  /* Aksenten er NordicOps' eneste kalde aksent, «is». Den er LYS, ikke mørk
   * som Wix-blåen den erstattet, og det snur knappene: en fylt is-knapp har
   * MØRK navy etikett. Hvit tekst på is måler 1,9:1 og er husforbud.
   *   --ice        grafikk: kanter, streker, ringer, valgt tilstand
   *   --ice-fyll   fylte flater — alltid med --navy som tekstfarge
   *   --ice-tekst  liten blå tekst på navy (10,4:1)
   * Alle tre er samme verdi her; navnene står igjen fordi de sier hva som
   * skjer med TEKSTEN oppå. */
  --ice: #7DD3FC;
  --ice-fyll: #7DD3FC;
  --ice-tekst: #7DD3FC;
  --green: #22C55E;
  --warn: #F5B841;
  /* Feil har EGEN farge her. I det gamle temaet var aksenten rød, så en
   * feilmelding kunne bruke den og likevel lese som en feil. Is er husets
   * «se her» — fokusring, valgt tilstand, primærknapp — og en feilmelding i
   * is er ikke lenger til å skille fra en opplysning.
   * --bad er flate og kant; --bad-text er teksten PÅ den tonede flata.
   * PALETT.md: --bad på --bad-bg måler 4,21:1 og ryker AA, og det er nettopp
   * i feilmeldinger og «arkiver»-knapper man ikke har råd til å gjette. */
  --bad: #EF6461;
  --bad-text: #FFD9D8;
  --bad-bg: rgba(239, 100, 97, 0.12);
  --ice-bg: rgba(125, 211, 252, 0.14);
  --green-bg: rgba(34, 197, 94, 0.14);
  --border-faint: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.2);
  --fill-subtle: rgba(255, 255, 255, 0.05);
  --r-sm: 8px;
  --r-btn: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;
  /* Slagskyggen er navy-tonet, som resten av NordicOps. */
  --elev-card: 0 14px 44px -20px rgba(2, 8, 20, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --np-font-display: "Schibsted Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --np-font: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* 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;
  /* opsz følger px-størrelsen av seg selv i en variabel font med den aksen.
     `zero` gir skråstrek i nullen — reg.nr. som «EL 74812» og «O» mot «0» er
     det man faktisk taster feil på her. `cv05` gir l-en en hale, så «l» ikke
     kan forveksles med «1» eller «I» i et navn. `tnum` gjør at klokkeslettene
     står i kolonne. */
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  /* `ss02` heter «Disambiguation» hos Inter og slår på alle tre i én bryter:
     stor I får seriffer, liten l får hale, og null får skråstrek. Uten den er
     Inters `I` og `l` NØYAKTIG samme strek — og et skilt som «EL 74812» eller
     et navn som «Lillian» er da et gjettespill. */
  font-feature-settings: "ss02" 1;
}
.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: 2px solid var(--ice);
  outline-offset: 2px;
}

/* ---------- 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: rgba(125, 211, 252, 0.04);
}
.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,
    rgba(255, 255, 255, 0.032) 7px,
    rgba(255, 255, 255, 0.032) 14px
  );
  cursor: default;
}
.np-apent {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.04);
  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,
    rgba(255, 255, 255, 0.045) 5px,
    rgba(255, 255, 255, 0.045) 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: rgba(255, 255, 255, 0.045);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(255, 255, 255, 0.05) 5px,
    rgba(255, 255, 255, 0.05) 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 * {
    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 {
  background: var(--ice-fyll);
  color: var(--navy);
}

/* 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;
  }
}