/* Decision-gated path of an AI use case (includes/visuals/gates.php) */
.ga { --ga-rail: 72px; --ga-lane: 28px; --ga-card: 330px; }
.ga-path { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--ga-rail) minmax(0, 1fr) var(--ga-lane); row-gap: 6px; }
/* exit lane: a dashed vertical line on the right, ending on the "stop" note */
.ga-path::after { content: ""; position: absolute; top: 60px; bottom: 20px; right: 13px; border-left: 2px dashed #7d8a80; }

/* the rail and its token (one decorative item spanning the rows of the path) */
.ga-tk { grid-column: 2; grid-row: 1 / 10; position: relative; z-index: 0; pointer-events: none; }
.ga-tk::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 30px; bottom: 30px; width: 3px; border-radius: 2px; background: var(--forest); }
.ga-tk::after { content: ""; position: absolute; left: calc(50% - 8px); top: 30px; bottom: 30px; width: 16px;
  background: radial-gradient(circle at 8px 8px, var(--green) 4.5px, var(--forest) 5px 7.5px, transparent 8px) no-repeat; opacity: 0; }

/* explicit rows: five steps and four gates, the rail spans them, the stop note closes the path */
.ga-i1 { grid-row: 1; }
.ga-i2 { grid-row: 2; }
.ga-i3 { grid-row: 3; }
.ga-i4 { grid-row: 4; }
.ga-i5 { grid-row: 5; }
.ga-i6 { grid-row: 6; }
.ga-i7 { grid-row: 7; }
.ga-i8 { grid-row: 8; }
.ga-i9 { grid-row: 9; }

/* step cards, left or right of the rail, tied to it by a stub and a dot */
.ga-step { position: relative; z-index: 1; width: 100%; max-width: var(--ga-card); min-width: 0; }
.ga-step--l { grid-column: 1; justify-self: end; }
.ga-step--r { grid-column: 3; justify-self: start; }
.ga-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 15px; }
.ga-n { width: 24px; height: 24px; border-radius: 50%; background: var(--forest); color: var(--white); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ga-t { font-size: 16px; line-height: 1.25; color: var(--forest); }
.ga-d { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ga-card::before { content: ""; position: absolute; top: 27px; width: calc(var(--ga-rail) / 2); border-top: 2px solid var(--forest); }
.ga-card::after { content: ""; position: absolute; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--forest); }
.ga-step--l .ga-card::before { right: calc(var(--ga-rail) / -2 - 1px); }
.ga-step--l .ga-card::after { right: calc(var(--ga-rail) / -2 - 7px); }
.ga-step--r .ga-card::before { left: calc(var(--ga-rail) / -2 - 1px); }
.ga-step--r .ga-card::after { left: calc(var(--ga-rail) / -2 - 7px); }

/* the human-control step: card on the right, callout on the left, dashed stub across the rail */
.ga-step--human { grid-column: 1 / 4; max-width: none; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) var(--ga-rail) minmax(0, 1fr); align-items: start; }
.ga-step--human .ga-card { grid-column: 3; grid-row: 1; width: 100%; max-width: var(--ga-card); }
.ga-human { grid-column: 1; grid-row: 1; position: relative; justify-self: end; width: 100%; max-width: var(--ga-card); padding: 13px 16px 14px; border-radius: var(--radius-sm); background: var(--mint); border: 1px solid var(--sage); }
.ga-human::after { content: ""; position: absolute; top: 27px; right: calc(var(--ga-rail) / -2 - 1px); width: calc(var(--ga-rail) / 2); border-top: 2px dashed var(--green-text); }
.ga-human-t { margin: 0 0 8px; }
.ga-human-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; line-height: 1.4; color: var(--forest); font-weight: 600; }
.ga-human-l li { position: relative; padding-left: 16px; }
.ga-human-l li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--green-text); }
.ga-free { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--sage); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.ga-free strong { color: var(--green-text); }

/* decision gates: diamond on the rail, "adjust" to the left, "stop" dashed to the lane, "continue" down */
.ga-gate { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) var(--ga-rail) minmax(0, 1fr) var(--ga-lane); grid-template-rows: auto auto; align-items: center; padding: 4px 0 2px; }
.ga-dia { grid-column: 2; grid-row: 1; justify-self: center; width: 22px; height: 22px; transform: rotate(45deg); background: var(--white); border: 2.5px solid var(--forest); border-radius: 3px; }
.ga-out { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--forest); display: inline-flex; align-items: center; gap: 6px; }
.ga-ico { flex: none; width: 15px; height: 15px; }
.ga-out--go { grid-column: 2; grid-row: 2; justify-self: center; margin-top: 4px; font-size: 11.5px; color: var(--green-text); background: var(--paper); padding: 1px 3px; gap: 2px; white-space: nowrap; }
.section--paper .ga-out--go { background: var(--white); }
.ga-out--adj { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.ga-out--adj::after { content: ""; width: 20px; border-top: 2px solid var(--forest); margin-left: 4px; }
.ga-out--stop { grid-column: 3 / 5; grid-row: 1; color: var(--ink-2); gap: 8px; }
.ga-out--stop::before { content: ""; flex: 0 0 20px; border-top: 2px dashed #7d8a80; margin-left: 4px; }
.ga-out--stop::after { content: ""; flex: 1 1 20px; border-top: 2px dashed #7d8a80; margin-right: 13px; }

/* the stop note at the end of the lane */
.ga-stop { position: relative; z-index: 1; grid-column: 3 / 5; grid-row: 10; justify-self: end; width: 100%; max-width: calc(var(--ga-card) + var(--ga-lane)); margin-top: 8px; padding: 12px 16px 13px; background: var(--white); border: 2px dashed #7d8a80; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ga-stop strong { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--forest); }

/* intro: the rail draws down, the steps and gates follow one after the other, then the token runs */
.js .vz-figure .ga-tk::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .15s; }
.js .vz-figure .ga-path::after, .js .vz-figure .ga-stop { opacity: 0; transition: opacity .6s ease 1.5s; }
.js .vz-figure .ga-step, .js .vz-figure .ga-gate { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ga-i1 { transition-delay: .15s; }
.js .vz-figure .ga-i2 { transition-delay: .35s; }
.js .vz-figure .ga-i3 { transition-delay: .55s; }
.js .vz-figure .ga-i4 { transition-delay: .75s; }
.js .vz-figure .ga-i5 { transition-delay: .95s; }
.js .vz-figure .ga-i6 { transition-delay: 1.15s; }
.js .vz-figure .ga-i7 { transition-delay: 1.35s; }
.js .vz-figure .ga-i8 { transition-delay: 1.55s; }
.js .vz-figure .ga-i9 { transition-delay: 1.75s; }
.js .vz-figure.is-visible .ga-tk::before { transform: none; }
.js .vz-figure.is-visible .ga-path::after, .js .vz-figure.is-visible .ga-stop { opacity: 1; }
.js .vz-figure.is-visible .ga-step, .js .vz-figure.is-visible .ga-gate { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ga-tk::after { animation: ga-run 9s linear 2.2s infinite; }
@keyframes ga-run {
  0% { transform: translateY(0); opacity: 0; } 4% { opacity: 1; }
  86% { transform: translateY(calc(100% - 16px)); opacity: 1; } 92%, 100% { transform: translateY(calc(100% - 16px)); opacity: 0; }
}

/* phones: one column along the rail, outcomes as chips */
@media (max-width: 719px) {
  .ga { --ga-rail: 40px; }
  .ga-path { grid-template-columns: var(--ga-rail) minmax(0, 1fr); row-gap: 10px; }
  .ga-path::after { display: none; }
  .ga-tk { grid-column: 1; }
  .ga-tk::before, .ga-tk::after { top: 20px; bottom: 20px; }
  .ga-step--l, .ga-step--r { grid-column: 2; justify-self: stretch; max-width: none; }
  .ga-card { padding: 12px 14px 13px; }
  .ga-step--l .ga-card::before, .ga-step--r .ga-card::before { right: auto; left: calc(var(--ga-rail) / -2 - 1px); }
  .ga-step--l .ga-card::after, .ga-step--r .ga-card::after { right: auto; left: calc(var(--ga-rail) / -2 - 7px); }
  .ga-step--human { grid-column: 2; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .ga-step--human .ga-card { grid-column: 1; grid-row: 1; max-width: none; }
  .ga-human { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; }
  .ga-human::after { display: none; }
  .ga-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 2px 0 2px var(--ga-rail); min-height: 30px; }
  .ga-dia { position: absolute; left: 11px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-width: 2px; }
  .ga-out, .ga-out--go { font-size: 12px; margin: 0; padding: 3px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); gap: 5px; }
  .ga-out--adj::after, .ga-out--stop::before, .ga-out--stop::after { display: none; }
  .ga-out--go { order: -1; color: var(--green-text); border-color: var(--sage); background: var(--mint); }
  .ga-stop { grid-column: 2; max-width: none; justify-self: stretch; margin-top: 2px; }
}