/* Solpark – to flater: valg mot svar (trinn 1, 13. nov 2026).
   «Hvite felt kan du endre. Tall uten ramme er regnet ut.»
   Bare CSS og små data-attributter fra solpark-flater.js; ingen .jsx er endret. Alt er avgrenset under html.spf, som
   solpark-flater.js setter på arbeidsflaten og den klassiske siden, men aldri med ?hodelos=1 eller SOLPARK_EGEN_ROT
   (rapportene, byggesaken og den hodeløse siden er derfor uendret). Fjernes ved å ta ut <link> og <script> i solpark.html,
   eller midlertidig med SOLPARK_FLATER.av() i konsollen.
   Reglene gjelder bare innholdet i kortene (.spg-post), aldri kartet, toppstripen eller rapportdokumenter (.skr). */

html.spf {
  --spf-valg: oklch(0.972 0.02 85);          /* valgflaten: varm papirtone */
  --spf-strek: oklch(0.44 0.12 45);          /* leire: venstre strek, handlinger */
  --spf-felt-kant: oklch(0.6 0.04 65);       /* ≥ 3:1 mot hvitt og mot valgflaten (WCAG 1.4.11) */
  --spf-felt-kant-hover: oklch(0.48 0.05 60);
  --spf-fokus: oklch(0.56 0.15 45);
  --spf-tekst: oklch(0.29 0.03 60);
  --spf-dempet: oklch(0.43 0.04 60);
  --spf-svar-strek: oklch(0.86 0.03 78);
  --spf-handling-bunn: oklch(0.965 0.03 60);
  --spf-handling-hover: oklch(0.93 0.045 55);
  --spf-obs-bunn: oklch(0.965 0.035 40); --spf-obs-strek: oklch(0.5 0.16 35); --spf-obs-tekst: oklch(0.36 0.12 35);
  --spf-merk-bunn: oklch(0.975 0.022 85); --spf-merk-strek: oklch(0.6 0.11 75); --spf-merk-tekst: oklch(0.36 0.06 65);
}

/* ---------- (a) Valgflaten: felt på tonet bånd med strek til venstre ---------- */
html.spf .spg-post .solpark-rutenett:has(input, select, textarea) {
  background: var(--spf-valg); border-left: 3px solid var(--spf-strek); border-radius: 0 10px 10px 0;
  padding: 8px 12px 10px; margin-top: 8px; margin-bottom: 4px;
}
html.spf .spg-post .solpark-rutenett:has(input, select, textarea)::before {
  content: "✎ Dine valg"; grid-column: 1 / -1; margin-bottom: -4px;
  font: 700 10.5px/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spf-strek);
}
/* Avkrysninger i kortene er også valg: samme bånd (ikke i tabeller og lister, og ikke kartlagene, som står utenfor kortene) */
html.spf .spg-post .solpark-panel .solpark-kryss:not(.solpark-rutenett *):not(td *):not(li *):not(.solpark-felt *) {
  display: flex; align-items: flex-start; gap: 7px; background: var(--spf-valg); border-left: 3px solid var(--spf-strek);
  border-radius: 0 8px 8px 0; padding: 5px 10px; margin: 3px 0; color: var(--spf-tekst);
}
html.spf .spg-post .solpark-panel .solpark-kryss:not(.solpark-rutenett *):not(td *):not(li *):not(.solpark-felt *) > input { margin-top: 2px; flex: none; }
/* Felt som står alene i kortet (ikke i et rutenett) får samme bånd */
html.spf .spg-post .solpark-felt:not(.solpark-rutenett *):has(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--spf-valg); border-left: 3px solid var(--spf-strek); border-radius: 0 10px 10px 0; padding: 6px 10px 8px;
}
html.spf .spg-post .solpark-felt { color: var(--spf-dempet); }
html.spf .spg-post .solpark-felt > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--spf-tekst); }
html.spf .spg-post .solpark-felt small { color: var(--spf-dempet); }

/* Selve feltene: hvite, synlig kant, tydelig fokus */
html.spf .spg-post :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select, textarea) {
  background-color: #fff; border: 1.5px solid var(--spf-felt-kant); border-radius: 8px; color: var(--spf-tekst);
}
html.spf .spg-post :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select, textarea):hover:not(:disabled) {
  border-color: var(--spf-felt-kant-hover);
}
html.spf .spg-post :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--spf-fokus); outline-offset: 1px; box-shadow: 0 0 0 4px oklch(0.56 0.15 45 / 0.18);
}
html.spf .spg-post :is(input, select, textarea):disabled { background-color: oklch(0.95 0.008 80); border-style: dashed; color: var(--spf-dempet); }
html.spf .spg-post :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--spf-strek); }

/* ---------- (e) Tilstand på feltet (bare der solpark-flater.js kjenner standardverdien) ---------- */
html.spf .spg-post .solpark-felt[data-spf-tilstand] { position: relative; }
html.spf .spg-post .solpark-felt[data-spf-tilstand] > span:first-child::after {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
  font: 600 10.5px/16px "DM Sans", system-ui, sans-serif; white-space: nowrap;
}
html.spf .spg-post .solpark-felt[data-spf-tilstand="standard"] > span:first-child::after {
  content: "○ " attr(data-spf-merke); color: var(--spf-dempet); border: 1px dashed oklch(0.7 0.03 70);
}
html.spf .spg-post .solpark-felt[data-spf-tilstand="endret"] > span:first-child::after {
  content: "✎ endret"; color: oklch(0.32 0.1 250); background: oklch(0.94 0.03 250); border: 1px solid oklch(0.6 0.08 250);
}
html.spf .spg-post .solpark-felt[data-spf-tilstand="maa"] > span:first-child::after {
  content: "● Velg"; color: oklch(0.99 0.01 80); background: var(--spf-strek); border: 1px solid var(--spf-strek);
}
html.spf .spg-post .solpark-felt[data-spf-tilstand="endret"] :is(input, select) { border-color: oklch(0.5 0.1 250); border-width: 2px; }
html.spf .spg-post .solpark-felt[data-spf-tilstand="maa"] :is(input, select) { border-color: var(--spf-strek); border-width: 2px; }
html.spf .spg-post .solpark-felt[data-spf-tilstand="endret"] > span:first-child { padding-right: 26px; }
html.spf .spf-tilbake {
  position: absolute; top: -3px; right: 0; width: 24px; height: 22px; padding: 0; border-radius: 6px;
  border: 1px solid oklch(0.6 0.08 250); background: #fff; color: oklch(0.32 0.1 250); font: 700 13px/1 "DM Sans", system-ui, sans-serif; cursor: pointer;
}
html.spf .spf-tilbake:hover { background: oklch(0.94 0.03 250); }
html.spf .spf-tilbake:focus-visible { outline: 2px solid var(--spf-fokus); outline-offset: 1px; }
html:not(.spf) .spf-tilbake, html:not(.spf) .spf-forklaring, html:not(.spf) .spf-forklar-knapp { display: none !important; }

/* ---------- (b) Svarflaten: tall i serif uten boks, med enhet ---------- */
html.spf .spg-post .solpark-nokler { gap: 4px 16px; margin-top: 4px; }
html.spf .spg-post .solpark-nokler::before {
  content: "= Regnet ut"; grid-column: 1 / -1; margin-bottom: -2px;
  font: 700 10.5px/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spf-dempet);
}
html.spf .spg-post .solpark-nokkel {
  background: transparent; border: 0; border-top: 1px solid var(--spf-svar-strek); border-radius: 0; padding: 6px 0 2px;
}
html.spf .spg-post .solpark-nokkel b { font: 500 27px/1.1 Newsreader, Georgia, serif; font-variant-numeric: tabular-nums; color: var(--spf-tekst); }
html.spf .spg-post .solpark-nokkel em { font: 600 12px/1.3 "DM Sans", system-ui, sans-serif; color: var(--spf-dempet); }
html.spf .spg-post .solpark-nokkel span { color: var(--spf-dempet); }
/* Merkelapp på svartall der teksten sier hvor tallet kommer fra (satt av solpark-flater.js) */
html.spf .spg-post .solpark-nokkel[data-spf-kilde] b::after {
  content: attr(data-spf-kilde); margin-left: 6px; padding: 0 6px; border-radius: 999px; vertical-align: 5px;
  font: 600 10.5px/16px "DM Sans", system-ui, sans-serif; color: var(--spf-dempet); border: 1px dashed oklch(0.66 0.04 70);
}
/* Oppsummeringsrader på arbeidsflaten (steg 8 og 9) er allerede svar: tall i serif, ingen boks */
html.spf .spg-post .spg-rad b { font-variant-numeric: tabular-nums; }

/* ---------- (c) Handlinger som starter en beregning ser ut som knapper ---------- */
html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"] {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; min-height: 32px; box-sizing: border-box;
  border: 1.5px solid var(--spf-strek); border-radius: 12px; background: var(--spf-handling-bunn); color: var(--spf-strek);
  font: 600 13px/1.25 "DM Sans", system-ui, sans-serif; text-decoration: none; text-align: left; cursor: pointer; vertical-align: middle;
}
html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"]::before { content: "▶"; font-size: 9px; line-height: 1; }
html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"]:hover:not(:disabled) { background: var(--spf-handling-hover); color: oklch(0.36 0.11 45); }
html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"]:disabled { opacity: 0.65; cursor: progress; border-style: dashed; }
html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"]:focus-visible { outline: 2px solid var(--spf-fokus); outline-offset: 2px; }
html.spf .spg-post :is(p, li, span, td) > :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"] { margin: 2px 0; }
/* Arbeidsflaten tar kanten av .solpark-verktoy__btn (laget for verktøylinjen i kartet); i kortene er de knapper, så kanten kommer tilbake */
html.spf .spg .spg-post .solpark-verktoy__btn:not([data-spf="regn"]) { border: 1.5px solid oklch(0.5 0.05 60); background: oklch(0.99 0.005 85); }
html.spf .spg .spg-post .solpark-verktoy__btn.on:not([data-spf="regn"]) { background: var(--spg-aktiv); border-color: var(--spf-strek); }
/* Knapperader brytes i stedet for å klemmes til ett ord per linje i det smale panelet */
html.spf .spg-post .solpark-knapper { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Navigasjon forblir understreket lenke; gjør understrekingen tydelig */
html.spf .spg-post .solpark-lenkeknapp:not([data-spf="regn"]) { text-underline-offset: 2px; }

/* ---------- (d) Varsler: én form, med tegn og ord, ikke bare farge ---------- */
html.spf .spg-post .solpark-advarsel {
  background: var(--spf-obs-bunn); border: 0; border-left: 4px solid var(--spf-obs-strek); border-radius: 0 10px 10px 0;
  padding: 8px 10px 8px 12px; color: var(--spf-obs-tekst); line-height: 1.45;
}
html.spf .spg-post .solpark-advarsel::before {
  content: "▲ Obs"; display: inline-block; margin-right: 7px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
  font: 700 10.5px/17px "DM Sans", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--spf-obs-strek); color: oklch(0.99 0.01 80);
}
html.spf .spg-post .solpark-advarsel--mild { background: var(--spf-merk-bunn); border-left-color: var(--spf-merk-strek); color: var(--spf-merk-tekst); }
html.spf .spg-post .solpark-advarsel--mild::before { content: "● Merk"; background: transparent; color: var(--spf-merk-tekst); border: 1px solid var(--spf-merk-strek); line-height: 15px; }

/* ---------- Forklaringen («Hvite felt kan du endre …») ---------- */
html.spf .spf-forklaring {
  flex: none; margin: 10px 16px 0; padding: 10px 12px 10px 12px; border-radius: 12px; border: 1px solid oklch(0.88 0.03 80);
  background: oklch(0.99 0.006 85); color: var(--spf-tekst); font: 13px/1.45 "DM Sans", system-ui, sans-serif; position: relative;
}
html.spf .spf-forklaring__tittel { margin: 0 28px 6px 0; font: 600 13.5px/1.3 "DM Sans", system-ui, sans-serif; }
html.spf .spf-forklaring__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
html.spf .spf-forklaring__liste li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; }
html.spf .spf-pr { display: inline-flex; align-items: center; justify-content: center; height: 24px; box-sizing: border-box; font-size: 12px; }
html.spf .spf-pr--felt { border-left: 3px solid var(--spf-strek); background: var(--spf-valg); padding: 0 6px; border-radius: 0 6px 6px 0; }
html.spf .spf-pr--felt i { display: block; width: 44px; height: 16px; background: #fff; border: 1.5px solid var(--spf-felt-kant); border-radius: 4px; }
html.spf .spf-pr--tall { font: 500 19px/1 Newsreader, Georgia, serif; border-top: 1px solid var(--spf-svar-strek); padding: 0 4px; }
html.spf .spf-pr--knapp { border: 1.5px solid var(--spf-strek); border-radius: 999px; background: var(--spf-handling-bunn); color: var(--spf-strek); font-weight: 600; padding: 0 8px; }
html.spf .spf-pr--obs { background: var(--spf-obs-strek); color: #fff; border-radius: 999px; font-weight: 700; font-size: 10.5px; padding: 0 7px; height: 18px; }
html.spf .spf-pr--endret { color: oklch(0.32 0.1 250); background: oklch(0.94 0.03 250); border: 1px solid oklch(0.6 0.08 250); border-radius: 999px; font-weight: 600; font-size: 10.5px; padding: 0 6px; height: 18px; }
html.spf .spf-forklaring__lukk {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  font-size: 20px; line-height: 1; color: var(--spf-dempet); cursor: pointer;
}
html.spf .spf-forklaring__lukk:hover { background: oklch(0.94 0.02 60); }
html.spf .spf-forklaring__ok { margin-top: 8px; }
html.spf .spf-forklaring :focus-visible { outline: 2px solid var(--spf-fokus); outline-offset: 2px; }
/* Den klassiske siden: forklaringen står øverst i kortkolonnen */
html.spf .solpark-grid .spf-forklaring { margin: 0 0 4px; }
/* Knappen som åpner forklaringen igjen (øverst til høyre i panelhodet, og øverst i kortkolonnen på den klassiske siden) */
html.spf .spf-forklar-knapp { border: 0; background: none; padding: 4px 2px; font: 500 12.5px "DM Sans", system-ui, sans-serif; color: var(--spf-dempet); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html.spf .spf-forklar-knapp:hover { color: var(--spf-tekst); }
html.spf .spg-panel__hode { position: relative; }
html.spf .spg-panel__hode > .spf-forklar-knapp { position: absolute; top: 10px; right: 14px; white-space: nowrap; }

@media (max-width: 1100px) {
  html.spf .spf-forklaring { margin: 6px 12px 0; padding: 8px 10px; font-size: 12.5px; }
  html.spf .spf-forklaring__liste li { grid-template-columns: 66px 1fr; }
  html.spf .spg.spg--skuff-lukket .spf-forklaring { display: none; }
  html.spf .spg-panel__hode > .spf-forklar-knapp { top: 0; right: 10px; min-height: 32px; }
  html.spf .spg-post :is(.solpark-lenkeknapp, .spg-lenke, .solpark-verktoy__btn)[data-spf="regn"] { min-height: 40px; }
  html.spf .spf-tilbake { width: 32px; height: 28px; top: -6px; }
  html.spf .spg-post .solpark-felt[data-spf-tilstand="endret"] > span:first-child { padding-right: 34px; }
}
@media print {
  html.spf .spf-forklaring, html.spf .spf-forklar-knapp, html.spf .spf-tilbake { display: none !important; }
}