/* Fasademonitor – eierens vei inn (/kom-i-gang/, 23.10.2026). Bygger på fm-2026.css: papir, blekk, strek.
   Ett steg om gangen med JavaScript (klassen fs-js), ellers alle stegene under hverandre. */
.fs { max-width: 760px; margin: 0 auto; padding: 8px var(--fm-marg) 64px; }
.fs h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -.045em; }
.fs .fm-overlinje { margin-bottom: 16px; }
.fs-topp { margin-bottom: 36px; }
.fs-ingress { margin-top: 16px; color: var(--fm-dempet); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; letter-spacing: -.01em; }
.fs-luft { margin-top: 24px; }
.fs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fremdrift: fire streker, den aktive i blekk og de ferdige i grønt */
.fs-fremdrift { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; color: var(--fm-dempet); font-size: 14px; line-height: 20px; font-weight: 700; }
.fs-fremdrift li { padding-top: 12px; border-top: 3px solid var(--fm-linje); }
.fs-fremdrift li span { margin-right: 4px; }
.fs-fremdrift li.er-aktiv { border-top-color: var(--fm-blekk); color: var(--fm-blekk); }
.fs-fremdrift li.er-ferdig { border-top-color: var(--fm-gronn); color: var(--fm-blekk); }
.fs-fremdrift li.er-ferdig span::after { content: " ✓"; color: var(--fm-gronn); }

/* Stegene */
.fs-skjema.fm-skjema { display: block; max-width: none; margin-top: 0; }
.fs-steg { display: grid; gap: 16px; padding-bottom: 48px; }
.fs-steg + .fs-steg { padding-top: 48px; border-top: 1px solid var(--fm-linje); }
.fs-js .fs-steg { padding: 0; border-top: 0; }
.fs-stegnr { color: var(--fm-dempet); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.fs-steg h2 { margin: -8px 0 4px; font-size: clamp(26px, 4vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -.04em; }
.fs-steg h2:focus { outline: none; }
.fs-steg h3 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.fs-gruppe { min-width: 0; margin: 0; padding: 0; border: 0; }
.fs-gruppe legend { padding: 0; margin: 8px 0 12px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.fs-rad { display: grid; grid-template-columns: minmax(7.5em, 9em) 1fr; gap: 12px; }

/* Felt: tydelig kant (minst 3:1 mot papiret) */
.fs-skjema input:not([type="checkbox"]):not([type="radio"]), .fs-skjema textarea { border-color: #8A8D85; background: #FFFFFF; }
.fs-skjema textarea { min-height: 112px; }
.fs-skjema [aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) { border: 2px solid var(--fm-signal); }

/* Valgkort: hele kortet er trykkflaten; valgt kort får blekkramme */
.fs-valg { display: grid; gap: 12px; }
.fs-kort { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 2px solid transparent; background: var(--fm-papir2); cursor: pointer; }
.fs-kort:hover { border-color: #CFCBC0; }
.fs-kort.er-valgt { border-color: var(--fm-blekk); background: var(--fm-papir); }
.fs-kort:has(input:checked) { border-color: var(--fm-blekk); background: var(--fm-papir); }
.fs-kort:has(input:focus-visible) { outline: 2px solid var(--fm-gronn); outline-offset: 4px; }
.fs-skjema .fs-kort input[type="radio"] { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--fm-blekk); }
.fs-kort-innhold { display: grid; gap: 6px; min-width: 0; }
.fs-kort-pris { color: var(--fm-gronn); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.fs-kort-pris small { display: block; margin-top: 4px; color: var(--fm-dempet); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.fs-kort-tittel { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.fs-kort-tekst { color: var(--fm-dempet); font-size: 15px; line-height: 22px; }
.fs-kort-tekst strong { color: var(--fm-blekk); }
.fs-valg--liste .fs-kort, .fs-valg--to .fs-kort { padding: 16px 20px; }
.fs-valg--liste .fs-kort-tittel, .fs-valg--to .fs-kort-tittel { font-size: 17px; line-height: 24px; }
.fs-gruppe.er-feil .fs-kort { border-color: var(--fm-signal); }

/* Feil */
.fs-feil { margin-top: -8px; color: var(--fm-signal); font-size: 15px; line-height: 22px; font-weight: 700; }
.fs-feilliste { margin: 0 0 36px; padding: 16px 20px; border-left: 3px solid var(--fm-signal); background: var(--fm-papir2); color: var(--fm-signal); }
.fs-feilliste:focus { outline: none; }
.fs-feilliste ul { margin: 8px 0 0; padding-left: 20px; }
.fs-feilliste a { color: var(--fm-signal); text-decoration: underline; text-underline-offset: 3px; }

/* Knapper: Tilbake til venstre, Neste til høyre */
.fs-knapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; }
.fs-knapper .fm-knapp { margin-top: 0; }
.fs-knapper [data-fs-neste], .fs-knapper .fs-send { margin-left: auto; }
.fs-send { min-width: 280px; }

/* Oversikt før sending */
.fs-oversikt { margin: 0; }
.fs-oversikt > div { display: grid; grid-template-columns: 7em 1fr auto; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--fm-linje); }
.fs-oversikt > div:last-child { border-bottom: 1px solid var(--fm-linje); }
.fs-oversikt dt { font-weight: 700; }
.fs-oversikt dd { margin: 0; overflow-wrap: anywhere; }
.fs-endre { min-height: 32px; padding: 0; border: 0; background: none; color: var(--fm-dempet); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fs-endre:hover { color: var(--fm-blekk); }

/* Pris */
.fs-pris { padding: 20px 24px; background: var(--fm-papir2); }
.fs-pris .fm-tabell { margin-top: 12px; }
.fs-pris .fm-tabell .er-sum th, .fs-pris .fm-tabell .er-sum td { font-weight: 700; }
.fs-pris .fm-tabell td small { font-weight: 400; }
.fs-pris p { margin-top: 12px; }
.fs-samtykke { margin-top: 8px; }

/* Kvittering: tidslinje med ferdige og neste steg */
.fs-takk > p + p { margin-top: 16px; }
.fs-takk h2 { margin: 48px 0 20px; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; }
.fs-tidslinje { margin: 0; padding: 0; list-style: none; counter-reset: fs; }
.fs-tidslinje li { position: relative; padding: 4px 0 24px 52px; counter-increment: fs; }
.fs-tidslinje li::before { content: counter(fs); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--fm-papir2); color: var(--fm-blekk); font-weight: 700; line-height: 32px; text-align: center; }
.fs-tidslinje li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--fm-linje); }
.fs-tidslinje li:last-child { padding-bottom: 0; }
.fs-tidslinje li:last-child::after { display: none; }
.fs-tidslinje li.er-ferdig::before { content: "✓"; background: var(--fm-gronn); color: var(--fm-papir); }
.fs-tidslinje li.er-neste::before { background: var(--fm-blekk); color: var(--fm-papir); }
.fs-tidslinje strong { display: block; line-height: 24px; }
.fs-tidslinje span { color: var(--fm-dempet); }
.fs-takk .fm-handlinger { margin-top: 36px; }

/* Min side (24.10.2026): én blokk per sak med neste steg øverst, tidslinjen og det som er sendt inn */
.fs-side h1 { margin-bottom: 0; }
.fs-melding { margin: 24px 0 0; padding: 14px 18px; border-left: 3px solid var(--fm-gronn); background: var(--fm-papir2); }
.fs-melding--feil { border-left-color: var(--fm-signal); color: var(--fm-signal); }
.fs-sak { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--fm-linje); }
.fs-sak h2 { margin: 8px 0 20px; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
.fs-neste { margin: 0 0 28px; padding: 18px 20px; border-left: 3px solid var(--fm-blekk); background: var(--fm-papir2); }
.fs-neste .fm-etikett { margin-bottom: 6px; }
.fs-neste .fm-handlinger { margin-top: 16px; }
.fs-tidslinje small { display: block; margin-top: 2px; color: var(--fm-dempet); font-size: 13px; line-height: 18px; }
.fs-tidslinje li.er-stopp::before { content: "×"; background: var(--fm-signal); color: var(--fm-papir); }
.fs-tidslinje li:not(.er-ferdig):not(.er-neste):not(.er-stopp) strong, .fs-tidslinje li:not(.er-ferdig):not(.er-neste):not(.er-stopp) span { color: var(--fm-dempet); }
.fs-detaljer { margin-top: 28px; }
.fs-detaljer summary { min-height: 44px; padding: 10px 0; color: var(--fm-blekk); font-weight: 700; cursor: pointer; }
.fs-detaljer summary:focus-visible { outline: 2px solid var(--fm-gronn); outline-offset: 4px; }
.fs-detaljer .fs-oversikt { margin-top: 8px; }
.fs-detaljer .fs-oversikt > div { grid-template-columns: 7em 1fr; }
.fs-sak-valg { margin-top: 20px; color: var(--fm-dempet); font-size: 14px; line-height: 21px; }
.fs-sak-valg a { color: var(--fm-dempet); text-decoration: underline; text-underline-offset: 3px; }
.fs-sidebunn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--fm-linje); }
.fs-sidebunn .fm-knapp { margin-top: 0; }
.fs-lenkeskjema { margin-top: 32px; max-width: 520px; }
.fs-lenkeskjema .fm-felt { margin-bottom: 12px; }
.fs-lenkeskjema .turnstile-wrap { margin: 12px 0; }

@media (min-width: 680px) {
  .fs-valg:not(.fs-valg--liste) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fs-knapper { flex-direction: column-reverse; }
  .fs-knapper [data-fs-neste], .fs-knapper .fs-send { margin-left: 0; }
  .fs-send { min-width: 0; }
  .fs-fremdrift { font-size: 13px; }
}
@media (max-width: 520px) {
  .fs-oversikt > div, .fs-detaljer .fs-oversikt > div { grid-template-columns: 1fr auto; }
  .fs-oversikt dt { grid-column: 1 / -1; }
  .fs-pris { padding: 16px; }
  .fs-fremdrift li span { display: block; }
}