/* ============================================================
   OFFENTLIG KRETS — ringen på /info (DS-UI-NY-INFO-ILLUSTRASJON)
   ============================================================
   Ringen erstatter stempelet (Vidars K10 2026-10-09, I1a–I6 2026-10-02) og står ved siden av
   kortet «Hva er ModulHub?», som flukter med den topp og bunn. Formen bor i rota, ikke i sidas
   stilblokk (E01 R1.1 shared-first; flatene former aldri kort, kanter og høyder selv), etter samme
   mønster som offentlig-footer.css: klassene beholder sidas lp-prefiks.
   Markupen står i info.html med teksten i sida; ikonene kommer fra ikonrota (data-ikon).
   Tokenene er rotas (--navy, --surface, --kant-lys, --mykt-loft, --text, --muted). */

/* === RINGEN (DS-UI-NY-INFO-ILLUSTRASJON, Vidars K10 2026-10-09: «Kun tilføyning til alt
   annet utenom erstatning av stempelet»). Stempelet med slagordet lignet vanlige
   gummistempler (Vidar 2026-10-02: «vi kan ikke ha noe som noen andre har gjort tidligere»).
   Ringen bærer slagordet øverst i samme navy dobbeltramme som intro-kortet, seks områder i
   Vidars rekkefølge med piler og en prikk som går rundt, «Lagt inn én gang» i midten og tre
   søyler under (docs/konsept/infosiden-vis-hva-som-skjer.md §3). Tegnet i koden med ikonene
   fra rota (I2a), uten «kommer» (I3b), under teksten på smal skjerm og i utskrift (I6).
   Teksten står i sida, ikke i skript, så søkemotorer og skjermlesere leser den (§2). === */
.lp-krets { width: 100%; max-width: 470px; margin: 0 auto; color: var(--navy); container-type: inline-size; justify-self: center; }
.lp-krets-slagord { border: 3px solid var(--navy); border-radius: var(--radius-ramme); padding: 4px; background: var(--surface); }
.lp-krets-slagord-tekst { display: block; border: 1.5px solid var(--navy); border-radius: var(--radius-ramme-indre); padding: 10px 12px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.2; text-transform: uppercase; }
.lp-krets-ring { position: relative; width: 100%; aspect-ratio: 1; margin: 6px 0 2px; }
.lp-krets-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-krets-bane { fill: none; stroke: color-mix(in srgb, var(--navy) 30%, transparent); stroke-width: .7; }
.lp-krets-pil { fill: none; stroke: var(--navy); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.lp-krets-puls { fill: var(--navy); }
/* Prikken står stille (borte) for den som har slått av animasjoner, og på papir. */
@media (prefers-reduced-motion: reduce) { .lp-krets-puls { display: none; } }
/* Hvert område står i en usynlig ramme (31 % × 30 %) med midtpunktet på banen, og kortet
   sentreres inni den. Slik står kortene på plass uten transform, som rota holder for blad
   (tests/test_rota_filter_og_transform.py). Rammens hjørne er midtpunktet minus halve rammen. */
.lp-krets-node { position: absolute; width: 31%; height: 30%; display: grid; place-items: center; }
.lp-krets-node:nth-of-type(1) { left: 34.50%; top: -2.00%; }
.lp-krets-node:nth-of-type(2) { left: 66.54%; top: 16.50%; }
.lp-krets-node:nth-of-type(3) { left: 66.54%; top: 53.50%; }
.lp-krets-node:nth-of-type(4) { left: 34.50%; top: 72.00%; }
.lp-krets-node:nth-of-type(5) { left: 2.46%; top: 53.50%; }
.lp-krets-node:nth-of-type(6) { left: 2.46%; top: 16.50%; }
.lp-krets-kort {
  width: 100%; display: grid; justify-items: center; gap: 4px;
  padding: 9px 6px 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--kant-lys); border-radius: var(--radius-sm);
  box-shadow: var(--mykt-loft);
  font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--text);
}
.lp-krets-kort svg { width: 22px; height: 22px; color: var(--navy); }
.lp-krets-kort small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.lp-krets-midt {
  position: absolute; left: 32%; top: 32%;
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center;
  background: var(--surface); border: 2px solid var(--navy); padding: 10px;
}
.lp-krets-midt svg { width: 22px; height: 22px; }
.lp-krets-midt strong { font-size: 14px; line-height: 1.15; color: var(--text); }
.lp-krets-midt small { font-size: 11px; line-height: 1.25; color: var(--muted); }
.lp-krets-soyler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 6px; }
.lp-krets-soyle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 6px 8px; background: var(--navy); color: var(--surface); border-top-left-radius: var(--radius-ramme-indre); border-top-right-radius: var(--radius-ramme-indre); font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance; }
.lp-krets-soyle svg { width: 17px; height: 17px; flex: none; }
.lp-krets-plate { height: 7px; background: var(--navy); border-radius: var(--radius-ramme-indre); opacity: .85; }
/* Smal ring (mobil, 375 px): etikettene skal kunne leses (saken), så hjelpelinjene går ut. */
@container (max-width: 400px) {
  .lp-krets-slagord-tekst { font-size: 19px; }
  .lp-krets-kort { font-size: 12px; padding: 7px 4px 6px; }
  .lp-krets-kort svg { width: 18px; height: 18px; }
  .lp-krets-kort small { display: none; }
  .lp-krets-midt strong { font-size: 12.5px; }
  .lp-krets-midt small { display: none; }
  .lp-krets-soyle { flex-direction: column; gap: 3px; font-size: 11.5px; min-height: 54px; }
}
/* Tekstkortet ved ringen: tre deler (Vidars prøve 2026-10-10): innledningen, «Kjenner du deg igjen?» med punktene
   og svaret på dem («Resultatet er …», «Du legger inn …»), og «norsk programvare» nederst som
   avslutning. Når kortet strekkes til ringens høyde, fordeles luften mellom delene i stedet for å
   samles under teksten; på smal skjerm er det bare de faste avstandene. */
.lp-krets-par-tekst { display: flex; flex-direction: column; }
.lp-krets-par-tekst > .lp-krets-par-svar { padding-top: 6px; }
.lp-krets-par-tekst > .lp-krets-par-skille { margin-top: auto; padding-top: 12px; }

@media (max-width: 1000px) {
  .lp-krets { margin: 8px auto 0; }
}

/* Papiret: ringen holdes samlet under teksten, og prikken skrives ikke ut. */
@media print {
  .lp-krets { break-inside: avoid; page-break-inside: avoid; }
  .lp-krets-puls { display: none; }
}