/* One run, twice: a flat list of steps and the same steps nested by activation. */
:where(.scene-nest) .nest-row + .nest-row {
  margin-top: 22px;
}

:where(.scene-nest, .scene-obs) .nest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

:where(.scene-nest, .scene-obs) .nest-chips span {
  padding: 2px 9px;
  border: 1px solid;
  border-radius: 999px;
  font: 0.72rem var(--mono);
}

:where(.scene-nest, .scene-obs) .nest-act {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: var(--radius-sm);
}

:where(.scene-nest, .scene-obs) .nest-act > .nest-act {
  margin-left: 10px;
}

:where(.scene-nest, .scene-obs) .nest-name {
  margin: 0 0 5px;
  font: 700 0.76rem var(--mono);
}

:where(.scene-nest) .nest-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* One hue per activation, shared by every figure that names one so the eye can carry a
   colour from the nested trace into what is collected out of it. */
:where(.scene-nest, .scene-collect, .scene-obs) [data-act="0"] {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

:where(.scene-nest, .scene-collect, .scene-obs) [data-act="1"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

:where(.scene-nest, .scene-collect, .scene-obs) [data-act="2"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
}

:where(.scene-nest, .scene-collect, .scene-obs) [data-act="3"] {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
}

:where(.scene-nest, .scene-collect, .scene-obs) [data-act="4"] {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, transparent);
  background: color-mix(in srgb, var(--caution) 10%, transparent);
}

:where(.scene-nest, .scene-collect, .scene-obs) [data-act="5"] {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

/* Where an activation handed control down: the callee's hue, standing in its path for
   the steps the nesting keeps out of it. */
:where(.scene-nest, .scene-obs) .nest-chips span.nest-callmark {
  align-self: stretch;
  min-height: 19px;
  width: 3px;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: currentcolor;
}