/* Building the Trainer: canvas heights for the three widgets, the architecture figure, the numeric
   tables, the status-file listing and the project's file tree. */
#widget-trainer-pipeline canvas { height: 268px; }
#widget-trainer-throughput canvas { height: 252px; }
#widget-trainer-pool canvas { height: 330px; }

/* The trainer's three parts: a row of boxes on wide screens, a column on phones. */
.bot-figure svg.trainer-figure-wide { max-width: 860px; margin: 0 auto; }
.bot-figure svg.trainer-figure-tall { display: none; max-width: 420px; margin: 0 auto; }
.bot-figure .trainer-box { fill: #181a28; stroke: #4c526d; stroke-width: 1.5; }
.bot-figure .trainer-box-engine { stroke: #4ed9b1; }
.bot-figure .trainer-box-python { stroke: #a78bfa; }
.bot-figure .trainer-box-gpu { stroke: #f6bd60; }
.bot-figure .trainer-title { fill: #eeeef4; font-weight: 600; }
.bot-figure .trainer-line { fill: #c7cde1; }
.bot-figure .trainer-label { fill: #aeb9d2; }
.bot-figure .trainer-abi { fill: #4ed9b1; font-weight: 600; }
.bot-figure .trainer-arrow { fill: none; stroke: #8f97b3; stroke-width: 2; }
.bot-figure .trainer-arrowhead { fill: #8f97b3; }
.bot-figure .trainer-figure-wide .trainer-line, .bot-figure .trainer-figure-wide .trainer-label { font-size: 15px; }
.bot-figure .trainer-figure-wide .trainer-title, .bot-figure .trainer-figure-wide .trainer-abi { font-size: 18px; }
.bot-figure .trainer-figure-tall .trainer-line, .bot-figure .trainer-figure-tall .trainer-label { font-size: 15px; }
.bot-figure .trainer-figure-tall .trainer-title, .bot-figure .trainer-figure-tall .trainer-abi { font-size: 18px; }

/* Numeric tables: numbers right-aligned on one line; code names never split mid-word. */
.trainer-numbers td:not(:first-child), .trainer-numbers th:not(:first-child) { text-align: right; white-space: nowrap; }
.trainer-numbers code, .trainer-settings code { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.trainer-numbers td:first-child { min-width: 11rem; }
/* The settings table is text: let its cells wrap, and keep the setting names readable. */
.trainer-settings td:first-child { min-width: 8rem; }

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

@media (max-width: 600px) {
  #widget-trainer-pipeline canvas { height: 510px; }
  #widget-trainer-throughput canvas { height: 420px; }
  #widget-trainer-pool canvas { height: 560px; }
  .bot-figure svg.trainer-figure-wide { display: none; }
  .bot-figure svg.trainer-figure-tall { display: block; }
  /* Keep numbers on one line; a wide table scrolls inside its own box. */
  .trainer-numbers { min-width: 31rem; }
}