/* process_scene.css — slim step-through process explorer (see process_scene.js).
   A wrapping row of step chips + a detail panel + a Next/Test-yourself bar. No fixed
   coordinates, so labels never overlap and it scales to any number of stages; no
   instruction bullets / play bar / readout cards (2026-07-11 slimming pass).
   `--ps-a` = theme accent (chips + kicker); buttons stay the kit's steel chrome. */
.ps2 { --ps-a: #8fa8cf; }

/* ── the flow: a wrapping row of step chips joined by arrows ─────────────────── */
.ps2-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; }
.ps2-step, .ps2-slot {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1; font-size: 0.95rem; font-weight: 600; line-height: 1.2;
}
.ps2-step { cursor: pointer; transition: border-color 0.14s, background 0.14s, box-shadow 0.14s, color 0.14s; }
.ps2-step:hover { border-color: color-mix(in srgb, var(--ps-a) 55%, transparent); color: #f1f5f9; }
.ps2-step:focus-visible { outline: 2px solid var(--ps-a); outline-offset: 2px; }
.ps2-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.55rem; height: 1.55rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #e8eef6; font-weight: 800; font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.ps2-name { padding-right: 0.1rem; }
.ps2-step.is-done .ps2-num { background: color-mix(in srgb, var(--ps-a) 40%, #0b1220); color: #fff; }
.ps2-step.is-on {
  border-color: var(--ps-a); color: #fff;
  background: color-mix(in srgb, var(--ps-a) 22%, #0b1220);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps-a) 20%, transparent);
}
.ps2-step.is-on .ps2-num { background: var(--ps-a); color: #07121d; }
.ps2-arrow { color: rgba(148, 163, 184, 0.7); font-size: 1.05rem; line-height: 1; }
.ps2-loop { color: var(--ps-a); font-weight: 700; }

/* ── the active-step detail panel ───────────────────────────────────────────── */
.ps2-panel {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.8rem; padding: 0.85rem 1.05rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.28));
}
.ps2-pnum { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--ps-a); }
.ps2-pnum span { color: #64748b; font-weight: 600; }
.ps2-plabel { margin: 0.18rem 0 0.35rem; font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.2; }
.ps2-pdetail { margin: 0; color: #cbd5e1; font-size: 1.02rem; line-height: 1.6; }
.ps2-take { margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px dashed rgba(255, 255, 255, 0.12); color: color-mix(in srgb, var(--ps-a) 70%, #e2e8f0); font-weight: 600; }

/* ── control bar: Next on the left, Test yourself pinned right ──────────────── */
.ps2-bar { display: flex; align-items: center; gap: 0.55rem 0.9rem; flex-wrap: wrap; }
.ps2-bar:empty { display: none; }
.ps2-quiz { margin-left: auto; }

/* ── order-challenge (quiz) ─────────────────────────────────────────────────── */
.ps2-slot { padding-left: 0.4rem; opacity: 0.85; }
.ps2-slot .ps2-name { color: #64748b; }
.ps2-slot.is-filled { border-color: color-mix(in srgb, var(--ps-a) 55%, transparent); background: color-mix(in srgb, var(--ps-a) 16%, #0b1220); opacity: 1; }
.ps2-slot.is-filled .ps2-num { background: var(--ps-a); color: #07121d; }
.ps2-slot.is-filled .ps2-name { color: #f1f5f9; }
.ps2-qhint { margin: 0 0 0.5rem; color: #cbd5e1; font-weight: 600; }
.ps2-tray { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ps2-chip {
  padding: 0.5rem 0.85rem; border-radius: 0.6rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05);
  color: #e8eef6; font-size: 0.95rem; font-weight: 600; transition: border-color 0.14s, background 0.14s;
}
.ps2-chip:hover { border-color: var(--ps-a); background: color-mix(in srgb, var(--ps-a) 14%, transparent); }
.ps2-chip:focus-visible { outline: 2px solid var(--ps-a); outline-offset: 2px; }
.ps2-chip.shake { animation: ps2-shake 0.34s ease; border-color: #fb7185; }
.ps2-done { color: #a7f3d0; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.3rem; }
@keyframes ps2-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .ps2-chip.shake { animation: none; } }
@media (max-width: 440px) { .ps2-quiz { margin-left: 0; } .ps2-bar { gap: 0.5rem; } }