/* ent-rollout-track · one lane fans out. A line drawing in ink on white: no cells, no circled numbers, no arrows.
   Scoped under .ea-rollout. Desktop plan is 1232 x 260 (gates at 40, 340, 640, 900; track at y=120); x scales with the width. */
.ea-rollout{
  --ea-t1:120ms;--ea-t2:200ms;--ea-t3:320ms;--ea-t4:560ms;--ea-t5:900ms;--ea-t6:1600ms;--ea-t7:2400ms;
  --ea-draw:var(--ease-draw,cubic-bezier(.45,.05,.25,1));
  position:relative;
}

/* drawing */
.ea-rollout .ea-ro-draw{position:relative;height:236px} /* the 1232x260 plan draws nothing below y=201; the svg overflows into the last 24px */
.ea-rollout .ea-ro-svg,.ea-rollout .ea-ro-fan{display:block;width:100%;overflow:visible}
.ea-rollout .ea-ro-svg{height:260px}
.ea-rollout svg path{fill:none;vector-effect:non-scaling-stroke}
.ea-rollout .ea-ro-plan{stroke:var(--ink-15);stroke-width:2;stroke-linecap:round;stroke-dasharray:0 8}
.ea-rollout .ea-ro-gl{stroke:var(--ink-40);stroke-width:1}
.ea-rollout .ea-ro-seg,.ea-rollout .ea-ro-trunk{stroke:var(--ink);stroke-width:1.5}
.ea-rollout .ea-ro-tick{stroke:var(--ink);stroke-width:1.5}
.ea-rollout .ea-ro-sw{stroke:var(--ink-40);stroke-width:1}
.ea-rollout .ea-ro-lane{stroke:var(--ink);stroke-width:1}
.ea-rollout .ea-ro-dot{fill:var(--ink)}
.ea-rollout .ea-ro-m{fill:var(--ink-15)}
.ea-rollout .ea-ro-m.is-f{fill:var(--ink)}
.ea-rollout:not(.ea-live) .ea-ro-dot{opacity:0}

/* gate labels and stamps ride on the drawing (desktop); step copy sits in four columns under the gates */
.ea-rollout .ea-ro-steps{display:grid;grid-template-columns:calc(40 / 1232 * 100%) calc(300 / 1232 * 100%) calc(300 / 1232 * 100%) calc(260 / 1232 * 100%) minmax(0,1fr);margin-top:32px}
.ea-rollout .ea-ro-step{min-width:0;padding-right:32px}
.ea-rollout .ea-ro-step:nth-child(1){grid-column:2}
.ea-rollout .ea-ro-step:nth-child(2){grid-column:3}
.ea-rollout .ea-ro-step:nth-child(3){grid-column:4}
.ea-rollout .ea-ro-step:nth-child(4){grid-column:5;padding-right:0}
.ea-rollout .ea-ro-gate{position:absolute;top:78px;left:calc(var(--gx) / 1232 * 100%);font:500 11px/14px var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.ea-rollout .ea-ro-gate span{color:var(--ink-40);margin-right:2px}
.ea-rollout .ea-ro-h{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.005em;color:var(--ink)}
.ea-rollout .ea-ro-p{margin-top:6px;font-size:14px;line-height:22px;color:var(--ink-60);max-width:260px}
.ea-rollout .ea-ro-stamp{position:absolute;top:134px;left:calc(var(--gx) / 1232 * 100% + 16px);font:11px/16px var(--mono);color:var(--ink-40)}
.ea-rollout .ea-ro-stamp li{white-space:nowrap}
.ea-rollout .ea-ro-ty{display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap;max-width:calc(var(--n,40) * 1ch)}
.ea-rollout .ea-ro-cur{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:-2px;background:var(--ink-60);opacity:0}
.ea-rollout .ea-ro-cur.is-on{opacity:1}
.ea-rollout .ea-ro-rail{display:none}
.ea-rollout .ea-ro-step .ea-ro-stamp{position:absolute} /* outranks v4 .review [data-confirm]{position:relative} */

/* the yard (lane labels over the fan-out) */
.ea-rollout .ea-ro-fan{display:none}
.ea-rollout .ea-ro-lanes{font:11px/14px var(--mono);color:var(--ink-60)}
.ea-rollout .ea-ro-lanes li{position:absolute;top:calc(var(--ly) * 1px - 18px);left:min(calc(900 / 1232 * 100% + 170px),calc(100% - 100px));white-space:nowrap}

/* ---- live (JS, motion allowed): rewind, then play ---- */
.ea-rollout.ea-live .ea-ro-plan,.ea-rollout.ea-live .ea-ro-gl,.ea-rollout.ea-live .ea-ro-sw{opacity:0}
.ea-rollout.ea-live.is-on .ea-ro-plan,.ea-rollout.ea-live.is-on .ea-ro-gl{opacity:1;transition:opacity var(--ea-t3) linear}
.ea-rollout.ea-live .ea-ro-seg,.ea-rollout.ea-live .ea-ro-tick,.ea-rollout.ea-live .ea-ro-trunk,.ea-rollout.ea-live .ea-ro-lane{stroke-dasharray:1 2;stroke-dashoffset:1}
.ea-rollout.ea-live .ea-ro-seg.is-on{stroke-dashoffset:0;transition:stroke-dashoffset var(--ea-t5) var(--ease-io)}
.ea-rollout.ea-live .ea-ro-tick.is-on{stroke-dashoffset:0;transition:stroke-dashoffset var(--ea-t2) var(--ea-draw)}
.ea-rollout.ea-live .ea-ro-trunk.is-on{stroke-dashoffset:0;transition:stroke-dashoffset 240ms linear}
.ea-rollout.ea-live .ea-ro-trunk.is-on~.ea-ro-sw{opacity:1;transition:opacity var(--ea-t2) linear 120ms}
.ea-rollout.ea-live .ea-ro-lane.is-on{stroke-dashoffset:0;transition:stroke-dashoffset var(--ea-t5) var(--ea-draw)}
.ea-rollout.ea-live .ea-ro-gate{color:var(--ink-40);transition:color var(--ea-t2) var(--ease)}
.ea-rollout.ea-live .ea-ro-step.is-on .ea-ro-gate{color:var(--ink)}
.ea-rollout.ea-live .ea-ro-fl{opacity:0}
.ea-rollout.ea-live .ea-ro-fl.is-on{opacity:1;transition:opacity var(--ea-t3) linear}
.ea-rollout.ea-live .ea-ro-m{transition:fill 240ms var(--ease)}
.ea-rollout.ea-live .ea-ro-lanes li{opacity:0}
.ea-rollout.ea-live .ea-ro-lanes li.is-on{opacity:1;transition:opacity 240ms linear}
.ea-rollout.ea-sim *,.ea-rollout.ea-sim{transition:none!important;animation:none!important}

/* ---- tablet ---- */
@media (max-width:1100px){
  .ea-rollout .ea-ro-step{padding-right:24px}
  .ea-rollout .ea-ro-gate{letter-spacing:.04em}
}

/* ---- narrow (900 and below, incl. mobile): the track runs top to bottom at x=24 ---- */
@media (max-width:900px){
  .ea-rollout .ea-ro-draw{display:none}
  .ea-rollout .ea-ro-steps{display:block;margin-top:0}
  .ea-rollout .ea-ro-step{position:relative;padding:0 0 36px 52px}
  .ea-rollout .ea-ro-step::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:2px;background:radial-gradient(circle,var(--ink-15) 0 1px,transparent 1.2px) 0 3px/2px 8px repeat-y}
  .ea-rollout .ea-ro-step:first-child::before{top:7px}
  .ea-rollout .ea-ro-step::after{content:"";position:absolute;left:17px;top:6.5px;width:14px;height:1px;background:var(--ink-40)}
  .ea-rollout .ea-ro-step.is-on::after,.ea-rollout:not(.ea-live) .ea-ro-step::after{background:var(--ink);height:1.5px;top:6px}
  .ea-rollout .ea-ro-rail{display:block;position:absolute;left:23.25px;top:7px;bottom:-7px;width:1.5px;background:var(--ink);transform-origin:50% 0}
  .ea-rollout .ea-ro-step:last-child .ea-ro-rail{bottom:0}
  .ea-rollout .ea-ro-gate{position:static;margin-bottom:8px}
  .ea-rollout .ea-ro-p{max-width:520px}
  .ea-rollout .ea-ro-step .ea-ro-stamp{position:static;margin-top:12px}
  .ea-rollout .ea-ro-yard{position:relative;height:146px}
  .ea-rollout .ea-ro-fan{display:block;height:146px}
  .ea-rollout .ea-ro-lanes li{top:calc(18px + var(--k) * 24px - 17px);left:48px}
  .ea-rollout .ea-ro-lanes li:nth-child(even){left:calc(50% + 16px)}
  .ea-rollout.ea-live .ea-ro-rail{transform:scaleY(0)}
  .ea-rollout.ea-live .ea-ro-rail.is-on{transform:none;transition:transform var(--ea-t5) var(--ease-io)}
  .ea-rollout.ea-live .ea-ro-trunk.is-on{transition-duration:480ms}
}
@media (max-width:760px){
  .ea-rollout .ea-ro-step{padding-left:48px}
  .ea-rollout .ea-ro-lanes li{left:44px}
}

/* ---- reduced motion: the whole drawing, stamps typed, no dots ---- */
@media (prefers-reduced-motion:reduce){
  .ea-rollout .ea-ro-dot{display:none}
  .ea-rollout *{transition:none!important}
}
@media print{
  .ea-rollout .ea-ro-dot{display:none}
}