/* Conway's Game of Life sandbox styles for "How We Are Thinking About AI"
 *
 * Scoped under .prose to inherit the blog post layout's typography and
 * not leak elsewhere. Pairs with gol.js. The general editorial primitives
 * (.pullquote, .callout, .figure) live in the destination repo's blog
 * layout — these styles are only the GoL-specific bits.
 */

.prose .gol-stage {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0B1220;
}

.prose .gol-canvas {
  display: block;
  width: 100%;
  height: 360px;
  cursor: crosshair;
  touch-action: manipulation;
}

.prose .gol-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-top: 0.875rem;
}

.prose .gol-btn {
  appearance: none;
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  color: #111827;
  padding: 0.4rem 0.85rem;
  border-radius: 0.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.prose .gol-btn:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.prose .gol-btn-primary {
  background: #DD4912;
  border-color: #DD4912;
  color: #FFFFFF;
}

.prose .gol-btn-primary:hover {
  background: #B73B0F;
  border-color: #B73B0F;
}

.prose .gol-slider {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: #4B5563;
}

.prose .gol-slider input[type="range"] {
  accent-color: #DD4912;
  width: 8rem;
}

.prose .gol-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: #4B5563;
}

.prose .gol-sep { color: #D1D5DB; }

.prose .gol-hint {
  margin-left: auto;
  color: #6B7280;
  font-style: italic;
}

@media (max-width: 640px) {
  .prose .gol-canvas { height: 300px; }
  .prose .gol-hint { margin-left: 0; flex-basis: 100%; }
}