@charset "utf-8";
/* ==========================================================================
   SMARTFORMULÄRET

   Designprincipen är inte "vackert formulär". Den är: någon som är stressad,
   kanske arg, kanske rädd, ska kunna ta sig igenom sju steg på en telefon
   utan att tappa tråden.

   Det betyder: stora träffytor, ett beslut i taget, alltid synligt var man
   är, och möjlighet att pausa utan att förlora något.
   ========================================================================== */

.form-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ivory-warm);
}

/* --------------------------------------------------------------------------
   TOPPRAD
   Diskret. Logotyp, spara-status, avbryt. Inget mer — varje element här
   konkurrerar med frågan på skärmen.
   -------------------------------------------------------------------------- */
.form-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ivory-edge);
}

.form-header__inner {
  max-width: 780px;
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-header__brand {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  letter-spacing: -0.01em;
  /* Guldlinjen ur loggan. Se public/media/famora-ordmarke.svg. */
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.12em;
}

.form-header__status {
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.2em;
}
.form-header__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mist);
  flex: none;
  transition: background-color 300ms ease;
}
.form-header__status[data-state="saved"]::before { background: var(--ok); }
.form-header__status[data-state="saving"]::before { background: var(--gold); }
.form-header__status[data-state="error"]::before { background: var(--error); }

/* --------------------------------------------------------------------------
   PROGRESS

   Segment, inte en glidande stapel. En stapel som rör sig lite grann känns
   som att det aldrig tar slut. Sju avgränsade segment visar att det finns
   ett slut och hur långt det är dit.
   -------------------------------------------------------------------------- */
.progress {
  max-width: 780px;
  margin-inline: auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.progress__track {
  display: flex;
  gap: 4px;
  padding-block: 0.85rem;
}

.progress__segment {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ivory-edge);
  transition: background-color 320ms ease;
}
.progress__segment[data-state="done"]    { background: var(--gold); }
.progress__segment[data-state="current"] { background: var(--navy-600); }

.progress__label {
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  padding-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   STEG
   -------------------------------------------------------------------------- */
.form-main {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 2rem;
}

.step { display: none; }
.step.is-active { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .step.is-active {
    animation: step-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step__question {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  text-wrap: balance;
}

.step__help {
  margin: 0 0 2rem;
  max-width: 54ch;
  color: var(--text-on-light-soft);
  font-size: var(--step-0);
  line-height: 1.55;
}

.step__group + .step__group { margin-top: 2.25rem; }

.step__legend {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--navy-800);
  margin-bottom: 0.85rem;
  padding: 0;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   VALKORT

   Hela kortet är träffytan, inte bara en liten radioknapp. På en telefon
   med en hand är det skillnaden mellan att det går och att det inte går.
   -------------------------------------------------------------------------- */
.choices {
  display: grid;
  gap: 0.75rem;
}
.choices--two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease,
              box-shadow 160ms ease;
  box-shadow: var(--shadow-sm);
}
.choice:hover {
  border-color: var(--mist);
  box-shadow: var(--shadow-md);
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

/* Markören ritas som en cirkel eller ruta beroende på om det är ett eller
   flera val — formen ska berätta om man får välja mer än ett. */
.choice__marker {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--mist);
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease;
  display: grid;
  place-items: center;
}
.choice--radio .choice__marker { border-radius: 50%; }
.choice--check .choice__marker { border-radius: 6px; }

.choice__marker::after {
  content: '';
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}
.choice--radio .choice__marker::after {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ivory);
  transform: scale(0.5);
}
.choice--check .choice__marker::after {
  width: 11px; height: 6px;
  border-left: 2px solid var(--ivory);
  border-bottom: 2px solid var(--ivory);
  transform: rotate(-45deg) translate(1px, -1px) scale(0.7);
}

.choice__body { min-width: 0; }

.choice__title {
  display: block;
  font-weight: 500;
  color: var(--navy-800);
  line-height: 1.35;
}

.choice__note {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--text-on-light-mute);
  line-height: 1.45;
}

.choice input:checked ~ .choice__marker {
  border-color: var(--navy-700);
  background: var(--navy-700);
}
.choice input:checked ~ .choice__marker::after {
  opacity: 1;
  transform: none;
}
.choice--check input:checked ~ .choice__marker::after {
  transform: rotate(-45deg) translate(1px, -1px);
}

.choice:has(input:checked) {
  border-color: var(--navy-600);
  background: var(--gold-wash);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--navy-600);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   FÄLT
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.5rem; }

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--navy-800);
}

/* Aldrig placeholder som etikett — den försvinner när man börjar skriva,
   och då vet ingen längre vad fältet gällde. */
.field__hint {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--step--1);
  color: var(--text-on-light-mute);
  line-height: 1.5;
}

.field__optional {
  font-weight: 400;
  color: var(--text-on-light-mute);
  font-size: var(--step--1);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  /* 16px minimum på mobil — annars zoomar iOS in vid fokus */
  min-height: 3.25rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--mist); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(46, 82, 115, 0.12);
  outline: none;
}

.textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--error); }

.field__error {
  display: none;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--error);
  line-height: 1.45;
}
.field--error .field__error { display: block; }

/* --------------------------------------------------------------------------
   KÄNSLIGHETSVÄGLEDNING

   Står OVANFÖR fältet, alltid synlig, aldrig i en utfällbar sektion.
   Text man måste öppna läser ingen.

   Tonen är omtanke, inte varningsskylt. Målgruppen är stressade människor —
   en text som låter som juridiskt självförsvar får dem att lita mindre på
   tjänsten, inte mer.
   -------------------------------------------------------------------------- */
.guidance {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  margin-bottom: 0.9rem;
  background: var(--gold-wash);
  border: 1px solid #E8DCC2;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.55;
  color: #6B5426;
}
.guidance__icon {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--gold-deep);
}

/* Mjuk varning i realtid. Påminner, blockerar inte. */
.soft-warning {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  background: var(--error-wash);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.5;
  color: #7A2C22;
}
.soft-warning.is-visible { display: flex; }

.char-count {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  font-variant-numeric: tabular-nums;
}
.char-count[data-state="near"] { color: var(--gold-deep); }
.char-count[data-state="over"] { color: var(--error); }

/* --------------------------------------------------------------------------
   NÖDFALLSBLOCK

   Statiskt, förskrivet, ingen bedömning. Systemet avgör aldrig hur allvarlig
   någons situation är — det visar bara var hjälp finns.
   -------------------------------------------------------------------------- */
.emergency {
  display: none;
  margin: 1.25rem 0;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--radius-sm);
}
.emergency.is-visible { display: block; }

.emergency__title {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--navy-800);
  font-size: var(--step-0);
}
.emergency__body {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-on-light-soft);
}
.emergency__list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: var(--step--1);
}
.emergency__list strong { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   GRANSKNINGSSTEGET

   "Vem ser vad" står här, i klartext, före knappen — inte bara i
   integritetspolicyn. Transparens som kräver att man letar är ingen
   transparens.
   -------------------------------------------------------------------------- */
.review {
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.review__row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--ivory-dim);
}
.review__row:last-child { border-bottom: 0; }

.review__key {
  font-size: var(--step--1);
  color: var(--text-on-light-mute);
  padding-top: 2px;
}
.review__value {
  color: var(--navy-800);
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: break-word;
}
.review__value--empty { color: var(--text-on-light-mute); font-style: italic; }

.review__edit {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--navy-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px;
}
.review__edit:hover { color: var(--navy-800); }

.disclosure {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--ivory-dim);
  border-radius: var(--radius);
}
.disclosure__title {
  margin: 0 0 0.75rem;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--navy-800);
}
.disclosure__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-on-light-soft);
}
.disclosure__list li + li { margin-top: 0.4rem; }

/* Samtycken */
.consent {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 0;
  cursor: pointer;
}
.consent + .consent { border-top: 1px solid var(--ivory-dim); }
.consent input {
  flex: none;
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: var(--navy-700);
  cursor: pointer;
}
.consent__text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-on-light-soft);
}
.consent__text a { color: var(--navy-600); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   NAVIGERING

   Sticky i botten på mobil — primärhandlingen ska alltid vara inom
   tumräckvidd, aldrig något man måste skrolla till.
   -------------------------------------------------------------------------- */
.form-nav {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ivory-edge);
  padding: 0.9rem 0 calc(0.9rem + env(safe-area-inset-bottom, 0px));
  margin-top: 2rem;
}

.form-nav__inner {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.form-nav__spacer { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms ease, background-color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--navy-800);
  color: var(--ivory);
  font-weight: 500;
}
.btn--primary:hover:not([disabled]) {
  background: var(--navy-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Slutknappen är guld — den enda i hela formuläret. Färgen används en gång
   och betyder därför något. */
.btn--submit {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy-900);
  font-weight: 600;
}
.btn--submit:hover:not([disabled]) {
  background: linear-gradient(135deg, #E8D3AC 0%, var(--gold-light) 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--text-on-light-soft);
  border-color: transparent;
  padding-inline: 1rem;
}
.btn--ghost:hover { color: var(--navy-800); background: var(--ivory-dim); }

/* Användes på kvittosidan och i återkopplingsrutan men saknade stil här —
   varianterna fanns bara i sections.css respektive admin.css, som inte
   laddas på formuläret. Knapparna renderades som omarkerade .btn.
   Samma värden som förlagorna, så utseendet är sig likt på övriga sidor. */
.btn--outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--mist);
}
.btn--outline:hover { border-color: var(--navy-600); background: #fff; }

.btn--quiet {
  background: transparent;
  color: var(--text-on-light-soft);
  border-color: var(--ivory-edge);
}
.btn--quiet:hover:not([disabled]) {
  color: var(--navy-800);
  border-color: var(--mist);
  background: var(--ivory-dim);
}

/* --------------------------------------------------------------------------
   FELSAMMANFATTNING
   Fokus flyttas hit vid fel, så att skärmläsare och tangentbord hittar den.
   -------------------------------------------------------------------------- */
.errors {
  display: none;
  margin-bottom: 1.75rem;
  padding: 1.15rem 1.35rem;
  background: var(--error-wash);
  border: 1px solid #E9CFC9;
  border-radius: var(--radius-sm);
}
.errors.is-visible { display: block; }
.errors__title {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--error);
  font-size: var(--step-0);
}
.errors__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: #7A2C22;
}
.errors__list a { color: inherit; }

/* --------------------------------------------------------------------------
   BEKRÄFTELSE
   -------------------------------------------------------------------------- */
.done {
  text-align: center;
  padding: clamp(3rem, 12vh, 6rem) 0;
  max-width: 46ch;
  margin-inline: auto;
}
.done__mark {
  width: 56px; height: 56px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid #E8DCC2;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
}
.done__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  color: var(--navy-800);
  line-height: 1.25;
}
.done__body {
  margin: 0 0 2rem;
  color: var(--text-on-light-soft);
  line-height: 1.6;
}
.done__ref {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  background: var(--ivory-dim);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-light-soft);
}

/* --------------------------------------------------------------------------
   MOBIL
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .review__row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
  }
  .review__key { grid-column: 1 / -1; }
  .form-nav__inner { gap: 0.5rem; }
  .btn { padding-inline: 1.1rem; }
  .btn--ghost { padding-inline: 0.75rem; }
}

/* ==========================================================================
   TYCK TILL

   Diskret. Den ska finnas för den som vill, men aldrig konkurrera med
   formuläret om uppmärksamhet — någon mitt i en vårdnadstvist ska inte
   distraheras av en feedbackruta.
   ========================================================================== */
.feedback-trigger {
  margin: 3rem auto 1rem;
  max-width: var(--measure);
  text-align: center;
}
.feedback-trigger button {
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
  font: inherit;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feedback-trigger button:hover { color: var(--navy-800); }
.feedback-trigger button:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Dialogen delar utseende med adminpanelens, men formulärsidorna laddar
   inte admin.css — de här reglerna är därför en egen kopia. */
.adialog {
  border: 0; border-radius: var(--radius-lg); padding: 0;
  max-width: 32rem; width: calc(100% - 2rem);
  box-shadow: 0 24px 64px rgba(7,19,32,0.32);
}
.adialog::backdrop { background: rgba(7,19,32,0.55); }
.adialog__inner { padding: 1.75rem; background: var(--ivory-warm); }
.adialog__title {
  margin: 0 0 0.4rem; font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 500; color: var(--navy-800);
}
.adialog__sub {
  margin: 0 0 1.4rem; font-size: var(--step--1);
  color: var(--text-on-light-mute); line-height: 1.55;
}
.adialog__actions {
  display: flex; gap: 0.7rem; justify-content: flex-end;
  margin-top: 1.5rem; flex-wrap: wrap; align-items: center;
}
.reason-note {
  margin-top: 0.5rem; font-size: var(--step--2);
  color: var(--text-on-light-mute); line-height: 1.45;
}
.trial-options { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.trial-option {
  flex: 1 1 6rem; position: relative; text-align: center;
  padding: 0.7rem 0.5rem; border: 1px solid var(--ivory-edge);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  font-size: var(--step--1); color: var(--navy-800);
}
.trial-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trial-option:has(input:checked) {
  border-color: var(--navy-600); background: var(--gold-wash); font-weight: 600;
}
.trial-option:has(input:focus-visible) {
  outline: 2px solid var(--navy-600); outline-offset: 2px;
}

@media (max-width: 560px) {
  .adialog__actions { flex-direction: column-reverse; align-items: stretch; }
  .adialog__actions .btn { width: 100%; }
  .adialog__actions a { margin-right: 0 !important; text-align: center; }
}

/* ==========================================================================
   ANSVARSBANDEROLL VID BYRÅNS EGET INTAG

   Vid eget intag är byrån personuppgiftsansvarig och plattformen biträde.
   Den som fyller i formuläret måste veta det, och informationen får inte
   ligga längre ner på sidan.

   Diskret men inte gömd — den ska läsas, inte skrämmas av.
   ========================================================================== */
.intake-notice {
  background: var(--navy-900);
  color: var(--ivory);
  padding: 0.7rem var(--gutter);
}
.intake-notice__text {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: var(--step--2);
  line-height: 1.5;
  text-align: center;
  color: rgba(247, 244, 239, 0.82);
}
.intake-notice__text strong {
  color: var(--ivory);
  font-weight: 500;
}

/* ==========================================================================
   VARNINGSNOTIS

   Dämpad gul. Ska läsas, inte skrämma — den som just skickat en ansökan
   ska inte tro att något gått fel.
   ========================================================================== */
.notice-warn {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 44ch;
  margin: 2rem auto 0;
  padding: 1.1rem 1.25rem;
  text-align: left;
  background: #FCF6E3;
  border: 1px solid #EBDCA8;
  border-left: 3px solid #C9A96A;
  border-radius: var(--radius);
}

.notice-warn__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: #9A7B3A;
}

.notice-warn__text { min-width: 0; }

.notice-warn__title {
  margin: 0 0 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: #6B5426;
}

.notice-warn__text p {
  margin: 0 0 0.6rem;
  font-size: var(--step--2);
  line-height: 1.6;
  color: #6B5426;
}
.notice-warn__text p:last-child { margin-bottom: 0; }
.notice-warn__text strong { font-weight: 600; }

@media (max-width: 560px) {
  .notice-warn { margin-inline: 0; padding: 1rem; }
}

/* ==========================================================================
   VÄGAR VIDARE EFTER ANSÖKAN

   Byrån kan inte logga in än, men behöver veta vart de ska när det blir
   dags. Utan detta står de på en återvändsgränd.
   ========================================================================== */
.done__next {
  max-width: 44ch;
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ivory-edge);
  text-align: left;
}

.done__next-label {
  margin: 0 0 0.9rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-800);
}

.done__steps {
  margin: 0 0 1.75rem;
  padding-left: 1.4rem;
  counter-reset: step;
}
.done__steps li {
  margin-bottom: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-on-light-soft);
}

.done__next .actions {
  justify-content: flex-start;
  margin-top: 0;
}

.done__hint {
  margin: 1rem 0 0;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-on-light-mute);
}

@media (max-width: 560px) {
  .done__next { text-align: center; }
  .done__steps { text-align: left; }
  .done__next .actions { justify-content: stretch; flex-direction: column; }
  .done__next .actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   INTAGSMODELL v1.0 — nya komponenter

   Sjustegsformuläret blev åtta steg med betydligt fler frågor. Det som
   följer är de komponenter modellen behövde och som inte fanns.
   -------------------------------------------------------------------------- */

/* Underrubrik inom ett steg. Flera frågor per steg kräver en nivå mellan
   stegets rubrik och fälten — utan den blir långa steg en enda gröt. */
.step__subquestion {
  margin: 2.5rem 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--navy-800);
}

.step__subquestion + .step__help { margin-bottom: 1rem; }

/* Neutral notis. Används för det klienten behöver veta innan hen svarar,
   som att barnens namn inte ska anges. */
.notice-info {
  border-left: 3px solid var(--navy-600);
  background: rgba(46, 82, 115, 0.05);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.75rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   RÖD VARNINGSRUTA

   Står ovanför fritextfältet i steg 5 och avråder från att beskriva våld
   i detalj. Det är formulärets viktigaste ruta.

   Avsiktligt utan ikon och utan versaler. Den ska läsas som allvar, inte
   som ett felmeddelande — någon som just kryssat i att våld förekommer
   ska inte mötas av något som ser ut som en tillsägelse.
   -------------------------------------------------------------------------- */
.notice-danger {
  border-left: 4px solid #B3261E;
  background: #FDF3F2;
  color: #4A1512;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 1.25rem;
  font-size: var(--step--1);
  line-height: 1.6;
}

.notice-danger p { margin: 0 0 0.6rem; }
.notice-danger p:last-child { margin-bottom: 0; }

.notice-danger__title {
  font-weight: 600;
  color: #8C1D18;
}

.notice-danger__foot {
  padding-top: 0.6rem;
  border-top: 1px solid #F2D6D3;
  font-size: var(--step--2);
}

@media (prefers-contrast: more) {
  .notice-danger {
    background: #fff;
    border: 1px solid #8C1D18;
    border-left-width: 4px;
  }
}

/* --------------------------------------------------------------------------
   BARNKORT
   Ett kort per barn, så att åldrarna inte flyter ihop till en lista.
   -------------------------------------------------------------------------- */
.childcard {
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem 0.5rem;
  margin: 0 0 0.85rem;
  background: #fff;
}

.childcard__title {
  margin: 0 0 0.75rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--navy-700);
}

/* Åldersvalen ligger i rad — sex korta alternativ behöver inte var sin rad. */
.choices--compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices--compact .choice {
  flex: 1 1 5.5rem;
  padding: 0.55rem 0.6rem;
  justify-content: center;
  text-align: center;
}

.choices--compact .choice__marker { display: none; }

/* --------------------------------------------------------------------------
   KNAPPVAL

   Två likvärdiga alternativ sida vid sida. Formen bär budskapet: en
   kryssruta under textrutan hade sagt att skriva är huvudspåret och att
   avstå är något man ber om. Två knappar säger att båda vägarna är normala.
   -------------------------------------------------------------------------- */
.choices--buttons {
  flex-direction: row;
  gap: 0.75rem;
}

.choices--buttons .choice {
  flex: 1 1 0;
  align-items: flex-start;
}

@media (max-width: 560px) {
  .choices--buttons { flex-direction: column; }
}

/* Ensam kryssruta på egen rad, för ja-eller-nej utanför en grupp. */
.checkline {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.85rem 0 0;
  cursor: pointer;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--navy-800);
}

.checkline input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--navy-700);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   GRANSKNING
   -------------------------------------------------------------------------- */

/* Klientens egen text. Vit bakgrund, ingen kursiv, inga citattecken — den
   ska se ut precis som den skrevs. */
.review__verbatim {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  line-height: 1.65;
}

.review__subtitle {
  margin: 1.75rem 0 0.6rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--navy-800);
}

.review__note {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--text-on-light-soft);
}

/* Samtyckena får luft omkring sig. De ska inte kunna missas — de låg en
   gång utanför skärmen, och då kunde ingen skicka in sin förfrågan. */
.consents {
  margin: 1.75rem 0 0;
  padding: 0.25rem 0;
  border-top: 1px solid var(--ivory-dim);
}

.legalbasis {
  margin-top: 1.25rem;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  line-height: 1.55;
}

/* Räknaren med en rad om varför utförlighet hjälper. Hinten står bredvid
   siffran och inte ovanför fältet: den ska läsas när någon börjat skriva
   och undrar hur mycket som förväntas, inte innan. */
.char-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.char-hint {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-on-light-mute);
}

.char-row .char-count {
  margin: 0;
  flex: none;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .char-row { flex-direction: column; gap: 0.35rem; }
  .char-row .char-count { align-self: flex-end; }
}

/* --------------------------------------------------------------------------
   UPPMUNTRAN MELLAN STEGEN

   En kort rad som bekräftar att den som fyller i formuläret kommit
   vidare. Den som gör det här är trött och orolig — inte omotiverad.

   ⚠️ DESIGNEN ÄR MEDVETET ÅTERHÅLLSAM

   Ett glatt popup-fönster mitt i en vårdnadstvist läser som att någon
   inte förstått allvaret. Därför ingen ikon, ingen färg utöver navy,
   ingen rörelse utöver en mjuk glidning.

   🛑 PÅ MOBIL RULLAR DEN NER UPPIFRÅN

   Första versionen låg i nederkant. Där täcker den precis det område
   där tummen vilar och nästa-knappen sitter — på en liten skärm är det
   i vägen, inte hjälpsamt.

   Nu glider den ned under toppraden, tar bara den bredd texten behöver,
   och försvinner efter två sekunder. Den som läser hinner se den; den
   som redan tryckt vidare störs inte.
   -------------------------------------------------------------------------- */
.nudge {
  position: fixed;
  /**
   * 🛑 LÅG BAKOM TOPPRADEN
   *
   * z-index var 19, toppraden har 20. Notisen hamnade alltså under den —
   * och eftersom toppraden har backdrop-filter: blur(8px) och en nästan
   * ogenomskinlig bakgrund syntes bara en suddig skugga glida ned.
   *
   * Ett element som ska ligga ovanpå måste ha högre z-index än det det
   * ska ligga ovanpå. Notisen är dessutom tillfällig och täcker inget
   * viktigt.
   */
  z-index: 30;
  /* Under toppradens underkant, inte ovanpå den. */
  top: 4.25rem;
  left: 50%;

  /* Bara så bred som texten behöver. En full rad över hela skärmen
     läser som ett systemmeddelande, inte som en kommentar. */
  width: max-content;
  max-width: calc(100vw - 2.5rem);
  padding: 0.6rem 1.1rem;

  background: var(--navy-900);
  color: var(--ivory);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(11, 27, 43, 0.18);

  font-size: var(--step--2);
  line-height: 1.45;
  text-align: center;

  /* Startar ovanför sin plats och glider ned. */
  transform: translate(-50%, -0.9rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.nudge.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* På större skärmar finns plats vid sidan, där den inte konkurrerar
   med frågan man läser. */
@media (min-width: 900px) {
  .nudge {
    top: 5rem;
    left: auto;
    right: 2rem;
    transform: translate(0, -0.9rem);
    font-size: var(--step--1);
    text-align: left;
  }
  .nudge.is-visible { transform: translate(0, 0); }
}

/* Den som valt bort rörelse får bara intoning. */
@media (prefers-reduced-motion: reduce) {
  .nudge { transition: opacity 160ms ease; transform: translate(-50%, 0); }
  .nudge.is-visible { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .nudge, .nudge.is-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   KNAPPRADEN

   🛑 DOLDA KNAPPAR SYNTES ÄNDÅ

   Skriptet sätter `hidden` på Tillbaka i steg 1 och på Skicka förfrågan
   i alla steg utom det sista. Men knappraden är en flexlayout, och ett
   flexbarn får sitt display-värde av föräldern — attributet `hidden`
   räcker inte.

   Följden syntes på telefon: fyra knappar trängdes i botten redan på
   steg 1, och "Skicka förfrågan" stod där genom hela formuläret. En
   klient som tryckte på den mitt i fick ingenting att hända.

   ⚠️ Regeln måste vara mer specifik än .form-nav > * för att vinna.
   -------------------------------------------------------------------------- */
.form-nav__inner > [hidden],
.form-nav [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   KNAPPRADEN PÅ SMAL SKÄRM

   Även med dolda knappar blir det trångt: Tillbaka, Hoppa över och
   Fortsätt på en telefon i stående läge.

   Raden får bryta, och knapparna krymper hellre än att skäras av vid
   kanten. En avskuren knapp går inte att trycka på.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .form-nav__inner {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .form-nav__inner .btn {
    /* Krymper vid behov men aldrig under läsbar storlek. */
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 0.9rem;
    font-size: var(--step--1);
  }

  /* Den viktigaste knappen får plats först och behåller sin bredd. */
  .form-nav__inner .btn--primary,
  .form-nav__inner .btn--submit {
    flex: 1 1 auto;
    order: 3;
  }

  .form-nav__spacer { display: none; }
}

/* ==========================================================================
   ARTIKEL 10 — MJUK UPPMANING OM BROTTSUPPGIFTER

   ⚠️ Medvetet lugnare än .soft-warning, som är röd. Den varnar för ett
   personnummer i klartext — ett fel. Den här säger något annat: att texten
   kan innehålla uppgifter som inte behövs här. Ingen har gjort fel.

   Röd färg på en text där någon just berättat om det svåraste i sitt liv
   läser som en tillrättavisning. Den som skriver "han är polisanmäld" har
   inte gjort något dumt — uppgiften hör bara hemma någon annanstans.

   Blockerar ingenting. Detektionen sker i webbläsaren och lämnar den
   aldrig — se CRIME_WORDS i form.js.
   ========================================================================== */
.notice-soft {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--gold, #8A6B24);
  background: var(--gold-wash, #FBF3E2);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--navy-800, #0B1B2B);
}

.notice-soft p { margin: 0; }