/* Conway's Game of Life as a PUDL applet. Every rule is scoped under
   .pc-conway, and the board's colours are PUDL tokens, so both themes and
   any site palette apply; the applet repaints when the theme changes.
   Flowing (in an article or on its own page) the canvas keeps its true
   pixel size and the stage scrolls if a huge board outgrows the column.
   Filling (in a PUDL window) the canvas scales down to fit its box, and
   the script maps clicks back through the scale. */

.pc-conway {
  --conway-dead: var(--surface);
  --conway-live: var(--accent);
  --conway-grid: var(--border);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}

.pc-conway .conway-share { max-width: 560px; }
.pc-conway .conway-share .dialog-title,
.pc-conway .conway-help .dialog-title { margin-top: 0; }
.pc-conway .conway-help { max-width: 620px; }
.pc-conway .conway-help .dialog-body { color: var(--text); }
.pc-conway .conway-help h4 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-md); }
.pc-conway .conway-help p { margin: 0 0 var(--space-2); }
.pc-conway .conway-help ul { margin: 0; padding-left: 1.2em; }
.pc-conway .conway-help li { margin: var(--space-1) 0; }
.pc-conway .conway-share-help { margin: 0 0 var(--space-3); }
.pc-conway .conway-share-url { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-sm); }
/* PUDL's folding toolbar (0.68.1) across the game's width, its groups in
   the middle over the board. The game's column centres its children, which
   would size the toolbar to its contents so that it never folds; it
   stretches instead, and folds as the window narrows. */
.pc-conway .conway-buttons { align-self: stretch; min-width: 0; }
.pc-conway .conway-buttons .toolbar { justify-content: center; }
.pc-conway .conway-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pc-conway .conway-stage { max-width: 100%; overflow: auto; }
.pc-conway canvas { display: block; background: var(--conway-dead); }

.pc-conway .conway-more { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.pc-conway .conway-more > summary {
  cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.pc-conway .conway-settings {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
/* A number and what it counts, the number PUDL's number field (0.74.0). */
.pc-conway .conway-num { display: flex; align-items: center; gap: 8px; }
.pc-conway .conway-num .number-field { width: 9em; flex: none; }
.pc-conway .conway-hint { font-size: var(--text-xs); color: var(--text-muted); margin: 4px 0 0; }

/* === Filling a window ==================================================== */
.pc-conway-fill { flex: 1 1 auto; min-height: 0; }
/* The settings, when opened in a window, scroll inside their own share
   rather than crushing the board to nothing. */
.pc-conway-fill .conway-more { flex: 0 1 auto; min-height: 0; overflow: auto; }
.pc-conway-fill .conway-stage {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pc-conway-fill canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* The window body hands its box down to the applet, the same chain the
   sudoku uses. */
.win-body:has(.pc-conway-fill) { display: flex; flex-direction: column; overflow: hidden; }
.win-body:has(.pc-conway-fill) .post-content {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  max-width: none; margin: 0; padding: 0;
}
.win-body:has(.pc-conway-fill) .post-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}