/* =========================================================================
   LeveranciersPortal — Gemeente Rotterdam
   Aannemers / suppliers portal — mobile-first, no framework
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Rotterdam-green scale — built around #00811f */
  --green-50:  #e8f6ec;
  --green-100: #c8ead0;
  --green-200: #94d4a4;
  --green-300: #5bba76;
  --green-400: #2a9d4b;
  --green-500: #00811f;   /* Rotterdam */
  --green-600: #006e1a;
  --green-700: #015817;
  --green-800: #023f12;
  --green-900: #022909;

  /* Warm-neutral ink palette (paper-leaning, not pure cool gray) */
  --ink-0:   #ffffff;
  --ink-25:  #fafaf7;     /* paper */
  --ink-50:  #f4f3ee;
  --ink-100: #e8e6df;
  --ink-200: #d2cfc4;
  --ink-300: #afaba0;
  --ink-400: #807b71;
  --ink-500: #595550;
  --ink-600: #3b3833;
  --ink-700: #25231f;
  --ink-800: #16140f;
  --ink-900: #0a0907;

  /* Status colors — each phase a distinct hue */
  --st-assigned-50:  #e6efff;
  --st-assigned-100: #c5d8ff;
  --st-assigned-500: #1d5fd6;    /* Toegewezen — koel blauw */
  --st-assigned-700: #143f8e;

  --st-active-50:    #fff0d9;
  --st-active-100:   #ffdfa8;
  --st-active-500:   #c96a00;    /* Actief — warm amber */
  --st-active-700:   #8a4500;

  --st-done-50:      var(--green-50);
  --st-done-100:     var(--green-100);
  --st-done-500:     var(--green-500);
  --st-done-700:     var(--green-700);

  --danger-50:  #fdeceb;
  --danger-500: #c0342a;
  --danger-700: #7e221b;

  /* Semantic */
  --bg:           var(--ink-25);
  --surface:      var(--ink-0);
  --surface-alt:  var(--ink-50);
  --border:       var(--ink-100);
  --border-strong:var(--ink-200);
  --text:         var(--ink-800);
  --text-soft:    var(--ink-500);
  --text-muted:   var(--ink-400);
  --link:         var(--green-700);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Spacing — 4px base */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Elevation — hairline first, shadow only where it earns it */
  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.06);
  --shadow-md: 0 6px 16px -4px rgba(22, 20, 15, 0.10),
               0 2px 4px rgba(22, 20, 15, 0.04);

  --focus-ring: 0 0 0 3px var(--st-assigned-100),
                0 0 0 5px var(--st-assigned-500);
}

/* -------------------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--green-800); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Skip link — keyboard-only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink-800);
  color: var(--ink-0);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-16);
  flex: 1;
}

@media (min-width: 900px) {
  .shell { max-width: 720px; padding: var(--s-10) var(--s-8) var(--s-16); }
}

/* -------------------------------------------------------------------------
   4. TOPBAR — chunky Rotterdam-green band, white wordmark
   ------------------------------------------------------------------------- */
.topbar {
  background: var(--green-500);
  color: var(--ink-0);
  border-bottom: 4px solid var(--green-700);
}
.topbar__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.topbar__mark {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--ink-0);
  color: var(--green-700);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  flex: none;
}
.topbar__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.topbar__title b { display: block; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }

/* -------------------------------------------------------------------------
   5. FOOTER
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--ink-0);
  color: var(--text-soft);
  font-size: 14px;
}
.footer__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  justify-content: space-between;
}
.footer a { color: var(--text-soft); text-decoration-color: var(--border-strong); }

/* -------------------------------------------------------------------------
   6. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.h-display {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .h-display { font-size: 36px; }
}

.h-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-2);
}

.h-section {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 var(--s-3);
}

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 var(--s-6);
  text-wrap: pretty;
}

.mono { font-family: var(--font-mono); font-size: 0.95em; }

/* -------------------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: 0 0 var(--s-4);
}
.card--flush { padding: 0; overflow: hidden; }
.card--accent {
  border-top: 4px solid var(--green-500);
}

.card__head {
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--border);
}
.card__body { padding: var(--s-5); }

/* -------------------------------------------------------------------------
   8. JOB HEADER (the big number + description)
   ------------------------------------------------------------------------- */
.job-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: 0 0 var(--s-4);
  position: relative;
  overflow: hidden;
}
.job-hero::before {
  /* Subtle diagonal stripe in the corner — vakmensen vibe */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 96px; height: 96px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--ink-50) 6px 10px
  );
  mask: linear-gradient(225deg, #000 30%, transparent 70%);
  -webkit-mask: linear-gradient(225deg, #000 30%, transparent 70%);
  pointer-events: none;
}
.job-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.job-hero__number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.job-hero__desc {
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-700);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   9. PROGRESS RAIL — 3-step bar
   ------------------------------------------------------------------------- */
.progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
  margin: 0 0 var(--s-4);
}
.progress__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 var(--s-3);
}
.progress__track {
  position: absolute;
  left: 16px; right: 16px;
  top: 18px;
  height: 6px;
  background: var(--ink-100);
  border-radius: 999px;
  z-index: 0;
}
.progress__fill {
  position: absolute;
  left: 16px;
  top: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--green-500);
  z-index: 1;
  transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.progress[data-step="1"] .progress__fill { width: 0; }
.progress[data-step="2"] .progress__fill { width: calc(50% - 16px); }
.progress[data-step="3"] .progress__fill { width: calc(100% - 32px); }

.progress__step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.progress__node {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--ink-200);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  font-family: var(--font-mono);
  transition: all 200ms ease;
}
.progress__step--done .progress__node {
  background: var(--green-500);
  border-color: var(--green-500);
  color: var(--ink-0);
}
.progress__step--current .progress__node {
  background: var(--ink-0);
  border-color: var(--green-500);
  color: var(--green-700);
  box-shadow: 0 0 0 4px var(--green-100);
}
.progress__step--current[data-phase="assigned"] .progress__node {
  border-color: var(--st-assigned-500); color: var(--st-assigned-700);
  box-shadow: 0 0 0 4px var(--st-assigned-100);
}
.progress__step--current[data-phase="active"] .progress__node {
  border-color: var(--st-active-500); color: var(--st-active-700);
  box-shadow: 0 0 0 4px var(--st-active-100);
}

.progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.25;
  max-width: 90px;
}
.progress__step--current .progress__label,
.progress__step--done .progress__label { color: var(--text); }

/* -------------------------------------------------------------------------
   10. STATUS PILL (top of job hero, tells you which phase right now)
   ------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid currentColor;
}
.status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.status-pill--assigned { color: var(--st-assigned-700); background: var(--st-assigned-50); }
.status-pill--active   { color: var(--st-active-700);   background: var(--st-active-50);
                         animation: pulse-active 2.4s ease-in-out infinite; }
.status-pill--done     { color: var(--st-done-700);     background: var(--st-done-50); }

@keyframes pulse-active {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--st-active-500) 14%, transparent); }
}

/* -------------------------------------------------------------------------
   11. DEFINITION LIST (location, equipment, etc.)
   ------------------------------------------------------------------------- */
.dl {
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.dl > div {
  display: grid;
  gap: var(--s-1);
}
.dl dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.dl dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}
.dl dd .mono { font-size: 16px; }

.equipment {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.equipment li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 12px;
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
}
.equipment li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ink-400);
  border-radius: 1px;
  flex: none;
}

/* -------------------------------------------------------------------------
   12. BUTTONS — chunky, thumb-friendly
   ------------------------------------------------------------------------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 56px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  background: var(--ink-100);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 80ms ease, background-color 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--block { width: 100%; }
.btn--lg { min-height: 64px; font-size: 19px; }

.btn--primary {
  background: var(--green-600);
  color: var(--ink-0);
  border-color: var(--green-700);
  box-shadow: 0 2px 0 var(--green-800);
}
.btn--primary:hover { background: var(--green-700); }
.btn--primary:active { box-shadow: 0 1px 0 var(--green-800); transform: translateY(2px); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { background: var(--ink-50); }

.btn--danger {
  background: var(--surface);
  border-color: var(--danger-500);
  color: var(--danger-700);
}

.btn__icon {
  width: 22px; height: 22px;
  flex: none;
}

/* Press ripple — pure CSS, no JS required */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
              rgba(255,255,255,0.35) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.btn--primary:active::after { opacity: 1; transition: opacity 0ms; }

/* -------------------------------------------------------------------------
   13. ACTION ZONE — sticky bottom action on mobile
   ------------------------------------------------------------------------- */
.action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-4) 0 var(--s-4);
}
.action__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
}
.action__heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.action__heading .badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink-50);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.action__help {
  color: var(--text-soft);
  margin: 0 0 var(--s-5);
  font-size: 16px;
}

.action--start    { border-top: 4px solid var(--st-assigned-500); }
.action--feedback { border-top: 4px solid var(--st-active-500); }
.action--document { border-top: 4px solid var(--ink-400); }
.action--complete { border-top: 4px solid var(--st-done-500); }

/* -------------------------------------------------------------------------
   14. FORM
   ------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
}
.field__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.field__hint {
  font-size: 14px;
  color: var(--text-soft);
}
.field__control {
  width: 100%;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  padding: 14px var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  min-height: 56px;
  resize: vertical;
}
.field__control:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px var(--green-100);
}
textarea.field__control { min-height: 132px; }

.field__counter {
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   15. FILE UPLOADER
   ------------------------------------------------------------------------- */
.uploader {
  display: block;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  padding: var(--s-6);
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease;
}
.uploader:hover {
  border-color: var(--green-500);
  background: var(--green-50);
}
.uploader input[type=file] {
  position: absolute;
  left: -9999px;
}
.uploader__icon {
  width: 36px; height: 36px;
  margin: 0 auto var(--s-2);
  display: grid; place-items: center;
  background: var(--ink-0);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--green-700);
}
.uploader__title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 2px;
  color: var(--text);
}
.uploader__hint {
  font-size: 14px;
  color: var(--text-soft);
  margin: 0;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.thumbs li {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-50);
}
.thumbs img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.thumbs .thumb-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(22,20,15,0.78);
  color: var(--ink-0);
  border: 0;
  display: grid; place-items: center;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

/* Documenten-lijst — gekozen, nog niet geüploade bestanden (geen thumbnails) */
.filelist {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.filelist__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.filelist__name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filelist__size {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
}
.filelist__remove {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--text-soft);
  border: 0;
  display: grid; place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.filelist__remove:hover { background: var(--danger-50); color: var(--danger-700); }

/* Galerij van al gekoppelde job-foto's (server-side geproxyd, lazy geladen) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo-grid li {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-50);
}
.photo-grid a { display: block; width: 100%; height: 100%; }
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.photo-grid a:hover img { transform: scale(1.04); }

/* -------------------------------------------------------------------------
   16. FEEDBACK LOG (previously submitted updates)
   ------------------------------------------------------------------------- */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.log__item {
  border-left: 3px solid var(--st-active-500);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.log__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  margin: 0 0 var(--s-1);
}
.log__text {
  margin: 0 0 var(--s-2);
  font-size: 16px;
  line-height: 1.45;
}
.log__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.log__thumbs li {
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: var(--ink-100);
  overflow: hidden;
  border: 1px solid var(--border);
}
.log__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   17. LANDING (no-token welcome)
   ------------------------------------------------------------------------- */
.landing-hero {
  padding: var(--s-8) 0 var(--s-6);
  text-align: left;
}
.landing-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin: 0 0 var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.landing-hero__eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: var(--green-500);
  display: inline-block;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  counter-reset: step;
}
.steps-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-4);
  align-items: start;
}
.steps-list li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 800;
  font-size: 20px;
  font-family: var(--font-mono);
}
.steps-list h3 {
  margin: 0 0 var(--s-1);
  font-size: 17px;
  font-weight: 700;
}
.steps-list p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
   18. COMPLETED
   ------------------------------------------------------------------------- */
.done-hero {
  text-align: center;
  padding: var(--s-12) var(--s-4) var(--s-8);
}
.done-mark {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--green-500);
  color: var(--ink-0);
  margin: 0 auto var(--s-6);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 12px var(--green-100);
  animation: done-pop 600ms cubic-bezier(.2,1.4,.4,1) both;
}
.done-mark svg {
  width: 48px; height: 48px;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: done-draw 500ms 300ms ease-out forwards;
}
@keyframes done-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes done-draw {
  to { stroke-dashoffset: 0; }
}
.done-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: left;
  margin: 0 0 var(--s-4);
}
.done-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.done-summary__row:last-child { border-bottom: 0; }
.done-summary__row dt { color: var(--text-soft); font-size: 14px; margin: 0; }
.done-summary__row dd { margin: 0; font-weight: 600; }

/* -------------------------------------------------------------------------
   19. ERROR
   ------------------------------------------------------------------------- */
.error-hero {
  text-align: center;
  padding: var(--s-12) var(--s-4) var(--s-6);
}
.error-mark {
  width: 88px;
  height: 88px;
  border-radius: var(--r-lg);
  background: var(--danger-50);
  color: var(--danger-500);
  margin: 0 auto var(--s-6);
  display: grid;
  place-items: center;
  border: 2px solid var(--danger-500);
}
.error-mark svg { width: 44px; height: 44px; }
.error-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
}

/* -------------------------------------------------------------------------
   20. UTILS
   ------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--s-2); }
.stack    > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.muted { color: var(--text-soft); }
.hidden { display: none !important; }

.copy-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  padding: 4px 10px;
  font-size: 13px;
  font-family: var(--font-mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms ease;
}
.copy-btn:hover { color: var(--text); border-color: var(--ink-400); background: var(--ink-50); }
.copy-btn[data-copied="1"] {
  color: var(--green-700);
  border-color: var(--green-500);
  background: var(--green-50);
}

/* -------------------------------------------------------------------------
   21. ANIMATIONS — slide in for newly appended log items
   ------------------------------------------------------------------------- */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.log__item--new { animation: slide-in 320ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------------------
   22. ADMIN — /setup pagina (beheerderskant, geen aannemers-UI)
   ------------------------------------------------------------------------- */
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0; }
.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .grid--2 { grid-template-columns: 1fr; } }

.output {
  background: var(--ink-800);
  color: var(--ink-50);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: 260px;
  white-space: pre-wrap;
  word-break: break-word;
}

.alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin: var(--s-3) 0; }
.alert--ok   { background: var(--green-50);     border: 1px solid var(--green-200);     color: var(--green-800); }
.alert--warn { background: var(--st-active-50); border: 1px solid var(--st-active-100); color: var(--st-active-700); }
.alert--err  { background: var(--danger-50);    border: 1px solid var(--danger-500);    color: var(--danger-700); }

form label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin: var(--s-4) 0 var(--s-2);
}
form label small { font-weight: 400; color: var(--text-soft); }
form input[type=text],
form input[type=email],
form input[type=url],
form input[type=password],
form select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px var(--s-3);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  min-height: 48px;
}
form input:focus,
form select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px var(--green-100);
}