/* built-by-ai.css - the "built by AI" process section (WI-10).
   Explains the pipeline: one /episode command spins up a new show, the hosts
   record live, and one /turnover command does everything after air. Static
   3-step flow with a terminal-styled command rail. */

.bya {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, rgba(139,92,246,0.04)),
    var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bya__inner { position: relative; z-index: 1; }

.bya__lead {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--white);
  margin-bottom: var(--space-48);
}
.bya__lead strong { color: var(--ember); font-weight: 600; }

.bya__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  counter-reset: step;
}
@media (min-width: 820px) {
  .bya__steps { grid-template-columns: repeat(3, 1fr); }
}

.bya__step {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-32) var(--space-24) var(--space-24);
  counter-increment: step;
}
.bya__step::before {
  content: "0" counter(step);
  position: absolute;
  top: var(--space-16);
  right: var(--space-24);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--border);
}

/* Terminal command chip - JetBrains Mono, prompt caret, on-brand glow. */
.bya__cmd {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ember);
  background: rgba(224, 90, 43, 0.08);
  border: 1px solid rgba(224, 90, 43, 0.25);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.75rem;
  margin-bottom: var(--space-16);
}
.bya__cmd::before {
  content: "›";
  color: var(--violet);
  font-weight: 700;
}
.bya__cmd--manual {
  color: var(--violet);
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
}
.bya__cmd--manual::before { content: "●"; font-size: 0.6rem; }

.bya__step h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
}
.bya__step p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
}

/* Connecting arrows between steps on wide screens. */
@media (min-width: 820px) {
  .bya__step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: calc(-0.5 * var(--space-24) - 0.5ch);
    top: 50%;
    transform: translate(0, -50%);
    color: var(--border);
    font-size: 1.25rem;
  }
}

.bya__foot {
  margin-top: var(--space-32);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}
.bya__foot a { color: var(--violet); text-decoration: underline; }