/* Session flow: signal-path diagram on wide screens, ordered list on narrow. */

.flow svg {
  display: none;
  width: 100%;
  height: auto;
}

.flow .wire {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 8;
  animation: signal 1.6s linear infinite;
}

@keyframes signal {
  to {
    stroke-dashoffset: -28;
  }
}

.flow .node rect {
  fill: var(--bg-light);
  stroke: var(--border-color);
}

.flow .node:hover rect,
.flow .node--last rect {
  stroke: var(--accent);
}

.flow text {
  font-family: var(--font-text);
  fill: var(--text-color);
}

.flow .n {
  font-family: var(--font-title);
  fill: var(--accent-hi);
}

.flow-list {
  display: grid;

  & ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: s;
    display: grid;
    gap: 10px;
  }

  & li {
    counter-increment: s;
    padding: 14px 16px 14px 56px;
    position: relative;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;

    &::before {
      content: counter(s, decimal-leading-zero);
      position: absolute;
      left: 16px;
      top: 14px;
      font-family: var(--font-title);
      color: var(--accent-hi);
    }

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 26px;
      bottom: -11px;
      width: 2px;
      height: 10px;
      background: var(--accent);
    }
  }
}

@media (min-width: 768px) {
  .flow svg {
    display: block;
  }

  /* the homepage diagram replaces the list; on the Booking page the list stays */
  .flow .flow-list {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow .wire {
    animation: none;
  }
}