/* Shipping a Network in 100,000 Characters: canvas heights for the four widgets, the two figures, the
   number tables and the project tree. */
#widget-ship-budget canvas { height: 340px; }
#widget-ship-quant canvas { height: 330px; }
#widget-ship-chars canvas { height: 330px; }
#widget-ship-parity canvas { height: 320px; }
#widget-ship-chars input[type=text] { background: #181a28; border: 1px solid #4c526d; border-radius: 6px; color: #edeefa; font: inherit; font-size: .85rem; padding: .35rem .5rem; width: 13rem; max-width: 100%; }

/* The figures: a wide drawing for desktops, a tall one for phones. */
.bot-figure svg.ship-tall { display: none; max-width: 420px; margin: 0 auto; }
.bot-figure svg.ship-wide { max-width: 860px; margin: 0 auto; }
.bot-figure .ship-box { fill: #171a2b; stroke: #3d4463; stroke-width: 1.5; }
.bot-figure .ship-box-start { stroke: #6b5bb0; }
.bot-figure .ship-box-optional { stroke-dasharray: 6 4; }
.bot-figure .ship-box-end { stroke: #2f7a66; }
.bot-figure .ship-step { fill: #a78bfa; font-size: 17px; font-weight: 700; }
.bot-figure .ship-title { fill: #eef0fa; font-size: 18px; font-weight: 600; }
.bot-figure .ship-line { fill: #c7cde1; font-size: 15px; }
.bot-figure .ship-arrow { fill: none; stroke: #8f97b3; stroke-width: 2; }
.bot-figure .ship-arrowhead { fill: #8f97b3; }
.bot-figure .ship-label { fill: #eef0fa; font-size: 15px; font-weight: 600; }
.bot-figure .ship-row { fill: #c7cde1; font-size: 15px; }
.bot-figure .ship-in { fill: #f5f5fb; font-size: 14px; font-weight: 600; }
.bot-figure .ship-in-dark { fill: #10201c; }
.bot-figure .ship-num { fill: #c7cde1; font-size: 14px; }
.bot-figure .ship-note { fill: #aeb9d2; font-size: 14px; }
.bot-figure .ship-seg { stroke: #0d1019; stroke-width: 1; }
.bot-figure .ship-seg-code { fill: #6b5bb0; }
.bot-figure .ship-seg-weights { fill: #4ed9b1; }
.bot-figure .ship-seg-file { fill: #a78bfa; }
.bot-figure .ship-limit { fill: #1d2133; stroke: #ef7e99; stroke-dasharray: 5 4; stroke-width: 1.5; }

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

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

@media (max-width: 600px) {
  #widget-ship-budget canvas { height: 640px; }
  #widget-ship-quant canvas { height: 640px; }
  #widget-ship-chars canvas { height: 640px; }
  #widget-ship-parity canvas { height: 620px; }
  #widget-ship-chars input[type=text] { width: 100%; }
  .bot-figure svg.ship-wide { display: none; }
  .bot-figure svg.ship-tall { display: block; }
  /* Keep numbers on one line; the tables scroll inside their own box instead. */
  .ship-numbers { min-width: 30rem; }
  .ship-qat-table { min-width: 34rem; }
}