/* ============================================================
   OFFENTLIG REGN — «Regn på din egen hverdag» på /info (DS-UI-NY-INFO-REGN-SELV)
   ============================================================
   Kalkulatoren der den interesserte regner sin egen skjulte kostnad (konsept
   docs/konsept/infosiden-vis-hva-som-skjer.md §10). Serveren regner (Vidars K5 og C3a), og
   ingenting lagres; løftet står øverst, før feltene. Formen bor i rota, ikke i sidas stilblokk
   (E01 R1.1 shared-first), etter samme mønster som offentlig-krets.css: klassene har sidas
   lp-prefiks. Feltene, knappene, kortet og nullstill-raden er rotas egne (.form-*, .btn,
   .card--tonet, .mh-nullstill-rad); her bor bare det som er nytt: løftet, gruppelinjene,
   svaret og de to stolpene. Stolpene bærer forskjellen med tekst, tall og navn, ikke farge
   alene (E01 Regel 1.14). */

/* Løftet: én linje med vanlig tekst, ingen boks (Vidar 2026-10-17: «overforklaring i verdensklasse … En enkel
   tekst … og infobobla holdes i massevis»). «Sånn virker det» er den delte infobobla ved linja. */
.lp-regn-loefte { margin: 16px 0 0; font-size: 14px; color: var(--text); }

/* Regnestykket og tegningen side om side, rett under hjulet (Vidar 2026-10-17: «Det er veldig oppblåst nå og tar
   unødvendig mye plass, samt datafeltene … har alt for mye plass … Ønsker det bare rolig og informativt»).
   Under hverandre på smal skjerm, regnestykket først. Bare rutenettet bor her: flaten og kanten er kortets
   (.card--tonet), feltene er rotas hvite felt (E01 R1.15), og tegningen former seg selv (offentlig-enheter.css). */
.lp-regn-med-tegning { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 1440px) { .lp-regn-med-tegning { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.lp-regn-med-tegning > .lp-enheter { width: 100%; margin: 0 auto; }
/* Kortet er en beholder: feltene og svaret stables etter kortets egen bredde, ikke skjermens, så de står under
   hverandre også når kortet deler raden med tegningen og blir smalt. */
.lp-regn-kort { container-type: inline-size; }

/* Feltene til venstre og svaret til høyre; under hverandre i et smalt kort. */
.lp-regn-kolonner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 6px; }
@container (max-width: 640px) { .lp-regn-kolonner { grid-template-columns: minmax(0, 1fr); } }
.lp-regn-tittel { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.lp-regn-hjelp { margin: 2px 0 8px; font-size: 13px; color: var(--muted); }

/* Én linje per gruppe: navn, antall personer, timer i uka per person og Slett. Antall og timer trenger bare
   noen få sifre, så de er smale (Vidar 2026-10-17), og linjene står med rotas radluft. */
.lp-regn-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 9ch 9ch auto; gap: 6px; align-items: center; margin-bottom: var(--skjema-rad-luft); }
/* Kolonnenavnene over gruppene (Vidars prøve 2026-10-10: plassholderen forsvinner når feltet er fylt ut, og da
   står tallene uten navn). Samme rutenett som linjene, så navnene står over sine felt. */
.lp-regn-gruppe--hode { margin-bottom: 2px; align-items: end; }
/* Forklaringen på et avvist tall står under linja, over hele bredden (Vidars svar 37, runde 11: feilen under feltet også her).
   Linja er feltets rad (`data-felt`), så klossen legger den sist i linja (status-markor.js). */
.lp-regn-gruppe > [data-mh-feltfeil-tekst] { grid-column: 1 / -1; }
/* Usynlig plass med samme bredde som Slett-ikonet, så kolonnene står likt over og under. */
.lp-regn-plass { visibility: hidden; }
/* Smal skjerm: navnet på egen linje, personer, timer og Slett under, så hver gruppe leses som én. */
@media (max-width: 480px) {
  .lp-regn-gruppe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; margin-bottom: 12px; }
  .lp-regn-navn, .lp-regn-navn-hode { grid-column: 1 / -1; }
}
.lp-regn-knapper { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
/* Timekosten og systemprisen er beløp med noen få sifre: feltet er så bredt som beløpet, ikke kolonnen. */
.lp-regn-belop { max-width: 22ch; }
/* Feltet serveren ikke kunne regne med, får rotas ring gjennom ModulHubStatusMarkor.feltfeil (E03 R1.20 punkt 2).
   Den egne røde kanten her gikk ut med nattsjekken 2026-11-04 (B6). */

/* Svaret. */
.lp-regn-svar { display: grid; gap: 12px; align-content: start; }
.lp-regn-tom { border: 1px dashed var(--kant-lys); border-radius: var(--radius-md); }
.lp-regn-hoved { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.lp-regn-hode { display: flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.lp-regn-tall { display: block; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.lp-regn-under { display: block; font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lp-regn-linje { margin: 0; font-size: 15px; color: var(--text); }

/* Stolpene (delt med telleren i hovedscenen): to mengder side om side, med navn og tall i tekst. Her: det
   dere betaler for systemene mot tiden som går tapt. Bredden er andelen
   serveren sender (--andel, 0–1); skriptet setter bare tokenet, aldri en formegenskap. */
.lp-stolper { display: grid; gap: 8px; }
.lp-stolpe-rad { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
@media (max-width: 480px) {
  .lp-stolpe-rad { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-stolpe-spor { grid-column: 1 / -1; grid-row: 2; }
}
.lp-stolpe-spor { display: block; height: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--felt-hjorne); overflow: hidden; }
.lp-stolpe-fyll { display: block; height: 100%; width: calc(var(--andel, 0) * 100%); min-width: 3px; background: var(--navy); }
.lp-stolpe-fyll--dempet { background: var(--muted); }
.lp-stolpe-sum { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Summen: det dere faktisk betaler, systemene og tiden til sammen (Vidars svar 1c 2026-10-11), skilt fra de to
   over med en strek. */
.lp-stolpe-rad--sum { padding-top: 8px; border-top: 1px solid var(--border); }
.lp-stolpe-rad--sum .lp-stolpe-navn { font-weight: 700; }

/* Den positive linja: tid frigjort til arbeid som tjener penger. */
.lp-regn-positiv { margin: 0; padding: 10px 14px; background: var(--surface); border-left: 4px solid var(--navy); border-radius: var(--felt-hjorne); font-size: 15px; color: var(--text); }
.lp-regn-forutsetning { margin: 0; font-size: 12px; color: var(--muted); }
/* Oppsummeringen holdes smal, som summene på en faktura, så beløpene står nær tekstene sine. */
.lp-regn-summering { max-width: 520px; }