/* Avtalen om retting på skjerm, i variant A (ux-forside PR 8). Lastes etter appsjekk.css og skjema.css.
   Samme formspråk som rapporten: overskrift med omriss og fylt linje, pristabell med tall i mono og
   stiplede linjer, og «Godta» som rød firkant med pil ved siden av «Nei takk». Rammen (.smaside) og
   blomsten står i felles.css. Verdier fra tokens.css. Ingen bevegelse her. */

.avtaleside .smaside-tekst { max-width: 44rem; }
@media (min-width: 53.75rem) {
  .avtaleside { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); gap: var(--rom-5) 4rem; }
}

.avtale-seksjon {
  margin: var(--rom-6) 0 var(--rom-3);
  padding-top: var(--rom-4);
  border-top: 1px dashed var(--farge-linje-sterk);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: var(--skrift-vekt-overskrift);
  line-height: 0.95;
}
.avtaleside .ingress { margin: 0; }
.avtaleside .melding { margin: 0; }

/* Kvitteringen når avtalen er godtatt: grønn flate, som «grønt» i rapporten. */
.avtale-kvittering {
  padding: var(--rom-3) var(--rom-4);
  border-left-color: var(--status-gronn-ikon);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--status-gronn-flate);
}
.avtale-kvittering p { margin: 0 0 var(--rom-1); }
.avtale-kvittering p:last-child { margin-bottom: 0; }

/* Pristabellen: mono for beløpene, stiplet linje mellom punktene og blekklinje over summen. */
.avtale-pris { font-size: var(--skrift-str); }
.avtale-pris thead th {
  padding: 0 var(--rom-2) var(--rom-2) 0;
  border-bottom: 2px solid var(--farge-marine);
  font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); font-weight: 600; letter-spacing: 0.04em;
  color: var(--farge-tekst-dempet);
}
.avtale-pris thead th:not(:first-child) { white-space: nowrap; }
.avtale-pris th:not(:first-child) { text-align: right; padding-right: 0; padding-left: var(--rom-3); }
.avtale-pris td { padding: var(--rom-3) var(--rom-2) var(--rom-3) 0; border-bottom: 1px dashed var(--farge-linje-sterk); color: var(--farge-brodtekst); }
.avtale-pris td:not(:first-child) { padding-right: 0; padding-left: var(--rom-3); }
.avtale-pris td strong { color: var(--farge-tekst); }
.avtale-pris .tall { font-family: var(--skrift-mono); font-size: 0.9375rem; color: var(--farge-tekst); }
.avtale-pris .punkt-hva { margin-top: var(--rom-1); color: var(--farge-brodtekst); }
.avtale-pris .sum td { padding-top: var(--rom-3); border-top: 2px solid var(--farge-marine); border-bottom: 0; }
.avtale-pris .sum + tr td { border-bottom: 0; padding-top: 0; }
.avtale-pris .sum:last-child .tall strong { font-size: 1.125rem; color: var(--farge-honerod); }
@media (max-width: 37.5rem) {
  .avtale-pris td, .avtale-pris td:not(:first-child) { padding: 0; border: 0; }
  .avtale-pris .punkt-rad { padding: var(--rom-3); border: var(--strek) solid var(--farge-linje-sterk); background: var(--farge-hvit); }
  .avtale-pris td[data-etikett]::before { font-family: var(--skrift); font-size: var(--skrift-str-liten); }
  /* Summene: teksten til venstre og beløpet til høyre, uten kort rundt. */
  .avtale-pris .sum-rad {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none;
    margin: 0; padding: var(--rom-2) 0; border: 0; border-radius: 0; background: transparent;
  }
  .avtale-pris .sum-rad td.tall { text-align: right; }
  .avtale-pris .sum-rad td[data-etikett] { grid-column: 1 / -1; text-align: left; }
  .avtale-pris .sum { margin-top: var(--rom-2); padding-top: var(--rom-3); border-top: 2px solid var(--farge-marine); }
}

.avtale-start strong { font-family: var(--skrift-mono); font-weight: 600; }

/* Avtaleteksten: lys flate med rød strek til venstre, som tillatelsen i skjemaet. */
.avtaletekst {
  margin: 0 0 var(--rom-2);
  padding: var(--rom-4) var(--rom-4) var(--rom-3);
  border-left: 3px solid var(--farge-honerod);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--farge-hvit) 55%, transparent);
}
.avtaletekst + .hjelp { font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); }
.avtaletekst + .hjelp + .avtaletekst { margin-top: var(--rom-4); }
.avtaletekst > :first-child { margin-top: 0; }
.avtaletekst h2, .avtaletekst h3 { margin: var(--rom-5) 0 var(--rom-2); font-size: 1.75rem; font-weight: var(--skrift-vekt-overskrift); line-height: 1; }
.avtaletekst h4 {
  margin: var(--rom-4) 0 var(--rom-1);
  font-family: var(--skrift-overskrift); font-size: 1.375rem; font-weight: var(--skrift-vekt-underoverskrift);
  line-height: 1.05; letter-spacing: var(--sporing-overskrift); text-transform: uppercase; color: var(--farge-tekst);
}
.avtaletekst p, .avtaletekst li { color: var(--farge-brodtekst); }

/* Svaret: feltene, avkrysningen og knappene. */
.avtale-svar { margin-top: var(--rom-5); padding-top: var(--rom-2); }
.avtale-svar .felt:first-of-type { margin-top: var(--rom-3); }
.avtale-over-knappen { margin: var(--rom-4) 0 0; color: var(--farge-brodtekst); }
.avtale-knapper {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rom-3) var(--rom-4);
  margin: var(--rom-4) 0 0; padding-top: var(--rom-4);
}
.avtale-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;
}
/* «Godta» er fylt hønerød med pil, «Nei takk» har bare ramme. */
.avtale-godta { font-size: 1.5rem; }
.avtale-godta-pil { display: inline-flex; }
.avtale-godta svg { width: 1.375rem; height: 1.375rem; }
.avtale-knapper .knapp-sekundaer { min-height: 3.375rem; }
@media (max-width: 37.5rem) {
  .avtale-knapper { flex-direction: column; align-items: stretch; }
  .avtale-knapper .knapp { justify-content: center; }
  .avtale-godta { font-size: 1.25rem; }
}

.avtale-lenker { margin-top: var(--rom-5); }

/* Taushetserklæringen for partnere (partner-nda): signaturen til Little Red Hen AS under teksten. */
.nda-signatur { margin: 1rem 0 0.25rem; font-weight: 700; color: var(--farge-tekst); }