/* Measuring Bot Strength: widget canvas sizes, the two figures and the pitfall grid. */
#widget-measure-interval canvas, #widget-measure-gate canvas, #widget-measure-cycle canvas { height: 330px; }
#widget-measure-samples canvas { height: 340px; }
#widget-measure-mirror canvas { height: 300px; }

/* The figures are drawn at phone scale; cap them so their text stays a sensible size on desktop. */
#fig-measure-ledger svg, #fig-measure-gate svg { max-width: 520px; margin: 0 auto; }

/* A table inside a worked example sits a little tighter than a standalone one. */
.ai-example .ai-table-wrap { margin: .7rem 0; }
.ai-example .ai-table td, .ai-example .ai-table th { padding: .4rem .55rem; text-align: center; }

.pitfall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.pitfall { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .9rem; border-left: 3px solid var(--tut-danger); border-radius: 0 8px 8px 0; background: var(--tut-surface); }
.pitfall strong { color: var(--tut-text); font-size: .9rem; }
.pitfall span { color: var(--tut-soft); font-size: .82rem; line-height: 1.45; }

/* The worked-example table is narrow numbers only: let it fit a phone instead of scrolling
   (bot-tutorial.css gives series tables a 520 px minimum for long player names). */
.ai-example .ai-table-wrap > .ai-table { min-width: 0; }

@media (max-width: 600px) {
  #widget-measure-interval canvas, #widget-measure-gate canvas, #widget-measure-cycle canvas { height: 560px; }
  #widget-measure-samples canvas { height: 540px; }
  #widget-measure-mirror canvas { height: 780px; }
  .pitfall-grid { grid-template-columns: 1fr; }
}