/* Scoped by data-slide, per CLAUDE.md. One loop band, three tool cards, one
   closing line; the loop borrows the pipeline slide's vocabulary (node cards,
   accent arrows) without sharing its selectors. */

[data-slide="how-we-build"] .build-loop {
  display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items: stretch; column-gap: 0.6rem; row-gap: 0.4rem;
  margin-bottom: clamp(1rem, 2.2vh, 1.6rem);
}
[data-slide="how-we-build"] .bl-node {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(0.8rem, 1.6vw, 1.1rem);
}
[data-slide="how-we-build"] .bl-head { display: flex; align-items: center; gap: 0.45rem; }
[data-slide="how-we-build"] .bl-head .icon { width: 19px; height: 19px; color: var(--accent); flex: none; }
[data-slide="how-we-build"] .bl-head .icon svg { width: 100%; height: 100%; }
[data-slide="how-we-build"] .bl-node strong { font-size: 1rem; font-weight: 500; }
[data-slide="how-we-build"] .bl-node p {
  margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--fg-muted);
}
[data-slide="how-we-build"] .bl-chip {
  margin-top: auto; padding-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}
[data-slide="how-we-build"] .bl-arrow { align-self: center; width: 18px; height: 18px; color: var(--accent); flex: none; }
[data-slide="how-we-build"] .bl-arrow svg { width: 100%; height: 100%; }

/* The feedback loop: a dashed return path drawn under Build and Review only,
   exiting Review, running left, and pointing back up into Build. Second grid
   row spanning columns 3-5, U-shaped via three dashed borders; the arrow at
   the Build end is the shared arrow-right glyph rotated to point up. */
[data-slide="how-we-build"] .bl-return {
  grid-column: 3 / 6; grid-row: 2;
  position: relative; height: 1.8rem;
  border: 1px dashed var(--border); border-top: none;
  display: flex; align-items: center; justify-content: center;
}
/* Grey like the dashed path it terminates, not accent: the arrow is part of
   the return line, and its own colour read as a fourth thing to look at. */
[data-slide="how-we-build"] .bl-return .icon {
  position: absolute; left: -8px; top: -8px;
  width: 15px; height: 15px; color: var(--border);
  transform: rotate(-90deg);
}
[data-slide="how-we-build"] .bl-return .icon svg { width: 100%; height: 100%; display: block; }
[data-slide="how-we-build"] .bl-return-label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted); padding: 0 0.5rem;
}

[data-slide="how-we-build"] .build-tools {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  margin-bottom: clamp(0.8rem, 1.8vh, 1.2rem);
}
[data-slide="how-we-build"] .bt-card {
  display: flex; gap: 0.6rem; align-items: flex-start;
  border: 1px solid var(--border); padding: 0.75rem 0.85rem;
}
[data-slide="how-we-build"] .bt-card .icon { width: 17px; height: 17px; color: var(--fg-muted); flex: none; margin-top: 0.1rem; }
[data-slide="how-we-build"] .bt-card .icon svg { width: 100%; height: 100%; }
[data-slide="how-we-build"] .bt-card strong { font-size: 0.85rem; font-weight: 500; }
[data-slide="how-we-build"] .bt-card p { margin: 0.15rem 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--fg-muted); }

/* Below 780px of height the loop keeps its row but tightens; the tool cards
   stack so nothing clips. */
@media (max-height: 780px) {
  [data-slide="how-we-build"] .bl-node p { font-size: 0.78rem; }
  [data-slide="how-we-build"] .bt-card p { font-size: 0.72rem; }
}
@media (max-width: 700px) {
  [data-slide="how-we-build"] .build-loop { grid-template-columns: 1fr; }
  [data-slide="how-we-build"] .bl-arrow { transform: rotate(90deg); justify-self: center; }
  [data-slide="how-we-build"] .bl-return {
    grid-column: 1; grid-row: auto; height: auto;
    border-top: 1px dashed var(--border); padding: 0.4rem 0.6rem;
  }
  [data-slide="how-we-build"] .bl-return .icon { position: static; transform: rotate(-90deg); margin-right: 0.4rem; }
  [data-slide="how-we-build"] .build-tools { grid-template-columns: 1fr; }
}