/* Bots: the six rules beside a loom, paper first in a tone band, the shared board beside a stock board, Autopilot in the dark. */
.section-head:has(+ .rules) { --lead: 6; } /* the lead starts where the list below starts */

.pic-note { margin-block-start: 0.75rem; font-size: var(--step-small); color: var(--muted); max-inline-size: 40ch; }

/* the six rules: two-ended rows beside a tall picture */
.rules { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.rules-pic { grid-column: 1 / span 4; position: sticky; inset-block-start: calc(var(--header) + 24px); }
.rules-pic img { inline-size: 100%; block-size: min(70svh, 640px); object-fit: cover; border-radius: var(--radius); }
.rules-list { grid-column: 6 / span 7; display: grid; }
.rule { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gutter); row-gap: 0.25rem; align-items: baseline; padding-block: 1.6rem; }
.rule:first-child { padding-block-start: 0; }
.rule h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

/* paper first */
.paper { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: center; }
.paper-copy { grid-column: 1 / span 6; }
.paper-lead { margin-block-start: 1.5rem; font-size: var(--step-lead); line-height: 1.3; max-inline-size: 38ch; }
.paper-figures { margin-block-start: var(--block-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paper-list { margin-block-start: var(--block-gap); padding-inline-start: 1.1em; list-style: disc; display: grid; gap: 0.75rem; max-inline-size: 56ch; }
.paper-pic { grid-column: 8 / span 5; justify-self: center; }
.paper-pic img, .auto-pic img { inline-size: min(100%, 360px); }

/* the shared board */
.board-section { padding-block-start: var(--section); }
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.board-pic { grid-column: 1 / span 4; position: sticky; inset-block-start: calc(var(--header) + 24px); }
.board-pic img { inline-size: 100%; block-size: auto; max-block-size: 72svh; object-fit: cover; border-radius: var(--radius); }
.board-main { grid-column: 6 / span 7; }
.board-meta { margin-block-start: 1.5rem; font-variant-numeric: tabular-nums; }
.board-meta[data-state='error'] { color: var(--warn); }
.board-note { margin-block: 0.5rem 2.5rem; max-inline-size: 56ch; }
.board-table td .tokens { display: block; }
.board-table td.few { color: var(--muted); }
.board-table .pos { color: var(--pos); }
.board-table .neg { color: var(--warn); }
.board-fallback { margin-block-start: 1.5rem; }
.board-source { margin-block-start: 1.5rem; }

/* Autopilot */
.auto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: center; }
.auto-copy { grid-column: 1 / span 6; display: grid; gap: 1.25rem; justify-items: start; }
.auto-copy > p { max-inline-size: 44ch; }
.auto-lead { margin-block-start: 0.25rem; font-size: var(--step-lead); line-height: 1.3; }
.auto-actions { margin-block-start: 0.75rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.auto-pic { grid-column: 8 / span 5; justify-self: center; }
.auto-pic .pic-note { color: var(--on-dark-muted); }

@media (max-width: 1100px) {
  .rules-pic, .rules-list, .paper-copy, .paper-pic, .board-pic, .board-main, .auto-copy, .auto-pic { grid-column: 1 / -1; }
  .rules-pic, .board-pic { position: static; }
  .rules-pic img { block-size: 50svh; }
  .board-pic img { max-block-size: 60svh; inline-size: auto; }
  .paper-pic, .auto-pic { justify-self: start; }
}

@media (max-width: 760px) {
  .rule { grid-template-columns: 1fr; padding-block: 1.25rem; }
  .paper-figures { grid-template-columns: 1fr; gap: 1.5rem; }
  .auto-actions .button { inline-size: 100%; }
}