/*
  Deck-specific overrides on top of ../../theme/slides-theme.css.
*/

/* ---- bell-task title-only slide (see decks/python-intro for the pattern this borrows) ---- */

/* ---- run-length-encoding pixel grid: a nonogram-style row of cells,
   with a text label to the left showing that row's RLE clue. A cell with
   class "on" and "fragment" starts in its empty/off look and swaps to the
   filled look once reveal.js marks it .visible — no opacity trick needed,
   the "before" state IS the pre-fragment style. ---- */
.pixel-demo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0.6em;
}
.pixel-row {
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.pixel-row .row-label {
  font-family: var(--mono);
  font-size: 0.5em;
  color: var(--ink-dim);
  width: 11em;
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pixel-row .cells {
  display: flex;
  gap: 2px;
}
.pixel-row .cell {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--rule);
  box-sizing: border-box;
}
.pixel-row .cell.on {
  background: var(--accent);
  border-color: var(--accent);
}
/* pre-fragment: even an "on" cell looks off until revealed.
   reveal.css's default ".fragment:not(.custom)" rule sets opacity:0 and
   visibility:hidden — with higher specificity than that but no opacity/
   visibility of its own, this rule alone left the cell invisible instead of
   looking like an empty bordered box, so both must be forced explicitly. */
.pixel-row .cell.on.fragment {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--rule);
  opacity: 1;
  visibility: visible;
}
.pixel-row .cell.on.fragment.visible {
  background: var(--accent);
  border-color: var(--accent);
}

/* small-scale variant for the full UK grid (many more rows/cols, same idea).
   gap is 0 here on purpose: a "before" column with row-labels and an
   "after" column with none must still line up row-for-row when placed
   side by side, so every row's height is pinned to the cell height
   (not the label's natural text height) and no per-row gap is added —
   any mismatch there compounds over 36 rows into a large vertical drift
   between the two columns. */
.pixel-demo.dense { gap: 0; }
.pixel-demo.dense .pixel-row { gap: 0.5em; height: 12px; }
.pixel-demo.dense .row-label {
  width: 10.5em;
  font-size: 0.36em;
  line-height: 12px;
  height: 12px;
  overflow: hidden;
  /* brighter than the shared --ink-dim: at this small a size on a
     projector, the usual dim label colour reads as illegible from the
     back of a classroom */
  color: #c3cdd0;
}
.pixel-demo.dense .cells { gap: 1px; height: 12px; }
.pixel-demo.dense .cell { width: 11px; height: 12px; border-width: 1px; }

/* two pixel-demo.dense grids side by side, rows aligned */
.uk-compare {
  display: flex;
  gap: 2.5em;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0.6em;
}

/* ---- text-rle: same run-length idea applied to a sentence instead of a
   grid of pixels. Each run of repeated characters is wrapped in its own
   .run span; colour alternates by position (odd/even) purely so a reader
   can match a run in the "original" line to its matching run in the
   "encoded" line below — the colour itself carries no other meaning. ---- */
.text-rle { margin-top: 0.8em; }
.text-rle .text-original,
.text-rle .text-encoded {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.95em;
  margin: 0.3em 0;
}
.text-rle .run {
  padding: 0.15em 0.4em;
  border-radius: 3px;
}
.text-rle .run:nth-child(odd) { background: var(--accent-dim); }
.text-rle .run:nth-child(even) { background: var(--cool-dim); }
.text-rle .arrow {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 0.75em;
  margin: 0.3em 0;
}

/* ---- checklist on the closing slide (see decks/python-intro for the
   pattern this borrows) ---- */
.recap-list { list-style: none; margin: 0.6em 0 0; padding: 0; }
.recap-list li {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.25em 0;
  color: var(--ink-dim);
}
.recap-list li.fragment.visible { color: var(--ink); }
.recap-list li::before { content: "\2713  "; color: var(--accent); }