/* Solpark – den enkle visningen (solpark-enkel.jsx, 14. nov 2026). Prefiks .spe-, oklch-farger, variablene fra .spg (solpark-gui.css).
   Startskjermen (.spg--start), Enkel uten område (.spg--enkel-tom) og Enkel med svarkortet (.spg--enkel). Avansert er arbeidsflaten
   som før; herfra får den bare bryteren, merket «foreløpig» i nøkkeltallene og linjen «← Tilbake til svaret». */
.spg { --spe-panel: clamp(400px, 34vw, 540px); }
.spe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bryteren «Enkel | Avansert» ---------- */
.spe-bryter { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: var(--spg-meny); border: 1px solid var(--spg-kant-sterk); }
.spe-bryter__knapp { font: 600 13px/1 "DM Sans", system-ui, sans-serif; min-height: 30px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--spg-dempet2); cursor: pointer; }
.spe-bryter__knapp:hover { background: oklch(0.94 0.02 80); color: var(--spg-mork); }
.spe-bryter__knapp.on { background: var(--spg-tekst); color: oklch(0.99 0.01 80); }

/* ---------- Oppsettet per nivå ---------- */
.spg--enkel .spg-kropp { grid-template-columns: minmax(0, 1fr) var(--spe-panel); }
.spg--start .spg-kropp, .spg--enkel-tom .spg-kropp { grid-template-columns: minmax(0, 1fr); }
.spg--start .spg-panel, .spg--enkel-tom .spg-panel { display: none; }
.spg--start .solpark-kart__bunn > :not(.solpark-melding) { display: none; }
/* Forklaringen «Hvite felt kan du endre …» (solpark-flater.js) gjelder feltene i Avansert; Enkel viser ingen felt */
.spg--enkel .spf-forklaring, .spg--enkel .spf-forklar-knapp { display: none !important; }

/* ---------- Startskjermen og søket (et kort over kartet) ---------- */
.spe-overlegg { position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: oklch(0.3 0.03 60 / 0.16); overflow-y: auto; }
.spe-start { width: min(620px, 100%); box-sizing: border-box; padding: 26px 28px 22px; border-radius: 20px; background: var(--spg-flate); border: 1px solid var(--spg-kant);
  box-shadow: 0 28px 70px -30px oklch(0.25 0.05 60 / 0.7); }
.spe-start h2 { margin: 0 0 6px; font: 500 30px/1.15 Newsreader, Georgia, serif; color: var(--spg-mork); }
.spe-start > p { margin: 0 0 16px; color: var(--spg-dempet2); font-size: 14.5px; }
.spe-start__valg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spe-start__knapp { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--spg-kant-sterk); background: #fff; cursor: pointer; }
.spe-start__knapp b { font: 500 22px/1.2 Newsreader, Georgia, serif; color: var(--spg-mork); }
.spe-start__knapp span { font-size: 13.5px; color: var(--spg-dempet2); line-height: 1.45; }
.spe-start__knapp:hover { background: oklch(0.975 0.015 80); }
.spe-start__knapp:focus-visible { outline: 2px solid var(--spg-aksent); outline-offset: 2px; }
.spe-start__knapp--primar { border: 2px solid var(--spg-leire); }
.spe-start__knapp--primar b { color: var(--spg-leire); }
.spe-sok .horisont-address-search { width: 100%; margin: 4px 0 0; }
.spe-sok .horisont-address-search__input { border: 2px solid var(--spg-leire); border-radius: 14px; }
.spe-sok__eller { margin: 12px 0 0; font-size: 13.5px; color: var(--spg-dempet2); }
.spe-sok__fot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--spg-kant); font-size: 13px; }
.spe-hint { font-weight: 600; }

/* Angre-linjen etter et klikk på en eiendom */
.spe-angre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.spe-angre .spg-knapp { margin-left: 4px; }

/* ---------- Nøkkeltallene i Enkel (PC) ---------- */
.spe-tall > div[role="listitem"] { justify-content: flex-end; }
.spe-tall > div[role="listitem"] span { order: -1; }
.spe-tall--forelopig b { color: var(--spg-dempet); }
.spe-tall__status { margin-left: auto; align-self: center; justify-content: center; border-right: 0 !important; }
.spg-tall__forelopig { align-self: center; padding: 0 16px !important; border-right: 0 !important; }

/* Merket «foreløpig» / «beregnet» */
.spe-merke { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--spg-dempet); white-space: normal; }
.spe-merke__lapp { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px dashed oklch(0.6 0.04 65); color: var(--spg-dempet2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.spe-merke__lapp--ferdig { border-style: solid; border-color: oklch(0.78 0.06 148); color: oklch(0.38 0.09 148); }
.spg-tall .spe-merke span { font-size: 12px !important; white-space: normal !important; }

/* Mobil: fire tall i to rader i den lukkede skuffen */
.spe-minitall { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1 1 auto; min-width: 0; }
.spe-minitall > div { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--spg-kant); min-width: 0; }
.spe-minitall span { font-size: 10.5px; color: var(--spg-dempet); }
.spe-minitall b { font: 500 16px/1.15 Newsreader, Georgia, serif; color: var(--spg-mork); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spe-minitall .spe-gra b { color: var(--spg-dempet); }
.spg-panel__minitall--egen { align-items: flex-start !important; }
/* solpark-gui.css gir hvert barn av .spg-panel__minitall en tallboks; rutenettet selv skal ikke ha det */
.spg-panel__minitall--egen > .spe-minitall { display: grid; flex: 1 1 auto; flex-direction: initial; padding: 0; border: 0; border-radius: 0; background: none; }
.spg-panel__minitall--egen > .spe-minitall > div { padding: 3px 8px; }
.spg-panel__minitall--egen > .spe-minitall b { white-space: normal; font-size: 15px; overflow-wrap: anywhere; }

/* Linjen øverst i Avansert når man kom dit fra svaret */
.spe-tilbake { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 20px; background: oklch(0.95 0.03 80); border-bottom: 1px solid var(--spg-kant); font-size: 12.5px; color: var(--spg-dempet2); }
.spe-postlinje { padding: 0 0 4px; }

/* ---------- Svarkortet ---------- */
.spe-kort { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
.spe-h { margin: 0; font: 500 28px/1.15 Newsreader, Georgia, serif; color: var(--spg-mork); }
.spe-status { margin: 0; }
.spe-dempet { color: var(--spg-dempet); }
.spe-liten { font-size: 12.5px; }
.spe-gra { color: var(--spg-dempet) !important; }
.spe-varsel { margin: 0; padding: 8px 12px; border-radius: 12px; background: oklch(0.96 0.03 80); border: 1px dashed oklch(0.75 0.05 75); font-size: 13px; color: var(--spg-dempet2); }
.spe-endring { margin: 0; padding: 8px 12px; border-radius: 12px; background: oklch(0.95 0.04 148); color: oklch(0.34 0.08 148); font-size: 13px; font-weight: 600; }
.spe-hoved { margin: 2px 0 0; font: 400 19px/1.45 Newsreader, Georgia, serif; color: var(--spg-mork); }
.spe-hoved.spe-gra { color: var(--spg-dempet); }
.spe-del { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--spg-kant); font: 700 11px/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--spg-leire); }
.spe-under { margin: 6px 0 0; font: 700 10.5px/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spg-dempet); }
.spe-lapp { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px dashed oklch(0.6 0.04 65); font-size: 11px; font-weight: 600; color: var(--spg-dempet2); font-family: "DM Sans", system-ui, sans-serif; }

.spe-rolle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--spg-dempet2); }
.spe-chip { font: 500 12.5px/1.2 "DM Sans", system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--spg-kant-sterk); background: #fff; color: var(--spg-tekst); cursor: pointer; }
.spe-chip.on { border: 2px solid var(--spg-tekst); padding: 5px 11px; font-weight: 700; }

/* «Stemmer dette?» */
.spe-blokk { display: flex; flex-direction: column; gap: 8px; }
.spe-sp { margin: 0; padding: 12px 14px; border: 0; border-left: 3px solid var(--spg-leire); border-radius: 0 14px 14px 0; background: oklch(0.97 0.022 75); }
.spe-sp legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 700; font-size: 14px; color: var(--spg-mork); }
.spe-sp > p { clear: both; margin: 0 0 8px; font-size: 12.5px; color: var(--spg-dempet2); }
.spe-sp__valg, .spe-typer__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.spe-valg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; min-height: 44px; border-radius: 12px; border: 1px solid var(--spg-kant-sterk); background: #fff; color: var(--spg-tekst); cursor: pointer; text-align: left; font: inherit; max-width: 100%; }
.spe-valg b { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.spe-valg small { font-size: 11.5px; color: var(--spg-dempet); }
.spe-valg.on { border: 2px solid var(--spg-tekst); padding: 7px 11px; }
.spe-valg.on b { font-weight: 700; }
.spe-valg:hover:not(.on) { background: oklch(0.975 0.015 80); }
.spe-valg__forslag { font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; border: 1px dashed oklch(0.6 0.04 65); color: var(--spg-dempet2); }

/* Fire svar */
.spe-svar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.spe-svar__rute { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 6px 0; }
.spe-svar__rute + .spe-svar__rute { padding-left: 14px; border-left: 1px solid var(--spg-kant); }
.spe-svar__sp { font-size: 12px; color: var(--spg-dempet); }
.spe-svar__rute small { font-size: 12px; color: var(--spg-dempet2); }
.spe-tall { font: 500 27px/1.15 Newsreader, Georgia, serif; color: var(--spg-mork); font-variant-numeric: tabular-nums; }
.spe-tall--tekst { font-size: 19px; }
.spe-svar__bred { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px; border-top: 1px solid oklch(0.92 0.02 80); }
.spe-svar__bred > p { margin: 0; font-size: 13.5px; }
.spe-stolpe { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.spe-stolpe__navn { color: var(--spg-dempet2); }
.spe-stolpe__spor { position: relative; height: 12px; border-radius: 6px; background: var(--spg-spor); overflow: hidden; }
.spe-stolpe__spor::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: oklch(0.55 0.03 65); }
.spe-stolpe__spor > span { position: absolute; top: 0; bottom: 0; background: var(--spg-gronn); border-radius: 3px; }
.spe-stolpe--neg .spe-stolpe__spor > span { background: var(--spg-rod); }
.spe-stolpe__tall { font: 500 15px/1.2 Newsreader, Georgia, serif; color: var(--spg-mork); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spe-stolpe--neg .spe-stolpe__tall { color: var(--spg-rod); }
.spe-lov { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.spe-tiltak { padding: 8px 12px; border-radius: 12px; background: oklch(0.97 0.02 80); border: 1px solid var(--spg-kant); }
.spe-tiltak h4 { margin: 0 0 4px; font: 700 10.5px/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spg-leire); }
.spe-tiltak p { margin: 0; font-size: 13px; }

/* Lampene: form + ord, aldri bare farge */
.spe-lampe { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.spe-lampe__ord { color: var(--spg-dempet2); }
.spe-lampe__ord b { color: var(--spg-mork); font-weight: 700; }
.spe-form { flex: none; }
.spe-form--gronn { fill: var(--spg-gronn); }
.spe-form--gul path:first-child { fill: oklch(0.72 0.14 75); }
.spe-form--rod path:first-child { fill: var(--spg-rod); }
.spe-form--gra circle { stroke: oklch(0.55 0.03 65); }
.spe-lampe--gra .spe-lampe__ord { font-style: italic; }
.spe-lamper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.spe-lampe-rad { display: flex; flex-direction: column; gap: 3px; padding: 0 0 10px; border-bottom: 1px solid oklch(0.93 0.02 80); }
.spe-lampe-rad p { margin: 0 0 0 25px; font-size: 13px; }
.spe-lampe-rad > .spg-lenke { margin-left: 25px; align-self: flex-start; }
.spe-regn span { color: var(--spg-dempet); font-weight: 400; }

/* «Dette har vi antatt» */
.spe-antliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.spe-ant { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid oklch(0.94 0.015 80); font-size: 13.5px; }
.spe-ant__merke { text-align: center; color: var(--spg-dempet); font-size: 12px; }
.spe-ant--endret .spe-ant__merke { color: var(--spg-leire); }
.spe-ant--merknad .spe-ant__merke { color: oklch(0.6 0.12 75); }
.spe-ant__tekst { display: flex; flex-direction: column; gap: 1px; }
.spe-ant__tekst small { font-size: 12px; color: var(--spg-dempet); }
.spe-ant__endre { font-size: 12.5px; white-space: nowrap; }
.spe-typer { padding: 8px 0 10px 26px; }
.spe-typer p { margin: 0 0 6px; }
.spe-ikkemed { margin: 0; padding-left: 18px; font-size: 13px; color: var(--spg-dempet2); display: flex; flex-direction: column; gap: 3px; }
.spe-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--spg-kant); }

/* ---------- Mobil og nettbrett (≤ 1100 px) ---------- */
@media (max-width: 1100px) {
  .spe-bryter__knapp { padding: 6px 11px; font-size: 12.5px; }
  .spg.spg--enkel.spg--skuff-lukket { --spg-skuff-h: 168px; }
  .spg--enkel .solpark-kart__topp { top: 10px; }
  .spg--enkel .leaflet-top.leaflet-left { top: 6px; }
  .spg--start .spg-kart, .spg--enkel-tom .spg-kart { bottom: 0; }
  .spe-start { padding: 20px 18px 18px; }
  .spe-start h2 { font-size: 25px; }
  .spe-start__valg { grid-template-columns: 1fr; }
  .spe-h { font-size: 24px; }
  .spe-svar { grid-template-columns: 1fr; }
  .spe-svar__rute + .spe-svar__rute { padding-left: 0; border-left: 0; border-top: 1px solid var(--spg-kant); padding-top: 8px; }
  .spe-stolpe { grid-template-columns: 1fr auto; }
  .spe-stolpe__spor { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .spe-overlegg { scroll-behavior: auto; } }