/* 3. Så fungerar det (biljett 01 grund, biljett 03 gör korten levande)
   Fyra kort i ett rutnät med olika storlek, utlåtandet störst. Inga nummer. */

.steps {
  margin-top: clamp(48px, 5.5vw, 80px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "src src src src src ver ver ver ver ver ver ver"
    "doc doc doc doc doc ver ver ver ver ver ver ver"
    "apr apr apr apr apr apr apr apr apr apr apr apr";
  gap: 16px;
}
.step--sources { grid-area: src; }
.step--verdict { grid-area: ver; }
.step--docs { grid-area: doc; }
.step--approve { grid-area: apr; }

.step {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: 20px;
  background: var(--night-2);
  border: 1px solid var(--night-line);
  min-width: 0;
}
.step__visual {
  position: relative;
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: stretch;
  min-height: 0;
}
.step__text { display: grid; gap: 8px; max-width: 34em; }
.step__text h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--night-ink);
}
.step__text p { color: var(--night-ink-2); text-wrap: pretty; }

.step--verdict .step__text h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); }
.step--verdict .step__text p { font-size: 1.0625rem; }

.step--approve { flex-direction: row-reverse; align-items: center; gap: clamp(28px, 4vw, 64px); }
.step--approve .step__text { flex: 1 1 0; }
.step--approve .step__visual { flex: 1.3 1 0; }

/* ---------- Små produktbitar (ljusa ytor på mörk botten) ---------- */
.mini {
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 18px 40px -16px rgb(0 0 0 / 0.6);
  font-size: 0.875rem;
}

/* Källor */
.mini--sources { padding: 8px; display: grid; gap: 2px; }
.mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  font-weight: 500;
  color: var(--ink-3);
}
.mini-row.is-on { color: var(--ink); }
.mini-row + .mini-row { border-top: 1px solid rgb(17 18 20 / 0.06); border-radius: 0; }
.mini-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--paper-2); color: var(--ink-3); flex: none; }
.mini-row.is-on .mini-ico { color: var(--green); }
.mini-ico svg { width: 16px; height: 16px; }
.mini-name { flex: 1; }
.mini-toggle {
  position: relative;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: var(--line-2);
  flex: none;
}
.mini-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}
.mini-row.is-on .mini-toggle { background: var(--green); }
.mini-row.is-on .mini-toggle::after { transform: translateX(14px); }

/* Två modeller som möts i ett utlåtande */
.mini--models {
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini-model {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
  padding: 14px;
  border-radius: 14px;
  background: var(--night-3);
  border: 1px solid var(--night-line);
  color: var(--night-ink);
}
.mini-model__name { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--night-ink-2); }
.mini-model__line { font-size: 0.875rem; line-height: 1.45; }
.mini-model .status { font-size: 0.75rem; }
.mini-merge { width: 100%; height: 40px; color: color-mix(in srgb, var(--night-ink-2) 40%, transparent); }
.mini--verdict { padding: 6px 16px; }
.mini-verdict__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-weight: 500;
}
.mini-verdict__row + .mini-verdict__row { border-top: 1px solid var(--line); }

/* Dokument med källmarkeringar */
.mini--doc { padding: 18px 20px; display: grid; gap: 10px; }
.mini-doc__title { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-3); }
.mini-doc__text { font-size: 0.9375rem; line-height: 1.6; }
.cite {
  display: inline-grid;
  place-items: center;
  min-width: 16px; height: 16px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  vertical-align: 0.45em;
}
.mini-doc__refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* Månadsvy */
.mini--month { padding: 16px; display: grid; gap: 12px; }
.mini-month__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--lime);
  font-size: 0.8125rem;
  font-weight: 600;
}
.mini-btn svg { width: 14px; height: 14px; }
.mini-month__rows { display: grid; border: 1px solid var(--line); border-radius: 10px; }
.mini-month__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.mini-month__row + .mini-month__row { border-top: 1px solid var(--line); }
.mini-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  transform-origin: 100% 100%;
  padding: 8px 12px;
  border-radius: 12px 12px 4px 12px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.8125rem;
}
.mini-chat svg { width: 16px; height: 16px; flex: none; color: var(--green); }

/* ---------- Hover (bara pekare; inget i kortet är interaktivt) ---------- */
@media (hover: hover) {
  .step { transition: border-color var(--dur-2) var(--ease-out-soft); }
  .step:hover { border-color: color-mix(in srgb, var(--night-line), var(--night-ink) 8%); }
  .mini, .mini-merge { transition: transform var(--dur-2) var(--ease-out-soft), box-shadow var(--dur-2) var(--ease-out-soft); }
  .step:hover .mini:not(.mini--models) { box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .step:hover .mini { transform: translateY(-2px); }
  .step:hover .mini-merge { transform: translateY(-2px); }
}

/* ---------- Rörelse: produktbitarna spelar sin handling en gång ----------
   Alla tider är --play-delay + offset (--play-delay = kortets reveal-delay + 400 ms).
   Från-tillstånd sätts bara av JS (data-play="armed") och bara här. Reducerad rörelse
   och utan JS: ingenting döljs, HTML är slutläget. Inga loopar.
   `.mini-toggle` och `::after` saknar transition med avsikt; annars skulle övergången armed → run synas som en extra animation. */
@media (prefers-reduced-motion: no-preference) {
  .step { --play-delay: calc(var(--reveal-delay, 0ms) + 400ms); }
  @media (max-width: 680px) { .step { --play-delay: 400ms; } }

  :is(.mini-row, .mini-model, .mini-verdict__row, .mini-month__row, .mini-doc__refs span) { --i: 0; }
  :is(.mini-row, .mini-model, .mini-verdict__row, .mini-month__row, .mini-doc__refs span):nth-child(2) { --i: 1; }
  :is(.mini-row, .mini-model, .mini-verdict__row, .mini-month__row, .mini-doc__refs span):nth-child(3) { --i: 2; }
  :is(.mini-row, .mini-model, .mini-verdict__row, .mini-month__row, .mini-doc__refs span):nth-child(4) { --i: 3; }

  /* Från-tillstånd */
  [data-play="armed"] .mini-row { opacity: 0; transform: translateY(8px); }
  [data-play="armed"] .mini-row.is-on .mini-toggle { background: var(--line-2); }
  [data-play="armed"] .mini-row.is-on .mini-toggle::after { transform: translateX(0); }
  [data-play="armed"] .mini-model { opacity: 0; transform: translateY(12px); }
  [data-play="armed"] .mini-model .status { opacity: 0; transform: scale(0.9); }
  [data-play="armed"] .mini-merge path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  [data-play="armed"] .mini-verdict__row { opacity: 0; clip-path: inset(0 100% 0 0); }
  [data-play="armed"] .mini-doc__title,
  [data-play="armed"] .mini-doc__text .w { opacity: 0; }
  [data-play="armed"] .mini-doc__text .cite.w { transform: scale(0.6); }
  [data-play="armed"] .mini-doc__refs span { opacity: 0; transform: translateY(4px); }
  [data-play="armed"] .mini-month__row { opacity: 0; transform: translateX(-8px); }
  [data-play="armed"] .mini-chat { opacity: 0; transform: translateY(8px) scale(0.97); }
  [data-play="armed"] .mini-btn svg { opacity: 0; transform: scale(0.4); }

  /* Källor: raderna fylls på, tre knappar slås på, lönen skakar */
  [data-play="run"] .mini-row {
    animation: mini-rise-8 450ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + var(--i) * 110ms);
  }
  [data-play="run"] .mini-row.is-on .mini-toggle {
    animation: mini-toggle-bg 320ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 500ms + var(--i) * 260ms);
  }
  [data-play="run"] .mini-row.is-on .mini-toggle::after {
    animation: mini-knob 320ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 500ms + var(--i) * 260ms);
  }
  [data-play="run"] .mini-row:nth-child(4) .mini-ico {
    animation: mini-nudge 300ms var(--ease-in-out);
    animation-delay: calc(var(--play-delay) + 1400ms);
  }

  /* Utlåtande: två modeller tänker, möts, får status, ramen ritas, rader fälls ut */
  [data-play="run"] .mini-model {
    animation: mini-rise-12 500ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + var(--i) * 120ms);
  }
  [data-play="run"] .mini-model__line {
    background-image: linear-gradient(90deg, var(--night-ink-2) 0 40%, var(--night-ink) 50%, var(--night-ink-2) 60% 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: mini-think 2000ms linear both, mini-settle 200ms linear both;
    animation-delay: calc(var(--play-delay) + 300ms), calc(var(--play-delay) + 2300ms);
  }
  [data-play="run"] .mini-model .status {
    animation: mini-pop 320ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 2300ms + var(--i) * 120ms);
  }
  [data-play="run"] .mini-merge path {
    stroke-dasharray: 1;
    animation: mini-draw 700ms linear backwards;
    animation-delay: calc(var(--play-delay) + 2600ms);
  }
  [data-play="run"] .mini-verdict__row {
    animation: mini-wipe 700ms cubic-bezier(0, 0, 0.58, 1) backwards, mini-fade 400ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 3200ms + var(--i) * 150ms), calc(var(--play-delay) + 3200ms + var(--i) * 150ms);
  }
  [data-play="run"] .mini-verdict__row:nth-child(3) .status--warn {
    animation: mini-ring 900ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + 4250ms);
  }

  /* Dokumentation: titel, ord för ord, källmarkeringar blinkar, referenser under */
  [data-play="run"] .mini-doc__title {
    animation: mini-fade 300ms var(--ease-out-soft) backwards;
    animation-delay: var(--play-delay);
  }
  [data-play="run"] .mini-doc__text .w {
    animation: mini-word 160ms linear backwards;
    animation-delay: calc(var(--play-delay) + 200ms + var(--i) * 45ms);
  }
  [data-play="run"] .mini-doc__text .cite.w {
    animation: mini-cite 260ms var(--ease-out-soft) backwards, mini-cite-blink 600ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 200ms + var(--i) * 45ms), calc(var(--play-delay) + 460ms + var(--i) * 45ms);
  }
  [data-play="run"] .mini-doc__refs span {
    animation: mini-rise-4 400ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + 515ms + var(--words) * 45ms + var(--i) * 100ms);
  }

  /* Godkänn: rader in, chatten, knappen trycks och blir grön, bocken ritas */
  [data-play="run"] .mini-month__row {
    animation: mini-slide 450ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + var(--i) * 120ms);
  }
  [data-play="run"] .mini-chat {
    animation: mini-chat 500ms var(--ease-out) backwards;
    animation-delay: calc(var(--play-delay) + 700ms);
  }
  [data-play="run"] .mini-btn {
    animation: mini-press 290ms linear calc(var(--play-delay) + 1600ms), mini-btn-ok 320ms var(--ease-out-soft) calc(var(--play-delay) + 1600ms) both;
  }
  [data-play="run"] .mini-btn svg {
    animation: mini-pop-icon 320ms var(--ease-out-soft) backwards;
    animation-delay: calc(var(--play-delay) + 1700ms);
  }
  /* Slutläget efter failsafen: samma färger som mini-btn-ok, så att knappen inte blir lime igen. */
  [data-play="done"] .mini-btn { background: var(--ok-bg); color: var(--ok-fg); }
}

@keyframes mini-rise-8 { from { opacity: 0; transform: translateY(8px); } }
@keyframes mini-rise-12 { from { opacity: 0; transform: translateY(12px); } }
@keyframes mini-rise-4 { from { opacity: 0; transform: translateY(4px); } }
@keyframes mini-fade { from { opacity: 0; } }
@keyframes mini-slide { from { opacity: 0; transform: translateX(-8px); } }
@keyframes mini-chat { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes mini-pop { from { opacity: 0; transform: scale(0.9); } }
@keyframes mini-pop-icon { from { opacity: 0; transform: scale(0.4); } }
@keyframes mini-word { from { opacity: 0; } }
@keyframes mini-cite { from { opacity: 0; transform: scale(0.6); } }
@keyframes mini-cite-blink { from { background-color: var(--lime-deep); } to { background-color: var(--lime); } }
@keyframes mini-toggle-bg { from { background-color: var(--line-2); } to { background-color: var(--green); } }
@keyframes mini-knob { from { transform: translateX(0); } to { transform: translateX(14px); } }
@keyframes mini-nudge {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-2px); }
  66% { transform: translateX(2px); }
}
@keyframes mini-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mini-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mini-think { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes mini-settle { from { color: transparent; } to { color: var(--night-ink); } }
@keyframes mini-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn-dot) 45%, transparent); }
  to { box-shadow: 0 0 0 6px transparent; }
}
@keyframes mini-press {
  0% { transform: scale(1); }
  17.2% { transform: scale(0.94); animation-timing-function: var(--ease-out-soft); }
  100% { transform: scale(1); }
}
@keyframes mini-btn-ok {
  from { background-color: var(--lime); color: var(--ink); }
  to { background-color: var(--ok-bg); color: var(--ok-fg); }
}

/* ---------- Brytpunkter ---------- */
@media (max-width: 1023px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "src doc"
      "ver ver"
      "apr apr";
  }
}

@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; grid-template-areas: "src" "ver" "doc" "apr"; }
  .step--approve { flex-direction: column; align-items: stretch; }
  .step--approve .step__text, .step--approve .step__visual { flex: none; }
  .step--approve .step__visual { order: -1; }
  .mini--models { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mini-model { padding: 12px; }
  .mini-month__row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}