/* ---------- R7.4.10 end-to-end materials flow (homepage, staging) ----------
   Layout is media-query only (not gated on .js) so there is no shift when site2.js loads.
   e2e.js adds .e2e-anim (motion on), .is-active / .is-done (states) and sets the path and signal. */

.e2e .e2e-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.e2e h2{margin:0}
/* fixed frame: status text and button label changes must not re-wrap the header (CLS) */
.e2e-tools{display:flex;visibility:hidden;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 16px;width:100%;min-height:60px}
.js .e2e-tools{visibility:visible}
/* .btn sets display, which beats the hidden attribute: reduced motion must still hide Play */
.e2e-tools [hidden]{display:none}
.e2e-status{flex:1 1 100%;margin:0;min-height:1.5em;font-size:.85em;color:var(--muted);text-align:left}
@media (min-width:768px){
  .e2e-tools{width:420px;max-width:100%}
}

/* list layout: phones, and every mode without motion */
.e2e-stage{margin-top:28px}
.e2e-scene{display:none}
.e2e-flow{list-style:none;margin:0;padding:0;display:grid;gap:0}
.e2e-step{position:relative;padding:0 0 26px 52px}
.e2e-step:last-child{padding-bottom:0}
.e2e-step::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:1px;background:var(--line)}
.e2e-step:last-child::before{display:none}
.e2e-node{position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--muted);
  font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em}
.e2e-card h3{margin:0 0 6px;font-size:1.05em;line-height:1.25}
.e2e-card p{margin:0;color:var(--muted);font-size:.95em;line-height:1.5}
/* no hyphenation inside words: site2.css sets hyphens:auto on h1-h3 outside EN, so this block needs a higher selector */
.e2e .e2e-card h3,.e2e .e2e-card p{hyphens:none;word-break:normal;overflow-wrap:normal}

@media (max-width:767px){
  .e2e-anim .e2e-step{opacity:0;transform:translateY(12px)}
  .e2e-anim .e2e-step.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
}

/* scene layout: tablet and desktop, same flow for both */
@media (min-width:768px){
  .e2e-stage{position:relative;aspect-ratio:1000/720}
  .e2e-scene{display:block;position:absolute;left:0;right:0;top:-24px;bottom:-24px;color:var(--text);pointer-events:none}
  .e2e-svg{display:block;width:100%;height:100%;overflow:visible}
  .e2e-plant path,.e2e-plant rect,.e2e-plant ellipse{fill:none;stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
  .e2e-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 9;vector-effect:non-scaling-stroke}
  .e2e-live{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1 1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
  .e2e-signal{fill:var(--accent);opacity:0}
  .e2e-anim .e2e-signal{opacity:1}
  .e2e-flow{display:block;position:absolute;inset:0}
  .e2e-step{position:absolute;left:var(--x);top:var(--y);width:0;height:0;padding:0}
  .e2e-step::before{display:none}
  .e2e-node{left:-18px;top:-18px}
  /* card background hides the plant grid lines behind the text */
  .e2e-card{position:absolute;top:30px;left:-82px;width:164px;text-align:center;background:var(--bg)}
  .e2e-card p{font-size:.8em;line-height:1.4}
  /* translated titles run longer (RU step 01 takes 3 lines): tighter leading outside EN keeps card 01 clear of the node 10 row */
  html:not([lang="en"]) .e2e-card{top:22px}
  html:not([lang="en"]) .e2e-card h3{font-size:.9em;line-height:1.2}
  html:not([lang="en"]) .e2e-card p{line-height:1.3}
  /* step 05 sits on the right edge where the connector drops down: its card goes above the node */
  .e2e-step:nth-child(5) .e2e-card{top:auto;bottom:30px}
}
@media (min-width:768px) and (max-width:1023px){
  /* tablet: titles only, lighter motion (no scene parallax) */
  .e2e-card{left:-62px;width:124px}
  .e2e-card p{display:none}
  .e2e-anim .e2e-scene{transform:none}
}
@media (min-width:1024px){
  .e2e-anim .e2e-scene{transform:translate3d(var(--px,0px),var(--py,0px),0)}
}

/* motion states, set by e2e.js only when motion is allowed */
.e2e-anim .e2e-node,.e2e-anim .e2e-card{transition:border-color .35s,background-color .35s,color .35s,opacity .35s}
.e2e-anim .e2e-scene{transition:transform .2s linear}
.e2e-step.is-done .e2e-node{border-color:var(--accent);color:var(--accent)}
.e2e-step.is-active .e2e-node{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.e2e-step.is-active .e2e-card h3{color:var(--accent)}
@media (min-width:768px){
  .e2e-anim .e2e-step:not(.is-active):not(.is-done) .e2e-card{opacity:.5}
}

@media (prefers-reduced-motion:reduce){
  .e2e-anim *{transition:none!important;animation:none!important}
  .e2e-anim .e2e-scene{transform:none!important}
}