/* MECHANISM — an inevitable four-step flow, then three absences drawn as
   empty, voided slots. The frame is flush, so the module owns its padding. */

.mech{display:grid;gap:clamp(1.2rem,2.6vw,1.75rem);padding:clamp(1.1rem,2.6vw,2rem)}
.mech:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--yellow)}

/* ------------------------------------------------------------- the flow */
.mech__flow{
  display:grid;align-items:start;gap:0 .5rem;
  grid-template-columns:minmax(0,1fr) 2.6rem minmax(0,1fr) 2.6rem minmax(0,1fr) 2.6rem minmax(0,1fr);
}

.mech__step{
  display:grid;gap:.5rem;align-content:start;
  opacity:.24;filter:saturate(.18);
  transition:opacity var(--dur-3) var(--ease),filter var(--dur-3) var(--ease);
}
.mech__step.is-on{opacity:1;filter:none}

.mech__rule{height:2px;border-radius:2px;background:var(--line-2);transition:background var(--dur-2) var(--ease)}
.mech__step.is-on .mech__rule{background:var(--yellow)}
.mech__step.is-cur .mech__rule{box-shadow:0 0 14px var(--yellow-glow)}

.mech__n{font-size:.6rem;font-weight:600;letter-spacing:.18em;color:var(--text-4)}
.mech__step.is-on .mech__n{color:var(--yellow)}
.mech__t{font-size:clamp(1.05rem,1.75vw,1.3rem);line-height:1.14;color:var(--text);margin-top:-.1rem}
.mech__d{font-size:.85rem;line-height:1.55;color:var(--text-2)}

.mech__conn{display:flex;align-items:center;justify-content:center;padding-top:1.5rem;
  opacity:.18;transition:opacity var(--dur-3) var(--ease)}
.mech__conn.is-on{opacity:1}
.mech__arw{width:100%;height:auto;overflow:visible}
.mech__arw path{fill:none;stroke:var(--yellow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mech__arw-line{stroke-dasharray:3 3.6}

/* ---------------------------------------------------- the three absences */
.mech__void{
  display:grid;gap:.85rem;border-top:1px solid var(--line);padding-top:clamp(1.1rem,2.4vw,1.6rem);
  opacity:.2;filter:saturate(.12);
  transition:opacity var(--dur-3) var(--ease),filter var(--dur-3) var(--ease);
}
.mech__void.is-on{opacity:1;filter:none}
.mech__void-h{color:var(--red)}

.mech__slots{display:grid;gap:.7rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.mech__slot{
  position:relative;display:grid;gap:.5rem;align-content:start;
  padding:.95rem 1rem 1.1rem;min-height:8rem;overflow:hidden;
  border:1px dashed var(--red);border-radius:var(--radius);background:transparent;
}
/* the nil stroke: an empty box, ruled through, the way a blank field is voided */
.mech__nil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mech__nil path{fill:none;stroke:var(--red);stroke-width:1.2;opacity:.42}

.mech__box{width:.95rem;height:.95rem;border:1px dashed var(--red);border-radius:1px;opacity:.75;position:relative}
.mech__slot-t{position:relative;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red-2)}
.mech__slot-d{position:relative;font-size:.84rem;line-height:1.5;color:var(--text-2)}

/* ---------------------------------------------------------- the controls */
.mech__now{color:var(--text-3)}
.mech__ctrl{border-top:1px solid var(--line);padding-top:.9rem}

/* ------------------- narrow: the flow turns vertical ------------------- */
@media (max-width:1020px){
  .mech__flow{grid-template-columns:minmax(0,1fr);gap:0}
  .mech__conn{padding:.4rem 0 .4rem .1rem;justify-content:flex-start}
  .mech__arw{width:2.4rem;margin:.85rem 0;transform:rotate(90deg)}
  .mech__t{font-size:clamp(1.1rem,3.2vw,1.35rem)}
  .mech__d{max-width:56ch}
}
@media (max-width:760px){
  .mech__slots{grid-template-columns:minmax(0,1fr)}
  .mech__slot{min-height:0;padding:.85rem .9rem 1rem}
  .mech__ctrl{justify-content:center;gap:.7rem}
}
@media (max-width:420px){
  .mech__d{font-size:.84rem}
  .mech__slot-d{font-size:.82rem}
}