/* PORT-27: detail-only diagram overlay; existing loader and dialog styles remain authoritative. */
.detail-diagram[data-project-flows] .project-flow { margin: 0 0 1.5rem; }
.detail-diagram[data-project-flows] .project-flow:last-child { margin-bottom: 0; }
.detail-diagram[data-project-flows] .project-flow-link {
  display: block;
  width: 100%;
  max-width: 48rem;
  aspect-ratio: var(--flow-desktop-ratio);
  position: relative;
  cursor: zoom-in;
  touch-action: manipulation;
}
.detail-diagram[data-project-flows] picture { display: block; width: 100%; height: 100%; }
.detail-diagram[data-project-flows] img { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-diagram[data-project-flows] .project-flow-link:focus-visible { outline: 2px solid var(--accent, #5eead4); outline-offset: 4px; }
@media (max-width: 700px) {
  .detail-diagram[data-project-flows] .project-flow-link { aspect-ratio: var(--flow-mobile-ratio); }
}