/* ============================================================
   OFFENTLIG SCENE — hovedscenen på /info (DS-UI-NY-INFO-SE-HVA-SOM-SKJER)
   ============================================================
   «Legg inn det du vet. Resten ordner seg.» (konsept docs/konsept/infosiden-vis-hva-som-skjer.md §4–§5).
   Seks eksempelbedrifter, tre nivåer og stegene i én jobb: til venstre det du gjør, til høyre det ModulHub
   gjør, og under hvert felt hvor opplysningen kom fra. Innholdet og formlene er serverens
   (POST /api/public/eksempel, Vidars a 2026-10-10); sida viser bare svaret.
   Formen bor i rota med sidas lp-prefiks, som offentlig-krets.css og offentlig-regn.css. Klossene er rotas:
   fanene (.tab-bar), nivåvalget (.mh-segmentvalg), den røde tråden (.mh-traad), faktalista (.mh-fakta),
   knappene, kortet og stolpene (.lp-stolpe-*, delt med «Regn på din egen hverdag»). Lagene veksler
   (E01 Regel 1.15): tonet kort, hvite bokser, hvite felt. «Spill av» er oransje med vilje (Vidars K12):
   det er den eneste handlingen i scenen, og gul ville kollidert med avviksboksene.
   Dokumentmalens vindu (.lp-dokmal-*) står nederst: rammen og feltenes plassering. */


/* Fanene: rotas fanerad, rullbar sidelengs på smal skjerm i stedet for å presse fanene sammen. */
.lp-scene-faner { overflow-x: auto; }
.lp-scene-fane { display: flex; gap: 8px; align-items: center; text-align: left; white-space: nowrap; }
.lp-scene-fane svg { width: 18px; height: 18px; flex: none; color: var(--navy); }

/* Kontrollraden (Vidars dom 2026-10-10): forrige, «Spill av» og neste samlet til venstre, så nivåvalget og
   infobobla med forklaringen. Ingen åpen tekst; stegnavnet står under som overskrift for det som vises. */
.lp-scene-kontroll { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.lp-scene-spiller { display: flex; gap: 6px; align-items: center; }
.lp-scene-spiller svg { width: 16px; height: 16px; }
.lp-scene-spill { display: inline-flex; gap: 6px; align-items: center; }
.lp-scene-spill-ikon { display: inline-flex; }
.lp-scene-spill svg { width: 14px; height: 14px; }
/* Knappen vinker tre ganger når sida åpnes, med en ring rundt seg (ingen bevegelse av selve knappen), og står
   stille for den som har slått av animasjoner. */
@keyframes lp-scene-vink {
  0% { box-shadow: var(--shadow-vink-fra); }
  100% { box-shadow: var(--shadow-vink-til); }
}
.lp-scene-spill--vink { animation: lp-scene-vink 1.2s ease-out 3; }
@media (prefers-reduced-motion: reduce) { .lp-scene-spill--vink { animation: none; } }
.lp-scene-steg-navn { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text); }

/* Kroppen: det du gjør og sakens løp til venstre, dokumentene ModulHub lager til høyre. Overskriftene står
   over boksene i begge kolonnene, så de starter på samme linje (Vidars dom 2026-10-10). */
.lp-scene-kropp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
@media (max-width: 860px) { .lp-scene-kropp { grid-template-columns: minmax(0, 1fr); } }
.lp-scene-venstre { display: grid; gap: 6px; align-content: start; }
.lp-scene-kol--etter { margin-top: 8px; }
.lp-scene-hoyre { min-width: 0; }
.lp-scene-boks { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.lp-scene-kol { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-scene-handling { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.lp-scene-hake { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 14px; }
.lp-scene-tom { margin: 0; font-size: 13px; color: var(--muted); }
.lp-scene-idag { margin: 0 0 10px; padding: 8px 12px; font-size: 13px; color: var(--text); background: var(--surface); border-left: 4px solid var(--navy); border-radius: var(--felt-hjorne); }

/* Dokumentkortene: rotas faktaliste, med kilden under hver verdi. Kortene i en rad er like høye, og
   «Venter på at du godkjenner» står nederst i hvert kort, så merkene står på linje. */
.lp-scene-dok { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-content: start; }
.lp-scene-kort { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.lp-scene-kort-hode { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.lp-scene-kort-hode svg { width: 18px; height: 18px; flex: none; color: var(--navy); }
.lp-scene-kilde { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.lp-scene-godkjenn { align-self: flex-start; margin-top: auto; }
/* Verdien som ble endret av det du skrev, blinker én gang i kortet (Vidars svar 4a 2026-10-10), og står stille
   for den som har slått av animasjoner. */
@keyframes lp-scene-endret {
  0%, 40% { background: var(--info-soft); }
  100% { background: transparent; }
}
.lp-scene-endret { border-radius: var(--felt-hjorne); animation: lp-scene-endret 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .lp-scene-endret { animation: none; } }

/* Telleren nederst i scenen; oppsummeringen bor i bobla ved overskriften. */
.lp-scene-teller-hode { display: flex; gap: 4px; align-items: center; margin: 14px 0 6px; }
.lp-scene-aerlig { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* DOKUMENTMALENS VINDU (#dokumentmalen, Vidars dom 2026-11-05): samme ramme som innlogget. Rotas modulbar
   (ModulHubToolbar, innebygd) over rotas splitflate: feltene i venstre del (55 %) og dokumentet i panelet (45 %),
   med rotas stabling på smal skjerm. Her står bare luften under båndet og feltenes plassering; feltene, fanene,
   knappene, delingen og arket er rotas. */
.lp-dokmal-vindu > .mh-module-toolbar { margin-bottom: var(--baand-luft); }
/* Feltene står to og to (kunde og bestillingsnr., levering og betaling), så de får plass i skjermhøyden og kan følge med
   når man ruller (.mh-splitflate--folg); varelinjene og forklaringen tar hele bredden. Én kolonne på smal skjerm. */
.lp-dokmal-felt { font-size: var(--skrift); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-dokmal-hel { grid-column: 1 / -1; }
@media (max-width: 520px) { .lp-dokmal-felt { grid-template-columns: minmax(0, 1fr); } }
.lp-dokmal-forklaring { display: flex; gap: 6px; align-items: flex-start; border-top: 1px solid var(--border); padding-top: 6px; }
.lp-dokmal-forklaring p { margin: 0; }