/* Self-Play Reinforcement Learning: canvas heights for the five widgets, the strength-curve figure,
   the project tables and the file tree. */
#widget-selfplay-advantage canvas, #widget-selfplay-pool canvas, #widget-selfplay-temperature canvas { height: 340px; }
#widget-selfplay-clip canvas { height: 330px; }
#widget-selfplay-hacking canvas { height: 330px; }

/* The strength curve: a wide chart on desktops, a taller one with bigger labels on phones. */
.bot-figure svg.selfplay-chart-tall { display: none; max-width: 440px; margin: 0 auto; }
.bot-figure .selfplay-grid { stroke: #2c3350; stroke-width: 1; }
.bot-figure .selfplay-even { stroke: #6b7392; stroke-width: 1.6; }
.bot-figure .selfplay-band-teacher { fill: rgba(78, 217, 177, .16); }
.bot-figure .selfplay-band-search { fill: rgba(246, 189, 96, .16); }
.bot-figure .selfplay-axis { fill: #aeb9d2; font-size: 13px; }
.bot-figure .selfplay-axis-title { fill: #c7cde1; font-size: 13px; }
.bot-figure .selfplay-teacher { stroke: #4ed9b1; }
.bot-figure .selfplay-clone { stroke: #a78bfa; }
.bot-figure .selfplay-search { stroke: #f6bd60; }
.bot-figure .selfplay-line { fill: none; stroke-width: 2.5; }
.bot-figure .selfplay-dot-teacher { fill: #4ed9b1; }
.bot-figure .selfplay-dot-clone { fill: #a78bfa; }
.bot-figure .selfplay-dot-search { fill: #f6bd60; }
.bot-figure .selfplay-end-label { fill: #e3e6f2; font-size: 14px; font-weight: 600; }
.bot-figure .selfplay-legend { fill: #c7cde1; font-size: 13px; }
.bot-figure .selfplay-promotion { stroke: #ef7e99; stroke-width: 2; }
.bot-figure .selfplay-promotion-label { fill: #ef7e99; font-size: 12px; }
.bot-figure .selfplay-chart-tall .selfplay-axis, .bot-figure .selfplay-chart-tall .selfplay-axis-title { font-size: 15px; }
.bot-figure .selfplay-chart-tall .selfplay-end-label { font-size: 16px; }
.bot-figure .selfplay-chart-tall .selfplay-legend { font-size: 15px; }
.bot-figure .selfplay-chart-tall .selfplay-promotion-label { font-size: 14px; }

/* Numeric tables: numbers right-aligned on one line. */
.selfplay-numbers td:not(:first-child), .selfplay-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 .selfplay-note { color: #9aa3bd; }
.bot-tree .selfplay-new { color: #4ed9b1; }

@media (max-width: 600px) {
  #widget-selfplay-advantage canvas { height: 560px; }
  #widget-selfplay-clip canvas { height: 520px; }
  #widget-selfplay-pool canvas { height: 640px; }
  #widget-selfplay-hacking canvas { height: 520px; }
  #widget-selfplay-temperature canvas { height: 600px; }
  .bot-figure svg.selfplay-chart-wide { display: none; }
  .bot-figure svg.selfplay-chart-tall { display: block; }
  /* Keep numbers on one line; a wide table scrolls inside its own box. */
  .selfplay-numbers { min-width: 32rem; }
}