/* Behavior Cloning: canvas heights for the three widgets, the pipeline figure, the project tables
   and the file tree. */
#widget-bc-train canvas { height: 400px; }
#widget-bc-drift canvas { height: 340px; }
#widget-bc-forgotten canvas { height: 330px; }

/* The cloning pipeline: a two-by-two figure on wide screens, a single column on phones. */
.bot-figure svg.bc-figure-wide { max-width: 760px; margin: 0 auto; }
.bot-figure svg.bc-figure-tall { display: none; max-width: 420px; margin: 0 auto; }
.bot-figure .bc-box { fill: #181a28; stroke: #4c526d; stroke-width: 1.5; }
.bot-figure .bc-box-first { stroke: #4ed9b1; }
.bot-figure .bc-box-last { stroke: #f6bd60; }
.bot-figure .bc-step { fill: #a78bfa; font-weight: 700; }
.bot-figure .bc-title { fill: #eeeef4; font-weight: 600; }
.bot-figure .bc-line { fill: #c7cde1; }
.bot-figure .bc-arrow { fill: none; stroke: #8f97b3; stroke-width: 2; }
.bot-figure .bc-arrowhead { fill: #8f97b3; }
.bot-figure .bc-figure-wide .bc-step, .bot-figure .bc-figure-wide .bc-line { font-size: 17px; }
.bot-figure .bc-figure-wide .bc-title { font-size: 20px; }
.bot-figure .bc-figure-tall .bc-step, .bot-figure .bc-figure-tall .bc-line { font-size: 16px; }
.bot-figure .bc-figure-tall .bc-title { font-size: 19px; }

/* Numeric tables: numbers right-aligned on one line. */
.bc-numbers td:not(:first-child), .bc-numbers th:not(:first-child) { text-align: right; white-space: nowrap; }

/* The project's file tree: notes in gray, this step's new files in teal. */
.bot-tree .bc-note { color: #9aa3bd; }
.bot-tree .bc-new { color: #4ed9b1; }

@media (max-width: 600px) {
  #widget-bc-train canvas { height: 760px; }
  #widget-bc-drift canvas { height: 620px; }
  #widget-bc-forgotten canvas { height: 780px; }
  .bot-figure svg.bc-figure-wide { display: none; }
  .bot-figure svg.bc-figure-tall { display: block; }
  /* Keep numbers on one line; a wide table scrolls inside its own box. */
  .bc-numbers { min-width: 30rem; }
}