/* Shared presentation for the Build a Legend Bot series, loaded after ai-tutorial.css.
   Pages keep their own widget layout in <prefix>-tutorial.css; this file holds the few
   blocks every page in the series uses. */

/* First-hand results from the author's lab, set apart from general claims so a reader
   always knows which numbers are one lab's measurements. */
.bot-record { margin: 1.4rem 0; padding: .95rem 1.15rem; border: 1px solid #3a3326; border-left: 3px solid #f6bd60; border-radius: 8px; background: #15131a; }
.bot-record .bot-record-title { margin: 0 0 .35rem; font: 600 .78rem/1.4 ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #f6bd60; }
.bot-record p { margin: .35rem 0; }
.bot-record p:last-child { margin-bottom: 0; }

/* One step of the Phase 5 light-cycle project: what this page adds and the result it measures. */
.bot-project { margin: 1.4rem 0; padding: .95rem 1.15rem; border: 1px solid #23403a; border-left: 3px solid #4ed9b1; border-radius: 8px; background: #101a1a; }
.bot-project .bot-project-title { margin: 0 0 .35rem; font: 600 .78rem/1.4 ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #4ed9b1; }
.bot-project p { margin: .35rem 0; }
.bot-project ul, .bot-project ol { margin: .4rem 0 .2rem; padding-left: 1.3rem; }

/* Numbered procedures (setting up a referee, the lab step by step). */
.bot-steps { counter-reset: bot-step; list-style: none; margin: 1.2rem 0; padding: 0; }
.bot-steps > li { counter-increment: bot-step; position: relative; margin: 0 0 .85rem; padding: .7rem .9rem .7rem 3rem; border: 1px solid #2c3048; border-radius: 8px; background: #121420; }
.bot-steps > li::before { content: counter(bot-step); position: absolute; left: .85rem; top: .7rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #2a2450; color: #c4b5fd; font: 600 .8rem/1.5rem ui-monospace, monospace; text-align: center; }
.bot-steps > li > strong:first-child { color: #eeeef4; }

/* Static diagrams (inline SVG) that have no state worth a widget. */
.bot-figure { margin: 1.6rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #11121c; }
.bot-figure svg { display: block; width: 100%; height: auto; }
.bot-figure figcaption { margin-top: .75rem; color: #b5bdd1; font-size: .85rem; line-height: 1.6; }

/* A file tree or command block that reads as a listing but is not compiled. */
.bot-tree { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid #2c3048; border-radius: 8px; background: #0d1019; color: #dddff1; font: .82rem/1.65 ui-monospace, monospace; white-space: pre; overflow-x: auto; }

@media (max-width: 600px) {
  .bot-steps > li { padding-left: 2.6rem; }
  .bot-steps > li::before { left: .6rem; }
  .bot-figure { padding: .7rem; }
}

/* Tables here hold player names, contest names and links. tutorial.css lets links break
   anywhere, which splits names mid-word in narrow cells; keep words whole. A wide table
   scrolls inside its .ai-table-wrap (pages set a min-width where a table needs one). */
.ai-table a { overflow-wrap: normal; word-break: normal; }

/* Labels inside the series' inline SVG figures use the same monospace face as widget labels. */
.bot-figure svg text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }