/* Conway's life. Playful freedoms per design-system.md section 10: the stage
   sets its own art direction on near black, the page around it keeps the site
   system, focus visibility, keyboard operability and reduced motion. */

.lf {
  /* The stage field, and the colours the events on it are drawn in. Recorded
     here beside the field so the palette lives in one place; the canvas reads
     its own copy in life.mjs, since an ImageData takes numbers, not custom
     properties. Born is a warm spark, alive is the site accent, and a death
     cools through the three embers to the field over three generations.
     Measured on the field: 14.2:1 for born, 7.4:1 for alive. The embers are
     a trail rather than content, and the readout below the stage carries the
     same information in words. */
  --lf-field: #0A0D12;
  --lf-born: #FFD86B;
  --lf-alive: #4FA3FF;
  --lf-ember-1: #E86A4A;
  --lf-ember-2: #8A3B28;
  --lf-ember-3: #4A2018;
}

.lf__about {
  max-width: var(--measure);
  color: var(--text-2);
}

/* -------------------------------------------------------- the toolbar */

.lf__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4) var(--s-5);
  margin-block: var(--s-5) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.lf__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.lf__speed {
  min-width: 200px;
  flex: 1 1 200px;
}

.lf__field {
  min-width: 200px;
  flex: 1 1 200px;
}

.lf__value {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
}

.lf__slider {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
}

/* The checkbox sits beside 44px controls, so it needs the same footprint to
   line up with them rather than hugging the top of the row. */
.lf__wrap {
  align-items: center;
  min-height: 44px;
}

/* ---------------------------------------------------------- the stage */

.lf__canvas {
  display: block;
  width: 100%;
  height: auto;
  /* Both grid sizes are three by two, so the stage keeps one shape. */
  aspect-ratio: 3 / 2;
  background: var(--lf-field);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* The stage takes the drag itself, so the page keeps normal scrolling. */
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.lf__readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.lf__num {
  color: var(--accent);
}

.lf__legend {
  max-width: var(--measure);
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------- the legend */

.lf__panel {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.lf__panelTitle {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-block-end: var(--s-3);
}

.lf__keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2) var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.lf__keys kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px var(--s-2);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: var(--t-xs);
  text-align: center;
}

.lf__note {
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ------------------------------------------------- evolution mode (18e) */

/* The stage colours are declared in life.mjs and evo-world.mjs, because an
   ImageData takes numbers rather than custom properties. They are mirrored
   here so the legend swatches beside the words are the same colours the
   stage draws, and so the palette still lives in one readable place. */
.lf {
  --ev-plant: #3FA65C;
  --ev-nutrient: #6B5B45;
  --ev-wall: #8A8F98;
  --ev-body: hsl(320 70% 60%);
  --ev-mouth: hsl(320 70% 75%);
  --ev-eye: hsl(320 70% 90%);
  --ev-fang: hsl(320 70% 45%);
  --ev-armor: hsl(320 49% 60%);
  --ev-newborn: #FFFFFF;
  --ev-dying: #E86A4A;
}

.lf__modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-block: var(--s-4) var(--s-3);
}

.lf__saved {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* The import control is a label for a visually hidden file input, so it
   still reads and behaves as the button it looks like. */
.ev__import {
  cursor: pointer;
}

.ev__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2) var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.ev__legend li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ev__swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

.ev__swatch--plant { background: var(--ev-plant); }
.ev__swatch--nutrient { background: var(--ev-nutrient); }
.ev__swatch--wall { background: var(--ev-wall); }
.ev__swatch--body { background: var(--ev-body); }
.ev__swatch--mouth { background: var(--ev-mouth); }
.ev__swatch--eye { background: var(--ev-eye); }
.ev__swatch--fang { background: var(--ev-fang); }
.ev__swatch--armor { background: var(--ev-armor); }
.ev__swatch--newborn { background: var(--ev-newborn); }
.ev__swatch--dying { background: var(--ev-dying); }

/* ------------------------------------------------------- the inspector */

.ev__facts {
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-sm);
}

.ev__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--line);
  padding-block-end: var(--s-2);
}

.ev__factName { color: var(--text-2); }
.ev__factValue { color: var(--text-1); }

.ev__bodymap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: flex-start;
}

.ev__map {
  border-collapse: separate;
  border-spacing: 2px;
  flex: none;
}

/* Every cell of the body map carries its type in visually hidden text, so
   the shape is readable without seeing any colour at all. */
.ev__cell {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 3px;
  background: var(--bg-0);
  border: 1px solid var(--line);
}

.ev__cell--mouth { background: var(--ev-mouth); }
.ev__cell--mover { background: var(--ev-body); }
.ev__cell--photosynth { background: var(--ev-plant); }
.ev__cell--eye { background: var(--ev-eye); }
.ev__cell--fang { background: var(--ev-fang); }
.ev__cell--armor { background: var(--ev-armor); }

.ev__wires {
  margin: 0;
  padding-left: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
  min-width: 240px;
  flex: 1 1 240px;
}

.ev__wires li + li { margin-block-start: var(--s-2); }