table.tt {

  border: 1px solid;
  td, th {
    border-left: 1px solid;
  }
  tr {
    border-bottom: 1px solid;
  }
}


/*
 * Circled blocks on a K-map, tinted in step with the legend beside it. A
 * cell in the nth block carries class block-<n>, and the nth <li> fragment
 * of the legend turns that block's tint on (and stepping back turns it off
 * again). Each block fills its own background LAYER rather than setting the
 * one background color, so a cell in two blocks shows both tints mixed; the
 * layer's color is a registered custom property so it can fade in from
 * transparent. Three blocks are provided for; a fourth needs a property, a
 * layer, and a legend rule. The tables come from bin/truth-table.ts:
 *   bin/truth-table.ts --k-map --block 'A=block-1' --block 'B & C=block-2' 'A | B & C'
 */
@property --block-1-color {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

@property --block-2-color {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

@property --block-3-color {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

table.tt td {
  background-image:
    linear-gradient(var(--block-1-color), var(--block-1-color)),
    linear-gradient(var(--block-2-color), var(--block-2-color)),
    linear-gradient(var(--block-3-color), var(--block-3-color));
  /* Screen, not plain alpha: on the dark theme the overlaps come out as a
   * light lavender (orange + blue) and cyan (green + blue), clearly
   * different from each other and from the single tints. */
  background-blend-mode: screen;
  transition: --block-1-color 0.8s ease, --block-2-color 0.8s ease, --block-3-color 0.8s ease;
}

div.row:has(li:nth-child(1).visible) td.block-1 {
  --block-1-color: rgb(255 120 0 / 0.6);
}

div.row:has(li:nth-child(2).visible) td.block-2 {
  --block-2-color: rgb(0 200 90 / 0.6);
}

div.row:has(li:nth-child(3).visible) td.block-3 {
  --block-3-color: rgb(70 130 255 / 0.6);
}


div.row {
  display: flex;
  flex-direction: row;
  gap: 2em;
  align-items: center;
  ul li {
    margin-bottom: 0.5em;
  }

}

/* The multiplexer glitch animation (mux.svg, inlined into its slide). The
   wire groups are `custom` fragments — never hidden — whose color (and so
   their stroke) changes when the fragment becomes visible; the output
   digits are ordinary fade fragments. One transition time for all of it. */
svg.mux-anim .fragment {
  transition: all 0.8s ease;
}

svg.mux-anim .fragment.wire-on.visible {
  color: #f00;
}

svg.mux-anim .fragment.wire-off.visible {
  color: #fff;
}

svg.mux-anim .fragment.wire-stale.visible {
  color: #666;
}

/* The diagram shares its slide with the title and the expression, so it is
   drawn a little under its natural 650px to leave room for the captions. */
svg.mux-anim {
  width: 540px;
  height: auto;
}

/* Its captions share one grid cell and replace each other click by click. */
.mux-captions {
  display: grid;
  font-size: 0.9em;
}

.mux-captions > p {
  grid-area: 1 / 1;
}

/* The Gray code construction: captions either side of the table, each side
   stacking its paragraphs in one grid cell so they replace each other
   click by click (the right side narrates clicks 1–9, the left 10–11). */
.rbc-build {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2em;
  align-items: center;
}

.rbc-captions {
  display: grid;
  text-align: left;
  font-size: 0.9em;
}

.rbc-captions > p {
  grid-area: 1 / 1;
}