/* ============================================================
   Woodpecker 3.0 — Simulateur (styles)
   Zénithal : un seul ambre (chip de mode actif), pas de cartes,
   sliders en surface, le reste en tiroirs.
   ============================================================ */

/* --- Verdict (owner) --- */
.sim-verdict { text-align: center; }
.sim-verdict__head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-1); text-align: left;
}
.sim-verdict__head .mascot { height: 26px !important; width: auto !important; }
.sim-verdict__head .sec-label { margin: 0; }

.sim-segmented {
  display: inline-flex; gap: 2px;
  background: var(--surface-2); padding: 3px; border-radius: 999px;
}

/* Badge de verdict : vert / neutre / rouge (l'ambre reste au chip de mode). */
.sim-verdict__tone {
  display: inline-block; margin-top: var(--s-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px;
  color: var(--text-muted); background: var(--surface-2);
}
.sim-verdict__tone--go { color: var(--long); background: rgba(63, 185, 80, 0.14); }
.sim-verdict__tone--iterate { color: var(--text-muted); background: var(--surface-2); }
.sim-verdict__tone--nogo { color: var(--short); background: rgba(248, 81, 73, 0.14); }

.sim-verdict .coach-line { margin: var(--s-2) auto 0; max-width: 34ch; }

/* --- Fan chart --- */
.fan-chart-wrap { position: relative; margin-top: var(--s-2); }
.fan-chart { width: 100%; height: 200px; display: block; }
.fan-chart__legend {
  display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s-2); font-size: var(--fs-2xs); color: var(--text-dim);
}
.fan-chart__legend span { display: inline-flex; align-items: center; gap: 5px; }
.fan-chart__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }

.sim-compute {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  opacity: 0; height: 0; overflow: hidden;
  transition: opacity 0.2s ease;
  font-size: var(--fs-2xs); color: var(--text-dim);
}
.sim-compute.is-on { opacity: 1; height: auto; padding-top: var(--s-2); }
/* L'indicateur de recalcul reste calme (gris) — l'ambre est réservé au verdict + chip de mode. */
.sim-compute .loader-peck span { background: var(--text-dim); }

/* --- Sliders focaux --- */
.sim-slider-row { display: flex; flex-direction: column; gap: var(--s-2); }
.sim-slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.sim-slider__val { font-size: var(--fs-sm); color: var(--text); }

.sim-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--surface-3); outline: none; cursor: pointer;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-soft);
  cursor: pointer; transition: border-color 0.15s ease;
}
.sim-slider:active::-webkit-slider-thumb { border-color: var(--accent); }
.sim-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-soft); cursor: pointer;
}
.sim-slider:active::-moz-range-thumb { border-color: var(--accent); }
.sim-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--surface-3); }

/* --- Tiroirs : chips, toggles, blocs phase --- */
.sim-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.sim-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0; cursor: pointer;
}
.sim-toggle__txt { display: flex; flex-direction: column; gap: 2px; }

.sim-phase-block { margin-top: var(--s-3); }
.sim-phase-block .sec-label { display: block; margin-bottom: var(--s-2); }

/* --- Desktop : cap largeur du fan pour garder le calme --- */
@media (min-width: 1180px) {
  .sim-view .fan-chart-wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
}