/* Figures from lib/figures.js, shared by the site (copied to site/assets/figures.css) and every
   workbook build. Colors come from the page's own tokens (--ink, --accent, --soft, --rule,
   --muted), so the black-and-white paperback gets grays and the Kindle and site get the accent.
   Meaning never rides on hue alone: highlighted cells are shaded, the focus cell is darker and
   outlined, and "before" shapes are dashed. */
.fig { --fig-ink: var(--ink, #111); --fig-accent: var(--accent, #333); --fig-muted: var(--muted, #666);
  --fig-rule: var(--rule, #ccc); --fig-soft: color-mix(in srgb, var(--fig-accent) 15%, transparent);
  --fig-mid: color-mix(in srgb, var(--fig-accent) 34%, transparent); }
.fig-wrap { margin: 8px 0 10px; }
.fig { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; vertical-align: middle; line-height: 1.2; }
/* Step figures sit in their own grid row under the step, spanning its columns. */
.work li > .step-figs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.fig .katex { font-size: 1em; }
.fig-op { display: inline-flex; flex-direction: column; align-items: center; color: var(--fig-ink); }
.fig-oplabel { font-size: 0.78em; color: var(--fig-muted); margin-bottom: 1px; }

/* shapes */
.fig-shape { display: inline-flex; flex-direction: column; align-items: center; }
.fig-cols { font-size: 0.85em; color: var(--fig-muted); margin-bottom: 2px; }
.fig-mid { display: inline-flex; align-items: center; gap: 4px; }
.fig-rows { font-size: 0.85em; color: var(--fig-muted); }
.fig-stack { position: relative; display: inline-block; }
.fig-block { position: absolute; box-sizing: border-box; border: 1.2px solid var(--fig-ink); background: var(--fig-soft); background-color: color-mix(in srgb, var(--fig-accent) 15%, var(--surface, #fff)); }
.fig-name { font-size: 0.95em; margin-top: 3px; }
.fig-batch { font-size: 0.75em; color: var(--fig-muted); }

/* cells */
.fig-mat { display: inline-flex; flex-direction: column; align-items: center; }
.fig-mat .fig-name { order: 2; }
/* Brackets: side rules plus short top and bottom ticks at each corner. */
.fig-grid { border-collapse: separate; border-spacing: 0; margin: 0; padding: 2px 3px;
  border-left: 1.2px solid var(--fig-ink); border-right: 1.2px solid var(--fig-ink);
  background:
    linear-gradient(var(--fig-ink), var(--fig-ink)) top left / 5px 1.2px no-repeat,
    linear-gradient(var(--fig-ink), var(--fig-ink)) bottom left / 5px 1.2px no-repeat,
    linear-gradient(var(--fig-ink), var(--fig-ink)) top right / 5px 1.2px no-repeat,
    linear-gradient(var(--fig-ink), var(--fig-ink)) bottom right / 5px 1.2px no-repeat; }
.fig-grid td { padding: 3px 7px; text-align: center; font-size: 1em; border: 0; min-width: 1.4em; }
.fig-grid td.fig-hl { background: var(--fig-soft); }
.fig-grid td.fig-focus { background: var(--fig-mid); box-shadow: inset 0 0 0 1.2px var(--fig-ink); font-weight: 600; }

/* plane */
.fig-plane { display: inline-block; }
.fig-canvas { position: relative; display: block; }
.fig-canvas svg { display: block; overflow: hidden; }
.fig-label { position: absolute; transform: translate(-50%, -50%); font-size: 1em; white-space: nowrap; color: var(--fig-ink); background: rgba(255, 255, 255, 0.75); padding: 0 1px; border-radius: 2px; }
.fig-axis { stroke: var(--fig-rule); stroke-width: 0.8; }
.fig-faint { stroke: var(--fig-rule); stroke-width: 0.8; stroke-dasharray: 2 2; }
.fig-ink { stroke: var(--fig-ink); stroke-width: 1.4; fill: none; }
.fig-thin { stroke-width: 0.8; }
.fig-strong { stroke: var(--fig-accent); stroke-width: 2; fill: none; }
.fig-head { stroke-width: 0.6; }
.fig-ink.fig-head { fill: var(--fig-ink); }
.fig-strong.fig-head { fill: var(--fig-accent); }
.fig-dash { stroke: var(--fig-muted); stroke-width: 1.1; stroke-dasharray: 3.5 2.5; fill: none; }
.fig-dashpoly { stroke: var(--fig-muted); stroke-width: 1; stroke-dasharray: 3.5 2.5; fill: none; }
.fig-softpoly { stroke: var(--fig-ink); stroke-width: 1; fill: var(--fig-soft); }
.fig-label { background: color-mix(in srgb, var(--surface, #fff) 80%, transparent); }

/* broadcasting: the dashed outline is the shape an operand stretches to */
.fig-block.fig-ghost { background: none; background-color: transparent; border: 1.2px dashed var(--fig-muted); }

/* layers: shaded grids, darker = larger; negative entries in a second tone */
.fig { --fig-neg: var(--bad, #8a3b2e); }
.fig-heat { border-collapse: collapse; margin: 0; border: 1px solid var(--fig-ink); }
.fig-heat td { width: var(--cell); height: var(--cell); min-width: var(--cell); padding: 1px 3px; border: 0.5px solid var(--fig-rule); text-align: center; font-size: 0.85em; color: var(--fig-ink); }
.fig-heat td.fig-neg { font-style: italic; }
.fig-heat-bare td { padding: 0; }

/* einsum */
.fig-einsum { flex-direction: column; align-items: flex-start; }
.fig-node { fill: color-mix(in srgb, var(--fig-accent) 15%, var(--surface, #fff)); stroke: var(--fig-ink); stroke-width: 1.2; }
.fig-nodelabel { background: none; }
.fig-dot { fill: var(--fig-ink); }
.fig-caption { font-size: 0.95em; color: var(--fig-ink); }
.fig-dot-accent { fill: var(--fig-accent); }

/* graph */
.fig-gnode { fill: var(--surface, #fff); stroke: var(--fig-ink); stroke-width: 1.2; }
.fig-gnode-accent { fill: color-mix(in srgb, var(--fig-accent) 30%, var(--surface, #fff)); stroke: var(--fig-accent); stroke-width: 2; }
.fig-gnode-label { font-weight: 600; }