/* =================================================================
   join.install.report

   Fristående stilmall. Systemtypsnitt, inga medföljande teckensnitts-
   filer: en delad woff2-fil syns i nätverksfliken och har identisk
   hash överallt där den används.

   Bara ljust läge. Temaväxlaren är avstängd i config, men boot.js
   sätter ändå data-theme="dark" efter besökarens systeminställning -
   den här mallen läser aldrig det attributet, så resultatet blir ljust
   oavsett.

   Filen serveras publikt. Kommentarerna här ska bara handla om den
   här sajten. Se DEPLOY.md innan du lägger till något.
   ================================================================= */

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --paper:   #ffffff;
  --panel:   #f6f7f9;
  --ink:     #1a1d21;
  --ink-soft:#5b6169;
  --ink-dim: #868d96;

  --line:        #d9dde2;
  --line-strong: #b4bbc3;

  --accent:      #3f6d99;   /* dämpad blå, matt och kontorsmässig */
  --accent-dark: #2f5476;
  --accent-wash: #eef2f6;

  --danger:      #9c2b22;
  --danger-wash: #fbf0ef;
  --danger-line: #c4564c;

  --shell: 600px;
  --radius: 2px;            /* nästan raka hörn, medvetet */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--panel);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Ram ---------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.masthead {
  margin-bottom: 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

/* Ingen logotyp. Ordmärket är ren text, ingen bildfil. */
.wordmark {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-title {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.intro {
  margin: 0 0 2rem;
  max-width: 46ch;
  color: var(--ink-soft);
}

/* ---------- Stegindikator ----------
   Enkel numrerad rad. Inga former, inga clip-paths. */

.progress {
  margin: 0 0 1.75rem;
}

.progress ol {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.progress li {
  display: flex;
  align-items: center;
  flex: 1;
}

.progress li:last-child { flex: none; }

.facet {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.connector {
  flex: 1;
  height: 1px;
  min-width: 12px;
  background: var(--line);
  transition: background 0.15s;
}

.progress li.is-current .facet {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.progress li.is-done .facet {
  border-color: var(--accent);
  background: var(--paper);
  color: var(--accent);
}

.progress li.is-done .connector { background: var(--accent); }

.step-count {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
}

/* ---------- Steg ---------- */

.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
}

/* Utan JS visas alla steg under varandra. Avsiktligt - formuläret
   fungerar då fortfarande, det ser bara annorlunda ut. */
.step + .step { margin-top: 1rem; }

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

/* ---------- Fält ---------- */

.field { margin-bottom: 1.1rem; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.group legend {
  display: block;
  margin-bottom: 0.3rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.req {
  margin-left: 0.15em;
  color: var(--danger);
  font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s;
}

input:hover,
select:hover,
textarea:hover { border-color: var(--ink-dim); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

input::placeholder,
textarea::placeholder { color: var(--ink-dim); }

textarea { resize: vertical; min-height: 6rem; }

select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Halvbred på skärmar som rymmer det. */
.field.half > input,
.field.half > select { max-width: 24rem; }

.help {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.note {
  margin: 0.45rem 0 0;
  padding: 0.6rem 0.7rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

/* ---------- Grupper: namn, adress ---------- */

.group {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.row { display: flex; gap: 0.7rem; margin-bottom: 0.5rem; }
.row:last-child { margin-bottom: 0; }
.row-2 > .cell { flex: 1 1 0; min-width: 0; }
.cell { flex: 1; }

/* Underetiketten står under fältet, inte över. */
.sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--ink-dim);
}

/* ---------- Reglaget ---------- */

input[type="range"] {
  width: 100%;
  max-width: 24rem;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--line);
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

.range-value {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.range-value output {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Knappar ---------- */

.nav {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:active { transform: translateY(1px); }

.btn[disabled] { opacity: 0.5; cursor: default; }

.btn.ghost {
  margin-right: auto;      /* Back hamnar till vänster, Continue till höger */
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.btn.ghost:hover {
  background: var(--panel);
  border-color: var(--ink-dim);
  color: var(--ink);
}

/* ---------- Fel ---------- */

.alert {
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 0.87rem;
}

.error {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger);
}

[aria-invalid="true"] {
  border-color: var(--danger-line);
  background: var(--danger-wash);
}

/* ---------- Kvitto ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}

.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}

.card a { color: var(--accent); }

/* ---------- Honeypot ---------- */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Smal skärm ---------- */

@media (max-width: 30rem) {
  .shell { padding: 2rem 1rem 3rem; }
  .step { padding: 1.1rem 1rem; }
  .row { flex-direction: column; gap: 0.5rem; }
  .field.half > input,
  .field.half > select,
  input[type="range"] { max-width: none; }
  .nav { flex-direction: column-reverse; }
  .btn { width: 100%; }
  .btn.ghost { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}