/* Capstone: Build the Lab. Widget sizes, the step checklist labels, single-language command
   blocks, the repository tree and the loop figure. Shared series blocks live in bot-tutorial.css. */

#widget-lab-ledger canvas { height: 320px; }
#widget-lab-gates canvas { height: 330px; }
#widget-lab-gates .gate-toggles { display: flex; flex-wrap: wrap; gap: .4rem 1rem; width: 100%; }
#widget-lab-gates .gate-toggles label { gap: .35rem; }

/* Each step in the checklist ends with its check and the page that teaches it. */
.bot-steps .lab-done, .bot-steps .lab-page { display: block; margin-top: .35rem; font-size: .92rem; }
.bot-steps .lab-done b, .bot-steps .lab-page b { font: 600 .74rem/1.4 ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; margin-right: .45rem; }
.bot-steps .lab-done b { color: #a7f3d0; }
.bot-steps .lab-page b { color: #c4b5fd; }

/* A command block or excerpt in one language: the code-tabs frame with a plain label instead of tabs. */
.code-tabs .lab-lang { flex-shrink: 0; padding: .65rem .9rem; border-bottom: 2px solid var(--tut-accent); color: var(--tut-accent); font: 600 .76rem/1 var(--mono); letter-spacing: .02em; }
.code-tabs .code-tabs-title { white-space: normal; flex-shrink: 1; }

/* The repository tree: path, job, and the page that teaches it. */
.bot-tree .tree-job { color: #b5bdd1; }
.bot-tree .tree-off { color: #8b93a8; }
.bot-tree a { color: #c4b5fd; }
.bot-tree .com { color: #8b93a8; }

/* The loop figure. Sizes are in SVG units; the figure scales with the column. */
.lab-loop svg { max-width: 520px; margin: 0 auto; }
.lab-loop .loop-box { fill: #151724; stroke: #4c526d; stroke-width: 1.5; }
.lab-loop .loop-badge { fill: #2a2450; }
.lab-loop .loop-num { fill: #c4b5fd; font: 600 13px ui-monospace, monospace; text-anchor: middle; }
.lab-loop .loop-title { fill: #eeeef4; font: 600 19px system-ui, sans-serif; }
.lab-loop .loop-note { fill: #c5c9dc; font: 15px system-ui, sans-serif; }
.lab-loop .loop-arrow { fill: none; stroke: #a78bfa; stroke-width: 2.2; }
.lab-loop .loop-fail { fill: none; stroke: #ef7e99; stroke-width: 1.8; stroke-dasharray: 6 5; }
.lab-loop .loop-head { fill: #a78bfa; }
.lab-loop .loop-head-fail { fill: #ef7e99; }
.lab-loop .loop-label { fill: #ef7e99; font: 600 13px system-ui, sans-serif; text-anchor: middle; }

@media (max-width: 600px) {
  #widget-lab-ledger canvas { height: 480px; }
  #widget-lab-gates canvas { height: 380px; }
  #widget-lab-gates .gate-toggles label { width: auto; }
  .code-tabs .code-tabs-header { flex-wrap: wrap; }
}