/* ca-demos.css — styling for the cellular-automata widgets. Theme-aware via the
   site's CSS custom properties (--bg, --text, --surface, --rule, --link …). */

[data-ca] {
  margin: 1.6rem 0;
  border: 1px solid var(--surface-border, #e4e2d8);
  border-radius: 12px;
  padding: 0.8rem;
  background: var(--surface, #f4f3ee);
}
[data-ca] .ca-wrap { line-height: 0; }
[data-ca] .ca-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border-radius: 8px;
  background: var(--bg, #fdfdfb);
}
[data-ca="life"] .ca-canvas { cursor: crosshair; touch-action: none; }

.ca-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.ca-btn, .ca-chip {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  border: 1px solid var(--surface-border, #e4e2d8);
  background: var(--bg, #fdfdfb);
  color: var(--text, #1a1a1a);
  border-radius: 7px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  line-height: 1;
}
.ca-btn:hover, .ca-chip:hover { border-color: var(--link, #0b5fa5); color: var(--link, #0b5fa5); }
.ca-btn.ca-sm, .ca-chip { font-size: 0.78rem; padding: 0.24rem 0.5rem; }
.ca-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: var(--muted, #777);
}
.ca-slider { flex: 1 1 140px; min-width: 120px; accent-color: var(--link, #0b5fa5); }
.ca-num {
  width: 4.2rem;
  font-family: var(--font-mono, monospace);
  border: 1px solid var(--surface-border, #e4e2d8);
  background: var(--bg, #fdfdfb);
  color: var(--text, #1a1a1a);
  border-radius: 6px; padding: 0.2rem 0.35rem;
}

/* rule-class strip */
.ca-strip {
  display: flex;
  width: 100%;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--surface-border, #e4e2d8);
}
.ca-rulecell { flex: 1 1 0; transition: transform 0.08s; }
.ca-rulecell:hover { transform: scaleY(1.25); }
.ca-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted, #777); }
.ca-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.ca-sw { width: 0.9rem; height: 0.9rem; border-radius: 3px; display: inline-block; }
.ca-note { font-size: 0.82rem; color: var(--muted, #777); margin: 0.6rem 0 0; }

/* CSS-only carousel: radio inputs drive visibility, no JS. */
.ca-carousel {
  margin: 1.6rem 0;
  border: 1px solid var(--surface-border, #e4e2d8);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: var(--surface, #f4f3ee);
}
.ca-carousel-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ca-carousel-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.ca-carousel-tab {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  border: 1px solid var(--surface-border, #e4e2d8);
  background: var(--bg, #fdfdfb);
  color: var(--muted, #777);
  border-radius: 7px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
}
.ca-carousel-radio:focus-visible + .ca-carousel-tabs .ca-carousel-tab,
.ca-carousel-tab:hover { border-color: var(--link, #0b5fa5); }
.ca-carousel-pane { display: none; margin: 0; line-height: 1.5; }
#ca-explain-1:checked ~ .ca-carousel-tabs label[for="ca-explain-1"],
#ca-explain-2:checked ~ .ca-carousel-tabs label[for="ca-explain-2"],
#ca-explain-3:checked ~ .ca-carousel-tabs label[for="ca-explain-3"] {
  border-color: var(--link, #0b5fa5);
  color: var(--link, #0b5fa5);
}
#ca-explain-1:checked ~ .ca-carousel-pane[data-pane="1"],
#ca-explain-2:checked ~ .ca-carousel-pane[data-pane="2"],
#ca-explain-3:checked ~ .ca-carousel-pane[data-pane="3"] {
  display: block;
}