/*
  Zaptec onboarding – TakeCHARGE

  Farvevalget har én konsekvens, der styrer resten: brand-grøn #53b600 giver kun
  2,6:1 mod hvid og må derfor aldrig bære småtekst. Grøn er flade-farve, og
  teksten ovenpå er sort (8:1). Det matcher logoet, som er sort wordmark med
  grøn accent.
*/

:root {
  --ink: #000;
  --body: #454b3f;
  --muted: #6b7263;
  --green: #53b600;
  --green-deep: #3d8600;
  --rule: #dfe3d9;
  --wash: #f4f7ef;
  --paper: #fff;
  --danger: #a32b16;

  --measure: 34rem;
  --radius: 2px;

  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
}

/* ---------- Masthead ---------- */

.masthead {
  padding: 2.5rem 1.5rem 0;
  text-align: center;
}

.masthead__logo {
  width: 168px;
  height: auto;
}

/* ---------- Skal ---------- */

.shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3.5rem;
}

/* ---------- Ladeindikator ---------- */

.track { margin-bottom: 2.5rem; }

.track__bars {
  display: flex;
  gap: 5px;
}

.track__bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius);
  background: var(--rule);
  transition: background-color 400ms ease;
}

.track__bar[data-filled] { background: var(--green); }

.track__caption {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Tekst ---------- */

.title {
  margin: 0 0 0.875rem;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

.subtitle {
  margin: 2.5rem 0 0.5rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.lede {
  margin: 0 0 1.125rem;
  font-size: 1.1875rem;
  line-height: 1.55;
}

.body { margin: 0 0 1.5rem; }

.strong { color: var(--ink); font-weight: 600; }

.note {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Knapper ---------- */

.btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.9375rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}

.btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn--primary[aria-busy="true"] {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--muted);
  cursor: progress;
}

.btn--outline {
  width: auto;
  padding: 0.625rem 1rem;
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
  font-size: 0.9375rem;
}

.btn--outline:hover { border-color: var(--green-deep); }

.btn--quiet {
  margin-top: 1.75rem;
  padding: 0.5rem 0;
  background: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.btn--quiet:hover { color: var(--ink); }

.btn:focus-visible,
.choice:focus-visible,
.footer a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/*
  Overskriften får programmatisk fokus ved trinskift, så skærmlæsere annoncerer
  det nye trin. Den er ikke interaktiv og skal derfor ikke vise en fokusramme –
  tastaturbrugere navigerer stadig via knapperne, som beholder deres.
*/
.title:focus { outline: none; }

/* ---------- Valg ---------- */

.choices {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.choice {
  display: block;
  width: 100%;
  padding: 1.125rem 1.25rem;
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.choice:hover { border-color: var(--green); }

.choice__label {
  display: block;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.choice__hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ---------- Felt ---------- */

/* Feltet står under købsknappen, adskilt af en hårfin linje: det hører til et
   andet valg end at købe, og skal ikke læses som en del af købsflowet. */
.field {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-weight: 600;
}

.field__input {
  display: block;
  width: 100%;
  max-width: 9rem;
  padding: 0.8125rem 0.9375rem;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  /* Cifre i faste bredder, så et 5-cifret nummer er let at læse efter. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--green-deep);
}

.field__input[aria-invalid="true"] { border-color: var(--danger); }

.field__hint {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.field__error {
  margin: 0.75rem 0 0;
  color: var(--danger);
  font-weight: 600;
}

.field .btn { margin-top: 1.25rem; }

/* ---------- Callout og kopiér ---------- */

.callout {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--wash);
  border-left: 4px solid var(--green);
}

.callout__text { margin: 0; color: var(--ink); }

.copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.copyrow__value {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- Fejl ---------- */

.alert {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border-left: 4px solid var(--danger);
  color: var(--ink);
}

/* ---------- Start forfra ---------- */

/* Knappen hører til hele flowet, ikke til det enkelte trin, så en hårfin linje
   skiller den fra trinnets indhold. Den er skjult på trin 1, hvor der ikke er
   noget at starte forfra på. */
.restart {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* ---------- Footer ---------- */

.footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Linjen sidder på indholdet, så den flugter med tekstkolonnen frem for at
   stikke ud i sidepaddingen. */
.footer p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.footer a { color: var(--ink); }

/* ---------- Bevægelse ---------- */

/*
  Ét orkestreret øjeblik: det nye trin glider ind, når kunden har handlet.
  Ingen scroll-animationer, ingen hover-effekter ud over farveskift.
*/
.screen[data-entering] {
  animation: rise 260ms ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen[data-entering] { animation: none; }
  .track__bar { transition: none; }
}

/* ---------- Desktop ---------- */

@media (min-width: 34rem) {
  .masthead { padding-top: 3.5rem; }
  .masthead__logo { width: 196px; }
  .title { font-size: 2.375rem; }
  .btn--primary,
  .btn--outline { width: fit-content; min-width: 16rem; }
  .btn--quiet { min-width: 0; }
}