/* ASCII robots (js/ascii-bot.js). The box sets the width; the drawing scales its font to fit --cols columns. */
.ascii-box { display: flex; align-items: center; justify-content: center; container-type: inline-size; overflow: hidden; background: #000; }
.ascii.bot {
  margin: 0; padding: 0; width: 100%;
  font: 500 calc(100cqw / (var(--cols, 22) * 0.6)) / 1 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0; white-space: pre; text-align: left; color: #3dff8a; background: transparent;
  user-select: none; text-shadow: 0 0 calc(100cqw / (var(--cols, 22) * 2)) rgba(61, 255, 138, .35);
}
.ascii.bot.sm { text-shadow: none; }
.ascii.bot.xl { cursor: grab; touch-action: none; }
.ascii.bot.xl:active { cursor: grabbing; }
.ascii.bot .g { color: #3dff8a; }
.ascii.bot .w { color: #f2f5f2; }
.ascii.bot .b { color: #5aa9ff; }
.ascii.bot .y { color: #ffd24a; }
.ascii.bot .r { color: #ff5f5f; }
.ascii.bot .c { color: #5ff0ff; }
.ascii.bot .m { color: #d98cff; }
.ascii.bot .o { color: #ff9a3c; }
.ascii.bot .br { color: #c08a5a; }
.ascii.bot .k { color: #8b949e; }
.ascii.bot .d { color: #2f6b45; }
@media (prefers-reduced-motion: reduce) { .ascii.bot.live { animation: none; } }

/* sizes (override the fixed face boxes of site.css) */
span.face.ascii-box { height: auto; }
span.face.ascii-box.sm { width: min(100%, 124px); }
.crew.big span.face.ascii-box.sm { width: min(100%, 156px); }
span.face.ascii-box.tiny { width: 44px; }
.botcell span.face.ascii-box.tiny, .tape span.face.ascii-box.tiny { width: 36px; }
span.face.ascii-box.xl { width: 100%; max-width: 620px; }
.ascii.bot.tiny { text-shadow: none; font-weight: 700; }

/* the next bot being assembled (home hero) */
.ascii-box.assembly-bot { width: 100%; max-width: 440px; margin: 0 auto; }

/* /method sizing ladder (HTML, terminal style) */
.ladder-ascii { padding: 12px 1ch 8px; }
.lad-row { display: flex; align-items: flex-end; gap: 1ch; }
.lad-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.lad-step span.face.ascii-box.sm { width: min(100%, 108px); }
.lad-blk { width: 100%; height: calc(var(--h) * 18px + 8px); border: 1px solid var(--line, #2a2f36); border-bottom: 0; display: flex; justify-content: center; padding-top: 2px; color: var(--blue, #5aa9ff); }
.lad-more { flex: 0 0 auto; color: var(--muted, #8b949e); padding-bottom: 4px; }
.lad-cap { border-top: 1px solid var(--line, #2a2f36); padding-top: 6px; color: var(--muted, #8b949e); }

/* no programming ligatures (== |= => would turn into joined glyphs) */
.ascii.bot { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* callout rows: room for the tiny face */
.co-face, .co-face > span.face.ascii-box.tiny { width: 44px; height: auto; }
.co { grid-template-columns: 44px minmax(0, 1fr); }
.tx { grid-template-columns: 44px minmax(0, 1fr); }
/* the tiny ASCII face must never run into the name next to it (wins over site.css regardless of load order) */
body .tx { grid-template-columns: 52px minmax(0, 1fr); column-gap: 1ch; }
body .tx > a:first-child, body .tx .face.tiny { overflow: hidden; max-width: 52px; }