/*
 * The guides — four flows worked end to end.
 *
 * Tokens, the top bar, the wordmark and the buttons are in `shell.css`; the
 * two-column reading shell and the prose card are in `reference.css`, which
 * this view shares. What is left here is the flow itself.
 *
 * The capability cards that used to open this page went to the front page with
 * the copy, and their `.cap*` rules went with them — as `.card`, which the
 * front page already needed for three other grids.
 */

/* ── The filter ───────────────────────────────────────────────────────── */

/*
 * This page's own search box.
 *
 * It used to borrow the reference's field in the top bar and rewrite its
 * placeholder, which left two live listeners on one input: typing filtered the
 * flows AND the endpoint list at once, and the placeholder stayed wrong for the
 * rest of the session.
 */
.flow-filter {
  max-width: 320px;
  margin: 4px 0 4px;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
}

/* ── Flows ────────────────────────────────────────────────────────────── */

.flow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.flow h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.flow-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  counter-reset: step;
}

.flow-step {
  border-left: 2px solid var(--border);
  padding: 0 0 22px 18px;
  position: relative;
}

.flow-step:last-child {
  padding-bottom: 0;
}

.flow-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.flow-num {
  position: absolute;
  left: -11px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
}

.flow-step p {
  margin: 0 0 8px;
  max-width: 68ch;
}

.flow-step > p:first-of-type {
  font-weight: 600;
}

.flow-after {
  margin: 18px 0 0;
  padding-left: 20px;
  max-width: 68ch;
}

.flow-after li {
  margin-bottom: 8px;
  color: var(--text-muted);
}

.flow-after b {
  color: var(--text);
}

/*
 * A caveat is a sentence, not a label. `.tag` is `nowrap` because everywhere
 * else it holds two words ("verified live"), and inside a card's flex row that
 * made "Not routed on the production gateway — see the reference." run
 * straight out through the border.
 */
.card-calls .tag {
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}