/* ---- `einops-console` (../lesson-figure-einops-console.js) -----------------
   Theme tokens only (variables.css). Each number is an absolutely placed
   cell; one ink per index of the input's leading axis (.w0–.w5 set --c),
   so a number keeps its colour on the way to the result. Tokens that fly
   between panels live in .dd-eco-fly, over the whole figure. */
.dd-figure-eco { position: relative; max-width: 720px; outline: none; }
.dd-figure-eco:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.dd-eco-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; font-size: 0.8em; }
.dd-eco-chips button,
.dd-eco-transport button {
  font: inherit;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k)));
  color: var(--text);
  cursor: pointer;
}
.dd-eco-chips button:hover,
.dd-eco-transport button:hover { border-color: var(--accent); }
.dd-eco-chips button[aria-pressed="true"],
.dd-eco-transport .dd-eco-play {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* The call line: einops.op(x, '<pattern>', <sizes>). The pattern input is
   transparent over a painted copy, so axis names keep their colours. */
.dd-eco-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--muted);
  font-family: var(--code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.86em;
}
/* Capped at the line: a long pattern scrolls inside the box (the painted
   copy follows the input's scrollLeft) instead of widening the page. */
.dd-eco-patwrap { position: relative; display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.dd-eco-pat,
.dd-eco-patshow {
  font: inherit;
  padding: 1px 2px;
  border: 0;
  letter-spacing: 0;
  white-space: pre;
}
.dd-eco-patshow { position: absolute; left: 0; top: 0; color: var(--text); pointer-events: none; }
.dd-eco-pat {
  position: relative;
  min-width: 4ch;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  border-bottom: 1px dashed var(--border-strong);
  outline: none;
}
.dd-eco-pat:focus { border-bottom-color: var(--accent); }
.dd-eco-kw {
  font: inherit;
  width: 13ch;
  padding: 1px 4px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
}
.dd-eco-kw:focus { border-color: var(--accent); outline: none; }
.dd-eco-kw[hidden], .dd-eco-calltail[hidden] { display: none; }
.dd-eco-err:empty { display: none; }
.dd-eco-err { margin-top: 5px; color: var(--danger); font-size: 0.84em; }

/* Axis-name inks, shared by the call line and the loop code. */
.dd-eco-n0 { color: var(--info); font-weight: 700; }
.dd-eco-n1 { color: var(--warn); font-weight: 700; }
.dd-eco-n2 { color: var(--accent-2); font-weight: 700; }
.dd-eco-n3 { color: var(--ok); font-weight: 700; }
.dd-eco-n4 { color: var(--accent); font-weight: 700; }
.dd-eco-n5 { color: var(--danger); font-weight: 700; }

.dd-eco-bench {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 10px 0 6px;
  padding: 2px 2px 4px;
  overflow-x: auto;
}
.dd-figure-eco.is-bad .dd-eco-bench { opacity: 0.35; }
.dd-eco-ptitle { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-family: var(--code-font, ui-monospace, monospace); }
.dd-eco-ptitle b { color: var(--text); }
.dd-eco-stage { position: relative; font-family: var(--code-font, ui-monospace, SFMono-Regular, Menlo, monospace); }
.dd-eco-op, .dd-eco-arrow { color: var(--muted); font-size: 18px; }

.dd-eco-cell {
  --c: var(--border-strong);
  --c-rgb: var(--tint-rgb);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1.5px solid var(--c);
  background: rgb(var(--c-rgb) / 0.15);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: opacity 0.25s, box-shadow 0.2s, background 0.2s;
}
.dd-eco-cell.w0 { --c: var(--info);     --c-rgb: var(--info-rgb); }
.dd-eco-cell.w1 { --c: var(--warn);     --c-rgb: var(--warn-rgb); }
.dd-eco-cell.w2 { --c: var(--accent-2); --c-rgb: var(--accent-2-rgb); }
.dd-eco-cell.w3 { --c: var(--ok);       --c-rgb: var(--ok-rgb); }
.dd-eco-cell.w4 { --c: var(--accent);   --c-rgb: var(--accent-rgb); }
.dd-eco-cell.w5 { --c: var(--danger);   --c-rgb: var(--danger-rgb); }
.dd-eco-cell.src { box-shadow: 0 0 0 2px var(--text); z-index: 1; }
.dd-eco-out .dd-eco-cell { cursor: pointer; }
.dd-eco-out .dd-eco-cell:not(.done) {
  color: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
}
.dd-eco-out .dd-eco-cell.cur { box-shadow: 0 0 0 2.5px var(--accent); z-index: 1; }
.dd-eco-out .dd-eco-cell.landing { color: transparent; }

/* The "einops" letters: 0/1 pixels, ink in the image's colour. */
.dd-eco-stage.is-img .dd-eco-cell { border: 0; border-radius: 1px; background: rgb(var(--tint-rgb) / calc(0.06 * var(--tint-k))); }
.dd-eco-stage.is-img .dd-eco-cell.ink { background: var(--c); }
.dd-eco-stage.is-img .dd-eco-cell.src { box-shadow: 0 0 0 1.5px var(--text); }
.dd-eco-out .dd-eco-stage.is-img .dd-eco-cell:not(.done) { background: rgb(var(--tint-rgb) / calc(0.03 * var(--tint-k))); }
.dd-eco-out .dd-eco-stage.is-img .dd-eco-cell.cur { box-shadow: 0 0 0 1.5px var(--accent); }

.dd-eco-fly { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.dd-eco-token {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
  transition: transform 0.6s cubic-bezier(.22, .9, .28, 1), opacity 0.6s;
}

.dd-eco-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82em; }
.dd-eco-prog {
  flex: 1 1 80px;
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--tint-rgb) / calc(0.08 * var(--tint-k)));
  overflow: hidden;
}
.dd-eco-prog i { display: block; height: 100%; background: var(--accent); transition: width 0.25s; }
.dd-eco-count { color: var(--muted); font-variant-numeric: tabular-nums; }

.dd-eco-hood { margin-top: 8px; }
.dd-eco-hoodtitle { margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.dd-eco-code {
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--panel-deep);
  color: var(--text);
  font-family: var(--code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78em;
  line-height: 1.55;
  overflow-x: auto;
}
.dd-eco-line { display: flex; gap: 1.5em; white-space: pre; }
.dd-eco-line.hot { margin: 0 -10px; padding: 0 10px; background: rgb(var(--accent-rgb) / 0.12); }
.dd-eco-note { color: var(--muted); }
.dd-eco-say {
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--text);
  font-size: 0.9em;
  line-height: 1.45;
}
.dd-figure-eco.is-bad .dd-eco-say { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .dd-eco-token { display: none; }
  .dd-eco-cell, .dd-eco-prog i { transition: none; }
}
.dd-eco-fly .dd-eco-cell.ink { border: 0; border-radius: 1px; background: var(--c); }