/* ============================================================
   OFFENTLIG ENHETER — tegningen av systemet på /info (DS-UI-NY-INFO-ENHETSTEGNINGER)
   ============================================================
   Vidars idé 2026-10-10: «noe man kan se i forbifarta uten å konsentrere seg … 3 sekunder på
   overbevisning». Vidar 2026-10-11: «illustrere systemet? et par tastetrykk så kommer resten av
   seg selv fra plattformen og API». Du taster to ting på mobilen, ordren fyller seg selv på PC-en
   med kilden under hver verdi (foretakssøket, postnummeret, kjøretøyoppslaget og det plattformen
   vet om kunden), arket er klart til utskrift, og «Betalt» kommer fra kassa (1b). Ingen «kommer»
   (Vidars svar 2a: det er AKTIVE moduler som teller). Tegnet i koden med rotas tokener, slik
   ringen er (offentlig-krets.css), ikke kopiert fra noen andre. Navn og tall er fra det fiktive
   registeret (docs/sikkerhet/fiktivt-register.md). Hele tegningen skalerer som ett bilde med
   bredden: alle mål er ganger skalaen --e (1cqi), som dobles når enhetene står to og to på smal
   skjerm. Uten transform og filter (tests/test_rota_filter_og_transform.py).
   Tokenene er rotas (--navy, --surface, --kant-lys, --primary, --primary-soft,
   --info-soft, --success-soft, --success-text, --surface-muted, --muted, --mykt-loft, --radius-*). */

.lp-enheter { max-width: 980px; margin: 0 auto 28px; container-type: inline-size; color: var(--navy); }
.lp-enheter-rad { --e: 1cqi; display: grid; grid-template-columns: 14fr 5fr 36fr 5fr 14fr 5fr 15fr; align-items: end; }

/* === ENHETENE: ramme i navy, skjerm i hvitt, toppstripe som innerheaderen. === */
.lp-enhet { display: grid; justify-items: center; }
.lp-enhet-skjerm {
  position: relative; width: 100%; display: grid; align-content: start; gap: calc(.9 * var(--e));
  background: var(--surface); border: calc(.9 * var(--e)) solid var(--navy); border-radius: var(--radius-sm);
  padding: 0 calc(1.3 * var(--e)) calc(1.3 * var(--e)); overflow: hidden; box-shadow: var(--mykt-loft);
}
.lp-enhet-topp { height: calc(2 * var(--e)); margin: 0 calc(-1.3 * var(--e)) calc(.3 * var(--e)); background: var(--navy); }
.lp-enhet-tittel { font-size: max(calc(1.6 * var(--e)), 8px); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.lp-enhet-strek { display: block; height: calc(.9 * var(--e)); border-radius: var(--radius-ramme-indre); background: var(--kant-lys); }
.lp-enhet-strek--kort { width: 60%; }
.lp-enhet-knapp {
  display: block; margin-top: auto; padding: calc(.8 * var(--e)) 0; border-radius: var(--radius-ramme); text-align: center;
  background: var(--primary); color: var(--surface); font-size: max(calc(1.3 * var(--e)), 7px); font-weight: 700; line-height: 1.2;
}

/* Mobilen: du taster to ting, org.nr og registreringsnummer, og trykker «Hent». */
.lp-enhet--mobil .lp-enhet-skjerm { aspect-ratio: 9 / 17; border-radius: var(--radius-md); align-content: stretch; grid-template-rows: auto auto auto auto auto auto 1fr; }
.lp-enhet-etikett { font-size: max(calc(1 * var(--e)), 6px); color: var(--muted); line-height: 1.2; margin-bottom: calc(-.5 * var(--e)); }
.lp-enhet-inntastet {
  display: block; padding: calc(.7 * var(--e)) calc(.9 * var(--e)); border: calc(.2 * var(--e)) solid var(--kant-lys); border-radius: var(--radius-ramme);
  font-size: max(calc(1.25 * var(--e)), 7px); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden;
}
.lp-enhet-taster-orgnr,
.lp-enhet-taster-regnr { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; }
.lp-enhet-taster-orgnr { width: 11.5ch; }
.lp-enhet-taster-regnr { width: 9ch; }

/* PC-en: ordren fyller seg selv, med kilden ved hver verdi, som i scenen under. Kildene står
   som merker over skjermen og lyser når verdien deres kommer. */
.lp-enhet--pc .lp-enhet-skjerm { aspect-ratio: 16 / 10; }
.lp-enhet-hode { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(1 * var(--e)); }
.lp-enhet-verdi {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: calc(1 * var(--e));
  padding: calc(.5 * var(--e)) calc(.8 * var(--e)); border-radius: var(--radius-ramme); background: var(--surface-muted);
}
.lp-enhet-verdi-tekst { font-size: max(calc(1.25 * var(--e)), 7px); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-enhet-verdi-kilde { font-size: max(calc(1 * var(--e)), 6px); color: var(--muted); line-height: 1.25; white-space: nowrap; }
.lp-enhet-status { display: grid; font-size: max(calc(1.15 * var(--e)), 6px); font-weight: 700; line-height: 1.2; }
.lp-enhet-status-ny,
.lp-enhet-status-betalt { grid-area: 1 / 1; padding: calc(.3 * var(--e)) calc(.9 * var(--e)); border-radius: var(--radius-sm); text-align: center; }
.lp-enhet-status-ny { background: var(--surface-muted); color: var(--muted); }
.lp-enhet-status-betalt { background: var(--success-soft); color: var(--success-text); }
.lp-enhet-fot { width: 16%; height: calc(2.8 * var(--e)); background: var(--navy); }
.lp-enhet-bunn { width: 32%; height: calc(.9 * var(--e)); border-radius: var(--radius-ramme-indre); background: var(--navy); }

.lp-enheter-kilder { display: flex; justify-content: space-around; width: 86%; margin-bottom: calc(.6 * var(--e)); }
.lp-enheter-kilde { display: grid; justify-items: center; }
.lp-enheter-kilde-ikon {
  display: grid; place-items: center; width: calc(4.2 * var(--e)); height: calc(4.2 * var(--e)); border-radius: 50%;
  border: calc(.25 * var(--e)) solid var(--kant-lys); background: var(--surface); color: var(--navy);
}
.lp-enheter-kilde-ikon svg { width: calc(2.2 * var(--e)); height: calc(2.2 * var(--e)); }
.lp-enheter-kilde-strek { width: 0; height: calc(2.2 * var(--e)); border-left: calc(.25 * var(--e)) dashed color-mix(in srgb, var(--navy) 40%, transparent); }

/* Arket: ordrebekreftelsen klar til utskrift, tegnet som forhåndsvisningen. Arket står hele tiden, som
   skjermene, og innholdet kommer når prikken kommer (Vidars svar 2 2026-10-11). */
.lp-enhet-ark {
  width: 100%; aspect-ratio: 1 / 1.414; display: grid; align-content: start;
  padding: calc(1.4 * var(--e)) calc(1.3 * var(--e)); background: var(--surface); border: calc(.2 * var(--e)) solid var(--kant-lys); box-shadow: var(--mykt-loft);
}
.lp-enhet-ark-innhold { display: grid; gap: calc(.8 * var(--e)); }
.lp-enhet-ark-tittel { font-size: max(calc(1.15 * var(--e)), 6px); font-weight: 800; line-height: 1.2; }
.lp-enhet-ark-sum { justify-self: end; width: 40%; height: calc(1.4 * var(--e)); margin-top: calc(.6 * var(--e)); border-radius: var(--radius-ramme-indre); background: var(--navy); }

/* Kassa: terminal med skjerm og tastatur; «Betalt» står på skjermen. */
.lp-enhet--kasse .lp-enhet-skjerm { aspect-ratio: 5 / 7; border-radius: var(--radius-md); align-content: stretch; grid-template-rows: auto auto 1fr; }
.lp-enhet-betalt {
  display: grid; place-items: center; padding: calc(1.2 * var(--e)) 0; border-radius: var(--radius-ramme);
  background: var(--success-soft); color: var(--success-text); font-size: max(calc(1.5 * var(--e)), 8px); font-weight: 800; line-height: 1.2;
}
.lp-enhet-taster { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.7 * var(--e)); align-content: end; }
.lp-enhet-tast { aspect-ratio: 3 / 2; border-radius: var(--radius-ramme-indre); background: var(--kant-lys); }

/* === PILENE MELLOM ENHETENE: en stiplet linje og en prikk som går. === */
.lp-enheter-pil { position: relative; align-self: center; height: calc(2 * var(--e)); margin: 0 calc(.8 * var(--e)); }
.lp-enheter-pil::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - calc(.12 * var(--e)));
  border-top: calc(.25 * var(--e)) dashed color-mix(in srgb, var(--navy) 40%, transparent);
}
.lp-enheter-prikk { position: absolute; top: calc(50% - calc(.8 * var(--e))); left: 0; width: calc(1.6 * var(--e)); height: calc(1.6 * var(--e)); border-radius: 50%; background: var(--primary); opacity: 0; }

/* === TEKSTEN UNDER HVER ENHET: to linjer høy, så enhetene står på samme grunnlinje. === */
.lp-enhet-tekst {
  min-height: calc(2em * 1.35); margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.35;
  text-align: center; color: var(--text);
}

/* === SMAL SKJERM: to og to enheter, uten pilene, i dobbel skala; mobilen, arket og kassa står
   smalere i kolonnen sin, så de beholder formen. === */
@container (max-width: 620px) {
  .lp-enheter-rad { --e: 1.9cqi; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .lp-enheter-pil { display: none; }
  .lp-enhet--mobil .lp-enhet-skjerm, .lp-enhet-ark { width: 62%; }
  .lp-enhet--kasse .lp-enhet-skjerm { width: 66%; }
  .lp-enhet--pc .lp-enhet-skjerm { aspect-ratio: auto; }   /* alle fire verdiene får plass */
  .lp-enhet-tekst { font-size: 13px; margin-top: 8px; }
}

/* === GANGEN (14 s): du taster org.nr og regnr, prikken går til PC-en, verdiene kommer én og én
   og kilden deres lyser, arket kommer fram, kassa sier «Betalt», og ordren på PC-en blir betalt.
   Uten animasjon (redusert bevegelse, papir) står sluttbildet: alt er fylt ut. === */
@media (prefers-reduced-motion: no-preference) {
  .lp-enhet-taster-orgnr { animation: lp-enheter-orgnr 14s infinite; }
  .lp-enhet-taster-regnr { animation: lp-enheter-regnr 14s infinite; }
  .lp-enheter-pil--1 .lp-enheter-prikk { animation: lp-enheter-pil-1 14s linear infinite; }
  .lp-enheter-pil--2 .lp-enheter-prikk { animation: lp-enheter-pil-2 14s linear infinite; }
  .lp-enheter-pil--3 .lp-enheter-prikk { animation: lp-enheter-pil-3 14s linear infinite; }
  .lp-enhet-verdi, .lp-enheter-kilde-ikon { animation-duration: 14s; animation-timing-function: step-end; animation-iteration-count: infinite; }
  .lp-enhet-verdi--1 { animation-name: lp-enheter-verdi-1; }
  .lp-enhet-verdi--2 { animation-name: lp-enheter-verdi-2; }
  .lp-enhet-verdi--3 { animation-name: lp-enheter-verdi-3; }
  .lp-enhet-verdi--4 { animation-name: lp-enheter-verdi-4; }
  .lp-enheter-kilde--1 .lp-enheter-kilde-ikon { animation-name: lp-enheter-kilde-1; }
  .lp-enheter-kilde--2 .lp-enheter-kilde-ikon { animation-name: lp-enheter-kilde-2; }
  .lp-enheter-kilde--3 .lp-enheter-kilde-ikon { animation-name: lp-enheter-kilde-3; }
  .lp-enheter-kilde--4 .lp-enheter-kilde-ikon { animation-name: lp-enheter-kilde-4; }
  .lp-enhet-ark-innhold { animation: lp-enheter-ark 14s step-end infinite; }
  .lp-enhet-betalt { animation: lp-enheter-kasse 14s step-end infinite; }
  .lp-enhet-status-betalt { animation: lp-enheter-betalt 14s step-end infinite; }
}
@keyframes lp-enheter-orgnr { 0%, 3% { width: 0; animation-timing-function: steps(11, end); } 14%, 100% { width: 11.5ch; } }
@keyframes lp-enheter-regnr { 0%, 15% { width: 0; animation-timing-function: steps(8, end); } 23%, 100% { width: 9ch; } }
@keyframes lp-enheter-pil-1 { 0%, 24% { left: 0; opacity: 0; } 25% { left: 0; opacity: 1; } 30% { left: calc(100% - calc(1.6 * var(--e))); opacity: 1; } 31%, 100% { left: calc(100% - calc(1.6 * var(--e))); opacity: 0; } }
@keyframes lp-enheter-pil-2 { 0%, 54% { left: 0; opacity: 0; } 55% { left: 0; opacity: 1; } 60% { left: calc(100% - calc(1.6 * var(--e))); opacity: 1; } 61%, 100% { left: calc(100% - calc(1.6 * var(--e))); opacity: 0; } }
@keyframes lp-enheter-pil-3 { 0%, 66% { left: 0; opacity: 0; } 67% { left: 0; opacity: 1; } 72% { left: calc(100% - calc(1.6 * var(--e))); opacity: 1; } 73%, 100% { left: calc(100% - calc(1.6 * var(--e))); opacity: 0; } }
/* Verdien kommer med samme rolige blå markering som feltene i scenen (lp-scene-endret), og kilden lyser. */
@keyframes lp-enheter-verdi-1 { 0% { opacity: 0; } 32% { opacity: 1; background: var(--info-soft); } 38% { background: var(--surface-muted); } }
@keyframes lp-enheter-verdi-2 { 0% { opacity: 0; } 38% { opacity: 1; background: var(--info-soft); } 44% { background: var(--surface-muted); } }
@keyframes lp-enheter-verdi-3 { 0% { opacity: 0; } 44% { opacity: 1; background: var(--info-soft); } 50% { background: var(--surface-muted); } }
@keyframes lp-enheter-verdi-4 { 0% { opacity: 0; } 50% { opacity: 1; background: var(--info-soft); } 56% { background: var(--surface-muted); } }
@keyframes lp-enheter-kilde-1 { 32% { border-color: var(--primary); background: var(--primary-soft); } 38% { border-color: var(--kant-lys); background: var(--surface); } }
@keyframes lp-enheter-kilde-2 { 38% { border-color: var(--primary); background: var(--primary-soft); } 44% { border-color: var(--kant-lys); background: var(--surface); } }
@keyframes lp-enheter-kilde-3 { 44% { border-color: var(--primary); background: var(--primary-soft); } 50% { border-color: var(--kant-lys); background: var(--surface); } }
@keyframes lp-enheter-kilde-4 { 50% { border-color: var(--primary); background: var(--primary-soft); } 56% { border-color: var(--kant-lys); background: var(--surface); } }
@keyframes lp-enheter-ark { 0% { opacity: 0; } 61% { opacity: 1; } }
@keyframes lp-enheter-kasse { 0% { opacity: 0; } 73% { opacity: 1; } }
@keyframes lp-enheter-betalt { 0% { opacity: 0; } 78% { opacity: 1; } }

@media print { .lp-enheter-prikk { display: none; } }