/* Trajectory step cell — 38px row: index · kind tag · text · optional message
 * metrics · elapsed time. */

.root {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 8px 0 20px;
  gap: 24px;
  border-radius: 8px;
  border: 1px solid var(--dsw-alias-border-l2);
  background: var(--dsw-alias-bg-layer-3);
  min-width: 0;
}

.selected {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--dsw-alias-brand-primary-new-colorprimary-new-color);
}

.index {
  flex: none;
  width: 24px;
  font: var(--dsw-font-xs-13);
  color: var(--dsw-alias-label-tertiary);
}

.tagSlot {
  flex: none;
  width: 80px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 22px;
  max-width: 100%;
  padding: 0 4px;
  border-radius: 6px;
  font: var(--dsw-font-xs-strong-13);
  white-space: nowrap;
}

.tagSystem {
  color: var(--dsw-alias-label-secondary);
  background: var(--dsw-alias-bg-module-platform);
}

.tagUser {
  color: var(--dsw-alias-state-success-primary);
  background: var(--dsw-alias-state-success-tertiary);
}

.tagContext {
  color: color-mix(
    in srgb,
    var(--dsw-alias-state-success-primary) 68%,
    var(--dsw-alias-label-secondary)
  );
  background: var(--dsw-alias-state-success-tertiary);
}

.tagMessage {
  color: color-mix(
    in srgb,
    var(--dsw-alias-brand-primary-new-colorprimary-new-color) 60%,
    var(--dsw-alias-state-error-secondary)
  );
  background: color-mix(
    in srgb,
    color-mix(
      in srgb,
      var(--dsw-alias-brand-primary-new-colorprimary-new-color) 55%,
      var(--dsw-alias-state-error-secondary)
    ) 15%,
    var(--dsw-alias-bg-layer-1)
  );
}

.tagTool {
  color: var(--dsw-alias-state-warn-label);
  background: var(--dsw-alias-state-warn-tertiary);
}

/* run_code sub-dispatch cells: the business tint plus an indent so the
   nesting under the parent Tool cell reads at a glance. */
.tagSubtool {
  color: color-mix(
    in srgb,
    var(--dsw-alias-state-warn-label) 62%,
    var(--dsw-alias-label-tertiary)
  );
  background: color-mix(
    in srgb,
    var(--dsw-alias-state-warn-tertiary) 58%,
    var(--dsw-alias-bg-layer-1)
  );
}

.root[data-kind='subtool'] {
  padding-left: 28px;
}

.text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--dsw-font-xs-13);
  color: var(--dsw-alias-label-primary);
}

/* Same column geometry as TrajectoryTurnHeader: 4×71 + 3×12 = 320. */
.trailing {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 320px;
  gap: 12px;
  min-width: 0;
}

.metric,
.time {
  flex: none;
  width: 71px;
  text-align: left;
  font: var(--dsw-font-xs-13);
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
}
