/* ═══════════════════════════════════════════════════════
   CBV MODULE — Page-specific styles
   Shared tokens, components, and responsive imported
   from ../styles/ via HTML <link> tags
   ═══════════════════════════════════════════════════════ */

/* ── CBV card grid ── */
.cbv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.cbv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}
.cbv-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cbv-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.35rem;
}
.cbv-http {
  font-size: 0.62rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.cbv-desc { font-size: 0.72rem; color: #64748b; line-height: 1.6; }

/* ── Flow step colored variants ── */
.flow-step-urls  { border-color: #38bdf8; color: #38bdf8; }
.flow-step-cbv   { border-color: #4ade80; color: #4ade80; }
.flow-step-tpl   { border-color: #fb923c; color: #fb923c; }