/* ============================================================
   MBP FORGE — The Blueprint
   Free-text in, machine layout out. Leans on scan.css for the
   result blocks; this file owns the form and the diagram.
   ============================================================ */

.bp-form { padding: var(--s4); margin-top: var(--s4); }

.bp-label {
  display: block;
  font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan-t); margin-bottom: var(--s2);
}
.bp-text {
  width: 100%; resize: vertical; min-height: 4.5rem;
  font-family: var(--f-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  padding: var(--s2) var(--s3); line-height: 1.55;
}
.bp-text:focus { outline: 2px solid var(--cyan-t); outline-offset: 1px; }
.bp-text::placeholder { color: var(--soft); opacity: 0.75; }

.bp-qrow { margin-top: var(--s3); }
.bp-qk {
  display: block; font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft);
  margin-bottom: var(--s1);
}
.bp-qk em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.8; }

.bp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-chip {
  font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: 0.03em; color: var(--text); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 0.55em 1em;
  transition: border-color var(--t-quick) var(--e-settle),
              color var(--t-quick) var(--e-settle),
              box-shadow var(--t-quick) var(--e-settle);
}
.bp-chip:hover { border-color: var(--cyan-t); }
.bp-chip.is-on {
  border-color: var(--cyan-t); color: var(--cyan-t);
  box-shadow: 0 0 18px -6px rgba(56, 219, 255, 0.5);
}

.bp-go { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.bp-note { font-size: var(--fs-body-s); color: var(--soft); margin: 0; }

/* ---------- the drawn machine ---------- */
.bp-diagram {
  margin: var(--s3) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
}
.bp-diagram svg { display: block; min-width: 920px; width: 100%; height: auto; }

.bp-svg-box     { fill: rgba(255,255,255,0.85); stroke: rgba(22,50,70,0.32); stroke-width: 1.2; }
.bp-svg-trigger { stroke: var(--cyan-t); }
.bp-svg-gate    { fill: rgba(255,107,44,0.07); stroke: var(--ember-t); stroke-width: 1.5; }
.bp-svg-log     { fill: rgba(56,219,255,0.06); stroke: var(--cyan-t); stroke-dasharray: 4 3; stroke-width: 1; }
.bp-svg-k  { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--cyan-t); }
.bp-svg-kg { fill: var(--ember-t); }
.bp-svg-t  { font-family: var(--f-display); font-size: 14.5px; font-weight: 600; fill: var(--ink); }
.bp-svg-d  { font-family: var(--f-body); font-size: 11px; fill: var(--soft); }
.bp-svg-arrow { stroke: rgba(22,50,70,0.45); stroke-width: 1.4; fill: none; }
.bp-svg-head  { fill: rgba(22,50,70,0.45); }
.bp-svg-dot   { stroke: var(--cyan-t); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.bp-svg-src   { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--cyan-t); }

/* ---------- result blocks that scan.css doesn't cover ---------- */
.bp-steps { counter-reset: bp; list-style: none; margin: var(--s2) 0 0; padding: 0; }
.bp-steps li {
  position: relative; padding: 0.65rem 0 0.65rem 2.6rem;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-body-s); color: var(--text);
}
.bp-steps li::before {
  counter-increment: bp; content: counter(bp, decimal-leading-zero);
  position: absolute; left: 0; top: 0.7rem;
  font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--cyan-t);
}
.bp-steps li strong { color: var(--ink); }

.bp-ladder { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s2); align-items: center; }
.bp-rung {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.05em;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); padding: 0.45em 0.9em;
}
.bp-rung.is-hot { border-color: var(--cyan-t); color: var(--cyan-t); }
.bp-ladder .bp-sep { color: var(--soft); font-size: var(--fs-mono); }

.bp-honest {
  border-left: 3px solid var(--ember-t);
  padding: var(--s2) var(--s3);
  background: rgba(255, 107, 44, 0.05);
  font-size: var(--fs-body-s); color: var(--text);
  margin-top: var(--s3);
}

@media (max-width: 640px) {
  .bp-form { padding: var(--s3); }
  .bp-chip { padding: 0.5em 0.75em; }
}