/* Where NEUSAI sits (home page) */
.flow { margin: 28px 0 0; }
.flow-head, .track { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.flow-head span { font-size: 13px; color: var(--graphite); padding: 0 12px 8px; border-bottom: 1px solid var(--ink); }
.lane { margin: 22px 0 0; }
.lane-name { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.track { position: relative; border-bottom: 1px solid var(--rule); }
.cell { padding: 12px; font-size: 14px; line-height: 1.5; min-height: 64px; display: flex; align-items: center; }
.cell + .cell { border-inline-start: 1px solid var(--rule); }
.cell code { font: 13px/1.55 var(--mono); text-align: left; }
.cell.req code { color: var(--ink); }
.out-bad code { color: var(--brick); font-weight: 600; white-space: nowrap; }
.lane-2 .mid { border-inline-start: 3px solid var(--gold); font-weight: 600; background: #FBF7EA; }
.packet { display: none; }
.cell .k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 820px) {
  .flow-head { display: none; }
  .track { grid-template-columns: 1fr; }
  .cell { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 10px 0; }
  .cell .k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 12px; font-weight: 400; color: var(--graphite); }
  .cell + .cell { border-inline-start: 0; border-top: 1px dashed var(--rule); }
  .lane-2 .mid { border-inline-start: 0; border-top: 3px solid var(--gold); padding-inline: 10px; }
  .cell code { white-space: normal; word-break: break-all; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  /* a line traces the request's path along each row, every 6 seconds; the end of each row stays readable throughout */
  .packet { display: block; position: absolute; bottom: -1px; inset-inline-start: 0; height: 3px; width: 0; }
  .lane-1 .packet { background: var(--brick); animation: path-1 6s cubic-bezier(.4,0,.2,1) .4s infinite; }
  .lane-2 .packet { background: var(--gold); animation: path-2 6s cubic-bezier(.4,0,.2,1) .4s infinite; }
  @keyframes path-1 { 0% { width: 0; opacity: 1; } 45% { width: 100%; opacity: 1; } 85% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
  @keyframes path-2 { 0% { width: 0; opacity: 1; } 22% { width: 41%; opacity: 1; } 85% { width: 41%; opacity: 1; } 100% { width: 41%; opacity: 0; } }
  .lane-1 .out code, .lane-2 .out { animation: reach 6s ease-out .4s infinite; }
  .lane-2 .mid { animation: halt 6s ease-out .4s infinite; }
  @keyframes reach { 0%, 40% { opacity: .45; } 50%, 90% { opacity: 1; } 100% { opacity: .45; } }
  @keyframes halt { 0%, 18% { background-color: #FDFBF4; } 24%, 70% { background-color: #F6EFD9; } 85%, 100% { background-color: #FDFBF4; } }
}
@media print { .packet { display: none !important; } }