/* Bestillingsskjemaet (bit 3, ux-flyt C1), i variant A (mockups/a-skjema.html). Verdier fra tokens.css.
   Feltene har blekkramme, valgene er brikker med en liten firkant, og bølgestreken skiller knappene. */

/* --- Rammen: skjemaet til venstre, spiren ved siden av på PC ---------------------------------- */
.bestill {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding-top: var(--rom-2); padding-bottom: var(--rom-5);
}
.bestill-hoved { min-width: 0; max-width: 42.5rem; }
.bestill .overlinje, .live .overlinje-rod { color: var(--farge-honerod); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bestill h1, .live-hode h1 { font-size: clamp(2.875rem, 5.6vw, 5.5rem); line-height: 0.95; margin: var(--rom-3) 0 0; }
.bestill .bolge, .live-hode .bolge { width: min(20rem, 60%); height: 1.125rem; margin-top: var(--rom-2); }
.bestill .ingress { font-size: var(--skrift-str-stor); max-width: 34em; margin: var(--rom-4) 0 0; }
.vei { margin: var(--rom-3) 0 0; }
.siden { display: none; }
.siden .spire { display: block; width: 14.375rem; height: auto; overflow: visible; }
.spire-blekk { fill: none; stroke: var(--farge-marine); stroke-linecap: round; stroke-linejoin: round; }
.spire-fyll { fill: var(--farge-krem); }
.spire-knopp { fill: none; stroke: var(--farge-honerod); stroke-width: 2.4; stroke-dasharray: 4 4; }
.spire-pil { fill: none; stroke: var(--farge-marine); stroke-width: 1.2; stroke-dasharray: 3 4; }
.spire-tekst { fill: var(--farge-marine); font-family: var(--skrift-mono); font-size: 11px; }
.siden .notat {
  max-width: 22em; margin: var(--rom-3) 0 0;
  font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); line-height: 1.6; color: var(--farge-tekst-dempet);
}
.siden .notat b { font-weight: 600; }
@media (min-width: 53.75rem) {
  .bestill { grid-template-columns: minmax(0, 42.5rem) minmax(0, 1fr); gap: var(--rom-5) 5rem; padding-top: var(--rom-4); }
  .siden { display: block; align-self: start; position: sticky; top: 1.875rem; padding-top: 9.375rem; }
}

/* --- Felt -------------------------------------------------------------------------------------- */
.skjema fieldset { border: 0; margin: 0 0 var(--rom-4); padding: 0; min-width: 0; }
.skjema legend { padding: 0; }
.skjema legend h2 { margin-top: var(--rom-4); }
.legende {
  display: block; margin-top: var(--rom-5);
  font-family: var(--skrift-overskrift); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: var(--skrift-vekt-overskrift);
  line-height: 0.95; text-transform: uppercase; color: var(--farge-tekst);
}
.valg .hjelp { margin-top: var(--rom-2); }
.felt { margin: var(--rom-5) 0 0; }
.felt label, .felt-etikett { display: block; padding: 0; font-weight: 700; font-size: var(--skrift-str); color: var(--farge-tekst); margin: 0; }
.valgfritt { font-weight: 400; color: var(--farge-tekst-dempet); }
.hjelp { font-size: var(--skrift-str-liten); color: var(--farge-tekst-dempet); margin: 2px 0 0; }
.feiltekst {
  display: flex; gap: var(--rom-2); align-items: baseline;
  color: var(--status-rod-ikon); font-weight: 700; margin: var(--rom-2) 0 0;
}
.feiltekst::before {
  content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 6px; background: var(--status-rod-ikon); color: var(--farge-krem);
  font-family: var(--skrift-mono); font-size: 0.75rem; transform: translateY(0.1rem);
}
.skjema input[type="text"], .skjema input[type="email"], .skjema input[type="password"], .skjema textarea, .skjema select {
  display: block; width: 100%;
  min-height: 3.25rem; margin-top: 0.625rem;
  padding: 0.8125rem 0.9375rem;
  border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 var(--strek) var(--farge-marine);
  background: color-mix(in srgb, var(--farge-hvit) 35%, transparent);
  color: var(--farge-tekst);
  font: inherit; font-size: var(--skrift-str);
}
.skjema textarea { resize: vertical; line-height: 1.5; }
.skjema select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("pil-ned.ce267224af88.svg"); background-repeat: no-repeat;
  background-position: right 1rem center; background-size: 1rem 0.625rem;
  padding-right: 2.875rem;
}
.skjema input[type="text"]:focus-visible, .skjema input[type="email"]:focus-visible, .skjema input[type="password"]:focus-visible,
.skjema textarea:focus-visible, .skjema select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2.5px var(--farge-marine), 0 0 0 4px color-mix(in srgb, var(--farge-honerod) 25%, transparent);
}
.felt-feil input[type="text"], .felt-feil input[type="email"], .felt-feil input[type="password"], .felt-feil textarea, .felt-feil select {
  box-shadow: inset 0 0 0 2px var(--status-rod-ikon);
}

/* Avkrysning: firkant med blekkramme, rød med hake når den er krysset av. */
.valg-rad { display: flex; align-items: flex-start; gap: 0.75rem; min-height: var(--trykkflate); }
.valg-rad label { display: inline; font-weight: 400; color: var(--farge-brodtekst); margin: 0; padding-top: 0.0625rem; }
.skjema .valg-rad input[type="checkbox"], .skjema .valg-rad input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 1.375rem; height: 1.375rem; margin: 0.125rem 0 0;
  border-radius: 6px; box-shadow: inset 0 0 0 1.8px var(--farge-marine); background: transparent; cursor: pointer;
}
.skjema .valg-rad input:checked { background: var(--farge-honerod) url("avkrysset.6a2d2338c55d.svg") center / 100% 100% no-repeat; box-shadow: none; }
.skjema .valg-rad input[type="radio"]:checked { background: var(--farge-honerod) linear-gradient(var(--farge-krem), var(--farge-krem)) center / 0.5rem 0.5rem no-repeat; }
.skjema .valg-rad input:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }
.felt-feil .valg-rad input:not(:checked) { box-shadow: inset 0 0 0 2px var(--status-rod-ikon); }
/* Spørsmålet på første side: svarene som store valg. */
.valg .valg-rad {
  position: relative; align-items: center; margin-top: 0.625rem; padding: 0.8125rem 1rem;
  border-radius: 12px; box-shadow: inset 0 0 0 var(--strek) var(--farge-marine);
}
.valg .valg-rad:first-of-type { margin-top: var(--rom-3); }
.valg .valg-rad label { font-weight: 700; color: var(--farge-tekst); cursor: pointer; padding: 0; }
/* Hele raden er trykkflaten. */
.valg .valg-rad label::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.valg .valg-rad:has(input:checked) { background: var(--farge-marine); box-shadow: none; }
.valg .valg-rad:has(input:checked) label { color: var(--farge-krem); }
.valg .valg-rad input { margin: 0; }
.valg.felt-feil .valg-rad { box-shadow: inset 0 0 0 2px var(--status-rod-ikon); }

.sporsmal { margin-bottom: var(--rom-4); }
.sporsmal .felt { margin-top: var(--rom-3); margin-bottom: var(--rom-1); }
.sporsmal .valg-rad { margin-top: var(--rom-2); }
.tillatelse { margin-top: var(--rom-3); }
.tillatelse blockquote {
  margin: 0 0 var(--rom-3); padding: var(--rom-3) var(--rom-4);
  border-left: 3px solid var(--farge-honerod); border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--farge-hvit) 45%, transparent); color: var(--farge-tekst);
}
.tillatelse p { margin: 0 0 var(--rom-2); }
.melding-feil { border-left-color: var(--status-rod-ikon); background: var(--status-rod-flate); }
.lenke { overflow-wrap: anywhere; }
/* Skjult felt mot roboter. Utenfor skjermen, ikke display: none. */
.robotfelt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- ux-flyt C1: fire deler, én om gangen med skjema.js. Uten JavaScript står alt under hverandre. --- */
.skjema [hidden] { display: none; }
.skjema fieldset.felt { border: 0; padding: 0; min-width: 0; margin: var(--rom-5) 0 0; }
.skjemadel { margin: var(--rom-5) 0 0; }
.skjemadel > h2 {
  margin: var(--rom-5) 0 0;
  font-size: clamp(2rem, 3vw, 2.75rem); font-weight: var(--skrift-vekt-overskrift); line-height: 0.95;
}
.skjemadel > h2:focus { outline: none; }
.skjemadel > h2:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }
.skjemadel > .hjelp { margin-top: var(--rom-2); }
.skjema-js .skjemadel { margin-top: 0; }
.skjema-js .skjemadel > h2 { margin-top: 0; }
.skjema-js .valgfritt { display: none; }

/* Fremdriften øverst: «✓ Om deg  Om appen  Ti spørsmål  Se over og send», «Del 2 av 4» og bølgestreken som fylles. */
.deler-fremdrift { margin: 2.75rem 0 1.875rem; }
.deler-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.375rem;
  font-size: var(--skrift-str-liten); font-weight: 600; color: var(--farge-tekst-dempet);
}
.deler-hake { display: none; color: var(--farge-honerod); font-weight: 700; }
.deler-ferdig .deler-hake { display: inline; }
.deler-ferdig { color: var(--farge-tekst); font-weight: 700; }
.deler-gjeldende { color: var(--farge-honerod); font-weight: 700; }
.deler-teller { margin: 0.75rem 0 0; font-family: var(--skrift-mono); font-size: 0.78rem; color: var(--farge-tekst-dempet); }
.deler-linje {
  container-type: inline-size;
  height: 0.75rem; margin-top: 0.375rem;
  background: url("fremdrift-spor.765c85e79db3.svg") center / 100% 100% no-repeat;
}
.deler-linje-fyll {
  height: 100%; width: 25%; overflow: hidden;
  background: url("fremdrift-fyll.396b0b32c4ad.svg") left center / 100cqw 100% no-repeat;
  transition: width 0.5s ease;
}
@media (prefers-reduced-motion: reduce) { .deler-linje-fyll { transition: none; } }

/* Valgknapper (radio som brikker): Ja/Nei og antall brukere. Valgt: marine brikke med rød firkant. */
.valgknapper { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.75rem; }
.skjema .valgknapp {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 3rem; margin: 0; padding: 0.625rem 1rem 0.625rem 0.75rem;
  border-radius: 12px; box-shadow: inset 0 0 0 var(--strek) var(--farge-marine);
  color: var(--farge-tekst); font-weight: 700; cursor: pointer;
}
.skjema .valgknapp input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 1.25rem; height: 1.25rem; margin: 0;
  border-radius: 6px; box-shadow: inset 0 0 0 1.8px var(--farge-marine); background: transparent; cursor: pointer;
}
.skjema .valgknapp:has(input:checked) { background: var(--farge-marine); color: var(--farge-krem); box-shadow: none; }
.skjema .valgknapp input:checked {
  box-shadow: none;
  background: var(--farge-honerod) linear-gradient(var(--farge-krem), var(--farge-krem)) center / 0.5rem 0.5rem no-repeat;
}
.valgknapp:has(input:focus-visible) { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }
.valgknapp input:focus-visible { outline: none; }
.felt-feil .valgknapp { box-shadow: inset 0 0 0 2px var(--status-rod-ikon); }
.skjema .felt-feil .valgknapp:has(input:checked) { box-shadow: none; }

/* I Windows' høykontrastmodus tegner nettleseren valgene selv. */
@media (forced-colors: active) {
  .skjema .valgknapp input, .skjema .valg-rad input[type="checkbox"], .skjema .valg-rad input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
  .skjema input[type="text"], .skjema input[type="email"], .skjema input[type="password"], .skjema textarea, .skjema select { border: 1px solid; }
}

/* Spørsmålene ett om gangen. */
.sporsmal-teller { margin: var(--rom-4) 0 0; font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); font-weight: 600; letter-spacing: 0.08em; color: var(--farge-honerod); }
.sporsmal-teller:focus { outline: none; }
.sporsmal-teller:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }

/* Knappene nederst i hver del, med bølgestreken over. */
.knapp .knapp-ikon { width: 1.375rem; height: 1.375rem; flex: none; }
.knapp { gap: 0.75rem; }
.skjemadel-knapper {
  position: relative; justify-content: space-between;
  margin: 2.75rem 0 0; padding-top: 1.75rem;
}
.skjemadel-knapper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.625rem;
  background: url("../felles/bolge.89224db872a8.svg") center / 100% 100% no-repeat; opacity: 0.45;
}
.skjemadel-knapper > :only-child { margin-left: auto; }
@media (max-width: 53.6875rem) {
  .skjemadel-knapper { flex-direction: column-reverse; align-items: stretch; }
  .skjemadel-knapper .knapp { width: 100%; justify-content: center; }
  .skjemadel-knapper > :only-child { margin-left: 0; }
}

/* Feilboksen øverst når serveren sender skjemaet tilbake. */
.feilboks {
  margin: 0 0 var(--rom-4); padding: var(--rom-3) var(--rom-4);
  border: 2px solid var(--status-rod-ikon); border-radius: var(--radius);
  background: var(--status-rod-flate); color: var(--farge-tekst);
}
.feilboks:focus { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }
.feilboks-tittel { margin: 0 0 var(--rom-2); font-size: var(--skrift-str-h3); color: var(--status-rod-ikon); }
.feilboks-liste { margin: 0; padding-left: 1.25rem; }
.feilboks-liste li { margin: 0 0 var(--rom-1); }
.feilboks-liste a { color: var(--farge-tekst); font-weight: 700; display: inline-block; min-height: var(--trykkflate); padding: var(--rom-1) 0; }

/* «Se over og send». */
.oppsummering { margin: var(--rom-4) 0; }
.oppsummering-del { padding: var(--rom-3) 0; border-bottom: 1px dashed var(--farge-linje-sterk); }
.oppsummering-del:first-child { border-top: 1px dashed var(--farge-linje-sterk); }
.oppsummering-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--rom-2); }
.oppsummering-topp h3 { margin: 0; font-size: 1.375rem; }
.oppsummering-liste { margin: var(--rom-2) 0 0; }
.oppsummering-liste > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--rom-2); padding: var(--rom-1) 0; }
.oppsummering-liste dt { font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); color: var(--farge-tekst-dempet); padding-top: 0.1875rem; }
.oppsummering-liste dd { margin: 0; overflow-wrap: anywhere; color: var(--farge-tekst); font-weight: 600; }
.oppsummering-svar { margin: var(--rom-2) 0 0; }
.oppsummering-svarliste { margin: var(--rom-2) 0 0; padding: 0; list-style: none; }
.oppsummering-svarliste li { padding: var(--rom-2) 0; border-top: 1px dashed var(--farge-linje-sterk); }
.oppsummering-svarliste p { margin: var(--rom-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lenkeknapp {
  min-height: var(--trykkflate); min-width: var(--trykkflate); padding: 0 var(--rom-1);
  border: 0; background: none; font: inherit; font-weight: 700; color: var(--farge-lenke);
  text-decoration: underline; text-decoration-color: var(--farge-honerod); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  cursor: pointer;
}
.lenkeknapp:hover { text-decoration-style: wavy; }
.lenkeknapp:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 2px; }

/* Kvitteringen: lenken i et lyst kort. */
.lenkekort { background: color-mix(in srgb, var(--farge-hvit) 45%, transparent); box-shadow: inset 0 0 0 var(--strek) var(--farge-marine); border-radius: var(--radius); }
.lenkekort .lenke { font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); }
.skjema > .melding { margin: 0 0 var(--rom-4); }
/* Mobil: delene på én linje. Tettere og litt mindre; blir det likevel for smalt (stor tekst), ruller linjen sideveis. */
@media (max-width: 53.6875rem) {
  .deler-liste { flex-wrap: nowrap; gap: 0 0.75rem; overflow-x: auto; font-size: var(--skrift-str-mini); white-space: nowrap; scrollbar-width: none; }
  .deler-navn { flex: none; }
}