/* Digital Greenhouse — chess.css
   Board diagrams for the /chess lessons. The boards are inline SVG with fixed
   square colours (they read the same in light and dark mode); the a–h and 1–8
   labels use currentColor so they follow the page text. Pieces come from one
   hidden sprite per page (<symbol id="cp-wK"> and so on). */

.cb-fig {
  margin: var(--space-6, 2rem) 0;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--color-line, #d8e2db);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-card, #fff);
  color: var(--text, #0B1F17);
}
.cb-fig .cb { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; }
.cb-fig figcaption { margin-top: var(--space-3, .75rem); font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); line-height: 1.55; }
.cb-fig figcaption strong { color: var(--text, #0B1F17); }

/* two or three boards side by side, stacking on a phone */
.cb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4, 1rem); align-items: start; }
.cb-row figure { margin: 0; }
.cb-row figure figcaption { margin-top: .4rem; text-align: center; }

/* the six pieces in a row, with their names */
.prose .cb-pieces, .cb-pieces { list-style: none; padding-left: 0; }
.cb-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--space-3, .75rem); margin: 0; padding: 0; list-style: none; }
.cb-pieces li { text-align: center; font-size: var(--fs-sm, .9rem); }
.cb-pieces svg { display: block; width: 64px; height: 64px; margin: 0 auto .3rem; background: #eed8b4; border-radius: 6px; }
.cb-pieces strong { display: block; }

/* a game score set out move by move */
.cb-moves { font-variant-numeric: tabular-nums; }
.cb-moves td:first-child { color: var(--text-muted, #5b6b62); width: 3rem; }
.cb-pgn {
  white-space: pre-wrap; overflow-wrap: anywhere;
  margin: var(--space-4, 1rem) 0; padding: var(--space-4, 1rem);
  background: var(--color-mist, #E6EFE9); color: var(--text, #0B1F17);
  border: 1px solid var(--color-line, #d8e2db); border-radius: var(--radius-sm, 6px);
  font-size: .85rem; line-height: 1.6;
}
[data-theme="dark"] .cb-pgn { background: rgba(0, 0, 0, .25); border-color: rgba(234, 243, 237, .15); }
.cb-pgn code { background: none; padding: 0; border: 0; font-size: inherit; color: inherit; white-space: inherit; }